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

wcs-core 7.1.0 → 7.2.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 (570) hide show

package/dist/cjs/wcs-error_3.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"wcs-error.wcs-form-field.wcs-label.entry.cjs.js","mappings":"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","names":["Label","h","Host","isMutableAriaAttribute","isControlComponentWithLabel","normalizeWhitespace","inheritAriaAttributes","inheritAttributes","setOrRemoveAttribute"],"sources":["src/components/error/error.scss?tag=wcs-error&encapsulation=shadow","src/components/error/error.tsx","src/components/form-field/form-field.scss?tag=wcs-form-field&encapsulation=shadow","src/components/form-field/form-field.tsx","src/components/label/label.scss?tag=wcs-label&encapsulation=shadow","src/components/label/label.tsx"],"sourcesContent":[":host {\n --wcs-error-color: var(--wcs-semantic-color-text-critical);\n --wcs-error-font-size: var(--wcs-semantic-font-size-caption-2);\n --wcs-error-font-weight: var(--wcs-semantic-font-weight-book);\n\n color: var(--wcs-error-color);\n font-size: var(--wcs-error-font-size);\n font-weight: var(--wcs-error-font-weight);\n}\n","import { Component, ComponentInterface, h, Host } from '@stencil/core';\n\n/*\n The `wcs-error` should always be wrapped in a `wcs-form-field`.\n * It is used to display a red message under the field indicating an incorrect user input.\n * \n * ## Accessibility guidelines 💡\n * - Provide a relevant error message to inform the users what they should change to make the field valid\n * - Always add the error icon, to ensure the visual indication of the error state other than the color\n * - `aria-description` will be automatically added to the field for screen readers\n * - `aria-invalid=\"true\"` will be automatically added to the field for screen readers\n * \n * @cssprop --wcs-error-color - Color of the text\n * @cssprop --wcs-error-font-size - Font size\n * @cssprop --wcs-error-font-weight - Font weight\n /\n@Component({\n tag: 'wcs-error',\n styleUrl: 'error.scss',\n shadow: true,\n})\nexport class Label implements ComponentInterface {\n render() {\n return (\n <Host aria-live=\"polite\" aria-atomic=\"true\" slot=\"error\">\n <slot />\n </Host>\n );\n }\n}\n",":host {\n --wcs-form-field-gap: var(--wcs-semantic-spacing-small);\n\n --wcs-form-field-prefix-suffix-border-radius: var(--wcs-semantic-border-radius-base);\n\n --wcs-form-field-prefix-icon-color: var(--wcs-semantic-color-foreground-primary);\n --wcs-form-field-prefix-value-color: var(--wcs-semantic-color-text-inverse);\n --wcs-form-field-prefix-placeholder-color: var(--wcs-semantic-color-text-inverse);\n\n display: flex;\n flex-direction: column;\n gap: var(--wcs-form-field-gap);\n\n .input-container {\n display: flex;\n }\n\n / Components in the prefix slot /\n ::slotted([slot=prefix]) {\n / Select /\n --wcs-select-value-color: var(--wcs-semantic-color-text-inverse);\n --wcs-select-placeholder-color: var(--wcs-semantic-color-text-inverse);\n --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-default);\n --wcs-select-control-arrow-color: var(--wcs-form-field-prefix-icon-color);\n --wcs-select-control-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n --wcs-select-control-border-width-default: 0;\n --wcs-select-control-border-style-focus: dashed;\n --wcs-select-control-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n / Native select /\n --wcs-native-select-value-color: var(--wcs-semantic-color-text-inverse);\n --wcs-native-select-placeholder-color: var(--wcs-semantic-color-text-inverse);\n --wcs-native-select-arrow-color: var(--wcs-form-field-prefix-icon-color);\n --wcs-native-select-background-color: var(--wcs-semantic-color-background-action-primary-default);\n --wcs-native-select-border-width: 0;\n --wcs-native-select-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n --wcs-native-select-border-style-focus: dashed;\n --wcs-native-select-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n --wcs-native-select-option-color: var(--wcs-semantic-color-text-inverse);\n\n / Button /\n --wcs-button-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n }\n\n / Components in the suffix slot /\n ::slotted([slot=suffix]) {\n --wcs-button-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n --wcs-select-control-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n --wcs-native-select-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n }\n}\n\n/ Disabled components in the prefix slot /\n::slotted([slot=prefix][disabled]),\n::slotted([slot=prefix]:disabled),\n::slotted([slot=prefix][aria-disabled=true]),\n::slotted([slot=prefix][data-disabled]) {\n --wcs-semantic-color-background-control-disabled: var(--wcs-semantic-color-background-action-primary-disabled);\n --wcs-semantic-color-text-disabled: var(--wcs-semantic-color-foreground-disabled);\n\n --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-disabled);\n --wcs-select-value-color: var(--wcs-semantic-color-text-disabled);\n --wcs-select-placeholder-color: var(--wcs-semantic-color-text-disabled);\n\n --wcs-native-select-background-color: var(--wcs-semantic-color-background-action-primary-disabled);\n --wcs-native-select-placeholder-color: var(--wcs-semantic-color-text-disabled);\n --wcs-native-select-value-color: var(--wcs-semantic-color-text-disabled);\n}\n\n/ Hover and press states /\n::slotted([slot=prefix]:hover:not([disabled]):not([data-disabled])) {\n --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-hover);\n --wcs-native-select-background-color: var(--wcs-semantic-color-background-action-primary-hover);\n}\n\n::slotted([slot=prefix]:active:not([disabled]):not([data-disabled])) {\n --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-press);\n --wcs-native-select-background-color: var(--wcs-semantic-color-background-action-primary-press);\n}\n\n.input-container {\n display: flex;\n}\n\n::slotted(wcs-select:not([slot=prefix])) {\n width: 100%;\n}\n\n::slotted(wcs-native-select:not([slot=prefix])) {\n width: 100%;\n}\n\n/ Components in the center that are prefixed /\n:host(.has-prefix) {\n ::slotted(:not([slot=prefix])) {\n --wcs-input-border-radius-left: 0;\n --wcs-select-control-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n --wcs-native-select-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n }\n}\n\n/ Components in the center that are suffixed /\n:host(.has-suffix) {\n ::slotted(:not([slot=suffix])) {\n --wcs-input-border-radius-right: 0;\n --wcs-select-control-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n --wcs-native-select-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n }\n\n}\n\n/ Components in the center that are prefixed AND suffixed /\n:host(.has-prefix.has-suffix) {\n ::slotted(:not([slot=prefix]):not([slot=suffix])) {\n --wcs-input-border-radius-left: 0;\n --wcs-input-border-radius-right: 0;\n --wcs-select-control-border-radius: 0;\n --wcs-native-select-border-radius: 0;\n }\n}\n","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",":host {\n --wcs-label-font-weight: var(--wcs-semantic-font-weight-book);\n --wcs-label-color: var(--wcs-semantic-color-text-primary);\n --wcs-label-required-marker-color: var(--wcs-semantic-color-text-critical);\n\n --wcs-label-gap: var(--wcs-semantic-spacing-small);\n\n font-weight: var(--wcs-label-font-weight);\n}\n\n:host([required]) > label::after {\n font-weight: var(--wcs-label-font-weight);\n color: var(--wcs-label-required-marker-color);\n content: ' ';\n}\n\nlabel {\n display: inline-block;\n color: var(--wcs-label-color);\n font-weight: var(--wcs-label-font-weight);\n\n // Add margin before tooltip icon\n ::slotted(wcs-mat-icon) {\n display: inline;\n vertical-align: middle;\n margin-left: var(--wcs-label-gap);\n }\n}\n","import { Component, ComponentInterface, h, Host, Method, Prop, Element } from '@stencil/core';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst LABEL_INHERITED_ATTRS = ['title'];\n\n/*\n The `wcs-label` should always be wrapped in a `wcs-form-field`.\n * It is used to caption a form control component.\n \n ## Accessibility guidelines 💡\n * - Use concise name for the label. If you want to describe more your form control, add a `wcs-hint`\n * - Use the required flag only as an indication to inform users that the form control is required\n * \n * @cssprop --wcs-label-color - Color of the text\n * @cssprop --wcs-label-font-weight - Font weight of the text\n * \n * @cssprop --wcs-label-required-marker-color - Color of the required marker\n * \n * @cssprop --wcs-label-gap - Gap between text and required marker\n /\n@Component({\n tag: 'wcs-label',\n styleUrl: 'label.scss',\n shadow: true,\n})\nexport class Label implements ComponentInterface, MutableAriaAttribute {\n @Element() private el!: HTMLElement;\n private nativeLabel?: HTMLLabelElement;\n private inheritedAttributes: { [k: string]: any } = {};\n \n /\n If `true`, marks the label with a red star.\n * Automatically added if the wrapped component inside the `wcs-form-field` already has the `required` attribute. \n */\n @Prop({ reflect: true }) required = false;\n\n componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, LABEL_INHERITED_ATTRS),\n };\n }\n\n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string \| null \| undefined) {\n setOrRemoveAttribute(this.nativeLabel, attr, value);\n }\n\n render() {\n return (\n <Host slot=\"label\">\n <label ref={(el) => this.nativeLabel = el} {...this.inheritedAttributes}>\n <slot />\n </label>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"wcs-error.wcs-form-field.wcs-label.entry.cjs.js","mappings":"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","names":["Label","h","Host","isMutableAriaAttribute","isControlComponentWithLabel","normalizeWhitespace","inheritAriaAttributes","inheritAttributes","setOrRemoveAttribute"],"sources":["src/components/error/error.scss?tag=wcs-error&encapsulation=shadow","src/components/error/error.tsx","src/components/form-field/form-field.scss?tag=wcs-form-field&encapsulation=shadow","src/components/form-field/form-field.tsx","src/components/label/label.scss?tag=wcs-label&encapsulation=shadow","src/components/label/label.tsx"],"sourcesContent":[":host {\n --wcs-error-color: var(--wcs-semantic-color-text-critical);\n --wcs-error-font-size: var(--wcs-semantic-font-size-caption-2);\n --wcs-error-font-weight: var(--wcs-semantic-font-weight-book);\n\n color: var(--wcs-error-color);\n font-size: var(--wcs-error-font-size);\n font-weight: var(--wcs-error-font-weight);\n}\n","import { Component, ComponentInterface, h, Host } from '@stencil/core';\n\n/*\n The `wcs-error` should always be wrapped in a `wcs-form-field`.\n * It is used to display a red message under the field indicating an incorrect user input.\n * \n * ## Accessibility guidelines 💡\n * - Provide a relevant error message to inform the users what they should change to make the field valid\n * - Always add the error icon, to ensure the visual indication of the error state other than the color\n * - `aria-description` will be automatically added to the field for screen readers\n * - `aria-invalid=\"true\"` will be automatically added to the field for screen readers\n * \n * @cssprop --wcs-error-color - Color of the text\n * @cssprop --wcs-error-font-size - Font size\n * @cssprop --wcs-error-font-weight - Font weight\n /\n@Component({\n tag: 'wcs-error',\n styleUrl: 'error.scss',\n shadow: true,\n})\nexport class Label implements ComponentInterface {\n render() {\n return (\n <Host role=\"alert\" slot=\"error\">\n <slot />\n </Host>\n );\n }\n}\n",":host {\n --wcs-form-field-gap: var(--wcs-semantic-spacing-small);\n\n --wcs-form-field-prefix-suffix-border-radius: var(--wcs-semantic-border-radius-base);\n\n --wcs-form-field-prefix-icon-color: var(--wcs-semantic-color-foreground-primary);\n --wcs-form-field-prefix-value-color: var(--wcs-semantic-color-text-inverse);\n --wcs-form-field-prefix-placeholder-color: var(--wcs-semantic-color-text-inverse);\n\n display: flex;\n flex-direction: column;\n gap: var(--wcs-form-field-gap);\n\n .input-container {\n display: flex;\n }\n\n / Components in the prefix slot /\n ::slotted([slot=prefix]) {\n / Select /\n --wcs-select-value-color: var(--wcs-semantic-color-text-inverse);\n --wcs-select-placeholder-color: var(--wcs-semantic-color-text-inverse);\n --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-default);\n --wcs-select-control-arrow-color: var(--wcs-form-field-prefix-icon-color);\n --wcs-select-control-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n --wcs-select-control-border-width-default: 0;\n --wcs-select-control-border-style-focus: dashed;\n --wcs-select-control-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n / Native select /\n --wcs-native-select-value-color: var(--wcs-semantic-color-text-inverse);\n --wcs-native-select-placeholder-color: var(--wcs-semantic-color-text-inverse);\n --wcs-native-select-arrow-color: var(--wcs-form-field-prefix-icon-color);\n --wcs-native-select-background-color: var(--wcs-semantic-color-background-action-primary-default);\n --wcs-native-select-border-width: 0;\n --wcs-native-select-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n --wcs-native-select-border-style-focus: dashed;\n --wcs-native-select-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n --wcs-native-select-option-color: var(--wcs-semantic-color-text-inverse);\n\n / Button /\n --wcs-button-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n }\n\n / Components in the suffix slot /\n ::slotted([slot=suffix]) {\n --wcs-button-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n --wcs-select-control-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n --wcs-native-select-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n }\n}\n\n/ Disabled components in the prefix slot /\n::slotted([slot=prefix][disabled]),\n::slotted([slot=prefix]:disabled),\n::slotted([slot=prefix][aria-disabled=true]),\n::slotted([slot=prefix][data-disabled]) {\n --wcs-semantic-color-background-control-disabled: var(--wcs-semantic-color-background-action-primary-disabled);\n --wcs-semantic-color-text-disabled: var(--wcs-semantic-color-foreground-disabled);\n\n --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-disabled);\n --wcs-select-value-color: var(--wcs-semantic-color-text-disabled);\n --wcs-select-placeholder-color: var(--wcs-semantic-color-text-disabled);\n\n --wcs-native-select-background-color: var(--wcs-semantic-color-background-action-primary-disabled);\n --wcs-native-select-placeholder-color: var(--wcs-semantic-color-text-disabled);\n --wcs-native-select-value-color: var(--wcs-semantic-color-text-disabled);\n}\n\n/ Hover and press states /\n::slotted([slot=prefix]:hover:not([disabled]):not([data-disabled])) {\n --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-hover);\n --wcs-native-select-background-color: var(--wcs-semantic-color-background-action-primary-hover);\n}\n\n::slotted([slot=prefix]:active:not([disabled]):not([data-disabled])) {\n --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-press);\n --wcs-native-select-background-color: var(--wcs-semantic-color-background-action-primary-press);\n}\n\n.input-container {\n display: flex;\n}\n\n::slotted(wcs-select:not([slot=prefix])) {\n width: 100%;\n}\n\n::slotted(wcs-native-select:not([slot=prefix])) {\n width: 100%;\n}\n\n/ Components in the center that are prefixed /\n:host(.has-prefix) {\n ::slotted(:not([slot=prefix])) {\n --wcs-input-border-radius-left: 0;\n --wcs-select-control-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n --wcs-native-select-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n }\n}\n\n/ Components in the center that are suffixed /\n:host(.has-suffix) {\n ::slotted(:not([slot=suffix])) {\n --wcs-input-border-radius-right: 0;\n --wcs-select-control-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n --wcs-native-select-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n }\n\n}\n\n/ Components in the center that are prefixed AND suffixed /\n:host(.has-prefix.has-suffix) {\n ::slotted(:not([slot=prefix]):not([slot=suffix])) {\n --wcs-input-border-radius-left: 0;\n --wcs-input-border-radius-right: 0;\n --wcs-select-control-border-radius: 0;\n --wcs-native-select-border-radius: 0;\n }\n}\n","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: boolean = false;\n\n @State() private hasPrefix: boolean = false;\n @State() private hasSuffix: boolean = 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",":host {\n --wcs-label-font-weight: var(--wcs-semantic-font-weight-book);\n --wcs-label-color: var(--wcs-semantic-color-text-primary);\n --wcs-label-required-marker-color: var(--wcs-semantic-color-text-critical);\n\n --wcs-label-gap: var(--wcs-semantic-spacing-small);\n\n font-weight: var(--wcs-label-font-weight);\n}\n\n:host([required]) > label::after {\n font-weight: var(--wcs-label-font-weight);\n color: var(--wcs-label-required-marker-color);\n content: ' ';\n}\n\nlabel {\n display: inline-block;\n color: var(--wcs-label-color);\n font-weight: var(--wcs-label-font-weight);\n\n // Add margin before tooltip icon\n ::slotted(wcs-mat-icon) {\n display: inline;\n vertical-align: middle;\n margin-left: var(--wcs-label-gap);\n }\n}\n","import { Component, ComponentInterface, h, Host, Method, Prop, Element } from '@stencil/core';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst LABEL_INHERITED_ATTRS = ['title'];\n\n/*\n The `wcs-label` should always be wrapped in a `wcs-form-field`.\n * It is used to caption a form control component.\n \n ## Accessibility guidelines 💡\n * - Use concise name for the label. If you want to describe more your form control, add a `wcs-hint`\n * - Use the required flag only as an indication to inform users that the form control is required\n * \n * @cssprop --wcs-label-color - Color of the text\n * @cssprop --wcs-label-font-weight - Font weight of the text\n * \n * @cssprop --wcs-label-required-marker-color - Color of the required marker\n * \n * @cssprop --wcs-label-gap - Gap between text and required marker\n /\n@Component({\n tag: 'wcs-label',\n styleUrl: 'label.scss',\n shadow: true,\n})\nexport class Label implements ComponentInterface, MutableAriaAttribute {\n @Element() private el!: HTMLElement;\n private nativeLabel?: HTMLLabelElement;\n private inheritedAttributes: { [k: string]: any } = {};\n \n /\n If `true`, marks the label with a red star.\n * Automatically added if the wrapped component inside the `wcs-form-field` already has the `required` attribute. \n */\n @Prop({ reflect: true }) required: boolean = false;\n\n componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, LABEL_INHERITED_ATTRS),\n };\n }\n\n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string \| null \| undefined) {\n setOrRemoveAttribute(this.nativeLabel, attr, value);\n }\n\n render() {\n return (\n <Host slot=\"label\">\n <label ref={(el) => this.nativeLabel = el} {...this.inheritedAttributes}>\n <slot />\n </label>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/wcs-field-content.cjs.entry.js CHANGED Viewed

@@ -9,7 +9,7 @@ const FieldContent = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '90046cecd6e01ef9425879a47216ff4180d70526', slot: "content" }, index.h("slot", { key: '9b658ba9f8b688f5738d7181a9c6c0bcddd9aa82' })));
+        return (index.h(index.Host, { key: '251b9ccc1b13766b287f356dfc51d6a953ad0a5e', slot: "content" }, index.h("slot", { key: 'ee7d55bf47c0f468829e99a26a0fe340fbafcc9f' })));
     }
 };

package/dist/cjs/wcs-field-label.cjs.entry.js CHANGED Viewed

@@ -9,7 +9,7 @@ const FieldLabel = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '4ec0eb745e24f80408c9e28d178875ea1d37c66e', slot: "label" }, index.h("slot", { key: '9baea00992b41058ccbe8e1f44d0938e0f1aeaae' })));
+        return (index.h(index.Host, { key: 'a051b09993d67bf56b087d86ba433caf1bdbb7a6', slot: "label" }, index.h("slot", { key: '6044b728151fd48878f555d3db3e0754f31b7e51' })));
     }
 };

package/dist/cjs/wcs-field.cjs.entry.js CHANGED Viewed

@@ -12,7 +12,7 @@ const Field = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'fb2c8c01280829e581dda580158aa646771324d0' }, index.h("slot", { key: '26ad71454a94463bc4f0b9c32ad7b9a1cca72196', name: "label" }), index.h("slot", { key: '2bb5c1c03c3e26e07cc6da22b20a581b7fb4a4aa', name: "content" })));
+        return (index.h(index.Host, { key: 'ae0a6c7224dc199cd6cd342d77878bfff17aa49b' }, index.h("slot", { key: '408c146f3e6bfa1868964a29934494215627fb59', name: "label" }), index.h("slot", { key: '9c2151491f6acc4a5a6da36676e21e8dee6f156a', name: "content" })));
     }
 };
 Field.style = WcsFieldStyle0;

package/dist/cjs/wcs-footer.cjs.entry.js CHANGED Viewed

@@ -12,7 +12,7 @@ const Footer = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '98c10026067800d6d448f8f294f17b94d3f47bff' }, index.h("footer", { key: '6cba4d564d2febebb9a86489f664fa11f15a915a', role: "contentinfo" }, index.h("div", { key: '435b4010ba33fd6426dc9b55f2d38ad35883cc8d', class: "container" }, index.h("div", { key: 'a3a5f625ac9d40d3550d43f1be880f53995cdca1' }, index.h("slot", { key: '720270631183615417cf4436bb8977e54e167d70' })), index.h("div", { key: '48bc00852f3ef7703153dfc185e2dab24a47b921', class: "end" }, index.h("div", { key: '591e2769df499367ff23948ba1960c67bf068e0c', class: "end-left" }, index.h("slot", { key: 'edcfaa3ef55a895a975fe0571e0346a86ac784d6', name: "end-left" })), index.h("div", { key: '0ef66c2342f680b5ebd6ff6bfdd90b67b7675d47', class: "end-right" }, index.h("slot", { key: '8a58b3a68a545e1cb7941784e2d437dd9099b9ab', name: "end-right" })))))));
+        return (index.h(index.Host, { key: '6fe975235d6de2793e55e8d10860649b5684c093' }, index.h("footer", { key: '80b0ff721eedab3e4cc00fd2484a638718fc8b13', role: "contentinfo" }, index.h("div", { key: 'f7d676d79f4d8780736e3a28e3e4b2aa1f0786e1', class: "container" }, index.h("div", { key: 'e1f9ea823133d972d3eb2bc8e7eaa18558448a73' }, index.h("slot", { key: 'd7177b9e98ac24ad39008669de01899e71c27079' })), index.h("div", { key: '849ceafdd459f24b672e1f68edf86ffd4fcce733', class: "end" }, index.h("div", { key: '7077861e872bbb50e7e5de0c968fe2222e9bf7d7', class: "end-left" }, index.h("slot", { key: 'dded653e62bf683e0514c51b06e55ccb44f70c54', name: "end-left" })), index.h("div", { key: 'ec25d2a5f84cb477eaa6a63de4df6ce6e9db07c5', class: "end-right" }, index.h("slot", { key: '4201096294b44a29f74112c2acaa2163f9ecfcb9', name: "end-right" })))))));
     }
 };
 Footer.style = WcsFooterStyle0;

package/dist/cjs/wcs-galactic-menu.cjs.entry.js CHANGED Viewed

@@ -65,9 +65,9 @@ const Galactic = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '57fa555ec72e13761295e18aa779d5ac5be81111' }, index.h("span", { key: '91b4fe9a2f6ee303c3ba00c2ba1a1ded0ac7a761' }, this.text), index.h("button", Object.assign({ key: '324d0c458e500ba5d47187bdd59297f67e067374', "aria-haspopup": "true", "aria-controls": "menu", ref: el => {
+        return (index.h(index.Host, { key: 'bc460c17b222723b8cc037042cc758f8ca0e50ec' }, index.h("span", { key: 'd324ff624a9e5c9f6984134d4091986cac11f18b' }, this.text), index.h("button", Object.assign({ key: '7b0160174a249b30e082b9b2a77aca334ee6256a', "aria-haspopup": "true", "aria-controls": "menu", ref: el => {
                 this.menuButton = el;
-            }, "aria-expanded": this.showPopoverMenu ? "true" : "false" }, this.inheritedAttributes, { onClick: _ => this.toggleMenu() }), index.h("wcs-mat-icon", { key: 'accf07fb4f5d737f30f16c5cd96b96a5b66ba1d0', id: "toggle-menu-icon", icon: "more_horiz", size: "m" })), index.h("span", { key: 'f9ae129e58d7911a7a88d8b2449a8b2e19be516f', id: "menu", role: "menu", "data-show": this.showPopoverMenu }, index.h("div", { key: 'f4b78cf4631a7fa1b6ca1e68a7eb633d52c7b994', id: "arrow", "data-popper-arrow": true }), index.h("slot", { key: 'c9eb687e1b82f075a5ef1b84d09b69bdbf9c292f' }))));
+            }, "aria-expanded": this.showPopoverMenu ? "true" : "false" }, this.inheritedAttributes, { onClick: _ => this.toggleMenu() }), index.h("wcs-mat-icon", { key: '96b20053845f5490791ea278c2444392ba630600', id: "toggle-menu-icon", icon: "more_horiz", size: "m" })), index.h("span", { key: '6f959f220edbf293fe6922f7aaeaab0f213bf736', id: "menu", role: "menu", "data-show": this.showPopoverMenu }, index.h("div", { key: '6a05e468d65252ecbb57b421a53be0a0a1974f98', id: "arrow", "data-popper-arrow": true }), index.h("slot", { key: 'c9398cbb856d836820ac1cddf3113710eeaff5fb' }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/wcs-galactic.cjs.entry.js CHANGED Viewed

@@ -14,7 +14,7 @@ const Galactic = class {
         this.show = false;
     }
     render() {
-        return (index.h(index.Host, { key: '650d312b2d662bb9e900d330d9e89a279af10160' }, index.h("div", { key: 'eee212ebe7bc3031b700cbcd959133ba3ab05457', class: "container" }, index.h("div", { key: 'ee49e9c2e3cf1ed93c93812747374f4b2fb3c5aa', class: "logo-container" }, index.h("img", { key: 'd40d693d547591e088e7b2d9e45a39db0152a166', src: SNCF_BASE64_SVG_LOGO, id: "sncf-logo", alt: "SNCF" }), index.h("span", { key: 'e8e1ab2521b54b73ad3a9b27b82e19cc9a534b70' }, this.text)), index.h("div", { key: '2be508619dad9c082a129e2ec20fa298ebc4b0b5', class: "actions-container" }, index.h("slot", { key: '4df31395f1507d942e86971c041c41b17442c3a7' })))));
+        return (index.h(index.Host, { key: 'bcede9aa03d2014887eeaa4d5728d57c32a69de2' }, index.h("div", { key: '2d031655b20b592b77e2227a195f15535071c069', class: "container" }, index.h("div", { key: '1d3a345c56925946f5b39ad9edaad7ee927343cc', class: "logo-container" }, index.h("img", { key: '3f7e9a0a7df3a954d21e328da562189771baf8a8', src: SNCF_BASE64_SVG_LOGO, id: "sncf-logo", alt: "SNCF" }), index.h("span", { key: '68c00801e7f2564930d6a5f77fc6f45511a321cf' }, this.text)), index.h("div", { key: '3724b08dca457a9be21ecb84925ed3fea4e49f95', class: "actions-container" }, index.h("slot", { key: '572f4ca9036c737a579f2c58ec113cada4dd421c' })))));
     }
 };
 const SNCF_BASE64_SVG_LOGO = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVy' +

package/dist/cjs/wcs-grid-column.cjs.entry.js CHANGED Viewed

@@ -81,7 +81,7 @@ const GridColumn = class {
     }
     render() {
         const ButtonOrDiv = this.getTagName();
-        return (index.h(index.Host, { key: '46989c38681747daf1a458eeda881657aa5acdfb', slot: "grid-column" }, index.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), index.h(ButtonOrDiv, { key: 'cb49f504363332cb9c586bc906804cc4295d6ec5', class: "grid-column-th-content", ref: (el) => this.buttonOrDiv = el, tabIndex: this.sort ? this.getTabIndex() : -1 }, index.h("span", { key: '801194d92757db834561dd11396223a939b1c6cb' }, this.name), this.sort ? index.h("div", { class: "sort-arrow-container" }, index.h(GridSortArrow, { state: this.sortOrder })) : ''))));
+        return (index.h(index.Host, { key: 'e2c93e817abc5a61d6285f32779d915ff7368710', slot: "grid-column" }, index.h("th", Object.assign({ key: 'c23695b8680146e66e75ea958dc9dd9cac6056ac', 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), index.h(ButtonOrDiv, { key: 'e936f0bd861b2d243071d45ccb4fa6bf8448f7a6', class: "grid-column-th-content", ref: (el) => this.buttonOrDiv = el, tabIndex: this.sort ? this.getTabIndex() : -1 }, index.h("span", { key: '33e9e0238aa5cea93bff5f0522e30b7cfa787283' }, this.name), this.sort ? index.h("div", { class: "sort-arrow-container" }, index.h(GridSortArrow, { state: this.sortOrder })) : ''))));
     }
     onSortClick() {
         if (!this.sort)

package/dist/cjs/wcs-grid-column.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"wcs-grid-column.entry.cjs.js","mappings":"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","names":["h","inheritAriaAttributes","inheritAttributes","setOrRemoveAttribute","Host","isSpaceKey","isEnterKey"],"sources":["src/components/grid-column/grid-sort-arrow.tsx","src/components/grid-column/grid-column.scss?tag=wcs-grid-column&encapsulation=shadow","src/components/grid-column/grid-sort-arrow.scss?tag=wcs-grid-column&encapsulation=shadow","src/components/grid-column/grid-column.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { WcsSortOrder } from '../grid/grid-interface';\n\ninterface GridSortArrowProps {\n state: WcsSortOrder;\n}\n\nexport const GridSortArrow: FunctionalComponent<GridSortArrowProps> = ({state}) => (\n <svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n <g class={(state === 'none' ? '' : state) + ' arrow-group'}>\n <path class=\"arrow\"\n fill=\"#333333\"\n d=\"M10.0973 5.34619C9.79269 5.67941 9.29832 5.67941 8.99348 5.34619L6.78316 2.92128L6.78316 11.144C6.78316 11.6168 6.43368 12 6.00289 12C5.57187 12 5.22261 11.6168 5.22261 11.144L5.22261 2.92128L3.01219 5.34619C2.70802 5.67941 2.21341 5.67941 1.90881 5.34619C1.75655 5.17859 1.68005 4.95932 1.68005 4.73997C1.68005 4.52061 1.75655 4.30192 1.90881 4.13433L5.45122 0.250846C5.75597 -0.0836145 6.24977 -0.0836145 6.55454 0.250846L10.0973 4.13433C10.4017 4.46883 10.4017 5.01168 10.0973 5.34619Z\"\n />\n </g>\n </svg>\n\n);\n","@import '../../style/focus-outline.scss';\n\n:host {\n\n /* All css variables are in grid.scss.\n Any variable can be overridden here for a single grid-column by using the correct selector in CSS /\n\n display: contents;\n\n th {\n color: var(--wcs-grid-header-text-color);\n background-color: var(--wcs-grid-header-background-color-default);\n border-bottom: var(--wcs-grid-header-border-bottom);\n border-left: var(--wcs-grid-header-border-left);\n border-radius: var(--wcs-grid-header-border-radius);\n padding: var(--wcs-grid-header-padding-vertical) var(--wcs-grid-header-padding-horizontal);\n text-align: left;\n align-content: center;\n transition: background-color var(--wcs-grid-header-transition-duration) ease-in-out;\n\n .grid-column-th-content {\n // The following lines aim to avoid displaying the native button style of the agent\n -webkit-appearance: none;\n appearance: none;\n background: none;\n border: none;\n outline: none;\n margin: 0;\n padding: 0;\n font-size: var(--wcs-grid-header-font-size);\n line-height: var(--wcs-grid-header-line-height);\n color: var(--wcs-grid-header-text-color);\n cursor: inherit;\n display: inline-flex;\n border-collapse: separate;\n font-family: inherit;\n text-align: left;\n align-items: center;\n gap: var(--wcs-semantic-spacing-base);\n\n span {\n font-weight: var(--wcs-grid-header-font-weight);\n }\n }\n\n / Hovered grid header /\n &[aria-sort]:hover {\n background-color: var(--wcs-grid-header-background-color-hover);\n }\n\n / Pressed grid header /\n &[aria-sort]:active {\n background-color: var(--wcs-grid-header-background-color-press);\n }\n\n / Grid header with asc or desc sort-config /\n &[aria-sort=ascending],\n &[aria-sort=descending] {\n --wcs-grid-header-sort-arrow-color: var(--wcs-grid-header-sort-arrow-color-default);\n }\n\n / Hovered grid header, not sorted yet /\n &[aria-sort=none]:hover {\n --wcs-grid-header-sort-arrow-color: var(--wcs-grid-header-sort-arrow-color-hover);\n }\n\n // XXX: This code works in Firefox as well, but there is a browser-side rendering bug that prevents it from displaying correctly.\n // We decided to wait for Firefox to fix the bug instead adding a dirty fix here\n &:focus-visible, &:has(:focus-visible) {\n @include focus-outline($outline-color: var(--wcs-grid-outline-color), $outline-offset: 0);\n }\n\n @supports not selector(&:has(:focus-visible)) {\n &:focus-within {\n @include focus-outline($outline-color: var(--wcs-grid-outline-color), $outline-offset: 0);\n }\n }\n }\n .pointer {\n cursor: pointer;\n }\n}\n\n:host([hidden]) {\n display: none !important;\n}\n",".arrow-group {\n transform-origin: 50% 50%;\n transition: transform var(--wcs-semantic-motion-duration-feedback-base, 150ms) ease-in-out;\n}\n\n.arrow {\n fill: var(--wcs-grid-header-sort-arrow-color, transparent);\n}\n\n.desc {\n transform: rotate(180deg);\n}\n","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"],"version":3}
1	+ {"file":"wcs-grid-column.entry.cjs.js","mappings":"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","names":["h","inheritAriaAttributes","inheritAttributes","setOrRemoveAttribute","Host","isSpaceKey","isEnterKey"],"sources":["src/components/grid-column/grid-sort-arrow.tsx","src/components/grid-column/grid-column.scss?tag=wcs-grid-column&encapsulation=shadow","src/components/grid-column/grid-sort-arrow.scss?tag=wcs-grid-column&encapsulation=shadow","src/components/grid-column/grid-column.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { WcsSortOrder } from '../grid/grid-interface';\n\ninterface GridSortArrowProps {\n state: WcsSortOrder;\n}\n\nexport const GridSortArrow: FunctionalComponent<GridSortArrowProps> = ({state}) => (\n <svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n <g class={(state === 'none' ? '' : state) + ' arrow-group'}>\n <path class=\"arrow\"\n fill=\"#333333\"\n d=\"M10.0973 5.34619C9.79269 5.67941 9.29832 5.67941 8.99348 5.34619L6.78316 2.92128L6.78316 11.144C6.78316 11.6168 6.43368 12 6.00289 12C5.57187 12 5.22261 11.6168 5.22261 11.144L5.22261 2.92128L3.01219 5.34619C2.70802 5.67941 2.21341 5.67941 1.90881 5.34619C1.75655 5.17859 1.68005 4.95932 1.68005 4.73997C1.68005 4.52061 1.75655 4.30192 1.90881 4.13433L5.45122 0.250846C5.75597 -0.0836145 6.24977 -0.0836145 6.55454 0.250846L10.0973 4.13433C10.4017 4.46883 10.4017 5.01168 10.0973 5.34619Z\"\n />\n </g>\n </svg>\n\n);\n","@import '../../style/focus-outline.scss';\n\n:host {\n\n /* All css variables are in grid.scss.\n Any variable can be overridden here for a single grid-column by using the correct selector in CSS /\n\n display: contents;\n\n th {\n color: var(--wcs-grid-header-text-color);\n background-color: var(--wcs-grid-header-background-color-default);\n border-bottom: var(--wcs-grid-header-border-bottom);\n border-left: var(--wcs-grid-header-border-left);\n border-radius: var(--wcs-grid-header-border-radius);\n padding: var(--wcs-grid-header-padding-vertical) var(--wcs-grid-header-padding-horizontal);\n text-align: left;\n align-content: center;\n transition: background-color var(--wcs-grid-header-transition-duration) ease-in-out;\n\n .grid-column-th-content {\n // The following lines aim to avoid displaying the native button style of the agent\n -webkit-appearance: none;\n appearance: none;\n background: none;\n border: none;\n outline: none;\n margin: 0;\n padding: 0;\n font-size: var(--wcs-grid-header-font-size);\n line-height: var(--wcs-grid-header-line-height);\n color: var(--wcs-grid-header-text-color);\n cursor: inherit;\n display: inline-flex;\n border-collapse: separate;\n font-family: inherit;\n text-align: left;\n align-items: center;\n gap: var(--wcs-semantic-spacing-base);\n\n span {\n font-weight: var(--wcs-grid-header-font-weight);\n }\n }\n\n / Hovered grid header /\n &[aria-sort]:hover {\n background-color: var(--wcs-grid-header-background-color-hover);\n }\n\n / Pressed grid header /\n &[aria-sort]:active {\n background-color: var(--wcs-grid-header-background-color-press);\n }\n\n / Grid header with asc or desc sort-config /\n &[aria-sort=ascending],\n &[aria-sort=descending] {\n --wcs-grid-header-sort-arrow-color: var(--wcs-grid-header-sort-arrow-color-default);\n }\n\n / Hovered grid header, not sorted yet /\n &[aria-sort=none]:hover {\n --wcs-grid-header-sort-arrow-color: var(--wcs-grid-header-sort-arrow-color-hover);\n }\n\n // XXX: This code works in Firefox as well, but there is a browser-side rendering bug that prevents it from displaying correctly.\n // We decided to wait for Firefox to fix the bug instead adding a dirty fix here\n &:focus-visible, &:has(:focus-visible) {\n @include focus-outline($outline-color: var(--wcs-grid-outline-color), $outline-offset: 0);\n }\n\n @supports not selector(&:has(:focus-visible)) {\n &:focus-within {\n @include focus-outline($outline-color: var(--wcs-grid-outline-color), $outline-offset: 0);\n }\n }\n }\n .pointer {\n cursor: pointer;\n }\n}\n\n:host([hidden]) {\n display: none !important;\n}\n",".arrow-group {\n transform-origin: 50% 50%;\n transition: transform var(--wcs-semantic-motion-duration-feedback-base, 150ms) ease-in-out;\n}\n\n.arrow {\n fill: var(--wcs-grid-header-sort-arrow-color, transparent);\n}\n\n.desc {\n transform: rotate(180deg);\n}\n","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({ reflect: true }) 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({ reflect: true }) 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"],"version":3}

package/dist/cjs/wcs-grid-custom-cell.cjs.entry.js CHANGED Viewed

@@ -11,7 +11,7 @@ const GridCustomCell = class {
         this.rowId = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'ff6029ca87066fa7fe87dc269c067cd128a41d21', slot: this.columnId + '-' + this.rowId }, index.h("slot", { key: '6469540fb6399ab03af6c9dcb6442bede62c9845' })));
+        return (index.h(index.Host, { key: '3353e4de7a3eeb4d903a63d5adf257ed3427beb8', slot: this.columnId + '-' + this.rowId }, index.h("slot", { key: 'cc3297d327379b74a385c4909964b8371da68a97' })));
     }
 };

package/dist/cjs/wcs-grid-pagination.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const gridPagination = require('./grid-pagination-e4f29c78.js');
+const gridPagination = require('./grid-pagination-4505d7b6.js');
 require('./index-6f0140d8.js');
 require('./helpers-2f1a8ddc.js');

package/dist/cjs/wcs-grid.cjs.entry.js CHANGED Viewed

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-6f0140d8.js');
-const gridPagination = require('./grid-pagination-e4f29c78.js');
+const gridPagination = require('./grid-pagination-4505d7b6.js');
 const keyboardEvent = require('./keyboard-event-40ecdc27.js');
 const helpers = require('./helpers-2f1a8ddc.js');
 const isEqual = require('./isEqual-8a0a6936.js');
@@ -1293,6 +1293,14 @@ const Grid = class {
     onBlur(event) {
         this.wcsBlur.emit(event);
     }
+    /**
+     * Set focus on the first cell of the grid
+     */
+    async focusFirstCell() {
+        var _a;
+        this.cursorPosition = { col: this.selectionConfig === 'none' ? 0 : 1, row: 1 };
+        (_a = this.getElementToFocusAtCursorPosition()) === null || _a === void 0 ? void 0 : _a.focus();
+    }
     /**
      * If selectionConfig is different from `none`, that means that an extra column for radio or checkbox is rendered
      * in the table.
@@ -1697,12 +1705,12 @@ const Grid = class {
     }
     render() {
         var _a, _b, _c, _d;
-        return (index.h(index.Host, { key: 'bdafd86216877fd703389c65665e75aa5ba21a90' }, index.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), index.h("thead", { key: 'e22c92431c2f0e75cfb456688525015820aee43a' }, index.h("tr", { key: '9f857089bc5b552964024039a2ed3b4ab241bc6d', "aria-rowindex": "1" }, this.selectionConfig === 'none' ? ''
+        return (index.h(index.Host, { key: '98d13e7497ec9d9ecd3e149b3f6986e16bc5cc2a' }, index.h("table", Object.assign({ key: 'a44825cf71ff284a5204e9d922c0eba2c2ca23f4', role: "grid", ref: (el) => (this.nativeTable = el), "aria-rowcount": !this.loading && ((_a = this.rows) === null || _a === void 0 ? void 0 : _a.length), "aria-colcount": !this.loading && this.totalDisplayedColumnCount() }, this.inheritedAttributes), index.h("thead", { key: '336578d350ae8082a19fa6798af35f2fdd015ff9' }, index.h("tr", { key: 'fdb38402ea5c58dd77dad7df2ef97d54c521123c', "aria-rowindex": "1" }, this.selectionConfig === 'none' ? ''
             : index.h("th", { class: "wcs-grid-selection-column" }, this.selectionConfig === 'single' ? '' :
                 index.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) })), index.h("slot", { key: '51a565cc671f43bfb054bdf85370cd2035d4f43e', name: "grid-column" }))), index.h("tbody", { key: '30b62b585ba5d925b6abdfe83e0059c94f27b5e7' }, 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) })), index.h("slot", { key: '2d68b72fac0251dab9f519cf84c25c96262c193b', name: "grid-column" }))), index.h("tbody", { key: '4156e796ac5a81170b5dba011159f8e6bb7a7e60' }, this.loading
             ? index.h("tr", { "aria-busy": "true" }, index.h("td", { colSpan: this.totalColumnCount(), class: "loading" }, index.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)))), index.h("slot", { key: 'a6f76be638c7761f7f98acb837ff742f8ce08319', 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)))), index.h("slot", { key: 'c683eb883707ffbd1fed22d86ececb595f70c2c0', name: "grid-pagination" })));
     }
     /**
      * Returns the row with all mapped cells inside.