npm - wcs-core - Versions diffs - 7.0.0 → 7.1.0 - Mend

wcs-core 7.0.0 → 7.1.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 (442) hide show

package/dist/collection/components/form-field/form-field.e2e.js ADDED Viewed

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

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

@@ -0,0 +1 @@

+ {"version":3,"file":"form-field.e2e.js","sourceRoot":"","sources":["../../../src/components/form-field/form-field.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\nimport { setWcsContent } from \"../../utils/tests\";\n\ndescribe('Form field component', () => {\n describe('Global', () => {\n describe('Accessibility', () => {\n it('Should put form-field label to aria-label of the spied element when non empty', async () => {\n // Given\n const page = await newE2EPage();\n await setWcsContent(page, `\n <wcs-form-field>\n <wcs-label>Label form field</wcs-label>\n <wcs-input/>\n </wcs-form-field>\n `);\n\n // When\n const input = await page.find('wcs-input >>> input');\n await page.waitForChanges();\n\n // Then\n const ariaLabel = input.getAttribute('aria-label');\n expect(ariaLabel).toBe('Label form field');\n });\n it('Should not put form-field label to aria-label of the spied element when empty', async () => {\n // Given\n const page = await newE2EPage();\n await setWcsContent(page, `\n <wcs-form-field>\n <wcs-label></wcs-label>\n <wcs-input/>\n </wcs-form-field>\n `);\n\n // When\n const input = await page.find('wcs-input >>> input');\n await page.waitForChanges();\n\n // Then\n const ariaLabel = input.getAttribute('aria-label');\n expect(ariaLabel).toBe(null);\n });\n it('Should not concatenate form-field label with form control (switch, checkbox label when form-field label is empty', async () => {\n // Given\n const page = await newE2EPage();\n await setWcsContent(page, `\n <wcs-form-field>\n <wcs-label></wcs-label>\n <wcs-switch>Label switch</wcs-switch>\n </wcs-form-field>\n `);\n\n // When\n const switchInput = await page.find('wcs-switch >>> input');\n await page.waitForChanges();\n\n // Then\n const ariaLabel = switchInput.getAttribute('aria-label');\n expect(ariaLabel).toBe('Label switch');\n });\n });\n });\n describe('With switch', () => {\n describe('Accessibility', () => {\n it('Should concatenate form-field label with switch label', async () => {\n // Given\n const page = await newE2EPage();\n await setWcsContent(page, `\n <wcs-form-field>\n <wcs-label>Label form field</wcs-label>\n <wcs-switch>Label switch</wcs-switch>\n </wcs-form-field>\n `);\n\n // When\n const switchInput = await page.find('wcs-switch >>> input');\n await page.waitForChanges();\n\n // Then\n const ariaLabel = switchInput.getAttribute('aria-label');\n expect(ariaLabel).toBe('Label form field Label switch');\n });\n });\n });\n\n describe('With checkbox', () => {\n describe('Accessibility', () => {\n it('Should concatenate form-field label with checkbox label', async () => {\n // Given\n const page = await newE2EPage();\n await setWcsContent(page, `\n <wcs-form-field>\n <wcs-label>Label form field</wcs-label>\n <wcs-checkbox>Label checkbox</wcs-checkbox>\n </wcs-form-field>\n `);\n\n // When\n const checkboxInput = await page.find('wcs-checkbox >>> input');\n await page.waitForChanges();\n\n // Then\n const ariaLabel = checkboxInput.getAttribute('aria-label');\n expect(ariaLabel).toBe('Label form field Label checkbox');\n });\n });\n });\n describe('With radio-group', () => {\n describe('Accessibility', () => {\n it('Should set aria-label on radio-group element', async () => {\n // Given\n const page = await newE2EPage();\n await setWcsContent(page, `\n <wcs-form-field>\n <wcs-label>Label form field</wcs-label>\n <wcs-radio-group>\n <wcs-radio name=\"SA\" label=\"SNCF\" value=\"1\"></wcs-radio>\n <wcs-radio name=\"SA\" label=\"SNCF Réseau\" value=\"2\"></wcs-radio>\n <wcs-radio name=\"SA\" label=\"SNCF Voyageurs\" value=\"3\"></wcs-radio>\n </wcs-radio>\n </wcs-radio-group>\n </wcs-form-field>\n `);\n\n // When\n const radioGroup = await page.find('wcs-radio-group');\n await page.waitForChanges();\n\n // Then\n const ariaLabel = radioGroup.getAttribute('aria-label');\n expect(ariaLabel).toBe('Label form field');\n });\n });\n });\n});\n"]}

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

@@ -1,5 +1,7 @@
 import { h, Host } from "@stencil/core";
 import { isMutableAriaAttribute } from "../../utils/mutable-aria-attribute";
+import { normalizeWhitespace } from "../../utils/helpers";
+import { isControlComponentWithLabel } from "../../utils/control-component-interface";
 /**
  * Form field component wraps the native input element and add some more functionality on top of it.
  *
@@ -54,8 +56,8 @@ export class FormField {
         this.spiedElement = undefined;
     }
     componentWillLoad() {
-        this.hasSuffix = this.el.querySelector('wcs-button') !== null;
-        this.hasPrefix = this.el.querySelector('wcs-select') !== null;
+        this.hasSuffix = this.el.querySelector('[slot=suffix]') !== null;
+        this.hasPrefix = this.el.querySelector('[slot=prefix]') !== null;
     }
     componentDidLoad() {
         this.initSpiedElement();
@@ -122,33 +124,48 @@ export class FormField {
             return;
         }
     }
-    updateAriaAttributes() {
+    async updateAriaAttributes() {
         if (isMutableAriaAttribute(this.spiedElement)) {
-            this.spiedElement.setAriaAttribute('aria-label', this.label);
+            const ariaLabelParts = [];
+            if (isControlComponentWithLabel(this.spiedElement)) {
+                const innerLabel = await this.spiedElement.getLabel();
+                const combinedLabel = `${this.label || ''} ${innerLabel || ''}`.trim();
+                if (combinedLabel) {
+                    ariaLabelParts.push(normalizeWhitespace(combinedLabel));
+                }
+            }
+            else {
+                if (this.label) {
+                    ariaLabelParts.push(normalizeWhitespace(this.label));
+                }
+            }
+            if (this.description) {
+                ariaLabelParts.push(normalizeWhitespace(this.description));
+            }
             // Sur les autres DS, généralement seul l'erreur est affichée et pas avec la description
             if (this.isError) {
-                if (this.error)
-                    this.spiedElement.setAriaAttribute('aria-description', this.error);
                 this.spiedElement.setAriaAttribute('aria-invalid', 'true');
+                if (this.error) {
+                    ariaLabelParts.push(normalizeWhitespace(this.error));
+                }
             }
             else {
-                if (this.description)
-                    this.spiedElement.setAriaAttribute('aria-description', this.description);
                 this.spiedElement.setAriaAttribute('aria-invalid', 'false');
             }
+            this.spiedElement.setAriaAttribute('aria-label', ariaLabelParts.length > 0 ? ariaLabelParts.join(' ') : null);
         }
     }
     get label() {
         var _a;
-        return (_a = this.el.querySelector('wcs-label')) === null || _a === void 0 ? void 0 : _a.textContent;
+        return ((_a = this.el.querySelector('wcs-label')) === null || _a === void 0 ? void 0 : _a.textContent) || null;
     }
     get description() {
         var _a;
-        return (_a = this.el.querySelector('wcs-hint')) === null || _a === void 0 ? void 0 : _a.textContent;
+        return ((_a = this.el.querySelector('wcs-hint')) === null || _a === void 0 ? void 0 : _a.textContent) || null;
     }
     get error() {
         var _a;
-        return (_a = this.el.querySelector('wcs-error')) === null || _a === void 0 ? void 0 : _a.textContent;
+        return ((_a = this.el.querySelector('wcs-error')) === null || _a === void 0 ? void 0 : _a.textContent) || null;
     }
     updateLabelRequiredFlag(isRequired, label) {
         if (isRequired && label) {
@@ -171,7 +188,7 @@ export class FormField {
         if (this.hasPrefix) {
             classes += ' has-prefix';
         }
-        return (h(Host, { key: 'c9f7040c27e964d32f5d39befad34fd2500ad89b', class: classes }, h("slot", { key: '580960c53f66356e3e8a67436603f3d5d0828409', name: "label" }), h("div", { key: '9f942bf24140c7c3718d4e56b5c356e4471c246b', class: "input-container" }, h("slot", { key: '03ac6862d220be32e3c62d6fa6b49d745f77f1f8', name: "prefix" }), h("slot", { key: '476c0419a0269dde5d3b89b025f475c54fa7a1f4', onSlotchange: () => this.onFormInputSlotChange() }), h("slot", { key: '63e76f50c004442ad27dbdf87c59fdb574a24352', name: "suffix" })), isError ? (h("slot", { name: "error" })) : '', h("slot", { key: 'd6dd0c622edbaf25c38844f62e46efefb462d616', name: "messages" })));
+        return (h(Host, { key: '401976638f0eee23e5bf2faf49b2c065e08242ae', class: classes }, h("slot", { key: '47730da34957feea1da07abce0235f1deaebb1db', name: "label" }), h("div", { key: 'ea12a8196369b1a1b254c8ac0a1230ad88d378cc', class: "input-container" }, h("slot", { key: '27c32a6ae85030b3bcbef032eb185e5e424a64ff', name: "prefix" }), h("slot", { key: 'caf42f2f0c9fe6a8d082e50e22afca8303a7486b', onSlotchange: () => this.onFormInputSlotChange() }), h("slot", { key: '11bc3a58667ef09116fada427389a9e958d06c02', name: "suffix" })), isError ? (h("slot", { name: "error" })) : '', h("slot", { key: '8d8e6cd24167731fee1c49ddc33bd8e07c38e522', name: "messages" })));
     }
     onFormInputSlotChange() {
         this.initSpiedElement();

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

	@@ -1 +1 @@
1	- {"version":3,"file":"form-field.js","sourceRoot":"","sources":["../../../src/components/form-field/form-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { isMutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\n/*\n Form field component wraps the native input element and add some more functionality on top of it.\n \n You can use the `wcs-form-field` to wrap any of these components :\n * - `wcs-input`\n * - `wcs-textarea`\n * - `wcs-radio-group`\n * - `wcs-switch`\n * - `wcs-checkbox`\n * - `wcs-native-select`\n * - `wcs-select`\n * - `wcs-counter`\n \n For non-supported slotted component, you can use the `required` attribute on the wrapped component to tell the\n * form-field that it is required. It will add a red star after the label of the form field.\n * \n * ## Accessibility guidelines 💡\n * - Each form control should be identified with a unique `wcs-label`\n * - Don't forget to add form validation to make sure the data is correctly formatted\n * - If the `wcs-label` is required, the form control must have the `required` HTML attribute and vice-versa (this is normally automatically set)\n * - The form should not be submittable if at least one required form control is not filled\n * - Hints are optional and should only be used to add extra information\n * - Additional aria attributes put on `<wcs-form-field>` won't inherit onto the native component : you must use the `setAriaAttribute` method.\n * \n * @slot label - Automatically filled when a `wcs-label` is provided\n * @slot <no-name> - The main slot containing the wrapped component\n * @slot prefix - (Optional) Display a component as prefix. See \"Prefix Suffix Group\" story for more info.\n * @slot suffix - (Optional) Display a component as suffix. See \"Prefix Suffix Group\" story for more info.\n * @slot error - Automatically filled when a `wcs-error` is provided\n * @slot messages - Automatically filled when a `wcs-hint` is provided\n \n @cssprop --wcs-form-field-gap - Defines the spacing between the label, input control, and hint messages.\n * @cssprop --wcs-form-field-prefix-suffix-border-radius - Sets the border radius for both prefix and suffix elements.\n * \n * @cssprop --wcs-form-field-prefix-background-color-default - Background color default for prefix elements\n * @cssprop --wcs-form-field-prefix-background-color-disabled - Background color for prefix elements when disabled\n * @cssprop --wcs-form-field-prefix-background-color-hover - Background color for prefix elements when hovered\n * @cssprop --wcs-form-field-prefix-border-color-default - Defines the default border color for prefix\n * @cssprop --wcs-form-field-prefix-border-color-focus - Sets the border color for prefix elements when focused.\n * @cssprop --wcs-form-field-prefix-border-color-disabled - Determines the border color for prefix elements when disabled.\n * \n * @cssprop --wcs-form-field-prefix-icon-color - Specifies the color of icons within prefix elements.\n * @cssprop --wcs-form-field-prefix-value-color - Sets the color of values within prefix elements.\n * @cssprop --wcs-form-field-prefix-placeholder-color - Defines the placeholder text color within prefix elements.\n * @cssprop --wcs-form-field-prefix-color-disabled - Determines the text color for prefix elements when disabled.\n /\n@Component({\n tag: 'wcs-form-field',\n styleUrl: 'form-field.scss',\n shadow: true,\n})\nexport class FormField implements ComponentInterface {\n @Element() private el!: HTMLWcsFormFieldElement;\n\n /\n Specifies whether the form field is in an error state. Displays the field border in red and the message contained in the wcs-error component\n /\n @Prop({mutable: true, reflect: true}) isError = false;\n\n @State() private hasPrefix = false;\n @State() private hasSuffix = false;\n @State() private spiedElement: Element;\n\n private observer: MutationObserver;\n\n componentWillLoad() {\n this.hasSuffix = this.el.querySelector('wcs-button') !== null;\n this.hasPrefix = this.el.querySelector('wcs-select') !== null;\n }\n\n componentDidLoad() {\n this.initSpiedElement();\n this.addRequiredMarkerToLabel();\n this.updateErrorStateOnInput(this.isError);\n }\n\n @Watch('isError')\n // @ts-ignore\n private isErrorChange(newValue: boolean) {\n this.updateErrorStateOnInput(newValue);\n this.updateAriaAttributes();\n }\n\n private updateErrorStateOnInput(newValue: boolean) {\n if (this.spiedElementIsOfType('wcs-input', 'wcs-textarea')) {\n if (newValue) {\n this.spiedElement.setAttribute('state', 'error');\n } else {\n this.spiedElement.setAttribute('state', 'initial');\n }\n }\n }\n\n /\n This function return true if the form field contains an element with tagName matches a value of the types param\n * @param types\n * @private\n */\n private spiedElementIsOfType(...types: string[]): boolean {\n for (const type of types) {\n if (this.spiedElement?.tagName === type.toUpperCase()) return true;\n }\n return false\n }\n\n\n private addRequiredMarkerToLabel() {\n // TODO: deprecate this in favor of the 'required' component attribute\n const label = this.el.querySelector('wcs-label');\n this.observer = new MutationObserver(mutations => {\n const requiredAttMutation = mutations.filter(m => m.attributeName === 'required')[0];\n if (requiredAttMutation) {\n this.updateLabelRequiredFlag(this.spiedElement?.hasAttribute('required'), label);\n }\n });\n if (this.spiedElement) {\n this.observer.observe(this.spiedElement, {attributes: true});\n }\n\n const isRequired = this.spiedElement?.hasAttribute('required');\n this.updateLabelRequiredFlag(isRequired, label);\n }\n\n\n private initSpiedElement() {\n const SUPPORTED_COMPONENTS = ['wcs-input', 'wcs-select', 'wcs-native-select', 'wcs-textarea', 'wcs-radio-group', 'wcs-switch', 'wcs-checkbox', 'wcs-native-select', 'wcs-counter'];\n\n this.spiedElement = (this.el.shadowRoot.querySelector('slot:not([name])') as HTMLSlotElement)\n ?.assignedElements()\n .filter(n => [...SUPPORTED_COMPONENTS, 'SLOT'].map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0];\n\n // If the component is used in another web component\n if (this.spiedElement?.tagName === 'SLOT') {\n this.spiedElement = ((this.spiedElement as HTMLSlotElement)\n .assignedElements()\n .filter(n => SUPPORTED_COMPONENTS.map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0]) as HTMLElement;\n }\n\n if (!this.spiedElement) {\n // tslint:disable-next-line:no-console\n console.warn('Form-field component support only ' + SUPPORTED_COMPONENTS.toString() + '. Some features may not work with the provided component.');\n return;\n }\n }\n \n private updateAriaAttributes(): void {\n if(isMutableAriaAttribute(this.spiedElement)) {\n this.spiedElement.setAriaAttribute('aria-label', this.label);\n\n // Sur les autres DS, généralement seul l'erreur est affichée et pas avec la description\n if(this.isError) {\n if(this.error) this.spiedElement.setAriaAttribute('aria-description', this.error);\n this.spiedElement.setAriaAttribute('aria-invalid', 'true');\n } else {\n if(this.description) this.spiedElement.setAriaAttribute('aria-description', this.description);\n this.spiedElement.setAriaAttribute('aria-invalid', 'false');\n }\n }\n }\n \n private get label() {\n return this.el.querySelector('wcs-label')?.textContent;\n }\n \n private get description() {\n return this.el.querySelector('wcs-hint')?.textContent;\n }\n \n private get error() {\n return this.el.querySelector('wcs-error')?.textContent;\n }\n\n private updateLabelRequiredFlag(isRequired: boolean, label: Element) {\n if (isRequired && label) {\n label.setAttribute('required', 'true');\n } else if (!isRequired && label) {\n label.removeAttribute('required');\n }\n }\n\n disconnectedCallback() {\n this.observer?.disconnect();\n }\n\n render() {\n let classes = '';\n const isError = this.isError;\n\n if (this.hasSuffix) {\n classes += ' has-suffix';\n }\n if (this.hasPrefix) {\n classes += ' has-prefix';\n }\n return (\n <Host class={classes}>\n <slot name=\"label\"/>\n <div class=\"input-container\">\n <slot name=\"prefix\"/>\n <slot onSlotchange={() => this.onFormInputSlotChange()}/>\n <slot name=\"suffix\"/>\n </div>\n {\n isError ? (<slot name=\"error\"/>) : ''\n }\n <slot name=\"messages\"/>\n </Host>\n );\n }\n\n private onFormInputSlotChange() {\n this.initSpiedElement();\n this.updateAriaAttributes()\n this.addRequiredMarkerToLabel();\n this.updateErrorStateOnInput(this.isError);\n }\n}\n"]}
1	+ {"version":3,"file":"form-field.js","sourceRoot":"","sources":["../../../src/components/form-field/form-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { isMutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { normalizeWhitespace } from '../../utils/helpers';\nimport { isControlComponentWithLabel } from \"../../utils/control-component-interface\";\n\n/*\n Form field component wraps the native input element and add some more functionality on top of it.\n \n You can use the `wcs-form-field` to wrap any of these components :\n * - `wcs-input`\n * - `wcs-textarea`\n * - `wcs-radio-group`\n * - `wcs-switch`\n * - `wcs-checkbox`\n * - `wcs-native-select`\n * - `wcs-select`\n * - `wcs-counter`\n \n For non-supported slotted component, you can use the `required` attribute on the wrapped component to tell the\n * form-field that it is required. It will add a red star after the label of the form field.\n * \n * ## Accessibility guidelines 💡\n * - Each form control should be identified with a unique `wcs-label`\n * - Don't forget to add form validation to make sure the data is correctly formatted\n * - If the `wcs-label` is required, the form control must have the `required` HTML attribute and vice-versa (this is normally automatically set)\n * - The form should not be submittable if at least one required form control is not filled\n * - Hints are optional and should only be used to add extra information\n * - Additional aria attributes put on `<wcs-form-field>` won't inherit onto the native component : you must use the `setAriaAttribute` method.\n * \n * @slot label - Automatically filled when a `wcs-label` is provided\n * @slot <no-name> - The main slot containing the wrapped component\n * @slot prefix - (Optional) Display a component as prefix. See \"Prefix Suffix Group\" story for more info.\n * @slot suffix - (Optional) Display a component as suffix. See \"Prefix Suffix Group\" story for more info.\n * @slot error - Automatically filled when a `wcs-error` is provided\n * @slot messages - Automatically filled when a `wcs-hint` is provided\n \n @cssprop --wcs-form-field-gap - Defines the spacing between the label, input control, and hint messages.\n * @cssprop --wcs-form-field-prefix-suffix-border-radius - Sets the border radius for both prefix and suffix elements.\n * \n * @cssprop --wcs-form-field-prefix-background-color-default - Background color default for prefix elements\n * @cssprop --wcs-form-field-prefix-background-color-disabled - Background color for prefix elements when disabled\n * @cssprop --wcs-form-field-prefix-background-color-hover - Background color for prefix elements when hovered\n * @cssprop --wcs-form-field-prefix-border-color-default - Defines the default border color for prefix\n * @cssprop --wcs-form-field-prefix-border-color-focus - Sets the border color for prefix elements when focused.\n * @cssprop --wcs-form-field-prefix-border-color-disabled - Determines the border color for prefix elements when disabled.\n * \n * @cssprop --wcs-form-field-prefix-icon-color - Specifies the color of icons within prefix elements.\n * @cssprop --wcs-form-field-prefix-value-color - Sets the color of values within prefix elements.\n * @cssprop --wcs-form-field-prefix-placeholder-color - Defines the placeholder text color within prefix elements.\n * @cssprop --wcs-form-field-prefix-color-disabled - Determines the text color for prefix elements when disabled.\n /\n@Component({\n tag: 'wcs-form-field',\n styleUrl: 'form-field.scss',\n shadow: true,\n})\nexport class FormField implements ComponentInterface {\n @Element() private el!: HTMLWcsFormFieldElement;\n\n /\n Specifies whether the form field is in an error state. Displays the field border in red and the message contained in the wcs-error component\n /\n @Prop({mutable: true, reflect: true}) isError = false;\n\n @State() private hasPrefix = false;\n @State() private hasSuffix = false;\n @State() private spiedElement: Element;\n\n private observer: MutationObserver;\n\n componentWillLoad() {\n this.hasSuffix = this.el.querySelector('[slot=suffix]') !== null;\n this.hasPrefix = this.el.querySelector('[slot=prefix]') !== null;\n }\n\n componentDidLoad() {\n this.initSpiedElement();\n this.addRequiredMarkerToLabel();\n this.updateErrorStateOnInput(this.isError);\n }\n\n @Watch('isError')\n // @ts-ignore\n private isErrorChange(newValue: boolean) {\n this.updateErrorStateOnInput(newValue);\n this.updateAriaAttributes();\n }\n\n private updateErrorStateOnInput(newValue: boolean) {\n if (this.spiedElementIsOfType('wcs-input', 'wcs-textarea')) {\n if (newValue) {\n this.spiedElement.setAttribute('state', 'error');\n } else {\n this.spiedElement.setAttribute('state', 'initial');\n }\n }\n }\n\n /\n This function return true if the form field contains an element with tagName matches a value of the types param\n * @param types\n * @private\n */\n private spiedElementIsOfType(...types: string[]): boolean {\n for (const type of types) {\n if (this.spiedElement?.tagName === type.toUpperCase()) return true;\n }\n return false\n }\n\n\n private addRequiredMarkerToLabel() {\n // TODO: deprecate this in favor of the 'required' component attribute\n const label = this.el.querySelector('wcs-label');\n this.observer = new MutationObserver(mutations => {\n const requiredAttMutation = mutations.filter(m => m.attributeName === 'required')[0];\n if (requiredAttMutation) {\n this.updateLabelRequiredFlag(this.spiedElement?.hasAttribute('required'), label);\n }\n });\n if (this.spiedElement) {\n this.observer.observe(this.spiedElement, {attributes: true});\n }\n\n const isRequired = this.spiedElement?.hasAttribute('required');\n this.updateLabelRequiredFlag(isRequired, label);\n }\n\n\n private initSpiedElement() {\n const SUPPORTED_COMPONENTS = ['wcs-input', 'wcs-select', 'wcs-native-select', 'wcs-textarea', 'wcs-radio-group', 'wcs-switch', 'wcs-checkbox', 'wcs-native-select', 'wcs-counter'];\n\n this.spiedElement = (this.el.shadowRoot.querySelector('slot:not([name])') as HTMLSlotElement)\n ?.assignedElements()\n .filter(n => [...SUPPORTED_COMPONENTS, 'SLOT'].map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0];\n\n // If the component is used in another web component\n if (this.spiedElement?.tagName === 'SLOT') {\n this.spiedElement = ((this.spiedElement as HTMLSlotElement)\n .assignedElements()\n .filter(n => SUPPORTED_COMPONENTS.map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0]) as HTMLElement;\n }\n\n if (!this.spiedElement) {\n // tslint:disable-next-line:no-console\n console.warn('Form-field component support only ' + SUPPORTED_COMPONENTS.toString() + '. Some features may not work with the provided component.');\n return;\n }\n }\n \n private async updateAriaAttributes(): Promise<void> {\n if (isMutableAriaAttribute(this.spiedElement)) {\n const ariaLabelParts: string[] = [];\n if (isControlComponentWithLabel(this.spiedElement)) {\n const innerLabel = await this.spiedElement.getLabel();\n const combinedLabel = `${this.label \|\| ''} ${innerLabel \|\| ''}`.trim();\n if(combinedLabel) {\n ariaLabelParts.push(normalizeWhitespace(combinedLabel));\n }\n } else {\n if(this.label) {\n ariaLabelParts.push(normalizeWhitespace(this.label));\n }\n }\n\n if(this.description) {\n ariaLabelParts.push(normalizeWhitespace(this.description));\n }\n \n // Sur les autres DS, généralement seul l'erreur est affichée et pas avec la description\n if(this.isError) {\n this.spiedElement.setAriaAttribute('aria-invalid', 'true');\n if(this.error) {\n ariaLabelParts.push(normalizeWhitespace(this.error));\n }\n } else {\n this.spiedElement.setAriaAttribute('aria-invalid', 'false');\n }\n\n this.spiedElement.setAriaAttribute('aria-label', ariaLabelParts.length > 0 ? ariaLabelParts.join(' ') : null);\n }\n }\n \n private get label(): string \| null {\n return this.el.querySelector('wcs-label')?.textContent \|\| null;\n }\n \n private get description(): string \| null {\n return this.el.querySelector('wcs-hint')?.textContent \|\| null;\n }\n \n private get error(): string \| null {\n return this.el.querySelector('wcs-error')?.textContent \|\| null;\n }\n\n private updateLabelRequiredFlag(isRequired: boolean, label: Element) {\n if (isRequired && label) {\n label.setAttribute('required', 'true');\n } else if (!isRequired && label) {\n label.removeAttribute('required');\n }\n }\n\n disconnectedCallback() {\n this.observer?.disconnect();\n }\n\n render() {\n let classes = '';\n const isError = this.isError;\n\n if (this.hasSuffix) {\n classes += ' has-suffix';\n }\n if (this.hasPrefix) {\n classes += ' has-prefix';\n }\n return (\n <Host class={classes}>\n <slot name=\"label\"/>\n <div class=\"input-container\">\n <slot name=\"prefix\"/>\n <slot onSlotchange={() => this.onFormInputSlotChange()}/>\n <slot name=\"suffix\"/>\n </div>\n {\n isError ? (<slot name=\"error\"/>) : ''\n }\n <slot name=\"messages\"/>\n </Host>\n );\n }\n\n private onFormInputSlotChange() {\n this.initSpiedElement();\n this.updateAriaAttributes()\n this.addRequiredMarkerToLabel();\n this.updateErrorStateOnInput(this.isError);\n }\n}\n"]}

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

@@ -21,7 +21,7 @@ export class Galactic {
         this.show = false;
     }
     render() {
-        return (h(Host, { key: 'ccf6b6d2122201e49058bbda7d5c374b47f9b3db' }, h("div", { key: 'b4bb7ecd4e2bb70b845492370724bee2de253838', class: "container" }, h("div", { key: 'c2d2cfcc98d545536e53bf3e734f79fc9509f155', class: "logo-container" }, h("img", { key: '861c9ae4c2ab344d3c20f4a8fd86580d08b6fa11', src: SNCF_BASE64_SVG_LOGO, id: "sncf-logo", alt: "SNCF" }), h("span", { key: 'a56d1f48689b7a45262fa1941d7aa0b3c9ab5013' }, this.text)), h("div", { key: 'b007ba5ae702d1932413564ba690207ecad8f09b', class: "actions-container" }, h("slot", { key: 'f05d6a51edb4013fcc26a4102da99ab0dc72688f' })))));
+        return (h(Host, { key: '650d312b2d662bb9e900d330d9e89a279af10160' }, h("div", { key: 'eee212ebe7bc3031b700cbcd959133ba3ab05457', class: "container" }, h("div", { key: 'ee49e9c2e3cf1ed93c93812747374f4b2fb3c5aa', class: "logo-container" }, h("img", { key: 'd40d693d547591e088e7b2d9e45a39db0152a166', src: SNCF_BASE64_SVG_LOGO, id: "sncf-logo", alt: "SNCF" }), h("span", { key: 'e8e1ab2521b54b73ad3a9b27b82e19cc9a534b70' }, this.text)), h("div", { key: '2be508619dad9c082a129e2ec20fa298ebc4b0b5', class: "actions-container" }, h("slot", { key: '4df31395f1507d942e86971c041c41b17442c3a7' })))));
     }
     static get is() { return "wcs-galactic"; }
     static get encapsulation() { return "shadow"; }

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

@@ -25,6 +25,7 @@
   background-color: var(--wcs-galactic-menu-overlay-background-color);
   color: var(--wcs-galactic-menu-overlay-color);
   padding: var(--wcs-galactic-menu-overlay-padding);
+  --wcs-semantic-color-border-focus-base: var(--wcs-semantic-color-text-inverse, white);
 }
 #menu[data-show] {

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

@@ -71,9 +71,9 @@ export class Galactic {
         }
     }
     render() {
-        return (h(Host, { key: '99bff08532f4d0bdd20c44781ab7f1e10bd4fad8' }, h("span", { key: 'c4827722002c9d558a9a412556be08ff36718a53' }, this.text), h("button", Object.assign({ key: 'fb4eb7c33068169949918b6bd6cc9c96cdde8608', "aria-haspopup": "true", "aria-controls": "menu", ref: el => {
+        return (h(Host, { key: '57fa555ec72e13761295e18aa779d5ac5be81111' }, h("span", { key: '91b4fe9a2f6ee303c3ba00c2ba1a1ded0ac7a761' }, this.text), h("button", Object.assign({ key: '324d0c458e500ba5d47187bdd59297f67e067374', "aria-haspopup": "true", "aria-controls": "menu", ref: el => {
                 this.menuButton = el;
-            }, "aria-expanded": this.showPopoverMenu ? "true" : "false" }, this.inheritedAttributes, { onClick: _ => this.toggleMenu() }), h("wcs-mat-icon", { key: '72b08ab8670569c8911ef041a71782cb14427e84', id: "toggle-menu-icon", icon: "more_horiz", size: "m" })), h("span", { key: 'd0491419b48c7fbe0d773f14c541bb5af7912684', id: "menu", role: "menu", "data-show": this.showPopoverMenu }, h("div", { key: '7f2ba9b81f9041c421f21b9da6c83f0096155161', id: "arrow", "data-popper-arrow": true }), h("slot", { key: 'c5acecba63143c61982bceca50eea5656130f908' }))));
+            }, "aria-expanded": this.showPopoverMenu ? "true" : "false" }, this.inheritedAttributes, { onClick: _ => this.toggleMenu() }), h("wcs-mat-icon", { key: 'accf07fb4f5d737f30f16c5cd96b96a5b66ba1d0', id: "toggle-menu-icon", icon: "more_horiz", size: "m" })), h("span", { key: 'f9ae129e58d7911a7a88d8b2449a8b2e19be516f', id: "menu", role: "menu", "data-show": this.showPopoverMenu }, h("div", { key: 'f4b78cf4631a7fa1b6ca1e68a7eb633d52c7b994', id: "arrow", "data-popper-arrow": true }), h("slot", { key: 'c9eb687e1b82f075a5ef1b84d09b69bdbf9c292f' }))));
     }
     static get is() { return "wcs-galactic-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -497,12 +497,12 @@ export class Grid {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: '2012464f20c249873192549e34ff7ac4c82e8526' }, h("table", Object.assign({ key: 'a0a4a42e52bf623b34db145571045437ac6f4a60', role: "grid", ref: (el) => (this.nativeTable = el), "aria-rowcount": !this.loading && ((_a = this.rows) === null || _a === void 0 ? void 0 : _a.length), "aria-colcount": !this.loading && this.totalDisplayedColumnCount() }, this.inheritedAttributes), h("thead", { key: '3bf24c0462be2bd52754d44a3d9c5f84a7662bd6' }, h("tr", { key: '4169baa4ce95078d40e328d0c76577b8a58e3489', "aria-rowindex": "1" }, this.selectionConfig === 'none' ? ''
+        return (h(Host, { key: 'bdafd86216877fd703389c65665e75aa5ba21a90' }, h("table", Object.assign({ key: 'a1e58206dcaa31084f031a6461f4aceabb90bd46', role: "grid", ref: (el) => (this.nativeTable = el), "aria-rowcount": !this.loading && ((_a = this.rows) === null || _a === void 0 ? void 0 : _a.length), "aria-colcount": !this.loading && this.totalDisplayedColumnCount() }, this.inheritedAttributes), h("thead", { key: 'e22c92431c2f0e75cfb456688525015820aee43a' }, h("tr", { key: '9f857089bc5b552964024039a2ed3b4ab241bc6d', "aria-rowindex": "1" }, this.selectionConfig === 'none' ? ''
             : h("th", { class: "wcs-grid-selection-column" }, this.selectionConfig === 'single' ? '' :
                 h("wcs-checkbox", { tabIndex: ((_b = this.cursorPosition) === null || _b === void 0 ? void 0 : _b.col) === 0
-                        && ((_c = this.cursorPosition) === null || _c === void 0 ? void 0 : _c.row) === 0 ? 0 : -1, part: "all-rows-checkbox", checked: this.allRowsAreSelected(), onWcsChange: this.selectAllRows.bind(this) })), h("slot", { key: '743ee6266300d4ad05f70b7e2a42a159be7a1700', name: "grid-column" }))), h("tbody", { key: 'c20964de1625e8fef9d98f9b7aa6f5c8cf2b186c' }, this.loading
+                        && ((_c = this.cursorPosition) === null || _c === void 0 ? void 0 : _c.row) === 0 ? 0 : -1, part: "all-rows-checkbox", checked: this.allRowsAreSelected(), onWcsChange: this.selectAllRows.bind(this) })), h("slot", { key: '51a565cc671f43bfb054bdf85370cd2035d4f43e', name: "grid-column" }))), h("tbody", { key: '30b62b585ba5d925b6abdfe83e0059c94f27b5e7' }, this.loading
             ? h("tr", { "aria-busy": "true" }, h("td", { colSpan: this.totalColumnCount(), class: "loading" }, h("wcs-spinner", null)))
-            : (_d = this.rows) === null || _d === void 0 ? void 0 : _d.filter(row => this.serverMode || !this.paginationEl || row.page === this.paginationEl.currentPage).map((row, index) => this.renderRow(row, index)))), h("slot", { key: '1cac800a642d68c9ae7e6f958c74d6b3069e75a1', name: "grid-pagination" })));
+            : (_d = this.rows) === null || _d === void 0 ? void 0 : _d.filter(row => this.serverMode || !this.paginationEl || row.page === this.paginationEl.currentPage).map((row, index) => this.renderRow(row, index)))), h("slot", { key: 'a6f76be638c7761f7f98acb837ff742f8ce08319', name: "grid-pagination" })));
     }
     /**
      * Returns the row with all mapped cells inside.

package/dist/collection/components/grid-column/grid-column.js CHANGED Viewed

@@ -69,7 +69,7 @@ export class GridColumn {
     }
     render() {
         const ButtonOrDiv = this.getTagName();
-        return (h(Host, { key: '05815f3b9f03f3248347108555a3fea6495d9193', slot: "grid-column" }, h("th", Object.assign({ key: 'e25a02d656e7f4cbf9c6bb8ada58b0300f41ce12', style: { width: this.width }, class: this.sort ? 'pointer' : '', tabIndex: this.sort ? -1 : this.getTabIndex(), scope: "col", onClick: this.onSortClick.bind(this), onKeyDown: this.handleSortKeyDown.bind(this), onFocus: this.delegateFocusToButton.bind(this), "aria-sort": this.sort ? this.getSortOrderForAriaSort(this.sortOrder) : null, ref: (el) => (this.nativeTh = el) }, this.inheritedAttributes), h(ButtonOrDiv, { key: '8954f92f00869d26c0bcea419ff0173e02ecbb94', class: "grid-column-th-content", ref: (el) => this.buttonOrDiv = el, tabIndex: this.sort ? this.getTabIndex() : -1 }, h("span", { key: '84006eeb0d8f91817aab26af7ba89e47ceedf850' }, this.name), this.sort ? h(GridSortArrow, { state: this.sortOrder }) : ''))));
+        return (h(Host, { key: '46989c38681747daf1a458eeda881657aa5acdfb', slot: "grid-column" }, h("th", Object.assign({ key: '3e6fdcb1db342dc6b974fc709fb1adea92b0d731', style: { width: this.width }, class: this.sort ? 'pointer' : '', tabIndex: this.sort ? -1 : this.getTabIndex(), scope: "col", onClick: this.onSortClick.bind(this), onKeyDown: this.handleSortKeyDown.bind(this), onFocus: this.delegateFocusToButton.bind(this), "aria-sort": this.sort ? this.getSortOrderForAriaSort(this.sortOrder) : null, ref: (el) => (this.nativeTh = el) }, this.inheritedAttributes), h(ButtonOrDiv, { key: 'cb49f504363332cb9c586bc906804cc4295d6ec5', class: "grid-column-th-content", ref: (el) => this.buttonOrDiv = el, tabIndex: this.sort ? this.getTabIndex() : -1 }, h("span", { key: '801194d92757db834561dd11396223a939b1c6cb' }, this.name), this.sort ? h("div", { class: "sort-arrow-container" }, h(GridSortArrow, { state: this.sortOrder })) : ''))));
     }
     onSortClick() {
         if (!this.sort)
@@ -265,7 +265,7 @@ export class GridColumn {
                     "text": "Flag to hide the column."
                 },
                 "attribute": "hidden",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "cursorPosition": {

package/dist/collection/components/grid-column/grid-column.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"grid-column.js","sourceRoot":"","sources":["../../../src/components/grid-column/grid-column.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n h,\n Host, Method,\n Prop,\n Watch\n} from '@stencil/core';\nimport {\n WcsCellFormatter,\n WcsGridColumnSortChangeEventDetails,\n WcsSortFn,\n WcsSortOrder\n} from '../grid/grid-interface';\nimport { GridSortArrow } from './grid-sort-arrow';\nimport {\n inheritAriaAttributes,\n inheritAttributes,\n isEnterKey,\n isSpaceKey,\n setOrRemoveAttribute\n} from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst GRID_COLUMN_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/*\n The grid column is a subcomponent of `wcs-grid` that represents a column of the table.\n * \n * @csspart [path]-column - CSS part for each column for styling. e.g: first_name-column, email-column\n /\n@Component({\n tag: 'wcs-grid-column',\n styleUrls: ['grid-column.scss', 'grid-sort-arrow.scss'],\n shadow: true\n})\nexport class GridColumn implements ComponentInterface, MutableAriaAttribute {\n @Element() private el: HTMLWcsGridColumnElement;\n private nativeTh!: HTMLTableHeaderCellElement;\n private buttonOrDiv: HTMLButtonElement \| HTMLDivElement;\n private inheritedAttributes: { [k: string]: any } = {};\n /\n Represents the name of the field from the `data` object (e.g: first_name, last_name, email, ...)\n /\n @Prop() path: string;\n /\n The name of the column displayed on the table (e.g: First Name, Last Name, Email, ...)\n /\n @Prop() name: string;\n /\n Make the column sortable.\n /\n @Prop() sort: boolean = false;\n /\n Customizable sort function to change the comparison of values.\n /\n @Prop() sortFn: WcsSortFn;\n /\n Customizable formatter function to render the cell differently.\n /\n @Prop() formatter: WcsCellFormatter;\n /\n Defines if the column sort is ascending or descending. \n * `none` = the column is not sorted.\n /\n @Prop({mutable: true}) sortOrder: WcsSortOrder = 'none';\n /\n Set the column `<th>` element width.\n /\n @Prop() width: string;\n /\n Set to true if using a `wcs-custom-cell` linked to it.\n /\n @Prop() customCells: boolean = false;\n /\n Flag to hide the column.\n /\n @Prop() hidden: boolean = false;\n /\n Event emitted when the sort of the column is changed.\n /\n @Event() wcsSortChange!: EventEmitter<WcsGridColumnSortChangeEventDetails>;\n /\n Event emitted if the column is dynamically switching visibility.\n /\n @Event() wcsHiddenChange!: EventEmitter<boolean>;\n\n /\n This property mustn't be set by hand, it is set by the wcs-grid component to move the focus between grid columns\n * using keyboard.\n * @internal\n /\n @Prop() public cursorPosition: {col: number, row: number};\n\n /\n This property mustn't be set by hand, it is set by the wcs-grid component to register the column index in a\n * grid in order to move the focus between the grid columns.\n * @internal\n */\n @Prop() public columnPosition: number;\n \n componentWillLoad(): Promise<void> \| void {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, GRID_COLUMN_INHERITED_ATTRS),\n };\n }\n \n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string \| null \| undefined) {\n setOrRemoveAttribute(this.nativeTh, attr, value);\n }\n\n @Watch('hidden')\n parseMyObjectProp(newValue: boolean) {\n this.wcsHiddenChange.emit(newValue);\n }\n\n @Watch('sortOrder')\n sortOrderChange(_: WcsSortOrder) {\n this.emitSortConfig();\n }\n\n emitSortConfig() {\n if (!this.sort) return;\n this.wcsSortChange.emit({\n column: this.el,\n order: this.sortOrder,\n sortFn: this.sortFn\n });\n }\n\n getSortOrderForAriaSort(sortOrder: WcsSortOrder) {\n switch (sortOrder) {\n case 'asc':\n return 'ascending';\n case 'desc':\n return 'descending';\n case 'none':\n default:\n return 'none';\n }\n }\n \n private getTabIndex() {\n return this.cursorPosition?.col === this.columnPosition\n && this.cursorPosition?.row === 0 ? 0 : -1;\n }\n\n private getTagName() {\n return this.sort ? 'button' : 'div';\n }\n \n private delegateFocusToButton() {\n if (this.sort) {\n this.buttonOrDiv.focus();\n }\n }\n\n render(): any {\n const ButtonOrDiv = this.getTagName();\n return (<Host slot=\"grid-column\">\n <th style={{width: this.width}}\n class={this.sort ? 'pointer' : ''}\n tabIndex={this.sort ? -1 : this.getTabIndex()}\n scope=\"col\"\n onClick={this.onSortClick.bind(this)}\n onKeyDown={this.handleSortKeyDown.bind(this)}\n onFocus={this.delegateFocusToButton.bind(this)}\n aria-sort={this.sort ? this.getSortOrderForAriaSort(this.sortOrder) : null}\n ref={(el) => (this.nativeTh = el)}\n {...this.inheritedAttributes}\n >\n <ButtonOrDiv class=\"grid-column-th-content\"\n ref={(el: HTMLButtonElement \| HTMLDivElement) => this.buttonOrDiv = el}\n tabIndex={this.sort ? this.getTabIndex() : -1}>\n <span>{this.name}</span>\n {\n this.sort ? <GridSortArrow state={this.sortOrder}/> : ''\n }\n </ButtonOrDiv>\n </th>\n </Host>)\n }\n\n private onSortClick() {\n if (!this.sort) return;\n \n // @Watch on sortOrder property will trigger wcsSortChange event\n this.sortOrder = this.sortOrder === 'none' \|\| this.sortOrder === 'desc' ? 'asc' : 'desc';\n }\n \n private handleSortKeyDown(_event: KeyboardEvent) {\n if (isSpaceKey(_event) \|\| isEnterKey(_event)) {\n _event.preventDefault();\n this.onSortClick();\n }\n }\n}\n"]}
1	+ {"version":3,"file":"grid-column.js","sourceRoot":"","sources":["../../../src/components/grid-column/grid-column.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n h,\n Host, Method,\n Prop,\n Watch\n} from '@stencil/core';\nimport {\n WcsCellFormatter,\n WcsGridColumnSortChangeEventDetails,\n WcsSortFn,\n WcsSortOrder\n} from '../grid/grid-interface';\nimport { GridSortArrow } from './grid-sort-arrow';\nimport {\n inheritAriaAttributes,\n inheritAttributes,\n isEnterKey,\n isSpaceKey,\n setOrRemoveAttribute\n} from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst GRID_COLUMN_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/*\n The grid column is a subcomponent of `wcs-grid` that represents a column of the table.\n * \n * @csspart [path]-column - CSS part for each column for styling. e.g: first_name-column, email-column\n /\n@Component({\n tag: 'wcs-grid-column',\n styleUrls: ['grid-column.scss', 'grid-sort-arrow.scss'],\n shadow: true\n})\nexport class GridColumn implements ComponentInterface, MutableAriaAttribute {\n @Element() private el: HTMLWcsGridColumnElement;\n private nativeTh!: HTMLTableHeaderCellElement;\n private buttonOrDiv: HTMLButtonElement \| HTMLDivElement;\n private inheritedAttributes: { [k: string]: any } = {};\n /\n Represents the name of the field from the `data` object (e.g: first_name, last_name, email, ...)\n /\n @Prop() path: string;\n /\n The name of the column displayed on the table (e.g: First Name, Last Name, Email, ...)\n /\n @Prop() name: string;\n /\n Make the column sortable.\n /\n @Prop() sort: boolean = false;\n /\n Customizable sort function to change the comparison of values.\n /\n @Prop() sortFn: WcsSortFn;\n /\n Customizable formatter function to render the cell differently.\n /\n @Prop() formatter: WcsCellFormatter;\n /\n Defines if the column sort is ascending or descending. \n * `none` = the column is not sorted.\n /\n @Prop({mutable: true}) sortOrder: WcsSortOrder = 'none';\n /\n Set the column `<th>` element width.\n /\n @Prop() width: string;\n /\n Set to true if using a `wcs-custom-cell` linked to it.\n /\n @Prop() customCells: boolean = false;\n /\n Flag to hide the column.\n /\n @Prop({ reflect: true }) hidden: boolean = false;\n /\n Event emitted when the sort of the column is changed.\n /\n @Event() wcsSortChange!: EventEmitter<WcsGridColumnSortChangeEventDetails>;\n /\n Event emitted if the column is dynamically switching visibility.\n /\n @Event() wcsHiddenChange!: EventEmitter<boolean>;\n\n /\n This property mustn't be set by hand, it is set by the wcs-grid component to move the focus between grid columns\n * using keyboard.\n * @internal\n /\n @Prop() public cursorPosition: {col: number, row: number};\n\n /\n This property mustn't be set by hand, it is set by the wcs-grid component to register the column index in a\n * grid in order to move the focus between the grid columns.\n * @internal\n */\n @Prop() public columnPosition: number;\n \n componentWillLoad(): Promise<void> \| void {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, GRID_COLUMN_INHERITED_ATTRS),\n };\n }\n \n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string \| null \| undefined) {\n setOrRemoveAttribute(this.nativeTh, attr, value);\n }\n\n @Watch('hidden')\n parseMyObjectProp(newValue: boolean) {\n this.wcsHiddenChange.emit(newValue);\n }\n\n @Watch('sortOrder')\n sortOrderChange(_: WcsSortOrder) {\n this.emitSortConfig();\n }\n\n emitSortConfig() {\n if (!this.sort) return;\n this.wcsSortChange.emit({\n column: this.el,\n order: this.sortOrder,\n sortFn: this.sortFn\n });\n }\n\n getSortOrderForAriaSort(sortOrder: WcsSortOrder) {\n switch (sortOrder) {\n case 'asc':\n return 'ascending';\n case 'desc':\n return 'descending';\n case 'none':\n default:\n return 'none';\n }\n }\n \n private getTabIndex() {\n return this.cursorPosition?.col === this.columnPosition\n && this.cursorPosition?.row === 0 ? 0 : -1;\n }\n\n private getTagName() {\n return this.sort ? 'button' : 'div';\n }\n \n private delegateFocusToButton() {\n if (this.sort) {\n this.buttonOrDiv.focus();\n }\n }\n\n render(): any {\n const ButtonOrDiv = this.getTagName();\n return (<Host slot=\"grid-column\">\n <th style={{width: this.width}}\n class={this.sort ? 'pointer' : ''}\n tabIndex={this.sort ? -1 : this.getTabIndex()}\n scope=\"col\"\n onClick={this.onSortClick.bind(this)}\n onKeyDown={this.handleSortKeyDown.bind(this)}\n onFocus={this.delegateFocusToButton.bind(this)}\n aria-sort={this.sort ? this.getSortOrderForAriaSort(this.sortOrder) : null}\n ref={(el) => (this.nativeTh = el)}\n {...this.inheritedAttributes}\n >\n <ButtonOrDiv class=\"grid-column-th-content\"\n ref={(el: HTMLButtonElement \| HTMLDivElement) => this.buttonOrDiv = el}\n tabIndex={this.sort ? this.getTabIndex() : -1}>\n <span>{this.name}</span>\n {\n this.sort ? <div class=\"sort-arrow-container\"><GridSortArrow state={this.sortOrder}/></div> : ''\n }\n </ButtonOrDiv>\n </th>\n </Host>)\n }\n\n private onSortClick() {\n if (!this.sort) return;\n \n // @Watch on sortOrder property will trigger wcsSortChange event\n this.sortOrder = this.sortOrder === 'none' \|\| this.sortOrder === 'desc' ? 'asc' : 'desc';\n }\n \n private handleSortKeyDown(_event: KeyboardEvent) {\n if (isSpaceKey(_event) \|\| isEnterKey(_event)) {\n _event.preventDefault();\n this.onSortClick();\n }\n }\n}\n"]}

package/dist/collection/components/grid-custom-cell/grid-custom-cell.js CHANGED Viewed

@@ -8,7 +8,7 @@ export class GridCustomCell {
         this.rowId = undefined;
     }
     render() {
-        return (h(Host, { key: '441a2f06db44cb423da04b165b8fde063d276d67', slot: this.columnId + '-' + this.rowId }, h("slot", { key: '6b3e9007560c8b2fef3df9c968fb8659b99bc9e6' })));
+        return (h(Host, { key: 'ff6029ca87066fa7fe87dc269c067cd128a41d21', slot: this.columnId + '-' + this.rowId }, h("slot", { key: '6469540fb6399ab03af6c9dcb6442bede62c9845' })));
     }
     static get is() { return "wcs-grid-custom-cell"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/grid-pagination/grid-pagination.js CHANGED Viewed

@@ -74,7 +74,7 @@ export class GridPagination {
         });
     }
     render() {
-        return (h(Host, { key: 'aae9e2f569bc30af1d1fb0b5af5e1fec240ffb61', slot: "grid-pagination" }, h("div", { key: '5da4f6b637ff0cad84663205cdac0e6818d91446', class: "container" }, h("div", { key: '826dbec24c32fee903bcb3d51a31da34ee0fd92a', class: "page-size" }, h("wcs-select", { key: 'daa32021838797ed11454a521bb696fc17cb9693', placeholder: "El\u00E9ments par page", class: "available-page-sizes", "aria-labelledby": "elements-per-page-number elements-per-page-text", value: this.pageSize, onWcsChange: this.onChangePagesize.bind(this) }, this.availablePageSizes.map((pageSize) => h("wcs-select-option", { value: pageSize }, pageSize))), h("span", { key: '78ddb987de3e677213ed11407f1f353c002ae68e', id: "elements-per-page-number", hidden: true }, this.pageSize), h("span", { key: 'e861da5d2465c7ab771b64761213ed35a9b7659c', id: "elements-per-page-text" }, "\u00E9l\u00E9ments par page")), h("div", { key: '388de98e62ed3fda8fad6736edf39c1409809def', class: "items-count" }, h("span", { key: 'ebc8db0bc400172451dae7a1f63799d821b27fbf' }, this.itemsCount, " \u00E9l\u00E9ments")), h("nav", Object.assign({ key: '272d2d0ddb5af7386affb29acbbc12a9fa8e18df', "aria-label": "pagination", ref: (el) => (this.nativeNav = el) }, this.inheritedAttributes), h("ul", { key: 'a39598920c1c503d4c7b3d77285cf6cc27fe9c86', class: "page-management" }, h("li", { key: '3020e62d07516408b646cad84831614195e428c7', class: "pagination-arrow", onClick: this.firstPage.bind(this) }, h(GridPaginationArrow, { key: '4e8d52cbd46cda3e701302e330962b516d63bca4', active: this.canGoToPreviousPage(), order: "previous", double: true })), h("li", { key: '3b964173cf0d767c53fe051679b561163b3d9b1f', class: "pagination-arrow", onClick: this.previousPage.bind(this) }, h(GridPaginationArrow, { key: '364f5b1bb35b154d3318abd329876f9a168d390c', active: this.canGoToPreviousPage(), order: "previous" })), h("li", { key: '0fc5fabb19e98c0cb78a07b656e0b7b94dce438d', class: "pagination-counter" }, h("span", { key: 'fa47454131656639969ab74dba30e43342112b05', "aria-label": `Page ${this.currentPage + 1} sur ${this.pageCount}`, "aria-current": "page" }, this.currentPage + 1, " / ", this.pageCount)), h("li", { key: '513c98597a712d21dbefa48b573e6b1373817472', class: "pagination-arrow", onClick: this.nextPage.bind(this) }, h(GridPaginationArrow, { key: '91f56987949c2fc4e93467064566397358738def', active: this.canGoToNextPage(), order: "next" })), h("li", { key: '7001e78f44214239557b5f82e9630e28871d9308', class: "pagination-arrow", onClick: this.lastPage.bind(this) }, h(GridPaginationArrow, { key: 'ffb62cec6939f9d3ed37ccd5dca472bbff8fe9f7', active: this.canGoToNextPage(), order: "next", double: true })))))));
+        return (h(Host, { key: 'bee1c9832792c3385d522f9382de8636139d6161', slot: "grid-pagination" }, h("div", { key: '24a7aec2ad62883a7818b59f32f2965de3988f3e', class: "container" }, h("div", { key: '3abc3e73332eb167448133ad28a65a41c5e93e18', class: "page-size" }, h("wcs-select", { key: '8ed583efa8d183dff2ddeb776e650019a759f038', placeholder: "El\u00E9ments par page", class: "available-page-sizes", "aria-labelledby": "elements-per-page-number elements-per-page-text", value: this.pageSize, onWcsChange: this.onChangePagesize.bind(this) }, this.availablePageSizes.map((pageSize) => h("wcs-select-option", { value: pageSize }, pageSize))), h("span", { key: 'ef0447a2215071dac316f9d037c34b408734c0ef', id: "elements-per-page-number", hidden: true }, this.pageSize), h("span", { key: '6420b20cd2edde465e28933b803c5dbbb3c44047', id: "elements-per-page-text" }, "\u00E9l\u00E9ments par page")), h("div", { key: 'fbc0b228a34659ebdc91d31def44854fc99d1fc8', class: "items-count" }, h("span", { key: '5ab2756b28332b2a1851d3da15796b12306d5413' }, this.itemsCount, " \u00E9l\u00E9ments")), h("nav", Object.assign({ key: 'cd05b9352046ba7dc430e9bbd0e79032ce0ce6c3', "aria-label": "pagination", ref: (el) => (this.nativeNav = el) }, this.inheritedAttributes), h("ul", { key: 'f9277ef66a0e6a3a25509acb9eb8e57e40952586', class: "page-management" }, h("li", { key: 'eb412a9c0f1bac4a448aa544d83eefb64be3823b', class: "pagination-arrow", onClick: this.firstPage.bind(this) }, h(GridPaginationArrow, { key: '97efc725465d7bb97a228c653473726391bd250f', active: this.canGoToPreviousPage(), order: "previous", double: true })), h("li", { key: 'd615cf6062d352803448a1a5195c6186e143dc6b', class: "pagination-arrow", onClick: this.previousPage.bind(this) }, h(GridPaginationArrow, { key: '1da29a9f802f71f0c699d9a438cf4a38c15d93c0', active: this.canGoToPreviousPage(), order: "previous" })), h("li", { key: '433186a63982aa5273ce804131383ef889dca97a', class: "pagination-counter" }, h("span", { key: '591352b4f4b95d56c3a20536ada90d42f67065f9', "aria-label": `Page ${this.currentPage + 1} sur ${this.pageCount}`, "aria-current": "page" }, this.currentPage + 1, " / ", this.pageCount)), h("li", { key: 'e318556a6c650763afe8c005cfa751443a8da05d', class: "pagination-arrow", onClick: this.nextPage.bind(this) }, h(GridPaginationArrow, { key: '0598f1a9ace662c6aab71c2e3756c9b972145521', active: this.canGoToNextPage(), order: "next" })), h("li", { key: 'a8caa45cc06ea000283e3acf3762bbfd2b8a41f4', class: "pagination-arrow", onClick: this.lastPage.bind(this) }, h(GridPaginationArrow, { key: '5c030a25a38832669d6c353b994a3269aee38ad9', active: this.canGoToNextPage(), order: "next", double: true })))))));
     }
     static get is() { return "wcs-grid-pagination"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,7 +36,7 @@ export class Header {
         };
     }
     render() {
-        return (h("header", Object.assign({ key: 'f432b6a245e91ddeb8b1631f861e6546d8482dbe', role: "banner", ref: (el) => (this.nativeHeader = el) }, this.inheritedAttributes), h("slot", { key: '5310bb9f07e117002c3748986d632d48a97322bb', name: "logo" }), h("slot", { key: 'a471157be3d7ca2ea16dcc1e937174b7e8a69ee5', name: "title" }), h("slot", { key: '5dea2c8099c3ab6ca52d46b5e9fa4d6f758662ab', name: "actions" })));
+        return (h("header", Object.assign({ key: '85663b1ee1555d9886c677ca05862ab447590c98', role: "banner", ref: (el) => (this.nativeHeader = el) }, this.inheritedAttributes), h("slot", { key: '7572b52b683fa171efd2c526c652865b003fd13e', name: "logo" }), h("slot", { key: '81646d012a254ea076c0490c96c4389ecf996dfb', name: "title" }), h("slot", { key: '1f13134c1a214106e747f887969edff2412fe7e7', name: "actions" })));
     }
     static get is() { return "wcs-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -17,7 +17,7 @@ export class Hint {
         this.small = false;
     }
     render() {
-        return (h(Host, { key: 'fa20abf1e7904ea4ef83c33bc4d2d69e4d8fe384', slot: "messages" }, h("slot", { key: 'f010b7597557564483c56bcdc29c83307257bd01' })));
+        return (h(Host, { key: 'e143c56dcc628774eecfc09ce5d0151703cffa89', slot: "messages" }, h("slot", { key: 'da1cf4e019f6dd0416402a77abd360806c5892e4' })));
     }
     static get is() { return "wcs-hint"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/horizontal-stepper/horizontal-stepper.js CHANGED Viewed

@@ -56,7 +56,7 @@ export class HorizontalStepper {
         }
     }
     render() {
-        return (h(Host, { key: 'fb8ede07a0581aae611b96c9204f6057c3a392a3' }, h("ul", { key: 'e4f98d5ba27ca1a6cf1b0ef211e456deda8ea437', role: "list", class: "steps" }, this.steps.map((step, index) => (h(HorizontalStep, { step: step, passed: index <= this.internalCurrentStepIndex, checkOnComplete: this.checkOnComplete, complete: this.isComplete(step, index), active: index === this.internalCurrentStepIndex, first: index === 0, disable: this.isDisable(step, index), onClick: step => this.wcsHorizontalStepClick.emit({ step, index }) })))), this.renderLabels()));
+        return (h(Host, { key: 'a46e297897314208c54f827c46abe3d3dccaeec3' }, h("ul", { key: '4ff21517c120a746fe2d7891f6bbe81e588107ad', role: "list", class: "steps" }, this.steps.map((step, index) => (h(HorizontalStep, { step: step, passed: index <= this.internalCurrentStepIndex, checkOnComplete: this.checkOnComplete, complete: this.isComplete(step, index), active: index === this.internalCurrentStepIndex, first: index === 0, disable: this.isDisable(step, index), onClick: step => this.wcsHorizontalStepClick.emit({ step, index }) })))), this.renderLabels()));
     }
     isComplete(step, index) {
         return index <= this.internalCurrentStepIndex || step.complete;

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

@@ -23,7 +23,7 @@ export class Icon {
                 [`icons-size-${this.size}`]: true
             }
         };
-        return (h("i", Object.assign({ key: 'bb5a7a275de88a4c02dbd15899516a860579fa35' }, cssClass, { ref: (el) => (this.nativeIcon = el) }, this.inheritedAttributes)));
+        return (h("i", Object.assign({ key: 'e21a9bc955698494dd9835e2022182aa20a306e5' }, cssClass, { ref: (el) => (this.nativeIcon = el) }, this.inheritedAttributes)));
     }
     static get is() { return "wcs-icon"; }
     static get properties() {

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

@@ -26,6 +26,7 @@
   --wcs-input-border-color-default: var(--wcs-semantic-color-border-primary);
   --wcs-input-border-color-disabled: var(--wcs-semantic-color-border-disabled);
   --wcs-input-border-color-focus: var(--wcs-semantic-color-border-control-focus);
+  --wcs-input-reveal-password-button-border-color-focus: var(--wcs-semantic-color-border-focus-base);
   --wcs-input-border-color-error: var(--wcs-semantic-color-border-critical);
   --wcs-input-value-color: var(--wcs-semantic-color-text-primary);
   --wcs-input-value-font-weight: var(--wcs-semantic-font-weight-medium);
@@ -72,9 +73,17 @@
   box-shadow: none;
   outline: 0;
 }
-:host .toggle_password {
+:host button.toggle_password {
+  background: transparent;
+  border: none;
+  color: inherit;
   cursor: pointer;
 }
+:host button.toggle_password:focus-visible {
+  outline: var(--wcs-semantic-border-width-large) dashed var(--wcs-input-reveal-password-button-border-color-focus);
+  outline-offset: calc(-2 * var(--wcs-input-border-width-focus));
+  border-radius: 0.1rem;
+}
 :host .prefix, :host .suffix {
   color: var(--wcs-input-prefix-suffix-color);
   display: flex;