wcs-core 4.0.2 → 4.1.0

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

@@ -64,7 +64,7 @@ export class FormField {
   }
   initSpiedElement() {
     var _a, _b;
-    const SUPPORTED_COMPONENTS = ['wcs-input', 'wcs-select', 'wcs-textarea', 'wcs-radio-group', 'wcs-switch', 'wcs-checkbox', 'wcs-native-select'];
+    const SUPPORTED_COMPONENTS = ['wcs-input', 'wcs-select', 'wcs-textarea', 'wcs-radio-group', 'wcs-switch', 'wcs-checkbox', 'wcs-native-select', 'wcs-counter'];
     this.spiedElement = (_a = this.el.shadowRoot.querySelector('slot:not([name])')) === null || _a === void 0 ? void 0 : _a.assignedElements().filter(n => [...SUPPORTED_COMPONENTS, 'SLOT'].map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0];
     // If the component is used in another web component
     if (((_b = this.spiedElement) === null || _b === void 0 ? void 0 : _b.tagName) === 'SLOT') {

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'];\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';\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"]}

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

@@ -1,11 +1,19 @@
 import { forceUpdate, h, Host } from '@stencil/core';
 import { getSortOrderInteger } from './grid-interface';
-import _ from 'lodash';
 import { v4 as uuid } from 'uuid';
+import { cloneDeep, isEqual, get } from 'lodash-es';
 import { GridPagination } from '../grid-pagination/grid-pagination';
+/**
+ * The grid component is a complex component used as an HTML table to display collections of data.
+ *
+ * @cssprop --wcs-grid-highlight-color - Color for selected rows
+ * @cssprop --wcs-grid-column-border-left - Left border of all grid headers
+ * @slot grid-column - The slot containing the column of the grid in the `<thead>`
+ * @slot grid-pagination - The slot containing the pagination of the grid below the `<table>`
+ */
 export class Grid {
   constructor() {
-    this.serverMode = undefined;
+    this.serverMode = false;
     this.data = undefined;
     this.loading = undefined;
     this.selectionConfig = 'none';
@@ -32,7 +40,7 @@ export class Grid {
     if (this.selectionConfig === 'single') {
       this.rows.map(r => r.selected = false);
       for (const row of this.rows) {
-        if (_.isEqual(row.data, values)) {
+        if (isEqual(row.data, values)) {
           row.selected = true;
           break; // only one line can be selected
         }
@@ -41,12 +49,12 @@ export class Grid {
     else if (this.selectionConfig === 'multiple') {
       this.rows.map(r => r.selected = false);
       for (const row of this.rows) {
-        if (values.find(x => _.isEqual(x, row.data))) {
+        if (values.find(x => isEqual(x, row.data))) {
           row.selected = true;
         }
       }
     }
-    this.rows = _.cloneDeep(this.rows);
+    this.rows = cloneDeep(this.rows);
   }
   wcsGridRowToWcsGridRowData(row) {
     return { selected: row.selected, page: row.page, data: row.data };
@@ -54,6 +62,7 @@ export class Grid {
   updateGridRows(data) {
     const rows = [];
     if (data && this.columns) {
+      // eslint-disable-next-line @typescript-eslint/prefer-for-of
       for (let i = 0; i < data.length; i++) {
         const row = {
           uuid: uuid(),
@@ -63,7 +72,7 @@ export class Grid {
         };
         for (const column of this.columns) {
           row.cells.push({
-            content: _.get(data[i], column.path),
+            content: get(data[i], column.path),
             column,
             formatter: column.formatter
           });
@@ -127,14 +136,14 @@ export class Grid {
    */
   sortBy(colmun) {
     if (colmun.sortFn) {
-      this.rows = _.cloneDeep(this.rows)
+      this.rows = cloneDeep(this.rows)
         .sort((a, b) => colmun.sortFn(a.data, b.data, colmun) * getSortOrderInteger(colmun.sortOrder));
     }
     else {
-      this.rows = _.cloneDeep(this.rows)
+      this.rows = cloneDeep(this.rows)
         .sort((a, b) => {
         const path = colmun.path;
-        return ((_.get(a.data, path) < _.get(b.data, path)) ? -1 : (_.get(a.data, path) > _.get(b.data, path)) ? 1 : 0) * getSortOrderInteger(colmun.sortOrder);
+        return ((get(a.data, path) < get(b.data, path)) ? -1 : (get(a.data, path) > get(b.data, path)) ? 1 : 0) * getSortOrderInteger(colmun.sortOrder);
       });
     }
   }
@@ -151,7 +160,7 @@ export class Grid {
       else if (this.paginationEl.pageCount > 0 && this.paginationEl.currentPage + 1 > this.paginationEl.pageCount) {
         this.paginationEl.currentPage = this.paginationEl.pageCount - 1;
       }
-      const rows = _.cloneDeep(this.rows);
+      const rows = cloneDeep(this.rows);
       rows.forEach((row, index) => row.page = Math.floor(index / this.paginationEl.pageSize));
       this.rows = [...rows];
     }
@@ -177,14 +186,14 @@ export class Grid {
     if (this.selectionConfig !== 'single' || row.selected) {
       this.wcsGridSelectionChange.emit({ row: this.wcsGridRowToWcsGridRowData(row) });
     }
-    this.rows = _.cloneDeep(this.rows);
+    this.rows = cloneDeep(this.rows);
   }
   selectAllRows() {
     const rows = this.getRowsForCurrentPage();
     const selected = !this.allRowsAreSelected();
     rows.map(r => r.selected = selected);
     this.wcsGridAllSelectionChange.emit({ rows: selected ? rows.map(row => this.wcsGridRowToWcsGridRowData(row)) : [] });
-    this.rows = _.cloneDeep(this.rows);
+    this.rows = cloneDeep(this.rows);
   }
   allRowsAreSelected() {
     const rows = this.getRowsForCurrentPage();
@@ -264,10 +273,11 @@ export class Grid {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "True to manage sort and pagination with a backend server, default: false"
+          "text": "Manage sort and pagination with a backend server when set to `true`"
         },
         "attribute": "server-mode",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "false"
       },
       "data": {
         "type": "unknown",
@@ -281,7 +291,7 @@ export class Grid {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Contains the data to display in the table from a js object"
         }
       },
       "loading": {
@@ -296,7 +306,7 @@ export class Grid {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Flag to display spinner during data loading"
+          "text": "Flag to display a spinner during data loading"
         },
         "attribute": "loading",
         "reflect": false
@@ -318,7 +328,7 @@ export class Grid {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Used to manage grid's row selection"
+          "text": "Used to manage grid's row selection.  \n\"none\": no row can be selected.  \n\"multiple\": several rows can be selected.  \n\"single\": one row only can be selected."
         },
         "attribute": "selection-config",
         "reflect": false,
@@ -336,7 +346,7 @@ export class Grid {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Set the selected items"
+          "text": "Set the selected items (rows)"
         },
         "attribute": "selected-items",
         "reflect": false,
@@ -354,7 +364,7 @@ export class Grid {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Automatically set by the component to reference the wcs-grid-pagination HTML element by its id."
         },
         "attribute": "wcs-grid-pagination-id",
         "reflect": false
@@ -371,7 +381,7 @@ export class Grid {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Name of the object's key that will be used to display the cells whose keyValue attribute matches to the\nobject's value for this key."
+          "text": "Name of the object's key that will be used to display the cells whose `keyValue` attribute matches to the\nobject's value for this key."
         },
         "attribute": "row-id-path",
         "reflect": false

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

@@ -1 +1 @@
-{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../../src/components/grid/grid.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentDidLoad,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    forceUpdate,\n    h,\n    Host,\n    Listen,\n    Prop,\n    State,\n    VNode,\n    Watch\n} from '@stencil/core';\nimport {\n    getSortOrderInteger,\n    HyperFunc,\n    WcsGridAllRowSelectedEventDetails,\n    WcsGridCell,\n    WcsGridColumnSortChangeEventDetails,\n    WcsGridPaginationChangeEventDetails,\n    WcsGridRow,\n    WcsGridRowData,\n    WcsGridRowSelectedEventDetails,\n    WcsGridSelectionConfig\n} from './grid-interface';\nimport _ from 'lodash';\nimport { v4 as uuid } from 'uuid';\nimport { GridPagination } from '../grid-pagination/grid-pagination';\n\n@Component({\n    tag: 'wcs-grid',\n    styleUrl: 'grid.scss',\n    shadow: true\n})\nexport class Grid implements ComponentInterface, ComponentDidLoad {\n    @Element() private el!: HTMLWcsGridElement;\n    /**\n     * True to manage sort and pagination with a backend server, default: false\n     */\n    @Prop() serverMode: boolean;\n    @Prop() data: any[];\n    /**\n     * Flag to display spinner during data loading\n     */\n    @Prop() loading: boolean;\n    /**\n     * Used to manage grid's row selection\n     */\n    @Prop() selectionConfig: WcsGridSelectionConfig = 'none';\n    /**\n     * Set the selected items\n     */\n    @Prop() selectedItems: any | any[] = [];\n    @Prop() wcsGridPaginationId: string;\n    /**\n     * Name of the object's key that will be used to display the cells whose keyValue attribute matches to the\n     * object's value for this key.\n     */\n    @Prop() rowIdPath: string;\n    @State() private columns: HTMLWcsGridColumnElement[];\n    @State() private paginationEl: HTMLWcsGridPaginationElement;\n    /**\n     * Rows to display, contains user data and meta data\n     */\n    @State() private rows: WcsGridRow[] = [];\n    /**\n     * Event emitted when a row is selected or unselected\n     */\n    @Event() wcsGridSelectionChange!: EventEmitter<WcsGridRowSelectedEventDetails>;\n    /**\n     * Event emitted when all rows are selected or unselected\n     */\n    @Event() wcsGridAllSelectionChange!: EventEmitter<WcsGridAllRowSelectedEventDetails>;\n\n    @Watch('data')\n    onDataChange(newValue: any[]): void {\n        this.updateGridRows(newValue);\n        this.refreshSort(false);\n    }\n\n    @Watch('selectedItems')\n    onSelectedItemsPropertyChange(newValue: any | any[]) {\n        this.updateSelectionWithValues(newValue);\n    }\n\n    @Listen('wcsHiddenChange')\n    onHiddenColumnChange(): void {\n        // We use forceUpdate because the fact of hiding a column or not does not modify the internal structure of the grid (WcsGridRow).\n        // Hide a column only impacts the way it is rendered but the grid-column remains in the dom and in our internal model.\n        forceUpdate(this);\n    }\n\n    private updateSelectionWithValues(values: any | any[]) {\n        if (this.selectionConfig === 'single') {\n            this.rows.map(r => r.selected = false);\n            for (const row of this.rows) {\n                if (_.isEqual(row.data, values)) {\n                    row.selected = true;\n                    break; // only one line can be selected\n                }\n            }\n        } else if (this.selectionConfig === 'multiple') {\n            this.rows.map(r => r.selected = false);\n            for (const row of this.rows) {\n                if (values.find(x => _.isEqual(x, row.data))) {\n                    row.selected = true;\n                }\n            }\n        }\n        this.rows = _.cloneDeep(this.rows);\n    }\n\n    private wcsGridRowToWcsGridRowData(row: WcsGridRow): WcsGridRowData {\n        return {selected: row.selected, page: row.page, data: row.data};\n    }\n\n    private updateGridRows(data: any[]): void {\n        const rows: WcsGridRow[] = [];\n        if (data && this.columns) {\n            for (let i = 0; i < data.length; i++) {\n                const row: WcsGridRow = {\n                    uuid: uuid(),\n                    data: data[i],\n                    selected: false,\n                    cells: []\n                };\n                for (const column of this.columns) {\n                    row.cells.push({\n                        content: _.get(data[i], column.path),\n                        column,\n                        formatter: column.formatter\n                    })\n                }\n                rows.push(row);\n            }\n            this.rows = rows;\n            this.updatePageIndex();\n        }\n    }\n\n    componentDidLoad(): void {\n        this.columns = this.getGridColumnsFromTemplate();\n        this.paginationEl = this.wcsGridPaginationId\n            ? document.getElementById(this.wcsGridPaginationId) as HTMLWcsGridPaginationElement\n            : this.getGridPaginationsFromTemplate()[0];\n        this.updateGridRows(this.data);\n        if (this.selectedItems) {\n            this.updateSelectionWithValues(this.selectedItems);\n        }\n        this.refreshSort(true);\n    }\n\n    /**\n     * Handle existing column's filters (defined before the grid is instantiated)\n     * @private\n     */\n    private refreshSort(refreshOthersColmumnsSortOrderState: boolean) {\n        //fixme: why the column property can be null or undefined?\n        if (this.columns) {\n            const [first, ...other] = this.columns.filter(c => c.sortOrder !== 'none');\n            if (first && !this.serverMode) {\n                this.sortBy(first);\n            }\n            refreshOthersColmumnsSortOrderState && this.disableSortOrderForColumns(other);\n        }\n    }\n\n    private disableSortOrderForColumns(columns: HTMLWcsGridColumnElement[] | null | undefined): void {\n        columns?.forEach(c => c.sortOrder = 'none');\n    }\n\n    private getGridColumnsFromTemplate(): HTMLWcsGridColumnElement[] {\n        const slotted = this.el.shadowRoot.querySelector('slot[name=\"grid-column\"]') as HTMLSlotElement;\n        return slotted.assignedElements() as any as HTMLWcsGridColumnElement[];\n    }\n\n    private getGridPaginationsFromTemplate(): HTMLWcsGridPaginationElement[] {\n        const slotted = this.el.shadowRoot.querySelector('slot[name=\"grid-pagination\"]') as HTMLSlotElement;\n        return slotted.assignedElements() as any as HTMLWcsGridPaginationElement[];\n    }\n\n    @Listen('wcsSortChange')\n    sortChangeEventHandler(event: CustomEvent<WcsGridColumnSortChangeEventDetails>): void {\n        if (event.detail.order === 'none') return;\n        // We keep only one active sort column\n        this.disableSortOrderForColumns(this.columns.filter(c => c !== event.detail.column));\n        if (this.serverMode) return;\n        this.sortBy(event.detail.column);\n        this.updatePageIndex();\n    }\n\n    /**\n     * Sorts the grid rows according to the given column's configuration\n     * @param colmun Column from which to extract the sorting configuration\n     * @private\n     */\n    private sortBy(colmun: HTMLWcsGridColumnElement) {\n        if (colmun.sortFn) {\n            this.rows = _.cloneDeep(this.rows)\n                .sort((a: any, b: any) => colmun.sortFn(a.data, b.data, colmun) * getSortOrderInteger(colmun.sortOrder));\n        } else {\n            this.rows = _.cloneDeep(this.rows)\n                .sort((a: any, b: any) => {\n                    const path = colmun.path;\n                    return ((_.get(a.data, path) < _.get(b.data, path)) ? -1 : (_.get(a.data, path) > _.get(b.data, path)) ? 1 : 0) * getSortOrderInteger(colmun.sortOrder);\n                });\n        }\n    }\n\n    /**\n     * Update the page's number of all rows\n     */\n    private updatePageIndex(): void {\n        if (!this.serverMode && this.paginationEl) {\n            this.paginationEl.itemsCount = this.data.length;\n            this.paginationEl.pageCount = Math.ceil(this.data.length / this.paginationEl.pageSize);\n\n            if (this.paginationEl.pageCount <= 1) {\n                this.paginationEl.currentPage = GridPagination.INDEX_FIRST_PAGE;\n            } else if (this.paginationEl.pageCount > 0 && this.paginationEl.currentPage + 1 > this.paginationEl.pageCount) {\n                this.paginationEl.currentPage = this.paginationEl.pageCount - 1;\n            }\n\n            const rows = _.cloneDeep(this.rows);\n            rows.forEach((row: WcsGridRow, index: number) =>\n                row.page = Math.floor(index / this.paginationEl.pageSize)\n            );\n            this.rows = [...rows];\n        }\n    }\n\n    @Listen('wcsGridPaginationChange')\n    paginationChangeEventHandler(): void {\n        this.onPaginationChange();\n    }\n\n    @Listen('wcsGridPaginationChange', {target: 'window'})\n    paginationChangeEventHandlerOutside(event: CustomEvent<WcsGridPaginationChangeEventDetails>): void {\n        if (this.wcsGridPaginationId && this.wcsGridPaginationId === (event.target as HTMLElement).id) {\n            this.onPaginationChange();\n        }\n    }\n\n    private onPaginationChange(): void {\n        if (this.serverMode) return;\n        this.updatePageIndex();\n    }\n\n    private onRowSelection(row: WcsGridRow): void {\n        if (this.selectionConfig === 'single') {\n            this.rows.filter(r => r.uuid !== row.uuid).map(r => r.selected = false);\n        }\n        row.selected = !row.selected;\n        if (this.selectionConfig !== 'single' || row.selected) {\n            this.wcsGridSelectionChange.emit({row: this.wcsGridRowToWcsGridRowData(row)});\n        }\n        this.rows = _.cloneDeep(this.rows);\n    }\n\n    private selectAllRows(): void {\n        const rows = this.getRowsForCurrentPage();\n        const selected = !this.allRowsAreSelected();\n        rows.map(r => r.selected = selected);\n        this.wcsGridAllSelectionChange.emit({rows: selected ? rows.map(row => this.wcsGridRowToWcsGridRowData(row)) : []});\n        this.rows = _.cloneDeep(this.rows);\n    }\n\n    private allRowsAreSelected(): boolean {\n        const rows = this.getRowsForCurrentPage();\n        return rows.length > 0 && rows.filter(row => row.selected).length === rows.length;\n    }\n\n    private getRowsForCurrentPage(): WcsGridRow[] {\n        if (this.paginationEl) {\n            return this.rows.filter(row => row.page === this.paginationEl.currentPage);\n        }\n        return this.rows;\n    }\n\n    renderSelectionColumn(row: WcsGridRow): any {\n        switch (this.selectionConfig) {\n            case 'none':\n                return;\n            case 'single':\n                return <td>\n                    <wcs-radio checked={row.selected} onClick={this.onRowSelection.bind(this, row)}/>\n                </td>;\n            case 'multiple':\n                return <td>\n                    <wcs-checkbox checked={row.selected} onWcsChange={this.onRowSelection.bind(this, row)}/>\n                </td>;\n        }\n    }\n\n    private getCellContent(row: WcsGridRow, cell: WcsGridCell): HTMLElement | HTMLElement[] | string | void {\n        if (cell.formatter) {\n            return cell.formatter(\n                (h as unknown) as HyperFunc<VNode>,\n                cell.column,\n                this.wcsGridRowToWcsGridRowData(row)\n            );\n        }\n        return cell.content;\n    }\n\n    private totalColumnCount() {\n        if (!this.columns) {\n            return 0;\n        }\n        return this.columns.length + (this.selectionConfig === 'none' ? 0 : 1);\n    }\n\n    render(): any {\n        return (\n            <Host>\n                {\n                    <table>\n                        <thead>\n                        {\n                            this.selectionConfig === 'none' ? ''\n                                : <th class=\"wcs-grid-selection-column\">\n                                    {\n                                        this.selectionConfig === 'single' ? '' :\n                                            <wcs-checkbox checked={this.allRowsAreSelected()}\n                                                          onWcsChange={this.selectAllRows.bind(this)}/>\n                                    }\n                                </th>\n                        }\n                        <slot name=\"grid-column\"></slot>\n                        </thead>\n                        <tbody>\n                        {\n                            this.loading\n                                ? <tr>\n                                    <td colSpan={this.totalColumnCount()} class=\"loading\">\n                                        <wcs-spinner></wcs-spinner>\n                                    </td>\n                                </tr>\n                                : this.rows\n                                    ?.filter(row => this.serverMode || !this.paginationEl || row.page === this.paginationEl.currentPage)\n                                    .map(row =>\n                                        this.renderRow(row)\n                                    )\n                        }\n                        </tbody>\n                    </table>\n                }\n                <slot name=\"grid-pagination\"></slot>\n            </Host>\n        );\n    }\n\n    private renderRow(row: WcsGridRow) {\n        return <tr class={row.selected ? 'selected' : ''}>\n            {this.renderSelectionColumn(row)}\n            {row.cells?.map(cell => {\n                    if (cell.column.hidden) {\n                        return;\n                    }\n                    return cell.column.customCells\n                        ? (<td>\n                            <slot name={cell.column.id + '-' + row.data[this.rowIdPath]}/>\n                        </td>)\n                        : (<td part={cell.column.path + '-column'}>{this.getCellContent(row, cell)}</td>)\n                }\n            )}\n        </tr>;\n    }\n}\n\n/**\n * Pour resize le tableau\n * https://www.brainbell.com/javascript/making-resizable-table-js.htmls\n *\n */\n"]}
+{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../../src/components/grid/grid.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentDidLoad,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    forceUpdate,\n    h,\n    Host,\n    Listen,\n    Prop,\n    State,\n    VNode,\n    Watch\n} from '@stencil/core';\nimport {\n    getSortOrderInteger,\n    HyperFunc,\n    WcsGridAllRowSelectedEventDetails,\n    WcsGridCell,\n    WcsGridColumnSortChangeEventDetails,\n    WcsGridPaginationChangeEventDetails,\n    WcsGridRow,\n    WcsGridRowData,\n    WcsGridRowSelectedEventDetails,\n    WcsGridSelectionConfig\n} from './grid-interface';\nimport { v4 as uuid } from 'uuid';\nimport { cloneDeep, isEqual, get } from 'lodash-es';\nimport { GridPagination } from '../grid-pagination/grid-pagination';\n\n/**\n * The grid component is a complex component used as an HTML table to display collections of data.\n *\n * @cssprop --wcs-grid-highlight-color - Color for selected rows\n * @cssprop --wcs-grid-column-border-left - Left border of all grid headers\n * @slot grid-column - The slot containing the column of the grid in the `<thead>`\n * @slot grid-pagination - The slot containing the pagination of the grid below the `<table>`\n */\n@Component({\n    tag: 'wcs-grid',\n    styleUrl: 'grid.scss',\n    shadow: true\n})\nexport class Grid implements ComponentInterface, ComponentDidLoad {\n    @Element() private el!: HTMLWcsGridElement;\n    /**\n     * Manage sort and pagination with a backend server when set to `true`\n     */\n    @Prop() serverMode: boolean = false;\n    /**\n     * Contains the data to display in the table from a js object\n     */\n    @Prop() data: any[];\n    /**\n     * Flag to display a spinner during data loading\n     */\n    @Prop() loading: boolean;\n    /**\n     * Used to manage grid's row selection.  \n     * \"none\": no row can be selected.  \n     * \"multiple\": several rows can be selected.  \n     * \"single\": one row only can be selected.  \n     */\n    @Prop() selectionConfig: WcsGridSelectionConfig = 'none';\n    /**\n     * Set the selected items (rows)\n     */\n    @Prop() selectedItems: any | any[] = [];\n    /**\n     * Automatically set by the component to reference the wcs-grid-pagination HTML element by its id.\n     */\n    @Prop() wcsGridPaginationId: string;\n    /**\n     * Name of the object's key that will be used to display the cells whose `keyValue` attribute matches to the\n     * object's value for this key.\n     */\n    @Prop() rowIdPath: string;\n    @State() private columns: HTMLWcsGridColumnElement[];\n    @State() private paginationEl: HTMLWcsGridPaginationElement;\n    /**\n     * Rows to display, contains user data and meta data\n     */\n    @State() private rows: WcsGridRow[] = [];\n    /**\n     * Event emitted when a row is selected or unselected\n     */\n    @Event() wcsGridSelectionChange!: EventEmitter<WcsGridRowSelectedEventDetails>;\n    /**\n     * Event emitted when all rows are selected or unselected\n     */\n    @Event() wcsGridAllSelectionChange!: EventEmitter<WcsGridAllRowSelectedEventDetails>;\n\n    @Watch('data')\n    onDataChange(newValue: any[]): void {\n        this.updateGridRows(newValue);\n        this.refreshSort(false);\n    }\n\n    @Watch('selectedItems')\n    onSelectedItemsPropertyChange(newValue: any | any[]) {\n        this.updateSelectionWithValues(newValue);\n    }\n\n    @Listen('wcsHiddenChange')\n    onHiddenColumnChange(): void {\n        // We use forceUpdate because the fact of hiding a column or not does not modify the internal structure of the grid (WcsGridRow).\n        // Hide a column only impacts the way it is rendered but the grid-column remains in the dom and in our internal model.\n        forceUpdate(this);\n    }\n\n    private updateSelectionWithValues(values: any | any[]) {\n        if (this.selectionConfig === 'single') {\n            this.rows.map(r => r.selected = false);\n            for (const row of this.rows) {\n                if (isEqual(row.data, values)) {\n                    row.selected = true;\n                    break; // only one line can be selected\n                }\n            }\n        } else if (this.selectionConfig === 'multiple') {\n            this.rows.map(r => r.selected = false);\n            for (const row of this.rows) {\n                if (values.find(x => isEqual(x, row.data))) {\n                    row.selected = true;\n                }\n            }\n        }\n        this.rows = cloneDeep(this.rows);\n    }\n\n    private wcsGridRowToWcsGridRowData(row: WcsGridRow): WcsGridRowData {\n        return {selected: row.selected, page: row.page, data: row.data};\n    }\n\n    private updateGridRows(data: any[]): void {\n        const rows: WcsGridRow[] = [];\n        if (data && this.columns) {\n            // eslint-disable-next-line @typescript-eslint/prefer-for-of\n            for (let i = 0; i < data.length; i++) {\n                const row: WcsGridRow = {\n                    uuid: uuid(),\n                    data: data[i],\n                    selected: false,\n                    cells: []\n                };\n                for (const column of this.columns) {\n                    row.cells.push({\n                        content: get(data[i], column.path),\n                        column,\n                        formatter: column.formatter\n                    })\n                }\n                rows.push(row);\n            }\n            this.rows = rows;\n            this.updatePageIndex();\n        }\n    }\n\n    componentDidLoad(): void {\n        this.columns = this.getGridColumnsFromTemplate();\n        this.paginationEl = this.wcsGridPaginationId\n            ? document.getElementById(this.wcsGridPaginationId) as HTMLWcsGridPaginationElement\n            : this.getGridPaginationsFromTemplate()[0];\n        this.updateGridRows(this.data);\n        if (this.selectedItems) {\n            this.updateSelectionWithValues(this.selectedItems);\n        }\n        this.refreshSort(true);\n    }\n\n    /**\n     * Handle existing column's filters (defined before the grid is instantiated)\n     * @private\n     */\n    private refreshSort(refreshOthersColmumnsSortOrderState: boolean) {\n        //fixme: why the column property can be null or undefined?\n        if (this.columns) {\n            const [first, ...other] = this.columns.filter(c => c.sortOrder !== 'none');\n            if (first && !this.serverMode) {\n                this.sortBy(first);\n            }\n            refreshOthersColmumnsSortOrderState && this.disableSortOrderForColumns(other);\n        }\n    }\n\n    private disableSortOrderForColumns(columns: HTMLWcsGridColumnElement[] | null | undefined): void {\n        columns?.forEach(c => c.sortOrder = 'none');\n    }\n\n    private getGridColumnsFromTemplate(): HTMLWcsGridColumnElement[] {\n        const slotted = this.el.shadowRoot.querySelector('slot[name=\"grid-column\"]') as HTMLSlotElement;\n        return slotted.assignedElements() as any as HTMLWcsGridColumnElement[];\n    }\n\n    private getGridPaginationsFromTemplate(): HTMLWcsGridPaginationElement[] {\n        const slotted = this.el.shadowRoot.querySelector('slot[name=\"grid-pagination\"]') as HTMLSlotElement;\n        return slotted.assignedElements() as any as HTMLWcsGridPaginationElement[];\n    }\n\n    @Listen('wcsSortChange')\n    sortChangeEventHandler(event: CustomEvent<WcsGridColumnSortChangeEventDetails>): void {\n        if (event.detail.order === 'none') return;\n        // We keep only one active sort column\n        this.disableSortOrderForColumns(this.columns.filter(c => c !== event.detail.column));\n        if (this.serverMode) return;\n        this.sortBy(event.detail.column);\n        this.updatePageIndex();\n    }\n\n    /**\n     * Sorts the grid rows according to the given column's configuration\n     * @param colmun Column from which to extract the sorting configuration\n     * @private\n     */\n    private sortBy(colmun: HTMLWcsGridColumnElement) {\n        if (colmun.sortFn) {\n            this.rows = cloneDeep(this.rows)\n                .sort((a: any, b: any) => colmun.sortFn(a.data, b.data, colmun) * getSortOrderInteger(colmun.sortOrder));\n        } else {\n            this.rows = cloneDeep(this.rows)\n                .sort((a: any, b: any) => {\n                    const path = colmun.path;\n                    return ((get(a.data, path) < get(b.data, path)) ? -1 : (get(a.data, path) > get(b.data, path)) ? 1 : 0) * getSortOrderInteger(colmun.sortOrder);\n                });\n        }\n    }\n\n    /**\n     * Update the page's number of all rows\n     */\n    private updatePageIndex(): void {\n        if (!this.serverMode && this.paginationEl) {\n            this.paginationEl.itemsCount = this.data.length;\n            this.paginationEl.pageCount = Math.ceil(this.data.length / this.paginationEl.pageSize);\n\n            if (this.paginationEl.pageCount <= 1) {\n                this.paginationEl.currentPage = GridPagination.INDEX_FIRST_PAGE;\n            } else if (this.paginationEl.pageCount > 0 && this.paginationEl.currentPage + 1 > this.paginationEl.pageCount) {\n                this.paginationEl.currentPage = this.paginationEl.pageCount - 1;\n            }\n\n            const rows = cloneDeep(this.rows);\n            rows.forEach((row: WcsGridRow, index: number) =>\n                row.page = Math.floor(index / this.paginationEl.pageSize)\n            );\n            this.rows = [...rows];\n        }\n    }\n\n    @Listen('wcsGridPaginationChange')\n    paginationChangeEventHandler(): void {\n        this.onPaginationChange();\n    }\n\n    @Listen('wcsGridPaginationChange', {target: 'window'})\n    paginationChangeEventHandlerOutside(event: CustomEvent<WcsGridPaginationChangeEventDetails>): void {\n        if (this.wcsGridPaginationId && this.wcsGridPaginationId === (event.target as HTMLElement).id) {\n            this.onPaginationChange();\n        }\n    }\n\n    private onPaginationChange(): void {\n        if (this.serverMode) return;\n        this.updatePageIndex();\n    }\n\n    private onRowSelection(row: WcsGridRow): void {\n        if (this.selectionConfig === 'single') {\n            this.rows.filter(r => r.uuid !== row.uuid).map(r => r.selected = false);\n        }\n        row.selected = !row.selected;\n        if (this.selectionConfig !== 'single' || row.selected) {\n            this.wcsGridSelectionChange.emit({row: this.wcsGridRowToWcsGridRowData(row)});\n        }\n        this.rows = cloneDeep(this.rows);\n    }\n\n    private selectAllRows(): void {\n        const rows = this.getRowsForCurrentPage();\n        const selected = !this.allRowsAreSelected();\n        rows.map(r => r.selected = selected);\n        this.wcsGridAllSelectionChange.emit({rows: selected ? rows.map(row => this.wcsGridRowToWcsGridRowData(row)) : []});\n        this.rows = cloneDeep(this.rows);\n    }\n\n    private allRowsAreSelected(): boolean {\n        const rows = this.getRowsForCurrentPage();\n        return rows.length > 0 && rows.filter(row => row.selected).length === rows.length;\n    }\n\n    private getRowsForCurrentPage(): WcsGridRow[] {\n        if (this.paginationEl) {\n            return this.rows.filter(row => row.page === this.paginationEl.currentPage);\n        }\n        return this.rows;\n    }\n\n    renderSelectionColumn(row: WcsGridRow): any {\n        switch (this.selectionConfig) {\n            case 'none':\n                return;\n            case 'single':\n                return <td>\n                    <wcs-radio checked={row.selected} onClick={this.onRowSelection.bind(this, row)}/>\n                </td>;\n            case 'multiple':\n                return <td>\n                    <wcs-checkbox checked={row.selected} onWcsChange={this.onRowSelection.bind(this, row)}/>\n                </td>;\n        }\n    }\n\n    private getCellContent(row: WcsGridRow, cell: WcsGridCell): HTMLElement | HTMLElement[] | string | void {\n        if (cell.formatter) {\n            return cell.formatter(\n                (h as unknown) as HyperFunc<VNode>,\n                cell.column,\n                this.wcsGridRowToWcsGridRowData(row)\n            );\n        }\n        return cell.content;\n    }\n\n    private totalColumnCount() {\n        if (!this.columns) {\n            return 0;\n        }\n        return this.columns.length + (this.selectionConfig === 'none' ? 0 : 1);\n    }\n\n    render(): any {\n        return (\n            <Host>\n                {\n                    <table>\n                        <thead>\n                        {\n                            this.selectionConfig === 'none' ? ''\n                                : <th class=\"wcs-grid-selection-column\">\n                                    {\n                                        this.selectionConfig === 'single' ? '' :\n                                            <wcs-checkbox checked={this.allRowsAreSelected()}\n                                                          onWcsChange={this.selectAllRows.bind(this)}/>\n                                    }\n                                </th>\n                        }\n                        <slot name=\"grid-column\"></slot>\n                        </thead>\n                        <tbody>\n                        {\n                            this.loading\n                                ? <tr>\n                                    <td colSpan={this.totalColumnCount()} class=\"loading\">\n                                        <wcs-spinner></wcs-spinner>\n                                    </td>\n                                </tr>\n                                : this.rows\n                                    ?.filter(row => this.serverMode || !this.paginationEl || row.page === this.paginationEl.currentPage)\n                                    .map(row =>\n                                        this.renderRow(row)\n                                    )\n                        }\n                        </tbody>\n                    </table>\n                }\n                <slot name=\"grid-pagination\"></slot>\n            </Host>\n        );\n    }\n\n    private renderRow(row: WcsGridRow) {\n        return <tr class={row.selected ? 'selected' : ''}>\n            {this.renderSelectionColumn(row)}\n            {row.cells?.map(cell => {\n                    if (cell.column.hidden) {\n                        return;\n                    }\n                    return cell.column.customCells\n                        ? (<td>\n                            <slot name={cell.column.id + '-' + row.data[this.rowIdPath]}/>\n                        </td>)\n                        : (<td part={cell.column.path + '-column'}>{this.getCellContent(row, cell)}</td>)\n                }\n            )}\n        </tr>;\n    }\n}\n\n/**\n * Pour resize le tableau\n * https://www.brainbell.com/javascript/making-resizable-table-js.htmls\n *\n */\n"]}

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

@@ -1,5 +1,10 @@
 import { h, Host } from '@stencil/core';
 import { GridSortArrow } from './grid-sort-arrow';
+/**
+ * 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
+ * @csspart [path]-column - CSS part for each column for styling. e.g: first_name-column, email-column
+ */
 export class GridColumn {
   constructor() {
     this.path = undefined;
@@ -60,7 +65,7 @@ export class GridColumn {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Represents the name of the field from the `data` object (e.g: first_name, last_name, email, ...)"
         },
         "attribute": "path",
         "reflect": false
@@ -77,7 +82,7 @@ export class GridColumn {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "The name of the column displayed on the table (e.g: First Name, Last Name, Email, ...)"
         },
         "attribute": "name",
         "reflect": false
@@ -94,7 +99,7 @@ export class GridColumn {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Make the column sortable."
         },
         "attribute": "sort",
         "reflect": false,
@@ -117,7 +122,7 @@ export class GridColumn {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Customizable sort function to change the comparison of values."
         }
       },
       "formatter": {
@@ -137,7 +142,7 @@ export class GridColumn {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Customizable formatter function to render the cell differently."
         }
       },
       "sortOrder": {
@@ -157,7 +162,7 @@ export class GridColumn {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Defines if the column sort is ascending or descending.  \n`none` = the column is not sorted."
         },
         "attribute": "sort-order",
         "reflect": false,
@@ -175,7 +180,7 @@ export class GridColumn {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Set the column <th> element width"
+          "text": "Set the column `<th>` element width."
         },
         "attribute": "width",
         "reflect": false
@@ -192,7 +197,7 @@ export class GridColumn {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Set to true if using a `wcs-custom-cell` linked to it."
         },
         "attribute": "custom-cells",
         "reflect": false,
@@ -210,7 +215,7 @@ export class GridColumn {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Flag to hide the column."
         },
         "attribute": "hidden",
         "reflect": false,
@@ -227,7 +232,7 @@ export class GridColumn {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Event emitted when the sort of the column is changed."
         },
         "complexType": {
           "original": "WcsGridColumnSortChangeEventDetails",
@@ -247,7 +252,7 @@ export class GridColumn {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Event emitted if the column is dynamically switching visibility."
         },
         "complexType": {
           "original": "boolean",

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;AAOlD,MAAM,OAAO,UAAU;;;;gBAIK,KAAK;;;qBAGoB,MAAM;;uBAKxB,KAAK;kBACV,KAAK;;EAK/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@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    @Prop() path: string;\n    @Prop() name: string;\n    @Prop() sort: boolean = false;\n    @Prop() sortFn: WcsSortFn;\n    @Prop() formatter: WcsCellFormatter;\n    @Prop({mutable: true}) sortOrder: WcsSortOrder = 'none';\n    /**\n     * Set the column <th> element width\n     */\n    @Prop() width: string;\n    @Prop() customCells: boolean = false;\n    @Prop() hidden: boolean = false;\n    @Event() wcsSortChange!: EventEmitter<WcsGridColumnSortChangeEventDetails>;\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":"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"]}

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

@@ -1,4 +1,7 @@
 import { h, Host } from '@stencil/core';
+/**
+ * The grid custom cell is a subcomponent of `wcs-grid`.
+ */
 export class GridCustomCell {
   constructor() {
     this.columnId = undefined;

package/dist/collection/components/grid-custom-cell/grid-custom-cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid-custom-cell.js","sourceRoot":"","sources":["../../../src/components/grid-custom-cell/grid-custom-cell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAM7E,MAAM,OAAO,cAAc;;;;;EAUvB,MAAM;IACF,OAAO,CACH,EAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,GAAG,GAAG,IAAI,CAAC,KAAK;MACxC,eAAQ,CACL,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, ComponentInterface, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'wcs-grid-custom-cell',\n    shadow: true\n})\nexport class GridCustomCell implements ComponentInterface {\n    /**\n     * ID of the column for which to render the cell\n     */\n    @Prop() columnId: string;\n    /**\n     * Key value of the object rendered for the cell's row\n     */\n    @Prop() rowId: any;\n\n    render(): any {\n        return (\n            <Host slot={this.columnId + '-' + this.rowId}>\n                <slot />\n            </Host>\n        );\n    }\n}\n"]}
+{"version":3,"file":"grid-custom-cell.js","sourceRoot":"","sources":["../../../src/components/grid-custom-cell/grid-custom-cell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE7E;;GAEG;AAKH,MAAM,OAAO,cAAc;;;;;EAUvB,MAAM;IACF,OAAO,CACH,EAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,GAAG,GAAG,IAAI,CAAC,KAAK;MACxC,eAAQ,CACL,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, ComponentInterface, h, Host, Prop } from '@stencil/core';\n\n/**\n * The grid custom cell is a subcomponent of `wcs-grid`.\n */\n@Component({\n    tag: 'wcs-grid-custom-cell',\n    shadow: true\n})\nexport class GridCustomCell implements ComponentInterface {\n    /**\n     * ID of the column for which to render the cell\n     */\n    @Prop() columnId: string;\n    /**\n     * Key value of the object rendered for the cell's row\n     */\n    @Prop() rowId: any;\n\n    render(): any {\n        return (\n            <Host slot={this.columnId + '-' + this.rowId}>\n                <slot />\n            </Host>\n        );\n    }\n}\n"]}

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

@@ -1,5 +1,8 @@
 import { h, Host } from '@stencil/core';
 import { GridPaginationArrow } from './grid-pagination-arrow';
+/**
+ * The grid pagination is a subcomponent of `wcs-grid`, slotted in `grid-pagination` under the `<table>` element.
+ */
 export class GridPagination {
   constructor() {
     this.availablePageSizes = [10, 20, 50];
@@ -80,7 +83,7 @@ export class GridPagination {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Set the available page sizes in the pagination dropdown on the left."
         },
         "defaultValue": "[10, 20, 50]"
       },
@@ -96,7 +99,7 @@ export class GridPagination {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "The current page of the pagination. First page starts at index 0."
         },
         "attribute": "current-page",
         "reflect": false,
@@ -114,7 +117,7 @@ export class GridPagination {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Maximum number of elements shown per page.  \nDefault is the first value of `availablePageSizes`."
         },
         "attribute": "page-size",
         "reflect": false,
@@ -132,7 +135,7 @@ export class GridPagination {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "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."
         },
         "attribute": "items-count",
         "reflect": false,
@@ -150,7 +153,7 @@ export class GridPagination {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "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."
         },
         "attribute": "page-count",
         "reflect": false,
@@ -167,7 +170,7 @@ export class GridPagination {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Event emitted when the pagination changes."
         },
         "complexType": {
           "original": "WcsGridPaginationChangeEventDetails",

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@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    @Prop() availablePageSizes: number[] = [10, 20, 50];\n    @Prop() currentPage: number = GridPagination.INDEX_FIRST_PAGE;\n    @Prop() pageSize: number = this.availablePageSizes[0];\n    @Prop() itemsCount: number = 0;\n    @Prop() pageCount: number = 1;\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\" 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"]}

package/dist/collection/components/native-select/native-select.css

@@ -1,5 +1,4 @@
 :host {
-  width: 100%;
   box-sizing: border-box;
 }
 
@@ -25,8 +24,9 @@
   cursor: pointer;
   line-height: 1.5;
   font-size: 1rem;
-  width: 100%;
-  padding-right: calc(var(--wcs-base-margin) * 2);
+  max-width: 100%;
+  flex-grow: 1;
+  padding-right: calc(var(--wcs-base-margin) * 2 + 24px);
   padding-left: calc(var(--wcs-base-margin) * 2);
 }
 
@@ -55,6 +55,8 @@
 
 .select-wrapper {
   position: relative;
+  display: flex;
+  flex-wrap: nowrap;
 }
 
 svg {