wcs-core 4.2.0 → 5.0.0

package/dist/cjs/wcs-dropdown.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-dropdown.entry.cjs.js","mappings":"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","names":["createPopper","clickTargetIsElementOrChildren","isKeydown","isKeyup","isElementFocused","isEscapeKey","h","Host","SelectArrow"],"sources":["./src/components/dropdown/dropdown.scss?tag=wcs-dropdown&encapsulation=shadow","./src/components/dropdown/dropdown.tsx"],"sourcesContent":[":host {\n    display: flex;\n}\n\nwcs-button {\n    --wcs-button-padding: 8px 10px 8px 16px !important;\n}\n:host([no-arrow]) {\n    wcs-button {\n        --wcs-button-padding: 8px 16px 8px 16px !important;\n    }\n}\n\n\n:host([shape=small]) {\n    wcs-button {\n        --wcs-button-padding: 2px 10px 2px 16px !important;\n    }\n}\n\n:host([shape=small][no-arrow]) {\n    wcs-button {\n        --wcs-button-padding: 2px 16px 2px 16px !important;\n    }\n}\n\n.wcs-button-content-wrapper {\n    display: flex;\n}\n\n.popover {\n    display: none;\n    border: 1px solid #d7d7d7;\n    border-radius: var(--wcs-border-radius);\n    background-color: var(--wcs-white);\n    z-index: 9999;\n}\n\n.show {\n    display: block;\n}\n\n// XXX: So that item hover background does not overflow\n.container {\n    border-radius: inherit;\n    overflow: hidden;\n    padding: calc(var(--wcs-padding) / 2) 0;\n    background-color: var(--wcs-white);\n}\n\n#arrow,\n#arrow::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: inherit;\n    border: solid 1px #d7d7d7;\n}\n\n#arrow {\n    visibility: hidden;\n    z-index: -1;\n}\n\n#arrow::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n}\n\n.popover[data-popper-placement^='top'] > #arrow {\n    bottom: -5px;\n}\n\n.popover[data-popper-placement^='bottom'] > #arrow {\n    top: -6px;\n}\n\n.popover[data-popper-placement^='left'] > #arrow {\n    right: -4px;\n}\n\n.popover[data-popper-placement^='right'] > #arrow {\n    left: -6px;\n}\n","import {\n    Component,\n    ComponentInterface, Element,\n    h, Host, Listen, Prop, State, Watch\n} from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport { WcsButtonMode, WcsButtonShape } from '../button/button-interface';\nimport { createPopper, Instance } from '@popperjs/core';\nimport { WcsDropdownPlacement } from './dropdown-interface';\nimport { clickTargetIsElementOrChildren, isEscapeKey, isKeydown, isKeyup } from '../../utils/helpers';\nimport { isElementFocused } from \"../../utils/accessibility\";\n\n\n@Component({\n    tag: 'wcs-dropdown',\n    styleUrl: 'dropdown.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Dropdown implements ComponentInterface {\n    @Element() private el: HTMLWcsDropdownElement;\n\n    /** Hides the arrow in the button */\n    @Prop() noArrow: boolean = false;\n\n    /** Dropdown's button mode */\n    @Prop() mode: WcsButtonMode = 'stroked';\n\n    /** Dropdown's button shape */\n    @Prop() shape: WcsButtonShape = 'normal';\n\n    /** Specifies whether the dropdown button is clickable or not */\n    @Prop() disabled: boolean = false;\n\n    /** placement of the dropdown's popover */\n    @Prop() placement: WcsDropdownPlacement = 'bottom-end';\n\n    @State() private expanded = false;\n\n\n    private popper: Instance;\n\n    private buttonTextColor: string;\n\n    @Watch('placement')\n    protected placementChange() {\n        this.popper.setOptions({\n            ...this.popper.state.options,\n            placement: this.placement\n        }).then(_ => this.popper.update());\n    }\n\n    componentDidLoad() {\n        const wcsButtonElement = this.el.shadowRoot.querySelector('wcs-button');\n        const buttonWrapper = wcsButtonElement.shadowRoot.querySelector('button');\n        this.buttonTextColor = window.getComputedStyle(buttonWrapper).color;\n        const popoverDiv = this.el.shadowRoot.querySelector('.popover') as HTMLElement;\n\n\n        this.popper = createPopper(wcsButtonElement, popoverDiv, {\n            placement: this.placement,\n            modifiers: [\n                {\n                    name: 'offset',\n                    options: {\n                        offset: [0, 8]\n                    }\n                }\n            ]\n        });\n\n        if (!this.noArrow) {\n            (this.el.shadowRoot.querySelector('.arrow') as HTMLElement).style.fill = this.buttonTextColor;\n        }\n        this.fixForFirefoxBelow63();\n    }\n\n    private fixForFirefoxBelow63() {\n        // If the items appear out of the slot we place them back\n        const items = this.el.querySelectorAll('wcs-dropdown-item');\n        const container = this.el.querySelector('.container');\n        if (items.length > 0 && container) {\n            items.forEach(i => {\n                this.el.removeChild(i);\n                container.appendChild(i);\n            });\n        }\n    }\n\n    private onButtonClick(_: MouseEvent): void {\n        this.expanded = !this.expanded;\n    }\n\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(event: MouseEvent) {\n        const clickedOnDropdownOrChildren = clickTargetIsElementOrChildren(event, this.el);\n        if (this.expanded && !clickedOnDropdownOrChildren) {\n            this.expanded = false;\n        }\n    }\n\n    @Listen('wcsDropdownItemClick')\n    dropdownItemClick(_: CustomEvent<void>) {\n        this.expanded = false;\n    }\n\n    @Listen('keydown')\n    onKeyDown(evt: KeyboardEvent): void {\n        if (this.expanded && (isKeydown(evt) || isKeyup(evt))) {\n            // If the user presses an arrow key (up or down), the browser is prevented from scrolling through\n            evt.preventDefault();\n            const items = Array.from(this.el.querySelectorAll('wcs-dropdown-item'));\n            const currentFocusedItemIndex = items.findIndex(item => isElementFocused(item));\n            // If the dropdown is expended by the user, but no item is focused and the keydown is pressed\n            if (currentFocusedItemIndex === -1 && isKeydown(evt)) {\n                this.focusFirstItemIfPresent(items);\n            } else {\n                this.moveFocusedItemByDirection(items, currentFocusedItemIndex, isKeydown(evt) ? 'down' : 'up');\n            }\n        }\n        if (this.expanded && isEscapeKey(evt)) {\n            this.closeOverlayAndFocusButton();\n        }\n    }\n\n\n    private focusFirstItemIfPresent<T extends HTMLElement>(items: T[]) {\n        if (items[0]) {\n            items[0].focus();\n        }\n    }\n\n    private moveFocusedItemByDirection<T extends HTMLElement>(items: T[], currentFocusedItemIndex: number, direction: 'up' | 'down') {\n        const itemToFocus = items[(currentFocusedItemIndex) + (direction === 'down' ? 1 : -1)];\n        if (itemToFocus) {\n            itemToFocus.focus();\n        }\n    }\n\n    private closeOverlayAndFocusButton() {\n        this.expanded = !this.expanded;\n        const wcsButton = this.el.shadowRoot.querySelector('wcs-button') as HTMLWcsButtonElement;\n        wcsButton.focus();\n    }\n\n    componentDidRender() {\n        if (this.popper) {\n            this.popper.update();\n        }\n        if (!this.noArrow) {\n            (this.el.shadowRoot.querySelector('.arrow') as HTMLElement).style.fill = this.buttonTextColor;\n        }\n    }\n\n    render() {\n        return (\n            <Host>\n                <wcs-button mode={this.mode} shape={this.shape} disabled={this.disabled}\n                            onClick={($event) => this.onButtonClick($event)}>\n                    <div class=\"wcs-button-content-wrapper\">\n                        <slot name=\"placeholder\"/>\n                        {this.noArrow ? null : (<SelectArrow up={this.expanded}/>)}\n                    </div>\n                </wcs-button>\n                <div class={(this.expanded ? 'show ' : '') + 'popover'}>\n                    <div id=\"arrow\" data-popper-arrow/>\n                    <div class=\"container\">\n                        <slot name=\"item\"/>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n\n"],"version":3}
+{"file":"wcs-dropdown.entry.cjs.js","mappings":"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","names":["isWcsButtonSize","WcsButtonSizeValues","createPopper","clickTargetIsElementOrChildren","isKeydown","isKeyup","isElementFocused","isEscapeKey","h","Host","SelectArrow"],"sources":["./src/components/dropdown/dropdown.scss?tag=wcs-dropdown&encapsulation=shadow","./src/components/dropdown/dropdown.tsx"],"sourcesContent":[":host {\n    display: flex;\n}\n\nwcs-button {\n    --wcs-button-padding: 8px 10px 8px 16px !important;\n    height: fit-content;\n}\n:host([no-arrow]) {\n    wcs-button {\n        --wcs-button-padding: 8px 16px 8px 16px !important;\n    }\n}\n\n:host([size=s][no-arrow]) {\n    wcs-button {\n        --wcs-button-padding: var(--wcs-padding-s) var(--wcs-padding-m) !important;\n    }\n}\n\n:host([size=s]) {\n    wcs-button {\n        --wcs-button-padding: var(--wcs-padding-s) calc(6px - var(--wcs-padding-s)) var(--wcs-padding-s) var(--wcs-padding-m) !important;\n    }\n}\n\n.wcs-button-content-wrapper {\n    display: flex;\n}\n\n.popover {\n    display: none;\n    border: 1px solid #d7d7d7;\n    border-radius: var(--wcs-border-radius);\n    background-color: var(--wcs-white);\n    z-index: 9999;\n}\n\n.show {\n    display: block;\n}\n\n// XXX: So that item hover background does not overflow\n.container {\n    border-radius: inherit;\n    overflow: hidden;\n    padding: calc(var(--wcs-padding) / 2) 0;\n    background-color: var(--wcs-white);\n}\n\n// FIXME : Workaround to display the SelectArrow in blue when the background is white / transparent\n// Remove this when the SelectArrow has its own tokens and background-contrast handling\n:host(:not([mode=plain])) {\n    svg g path:first-of-type {\n        fill: var(--wcs-primary) !important;\n    }\n}\n\n#arrow,\n#arrow::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: inherit;\n    border: solid 1px #d7d7d7;\n}\n\n#arrow {\n    visibility: hidden;\n    z-index: -1;\n}\n\n#arrow::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n}\n\n#is-empty {\n    display: block;\n    width: 20ch;\n    padding: 0 var(--wcs-padding);\n}\n\n.popover[data-popper-placement^='top'] > #arrow {\n    bottom: -5px;\n}\n\n.popover[data-popper-placement^='bottom'] > #arrow {\n    top: -6px;\n}\n\n.popover[data-popper-placement^='left'] > #arrow {\n    right: -4px;\n}\n\n.popover[data-popper-placement^='right'] > #arrow {\n    left: -6px;\n}\n","import {\n    Component,\n    ComponentInterface, Element,\n    h, Host, Listen, Prop, State, Watch\n} from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport {\n    isWcsButtonSize,\n    WcsButtonMode,\n    WcsButtonShape,\n    WcsButtonSize,\n    WcsButtonSizeValues\n} from '../button/button-interface';\nimport { createPopper, Instance } from '@popperjs/core';\nimport { WcsDropdownPlacement } from './dropdown-interface';\nimport { clickTargetIsElementOrChildren, isEscapeKey, isKeydown, isKeyup } from '../../utils/helpers';\nimport { isElementFocused } from \"../../utils/accessibility\";\n\n/**\n * The dropdown component use a wcs-button under the hood, so you can use the same css classes as the button to style the\n * dropdown.\n * \n * @slot placeholder - The slot containing the placeholder displayed in button\n * @slot item - The slot container the list of `wcs-dropdown-item` elements\n */\n@Component({\n    tag: 'wcs-dropdown',\n    styleUrl: 'dropdown.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Dropdown implements ComponentInterface {\n    @Element() private el: HTMLWcsDropdownElement;\n\n    /** Hides the arrow in the button */\n    @Prop() noArrow: boolean = false;\n\n    /** Dropdown's button mode */\n    @Prop() mode: WcsButtonMode = 'stroked';\n\n    /** Dropdown's button shape */\n    @Prop() shape: WcsButtonShape = 'normal';\n    \n    /** Dropdown's button size */\n    @Prop() size: WcsButtonSize = 'm';\n\n    /** Specifies whether the dropdown button is clickable or not */\n    @Prop() disabled: boolean = false;\n\n    /** placement of the dropdown's popover */\n    @Prop() placement: WcsDropdownPlacement = 'bottom-end';\n\n    @State() private expanded = false;\n\n\n    private popper: Instance;\n\n    private buttonTextColor: string;\n\n    @Watch('placement')\n    protected placementChange() {\n        this.popper.setOptions({\n            ...this.popper.state.options,\n            placement: this.placement\n        }).then(_ => this.popper.update());\n    }\n\n    componentDidLoad() {\n        if (!isWcsButtonSize(this.size)) {\n            console.error(`Invalid size value for wcs-dropdown : \"${this.size}\". Must be one of \"${WcsButtonSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n        \n        const wcsButtonElement = this.el.shadowRoot.querySelector('wcs-button');\n        const buttonWrapper = wcsButtonElement.shadowRoot.querySelector('button');\n        this.buttonTextColor = window.getComputedStyle(buttonWrapper).color;\n        const popoverDiv = this.el.shadowRoot.querySelector('.popover') as HTMLElement;\n\n\n        this.popper = createPopper(wcsButtonElement, popoverDiv, {\n            placement: this.placement,\n            modifiers: [\n                {\n                    name: 'offset',\n                    options: {\n                        offset: [0, 8]\n                    }\n                }\n            ]\n        });\n\n        if (!this.noArrow) {\n            (this.el.shadowRoot.querySelector('.arrow') as HTMLElement).style.fill = this.buttonTextColor;\n        }\n        this.fixForFirefoxBelow63();\n    }\n\n    private fixForFirefoxBelow63() {\n        // If the items appear out of the slot we place them back\n        const items = this.el.querySelectorAll('wcs-dropdown-item');\n        const container = this.el.querySelector('.container');\n        if (items.length > 0 && container) {\n            items.forEach(i => {\n                this.el.removeChild(i);\n                container.appendChild(i);\n            });\n        }\n    }\n\n    private onButtonClick(_: MouseEvent): void {\n        this.expanded = !this.expanded;\n    }\n\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(event: MouseEvent) {\n        const clickedOnDropdownOrChildren = clickTargetIsElementOrChildren(event, this.el);\n        if (this.expanded && !clickedOnDropdownOrChildren) {\n            this.expanded = false;\n        }\n    }\n\n    @Listen('wcsDropdownItemClick')\n    dropdownItemClick(_: CustomEvent<void>) {\n        this.expanded = false;\n    }\n\n    @Listen('keydown')\n    onKeyDown(evt: KeyboardEvent): void {\n        if (this.expanded && (isKeydown(evt) || isKeyup(evt))) {\n            // If the user presses an arrow key (up or down), the browser is prevented from scrolling through\n            evt.preventDefault();\n            const items = Array.from(this.el.querySelectorAll('wcs-dropdown-item'));\n            const currentFocusedItemIndex = items.findIndex(item => isElementFocused(item));\n            // If the dropdown is expended by the user, but no item is focused and the keydown is pressed\n            if (currentFocusedItemIndex === -1 && isKeydown(evt)) {\n                this.focusFirstItemIfPresent(items);\n            } else {\n                this.moveFocusedItemByDirection(items, currentFocusedItemIndex, isKeydown(evt) ? 'down' : 'up');\n            }\n        }\n        if (this.expanded && isEscapeKey(evt)) {\n            this.closeOverlayAndFocusButton();\n        }\n    }\n\n\n    private focusFirstItemIfPresent<T extends HTMLElement>(items: T[]) {\n        if (items[0]) {\n            items[0].focus();\n        }\n    }\n\n    private moveFocusedItemByDirection<T extends HTMLElement>(items: T[], currentFocusedItemIndex: number, direction: 'up' | 'down') {\n        const itemToFocus = items[(currentFocusedItemIndex) + (direction === 'down' ? 1 : -1)];\n        if (itemToFocus) {\n            itemToFocus.focus();\n        }\n    }\n\n    private closeOverlayAndFocusButton() {\n        this.expanded = !this.expanded;\n        const wcsButton = this.el.shadowRoot.querySelector('wcs-button') as HTMLWcsButtonElement;\n        wcsButton.focus();\n    }\n\n    componentDidRender() {\n        if (this.popper) {\n            this.popper.update();\n        }\n        if (!this.noArrow) {\n            (this.el.shadowRoot.querySelector('.arrow') as HTMLElement).style.fill = this.buttonTextColor;\n        }\n    }\n\n    render() {\n        return (\n            <Host>\n                <wcs-button mode={this.mode} shape={this.shape} disabled={this.disabled} size={this.size}\n                            onClick={($event) => this.onButtonClick($event)}>\n                    <div class=\"wcs-button-content-wrapper\">\n                        <slot name=\"placeholder\"/>\n                        {this.noArrow ? null : (<SelectArrow up={this.expanded}/>)}\n                    </div>\n                </wcs-button>\n                <div class={(this.expanded ? 'show ' : '') + 'popover'}>\n                    <div id=\"arrow\" data-popper-arrow/>\n                    <div class=\"container\">\n                        <slot name=\"item\">\n                            <span id={\"is-empty\"}></span>\n                        </slot>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n\n"],"version":3}

package/dist/cjs/wcs-editable-field.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ca67a6dc.js');
+const index = require('./index-749d999e.js');
 
 const WcsEditableFieldSizeValues = ['m', 'l']; // as const keyword is used to infer and preserve the exact literal values of an array or object.
 function isWcsEditableFieldSize(size) {
@@ -65,7 +65,7 @@ const EditableField = class {
     if (!element)
       throw new Error('You must provide a slotted input element to handle edition');
     this.spiedElement = element;
-    this.addChangeHandlerForWcsComponents(this.spiedElement);
+    this.addInputHandlerForWcsComponents(this.spiedElement);
     this.spiedElement.addEventListener('keydown', (event) => {
       if (event.key === 'Enter') {
         this.sendCurrentValue();
@@ -82,7 +82,7 @@ const EditableField = class {
     if (!element)
       throw new Error('You must provide a slotted textarea element to handle edition');
     this.spiedElement = element;
-    this.addChangeHandlerForWcsComponents(this.spiedElement);
+    this.addInputHandlerForWcsComponents(this.spiedElement);
     this.spiedElement.addEventListener('keydown', (event) => {
       if (event.key === 'Enter' && event.ctrlKey) {
         this.sendCurrentValue();
@@ -104,6 +104,7 @@ const EditableField = class {
   /**
    * This method subscribes the component to the change events produced by the other WCS components
    * (provided by the user in slot)
+   * @param elt the element to subscribe to
    * @private
    */
   addChangeHandlerForWcsComponents(elt) {
@@ -115,6 +116,20 @@ const EditableField = class {
       }
     });
   }
+  /**
+   * This method subscribes the component to the input events produced by the other WCS components
+   * @param elt the element to subscribe to
+   * @private
+   */
+  addInputHandlerForWcsComponents(elt) {
+    elt.addEventListener('wcsInput', (event) => {
+      event.stopImmediatePropagation();
+      this.currentValue = event.detail.target.value;
+      if (this.validateFn) {
+        this.isError = !this.validateFn(this.currentValue);
+      }
+    });
+  }
   sendCurrentValue() {
     if (this.currentState === EditableComponentState.EDIT) {
       if (this.value === this.currentValue) {

package/dist/cjs/wcs-editable-field.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-editable-field.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["./src/components/editable-field/editable-field-interface.tsx","./src/components/editable-field/editable-field.scss?tag=wcs-editable-field&encapsulation=shadow","./src/components/editable-field/editable-field.tsx"],"sourcesContent":["import { WcsSize } from '../../shared-types';\n\nexport type ValidateFn<T> = (value: T) => boolean;\nexport type FormatFn<T> = (value: T) => string;\n\nexport interface EditableComponentUpdateEvent {\n    newValue: any; // We use any for now, but when components typings will support template, change for parameterized type\n    /**\n     * Permet de sortir de l'état LOAD pour aller vers l'état DISPLAY\n     * À n'utiliser que lorsque la valeur n'est pas systématiquement mise à jour à chaque événement.\n     */\n    successHandler: () => void;\n    errorhandler: () => void;\n}\n\nexport const WcsEditableFieldSizeValues = ['m', 'l'] as const; // as const keyword is used to infer and preserve the exact literal values of an array or object.\n\nexport type WcsEditableFieldSize = Extract<WcsSize, typeof WcsEditableFieldSizeValues[number]>;\n\nexport function isWcsEditableFieldSize(size: string): size is WcsEditableFieldSize {\n    // @ts-ignore : ignore size type, as it is checked with WcsEditableFieldSizeValues\n    return WcsEditableFieldSizeValues.includes(size);\n}\n\nexport type EditableFieldType = 'input' | 'textarea' | 'select';\n",":host {\n    display: block;\n\n    .display-none {\n        display: none !important;\n    }\n\n    .label {\n        margin-bottom: var(--wcs-base-margin);\n        font-weight: 500;\n        font-size: var(--wcs-editable-field-font-size);\n        color: var(--wcs-gray-light);\n    }\n\n    .edit-container {\n        display: flex;\n        width: 100%;\n    }\n\n    .display-container {\n        box-sizing: border-box;\n        wcs-mat-icon {\n            display: none;\n        }\n        height: var(--wcs-editable-field-host-height);\n        white-space: break-spaces;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        background-color: var(--wcs-light);\n        border-radius: var(--wcs-border-radius);\n        font-size: var(--wcs-editable-field-font-size);\n        line-height: 1.5;\n        font-weight: 500;\n        color: var(--wcs-gray);\n        padding: var(--wcs-editable-field-host-padding);\n        transition: 0.175s all;\n        border: solid 2px transparent;\n    }\n\n    .load-container {\n        box-sizing: border-box;\n        height: var(--wcs-editable-field-host-height);\n        white-space: pre;\n        display: flex;\n        justify-content: space-between;\n        background-color: var(--wcs-light);\n        border-radius: var(--wcs-border-radius);\n        font-size: var(--wcs-editable-field-font-size);\n        line-height: 1.5;\n        font-weight: 500;\n        color: var(--wcs-gray);\n        padding: var(--wcs-editable-field-host-padding);\n        transition: 0.175s all;\n        border: solid 2px transparent;\n        align-items: center;\n    }\n\n    wcs-spinner {\n        height: 24px;\n        width: 24px;\n    }\n\n    .readonly-icon {\n        fill: var(--wcs-text-medium);\n    }\n}\n\n:host([readonly]) {\n    .display-container {\n        color: var(--wcs-gray-light);\n    }\n}\n\n:host(:not([readonly])) {\n    .display-container:hover {\n        wcs-mat-icon {\n            display: flex;\n            align-items: center;\n        }\n        color: var(--wcs-primary);\n        cursor: pointer;\n        border: dashed 2px var(--wcs-primary);\n    }\n}\n\n:host([size=l]) {\n    --wcs-editable-field-host-padding: var(--wcs-padding-l) calc(var(--wcs-padding) - var(--wcs-border-size));\n    --wcs-editable-field-host-height: var(--wcs-size-l);\n    --wcs-editable-field-font-size: 1.0625rem;\n}\n\n:host([size=m]) { // Default\n    --wcs-editable-field-host-padding: var(--wcs-padding-m) calc(var(--wcs-padding) - var(--wcs-border-size));\n    --wcs-editable-field-host-height: var(--wcs-size-m);\n    --wcs-editable-field-font-size: 1rem;\n}\n","import {\n    Component,\n    ComponentInterface,\n    EventEmitter,\n    h,\n    Prop,\n    Event,\n    State,\n    Host,\n    Element,\n    Watch, Listen\n} from '@stencil/core';\nimport {\n    EditableComponentUpdateEvent,\n    EditableFieldType,\n    FormatFn,\n    isWcsEditableFieldSize,\n    ValidateFn,\n    WcsEditableFieldSize,\n    WcsEditableFieldSizeValues\n} from './editable-field-interface';\n\nenum EditableComponentState {\n    DISPLAY,\n    EDIT,\n    LOAD\n}\n\n@Component({\n    tag: 'wcs-editable-field',\n    styleUrl: 'editable-field.scss',\n    shadow: true\n})\nexport class EditableField implements ComponentInterface {\n    @Element() private el!: HTMLWcsEditableFieldElement;\n\n    @State() private currentState: EditableComponentState = EditableComponentState.DISPLAY;\n    /**\n     * Specifies which component is used for editing\n     */\n    @Prop() type: EditableFieldType = 'input';\n    /**\n     * Label of the field\n     */\n    @Prop() label!: string;\n    /**\n     * event called at each (valid) update of the field.\n     */\n    @Event() wcsChange!: EventEmitter<EditableComponentUpdateEvent>;\n    /**\n     * Specify whether the field is editable or not\n     */\n    @Prop() readonly: boolean = false;\n    /**\n     * Initial value of the field\n     */\n    @Prop({mutable: true}) value: any;\n    /**\n     * Function to customize the validation of the data during the update\n     */\n    @Prop() validateFn: ValidateFn<any>;\n    /**\n     * Function used to format the value\n     */\n    @Prop() formatFn: FormatFn<any>;\n\n    /**\n     * Error message displayed under the field if validation failed.\n     */\n    @Prop() errorMsg: string = null;\n\n    /**\n     * Specify the size (height) of the editable field.\n     */\n    @Prop({reflect: true}) size: WcsEditableFieldSize = 'm';\n\n    @State() private isError: boolean = false;\n\n    // fixme: why this attr is never read?\n    // ignoreNextChangeEvent: boolean = false;\n    private spiedElement: HTMLElement = null;\n    private currentValue: any = null;\n\n    componentWillLoad(): Promise<void> | void {\n        if(!isWcsEditableFieldSize(this.size)) {\n            console.error(`Invalid size value for wcs-editable-field : \"${this.size}\". Must be one of \"${WcsEditableFieldSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n        this.currentValue = this.value;\n    }\n\n    componentDidRender() {\n        const assignedElements = (this.el.shadowRoot.querySelector('slot') as HTMLSlotElement).assignedElements();\n        switch (this.type) {\n            case 'input':\n                this.initWithInput(assignedElements);\n                break;\n            case 'textarea':\n                this.initWithTextArea(assignedElements);\n                break;\n            case 'select':\n                this.initWithSelect(assignedElements)\n                break;\n        }\n    }\n\n    private initWithInput(assignedElements: Element[]) {\n        const element = assignedElements.filter(x => {\n            return x.tagName === 'WCS-INPUT'\n        })[0];\n        if (!element) throw new Error('You must provide a slotted input element to handle edition');\n        this.spiedElement = element as HTMLElement;\n        this.addChangeHandlerForWcsComponents(this.spiedElement);\n        this.spiedElement.addEventListener('keydown', (event: KeyboardEvent) => {\n            if (event.key === 'Enter') {\n                this.sendCurrentValue();\n            }\n            if (event.key === 'Escape') {\n                this.discardChanges();\n            }\n        })\n    }\n\n    private initWithTextArea(assignedElements: Element[]) {\n        const element = assignedElements.filter(x => {\n            return x.tagName === 'WCS-TEXTAREA'\n        })[0];\n        if (!element) throw new Error('You must provide a slotted textarea element to handle edition');\n        this.spiedElement = element as HTMLElement;\n        this.addChangeHandlerForWcsComponents(this.spiedElement);\n        this.spiedElement.addEventListener('keydown', (event: KeyboardEvent) => {\n            if (event.key === 'Enter' && event.ctrlKey) {\n                this.sendCurrentValue();\n            }\n            if (event.key === 'Escape') {\n                this.discardChanges();\n            }\n        })\n    }\n\n    private initWithSelect(assignedElements: Element[]) {\n        const element = assignedElements.filter(x => {\n            return x.tagName === 'WCS-SELECT'\n        })[0];\n        if (!element) throw new Error('You must provide a slotted select element to handle edition');\n        this.spiedElement = element as HTMLElement;\n        this.addChangeHandlerForWcsComponents(this.spiedElement);\n    }\n\n    /**\n     * This method subscribes the component to the change events produced by the other WCS components\n     * (provided by the user in slot)\n     * @private\n     */\n    private addChangeHandlerForWcsComponents(elt: HTMLElement) {\n        elt.addEventListener('wcsChange', (event: CustomEvent) => {\n            event.stopImmediatePropagation();\n            this.currentValue = event.detail.value;\n            if (this.validateFn) {\n                this.isError = !this.validateFn(this.currentValue);\n            }\n        });\n    }\n\n\n    private sendCurrentValue() {\n        if (this.currentState === EditableComponentState.EDIT) {\n            if (this.value === this.currentValue) {\n                this.currentState = EditableComponentState.DISPLAY\n            } else {\n                this.isError = this.validateFn ? !this.validateFn(this.currentValue) : false;\n                if (!this.isError) {\n                    this.currentState = EditableComponentState.LOAD;\n                    this.wcsChange.emit({\n                        newValue: this.currentValue,\n                        successHandler: () => this.forceDisplayStateAndValidate(),\n                        errorhandler: () => this.errorHandler()\n                    });\n                }\n            }\n        }\n    }\n\n    private discardChanges() {\n        this.currentValue = this.value;\n        this.currentState = EditableComponentState.DISPLAY;\n        this.isError = false;\n    }\n\n\n    forceDisplayStateAndValidate() {\n        if (this.currentState === EditableComponentState.LOAD) {\n            this.value = this.currentValue;\n            this.currentState = EditableComponentState.DISPLAY;\n        } else {\n            throw new Error('You cannot set display state from ' + EditableComponentState[this.currentState] + ' state');\n        }\n    }\n\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(event: MouseEvent) {\n        if (!this.clickInsideComponent(event)) {\n            if (this.currentState === EditableComponentState.EDIT) {\n                if (this.isError) {\n                    this.discardChanges();\n                } else {\n                    this.sendCurrentValue();\n                }\n            }\n        }\n    }\n\n    private clickInsideComponent(event: MouseEvent) {\n        return event.x >= this.el.getBoundingClientRect().x && event.x <= this.el.getBoundingClientRect().x + this.el.getBoundingClientRect().width\n            && event.y >= this.el.getBoundingClientRect().y && event.y <= this.el.getBoundingClientRect().y + this.el.getBoundingClientRect().height;\n    }\n\n    /**\n     * discard changes and force component state to DISPLAY\n     * <br/>\n     * This method must be call when component is in LOAD state\n     */\n\n    errorHandler() {\n        this.discardChanges();\n    }\n\n    @Watch('value')\n    onValueChange(): void {\n        this.currentState = EditableComponentState.DISPLAY;\n    }\n\n    private onDisplayContainerClick() {\n        if (this.currentState === EditableComponentState.DISPLAY && this.readonly === false) {\n            this.currentState = EditableComponentState.EDIT;\n            // fixme: why this attr is never read?\n            // this.ignoreNextChangeEvent = true;\n            this.spiedElement['value'] = this.currentValue;\n            if (this.validateFn) {\n                this.isError = !this.validateFn(this.currentValue);\n            }\n            // We wait until the element is displayed on the page otherwise the focus does not work\n            const DELAY_FOR_RENDER = 20;\n            setTimeout(() => {\n                if (this.type === 'input') {\n                    (this.spiedElement as HTMLWcsInputElement).setFocus();\n                } else if (this.type === 'textarea') {\n                    (this.spiedElement as HTMLWcsTextareaElement).fitContent();\n                    (this.spiedElement as HTMLWcsTextareaElement).setFocus();\n                }\n            }, DELAY_FOR_RENDER)\n        }\n    }\n\n    render(): any {\n        const {formattedValue, formattedCurrentValue} = this.formatValues();\n        return (\n            <Host>\n                <div class=\"label\">{this.label}</div>\n                <div\n                    class={'display-container ' + (this.currentState !== EditableComponentState.DISPLAY ? 'display-none' : '')}\n                    onClick={() => this.onDisplayContainerClick()}>\n                    {formattedValue}\n                    <wcs-mat-icon icon=\"edit\" size=\"s\"></wcs-mat-icon>\n                    {this.readonly ? this.getReadonlySvgIcon() : null}\n                </div>\n                <div\n                    class={'load-container ' + (this.currentState !== EditableComponentState.LOAD ? 'display-none' : '')}>\n                    {formattedCurrentValue}\n                    <wcs-spinner></wcs-spinner>\n                </div>\n                <wcs-form-field is-error={this.isError}\n                                class={'edit-container ' + (this.currentState !== EditableComponentState.EDIT ? 'display-none' : '')}>\n                    <slot/>\n                    {\n                        this.isError && this.errorMsg\n                            ? <wcs-error>{this.errorMsg}</wcs-error>\n                            : null\n                    }\n                </wcs-form-field>\n            </Host>\n        );\n    }\n\n    private getReadonlySvgIcon() {\n        return <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"24\" viewBox=\"0 0 27 25\"\n                    class=\"readonly-icon\">\n            <path d=\"M26.79,25.05H1.21a.73.73,0,0,0,0,1.45H26.79a.73.73,0,0,0,0-1.45Z\"\n                  transform=\"translate(-0.5 -1.5)\"/>\n            <path\n                d=\"M19.8,8.87h-.61V6.73a5.23,5.23,0,0,0-10.46,0V8.87H8.2a1.63,1.63,0,0,0-1.63,1.62V21.32A1.62,1.62,0,0,0,8.2,22.94H19.8a1.62,1.62,0,0,0,1.63-1.62V10.49A1.63,1.63,0,0,0,19.8,8.87ZM10.93,6.73a3,3,0,1,1,6.06,0V8.87H10.93Zm3,14.15a5,5,0,1,1,5-5A5,5,0,0,1,14,20.88Z\"\n                transform=\"translate(-0.5 -1.5)\"/>\n            <path\n                d=\"M14,12.62a3.29,3.29,0,1,0,3.29,3.29A3.29,3.29,0,0,0,14,12.62Zm0,4.75a1.47,1.47,0,1,1,1.47-1.46A1.46,1.46,0,0,1,14,17.37Z\"\n                transform=\"translate(-0.5 -1.5)\"/>\n        </svg>;\n    }\n\n    private formatValues() {\n        let formattedValue = this.value;\n        let formattedCurrentValue = this.currentValue;\n        if (this.formatFn) {\n            formattedValue = this.formatFn(this.value);\n            formattedCurrentValue = this.formatFn(this.currentValue);\n        }\n        if (Array.isArray(this.value)) {\n            formattedValue = this.value.join(', ');\n        }\n        if (Array.isArray(this.currentValue)) {\n            formattedCurrentValue = this.currentValue.join(', ');\n        }\n        return {\n            formattedValue: (formattedValue ? (<span>{formattedValue}</span>) : (<span></span>)),\n            formattedCurrentValue: (formattedCurrentValue ? (<span>{formattedCurrentValue}</span>) : (<span></span>))\n        };\n    }\n}\n"],"version":3}
+{"file":"wcs-editable-field.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["./src/components/editable-field/editable-field-interface.tsx","./src/components/editable-field/editable-field.scss?tag=wcs-editable-field&encapsulation=shadow","./src/components/editable-field/editable-field.tsx"],"sourcesContent":["import { WcsSize } from '../../shared-types';\n\nexport type ValidateFn<T> = (value: T) => boolean;\nexport type FormatFn<T> = (value: T) => string;\n\nexport interface EditableComponentUpdateEvent {\n    newValue: any; // We use any for now, but when components typings will support template, change for parameterized type\n    /**\n     * Permet de sortir de l'état LOAD pour aller vers l'état DISPLAY\n     * À n'utiliser que lorsque la valeur n'est pas systématiquement mise à jour à chaque événement.\n     */\n    successHandler: () => void;\n    errorhandler: () => void;\n}\n\nexport const WcsEditableFieldSizeValues = ['m', 'l'] as const; // as const keyword is used to infer and preserve the exact literal values of an array or object.\n\nexport type WcsEditableFieldSize = Extract<WcsSize, typeof WcsEditableFieldSizeValues[number]>;\n\nexport function isWcsEditableFieldSize(size: string): size is WcsEditableFieldSize {\n    // @ts-ignore : ignore size type, as it is checked with WcsEditableFieldSizeValues\n    return WcsEditableFieldSizeValues.includes(size);\n}\n\nexport type EditableFieldType = 'input' | 'textarea' | 'select';\n",":host {\n    display: block;\n\n    .display-none {\n        display: none !important;\n    }\n\n    .label {\n        margin-bottom: var(--wcs-base-margin);\n        font-weight: 500;\n        font-size: var(--wcs-editable-field-font-size);\n        color: var(--wcs-gray-light);\n    }\n\n    .edit-container {\n        display: flex;\n        width: 100%;\n    }\n\n    .display-container {\n        box-sizing: border-box;\n        wcs-mat-icon {\n            display: none;\n        }\n        height: var(--wcs-editable-field-host-height);\n        white-space: break-spaces;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        background-color: var(--wcs-light);\n        border-radius: var(--wcs-border-radius);\n        font-size: var(--wcs-editable-field-font-size);\n        line-height: 1.5;\n        font-weight: 500;\n        color: var(--wcs-gray);\n        padding: var(--wcs-editable-field-host-padding);\n        transition: 0.175s all;\n        border: solid 2px transparent;\n    }\n\n    .load-container {\n        box-sizing: border-box;\n        height: var(--wcs-editable-field-host-height);\n        white-space: pre;\n        display: flex;\n        justify-content: space-between;\n        background-color: var(--wcs-light);\n        border-radius: var(--wcs-border-radius);\n        font-size: var(--wcs-editable-field-font-size);\n        line-height: 1.5;\n        font-weight: 500;\n        color: var(--wcs-gray);\n        padding: var(--wcs-editable-field-host-padding);\n        transition: 0.175s all;\n        border: solid 2px transparent;\n        align-items: center;\n    }\n\n    wcs-spinner {\n        height: 24px;\n        width: 24px;\n    }\n\n    .readonly-icon {\n        fill: var(--wcs-text-medium);\n    }\n}\n\n:host([readonly]) {\n    .display-container {\n        color: var(--wcs-gray-light);\n    }\n}\n\n:host(:not([readonly])) {\n    .display-container:hover {\n        wcs-mat-icon {\n            display: flex;\n            align-items: center;\n        }\n        color: var(--wcs-primary);\n        cursor: pointer;\n        border: dashed 2px var(--wcs-primary);\n    }\n}\n\n:host([size=l]) {\n    --wcs-editable-field-host-padding: var(--wcs-padding-l) calc(var(--wcs-padding) - var(--wcs-border-size));\n    --wcs-editable-field-host-height: var(--wcs-size-l);\n    --wcs-editable-field-font-size: 1.0625rem;\n}\n\n:host([size=m]) { // Default\n    --wcs-editable-field-host-padding: var(--wcs-padding-m) calc(var(--wcs-padding) - var(--wcs-border-size));\n    --wcs-editable-field-host-height: var(--wcs-size-m);\n    --wcs-editable-field-font-size: 1rem;\n}\n","import {\n    Component,\n    ComponentInterface,\n    EventEmitter,\n    h,\n    Prop,\n    Event,\n    State,\n    Host,\n    Element,\n    Watch, Listen\n} from '@stencil/core';\nimport {\n    EditableComponentUpdateEvent,\n    EditableFieldType,\n    FormatFn,\n    isWcsEditableFieldSize,\n    ValidateFn,\n    WcsEditableFieldSize,\n    WcsEditableFieldSizeValues\n} from './editable-field-interface';\n\nenum EditableComponentState {\n    DISPLAY,\n    EDIT,\n    LOAD\n}\n\n@Component({\n    tag: 'wcs-editable-field',\n    styleUrl: 'editable-field.scss',\n    shadow: true\n})\nexport class EditableField implements ComponentInterface {\n    @Element() private el!: HTMLWcsEditableFieldElement;\n\n    @State() private currentState: EditableComponentState = EditableComponentState.DISPLAY;\n    /**\n     * Specifies which component is used for editing\n     */\n    @Prop() type: EditableFieldType = 'input';\n    /**\n     * Label of the field\n     */\n    @Prop() label!: string;\n    /**\n     * event called at each (valid) update of the field.\n     */\n    @Event() wcsChange!: EventEmitter<EditableComponentUpdateEvent>;\n    /**\n     * Specify whether the field is editable or not\n     */\n    @Prop() readonly: boolean = false;\n    /**\n     * Initial value of the field\n     */\n    @Prop({mutable: true}) value: any;\n    /**\n     * Function to customize the validation of the data during the update\n     */\n    @Prop() validateFn: ValidateFn<any>;\n    /**\n     * Function used to format the value\n     */\n    @Prop() formatFn: FormatFn<any>;\n\n    /**\n     * Error message displayed under the field if validation failed.\n     */\n    @Prop() errorMsg: string = null;\n\n    /**\n     * Specify the size (height) of the editable field.\n     */\n    @Prop({reflect: true}) size: WcsEditableFieldSize = 'm';\n\n    @State() private isError: boolean = false;\n\n    // fixme: why this attr is never read?\n    // ignoreNextChangeEvent: boolean = false;\n    private spiedElement: HTMLElement = null;\n    private currentValue: any = null;\n\n    componentWillLoad(): Promise<void> | void {\n        if(!isWcsEditableFieldSize(this.size)) {\n            console.error(`Invalid size value for wcs-editable-field : \"${this.size}\". Must be one of \"${WcsEditableFieldSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n        this.currentValue = this.value;\n    }\n\n    componentDidRender() {\n        const assignedElements = (this.el.shadowRoot.querySelector('slot') as HTMLSlotElement).assignedElements();\n        switch (this.type) {\n            case 'input':\n                this.initWithInput(assignedElements);\n                break;\n            case 'textarea':\n                this.initWithTextArea(assignedElements);\n                break;\n            case 'select':\n                this.initWithSelect(assignedElements)\n                break;\n        }\n    }\n\n    private initWithInput(assignedElements: Element[]) {\n        const element = assignedElements.filter(x => {\n            return x.tagName === 'WCS-INPUT'\n        })[0];\n        if (!element) throw new Error('You must provide a slotted input element to handle edition');\n        this.spiedElement = element as HTMLElement;\n        this.addInputHandlerForWcsComponents(this.spiedElement);\n        this.spiedElement.addEventListener('keydown', (event: KeyboardEvent) => {\n            if (event.key === 'Enter') {\n                this.sendCurrentValue();\n            }\n            if (event.key === 'Escape') {\n                this.discardChanges();\n            }\n        })\n    }\n\n    private initWithTextArea(assignedElements: Element[]) {\n        const element = assignedElements.filter(x => {\n            return x.tagName === 'WCS-TEXTAREA'\n        })[0];\n        if (!element) throw new Error('You must provide a slotted textarea element to handle edition');\n        this.spiedElement = element as HTMLElement;\n        this.addInputHandlerForWcsComponents(this.spiedElement);\n        this.spiedElement.addEventListener('keydown', (event: KeyboardEvent) => {\n            if (event.key === 'Enter' && event.ctrlKey) {\n                this.sendCurrentValue();\n            }\n            if (event.key === 'Escape') {\n                this.discardChanges();\n            }\n        })\n    }\n\n    private initWithSelect(assignedElements: Element[]) {\n        const element = assignedElements.filter(x => {\n            return x.tagName === 'WCS-SELECT'\n        })[0];\n        if (!element) throw new Error('You must provide a slotted select element to handle edition');\n        this.spiedElement = element as HTMLElement;\n        this.addChangeHandlerForWcsComponents(this.spiedElement);\n    }\n\n    /**\n     * This method subscribes the component to the change events produced by the other WCS components\n     * (provided by the user in slot)\n     * @param elt the element to subscribe to\n     * @private\n     */\n    private addChangeHandlerForWcsComponents(elt: HTMLElement) {\n        elt.addEventListener('wcsChange', (event: CustomEvent) => {\n            event.stopImmediatePropagation();\n            this.currentValue = event.detail.value;\n            if (this.validateFn) {\n                this.isError = !this.validateFn(this.currentValue);\n            }\n        });\n    }\n\n    /**\n     * This method subscribes the component to the input events produced by the other WCS components\n     * @param elt the element to subscribe to\n     * @private\n     */\n    private addInputHandlerForWcsComponents(elt: HTMLElement) {\n        elt.addEventListener('wcsInput', (event: CustomEvent) => {\n            event.stopImmediatePropagation();\n            this.currentValue = event.detail.target.value;\n            if (this.validateFn) {\n                this.isError = !this.validateFn(this.currentValue);\n            }\n        });\n    }\n\n    private sendCurrentValue() {\n        if (this.currentState === EditableComponentState.EDIT) {\n            if (this.value === this.currentValue) {\n                this.currentState = EditableComponentState.DISPLAY\n            } else {\n                this.isError = this.validateFn ? !this.validateFn(this.currentValue) : false;\n                if (!this.isError) {\n                    this.currentState = EditableComponentState.LOAD;\n                    this.wcsChange.emit({\n                        newValue: this.currentValue,\n                        successHandler: () => this.forceDisplayStateAndValidate(),\n                        errorhandler: () => this.errorHandler()\n                    });\n                }\n            }\n        }\n    }\n\n    private discardChanges() {\n        this.currentValue = this.value;\n        this.currentState = EditableComponentState.DISPLAY;\n        this.isError = false;\n    }\n\n\n    forceDisplayStateAndValidate() {\n        if (this.currentState === EditableComponentState.LOAD) {\n            this.value = this.currentValue;\n            this.currentState = EditableComponentState.DISPLAY;\n        } else {\n            throw new Error('You cannot set display state from ' + EditableComponentState[this.currentState] + ' state');\n        }\n    }\n\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(event: MouseEvent) {\n        if (!this.clickInsideComponent(event)) {\n            if (this.currentState === EditableComponentState.EDIT) {\n                if (this.isError) {\n                    this.discardChanges();\n                } else {\n                    this.sendCurrentValue();\n                }\n            }\n        }\n    }\n\n    private clickInsideComponent(event: MouseEvent) {\n        return event.x >= this.el.getBoundingClientRect().x && event.x <= this.el.getBoundingClientRect().x + this.el.getBoundingClientRect().width\n            && event.y >= this.el.getBoundingClientRect().y && event.y <= this.el.getBoundingClientRect().y + this.el.getBoundingClientRect().height;\n    }\n\n    /**\n     * discard changes and force component state to DISPLAY\n     * <br/>\n     * This method must be call when component is in LOAD state\n     */\n\n    errorHandler() {\n        this.discardChanges();\n    }\n\n    @Watch('value')\n    onValueChange(): void {\n        this.currentState = EditableComponentState.DISPLAY;\n    }\n\n    private onDisplayContainerClick() {\n        if (this.currentState === EditableComponentState.DISPLAY && this.readonly === false) {\n            this.currentState = EditableComponentState.EDIT;\n            // fixme: why this attr is never read?\n            // this.ignoreNextChangeEvent = true;\n            this.spiedElement['value'] = this.currentValue;\n            if (this.validateFn) {\n                this.isError = !this.validateFn(this.currentValue);\n            }\n            // We wait until the element is displayed on the page otherwise the focus does not work\n            const DELAY_FOR_RENDER = 20;\n            setTimeout(() => {\n                if (this.type === 'input') {\n                    (this.spiedElement as HTMLWcsInputElement).setFocus();\n                } else if (this.type === 'textarea') {\n                    (this.spiedElement as HTMLWcsTextareaElement).fitContent();\n                    (this.spiedElement as HTMLWcsTextareaElement).setFocus();\n                }\n            }, DELAY_FOR_RENDER)\n        }\n    }\n\n    render(): any {\n        const {formattedValue, formattedCurrentValue} = this.formatValues();\n        return (\n            <Host>\n                <div class=\"label\">{this.label}</div>\n                <div\n                    class={'display-container ' + (this.currentState !== EditableComponentState.DISPLAY ? 'display-none' : '')}\n                    onClick={() => this.onDisplayContainerClick()}>\n                    {formattedValue}\n                    <wcs-mat-icon icon=\"edit\" size=\"s\"></wcs-mat-icon>\n                    {this.readonly ? this.getReadonlySvgIcon() : null}\n                </div>\n                <div\n                    class={'load-container ' + (this.currentState !== EditableComponentState.LOAD ? 'display-none' : '')}>\n                    {formattedCurrentValue}\n                    <wcs-spinner></wcs-spinner>\n                </div>\n                <wcs-form-field is-error={this.isError}\n                                class={'edit-container ' + (this.currentState !== EditableComponentState.EDIT ? 'display-none' : '')}>\n                    <slot/>\n                    {\n                        this.isError && this.errorMsg\n                            ? <wcs-error>{this.errorMsg}</wcs-error>\n                            : null\n                    }\n                </wcs-form-field>\n            </Host>\n        );\n    }\n\n    private getReadonlySvgIcon() {\n        return <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"24\" viewBox=\"0 0 27 25\"\n                    class=\"readonly-icon\">\n            <path d=\"M26.79,25.05H1.21a.73.73,0,0,0,0,1.45H26.79a.73.73,0,0,0,0-1.45Z\"\n                  transform=\"translate(-0.5 -1.5)\"/>\n            <path\n                d=\"M19.8,8.87h-.61V6.73a5.23,5.23,0,0,0-10.46,0V8.87H8.2a1.63,1.63,0,0,0-1.63,1.62V21.32A1.62,1.62,0,0,0,8.2,22.94H19.8a1.62,1.62,0,0,0,1.63-1.62V10.49A1.63,1.63,0,0,0,19.8,8.87ZM10.93,6.73a3,3,0,1,1,6.06,0V8.87H10.93Zm3,14.15a5,5,0,1,1,5-5A5,5,0,0,1,14,20.88Z\"\n                transform=\"translate(-0.5 -1.5)\"/>\n            <path\n                d=\"M14,12.62a3.29,3.29,0,1,0,3.29,3.29A3.29,3.29,0,0,0,14,12.62Zm0,4.75a1.47,1.47,0,1,1,1.47-1.46A1.46,1.46,0,0,1,14,17.37Z\"\n                transform=\"translate(-0.5 -1.5)\"/>\n        </svg>;\n    }\n\n    private formatValues() {\n        let formattedValue = this.value;\n        let formattedCurrentValue = this.currentValue;\n        if (this.formatFn) {\n            formattedValue = this.formatFn(this.value);\n            formattedCurrentValue = this.formatFn(this.currentValue);\n        }\n        if (Array.isArray(this.value)) {\n            formattedValue = this.value.join(', ');\n        }\n        if (Array.isArray(this.currentValue)) {\n            formattedCurrentValue = this.currentValue.join(', ');\n        }\n        return {\n            formattedValue: (formattedValue ? (<span>{formattedValue}</span>) : (<span></span>)),\n            formattedCurrentValue: (formattedCurrentValue ? (<span>{formattedCurrentValue}</span>) : (<span></span>))\n        };\n    }\n}\n"],"version":3}

package/dist/cjs/wcs-error_2.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ca67a6dc.js');
+const index = require('./index-749d999e.js');
 
 const errorCss = ":host{margin-top:0.25rem;color:var(--wcs-red)}";
 
@@ -11,11 +11,15 @@ const Label = class {
     index.registerInstance(this, hostRef);
   }
   render() {
-    return (index.h(index.Host, { slot: "error" }, index.h("slot", null)));
+    return (index.h(index.Host, { "aria-live": "polite", "aria-atomic": "true", slot: "error" }, index.h("slot", null)));
   }
 };
 Label.style = errorCss;
 
+function isMutableAriaAttribute(el) {
+  return 'setAriaAttribute' in el;
+}
+
 const formFieldCss = ":host{--wcs-form-field-border-radius-left:var(--wcs-border-radius);--wcs-form-field-border-radius-right:var(--wcs-border-radius);display:flex;flex-direction:column}.input-container{display:flex}::slotted(wcs-radio-group){margin-left:var(--wcs-base-margin)}::slotted(wcs-radio-group[mode=option]){margin-left:0}::slotted(wcs-select:not([slot=prefix])){width:100%}::slotted(label){font-weight:500;margin-bottom:8px}:host(.has-prefix){--wcs-input-border-radius-left:0}:host(.has-suffix){--wcs-input-border-radius-right:0}::slotted([slot=prefix]){--wcs-select-border-radius:var(--wcs-border-radius) 0 0 var(--wcs-border-radius);--wcs-select-background-color:var(--wcs-gray-light);--wcs-select-value-color:var(--wcs-white);--wcs-select-placeholder-color:var(--wcs-white);--wcs-select-border-color:var(--wcs-gray-light)}::slotted([slot=suffix]){--wcs-button-border-radius:0 var(--wcs-border-radius) var(--wcs-border-radius) 0;--wcs-select-border-radius:0 var(--wcs-border-radius) var(--wcs-border-radius) 0}";
 
 const FormField = class {
@@ -37,6 +41,7 @@ const FormField = class {
   }
   isErrorChange(newValue) {
     this.updateErrorStateOnInput(newValue);
+    this.updateAriaAttributes();
   }
   updateErrorStateOnInput(newValue) {
     if (this.spiedElementIsOfType('wcs-input', 'wcs-textarea')) {
@@ -94,6 +99,34 @@ const FormField = class {
       return;
     }
   }
+  updateAriaAttributes() {
+    if (isMutableAriaAttribute(this.spiedElement)) {
+      this.spiedElement.setAriaAttribute('aria-label', this.label);
+      // 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');
+      }
+      else {
+        if (this.description)
+          this.spiedElement.setAriaAttribute('aria-description', this.description);
+        this.spiedElement.setAriaAttribute('aria-invalid', 'false');
+      }
+    }
+  }
+  get label() {
+    var _a;
+    return (_a = this.el.querySelector('wcs-label')) === null || _a === void 0 ? void 0 : _a.textContent;
+  }
+  get description() {
+    var _a;
+    return (_a = this.el.querySelector('wcs-hint')) === null || _a === void 0 ? void 0 : _a.textContent;
+  }
+  get error() {
+    var _a;
+    return (_a = this.el.querySelector('wcs-error')) === null || _a === void 0 ? void 0 : _a.textContent;
+  }
   updateLabelRequiredFlag(isRequired, label) {
     if (isRequired && label) {
       label.setAttribute('required', 'true');
@@ -119,6 +152,7 @@ const FormField = class {
   }
   onFormInputSlotChange() {
     this.initSpiedElement();
+    this.updateAriaAttributes();
     this.addRequiredMarkerToLabel();
     this.updateErrorStateOnInput(this.isError);
   }

package/dist/cjs/wcs-error_2.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-error.wcs-form-field.entry.cjs.js","mappings":"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","names":["h","Host"],"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"],"sourcesContent":[":host {\n    margin-top: 0.25rem;\n    color: var(--wcs-red);\n}","import { Component, ComponentInterface, h, Host } from '@stencil/core';\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 slot=\"error\">\n                <slot />\n            </Host>\n        );\n    }\n}\n",":host {\n    --wcs-form-field-border-radius-left: var(--wcs-border-radius);\n    --wcs-form-field-border-radius-right: var(--wcs-border-radius);\n\n    display: flex;\n    flex-direction: column;\n}\n\n.input-container {\n    display: flex;\n}\n\n::slotted(wcs-radio-group) {\n    margin-left: var(--wcs-base-margin);\n}\n\n::slotted(wcs-radio-group[mode=option]) {\n    margin-left: 0;\n}\n\n::slotted(wcs-select:not([slot=prefix])) {\n    width: 100%;\n}\n\n// Label style\n::slotted(label) {\n    font-weight: 500;\n    margin-bottom: 8px;\n}\n\n// Make input square on left side if there is a prefix\n:host(.has-prefix) {\n    --wcs-input-border-radius-left: 0;\n}\n\n// Make input square on right side if there is a suffix\n:host(.has-suffix) {\n    --wcs-input-border-radius-right: 0;\n}\n\n// Prefixed select\n::slotted([slot=prefix]) {\n    --wcs-select-border-radius: var(--wcs-border-radius) 0 0 var(--wcs-border-radius);\n    --wcs-select-background-color: var(--wcs-gray-light);\n    --wcs-select-value-color: var(--wcs-white);\n    --wcs-select-placeholder-color: var(--wcs-white);\n    --wcs-select-border-color: var(--wcs-gray-light);\n}\n\n::slotted([slot=suffix]) {\n    // Make button square on left side\n    --wcs-button-border-radius: 0 var(--wcs-border-radius) var(--wcs-border-radius) 0;\n\n    // Make select square on left side\n    --wcs-select-border-radius: 0 var(--wcs-border-radius) var(--wcs-border-radius) 0 ;\n}\n","import { Component, ComponentInterface, Element, h, Host, Prop, State, Watch } from '@stencil/core';\n\n/**\n * TODO:\n * - [ ] Suffix button style\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\n    @Watch('isError')\n    // @ts-ignore\n    private isErrorChange(newValue: boolean) {\n        this.updateErrorStateOnInput(newValue);\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-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 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.addRequiredMarkerToLabel();\n        this.updateErrorStateOnInput(this.isError);\n    }\n}\n"],"version":3}
+{"file":"wcs-error.wcs-form-field.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["./src/components/error/error.scss?tag=wcs-error&encapsulation=shadow","./src/components/error/error.tsx","./src/utils/mutable-aria-attribute.ts","./src/components/form-field/form-field.scss?tag=wcs-form-field&encapsulation=shadow","./src/components/form-field/form-field.tsx"],"sourcesContent":[":host {\n    margin-top: 0.25rem;\n    color: var(--wcs-red);\n}","import { Component, ComponentInterface, h, Host } from '@stencil/core';\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","export type AriaAttributeName = `aria-${string}` | 'role';\n\nexport interface MutableAriaAttribute {\n    setAriaAttribute(attr: AriaAttributeName, value: string): void;\n}\n\nexport function isMutableAriaAttribute(el: any): el is MutableAriaAttribute {\n    return 'setAriaAttribute' in el;\n}\n",":host {\n    --wcs-form-field-border-radius-left: var(--wcs-border-radius);\n    --wcs-form-field-border-radius-right: var(--wcs-border-radius);\n\n    display: flex;\n    flex-direction: column;\n}\n\n.input-container {\n    display: flex;\n}\n\n::slotted(wcs-radio-group) {\n    margin-left: var(--wcs-base-margin);\n}\n\n::slotted(wcs-radio-group[mode=option]) {\n    margin-left: 0;\n}\n\n::slotted(wcs-select:not([slot=prefix])) {\n    width: 100%;\n}\n\n// Label style\n::slotted(label) {\n    font-weight: 500;\n    margin-bottom: 8px;\n}\n\n// Make input square on left side if there is a prefix\n:host(.has-prefix) {\n    --wcs-input-border-radius-left: 0;\n}\n\n// Make input square on right side if there is a suffix\n:host(.has-suffix) {\n    --wcs-input-border-radius-right: 0;\n}\n\n// Prefixed select\n::slotted([slot=prefix]) {\n    --wcs-select-border-radius: var(--wcs-border-radius) 0 0 var(--wcs-border-radius);\n    --wcs-select-background-color: var(--wcs-gray-light);\n    --wcs-select-value-color: var(--wcs-white);\n    --wcs-select-placeholder-color: var(--wcs-white);\n    --wcs-select-border-color: var(--wcs-gray-light);\n}\n\n::slotted([slot=suffix]) {\n    // Make button square on left side\n    --wcs-button-border-radius: 0 var(--wcs-border-radius) var(--wcs-border-radius) 0;\n\n    // Make select square on left side\n    --wcs-select-border-radius: 0 var(--wcs-border-radius) var(--wcs-border-radius) 0 ;\n}\n","import { Component, ComponentInterface, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { isMutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\n/**\n * TODO:\n * - [ ] Suffix button style\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\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-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"],"version":3}

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ca67a6dc.js');
+const index = require('./index-749d999e.js');
 
 const FieldContent = class {
   constructor(hostRef) {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ca67a6dc.js');
+const index = require('./index-749d999e.js');
 
 const FieldLabel = class {
   constructor(hostRef) {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ca67a6dc.js');
+const index = require('./index-749d999e.js');
 
 const fieldCss = ":host{display:flex;flex-direction:column;margin-top:var(--wcs-base-margin);margin-bottom:calc(var(--wcs-base-margin) * 2)}::slotted([slot=label]){font-size:1rem;line-height:1.375;font-weight:500;margin-bottom:calc(var(--wcs-base-margin) / 2);color:var(--wcs-gray-light)}::slotted([slot=content]){font-size:1rem;font-weight:400;color:var(--wcs-gray-light)}";
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ca67a6dc.js');
+const index = require('./index-749d999e.js');
 
 const footerCss = ":host{display:block;width:100%;background-color:var(--wcs-gray);color:white}:host .end{margin-top:calc(2 * var(--wcs-base-margin));width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--wcs-base-margin)}:host .end .end-left,:host .end .end-right{display:flex;flex-wrap:wrap}@media only screen and (max-width: 1024px){:host .end .end-left,:host .end .end-right{flex-direction:column}}:host .end slot[name=end-left]::slotted(a){color:var(--wcs-text-disabled);text-decoration:none;font-size:14px;font-weight:500;margin-right:35px}:host .end slot[name=end-left]::slotted(a:hover){color:var(--wcs-white)}:host .container{margin:0 auto;max-width:var(--wcs-com-content-max-width);display:flex;flex-direction:column;padding:20px}";
 

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ca67a6dc.js');
-const helpers = require('./helpers-4a14051a.js');
+const index = require('./index-749d999e.js');
+const helpers = require('./helpers-6280db6e.js');
 const popper = require('./popper-e3b74571.js');
 
 const galacticMenuCss = "#menu{background-color:var(--wcs-gray);color:white;display:none;padding:var(--wcs-padding)}#menu[data-show]{display:block;z-index:9999}#menu[data-popper-placement^=top]>#arrow{bottom:-4px}#menu[data-popper-placement^=bottom]>#arrow{top:-4px}#menu[data-popper-placement^=left]>#arrow{right:-4px}#menu[data-popper-placement^=right]>#arrow{left:-4px}:host{display:flex;align-items:center;height:32px;padding-left:var(--wcs-padding);background-color:var(--wcs-gray-light)}#toggle-menu-icon{cursor:pointer;padding:0 var(--wcs-padding);user-select:none}#arrow,#arrow::before{position:absolute;width:8px;height:8px;background:inherit}#arrow{visibility:hidden}#arrow::before{visibility:visible;content:\"\";transform:rotate(45deg)}";

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ca67a6dc.js');
+const index = require('./index-749d999e.js');
 
 const galacticCss = ":host{display:block;background-color:var(--wcs-gray)}.container{height:32px;align-items:center;justify-content:space-between;color:var(--wcs-white);font-size:14px;display:flex;max-width:var(--wcs-com-content-max-width);margin:0 auto}.container #sncf-logo{height:32px;margin-right:20px}.container .container-left{display:flex;align-items:center}";
 

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

@@ -2,9 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ca67a6dc.js');
+const index = require('./index-749d999e.js');
+const helpers = require('./helpers-6280db6e.js');
 
-const GridSortArrow = ({ state }) => (index.h("svg", { style: { marginLeft: 'auto' }, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "20", viewBox: "0 0 24 20" },
+const GridSortArrow = ({ state }) => (index.h("svg", { "aria-hidden": "true", style: { marginLeft: 'auto' }, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "20", viewBox: "0 0 24 20" },
   index.h("style", { type: "text/css" }, `
             .arrow-group {
                 transform-origin: 50% 51%;
@@ -32,7 +33,7 @@ const GridSortArrow = ({ state }) => (index.h("svg", { style: { marginLeft: 'aut
     index.h("path", { class: (state === 'desc' ? 'active' : '') + ' arrow', d: "M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" }),
     index.h("path", { d: "M0 0h24v24H0z", fill: "none" }))));
 
-const gridColumnCss = ":host{--wcs-grid-column-border-left:solid 1px var(--wcs-text-light);display:contents}:host th{color:var(--wcs-gray-dark);background-color:var(--wcs-light);border-left:var(--wcs-grid-column-border-left);padding:calc(var(--wcs-padding) / 2) var(--wcs-padding);text-align:left}:host th .grid-column-th-content{display:inline-flex;flex-direction:row}:host th .grid-column-th-content span{user-select:none}:host .pointer{cursor:pointer}:host([sort-order=asc]) img{transform:scaleY(1)}:host([sort-order=desc]) img{transform:scaleY(-1)}:host([sort-order=none]) img{display:none}:host([sort-order=none]) th:hover img{display:inline-block}:host([hidden]){display:none !important}";
+const gridColumnCss = ":host{--wcs-grid-column-border-left:solid 1px var(--wcs-text-light);display:contents}:host th{color:var(--wcs-gray-dark);background-color:var(--wcs-light);border-left:var(--wcs-grid-column-border-left);padding:calc(var(--wcs-padding) / 2) var(--wcs-padding);text-align:left}:host th .grid-column-th-content{display:inline-flex;flex-direction:row}:host th .grid-column-th-content span{user-select:none}:host th:focus-visible{outline:2px dashed var(--wcs-primary);outline-offset:0;border-radius:0.1rem}:host .pointer{cursor:pointer}:host([sort-order=asc]) img{transform:scaleY(1)}:host([sort-order=desc]) img{transform:scaleY(-1)}:host([sort-order=none]) img{display:none}:host([sort-order=none]) th:hover img{display:inline-block}:host([hidden]){display:none !important}";
 
 const GridColumn = class {
   constructor(hostRef) {
@@ -48,6 +49,8 @@ const GridColumn = class {
     this.width = undefined;
     this.customCells = false;
     this.hidden = false;
+    this.cursorPosition = undefined;
+    this.columnPosition = undefined;
   }
   parseMyObjectProp(newValue) {
     this.wcsHiddenChange.emit(newValue);
@@ -64,13 +67,31 @@ const GridColumn = class {
       sortFn: this.sortFn
     });
   }
+  getSortOrderForAriaSort(sortOrder) {
+    switch (sortOrder) {
+      case 'asc':
+        return 'ascending';
+      case 'desc':
+        return 'descending';
+      case 'none':
+      default:
+        return 'none';
+    }
+  }
   render() {
-    return (index.h(index.Host, { onClick: this.onSortClick.bind(this), slot: "grid-column" }, index.h("th", { style: { width: this.width }, class: this.sort ? 'pointer' : '' }, index.h("div", { class: "grid-column-th-content" }, index.h("span", null, this.name), this.sort ? index.h(GridSortArrow, { state: this.sortOrder }) : ''))));
+    var _a, _b;
+    return (index.h(index.Host, { slot: "grid-column" }, index.h("th", { style: { width: this.width }, class: this.sort ? 'pointer' : '', role: this.sort ? 'button' : null, scope: "col", tabIndex: this.columnPosition === ((_a = this.cursorPosition) === null || _a === void 0 ? void 0 : _a.col) && ((_b = this.cursorPosition) === null || _b === void 0 ? void 0 : _b.row) === 0 ? 0 : -1, onClick: this.onSortClick.bind(this), onKeyDown: this.handleSortKeyDown.bind(this), "aria-sort": this.getSortOrderForAriaSort(this.sortOrder) }, index.h("div", { class: "grid-column-th-content" }, index.h("span", null, this.name), this.sort ? index.h(GridSortArrow, { state: this.sortOrder }) : ''))));
   }
   onSortClick() {
     // @Watch on sortOrder property will trigger wcsSortChange event
     this.sortOrder = this.sortOrder === 'none' || this.sortOrder === 'desc' ? 'asc' : 'desc';
   }
+  handleSortKeyDown(_event) {
+    if (helpers.isSpaceKey(_event) || helpers.isEnterKey(_event)) {
+      _event.preventDefault();
+      this.onSortClick();
+    }
+  }
   get el() { return index.getElement(this); }
   static get watchers() { return {
     "hidden": ["parseMyObjectProp"],

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

@@ -1 +1 @@
-{"file":"wcs-grid-column.entry.cjs.js","mappings":";;;;;;AAOO,MAAM,aAAa,GAA4C,CAAC,EAAE,KAAK,EAAE,MAC5EA,iBAAK,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,EAAE,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW;EAC7GA,mBAAO,IAAI,EAAC,UAAU,IAAE;;;;;;;;;;;;;;;;;;;SAmBvB,CAAS;EACVA,eAAG,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,iBAAiB;IAClCA,kBAAM,KAAK,EAAE,CAAC,KAAK,KAAK,KAAK,GAAG,QAAQ,GAAG,EAAE,IAAI,QAAQ,EAAE,CAAC,EAAC,gDAAgD,GAAG;IAChHA,kBAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAG,CACtC;EACJA,eAAG,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,kBAAkB;IACnCA,kBAAM,KAAK,EAAE,CAAC,KAAK,KAAK,MAAM,GAAG,QAAQ,GAAG,EAAE,IAAI,QAAQ,EAAE,CAAC,EAAC,gDAAgD,GAAG;IACjHA,kBAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAG,CACtC,CACF,CACT;;ACtCD,MAAM,aAAa,GAAG,gqBAAgqB;;MCczqB,UAAU;;;;;;;gBAaK,KAAK;;;qBAaoB,MAAM;;uBAQxB,KAAK;kBAIV,KAAK;;EAW/B,iBAAiB,CAAC,QAAiB;IAC/B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACvC;EAGD,eAAe,CAAC,CAAe;IAC3B,IAAI,CAAC,cAAc,EAAE,CAAC;GACzB;EAED,cAAc;IACV,IAAI,CAAC,IAAI,CAAC,IAAI;MAAE,OAAO;IACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;MACpB,MAAM,EAAE,IAAI,CAAC,EAAE;MACf,KAAK,EAAE,IAAI,CAAC,SAAS;MACrB,MAAM,EAAE,IAAI,CAAC,MAAM;KACtB,CAAC,CAAC;GACN;EAED,MAAM;IACF,QAAQA,QAACC,UAAI,IAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,EAAC,aAAa,IAClED,gBAAI,KAAK,EAAE,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,GAAG,SAAS,GAAG,EAAE,IAC7DA,iBAAK,KAAK,EAAC,wBAAwB,IAC/BA,sBAAO,IAAI,CAAC,IAAI,CAAQ,EAEpB,IAAI,CAAC,IAAI,GAAGA,QAAC,aAAa,IAAC,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,GAAG,EAAE,CAE1D,CACL,CACF,EAAC;GACX;EAEO,WAAW;;IAEf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,KAAK,MAAM,IAAI,IAAI,CAAC,SAAS,KAAK,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;GAC5F;;;;;;;;;;;","names":["h","Host"],"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-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 style={{ marginLeft: 'auto' }} xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\">\n        <style type=\"text/css\">{`\n            .arrow-group {\n                transform-origin: 50% 51%;\n                transition: transform 175ms ease-in-out;\n            }\n            .arrow{\n                transition: fill 175ms ease-in-out;\n                fill: var(--wcs-text-light);\n            }\n            .asc {\n                transform: scaleY(1) translateY(-6px);\n            }\n            .desc {\n                transform: scaleY(-1) translateY(-6px);\n            }\n            .active {\n                fill: var(--wcs-primary);\n            }\n\n        `}</style>\n        <g fill=\"none\" class='asc arrow-group'>\n            <path class={(state === 'asc' ? 'active' : '') + ' arrow'} d=\"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z\" />\n            <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n        </g>\n        <g fill=\"none\" class='desc arrow-group'>\n            <path class={(state === 'desc' ? 'active' : '') + ' arrow'} d=\"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z\" />\n            <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n        </g>\n    </svg>\n);\n",":host {\n    --wcs-grid-column-border-left: solid 1px var(--wcs-text-light);\n\n    display: contents;\n\n    th {\n        color: var(--wcs-gray-dark);\n        background-color: var(--wcs-light);\n        border-left: var(--wcs-grid-column-border-left);\n        padding: calc(var(--wcs-padding) / 2) var(--wcs-padding);\n        text-align: left;\n\n        .grid-column-th-content {\n            display: inline-flex;\n            flex-direction: row;\n\n            span {\n                user-select: none;\n            }\n        }\n    }\n\n    .pointer {\n        cursor: pointer;\n    }\n}\n\n:host([sort-order=\"asc\"]) {\n    img {\n        transform: scaleY(1);\n    }\n}\n\n:host([sort-order=\"desc\"]) {\n    img {\n        transform: scaleY(-1);\n    }\n}\n\n:host([sort-order=\"none\"]) {\n    img {\n        display: none;\n    }\n\n    th:hover {\n        img {\n            display: inline-block;\n        }\n    }\n}\n\n:host([hidden]) {\n    display: none !important;\n}\n","import { Component, ComponentInterface, Element, Event, EventEmitter, h, Host, Prop, Watch } from '@stencil/core';\nimport { WcsCellFormatter, WcsGridColumnSortChangeEventDetails, WcsSortFn, WcsSortOrder } from '../grid/grid-interface';\nimport { GridSortArrow } from './grid-sort-arrow';\n\n/**\n * The grid column is a subcomponent of `wcs-grid` that represents a column of the table.\n * @cssprop --wcs-grid-column-border-left - Border separator between column names\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    styleUrl: 'grid-column.scss',\n    shadow: true\n})\nexport class GridColumn implements ComponentInterface {\n    @Element() private el: HTMLWcsGridColumnElement;\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    @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    render(): any {\n        return (<Host onClick={this.onSortClick.bind(this)} slot=\"grid-column\">\n            <th style={{width: this.width}} class={this.sort ? 'pointer' : ''}>\n                <div class=\"grid-column-th-content\">\n                    <span>{this.name}</span>\n                    {\n                        this.sort ? <GridSortArrow state={this.sortOrder}/> : ''\n                    }\n                </div>\n            </th>\n        </Host>)\n    }\n\n    private onSortClick() {\n        // @Watch on sortOrder property will trigger wcsSortChange event\n        this.sortOrder = this.sortOrder === 'none' || this.sortOrder === 'desc' ? 'asc' : 'desc';\n    }\n}\n"],"version":3}
+{"file":"wcs-grid-column.entry.cjs.js","mappings":"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","names":["h","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-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\" style={{ marginLeft: 'auto' }} xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\">\n        <style type=\"text/css\">{`\n            .arrow-group {\n                transform-origin: 50% 51%;\n                transition: transform 175ms ease-in-out;\n            }\n            .arrow{\n                transition: fill 175ms ease-in-out;\n                fill: var(--wcs-text-light);\n            }\n            .asc {\n                transform: scaleY(1) translateY(-6px);\n            }\n            .desc {\n                transform: scaleY(-1) translateY(-6px);\n            }\n            .active {\n                fill: var(--wcs-primary);\n            }\n\n        `}</style>\n        <g fill=\"none\" class='asc arrow-group'>\n            <path class={(state === 'asc' ? 'active' : '') + ' arrow'} d=\"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z\" />\n            <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n        </g>\n        <g fill=\"none\" class='desc arrow-group'>\n            <path class={(state === 'desc' ? 'active' : '') + ' arrow'} d=\"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z\" />\n            <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n        </g>\n    </svg>\n);\n","@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-grid-column-border-left: solid 1px var(--wcs-text-light);\n\n    display: contents;\n\n    th {\n        color: var(--wcs-gray-dark);\n        background-color: var(--wcs-light);\n        border-left: var(--wcs-grid-column-border-left);\n        padding: calc(var(--wcs-padding) / 2) var(--wcs-padding);\n        text-align: left;\n\n        .grid-column-th-content {\n            display: inline-flex;\n            flex-direction: row;\n\n            span {\n                user-select: none;\n            }\n        }\n\n        &:focus-visible {\n            @include focus-outline($outline-offset: 0);\n        }\n    }\n    .pointer {\n        cursor: pointer;\n    }\n}\n\n:host([sort-order=\"asc\"]) {\n    img {\n        transform: scaleY(1);\n    }\n}\n\n:host([sort-order=\"desc\"]) {\n    img {\n        transform: scaleY(-1);\n    }\n}\n\n:host([sort-order=\"none\"]) {\n    img {\n        display: none;\n    }\n\n    th:hover {\n        img {\n            display: inline-block;\n        }\n    }\n}\n\n:host([hidden]) {\n    display: none !important;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\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 { isEnterKey, isSpaceKey } from \"../../utils/helpers\";\n\n/**\n * The grid column is a subcomponent of `wcs-grid` that represents a column of the table.\n * @cssprop --wcs-grid-column-border-left - Border separator between column names\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    styleUrl: 'grid-column.scss',\n    shadow: true\n})\nexport class GridColumn implements ComponentInterface {\n    @Element() private el: HTMLWcsGridColumnElement;\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    @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    render(): any {\n        return (<Host slot=\"grid-column\">\n            <th style={{width: this.width}}\n                class={this.sort ? 'pointer' : ''}\n                role={this.sort ? 'button' : null}\n                scope=\"col\"\n                tabIndex={this.columnPosition === this.cursorPosition?.col && this.cursorPosition?.row === 0 ? 0 : -1}\n                onClick={this.onSortClick.bind(this)}\n                onKeyDown={this.handleSortKeyDown.bind(this)}\n                aria-sort={this.getSortOrderForAriaSort(this.sortOrder)}>\n                <div class=\"grid-column-th-content\">\n                    <span>{this.name}</span>\n                    {\n                        this.sort ? <GridSortArrow state={this.sortOrder}/> : ''\n                    }\n                </div>\n            </th>\n        </Host>)\n    }\n\n    private onSortClick() {\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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ca67a6dc.js');
+const index = require('./index-749d999e.js');
 
 const GridCustomCell = class {
   constructor(hostRef) {

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const gridPagination = require('./grid-pagination-4b55c908.js');
-require('./index-ca67a6dc.js');
+const gridPagination = require('./grid-pagination-3511fdfa.js');
+require('./index-749d999e.js');