wcs-core 4.2.0 → 5.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"editable-field.js","sourceRoot":"","sources":["../../../src/components/editable-field/editable-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    EventEmitter,\n    h,\n    Prop,\n    Event,\n    State,\n    Host,\n    Element,\n    Watch, 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":"editable-field.js","sourceRoot":"","sources":["../../../src/components/editable-field/editable-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    EventEmitter,\n    h,\n    Prop,\n    Event,\n    State,\n    Host,\n    Element,\n    Watch, 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"]}

package/dist/collection/components/error/error.js

@@ -1,7 +1,7 @@
 import { h, Host } from '@stencil/core';
 export class Label {
   render() {
-    return (h(Host, { slot: "error" }, h("slot", null)));
+    return (h(Host, { "aria-live": "polite", "aria-atomic": "true", slot: "error" }, h("slot", null)));
   }
   static get is() { return "wcs-error"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/error/error.js.map

@@ -1 +1 @@
-{"version":3,"file":"error.js","sourceRoot":"","sources":["../../../src/components/error/error.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOvE,MAAM,OAAO,KAAK;EACd,MAAM;IACF,OAAO,CACH,EAAC,IAAI,IAAC,IAAI,EAAC,OAAO;MACd,eAAQ,CACL,CACV,CAAC;EACN,CAAC;;;;;;;;;CACJ","sourcesContent":["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"]}
+{"version":3,"file":"error.js","sourceRoot":"","sources":["../../../src/components/error/error.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOvE,MAAM,OAAO,KAAK;EACd,MAAM;IACF,OAAO,CACH,EAAC,IAAI,iBAAW,QAAQ,iBAAa,MAAM,EAAC,IAAI,EAAC,OAAO;MACpD,eAAQ,CACL,CACV,CAAC;EACN,CAAC;;;;;;;;;CACJ","sourcesContent":["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"]}

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

@@ -1,4 +1,5 @@
 import { h, Host } from '@stencil/core';
+import { isMutableAriaAttribute } from "../../utils/mutable-aria-attribute";
 /**
  * TODO:
  * - [ ] Suffix button style
@@ -21,6 +22,7 @@ export class FormField {
   }
   isErrorChange(newValue) {
     this.updateErrorStateOnInput(newValue);
+    this.updateAriaAttributes();
   }
   updateErrorStateOnInput(newValue) {
     if (this.spiedElementIsOfType('wcs-input', 'wcs-textarea')) {
@@ -78,6 +80,34 @@ export class FormField {
       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');
@@ -103,6 +133,7 @@ export class FormField {
   }
   onFormInputSlotChange() {
     this.initSpiedElement();
+    this.updateAriaAttributes();
     this.addRequiredMarkerToLabel();
     this.updateErrorStateOnInput(this.isError);
   }

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

@@ -1 +1 @@
-{"version":3,"file":"form-field.js","sourceRoot":"","sources":["../../../src/components/form-field/form-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, h, Host, Prop, State, Watch } from '@stencil/core';\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":"form-field.js","sourceRoot":"","sources":["../../../src/components/form-field/form-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { isMutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\n/**\n * 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"]}

package/dist/collection/components/grid/grid-interface.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid-interface.js","sourceRoot":"","sources":["../../../src/components/grid/grid-interface.ts"],"names":[],"mappings":"AAmCA,MAAM,UAAU,mBAAmB,CAAC,SAAuB;EACvD,QAAQ,SAAS,EAAE;IACf,KAAK,KAAK;MACN,OAAO,CAAC,CAAC;IACb,KAAK,MAAM;MACP,OAAO,CAAC,CAAC,CAAC;IACd,KAAK,MAAM;MACP,MAAM;GACb;AACL,CAAC","sourcesContent":["import { VNode } from '@stencil/core';\n\nexport type WcsGridSelectionConfig = 'none' | 'single' | 'multiple';\n\nexport type WcsSortFn = (a: any, b: any, column: HTMLWcsGridColumnElement) => -1 | 0 | 1;\n\nexport type WcsCellFormatter = (_h: HyperFunc<VNode>, column: HTMLWcsGridColumnElement, rowData: WcsGridRowData) => HTMLElement | HTMLElement[];\n\nexport interface WcsGridColumnSortChangeEventDetails {\n    sortFn: WcsSortFn;\n    order: WcsSortOrder;\n    column: HTMLWcsGridColumnElement;\n}\n\nexport interface WcsGridRowSelectedEventDetails {\n    row: WcsGridRowData;\n}\n\nexport interface WcsGridAllRowSelectedEventDetails {\n    rows: WcsGridRowData[];\n}\n\nexport type WcsGridPaginationConfig = {\n    currentPage: number;\n    pageSize: number;\n    itemsCount: number;\n    pageCount: number;\n};\n\nexport interface WcsGridPaginationChangeEventDetails {\n    pagination: WcsGridPaginationConfig;\n}\n\nexport type WcsSortOrder = 'asc' | 'desc' | 'none';\n\nexport function getSortOrderInteger(sortOrder: WcsSortOrder) {\n    switch (sortOrder) {\n        case 'asc':\n            return 1;\n        case 'desc':\n            return -1;\n        case 'none':\n            break;\n    }\n}\n\nexport interface WcsGridRow {\n    uuid: string;\n    page?: number;\n    selected?: boolean;\n    data?: any;\n    cells?: WcsGridCell[];\n}\n\nexport interface WcsGridCell {\n    content: string | void;\n    column: HTMLWcsGridColumnElement;\n    formatter: (_h: HyperFunc<VNode>, column: HTMLWcsGridColumnElement, rowData: WcsGridRowData) => HTMLElement | HTMLElement[];\n}\n\nexport interface WcsGridRowData {\n    page: number;\n    selected: boolean;\n    data: any;\n}\n\nexport interface HyperFunc<T> {\n    (tag: any): T;\n}\n\nexport interface HyperFunc<T> {\n    (tag: any, data: any): T;\n}\n\nexport interface HyperFunc<T> {\n    (tag: any, text: string): T;\n}\n\nexport interface HyperFunc<T> {\n    (sel: any, children: (T | undefined | null)[]): T;\n}\n\nexport interface HyperFunc<T> {\n    (sel: any, data: any, text: string): T;\n}\n\nexport interface HyperFunc<T> {\n    (sel: any, data: any, children: (T | undefined | null)[]): T;\n}\n\nexport interface HyperFunc<T> {\n    (sel: any, data: any, children: T): T;\n}\n"]}
+{"version":3,"file":"grid-interface.js","sourceRoot":"","sources":["../../../src/components/grid/grid-interface.ts"],"names":[],"mappings":"AA+CA,MAAM,UAAU,mBAAmB,CAAC,SAAuB;EACvD,QAAQ,SAAS,EAAE;IACf,KAAK,KAAK;MACN,OAAO,CAAC,CAAC;IACb,KAAK,MAAM;MACP,OAAO,CAAC,CAAC,CAAC;IACd,KAAK,MAAM;MACP,MAAM;GACb;AACL,CAAC","sourcesContent":["import { VNode } from '@stencil/core';\n\nexport type WcsGridSelectionConfig = 'none' | 'single' | 'multiple';\n\nexport type WcsSortFn = (a: any, b: any, column: HTMLWcsGridColumnElement) => -1 | 0 | 1;\n\nexport type WcsCellFormatter = (_h: HyperFunc<VNode>, column: HTMLWcsGridColumnElement, rowData: WcsGridRowData) => HTMLElement | HTMLElement[];\n\nexport interface WcsGridColumnSortChangeEventDetails {\n    sortFn: WcsSortFn;\n    order: WcsSortOrder;\n    column: HTMLWcsGridColumnElement;\n}\n\n/**\n * Event details for the grid selection event\n */\nexport interface WcsGridSelectionEventDetails {\n    /**\n     * The currently selected rows after the selection change\n     */\n    selectedRows: WcsGridRowData[];\n    /**\n     * The row that was changed\n     * If the grid is in multiple selection mode, you can get `allCheckbox` as the value representing that the event was\n     * triggered by the selection of all checkbox\n     */\n    changedRow: WcsGridRowData | 'allCheckbox';\n}\n\nexport interface WcsGridAllRowSelectedEventDetails {\n    rows: WcsGridRowData[];\n}\n\nexport type WcsGridPaginationConfig = {\n    currentPage: number;\n    pageSize: number;\n    itemsCount: number;\n    pageCount: number;\n};\n\nexport interface WcsGridPaginationChangeEventDetails {\n    pagination: WcsGridPaginationConfig;\n}\n\nexport type WcsSortOrder = 'asc' | 'desc' | 'none';\n\nexport function getSortOrderInteger(sortOrder: WcsSortOrder) {\n    switch (sortOrder) {\n        case 'asc':\n            return 1;\n        case 'desc':\n            return -1;\n        case 'none':\n            break;\n    }\n}\n\nexport interface WcsGridRow {\n    uuid: string;\n    page?: number;\n    selected?: boolean;\n    data?: any;\n    cells?: WcsGridCell[];\n}\n\nexport interface WcsGridCell {\n    content: string | void;\n    column: HTMLWcsGridColumnElement;\n    formatter: (_h: HyperFunc<VNode>, column: HTMLWcsGridColumnElement, rowData: WcsGridRowData) => HTMLElement | HTMLElement[];\n}\n\nexport interface WcsGridRowData {\n    page: number;\n    selected: boolean;\n    data: any;\n}\n\nexport interface HyperFunc<T> {\n    (tag: any): T;\n}\n\nexport interface HyperFunc<T> {\n    (tag: any, data: any): T;\n}\n\nexport interface HyperFunc<T> {\n    (tag: any, text: string): T;\n}\n\nexport interface HyperFunc<T> {\n    (sel: any, children: (T | undefined | null)[]): T;\n}\n\nexport interface HyperFunc<T> {\n    (sel: any, data: any, text: string): T;\n}\n\nexport interface HyperFunc<T> {\n    (sel: any, data: any, children: (T | undefined | null)[]): T;\n}\n\nexport interface HyperFunc<T> {\n    (sel: any, data: any, children: T): T;\n}\n"]}

package/dist/collection/components/grid/grid-keyboard-event.js

@@ -0,0 +1,52 @@
+import { keyboardShortcutFromKeyboardEvent } from "../../utils/keyboard-event";
+/**
+ * We follow this https://www.w3.org/WAI/ARIA/apg/patterns/grid/
+ * @param event
+ * @param type
+ */
+export function getActionForKeyboardEvent(event, type) {
+  const keyboardShortcut = keyboardShortcutFromKeyboardEvent(event);
+  if (keyboardShortcut === 'UNKNOWN') {
+    return [];
+  }
+  switch (keyboardShortcut) {
+    case "UP_ARROW":
+      return [{ kind: 'FocusCell', target: 'up' }];
+    case "DOWN_ARROW":
+      return [{ kind: 'FocusCell', target: 'down' }];
+    case "LEFT_ARROW":
+      return [{ kind: 'FocusCell', target: 'left' }];
+    case "RIGHT_ARROW":
+      return [{ kind: 'FocusCell', target: 'right' }];
+    case "HOME":
+      return [{ kind: 'FocusCell', target: 'first_of_row' }];
+    case "END":
+      return [{ kind: 'FocusCell', target: 'last_of_row' }];
+    case "MAJ+SPACE":
+      switch (type) {
+        case "grid_selection_single":
+        case "grid_selection_multiple":
+          return [{ kind: 'SelectRow', target: 'one' }];
+        case "grid_no_selection":
+          break;
+      }
+      break;
+    case "CTRL+A":
+      switch (type) {
+        case "grid_selection_multiple":
+          return [{ kind: 'SelectRow', target: 'all' }];
+        case "grid_selection_single":
+        case "grid_no_selection":
+          break;
+      }
+      break;
+    case "CTRL+HOME":
+      return [{ kind: 'FocusCell', target: 'first_of_grid' }];
+    case "CTRL+END":
+      return [{ kind: 'FocusCell', target: 'last_of_grid' }];
+    default:
+      break;
+  }
+  return [];
+}
+//# sourceMappingURL=grid-keyboard-event.js.map

package/dist/collection/components/grid/grid-keyboard-event.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-keyboard-event.js","sourceRoot":"","sources":["../../../src/components/grid/grid-keyboard-event.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iCAAiC,EAAE,MAAM,4BAA4B,CAAC;AA0B/E;;;;GAIG;AACH,MAAM,UAAU,yBAAyB,CAAC,KAAoB,EAAE,IAA+E;EAC3I,MAAM,gBAAgB,GAAG,iCAAiC,CAAC,KAAK,CAAC,CAAC;EAElE,IAAG,gBAAgB,KAAK,SAAS,EAAE;IAC/B,OAAO,EAAE,CAAC;GACb;EAED,QAAQ,gBAAgB,EAAE;IACtB,KAAK,UAAU;MACX,OAAO,CAAC,EAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAC,CAAC,CAAC;IAC/C,KAAK,YAAY;MACb,OAAO,CAAC,EAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAC,CAAC,CAAC;IACjD,KAAK,YAAY;MACb,OAAO,CAAC,EAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAC,CAAC,CAAC;IACjD,KAAK,aAAa;MACd,OAAO,CAAC,EAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAC,CAAC,CAAC;IAClD,KAAK,MAAM;MACP,OAAO,CAAC,EAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,cAAc,EAAC,CAAC,CAAC;IACzD,KAAK,KAAK;MACN,OAAO,CAAC,EAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,EAAC,CAAC,CAAC;IACxD,KAAK,WAAW;MACZ,QAAQ,IAAI,EAAE;QACV,KAAK,uBAAuB,CAAC;QAC7B,KAAK,yBAAyB;UAC1B,OAAO,CAAC,EAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,EAAC,CAAC,CAAC;QAChD,KAAK,mBAAmB;UACpB,MAAM;OACb;MACD,MAAM;IACV,KAAK,QAAQ;MACT,QAAQ,IAAI,EAAE;QACV,KAAK,yBAAyB;UAC1B,OAAO,CAAC,EAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,EAAC,CAAC,CAAC;QAChD,KAAK,uBAAuB,CAAC;QAC7B,KAAK,mBAAmB;UACpB,MAAM;OACb;MACD,MAAM;IACV,KAAK,WAAW;MACZ,OAAO,CAAC,EAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,eAAe,EAAC,CAAC,CAAC;IAC1D,KAAK,UAAU;MACX,OAAO,CAAC,EAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,cAAc,EAAC,CAAC,CAAC;IACzD;MACI,MAAM;GACb;EAED,OAAO,EAAE,CAAC;AACd,CAAC","sourcesContent":["import { keyboardShortcutFromKeyboardEvent } from \"../../utils/keyboard-event\";\n\n\nexport type KeyboardEventAssociatedAction = FocusCell | SelectRow;\n\n// Possibles Shortcut\n// UP_ARROW : focus cell up\n// DOWN_ARROW : focus cell down\n// LEFT_ARROW : focus cell left\n// RIGHT_ARROW : focus cell right\n\n// HOME : focus first cell of the row\n// END : focus last cell of the row\n\n// CTRL+HOME : focus first cell of the grid\n// CTRL+END : focus first cell of the grid\n\n// IF SELECTION MULTIPLE OR SINGLE :\n// MAJ+SPACE : select (check) the current row\n\n// IF SELECTION MULTIPLE\n// CTRL+A : select (check) all rows\n\ntype FocusCell = {kind: 'FocusCell', target: 'up' | 'down' | 'left' | 'right' | 'first_of_row' | 'last_of_row' | 'first_of_grid' | 'last_of_grid'};\ntype SelectRow = {kind: 'SelectRow', target: 'one' | 'all'}\n\n/**\n * We follow this https://www.w3.org/WAI/ARIA/apg/patterns/grid/\n * @param event\n * @param type\n */\nexport function getActionForKeyboardEvent(event: KeyboardEvent, type: 'grid_no_selection' | 'grid_selection_single' | 'grid_selection_multiple'): KeyboardEventAssociatedAction[] {\n    const keyboardShortcut = keyboardShortcutFromKeyboardEvent(event);\n\n    if(keyboardShortcut === 'UNKNOWN') {\n        return [];\n    }\n\n    switch (keyboardShortcut) {\n        case \"UP_ARROW\":\n            return [{kind: 'FocusCell', target: 'up'}];\n        case \"DOWN_ARROW\":\n            return [{kind: 'FocusCell', target: 'down'}];\n        case \"LEFT_ARROW\":\n            return [{kind: 'FocusCell', target: 'left'}];\n        case \"RIGHT_ARROW\":\n            return [{kind: 'FocusCell', target: 'right'}];\n        case \"HOME\":\n            return [{kind: 'FocusCell', target: 'first_of_row'}];\n        case \"END\":\n            return [{kind: 'FocusCell', target: 'last_of_row'}];\n        case \"MAJ+SPACE\":\n            switch (type) {\n                case \"grid_selection_single\":\n                case \"grid_selection_multiple\":\n                    return [{kind: 'SelectRow', target: 'one'}];\n                case \"grid_no_selection\":\n                    break;\n            }\n            break;\n        case \"CTRL+A\":\n            switch (type) {\n                case \"grid_selection_multiple\":\n                    return [{kind: 'SelectRow', target: 'all'}];\n                case \"grid_selection_single\":\n                case \"grid_no_selection\":\n                    break;\n            }\n            break;\n        case \"CTRL+HOME\":\n            return [{kind: 'FocusCell', target: 'first_of_grid'}];\n        case \"CTRL+END\":\n            return [{kind: 'FocusCell', target: 'last_of_grid'}];\n        default:\n            break;\n    }\n\n    return [];\n}\n"]}

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

@@ -20,6 +20,11 @@
   margin: 0;
   padding: calc(var(--wcs-padding) / 2) var(--wcs-padding);
 }
+:host td:focus-visible {
+  outline: 2px dashed var(--wcs-primary);
+  outline-offset: 0;
+  border-radius: 0.1rem;
+}
 :host tr:not(:last-child) td {
   border-bottom: solid 1px var(--wcs-text-light);
 }