wcs-core 4.0.2 → 4.1.0

package/README.md

@@ -12,6 +12,7 @@ Here is the list of published npm packages and their goal :
 - `wcs-core` contains the web components compiled with StencilJS [![npm version](https://badge.fury.io/js/wcs-core.svg)](https://badge.fury.io/js/wcs-core)
 - `wcs-angular` angular integrations (value accessors, ...)[![npm version](https://badge.fury.io/js/wcs-angular.svg)](https://badge.fury.io/js/wcs-angular)
 - `wcs-formly` Angular Formly integration for WCS [![npm version](https://badge.fury.io/js/wcs-formly.svg)](https://badge.fury.io/js/wcs-formly)
+- `wcs-react` React integration for WCS [![npm version](https://badge.fury.io/js/wcs-react.svg)](https://badge.fury.io/js/wcs-react)
 
 ## Roadmap
 
@@ -26,8 +27,9 @@ Select and select options size behavior, especially with multiple select. As of
 ## Documentation
 
 There is documentation available at 
-- https://sncf.gitlab.io/wcs/master/ for production (latest release)
-- https://sncf.gitlab.io/wcs/develop/ for development branch
+- https://wcs.dev.sncf/ for production (latest release)
+- https://lemon-bush-001d04303-develop.westeurope.3.azurestaticapps.net/ for development environment
+- https://lemon-bush-001d04303-review.westeurope.3.azurestaticapps.net/ for review environment
 
     
 ### Example usage

package/dist/cjs/grid-pagination-4b55c908.js.map

@@ -1 +1 @@
-{"file":"grid-pagination-4b55c908.js","mappings":"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","names":["h","Host"],"sources":["./src/components/grid-pagination/grid-pagination-arrow.tsx","./src/components/grid-pagination/grid-pagination.scss?tag=wcs-grid-pagination&encapsulation=shadow","./src/components/grid-pagination/grid-pagination.tsx"],"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",":host {\n    display: block;\n    border-style: solid none none;\n    border-width: 1px;\n    border-color: var(--wcs-text-light);\n}\n\n.container {\n    display: grid;\n    grid-template-columns: auto auto auto;\n    justify-content: space-between;\n    color: var(--wcs-text-medium);\n}\n\n.available-page-sizes {\n    width: auto;\n}\n\n.page-management, .page-size, .items-count {\n    display: flex;\n    align-items: center;\n}\n\n.pagination-arrow {\n    display: flex;\n}\n","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-4b55c908.js","mappings":"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","names":["h","Host"],"sources":["./src/components/grid-pagination/grid-pagination-arrow.tsx","./src/components/grid-pagination/grid-pagination.scss?tag=wcs-grid-pagination&encapsulation=shadow","./src/components/grid-pagination/grid-pagination.tsx"],"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",":host {\n    display: block;\n    border-style: solid none none;\n    border-width: 1px;\n    border-color: var(--wcs-text-light);\n}\n\n.container {\n    display: grid;\n    grid-template-columns: auto auto auto;\n    justify-content: space-between;\n    color: var(--wcs-text-medium);\n}\n\n.available-page-sizes {\n    width: auto;\n}\n\n.page-management, .page-size, .items-count {\n    display: flex;\n    align-items: center;\n}\n\n.pagination-arrow {\n    display: flex;\n}\n","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}