wcs-core 4.1.0 → 5.0.0-rc.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 SNCF
+Copyright (c) 2023 SNCF
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,112 +1,105 @@
-# Web Components SNCF 
+<a href="https://wcs.dev.sncf" target="blank">
+    <img src="stories/assets/images/cover.webp" style="max-width: 100%" alt="SNCF Design System Cover" />
+</a>
+
+# Web Components SNCF
+
+[![pipeline](https://img.shields.io/gitlab/pipeline-status/SNCF%2Fwcs?branch=master&style=for-the-badge)](https://img.shields.io/gitlab/pipeline-status/SNCF%2Fwcs?branch=master&style=for-the-badge)
+[![npm version](https://img.shields.io/gitlab/v/tag/13813721?color=success&label=release&style=for-the-badge)](https://img.shields.io/gitlab/v/tag/13813721?color=success&label=release&style=for-the-badge)
+[![downloads](https://img.shields.io/npm/dt/wcs-core?style=for-the-badge)](https://img.shields.io/npm/dt/wcs-core?style=for-the-badge)
+
+[![Built With Stencil](https://img.shields.io/badge/Built%20With%20Stencil-16161d.svg?logo=stackblitz&style=for-the-badge)](https://stenciljs.com)
+[![Storybook](https://img.shields.io/badge/Storybook-ff4785.svg?logo=storybook&style=for-the-badge&logoColor=fff)](https://storybook.js.org/)
+
+### **OFFICIAL DOCUMENTATION** 👉 [WCS.DEV.SNCF](https://wcs.dev.sncf)
 
 This project is the web component implementation of the [SNCF design system](https://designmetier-bootstrap.sncf.fr/).  
-It is built using [stencil](https://github.com/ionic-team/stencil).
+It is built using  [Stencil](https://github.com/ionic-team/stencil) and documented using [Storybook](https://storybook.js.org/).
 
-If you read this documentation on GitHub, only the development branch is updated at the moment. We use a GitLab project for WCS development and releases.
+If you read this documentation on GitHub, only the development branch is updated at the moment. We use the [GitLab project](https://gitlab.com/SNCF/wcs/) for WCS development and releases.
 
 ## Packages
 
 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)
+| Package       | Usage                                                        |                                                          Version                                                          |
+|:--------------|:-------------------------------------------------------------|:-------------------------------------------------------------------------------------------------------------------------:|
+| `wcs-core`    | Contains the web components compiled with StencilJS          |    [![npm version](https://img.shields.io/npm/v/wcs-core?style=for-the-badge)](https://www.npmjs.com/package/wcs-core)    |
+| `wcs-angular` | Angular integrations (value accessors, types, bindings, ...) | [![npm version](https://img.shields.io/npm/v/wcs-angular?style=for-the-badge)](https://www.npmjs.com/package/wcs-angular) |
+| `wcs-formly`  | Angular Formly integration for WCS                           |  [![npm version](https://img.shields.io/npm/v/wcs-formly?style=for-the-badge)](https://www.npmjs.com/package/wcs-formly)  |
+| `wcs-react`   | React integration for WCS (types, bindings, ...)             |   [![npm version](https://img.shields.io/npm/v/wcs-react?style=for-the-badge)](https://www.npmjs.com/package/wcs-react)   |
 
-## Roadmap
+## StackBlitz templates
 
-This project is still under heavy development therefore it is not yet released. It is being used internally as of now.
+We created 3 StackBlitz templates to help you test quickly without worrying about WCS configuration :
 
-We plan to release first version in **december 2020**.
+- WcsAngular + WcsFormly : https://stackblitz.com/edit/wcs-angular-template
+- WcsReact : https://stackblitz.com/edit/wcs-react-template
+- WcsCore only (Plain HTML) : https://stackblitz.com/edit/wcs-plain-html-template
 
-## Known issues
+## Roadmap
 
-Select and select options size behavior, especially with multiple select. As of now we recommend setting a fixed width on the select to prevent resizing from happening. A stale branch `fix-select-options-size` contains some work to fix it, but it is abandonned for now.
+This project is still under heavy development.  
+You can get a preview of what's planned for the following months in the [GitLab Milestones](https://gitlab.com/SNCF/wcs/-/milestones).
 
-## Documentation
+Consult the [changelog](https://wcs.dev.sncf/?path=/docs/documentation-changelog--documentation) to know what's going on. 
 
-There is documentation available at 
-- 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
+Major versions releases :
+- **v0** 👉 Jul 2019
+- **v1** 👉 Sep 2020
+- **v2** 👉 Jun 2021
+- **v3** 👉 Feb 2023
+- **v4** 👉 Sep 2023
 
     
 ### Example usage
 
-There is an example projects under `example` folder for angular.
+There are example projects under `example` folder for angular and react.
 
 Step to start the example project :
 ```shell
 # wcs-core build
 npm install
 npm run build
+```
+```shell
 # angular build (use --watch option to watch files)
 cd angular
 npm install
 ng build --project wcs-angular
 ng build --project wcs-formly
-# start example
-cd ../example
+# start angular example
+cd ../example/angular
 npm install
 ng serve
 ```
+```shell
+# react build
+cd react
+npm install
+npm run clean && npm run compile
+# start react example
+cd ../example/react
+npm install
+npm run start
+```
 
-If you have any question, don't hesitate to fill an issue !
+If you have any question, don't hesitate to [fill an issue](https://gitlab.com/SNCF/wcs/-/issues/new).
 
 ### Install in your project
 
-You can refer to the 
-[official WCS documentation](https://sncf.gitlab.io/wcs/master/?path=/story/documentation-framework-integrations--page) 
-to use wcs with Angular or React. For other frameworks, StencilJS offers many integrations with different JS frameworks.
+You can refer to the [official WCS documentation](https://wcs.dev.sncf/?path=/docs/documentation-integrations-framework-integrations--documentation)
+to use the lib with Angular or React. For other, StencilJS offers many integrations with different JS frameworks.
 
 You can refer to [their official documentation](https://stenciljs.com/docs/overview) to add WCS to your project.
 
-After added wcs dependencies, you must add Avenir and icons font faces like so :
-
-```css
-@font-face {
-    font-family: Avenir;
-    src: url("your-custom-path/avenir-lighter.woff");
-    font-weight: 300;
-}
-
-@font-face {
-    font-family: Avenir;
-    src: url("your-custom-path/avenir-book.woff");
-    font-weight: 400;
-}
-
-@font-face {
-    font-family: Avenir;
-    src: url("your-custom-path/avenir-medium.woff");
-    font-weight: 500;
-}
-
-@font-face {
-    font-family: Avenir;
-    src: url("your-custom-path/avenir-black.woff");
-    font-weight: 900;
-}
-@font-face {
-    font-family: "icons";
-    src: url("your-custom-path/icons.eot?#iefix") format("embedded-opentype"),
-    url("your-custom-path/icons.woff2") format("woff2"),
-    url("your-custom-path/icons.woff") format("woff"),
-    url("your-custom-path/icons.ttf") format("truetype"),
-    url("your-custom-path/icons.svg#icons") format("svg");
-}
-```
 
 ## Contributing
 
 ### Bug, Feature request, etc...
 
-Don't hesitate to fill in an issue and we'll discuss about it. If you want to contribute code, please fill in an issue first so we can synchronize.
-
-### Dev requirements
-
-- Minimum node version : 10.16
+Don't hesitate to [fill in an issue](https://gitlab.com/SNCF/wcs/-/issues/new) and we'll discuss about it.
+If you want to contribute code, please fill in an issue first so we can handle it properly.
 
 ### Starting the project
 
@@ -139,30 +132,6 @@ npm run test:e2e path_to_tests_file
 npm run test:e2e src/components/tabs/tabs.e2e.ts
 ```
 
-### Doing a release
+### License
 
-Don't forget to update the changelog.
-
-```sh
-# Make sure you're on develop branch
-git checkout develop
-# Pull latest changes
-git pull
-# Build the project to make sure that all automatically generated files are up-to-date
-npm run build
-# Update the changelog by replacing the 'Unreleased' section with the released version number
-# Commit your changes
-git add . && git commit -m "chore: prepare next release" 
-# Go on master
-git checkout master
-# Merge latest changes
-git merge develop
-# Do the release, we use semantic versioning for choosing release number
-npm run update-version -- --version <major|minor|patch>
-# Go on develop
-git checkout develop
-# Merge the release
-git merge master
-# Push the changes
-git push
-```
+[MIT](https://gitlab.com/SNCF/wcs/-/blob/master/LICENSE)

package/dist/cjs/accessibility-c0c4e648.js

@@ -0,0 +1,74 @@
+'use strict';
+
+function isElementFocused(element) {
+  return element === document.activeElement;
+}
+const wcsFocusableElements = [
+  'wcs-select',
+  'wcs-select-option',
+  'wcs-dropdown',
+  'wcs-dropdown-item',
+  'wcs-nav-item',
+  'wcs-button',
+  'wcs-input',
+  'wcs-textarea',
+  'wcs-checkbox',
+  'wcs-radio',
+  'wcs-switch',
+  'wcs-tab',
+  'wcs-counter',
+];
+/**
+ * Returns true if the provided element is part of the wcsFocusableElements list
+ */
+function isWcsFocusableElement(element) {
+  return wcsFocusableElements.includes(element.tagName.toLowerCase());
+}
+function isFocusable(element) {
+  if (parseInt(element.getAttribute('tabindex')) < 0) {
+    return false;
+  }
+  if (element.disabled) {
+    return false;
+  }
+  const boundingRect = element.getBoundingClientRect();
+  if (boundingRect.bottom === 0 &&
+    boundingRect.top === 0 &&
+    boundingRect.left === 0 &&
+    boundingRect.right === 0 &&
+    boundingRect.height === 0 &&
+    boundingRect.width === 0 &&
+    boundingRect.x === 0 &&
+    boundingRect.y === 0) {
+    return false;
+  }
+  if (element.style.display === 'none' ||
+    element.style.visibility === 'hidden' ||
+    element.style.opacity === 0) {
+    return false;
+  }
+  if (element.getAttribute('role') === 'button') {
+    return true;
+  }
+  if (isWcsFocusableElement(element)) {
+    return true;
+  }
+  // To identify other native focus elements.
+  switch (element.nodeName) {
+    case 'A':
+      return !!element.href && element.rel !== 'ignore';
+    case 'INPUT':
+      return element.type !== 'hidden';
+    case 'BUTTON':
+    case 'SELECT':
+    case 'TEXTAREA':
+      return true;
+    default:
+      return false;
+  }
+}
+
+exports.isElementFocused = isElementFocused;
+exports.isFocusable = isFocusable;
+
+//# sourceMappingURL=accessibility-c0c4e648.js.map

package/dist/cjs/accessibility-c0c4e648.js.map

@@ -0,0 +1 @@
+{"file":"accessibility-c0c4e648.js","mappings":";;SAAgB,gBAAgB,CAAC,OAAoB;EACjD,OAAO,OAAO,KAAK,QAAQ,CAAC,aAAa,CAAC;AAC9C,CAAC;AAEM,MAAM,oBAAoB,GAAG;EAChC,YAAY;EACZ,mBAAmB;EACnB,cAAc;EACd,mBAAmB;EACnB,cAAc;EACd,YAAY;EACZ,WAAW;EACX,cAAc;EACd,cAAc;EACd,WAAW;EACX,YAAY;EACZ,SAAS;EACT,aAAa;CAChB,CAAC;AAEF;;;SAGgB,qBAAqB,CAAC,OAAY;EAC9C,OAAO,oBAAoB,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;AACxE,CAAC;SAEe,WAAW,CAAC,OAAY;EACpC,IAAI,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,EAAE;IAChD,OAAO,KAAK,CAAC;GAChB;EACD,IAAI,OAAO,CAAC,QAAQ,EAAE;IAClB,OAAO,KAAK,CAAC;GAChB;EACD,MAAM,YAAY,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;EACrD,IACI,YAAY,CAAC,MAAM,KAAK,CAAC;IACzB,YAAY,CAAC,GAAG,KAAK,CAAC;IACtB,YAAY,CAAC,IAAI,KAAK,CAAC;IACvB,YAAY,CAAC,KAAK,KAAK,CAAC;IACxB,YAAY,CAAC,MAAM,KAAK,CAAC;IACzB,YAAY,CAAC,KAAK,KAAK,CAAC;IACxB,YAAY,CAAC,CAAC,KAAK,CAAC;IACpB,YAAY,CAAC,CAAC,KAAK,CAAC,EACtB;IACE,OAAO,KAAK,CAAC;GAChB;EACD,IACI,OAAO,CAAC,KAAK,CAAC,OAAO,KAAK,MAAM;IAChC,OAAO,CAAC,KAAK,CAAC,UAAU,KAAK,QAAQ;IACrC,OAAO,CAAC,KAAK,CAAC,OAAO,KAAK,CAAC,EAC7B;IACE,OAAO,KAAK,CAAC;GAChB;EACD,IAAI,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,QAAQ,EAAE;IAC3C,OAAO,IAAI,CAAC;GACf;EAED,IAAI,qBAAqB,CAAC,OAAO,CAAC,EAAE;IAChC,OAAO,IAAI,CAAC;GACf;;EAGD,QAAQ,OAAO,CAAC,QAAQ;IACpB,KAAK,GAAG;MACJ,OAAO,CAAC,CAAC,OAAO,CAAC,IAAI,IAAI,OAAO,CAAC,GAAG,KAAK,QAAQ,CAAC;IACtD,KAAK,OAAO;MACR,OAAO,OAAO,CAAC,IAAI,KAAK,QAAQ,CAAC;IACrC,KAAK,QAAQ,CAAC;IACd,KAAK,QAAQ,CAAC;IACd,KAAK,UAAU;MACX,OAAO,IAAI,CAAC;IAChB;MACI,OAAO,KAAK,CAAC;GACpB;AACL;;;;;","names":[],"sources":["./src/utils/accessibility.ts"],"sourcesContent":["export function isElementFocused(element: HTMLElement) {\n    return element === document.activeElement;\n}\n\nexport const wcsFocusableElements = [\n    'wcs-select',\n    'wcs-select-option',\n    'wcs-dropdown',\n    'wcs-dropdown-item',\n    'wcs-nav-item',\n    'wcs-button',\n    'wcs-input',\n    'wcs-textarea',\n    'wcs-checkbox',\n    'wcs-radio',\n    'wcs-switch',\n    'wcs-tab',\n    'wcs-counter',\n];\n\n/**\n * Returns true if the provided element is part of the wcsFocusableElements list\n */\nexport function isWcsFocusableElement(element: any): boolean {\n    return wcsFocusableElements.includes(element.tagName.toLowerCase());\n}\n\nexport function isFocusable(element: any) {\n    if (parseInt(element.getAttribute('tabindex')) < 0) {\n        return false;\n    }\n    if (element.disabled) {\n        return false;\n    }\n    const boundingRect = element.getBoundingClientRect();\n    if (\n        boundingRect.bottom === 0 &&\n        boundingRect.top === 0 &&\n        boundingRect.left === 0 &&\n        boundingRect.right === 0 &&\n        boundingRect.height === 0 &&\n        boundingRect.width === 0 &&\n        boundingRect.x === 0 &&\n        boundingRect.y === 0\n    ) {\n        return false;\n    }\n    if (\n        element.style.display === 'none' ||\n        element.style.visibility === 'hidden' ||\n        element.style.opacity === 0\n    ) {\n        return false;\n    }\n    if (element.getAttribute('role') === 'button') {\n        return true;\n    }\n\n    if (isWcsFocusableElement(element)) {\n        return true;\n    }\n\n    // To identify other native focus elements.\n    switch (element.nodeName) {\n        case 'A':\n            return !!element.href && element.rel !== 'ignore';\n        case 'INPUT':\n            return element.type !== 'hidden';\n        case 'BUTTON':\n        case 'SELECT':\n        case 'TEXTAREA':\n            return true;\n        default:\n            return false;\n    }\n}\n"],"version":3}

package/dist/cjs/button-interface-044a8a8a.js

@@ -0,0 +1,12 @@
+'use strict';
+
+const WcsButtonSizeValues = ['s', 'm', 'l']; // as const keyword is used to infer and preserve the exact literal values of an array or object.
+function isWcsButtonSize(size) {
+  // @ts-ignore : ignore size type, as it is checked with WcsButtonSizeValues
+  return WcsButtonSizeValues.includes(size);
+}
+
+exports.WcsButtonSizeValues = WcsButtonSizeValues;
+exports.isWcsButtonSize = isWcsButtonSize;
+
+//# sourceMappingURL=button-interface-044a8a8a.js.map

package/dist/cjs/button-interface-044a8a8a.js.map

@@ -0,0 +1 @@
+{"file":"button-interface-044a8a8a.js","mappings":";;MAQa,mBAAmB,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAW;SAI5C,eAAe,CAAC,IAAY;;EAExC,OAAO,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC9C;;;;;","names":[],"sources":["./src/components/button/button-interface.ts"],"sourcesContent":["import { WcsSize } from '../../shared-types';\n\nexport type WcsButtonType = 'button' | 'submit';\n\nexport type WcsButtonShape = 'normal' | 'round' | 'square';\n\nexport type WcsButtonMode = 'plain' | 'stroked' | 'clear';\n\nexport const WcsButtonSizeValues = ['s', 'm', 'l'] as const; // as const keyword is used to infer and preserve the exact literal values of an array or object.\n\nexport type WcsButtonSize = Extract<WcsSize, typeof WcsButtonSizeValues[number]>;\n\nexport function isWcsButtonSize(size: string): size is WcsButtonSize {\n    // @ts-ignore : ignore size type, as it is checked with WcsButtonSizeValues\n    return WcsButtonSizeValues.includes(size);\n}\n"],"version":3}

package/dist/cjs/grid-pagination-3511fdfa.js

@@ -0,0 +1,111 @@
+'use strict';
+
+const index = require('./index-749d999e.js');
+
+const getAccessibleName = (order, double) => {
+  switch (order) {
+    case 'next':
+      return double ? 'Last page' : 'Next page';
+    case 'previous':
+    default:
+      return double ? 'First page' : 'Previous page';
+  }
+};
+const GridPaginationArrow = ({ active, order, double = false }) => (index.h("wcs-button", { mode: "clear", shape: "square", size: "s", disabled: !active, title: getAccessibleName(order, double) },
+  index.h("svg", { style: { cursor: 'pointer' }, "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "20", viewBox: "0 0 24 20" },
+    index.h("style", { type: "text/css" }, `
+              .arrow-group {
+                  transform-origin: 50% 51%;
+                  transition: transform 175ms ease-in-out;
+              }
+              .arrow {
+                  transition: fill 175ms ease-in-out;
+                  fill: var(--wcs-text-light);
+              }
+              .second-arrow {
+                  transform: translateY(-8px);
+              }
+              .next {
+                  transform: rotate(90deg);
+              }
+              .previous {
+                  transform: rotate(-90deg);
+              }
+              .active {
+                  fill: var(--wcs-primary);
+              }
+          `),
+    index.h("g", { fill: "none", class: order + ' arrow-group' },
+      index.h("path", { class: (active ? 'active' : '') + ' arrow', d: "M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" }),
+      index.h("path", { d: "M0 0h24v24H0z", fill: "none" })),
+    double ?
+      index.h("g", { fill: "none", class: order + ' arrow-group' },
+        index.h("path", { class: (active ? 'active' : '') + ' arrow second-arrow', d: "M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" }),
+        index.h("path", { d: "M0 0h24v24H0z", fill: "none" }))
+      : '')));
+
+const gridPaginationCss = ":host{display:block;border-style:solid none none;border-width:1px;border-color:var(--wcs-text-light)}.container{display:grid;grid-template-columns:auto auto auto;justify-content:space-between;color:var(--wcs-text-medium);align-items:center}.available-page-sizes{width:auto}.page-management,.page-size,.items-count{display:flex;align-items:center}.page-management{margin:0;padding:0;list-style-type:none}.pagination-arrow{display:flex}.pagination-counter{padding:0 var(--wcs-padding-s)}.items-count span:focus{outline:2px dashed var(--wcs-primary);outline-offset:4px;border-radius:0.1rem}";
+
+const GridPagination = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.wcsGridPaginationChange = index.createEvent(this, "wcsGridPaginationChange", 7);
+    this.availablePageSizes = [10, 20, 50];
+    this.currentPage = GridPagination.INDEX_FIRST_PAGE;
+    this.pageSize = this.availablePageSizes[0];
+    this.itemsCount = 0;
+    this.pageCount = 1;
+  }
+  lastPage() {
+    this.currentPage = this.pageCount - 1;
+    this.emitPaginationChange();
+  }
+  nextPage() {
+    if (this.canGoToNextPage()) {
+      this.currentPage++;
+      this.emitPaginationChange();
+    }
+  }
+  canGoToNextPage() {
+    return this.currentPage + 1 < this.pageCount;
+  }
+  previousPage() {
+    if (this.canGoToPreviousPage()) {
+      this.currentPage--;
+      this.emitPaginationChange();
+    }
+  }
+  canGoToPreviousPage() {
+    return this.currentPage > 0;
+  }
+  firstPage() {
+    this.currentPage = 0;
+    this.emitPaginationChange();
+  }
+  onChangePagesize(event) {
+    this.pageSize = event.detail.value;
+    if (this.currentPage + 1 > this.pageSize) {
+      this.currentPage = 0;
+    }
+    this.emitPaginationChange();
+  }
+  emitPaginationChange() {
+    this.wcsGridPaginationChange.emit({
+      pagination: {
+        currentPage: this.currentPage,
+        pageSize: this.pageSize,
+        itemsCount: this.itemsCount,
+        pageCount: this.pageCount
+      }
+    });
+  }
+  render() {
+    return (index.h(index.Host, { slot: "grid-pagination" }, index.h("div", { class: "container" }, index.h("div", { class: "page-size" }, index.h("wcs-select", { placeholder: "El\u00E9ments par page", class: "available-page-sizes", "aria-labelledby": "elements-per-page-number elements-per-page-text", value: this.pageSize, onWcsChange: this.onChangePagesize.bind(this) }, this.availablePageSizes.map((pageSize) => index.h("wcs-select-option", { value: pageSize }, pageSize))), index.h("span", { id: "elements-per-page-number", hidden: true }, this.pageSize), index.h("span", { id: "elements-per-page-text" }, "\u00A0\u00E9l\u00E9ments par page")), index.h("div", { class: "items-count" }, index.h("span", null, this.itemsCount, " \u00E9l\u00E9ments")), index.h("nav", { "aria-label": "pagination" }, index.h("ul", { class: "page-management" }, index.h("li", { class: "pagination-arrow", onClick: this.firstPage.bind(this) }, index.h(GridPaginationArrow, { active: this.canGoToPreviousPage(), order: "previous", double: true })), index.h("li", { class: "pagination-arrow", onClick: this.previousPage.bind(this) }, index.h(GridPaginationArrow, { active: this.canGoToPreviousPage(), order: "previous" })), index.h("li", { class: "pagination-counter" }, index.h("span", { "aria-label": `Page ${this.currentPage + 1} sur ${this.pageCount}`, "aria-current": "page" }, this.currentPage + 1, " / ", this.pageCount)), index.h("li", { class: "pagination-arrow", onClick: this.nextPage.bind(this) }, index.h(GridPaginationArrow, { active: this.canGoToNextPage(), order: "next" })), index.h("li", { class: "pagination-arrow", onClick: this.lastPage.bind(this) }, index.h(GridPaginationArrow, { active: this.canGoToNextPage(), order: "next", double: true })))))));
+  }
+};
+GridPagination.INDEX_FIRST_PAGE = 0;
+GridPagination.style = gridPaginationCss;
+
+exports.GridPagination = GridPagination;
+
+//# sourceMappingURL=grid-pagination-3511fdfa.js.map

package/dist/cjs/grid-pagination-3511fdfa.js.map

@@ -0,0 +1 @@
+{"file":"grid-pagination-3511fdfa.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\nconst getAccessibleName = (order: GridPaginationArrowProps['order'], double: GridPaginationArrowProps['double']): string => {\n  switch (order) {\n    case 'next':\n      return double ? 'Last page' : 'Next page';\n    case 'previous':\n    default:\n      return double ? 'First page' : 'Previous page';\n  }\n}\n\nexport const GridPaginationArrow: FunctionalComponent<GridPaginationArrowProps> = ({active, order, double = false}) => (\n  <wcs-button mode=\"clear\"\n              shape=\"square\"\n              size=\"s\"\n              disabled={!active}\n              title={getAccessibleName(order, double)}>\n    <svg style={{cursor: 'pointer'}}\n         aria-hidden=\"true\"\n         xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\">\n      <style type=\"text/css\">{`\n              .arrow-group {\n                  transform-origin: 50% 51%;\n                  transition: transform 175ms ease-in-out;\n              }\n              .arrow {\n                  transition: fill 175ms ease-in-out;\n                  fill: var(--wcs-text-light);\n              }\n              .second-arrow {\n                  transform: translateY(-8px);\n              }\n              .next {\n                  transform: rotate(90deg);\n              }\n              .previous {\n                  transform: rotate(-90deg);\n              }\n              .active {\n                  fill: var(--wcs-primary);\n              }\n          `}</style>\n      <g fill=\"none\" class={order + ' arrow-group'}>\n        <path class={(active ? 'active' : '') + ' arrow'} d=\"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z\"/>\n        <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\n      </g>\n      {\n        double ?\n          <g fill=\"none\" class={order + ' arrow-group'}>\n            <path class={(active ? 'active' : '') + ' arrow second-arrow'}\n                  d=\"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z\"/>\n            <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\n          </g>\n          : ''\n      }\n    </svg>\n  </wcs-button>\n);\n","@import '../../style/focus-outline.scss';\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    align-items: center;\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.page-management {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n}\n\n.pagination-arrow {\n    display: flex;\n}\n\n.pagination-counter {\n    padding: 0 var(--wcs-padding-s);\n}\n\n.items-count span:focus {\n    @include focus-outline();\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\"\n                                class=\"available-page-sizes\"\n                                aria-labelledby=\"elements-per-page-number elements-per-page-text\"\n                                value={this.pageSize}\n                                onWcsChange={this.onChangePagesize.bind(this)}>\n                        {\n                            this.availablePageSizes.map((pageSize) =>\n                                <wcs-select-option value={pageSize}>{pageSize}</wcs-select-option>\n                            )\n                        }\n                    </wcs-select>\n                    <span id=\"elements-per-page-number\" hidden>{this.pageSize}</span>\n                    <span id=\"elements-per-page-text\">&nbsp;éléments par page</span>\n                </div>\n\n                <div class=\"items-count\">\n                    <span>{this.itemsCount} éléments</span>\n                </div>\n\n                <nav aria-label=\"pagination\">\n                    <ul class=\"page-management\">\n                        <li class=\"pagination-arrow\" onClick={this.firstPage.bind(this)}>\n                            <GridPaginationArrow active={this.canGoToPreviousPage()} order=\"previous\" double></GridPaginationArrow>\n                        </li>\n                        <li class=\"pagination-arrow\" onClick={this.previousPage.bind(this)}>\n                            <GridPaginationArrow active={this.canGoToPreviousPage()} order=\"previous\"></GridPaginationArrow>\n                        </li>\n    \n                        <li class=\"pagination-counter\">\n                            <span aria-label={`Page ${this.currentPage + 1} sur ${this.pageCount}`} aria-current=\"page\">\n                                {this.currentPage + 1} / {this.pageCount}\n                            </span>\n                        </li>\n    \n                        <li class=\"pagination-arrow\" onClick={this.nextPage.bind(this)}>\n                            <GridPaginationArrow active={this.canGoToNextPage()} order=\"next\"></GridPaginationArrow>\n                        </li>\n                        <li class=\"pagination-arrow\" onClick={this.lastPage.bind(this)}>\n                            <GridPaginationArrow active={this.canGoToNextPage()} order=\"next\" double></GridPaginationArrow>\n                        </li>\n                    </ul>\n                </nav>\n            </div>\n        </Host>)\n    }\n}\n"],"version":3}

package/dist/cjs/{helpers-4a14051a.js → helpers-6280db6e.js}

@@ -24,7 +24,7 @@ const debounce = (func, wait = 0) => {
 /**
  * Elements inside of web components sometimes need to inherit global attributes
  * set on the host. For example, the inner input in `wcs-input` should inherit
- * the `title` attribute that developers set directly on `ion-input`. This
+ * the `title` attribute that developers set directly on `wcs-input`. This
  * helper function should be called in componentWillLoad and assigned to a variable
  * that is later used in the render function.
  *
@@ -44,6 +44,78 @@ const inheritAttributes = (el, attributes = []) => {
   });
   return attributeObject;
 };
+/**
+ * List of available ARIA attributes + `role`.
+ * Removed deprecated attributes.
+ * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes
+ */
+const ariaAttributes = [
+  'role',
+  'aria-activedescendant',
+  'aria-atomic',
+  'aria-autocomplete',
+  'aria-braillelabel',
+  'aria-brailleroledescription',
+  'aria-busy',
+  'aria-checked',
+  'aria-colcount',
+  'aria-colindex',
+  'aria-colindextext',
+  'aria-colspan',
+  'aria-controls',
+  'aria-current',
+  'aria-describedby',
+  'aria-description',
+  'aria-details',
+  'aria-disabled',
+  'aria-errormessage',
+  'aria-expanded',
+  'aria-flowto',
+  'aria-haspopup',
+  'aria-hidden',
+  'aria-invalid',
+  'aria-keyshortcuts',
+  'aria-label',
+  'aria-labelledby',
+  'aria-level',
+  'aria-live',
+  'aria-multiline',
+  'aria-multiselectable',
+  'aria-orientation',
+  'aria-owns',
+  'aria-placeholder',
+  'aria-posinset',
+  'aria-pressed',
+  'aria-readonly',
+  'aria-relevant',
+  'aria-required',
+  'aria-roledescription',
+  'aria-rowcount',
+  'aria-rowindex',
+  'aria-rowindextext',
+  'aria-rowspan',
+  'aria-selected',
+  'aria-setsize',
+  'aria-sort',
+  'aria-valuemax',
+  'aria-valuemin',
+  'aria-valuenow',
+  'aria-valuetext',
+];
+/**
+ * Returns an array of aria attributes that should be copied from
+ * the shadow host element to a target within the light DOM.
+ * @param el The element that the attributes should be copied from.
+ * @param ignoreList The list of aria-attributes to ignore reflecting and removing from the host.
+ * Use this in instances where we manually specify aria attributes on the `<Host>` element.
+ */
+const inheritAriaAttributes = (el, ignoreList) => {
+  let attributesToInherit = ariaAttributes;
+  if (ignoreList && ignoreList.length > 0) {
+    attributesToInherit = attributesToInherit.filter((attr) => !ignoreList.includes(attr));
+  }
+  return inheritAttributes(el, attributesToInherit);
+};
 const findItemLabel = (componentEl) => {
   const itemEl = componentEl.closest('wcs-form-field');
   if (itemEl) {
@@ -127,6 +199,7 @@ exports.debounceEvent = debounceEvent;
 exports.findItemLabel = findItemLabel;
 exports.generateUniqueId = generateUniqueId;
 exports.hasShadowDom = hasShadowDom;
+exports.inheritAriaAttributes = inheritAriaAttributes;
 exports.inheritAttributes = inheritAttributes;
 exports.isDownArrowKey = isDownArrowKey;
 exports.isElement = isElement;
@@ -145,4 +218,4 @@ exports.isTabKey = isTabKey;
 exports.isUpArrowKey = isUpArrowKey;
 exports.raf = raf;
 
-//# sourceMappingURL=helpers-4a14051a.js.map
+//# sourceMappingURL=helpers-6280db6e.js.map

package/dist/cjs/helpers-6280db6e.js.map

@@ -0,0 +1 @@
+{"file":"helpers-6280db6e.js","mappings":"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","names":[],"sources":["./src/utils/helpers.ts"],"sourcesContent":["import { EventEmitter } from '@stencil/core';\n\nexport function isElement(element: any): element is Element {\n    return 'clientWidth' in element\n        && 'clientHeight' in element;\n}\n\nexport function hasShadowDom(el: HTMLElement) {\n    return !!el.shadowRoot && !!(el as any).attachShadow;\n}\n\nexport const debounceEvent = (event: EventEmitter, wait: number): EventEmitter => {\n    const original = (event as any)._original || event;\n    return {\n        _original: event,\n        emit: debounce(original.emit.bind(original), wait)\n    } as EventEmitter;\n};\n\nexport const debounce = (func: (...args: any[]) => void, wait = 0) => {\n    let timer: any;\n    return (...args: any[]): any => {\n        clearTimeout(timer);\n        timer = setTimeout(func, wait, ...args);\n    };\n};\n\n/**\n * Elements inside of web components sometimes need to inherit global attributes\n * set on the host. For example, the inner input in `wcs-input` should inherit\n * the `title` attribute that developers set directly on `wcs-input`. This\n * helper function should be called in componentWillLoad and assigned to a variable\n * that is later used in the render function.\n *\n * This does not need to be reactive as changing attributes on the host element\n * does not trigger a re-render.\n */\nexport const inheritAttributes = (el: HTMLElement, attributes: string[] = []) => {\n    const attributeObject: { [k: string]: any } = {};\n\n    attributes.forEach(attr => {\n        if (el.hasAttribute(attr)) {\n            const value = el.getAttribute(attr);\n            if (value !== null) {\n                attributeObject[attr] = el.getAttribute(attr);\n            }\n            el.removeAttribute(attr);\n        }\n    });\n\n    return attributeObject;\n}\n\n/**\n * List of available ARIA attributes + `role`.\n * Removed deprecated attributes.\n * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes\n */\nconst ariaAttributes = [\n    'role',\n    'aria-activedescendant',\n    'aria-atomic',\n    'aria-autocomplete',\n    'aria-braillelabel',\n    'aria-brailleroledescription',\n    'aria-busy',\n    'aria-checked',\n    'aria-colcount',\n    'aria-colindex',\n    'aria-colindextext',\n    'aria-colspan',\n    'aria-controls',\n    'aria-current',\n    'aria-describedby',\n    'aria-description',\n    'aria-details',\n    'aria-disabled',\n    'aria-errormessage',\n    'aria-expanded',\n    'aria-flowto',\n    'aria-haspopup',\n    'aria-hidden',\n    'aria-invalid',\n    'aria-keyshortcuts',\n    'aria-label',\n    'aria-labelledby',\n    'aria-level',\n    'aria-live',\n    'aria-multiline',\n    'aria-multiselectable',\n    'aria-orientation',\n    'aria-owns',\n    'aria-placeholder',\n    'aria-posinset',\n    'aria-pressed',\n    'aria-readonly',\n    'aria-relevant',\n    'aria-required',\n    'aria-roledescription',\n    'aria-rowcount',\n    'aria-rowindex',\n    'aria-rowindextext',\n    'aria-rowspan',\n    'aria-selected',\n    'aria-setsize',\n    'aria-sort',\n    'aria-valuemax',\n    'aria-valuemin',\n    'aria-valuenow',\n    'aria-valuetext',\n];\n\n/**\n * Returns an array of aria attributes that should be copied from\n * the shadow host element to a target within the light DOM.\n * @param el The element that the attributes should be copied from.\n * @param ignoreList The list of aria-attributes to ignore reflecting and removing from the host.\n * Use this in instances where we manually specify aria attributes on the `<Host>` element.\n */\nexport const inheritAriaAttributes = (el: HTMLElement, ignoreList?: string[]) => {\n    let attributesToInherit = ariaAttributes;\n    if (ignoreList && ignoreList.length > 0) {\n        attributesToInherit = attributesToInherit.filter((attr) => !ignoreList.includes(attr));\n    }\n    return inheritAttributes(el, attributesToInherit);\n};\n\nexport const findItemLabel = (componentEl: HTMLElement): HTMLWcsLabelElement | null => {\n    const itemEl = componentEl.closest('wcs-form-field');\n    if (itemEl) {\n        return itemEl.querySelector('wcs-label');\n    }\n    return null;\n};\n\ndeclare const __zone_symbol__requestAnimationFrame: any;\n\n/**\n * Patched version of requestAnimationFrame that avoids ngzone\n * Use only when you know ngzone should not run\n */\nexport const raf = (h: any) => {\n    if (typeof __zone_symbol__requestAnimationFrame === 'function') {\n        return __zone_symbol__requestAnimationFrame(h);\n    }\n    if (typeof requestAnimationFrame === 'function') {\n        return requestAnimationFrame(h);\n    }\n    return setTimeout(h);\n};\n\n/**\n * Return true if the mouseEvent click is inside the given HTML element\n */\nexport const clickInsideElement = (event: MouseEvent, element: HTMLElement): boolean => {\n    return event.x >= element.getBoundingClientRect().x && event.x <= element.getBoundingClientRect().x + element.getBoundingClientRect().width\n        && event.y >= element.getBoundingClientRect().y && event.y <= element.getBoundingClientRect().y + element.getBoundingClientRect().height;\n}\n\n\nexport const clickTargetIsElementOrChildren = (mouseEvent: MouseEvent, element: HTMLElement) => {\n    return mouseEvent.target instanceof Node\n        && element.contains(mouseEvent.target);\n}\n\nexport function generateUniqueId(componentName: string): string {\n    return componentName + \"-\" + Math.random().toString(36);\n}\n\nexport function isKeyup(evt: KeyboardEvent) {\n    return evt.code === 'ArrowUp';\n}\n\nexport function isKeydown(evt: KeyboardEvent) {\n    return evt.code === 'ArrowDown';\n}\n\nexport function isEscapeKey(evt: KeyboardEvent) {\n    return evt.code === 'Escape';\n}\n\nexport function isSpaceKey(evt: KeyboardEvent) {\n    return evt.code === 'Space';\n}\n\nexport function isEnterKey(evt: KeyboardEvent) {\n    return evt.key === 'Enter';\n}\n\nexport function isHomeKey(evt: KeyboardEvent) {\n    return evt.code === 'Home';\n}\n\nexport function isEndKey(evt: KeyboardEvent) {\n    return evt.code === 'End';\n}\n\nexport function isUpArrowKey(evt: KeyboardEvent) {\n    return evt.key === 'ArrowUp';\n}\n\nexport function isDownArrowKey(evt: KeyboardEvent) {\n    return evt.key === 'ArrowDown';\n}\n\nexport function isLeftArrowKey(evt: KeyboardEvent) {\n    return evt.key === 'ArrowLeft';\n}\n\nexport function isRightArrowKey(evt: KeyboardEvent) {\n    return evt.key === 'ArrowRight';\n}\n\nexport function isPageDownKey(evt: KeyboardEvent) {\n    return evt.key === 'PageDown';\n}\n\nexport function isPageUpKey(evt: KeyboardEvent) {\n    return evt.key === 'PageUp';\n}\n\nexport function isTabKey(evt: KeyboardEvent) {\n    return evt.key === 'Tab';\n}\n\nexport function isCtrlA(evt: KeyboardEvent) {\n    return evt.key === 'a' && evt.ctrlKey;\n}"],"version":3}

package/dist/cjs/{index-ca67a6dc.js → index-749d999e.js}

@@ -1407,6 +1407,9 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
             promise = safeCall(instance, 'componentWillUpdate');
         }
     }
+    {
+        promise = then(promise, () => safeCall(instance, 'componentWillRender'));
+    }
     endSchedule();
     return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
 };
@@ -2153,4 +2156,4 @@ exports.readTask = readTask;
 exports.registerInstance = registerInstance;
 exports.setNonce = setNonce;
 
-//# sourceMappingURL=index-ca67a6dc.js.map
+//# sourceMappingURL=index-749d999e.js.map