wcs-core 4.2.0 → 5.0.0

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

@@ -1,5 +1,6 @@
 import { h, Host } from '@stencil/core';
 import { GridSortArrow } from './grid-sort-arrow';
+import { isEnterKey, isSpaceKey } from "../../utils/helpers";
 /**
  * The grid column is a subcomponent of `wcs-grid` that represents a column of the table.
  * @cssprop --wcs-grid-column-border-left - Border separator between column names
@@ -16,6 +17,8 @@ export class GridColumn {
     this.width = undefined;
     this.customCells = false;
     this.hidden = false;
+    this.cursorPosition = undefined;
+    this.columnPosition = undefined;
   }
   parseMyObjectProp(newValue) {
     this.wcsHiddenChange.emit(newValue);
@@ -32,13 +35,31 @@ export class GridColumn {
       sortFn: this.sortFn
     });
   }
+  getSortOrderForAriaSort(sortOrder) {
+    switch (sortOrder) {
+      case 'asc':
+        return 'ascending';
+      case 'desc':
+        return 'descending';
+      case 'none':
+      default:
+        return 'none';
+    }
+  }
   render() {
-    return (h(Host, { onClick: this.onSortClick.bind(this), slot: "grid-column" }, h("th", { style: { width: this.width }, class: this.sort ? 'pointer' : '' }, h("div", { class: "grid-column-th-content" }, h("span", null, this.name), this.sort ? h(GridSortArrow, { state: this.sortOrder }) : ''))));
+    var _a, _b;
+    return (h(Host, { slot: "grid-column" }, 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) }, h("div", { class: "grid-column-th-content" }, h("span", null, this.name), this.sort ? 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 (isSpaceKey(_event) || isEnterKey(_event)) {
+      _event.preventDefault();
+      this.onSortClick();
+    }
+  }
   static get is() { return "wcs-grid-column"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
@@ -220,6 +241,44 @@ export class GridColumn {
         "attribute": "hidden",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "cursorPosition": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "{col: number, row: number}",
+          "resolved": "{ col: number; row: number; }",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "This property mustn't be set by hand, it is set by the wcs-grid component to move the focus between grid columns\nusing keyboard."
+        }
+      },
+      "columnPosition": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "This property mustn't be set by hand, it is set by the wcs-grid component to register the column index in a\ngrid in order to move the focus between the grid columns."
+        },
+        "attribute": "column-position",
+        "reflect": false
       }
     };
   }

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

@@ -1 +1 @@
-{"version":3,"file":"grid-column.js","sourceRoot":"","sources":["../../../src/components/grid-column/grid-column.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAElH,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD;;;;GAIG;AAMH,MAAM,OAAO,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;EACxC,CAAC;EAGD,eAAe,CAAC,CAAe;IAC3B,IAAI,CAAC,cAAc,EAAE,CAAC;EAC1B,CAAC;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;EACP,CAAC;EAED,MAAM;IACF,OAAO,CAAC,EAAC,IAAI,IAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,EAAC,aAAa;MAClE,UAAI,KAAK,EAAE,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;QAC7D,WAAK,KAAK,EAAC,wBAAwB;UAC/B,gBAAO,IAAI,CAAC,IAAI,CAAQ;UAEpB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAC,aAAa,IAAC,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,EAAE,CAE1D,CACL,CACF,CAAC,CAAA;EACZ,CAAC;EAEO,WAAW;IACf,gEAAgE;IAChE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,KAAK,MAAM,IAAI,IAAI,CAAC,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC;EAC7F,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["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":"grid-column.js","sourceRoot":"","sources":["../../../src/components/grid-column/grid-column.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\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"]}

package/dist/collection/components/grid-column/grid-sort-arrow.js

@@ -1,5 +1,5 @@
 import { h } from '@stencil/core';
-export const GridSortArrow = ({ state }) => (h("svg", { style: { marginLeft: 'auto' }, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "20", viewBox: "0 0 24 20" }, h("style", { type: "text/css" }, `
+export const GridSortArrow = ({ state }) => (h("svg", { "aria-hidden": "true", style: { marginLeft: 'auto' }, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "20", viewBox: "0 0 24 20" }, h("style", { type: "text/css" }, `
             .arrow-group {
                 transform-origin: 50% 51%;
                 transition: transform 175ms ease-in-out;

package/dist/collection/components/grid-column/grid-sort-arrow.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid-sort-arrow.js","sourceRoot":"","sources":["../../../src/components/grid-column/grid-sort-arrow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAOvD,MAAM,CAAC,MAAM,aAAa,GAA4C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CACjF,WAAK,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,EAAE,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW;EAC7G,aAAO,IAAI,EAAC,UAAU,IAAE;;;;;;;;;;;;;;;;;;;SAmBvB,CAAS;EACV,SAAG,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,iBAAiB;IAClC,YAAM,KAAK,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,QAAQ,EAAE,CAAC,EAAC,gDAAgD,GAAG;IAChH,YAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAG,CACtC;EACJ,SAAG,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,kBAAkB;IACnC,YAAM,KAAK,EAAE,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,QAAQ,EAAE,CAAC,EAAC,gDAAgD,GAAG;IACjH,YAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAG,CACtC,CACF,CACT,CAAC","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"]}
+{"version":3,"file":"grid-sort-arrow.js","sourceRoot":"","sources":["../../../src/components/grid-column/grid-sort-arrow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAOvD,MAAM,CAAC,MAAM,aAAa,GAA4C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CACjF,0BAAiB,MAAM,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,EAAE,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW;EAChI,aAAO,IAAI,EAAC,UAAU,IAAE;;;;;;;;;;;;;;;;;;;SAmBvB,CAAS;EACV,SAAG,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,iBAAiB;IAClC,YAAM,KAAK,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,QAAQ,EAAE,CAAC,EAAC,gDAAgD,GAAG;IAChH,YAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAG,CACtC;EACJ,SAAG,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,kBAAkB;IACnC,YAAM,KAAK,EAAE,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,QAAQ,EAAE,CAAC,EAAC,gDAAgD,GAAG;IACjH,YAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAG,CACtC,CACF,CACT,CAAC","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"]}

package/dist/collection/components/grid-pagination/grid-pagination-arrow.js

@@ -1,26 +1,35 @@
 import { h } from '@stencil/core';
-export const GridPaginationArrow = ({ active, order, double = false }) => (h("svg", { style: { marginLeft: 'auto', cursor: 'pointer' }, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "20", viewBox: "0 0 24 20" }, h("style", { type: "text/css" }, `
-            .arrow-group {
-                transform-origin: 50% 51%;
-                transition: transform 175ms ease-in-out;
-            }
-            .arrow {
-                transition: fill 175ms ease-in-out;
-                fill: var(--wcs-text-light);
-            }
-            .second-arrow {
-                transform: translateY(-8px);
-            }
-            .next {
-                transform: rotate(90deg);
-            }
-            .previous {
-                transform: rotate(-90deg);
-            }
-            .active {
-                fill: var(--wcs-primary);
-            }
-        `), h("g", { fill: "none", class: order + ' arrow-group' }, h("path", { class: (active ? 'active' : '') + ' arrow', d: "M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" }), h("path", { d: "M0 0h24v24H0z", fill: "none" })), double ?
+const getAccessibleName = (order, double) => {
+  switch (order) {
+    case 'next':
+      return double ? 'Last page' : 'Next page';
+    case 'previous':
+    default:
+      return double ? 'First page' : 'Previous page';
+  }
+};
+export const GridPaginationArrow = ({ active, order, double = false }) => (h("wcs-button", { mode: "clear", shape: "square", size: "s", disabled: !active, title: getAccessibleName(order, double) }, h("svg", { style: { cursor: 'pointer' }, "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "20", viewBox: "0 0 24 20" }, h("style", { type: "text/css" }, `
+              .arrow-group {
+                  transform-origin: 50% 51%;
+                  transition: transform 175ms ease-in-out;
+              }
+              .arrow {
+                  transition: fill 175ms ease-in-out;
+                  fill: var(--wcs-text-light);
+              }
+              .second-arrow {
+                  transform: translateY(-8px);
+              }
+              .next {
+                  transform: rotate(90deg);
+              }
+              .previous {
+                  transform: rotate(-90deg);
+              }
+              .active {
+                  fill: var(--wcs-primary);
+              }
+          `), h("g", { fill: "none", class: order + ' arrow-group' }, h("path", { class: (active ? 'active' : '') + ' arrow', d: "M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" }), h("path", { d: "M0 0h24v24H0z", fill: "none" })), double ?
   h("g", { fill: "none", class: order + ' arrow-group' }, h("path", { class: (active ? 'active' : '') + ' arrow second-arrow', d: "M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" }), h("path", { d: "M0 0h24v24H0z", fill: "none" }))
-  : ''));
+  : '')));
 //# sourceMappingURL=grid-pagination-arrow.js.map

package/dist/collection/components/grid-pagination/grid-pagination-arrow.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid-pagination-arrow.js","sourceRoot":"","sources":["../../../src/components/grid-pagination/grid-pagination-arrow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAQvD,MAAM,CAAC,MAAM,mBAAmB,GAAkD,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CACrH,WAAK,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW;EAChI,aAAO,IAAI,EAAC,UAAU,IAAE;;;;;;;;;;;;;;;;;;;;;SAqBvB,CAAS;EACV,SAAG,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,GAAG,cAAc;IACxC,YAAM,KAAK,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,QAAQ,EAAE,CAAC,EAAC,gDAAgD,GAAG;IACvG,YAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAG,CACtC;EAEA,MAAM,CAAC,CAAC;IACJ,SAAG,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,GAAG,cAAc;MACxC,YAAM,KAAK,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,qBAAqB,EAAE,CAAC,EAAC,gDAAgD,GAAG;MACpH,YAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAG,CACtC;IACJ,CAAC,CAAC,EAAE,CAEV,CACT,CAAC","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\ninterface GridPaginationArrowProps {\n    active: boolean;\n    order: 'next' | 'previous';\n    double?: boolean;\n}\n\nexport const GridPaginationArrow: FunctionalComponent<GridPaginationArrowProps> = ({ active, order, double = false }) => (\n    <svg style={{ marginLeft: 'auto', cursor: 'pointer' }} 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            .second-arrow {\n                transform: translateY(-8px);\n            }\n            .next {\n                transform: rotate(90deg);\n            }\n            .previous {\n                transform: rotate(-90deg);\n            }\n            .active {\n                fill: var(--wcs-primary);\n            }\n        `}</style>\n        <g fill=\"none\" class={order + ' arrow-group'}>\n            <path class={(active ? '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        {\n            double ?\n                <g fill=\"none\" class={order + ' arrow-group'}>\n                    <path class={(active ? 'active' : '') + ' arrow second-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                : ''\n        }\n    </svg>\n);\n"]}
+{"version":3,"file":"grid-pagination-arrow.js","sourceRoot":"","sources":["../../../src/components/grid-pagination/grid-pagination-arrow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAQvD,MAAM,iBAAiB,GAAG,CAAC,KAAwC,EAAE,MAA0C,EAAU,EAAE;EACzH,QAAQ,KAAK,EAAE;IACb,KAAK,MAAM;MACT,OAAO,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC;IAC5C,KAAK,UAAU,CAAC;IAChB;MACE,OAAO,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,eAAe,CAAC;GAClD;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,mBAAmB,GAAkD,CAAC,EAAC,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,KAAK,EAAC,EAAE,EAAE,CAAC,CACrH,kBAAY,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,GAAG,EACR,QAAQ,EAAE,CAAC,MAAM,EACjB,KAAK,EAAE,iBAAiB,CAAC,KAAK,EAAE,MAAM,CAAC;EACjD,WAAK,KAAK,EAAE,EAAC,MAAM,EAAE,SAAS,EAAC,iBACd,MAAM,EAClB,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW;IAChF,aAAO,IAAI,EAAC,UAAU,IAAE;;;;;;;;;;;;;;;;;;;;;WAqBnB,CAAS;IACd,SAAG,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,GAAG,cAAc;MAC1C,YAAM,KAAK,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,QAAQ,EAAE,CAAC,EAAC,gDAAgD,GAAE;MACtG,YAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE,CACnC;IAEF,MAAM,CAAC,CAAC;MACN,SAAG,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,GAAG,cAAc;QAC1C,YAAM,KAAK,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,qBAAqB,EACvD,CAAC,EAAC,gDAAgD,GAAE;QAC1D,YAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE,CACnC;MACJ,CAAC,CAAC,EAAE,CAEJ,CACK,CACd,CAAC","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\ninterface GridPaginationArrowProps {\n  active: boolean;\n  order: 'next' | 'previous';\n  double?: boolean;\n}\n\nconst getAccessibleName = (order: GridPaginationArrowProps['order'], double: GridPaginationArrowProps['double']): string => {\n  switch (order) {\n    case 'next':\n      return double ? 'Last page' : 'Next page';\n    case 'previous':\n    default:\n      return double ? 'First page' : 'Previous page';\n  }\n}\n\nexport const GridPaginationArrow: FunctionalComponent<GridPaginationArrowProps> = ({active, order, double = false}) => (\n  <wcs-button mode=\"clear\"\n              shape=\"square\"\n              size=\"s\"\n              disabled={!active}\n              title={getAccessibleName(order, double)}>\n    <svg style={{cursor: 'pointer'}}\n         aria-hidden=\"true\"\n         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              .second-arrow {\n                  transform: translateY(-8px);\n              }\n              .next {\n                  transform: rotate(90deg);\n              }\n              .previous {\n                  transform: rotate(-90deg);\n              }\n              .active {\n                  fill: var(--wcs-primary);\n              }\n          `}</style>\n      <g fill=\"none\" class={order + ' arrow-group'}>\n        <path class={(active ? '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      {\n        double ?\n          <g fill=\"none\" class={order + ' arrow-group'}>\n            <path class={(active ? 'active' : '') + ' arrow second-arrow'}\n                  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          : ''\n      }\n    </svg>\n  </wcs-button>\n);\n"]}

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

@@ -10,6 +10,7 @@
   grid-template-columns: auto auto auto;
   justify-content: space-between;
   color: var(--wcs-text-medium);
+  align-items: center;
 }
 
 .available-page-sizes {
@@ -21,6 +22,22 @@
   align-items: center;
 }
 
+.page-management {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
 .pagination-arrow {
   display: flex;
+}
+
+.pagination-counter {
+  padding: 0 var(--wcs-padding-s);
+}
+
+.items-count span:focus {
+  outline: 2px dashed var(--wcs-primary);
+  outline-offset: 4px;
+  border-radius: 0.1rem;
 }

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

@@ -55,7 +55,7 @@ export class GridPagination {
     });
   }
   render() {
-    return (h(Host, { slot: "grid-pagination" }, h("div", { class: "container" }, h("div", { class: "page-size" }, h("wcs-select", { placeholder: "El\u00E9ments par page", class: "available-page-sizes", value: this.pageSize, onWcsChange: this.onChangePagesize.bind(this) }, this.availablePageSizes.map((pageSize) => h("wcs-select-option", { value: pageSize }, pageSize))), h("span", null, "\u00A0\u00E9l\u00E9ments par page")), h("div", { class: "items-count" }, h("span", null, this.itemsCount, " \u00E9l\u00E9ments")), h("div", { class: "page-management" }, h("span", { class: "pagination-arrow", onClick: this.firstPage.bind(this) }, h(GridPaginationArrow, { active: this.canGoToPreviousPage(), order: "previous", double: true })), h("span", { class: "pagination-arrow", onClick: this.previousPage.bind(this) }, h(GridPaginationArrow, { active: this.canGoToPreviousPage(), order: "previous" })), h("span", null, this.currentPage + 1, " / ", this.pageCount), h("span", { class: "pagination-arrow", onClick: this.nextPage.bind(this) }, h(GridPaginationArrow, { active: this.canGoToNextPage(), order: "next" })), h("span", { class: "pagination-arrow", onClick: this.lastPage.bind(this) }, h(GridPaginationArrow, { active: this.canGoToNextPage(), order: "next", double: true }))))));
+    return (h(Host, { slot: "grid-pagination" }, h("div", { class: "container" }, h("div", { class: "page-size" }, h("wcs-select", { placeholder: "El\u00E9ments par page", class: "available-page-sizes", "aria-labelledby": "elements-per-page-number elements-per-page-text", value: this.pageSize, onWcsChange: this.onChangePagesize.bind(this) }, this.availablePageSizes.map((pageSize) => h("wcs-select-option", { value: pageSize }, pageSize))), h("span", { id: "elements-per-page-number", hidden: true }, this.pageSize), h("span", { id: "elements-per-page-text" }, "\u00A0\u00E9l\u00E9ments par page")), h("div", { class: "items-count" }, h("span", null, this.itemsCount, " \u00E9l\u00E9ments")), h("nav", { "aria-label": "pagination" }, h("ul", { class: "page-management" }, h("li", { class: "pagination-arrow", onClick: this.firstPage.bind(this) }, h(GridPaginationArrow, { active: this.canGoToPreviousPage(), order: "previous", double: true })), h("li", { class: "pagination-arrow", onClick: this.previousPage.bind(this) }, h(GridPaginationArrow, { active: this.canGoToPreviousPage(), order: "previous" })), h("li", { class: "pagination-counter" }, h("span", { "aria-label": `Page ${this.currentPage + 1} sur ${this.pageCount}`, "aria-current": "page" }, this.currentPage + 1, " / ", this.pageCount)), h("li", { class: "pagination-arrow", onClick: this.nextPage.bind(this) }, h(GridPaginationArrow, { active: this.canGoToNextPage(), order: "next" })), h("li", { class: "pagination-arrow", onClick: this.lastPage.bind(this) }, h(GridPaginationArrow, { active: this.canGoToNextPage(), order: "next", double: true })))))));
   }
   static get is() { return "wcs-grid-pagination"; }
   static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"grid-pagination.js","sourceRoot":"","sources":["../../../src/components/grid-pagination/grid-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Event, EventEmitter,\n    h,\n    Host,\n    Prop\n} from '@stencil/core';\nimport {\n    WcsGridPaginationChangeEventDetails\n} from '../grid/grid-interface';\nimport { SelectChangeEventDetail } from '../select/select-interface';\nimport { GridPaginationArrow } from './grid-pagination-arrow';\n\n/**\n * The grid pagination is a subcomponent of `wcs-grid`, slotted in `grid-pagination` under the `<table>` element.\n */\n@Component({\n    tag: 'wcs-grid-pagination',\n    styleUrl: 'grid-pagination.scss',\n    shadow: true\n})\nexport class GridPagination implements ComponentInterface {\n    static readonly INDEX_FIRST_PAGE: number = 0;\n    /**\n     * Set the available page sizes in the pagination dropdown on the left.\n     */\n    @Prop() availablePageSizes: number[] = [10, 20, 50];\n    /**\n     * The current page of the pagination. First page starts at index 0.\n     */\n    @Prop() currentPage: number = GridPagination.INDEX_FIRST_PAGE;\n    /**\n     * Maximum number of elements shown per page.  \n     * Default is the first value of `availablePageSizes`.\n     */\n    @Prop() pageSize: number = this.availablePageSizes[0];\n    /**\n     * Total elements in the grid.  \n     * - **Grid in `Server mode`** : You have to set `itemsCount` = your total data length.  \n     * - **Grid not in Server mode** : Do not set it manually : itemsCount is set and updated every pagination refresh.\n     */\n    @Prop() itemsCount: number = 0;\n    /**\n     * Max number of pages.  \n     * - **Grid in `Server mode`** : You have to set `pageCount` = `itemsCount` divided by `pageSize`.  \n     * - **Grid not in Server mode** : Do not set it manually : pageCount is set and updated every pagination refresh.\n     */\n    @Prop() pageCount: number = 1;\n    /**\n     * Event emitted when the pagination changes.\n     */\n    @Event() wcsGridPaginationChange!: EventEmitter<WcsGridPaginationChangeEventDetails>;\n\n    private lastPage(): void {\n        this.currentPage = this.pageCount - 1;\n        this.emitPaginationChange();\n    }\n\n    private nextPage(): void {\n        if (this.canGoToNextPage()) {\n            this.currentPage++;\n            this.emitPaginationChange();\n        }\n    }\n\n    private canGoToNextPage(): boolean {\n        return this.currentPage + 1 < this.pageCount;\n    }\n\n    private previousPage(): void {\n        if (this.canGoToPreviousPage()) {\n            this.currentPage--;\n            this.emitPaginationChange();\n        }\n    }\n\n    private canGoToPreviousPage(): boolean {\n        return this.currentPage > 0;\n    }\n\n    private firstPage(): void {\n        this.currentPage = 0;\n        this.emitPaginationChange();\n    }\n\n    private onChangePagesize(event: CustomEvent<SelectChangeEventDetail>): void {\n        this.pageSize = event.detail.value;\n        if (this.currentPage + 1 > this.pageSize) {\n            this.currentPage = 0;\n        }\n        this.emitPaginationChange();\n    }\n\n    private emitPaginationChange(): void {\n        this.wcsGridPaginationChange.emit({\n            pagination: {\n                currentPage: this.currentPage,\n                pageSize: this.pageSize,\n                itemsCount: this.itemsCount,\n                pageCount: this.pageCount\n            }\n        });\n    }\n\n    render(): any {\n        return (<Host slot=\"grid-pagination\">\n            <div class=\"container\">\n                <div class=\"page-size\">\n                    <wcs-select placeholder=\"Eléments par page\" class=\"available-page-sizes\" value={this.pageSize} onWcsChange={this.onChangePagesize.bind(this)}>\n                        {\n                            this.availablePageSizes.map((pageSize) =>\n                                <wcs-select-option value={pageSize}>{pageSize}</wcs-select-option>\n                            )\n                        }\n                    </wcs-select>\n                    <span>&nbsp;éléments par page</span>\n                </div>\n\n                <div class=\"items-count\">\n                    <span>{this.itemsCount} éléments</span>\n                </div>\n\n                <div class=\"page-management\">\n                    <span class=\"pagination-arrow\" onClick={this.firstPage.bind(this)}>\n                        <GridPaginationArrow active={this.canGoToPreviousPage()} order=\"previous\" double></GridPaginationArrow>\n                    </span>\n                    <span class=\"pagination-arrow\" onClick={this.previousPage.bind(this)}>\n                        <GridPaginationArrow active={this.canGoToPreviousPage()} order=\"previous\"></GridPaginationArrow>\n                    </span>\n\n                    <span>{this.currentPage + 1} / {this.pageCount}</span>\n\n                    <span class=\"pagination-arrow\" onClick={this.nextPage.bind(this)}>\n                        <GridPaginationArrow active={this.canGoToNextPage()} order=\"next\"></GridPaginationArrow>\n                    </span>\n                    <span class=\"pagination-arrow\" onClick={this.lastPage.bind(this)}>\n                        <GridPaginationArrow active={this.canGoToNextPage()} order=\"next\" double></GridPaginationArrow>\n                    </span>\n                </div>\n            </div>\n        </Host>)\n    }\n}\n"]}
+{"version":3,"file":"grid-pagination.js","sourceRoot":"","sources":["../../../src/components/grid-pagination/grid-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Event, EventEmitter,\n    h,\n    Host,\n    Prop\n} from '@stencil/core';\nimport {\n    WcsGridPaginationChangeEventDetails\n} from '../grid/grid-interface';\nimport { SelectChangeEventDetail } from '../select/select-interface';\nimport { GridPaginationArrow } from './grid-pagination-arrow';\n\n/**\n * The grid pagination is a subcomponent of `wcs-grid`, slotted in `grid-pagination` under the `<table>` element.\n */\n@Component({\n    tag: 'wcs-grid-pagination',\n    styleUrl: 'grid-pagination.scss',\n    shadow: true\n})\nexport class GridPagination implements ComponentInterface {\n    static readonly INDEX_FIRST_PAGE: number = 0;\n    /**\n     * Set the available page sizes in the pagination dropdown on the left.\n     */\n    @Prop() availablePageSizes: number[] = [10, 20, 50];\n    /**\n     * The current page of the pagination. First page starts at index 0.\n     */\n    @Prop() currentPage: number = GridPagination.INDEX_FIRST_PAGE;\n    /**\n     * Maximum number of elements shown per page.  \n     * Default is the first value of `availablePageSizes`.\n     */\n    @Prop() pageSize: number = this.availablePageSizes[0];\n    /**\n     * Total elements in the grid.  \n     * - **Grid in `Server mode`** : You have to set `itemsCount` = your total data length.  \n     * - **Grid not in Server mode** : Do not set it manually : itemsCount is set and updated every pagination refresh.\n     */\n    @Prop() itemsCount: number = 0;\n    /**\n     * Max number of pages.  \n     * - **Grid in `Server mode`** : You have to set `pageCount` = `itemsCount` divided by `pageSize`.  \n     * - **Grid not in Server mode** : Do not set it manually : pageCount is set and updated every pagination refresh.\n     */\n    @Prop() pageCount: number = 1;\n    /**\n     * Event emitted when the pagination changes.\n     */\n    @Event() wcsGridPaginationChange!: EventEmitter<WcsGridPaginationChangeEventDetails>;\n\n    private lastPage(): void {\n        this.currentPage = this.pageCount - 1;\n        this.emitPaginationChange();\n    }\n\n    private nextPage(): void {\n        if (this.canGoToNextPage()) {\n            this.currentPage++;\n            this.emitPaginationChange();\n        }\n    }\n\n    private canGoToNextPage(): boolean {\n        return this.currentPage + 1 < this.pageCount;\n    }\n\n    private previousPage(): void {\n        if (this.canGoToPreviousPage()) {\n            this.currentPage--;\n            this.emitPaginationChange();\n        }\n    }\n\n    private canGoToPreviousPage(): boolean {\n        return this.currentPage > 0;\n    }\n\n    private firstPage(): void {\n        this.currentPage = 0;\n        this.emitPaginationChange();\n    }\n\n    private onChangePagesize(event: CustomEvent<SelectChangeEventDetail>): void {\n        this.pageSize = event.detail.value;\n        if (this.currentPage + 1 > this.pageSize) {\n            this.currentPage = 0;\n        }\n        this.emitPaginationChange();\n    }\n\n    private emitPaginationChange(): void {\n        this.wcsGridPaginationChange.emit({\n            pagination: {\n                currentPage: this.currentPage,\n                pageSize: this.pageSize,\n                itemsCount: this.itemsCount,\n                pageCount: this.pageCount\n            }\n        });\n    }\n\n    render(): any {\n        return (<Host slot=\"grid-pagination\">\n            <div class=\"container\">\n                <div class=\"page-size\">\n                    <wcs-select placeholder=\"Eléments par page\"\n                                class=\"available-page-sizes\"\n                                aria-labelledby=\"elements-per-page-number elements-per-page-text\"\n                                value={this.pageSize}\n                                onWcsChange={this.onChangePagesize.bind(this)}>\n                        {\n                            this.availablePageSizes.map((pageSize) =>\n                                <wcs-select-option value={pageSize}>{pageSize}</wcs-select-option>\n                            )\n                        }\n                    </wcs-select>\n                    <span id=\"elements-per-page-number\" hidden>{this.pageSize}</span>\n                    <span id=\"elements-per-page-text\">&nbsp;éléments par page</span>\n                </div>\n\n                <div class=\"items-count\">\n                    <span>{this.itemsCount} éléments</span>\n                </div>\n\n                <nav aria-label=\"pagination\">\n                    <ul class=\"page-management\">\n                        <li class=\"pagination-arrow\" onClick={this.firstPage.bind(this)}>\n                            <GridPaginationArrow active={this.canGoToPreviousPage()} order=\"previous\" double></GridPaginationArrow>\n                        </li>\n                        <li class=\"pagination-arrow\" onClick={this.previousPage.bind(this)}>\n                            <GridPaginationArrow active={this.canGoToPreviousPage()} order=\"previous\"></GridPaginationArrow>\n                        </li>\n    \n                        <li class=\"pagination-counter\">\n                            <span aria-label={`Page ${this.currentPage + 1} sur ${this.pageCount}`} aria-current=\"page\">\n                                {this.currentPage + 1} / {this.pageCount}\n                            </span>\n                        </li>\n    \n                        <li class=\"pagination-arrow\" onClick={this.nextPage.bind(this)}>\n                            <GridPaginationArrow active={this.canGoToNextPage()} order=\"next\"></GridPaginationArrow>\n                        </li>\n                        <li class=\"pagination-arrow\" onClick={this.lastPage.bind(this)}>\n                            <GridPaginationArrow active={this.canGoToNextPage()} order=\"next\" double></GridPaginationArrow>\n                        </li>\n                    </ul>\n                </nav>\n            </div>\n        </Host>)\n    }\n}\n"]}

package/dist/collection/components/input/input.js

@@ -1,8 +1,20 @@
 import { Build, h, Host } from '@stencil/core';
-import { debounceEvent, findItemLabel, inheritAttributes } from '../../utils/helpers';
+import { debounceEvent, findItemLabel, inheritAriaAttributes, inheritAttributes } from '../../utils/helpers';
 import { isWcsInputSize, WcsInputSizeValues } from './input-interface';
 /**
- * Mainly inspired from Ionic Input Component
+ * The input component is a form control that accepts a single line of text.
+ * Implementation mainly inspired from Ionic Input Component.
+ *
+ *
+ * <details>
+ *     <summary>Accessibility guidelines 💡</summary>
+ *     > - Provide a `<wcs-label>` next to the input
+ *     > - Use the `disabled` prop to add the HTML `disabled` attribute to the `input`
+ *     > - Use the `readonly` prop to add the HTML `readonly` attribute to the `input`
+ *     > - Use the `autofocus` prop to add the HTML `autofocus` attribute to the `input`. Use it if you want your input focus
+ *     automatically when the page load
+ *     > - Adapt the `type` to lets user enter information more easily (_ex: `type="number"` for an input which only accept numbers entry_)
+ * </details>
  */
 export class Input {
   constructor() {
@@ -17,6 +29,9 @@ export class Input {
       }
       this.wcsInput.emit(ev);
     };
+    this.onChange = (_) => {
+      this.wcsChange.emit({ value: this.nativeInput.value });
+    };
     this.onBlur = (ev) => {
       this.hasFocus = false;
       this.focusChanged();
@@ -97,15 +112,8 @@ export class Input {
   debounceChanged() {
     this.wcsChange = debounceEvent(this.wcsChange, this.debounce);
   }
-  /**
-   * Update the native input element when the value changes
-   */
-  valueChanged() {
-    var _a;
-    this.wcsChange.emit({ value: (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString() });
-  }
   componentWillLoad() {
-    this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);
+    this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, ['tabindex', 'title']));
     if (!isWcsInputSize(this.size)) {
       console.error(`Invalid size value for wcs-input : "${this.size}". Must be one of "${WcsInputSizeValues.join(', ')}"`);
       this.size = "m"; // Default fallback value
@@ -151,13 +159,18 @@ export class Input {
   getInputElement() {
     return Promise.resolve(this.nativeInput);
   }
+  async setAriaAttribute(attr, value) {
+    if (this.nativeInput) {
+      this.nativeInput.setAttribute(attr, value);
+    }
+  }
   shouldClearOnEdit() {
     const { type, clearOnEdit } = this;
     return (clearOnEdit === undefined)
       ? type === 'password'
       : clearOnEdit;
   }
-  getValue() {
+  getValueAsString() {
     return typeof this.value === 'number' ? this.value.toString() :
       (this.value || '').toString();
   }
@@ -168,7 +181,7 @@ export class Input {
     }
   }
   hasValue() {
-    return this.getValue().length > 0;
+    return this.getValueAsString().length > 0;
   }
   passwordRevealIconClick() {
     this.passwordReveal = !this.passwordReveal;
@@ -177,13 +190,13 @@ export class Input {
     this.iconPassword = this.passwordReveal ? 'visibility_off' : 'visibility';
   }
   render() {
-    const value = this.getValue();
+    const value = this.getValueAsString();
     const labelId = this.inputId + '-lbl';
     const label = findItemLabel(this.el);
     if (label) {
       label.id = labelId;
     }
-    return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, "data-has-prefix": !!this.prefixLabel, "data-has-suffix": !!this.suffixLabel }, this.prefixLabel ? (h("span", { class: "prefix", part: "prefix" }, this.prefixLabel)) : null, this.icon ? (h("wcs-mat-icon", { icon: this.icon, size: "m" })) : null, h("input", Object.assign({ class: "native-input", ref: input => this.nativeInput = input, "aria-labelledby": label ? labelId : null, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.passwordReveal ? 'text' : this.type, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown }, this.inheritedAttributes)), this.type === "password" ? (h("wcs-mat-icon", { class: "toggle_password", icon: this.iconPassword, size: "m", onClick: () => this.passwordRevealIconClick() })) : null, this.suffixLabel ? (h("span", { class: "suffix", part: "suffix" }, this.suffixLabel)) : null));
+    return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, "data-has-prefix": !!this.prefixLabel, "data-has-suffix": !!this.suffixLabel }, this.prefixLabel ? (h("span", { class: "prefix", part: "prefix" }, this.prefixLabel)) : null, this.icon ? (h("wcs-mat-icon", { icon: this.icon, size: "m" })) : null, h("input", Object.assign({ class: "native-input", ref: input => this.nativeInput = input, "aria-labelledby": label ? labelId : null, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.passwordReveal ? 'text' : this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown }, this.inheritedAttributes)), this.type === "password" ? (h("wcs-mat-icon", { class: "toggle_password", icon: this.iconPassword, size: "m", onClick: () => this.passwordRevealIconClick() })) : null, this.suffixLabel ? (h("span", { class: "suffix", part: "suffix" }, this.suffixLabel)) : null));
   }
   static get is() { return "wcs-input"; }
   static get encapsulation() { return "shadow"; }
@@ -233,7 +246,7 @@ export class Input {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If the value of the type attribute is `\"file\"`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers."
+          "text": "If the value of the type attribute is `\"file\"`, then this attribute will indicate the types of files that the\nserver accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers."
         },
         "attribute": "accept",
         "reflect": false
@@ -345,7 +358,7 @@ export class Input {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `\"password\"`, `false` for all other types."
+          "text": "If `true`, the value will be cleared after focus upon edit.\nDefaults to `true` when `type` is `\"password\"`, `false` for all other types."
         },
         "attribute": "clear-on-edit",
         "reflect": false
@@ -362,7 +375,7 @@ export class Input {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Set the amount of time, in milliseconds, to wait to trigger the `wcsChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`."
+          "text": "Set the amount of time, in milliseconds, to wait to trigger the `wcsChange` event after each keystroke.\nThis also impacts form bindings such as `ngModel` or `v-model`."
         },
         "attribute": "debounce",
         "reflect": false,
@@ -523,7 +536,7 @@ export class Input {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter."
+          "text": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute\nspecifies the maximum number of characters that the user can enter."
         },
         "attribute": "maxlength",
         "reflect": false
@@ -557,7 +570,7 @@ export class Input {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter."
+          "text": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute\nspecifies the minimum number of characters that the user can enter."
         },
         "attribute": "minlength",
         "reflect": false
@@ -574,7 +587,7 @@ export class Input {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"` or `\"file\"`, otherwise it is ignored."
+          "text": "If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to\n`\"email\"` or `\"file\"`, otherwise it is ignored."
         },
         "attribute": "multiple",
         "reflect": false
@@ -609,7 +622,7 @@ export class Input {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, or `\"password\"`, otherwise it is ignored. When the type attribute is `\"date\"`, `pattern` will only be used in browsers that do not support the `\"date\"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information."
+          "text": "A regular expression that the value is checked against. The pattern must match the entire value, not just some\nsubset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value\nof the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, or `\"password\"`, otherwise\nit is ignored. When the type attribute is `\"date\"`, `pattern` will only be used in browsers that do not support\nthe `\"date\"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for\nmore information."
         },
         "attribute": "pattern",
         "reflect": false
@@ -697,7 +710,7 @@ export class Input {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Specifies the state of the input. By default the input is in an normal state but you can to set it to 'error' state if the data given by the user is not valid."
+          "text": "Specifies the state of the input. By default the input is in an normal state but you can to set it to 'error'\nstate if the data given by the user is not valid."
         },
         "attribute": "state",
         "reflect": true,
@@ -778,7 +791,7 @@ export class Input {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted when a keyboard input occurred."
+          "text": "Emitted when a keyboard input occurred. See https://developer.mozilla.org/en-US/docs/Web/Events/input"
         },
         "complexType": {
           "original": "KeyboardEvent",
@@ -797,7 +810,7 @@ export class Input {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted when the value has changed."
+          "text": "Emitted when the value has changed. See https://developer.mozilla.org/en-US/docs/Web/Events/change"
         },
         "complexType": {
           "original": "InputChangeEventDetail",
@@ -866,7 +879,7 @@ export class Input {
           "text": "",
           "tags": [{
               "name": "deprecated",
-              "text": "use the native focus method instead  \nSets focus on the native `input` in `wcs-input`."
+              "text": "use the native focus method instead\nSets focus on the native `input` in `wcs-input`."
             }]
         }
       },
@@ -907,6 +920,32 @@ export class Input {
           "text": "Returns the native `<input>` element used under the hood.",
           "tags": []
         }
+      },
+      "setAriaAttribute": {
+        "complexType": {
+          "signature": "(attr: AriaAttributeName, value: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "AriaAttributeName": {
+              "location": "import",
+              "path": "../../utils/mutable-aria-attribute"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
     };
   }
@@ -915,9 +954,6 @@ export class Input {
     return [{
         "propName": "debounce",
         "methodName": "debounceChanged"
-      }, {
-        "propName": "value",
-        "methodName": "valueChanged"
       }, {
         "propName": "passwordReveal",
         "methodName": "onPasswordRevealChange"