wcs-core 4.1.0 → 4.2.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-e99b032d.js

@@ -0,0 +1,68 @@
+'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',
+];
+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 (wcsFocusableElements.includes(element.tagName.toLowerCase())) {
+    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-e99b032d.js.map

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

@@ -0,0 +1 @@
+{"file":"accessibility-e99b032d.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;SAEc,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,oBAAoB,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,EAAE;IAC9D,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\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 (wcsFocusableElements.includes(element.tagName.toLowerCase())) {\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/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["wcs-editable-field.cjs",[[1,"wcs-editable-field",{"type":[1],"label":[1],"readonly":[4],"value":[1032],"validateFn":[16],"formatFn":[16],"errorMsg":[1,"error-msg"],"size":[513],"currentState":[32],"isError":[32]},[[8,"click","onWindowClickEvent"]]]]],["wcs-horizontal-stepper.cjs",[[1,"wcs-horizontal-stepper",{"currentStep":[1026,"current-step"],"steps":[16],"mode":[1],"checkOnComplete":[4,"check-on-complete"],"internalCurrentStep":[32],"previous":[64],"next":[64]}]]],["wcs-counter.cjs",[[1,"wcs-counter",{"size":[513],"label":[1],"min":[1026],"max":[1026],"step":[1026],"value":[1026],"displayedValue":[32]}]]],["wcs-grid.cjs",[[1,"wcs-grid",{"serverMode":[4,"server-mode"],"data":[16],"loading":[4],"selectionConfig":[1,"selection-config"],"selectedItems":[8,"selected-items"],"wcsGridPaginationId":[1,"wcs-grid-pagination-id"],"rowIdPath":[1,"row-id-path"],"columns":[32],"paginationEl":[32],"rows":[32]},[[0,"wcsHiddenChange","onHiddenColumnChange"],[0,"wcsSortChange","sortChangeEventHandler"],[0,"wcsGridPaginationChange","paginationChangeEventHandler"],[8,"wcsGridPaginationChange","paginationChangeEventHandlerOutside"]]]]],["wcs-grid-pagination.cjs",[[1,"wcs-grid-pagination",{"availablePageSizes":[16],"currentPage":[2,"current-page"],"pageSize":[2,"page-size"],"itemsCount":[2,"items-count"],"pageCount":[2,"page-count"]}]]],["wcs-modal.cjs",[[4,"wcs-modal",{"withoutBackdrop":[516,"without-backdrop"],"show":[516],"showCloseButton":[516,"show-close-button"],"size":[1],"hideActions":[516,"hide-actions"]},[[4,"keydown","onKeyDown"]]]]],["wcs-dropdown.cjs",[[1,"wcs-dropdown",{"noArrow":[4,"no-arrow"],"mode":[1],"shape":[1],"disabled":[4],"placement":[1],"expanded":[32]},[[8,"click","onWindowClickEvent"],[0,"wcsDropdownItemClick","dropdownItemClick"],[0,"keydown","onKeyDown"]]]]],["wcs-galactic-menu.cjs",[[1,"wcs-galactic-menu",{"text":[1],"showPopoverMenu":[32]},[[8,"click","onWindowClickEvent"]]]]],["wcs-input.cjs",[[17,"wcs-input",{"fireFocusEvents":[4,"fire-focus-events"],"accept":[1],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"autofocus":[4],"clearInput":[4,"clear-input"],"clearOnEdit":[4,"clear-on-edit"],"debounce":[2],"prefixLabel":[1,"prefix-label"],"suffixLabel":[1,"suffix-label"],"disabled":[4],"enterkeyhint":[1],"size":[513],"icon":[1],"inputmode":[1],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"state":[513],"step":[1],"type":[1],"value":[1032],"hasFocus":[32],"passwordReveal":[32],"setFocus":[64],"setBlur":[64],"getInputElement":[64]}]]],["wcs-textarea.cjs",[[1,"wcs-textarea",{"fireFocusEvents":[4,"fire-focus-events"],"autocapitalize":[1],"autofocus":[4],"clearOnEdit":[1028,"clear-on-edit"],"debounce":[2],"disabled":[4],"icon":[1],"inputmode":[1],"enterkeyhint":[1],"maxlength":[2],"minlength":[2],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"state":[513],"cols":[2],"rows":[2],"wrap":[1],"autoGrow":[4,"auto-grow"],"value":[1025],"resize":[513],"hasFocus":[32],"fitContent":[64],"setFocus":[64],"setBlur":[64],"getInputElement":[64]}]]],["wcs-accordion.cjs",[[1,"wcs-accordion",{"hideActionText":[516,"hide-action-text"],"highlight":[516],"groupContentWithHeader":[516,"group-content-with-header"]},[[0,"wcsOpenChange","wcsOpenChangeHandler"]]]]],["wcs-accordion-content.cjs",[[1,"wcs-accordion-content"]]],["wcs-accordion-header.cjs",[[1,"wcs-accordion-header"]]],["wcs-accordion-panel.cjs",[[1,"wcs-accordion-panel",{"open":[1540],"hideActionText":[516,"hide-action-text"],"highlight":[516],"groupContentWithHeader":[516,"group-content-with-header"],"close":[64]}]]],["wcs-action-bar.cjs",[[1,"wcs-action-bar",{"gutter":[4],"hasTabs":[32]}]]],["wcs-app.cjs",[[1,"wcs-app"]]],["wcs-badge.cjs",[[1,"wcs-badge",{"shape":[1],"color":[1]}]]],["wcs-card.cjs",[[1,"wcs-card",{"mode":[1537]}]]],["wcs-card-body.cjs",[[1,"wcs-card-body"]]],["wcs-com-nav.cjs",[[1,"wcs-com-nav",{"appName":[1,"app-name"],"mobileMenuOpen":[32],"currentActiveSizing":[32]},[[0,"wcsClickOnFinalAction","onClickOnFinalAction"],[0,"wcsCategoryItemClicked","onClickOnFinalActionCat"],[8,"keydown","exitMobileMenuOnKeyDown"]]]]],["wcs-com-nav-category.cjs",[[1,"wcs-com-nav-category",{"label":[1],"categoryOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsCategoryOpened","onSubmenuOpened"]]]]],["wcs-com-nav-submenu.cjs",[[1,"wcs-com-nav-submenu",{"label":[1],"panelTitle":[1,"panel-title"],"panelDescription":[1,"panel-description"],"menuOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsSubmenuOpened","onSubmenuOpened"],[8,"keydown","onEscapeKeyDown"],[0,"wcsCategoryItemClicked","wcsCategoryItemClickedHandler"]]]]],["wcs-divider.cjs",[[1,"wcs-divider"]]],["wcs-dropdown-divider.cjs",[[1,"wcs-dropdown-divider"]]],["wcs-dropdown-header.cjs",[[1,"wcs-dropdown-header"]]],["wcs-dropdown-item.cjs",[[4,"wcs-dropdown-item",null,[[1,"mousedown","onMouseDown"],[0,"keydown","onKeyDown"]]]]],["wcs-field.cjs",[[1,"wcs-field"]]],["wcs-field-content.cjs",[[1,"wcs-field-content"]]],["wcs-field-label.cjs",[[1,"wcs-field-label"]]],["wcs-footer.cjs",[[1,"wcs-footer"]]],["wcs-galactic.cjs",[[1,"wcs-galactic",{"text":[1],"show":[32]}]]],["wcs-grid-column.cjs",[[1,"wcs-grid-column",{"path":[1],"name":[1],"sort":[4],"sortFn":[16],"formatter":[16],"sortOrder":[1025,"sort-order"],"width":[1],"customCells":[4,"custom-cells"],"hidden":[4]}]]],["wcs-grid-custom-cell.cjs",[[1,"wcs-grid-custom-cell",{"columnId":[1,"column-id"],"rowId":[8,"row-id"]}]]],["wcs-header.cjs",[[1,"wcs-header"]]],["wcs-hint.cjs",[[1,"wcs-hint",{"small":[1540]}]]],["wcs-icon.cjs",[[0,"wcs-icon",{"icon":[1],"size":[1]}]]],["wcs-label.cjs",[[1,"wcs-label",{"required":[516]}]]],["wcs-list-item.cjs",[[1,"wcs-list-item",{"activated":[1028]}]]],["wcs-list-item-properties.cjs",[[1,"wcs-list-item-properties"]]],["wcs-list-item-property.cjs",[[1,"wcs-list-item-property"]]],["wcs-native-select.cjs",[[1,"wcs-native-select",{"size":[513],"expanded":[32],"disabled":[32]}]]],["wcs-nav.cjs",[[1,"wcs-nav"]]],["wcs-nav-item.cjs",[[4,"wcs-nav-item",{"text":[513],"href":[513]},[[0,"keydown","onKeyDown"]]]]],["wcs-progress-radial.cjs",[[1,"wcs-progress-radial",{"size":[2],"showLabel":[4,"show-label"],"value":[2]}]]],["wcs-radio-group.cjs",[[1,"wcs-radio-group",{"value":[8],"name":[520],"mode":[513]},[[0,"wcsRadioClick","selectedOptionChanged"]]]]],["wcs-skeleton-circle.cjs",[[1,"wcs-skeleton-circle",{"animation":[513],"radius":[514]}]]],["wcs-skeleton-rectangle.cjs",[[1,"wcs-skeleton-rectangle",{"animation":[513],"rounded":[516],"height":[513],"width":[513]}]]],["wcs-skeleton-text.cjs",[[1,"wcs-skeleton-text",{"animation":[513],"height":[1]}]]],["wcs-switch.cjs",[[1,"wcs-switch",{"name":[1],"checked":[516],"labelAlignment":[513,"label-alignment"],"disabled":[4]}]]],["wcs-tab.cjs",[[1,"wcs-tab",{"header":[513],"itemKey":[8,"item-key"]}]]],["wcs-tabs.cjs",[[1,"wcs-tabs",{"align":[513],"selectedIndex":[2,"selected-index"],"selectedKey":[8,"selected-key"],"headersOnly":[4,"headers-only"],"gutter":[4],"headers":[32],"currentActiveTabIndex":[32]},[[0,"tabLoaded","onTabLoaded"]]]]],["wcs-tooltip.cjs",[[1,"wcs-tooltip",{"for":[1],"position":[513],"interactive":[4],"maxWidth":[8,"max-width"],"delay":[2],"duration":[2],"trigger":[1],"theme":[1],"content":[1],"appendTo":[1,"append-to"],"hide":[64],"show":[64],"disable":[64],"enable":[64]}]]],["wcs-progress-bar.cjs",[[1,"wcs-progress-bar",{"small":[4],"showLabel":[4,"show-label"],"value":[2]}]]],["wcs-radio.cjs",[[1,"wcs-radio",{"mode":[513],"value":[1544],"label":[1537],"checked":[1540],"disabled":[1028]},[[0,"keydown","onKeyDown"]]]]],["wcs-select_2.cjs",[[4,"wcs-select-option",{"disabled":[1540],"selected":[1540],"value":[8],"chipColor":[1,"chip-color"],"chipBackgroundColor":[1,"chip-background-color"],"multiple":[1540]},[[1,"mousedown","onMouseDown"],[0,"keydown","handleKeydown"]]],[1,"wcs-select",{"size":[513],"value":[1032],"placeholder":[1537],"disabled":[1028],"multiple":[516],"chips":[516],"name":[1],"compareWith":[16],"expanded":[32],"hasLoaded":[32],"displayText":[32],"focused":[32],"overlayDirection":[32],"open":[64],"close":[64]},[[1,"mousedown","onMouseDown"],[8,"click","onWindowClickEvent"],[0,"keydown","onKeyDown"],[0,"wcsSelectOptionClick","selectedOptionChanged"]]]]],["wcs-error_2.cjs",[[1,"wcs-error"],[1,"wcs-form-field",{"isError":[1540,"is-error"],"hasPrefix":[32],"hasSuffix":[32],"spiedElement":[32]}]]],["wcs-checkbox.cjs",[[1,"wcs-checkbox",{"name":[1],"indeterminate":[1540],"checked":[1540],"labelAlignment":[1537,"label-alignment"],"disabled":[4]}]]],["wcs-button.cjs",[[17,"wcs-button",{"type":[1025],"href":[1],"target":[1],"disabled":[516],"ripple":[4],"size":[513],"shape":[513],"mode":[513],"loading":[1028]},[[0,"click","onClick"]]]]],["wcs-mat-icon.cjs",[[1,"wcs-mat-icon",{"icon":[1],"size":[1],"family":[1]}]]],["wcs-spinner.cjs",[[1,"wcs-spinner",{"mode":[513]}]]]], options);
+  return index.bootstrapLazy([["wcs-editable-field.cjs",[[1,"wcs-editable-field",{"type":[1],"label":[1],"readonly":[4],"value":[1032],"validateFn":[16],"formatFn":[16],"errorMsg":[1,"error-msg"],"size":[513],"currentState":[32],"isError":[32]},[[8,"click","onWindowClickEvent"]]]]],["wcs-horizontal-stepper.cjs",[[1,"wcs-horizontal-stepper",{"currentStep":[1026,"current-step"],"steps":[16],"mode":[1],"checkOnComplete":[4,"check-on-complete"],"internalCurrentStep":[32],"previous":[64],"next":[64]}]]],["wcs-counter.cjs",[[17,"wcs-counter",{"size":[513],"label":[1],"min":[1026],"max":[1026],"step":[1026],"value":[1026],"displayedValue":[32]}]]],["wcs-grid.cjs",[[1,"wcs-grid",{"serverMode":[4,"server-mode"],"data":[16],"loading":[4],"selectionConfig":[1,"selection-config"],"selectedItems":[8,"selected-items"],"wcsGridPaginationId":[1,"wcs-grid-pagination-id"],"rowIdPath":[1,"row-id-path"],"columns":[32],"paginationEl":[32],"rows":[32]},[[0,"wcsHiddenChange","onHiddenColumnChange"],[0,"wcsSortChange","sortChangeEventHandler"],[0,"wcsGridPaginationChange","paginationChangeEventHandler"],[8,"wcsGridPaginationChange","paginationChangeEventHandlerOutside"]]]]],["wcs-grid-pagination.cjs",[[1,"wcs-grid-pagination",{"availablePageSizes":[16],"currentPage":[2,"current-page"],"pageSize":[2,"page-size"],"itemsCount":[2,"items-count"],"pageCount":[2,"page-count"]}]]],["wcs-modal.cjs",[[4,"wcs-modal",{"withoutBackdrop":[516,"without-backdrop"],"show":[516],"showCloseButton":[516,"show-close-button"],"size":[1],"hideActions":[516,"hide-actions"]},[[4,"keydown","onKeyDown"]]]]],["wcs-dropdown.cjs",[[17,"wcs-dropdown",{"noArrow":[4,"no-arrow"],"mode":[1],"shape":[1],"disabled":[4],"placement":[1],"expanded":[32]},[[8,"click","onWindowClickEvent"],[0,"wcsDropdownItemClick","dropdownItemClick"],[0,"keydown","onKeyDown"]]]]],["wcs-galactic-menu.cjs",[[1,"wcs-galactic-menu",{"text":[1],"showPopoverMenu":[32]},[[8,"click","onWindowClickEvent"]]]]],["wcs-input.cjs",[[17,"wcs-input",{"fireFocusEvents":[4,"fire-focus-events"],"accept":[1],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"autofocus":[4],"clearInput":[4,"clear-input"],"clearOnEdit":[4,"clear-on-edit"],"debounce":[2],"prefixLabel":[1,"prefix-label"],"suffixLabel":[1,"suffix-label"],"disabled":[4],"enterkeyhint":[1],"size":[513],"icon":[1],"inputmode":[1],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"state":[513],"step":[1],"type":[1],"value":[1032],"hasFocus":[32],"passwordReveal":[32],"setFocus":[64],"setBlur":[64],"getInputElement":[64]}]]],["wcs-textarea.cjs",[[17,"wcs-textarea",{"fireFocusEvents":[4,"fire-focus-events"],"autocapitalize":[1],"autofocus":[4],"clearOnEdit":[1028,"clear-on-edit"],"debounce":[2],"disabled":[4],"icon":[1],"inputmode":[1],"enterkeyhint":[1],"maxlength":[2],"minlength":[2],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"state":[513],"cols":[2],"rows":[2],"wrap":[1],"autoGrow":[4,"auto-grow"],"value":[1025],"resize":[513],"hasFocus":[32],"fitContent":[64],"setFocus":[64],"setBlur":[64],"getInputElement":[64]}]]],["wcs-accordion.cjs",[[1,"wcs-accordion",{"hideActionText":[516,"hide-action-text"],"highlight":[516],"groupContentWithHeader":[516,"group-content-with-header"]},[[0,"wcsOpenChange","wcsOpenChangeHandler"]]]]],["wcs-accordion-content.cjs",[[1,"wcs-accordion-content"]]],["wcs-accordion-header.cjs",[[1,"wcs-accordion-header"]]],["wcs-accordion-panel.cjs",[[1,"wcs-accordion-panel",{"open":[1540],"hideActionText":[516,"hide-action-text"],"highlight":[516],"groupContentWithHeader":[516,"group-content-with-header"],"close":[64]}]]],["wcs-action-bar.cjs",[[1,"wcs-action-bar",{"gutter":[4],"hasTabs":[32]}]]],["wcs-app.cjs",[[1,"wcs-app"]]],["wcs-badge.cjs",[[1,"wcs-badge",{"shape":[1],"color":[1]}]]],["wcs-card.cjs",[[1,"wcs-card",{"mode":[1537]}]]],["wcs-card-body.cjs",[[1,"wcs-card-body"]]],["wcs-com-nav.cjs",[[1,"wcs-com-nav",{"appName":[1,"app-name"],"mobileMenuOpen":[32],"currentActiveSizing":[32]},[[0,"wcsClickOnFinalAction","onClickOnFinalAction"],[0,"wcsCategoryItemClicked","onClickOnFinalActionCat"],[8,"keydown","exitMobileMenuOnKeyDown"]]]]],["wcs-com-nav-category.cjs",[[1,"wcs-com-nav-category",{"label":[1],"categoryOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsCategoryOpened","onSubmenuOpened"]]]]],["wcs-com-nav-submenu.cjs",[[1,"wcs-com-nav-submenu",{"label":[1],"panelTitle":[1,"panel-title"],"panelDescription":[1,"panel-description"],"menuOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsSubmenuOpened","onSubmenuOpened"],[8,"keydown","onEscapeKeyDown"],[0,"wcsCategoryItemClicked","wcsCategoryItemClickedHandler"]]]]],["wcs-divider.cjs",[[1,"wcs-divider"]]],["wcs-dropdown-divider.cjs",[[1,"wcs-dropdown-divider"]]],["wcs-dropdown-header.cjs",[[1,"wcs-dropdown-header"]]],["wcs-dropdown-item.cjs",[[4,"wcs-dropdown-item",null,[[1,"mousedown","onMouseDown"],[0,"keydown","onKeyDown"]]]]],["wcs-field.cjs",[[1,"wcs-field"]]],["wcs-field-content.cjs",[[1,"wcs-field-content"]]],["wcs-field-label.cjs",[[1,"wcs-field-label"]]],["wcs-footer.cjs",[[1,"wcs-footer"]]],["wcs-galactic.cjs",[[1,"wcs-galactic",{"text":[1],"show":[32]}]]],["wcs-grid-column.cjs",[[1,"wcs-grid-column",{"path":[1],"name":[1],"sort":[4],"sortFn":[16],"formatter":[16],"sortOrder":[1025,"sort-order"],"width":[1],"customCells":[4,"custom-cells"],"hidden":[4]}]]],["wcs-grid-custom-cell.cjs",[[1,"wcs-grid-custom-cell",{"columnId":[1,"column-id"],"rowId":[8,"row-id"]}]]],["wcs-header.cjs",[[1,"wcs-header"]]],["wcs-hint.cjs",[[1,"wcs-hint",{"small":[1540]}]]],["wcs-icon.cjs",[[0,"wcs-icon",{"icon":[1],"size":[1]}]]],["wcs-label.cjs",[[1,"wcs-label",{"required":[516]}]]],["wcs-list-item.cjs",[[1,"wcs-list-item",{"activated":[1028]}]]],["wcs-list-item-properties.cjs",[[1,"wcs-list-item-properties"]]],["wcs-list-item-property.cjs",[[1,"wcs-list-item-property"]]],["wcs-native-select.cjs",[[1,"wcs-native-select",{"size":[513],"expanded":[32],"disabled":[32],"updateStyles":[64]}]]],["wcs-nav.cjs",[[1,"wcs-nav"]]],["wcs-nav-item.cjs",[[4,"wcs-nav-item",{"text":[513],"href":[513]},[[0,"keydown","onKeyDown"]]]]],["wcs-progress-radial.cjs",[[1,"wcs-progress-radial",{"size":[2],"showLabel":[4,"show-label"],"value":[2]}]]],["wcs-radio-group.cjs",[[1,"wcs-radio-group",{"value":[8],"name":[520],"mode":[513]},[[0,"wcsRadioClick","selectedOptionChanged"],[0,"keydown","handleKeyDown"],[0,"keyup","handleKeyUp"]]]]],["wcs-skeleton-circle.cjs",[[1,"wcs-skeleton-circle",{"animation":[513],"radius":[514]}]]],["wcs-skeleton-rectangle.cjs",[[1,"wcs-skeleton-rectangle",{"animation":[513],"rounded":[516],"height":[513],"width":[513]}]]],["wcs-skeleton-text.cjs",[[1,"wcs-skeleton-text",{"animation":[513],"height":[1]}]]],["wcs-switch.cjs",[[1,"wcs-switch",{"name":[1],"checked":[516],"labelAlignment":[513,"label-alignment"],"disabled":[4]}]]],["wcs-tab.cjs",[[1,"wcs-tab",{"header":[513],"itemKey":[8,"item-key"]}]]],["wcs-tabs.cjs",[[1,"wcs-tabs",{"align":[513],"selectedIndex":[2,"selected-index"],"selectedKey":[8,"selected-key"],"headersOnly":[4,"headers-only"],"gutter":[4],"description":[1],"headers":[32],"currentActiveTabIndex":[32]},[[0,"tabLoaded","onTabLoaded"]]]]],["wcs-tooltip.cjs",[[1,"wcs-tooltip",{"for":[1],"position":[513],"interactive":[4],"maxWidth":[8,"max-width"],"delay":[2],"duration":[2],"trigger":[1],"theme":[1],"content":[1],"appendTo":[1,"append-to"],"hide":[64],"show":[64],"disable":[64],"enable":[64]}]]],["wcs-progress-bar.cjs",[[1,"wcs-progress-bar",{"small":[4],"showLabel":[4,"show-label"],"value":[2]}]]],["wcs-radio.cjs",[[17,"wcs-radio",{"mode":[513],"value":[1544],"label":[1537],"checked":[1540],"disabled":[1028],"name":[1]},[[0,"keydown","onKeyDown"]]]]],["wcs-select_2.cjs",[[4,"wcs-select-option",{"disabled":[1540],"selected":[1540],"value":[8],"chipColor":[1,"chip-color"],"chipBackgroundColor":[1,"chip-background-color"],"multiple":[1540]},[[1,"mousedown","onMouseDown"],[0,"keydown","handleKeydown"]]],[1,"wcs-select",{"size":[513],"value":[1032],"placeholder":[1537],"disabled":[1028],"multiple":[516],"chips":[516],"name":[1],"compareWith":[16],"expanded":[32],"hasLoaded":[32],"displayText":[32],"focused":[32],"overlayDirection":[32],"open":[64],"close":[64]},[[1,"mousedown","onMouseDown"],[8,"click","onWindowClickEvent"],[0,"keydown","onKeyDown"],[0,"wcsSelectOptionClick","selectedOptionChanged"]]]]],["wcs-error_2.cjs",[[1,"wcs-error"],[1,"wcs-form-field",{"isError":[1540,"is-error"],"hasPrefix":[32],"hasSuffix":[32],"spiedElement":[32]}]]],["wcs-checkbox.cjs",[[17,"wcs-checkbox",{"name":[1],"indeterminate":[1540],"checked":[1540],"labelAlignment":[1537,"label-alignment"],"disabled":[4]}]]],["wcs-button.cjs",[[17,"wcs-button",{"type":[1025],"href":[1],"target":[1],"disabled":[516],"ripple":[4],"size":[513],"shape":[513],"mode":[513],"loading":[1028]},[[0,"click","onClick"]]]]],["wcs-mat-icon.cjs",[[1,"wcs-mat-icon",{"icon":[1],"size":[1],"family":[1]}]]],["wcs-spinner.cjs",[[1,"wcs-spinner",{"mode":[513]}]]]], options);
   });
 };
 

package/dist/cjs/wcs-checkbox.cjs.entry.js

@@ -27,6 +27,7 @@ const Checkbox = class {
   render() {
     return (index.h(index.Host, null, index.h("label", { htmlFor: this.name, class: "wcs-container", "aria-disabled": this.disabled }, index.h("input", { onChange: (evt) => this.handleChange(evt), checked: this.checked, class: "wcs-checkbox", type: "checkbox", name: this.name, disabled: this.disabled, id: this.name }), index.h("span", { class: "wcs-checkmark" }), index.h("span", { class: "text" }, index.h("slot", null)))));
   }
+  static get delegatesFocus() { return true; }
 };
 let checkboxIds = 0;
 Checkbox.style = checkboxCss;

package/dist/cjs/wcs-checkbox.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-checkbox.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,24EAA24E;;MCQl5E,QAAQ;;;;IACT,eAAU,GAAG,gBAAgB,WAAW,EAAE,EAAE,CAAC;gBACtC,IAAI,CAAC,UAAU;yBAK0B,KAAK;mBAKX,KAAK;0BAK0B,QAAQ;oBAK7D,KAAK;;EAOjC,YAAY,CAAC,MAAa;IACtB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC3B,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC7B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;MAChB,OAAO,EAAE,IAAI,CAAC,OAAO;KACxB,CAAC,CAAC;GACN;EAED,MAAM;IACF,QACIA,QAACC,UAAI,QACDD,mBAAO,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,eAAe,mBAAgB,IAAI,CAAC,QAAQ,IACzEA,mBAAO,QAAQ,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,EACzC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,IAAI,GACZ,EACRA,kBAAM,KAAK,EAAC,eAAe,GAAQ,EACnCA,kBAAM,KAAK,EAAC,MAAM,IACdA,qBAAO,CACJ,CACH,CACL,EACT;GACL;;AAGL,IAAI,WAAW,GAAG,CAAC,CAAC;;;;;","names":["h","Host"],"sources":["./src/components/checkbox/checkbox.scss?tag=wcs-checkbox&encapsulation=shadow","./src/components/checkbox/checkbox.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-checkbox-border-color: var(--wcs-text-medium);\n    --wcs-checkbox-text-color: var(--wcs-text-medium);\n    display: flex;\n}\n\n:host([disabled]) {\n    --wcs-checkbox-border-color: var(--wcs-light);\n    --wcs-checkbox-text-color: var(--wcs-text-disabled);\n\n    .wcs-container {\n        cursor: not-allowed;\n    }\n}\n\n.wcs-checkmark {\n    transition: background-color 225ms cubic-bezier(.17, .84, .44, 1),\n        color 225ms cubic-bezier(.17, .84, .44, 1);\n}\n\n/* Customize the label (the wcs-container) */\n.wcs-container {\n    position: relative;\n    font-size: 1rem;\n    user-select: none;\n    font-weight: 500;\n    display: flex;\n}\n\n.wcs-container:not([aria-disabled]) {\n    cursor: pointer;\n}\n\n/* Let the user choose the alignment of the checkbox with the label text */\n:host([label-alignment=\"top\"]){\n    .wcs-container {\n        align-items: start;\n    }\n}\n\n:host([label-alignment=\"center\"]){\n    .wcs-container {\n        align-items: center;\n    }\n}\n\n:host([label-alignment=\"bottom\"]){\n    .wcs-container {\n        align-items: flex-end;\n    }\n}\n\n/* Hide the browser's default checkbox */\n.wcs-container input {\n    position: absolute;\n    opacity: 0;\n    height: 1px;\n    width: 1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n}\n\n.wcs-container:hover:not([aria-disabled]), input:focus {\n    --wcs-checkbox-border-color: var(--wcs-primary);\n\n    --wcs-checkbox-text-color: var(--wcs-primary);\n}\n\n.wcs-container:has(input:focus-visible) {\n    @include focus-outline($border-radius: calc(var(--wcs-border-radius) / 2));\n}\n\n@supports not selector(.wcs-container:has(input:focus-visible)){\n    .wcs-container:focus-within {\n        @include focus-outline($border-radius: calc(var(--wcs-border-radius) /2));\n    }\n}\n\n/* Create a custom checkbox */\n.wcs-checkmark {\n    flex: 0 0 1.125rem;\n    width: 1.125rem;\n    height: 1.125rem;\n    border: 2px solid var(--wcs-checkbox-border-color);\n    border-radius: 3px;\n}\n\n:host([indeterminate]) {\n    .wcs-checkmark {\n        --wcs-checkbox-border-color: var(--wcs-primary);\n        background: var(--wcs-primary);\n    }\n}\n\n/* When the checkbox is checked, add a blue background */\n.wcs-container:not([aria-disabled]) input:checked~.wcs-checkmark {\n    background-color: var(--wcs-primary);\n    --wcs-checkbox-border-color: var(--wcs-primary);\n}\n.wcs-container[aria-disabled] input:checked~.wcs-checkmark {\n    background-color: var(--wcs-light);\n    --wcs-checkbox-border-color: var(--wcs-light);\n}\n\n/* Create the wcs-checkmark/indicator (hidden when not checked) */\n.wcs-checkmark:after {\n    content: \"\";\n    position: absolute;\n    display: none;\n}\n\n/* Show the wcs-checkmark when checked */\n.wcs-container input:checked~.wcs-checkmark:after {\n    display: flex;\n}\n\n\n\n/* Style the wcs-checkmark/indicator */\n.wcs-container .wcs-checkmark:after {\n    left: 7px;\n    width: 5px;\n    height: 10px;\n    border: solid var(--wcs-white, white);\n    border-width: 0 3px 3px 0;\n    -webkit-transform: rotate(45deg);\n    -ms-transform: rotate(45deg);\n    transform: rotate(45deg);\n}\n\n.wcs-container:not([aria-disabled]) input:checked~.text {\n    --wcs-checkbox-text-color: var(--wcs-primary);\n}\n\n.text {\n    color: var(--wcs-checkbox-text-color);\n    margin-left: 6px;\n    font-weight: 500;\n    line-height: 1.375;\n}\n","import { Component, Prop, Event, EventEmitter, ComponentInterface, h, Host } from '@stencil/core';\nimport { CheckboxChangeEventDetail, CheckboxLabelAlignment } from './checkbox-interface';\n\n@Component({\n    tag: 'wcs-checkbox',\n    styleUrl: 'checkbox.scss',\n    shadow: true\n})\nexport class Checkbox implements ComponentInterface {\n    private checkboxId = `wcs-checkbox-${checkboxIds++}`;\n    @Prop() name = this.checkboxId;\n\n    /**\n     * If `true` the checkbox is in indeterminate state.\n     */\n    @Prop({ reflect: true, mutable: true }) indeterminate = false;\n\n    /**\n     * If `true`, the checkbox is selected.\n     */\n    @Prop({ reflect: true, mutable: true }) checked = false;\n\n    /**\n     * Specifie the alignment of the checkbox with the label content\n     */\n    @Prop({ mutable: true, reflect: true }) labelAlignment: CheckboxLabelAlignment = 'center';\n\n    /**\n     * Specify wether the checkbox is disabled or not.\n     */\n    @Prop() disabled: boolean = false;\n\n    /**\n     * Emitted when the checked property has changed.\n     */\n    @Event() wcsChange!: EventEmitter<CheckboxChangeEventDetail>;\n\n    handleChange(_event: Event) {\n        this.indeterminate = false;\n        this.checked = !this.checked;\n        this.wcsChange.emit({\n            checked: this.checked\n        });\n    }\n\n    render() {\n        return (\n            <Host>\n                <label htmlFor={this.name} class=\"wcs-container\" aria-disabled={this.disabled}>\n                    <input onChange={(evt) => this.handleChange(evt)}\n                           checked={this.checked}\n                           class=\"wcs-checkbox\"\n                           type=\"checkbox\"\n                           name={this.name}\n                           disabled={this.disabled}\n                           id={this.name}>\n                    </input>\n                    <span class=\"wcs-checkmark\"></span>\n                    <span class=\"text\">\n                        <slot/>\n                    </span>\n                </label>\n            </Host>\n        );\n    }\n}\n\nlet checkboxIds = 0;\n"],"version":3}
+{"file":"wcs-checkbox.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,24EAA24E;;MCUl5E,QAAQ;;;;IACT,eAAU,GAAG,gBAAgB,WAAW,EAAE,EAAE,CAAC;gBACtC,IAAI,CAAC,UAAU;yBAK0B,KAAK;mBAKX,KAAK;0BAK0B,QAAQ;oBAK7D,KAAK;;EAOjC,YAAY,CAAC,MAAa;IACtB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC3B,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC7B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;MAChB,OAAO,EAAE,IAAI,CAAC,OAAO;KACxB,CAAC,CAAC;GACN;EAED,MAAM;IACF,QACIA,QAACC,UAAI,QACDD,mBAAO,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,eAAe,mBAAgB,IAAI,CAAC,QAAQ,IACzEA,mBAAO,QAAQ,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,EACzC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,IAAI,GACZ,EACRA,kBAAM,KAAK,EAAC,eAAe,GAAQ,EACnCA,kBAAM,KAAK,EAAC,MAAM,IACdA,qBAAO,CACJ,CACH,CACL,EACT;GACL;;;AAGL,IAAI,WAAW,GAAG,CAAC,CAAC;;;;;","names":["h","Host"],"sources":["./src/components/checkbox/checkbox.scss?tag=wcs-checkbox&encapsulation=shadow","./src/components/checkbox/checkbox.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-checkbox-border-color: var(--wcs-text-medium);\n    --wcs-checkbox-text-color: var(--wcs-text-medium);\n    display: flex;\n}\n\n:host([disabled]) {\n    --wcs-checkbox-border-color: var(--wcs-light);\n    --wcs-checkbox-text-color: var(--wcs-text-disabled);\n\n    .wcs-container {\n        cursor: not-allowed;\n    }\n}\n\n.wcs-checkmark {\n    transition: background-color 225ms cubic-bezier(.17, .84, .44, 1),\n        color 225ms cubic-bezier(.17, .84, .44, 1);\n}\n\n/* Customize the label (the wcs-container) */\n.wcs-container {\n    position: relative;\n    font-size: 1rem;\n    user-select: none;\n    font-weight: 500;\n    display: flex;\n}\n\n.wcs-container:not([aria-disabled]) {\n    cursor: pointer;\n}\n\n/* Let the user choose the alignment of the checkbox with the label text */\n:host([label-alignment=\"top\"]){\n    .wcs-container {\n        align-items: start;\n    }\n}\n\n:host([label-alignment=\"center\"]){\n    .wcs-container {\n        align-items: center;\n    }\n}\n\n:host([label-alignment=\"bottom\"]){\n    .wcs-container {\n        align-items: flex-end;\n    }\n}\n\n/* Hide the browser's default checkbox */\n.wcs-container input {\n    position: absolute;\n    opacity: 0;\n    height: 1px;\n    width: 1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n}\n\n.wcs-container:hover:not([aria-disabled]), input:focus {\n    --wcs-checkbox-border-color: var(--wcs-primary);\n\n    --wcs-checkbox-text-color: var(--wcs-primary);\n}\n\n.wcs-container:has(input:focus-visible) {\n    @include focus-outline($border-radius: calc(var(--wcs-border-radius) / 2));\n}\n\n@supports not selector(.wcs-container:has(input:focus-visible)){\n    .wcs-container:focus-within {\n        @include focus-outline($border-radius: calc(var(--wcs-border-radius) /2));\n    }\n}\n\n/* Create a custom checkbox */\n.wcs-checkmark {\n    flex: 0 0 1.125rem;\n    width: 1.125rem;\n    height: 1.125rem;\n    border: 2px solid var(--wcs-checkbox-border-color);\n    border-radius: 3px;\n}\n\n:host([indeterminate]) {\n    .wcs-checkmark {\n        --wcs-checkbox-border-color: var(--wcs-primary);\n        background: var(--wcs-primary);\n    }\n}\n\n/* When the checkbox is checked, add a blue background */\n.wcs-container:not([aria-disabled]) input:checked~.wcs-checkmark {\n    background-color: var(--wcs-primary);\n    --wcs-checkbox-border-color: var(--wcs-primary);\n}\n.wcs-container[aria-disabled] input:checked~.wcs-checkmark {\n    background-color: var(--wcs-light);\n    --wcs-checkbox-border-color: var(--wcs-light);\n}\n\n/* Create the wcs-checkmark/indicator (hidden when not checked) */\n.wcs-checkmark:after {\n    content: \"\";\n    position: absolute;\n    display: none;\n}\n\n/* Show the wcs-checkmark when checked */\n.wcs-container input:checked~.wcs-checkmark:after {\n    display: flex;\n}\n\n\n\n/* Style the wcs-checkmark/indicator */\n.wcs-container .wcs-checkmark:after {\n    left: 7px;\n    width: 5px;\n    height: 10px;\n    border: solid var(--wcs-white, white);\n    border-width: 0 3px 3px 0;\n    -webkit-transform: rotate(45deg);\n    -ms-transform: rotate(45deg);\n    transform: rotate(45deg);\n}\n\n.wcs-container:not([aria-disabled]) input:checked~.text {\n    --wcs-checkbox-text-color: var(--wcs-primary);\n}\n\n.text {\n    color: var(--wcs-checkbox-text-color);\n    margin-left: 6px;\n    font-weight: 500;\n    line-height: 1.375;\n}\n","import { Component, Prop, Event, EventEmitter, ComponentInterface, h, Host } from '@stencil/core';\nimport { CheckboxChangeEventDetail, CheckboxLabelAlignment } from './checkbox-interface';\n\n@Component({\n    tag: 'wcs-checkbox',\n    styleUrl: 'checkbox.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Checkbox implements ComponentInterface {\n    private checkboxId = `wcs-checkbox-${checkboxIds++}`;\n    @Prop() name = this.checkboxId;\n\n    /**\n     * If `true` the checkbox is in indeterminate state.\n     */\n    @Prop({ reflect: true, mutable: true }) indeterminate = false;\n\n    /**\n     * If `true`, the checkbox is selected.\n     */\n    @Prop({ reflect: true, mutable: true }) checked = false;\n\n    /**\n     * Specifie the alignment of the checkbox with the label content\n     */\n    @Prop({ mutable: true, reflect: true }) labelAlignment: CheckboxLabelAlignment = 'center';\n\n    /**\n     * Specify wether the checkbox is disabled or not.\n     */\n    @Prop() disabled: boolean = false;\n\n    /**\n     * Emitted when the checked property has changed.\n     */\n    @Event() wcsChange!: EventEmitter<CheckboxChangeEventDetail>;\n\n    handleChange(_event: Event) {\n        this.indeterminate = false;\n        this.checked = !this.checked;\n        this.wcsChange.emit({\n            checked: this.checked\n        });\n    }\n\n    render() {\n        return (\n            <Host>\n                <label htmlFor={this.name} class=\"wcs-container\" aria-disabled={this.disabled}>\n                    <input onChange={(evt) => this.handleChange(evt)}\n                           checked={this.checked}\n                           class=\"wcs-checkbox\"\n                           type=\"checkbox\"\n                           name={this.name}\n                           disabled={this.disabled}\n                           id={this.name}>\n                    </input>\n                    <span class=\"wcs-checkmark\"></span>\n                    <span class=\"text\">\n                        <slot/>\n                    </span>\n                </label>\n            </Host>\n        );\n    }\n}\n\nlet checkboxIds = 0;\n"],"version":3}

package/dist/cjs/wcs-counter.cjs.entry.js

@@ -145,6 +145,7 @@ const Counter = class {
   render() {
     return (index.h(index.Host, null, index.h("wcs-button", { class: "wcs-primary", shape: "round", size: "s", tabindex: -1, onClick: () => this.handleDecrement(), onBlur: (event) => this.wcsBlur.emit(event), disabled: this.value === this.min }, index.h("wcs-mat-icon", { icon: "remove", size: "s" })), index.h("div", { class: "counter-container" }, index.h("span", { id: "outlier-down", class: "outliers hidden", "aria-hidden": "true" }, this.displayedValue - this.step), index.h("span", { tabindex: "0", role: "spinbutton", class: "current-value", onBlur: (event) => this.wcsBlur.emit(event), onKeyDown: (event) => this.onKeyDown(event), "aria-valuenow": this.value, "aria-valuetext": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-label": this.label }, this.displayedValue), index.h("span", { id: "outlier-up", class: "outliers hidden", "aria-hidden": "true" }, this.displayedValue + this.step)), index.h("wcs-button", { class: "wcs-primary", shape: "round", size: "s", tabindex: -1, onClick: () => this.handleIncrement(), onBlur: (event) => this.wcsBlur.emit(event), disabled: this.value === this.max }, index.h("wcs-mat-icon", { icon: "add", size: "s" }))));
   }
+  static get delegatesFocus() { return true; }
   get el() { return index.getElement(this); }
   static get watchers() { return {
     "value": ["valueChange"]

package/dist/cjs/wcs-counter.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-counter.entry.cjs.js","mappings":"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","names":["isKeyup","isKeydown","isHomeKey","isEndKey","h","Host"],"sources":["./src/components/counter/counter-interface.ts","./src/components/counter/counter.scss?tag=wcs-counter&encapsulation=shadow","./src/components/counter/counter.tsx"],"sourcesContent":["import { WcsSize } from \"../../shared-types\";\n\nexport interface CounterChangeEventDetail {\n    value: number;\n}\n\nexport const WcsCounterSizeValues = ['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 WcsCounterSize = Extract<WcsSize, typeof WcsCounterSizeValues[number]>;\n\nexport function isWcsCounterSize(size: string): size is WcsCounterSize {\n    // @ts-ignore : ignore size type, as it is checked with WcsInputSizeValues\n    return WcsCounterSizeValues.includes(size);\n}\n","@import '../../style/focus-outline.scss';\n\n@keyframes spin-animation-up {\n    0% {\n        transform: translateY(0);\n        transform-origin: center;\n        opacity: 1;\n    }\n    50% {\n        opacity: 0.5;\n    }\n    100% {\n        transform: translateY(30px);\n        transform-origin: center;\n        opacity: 1;\n    }\n}\n\n@keyframes spin-animation-down {\n    0% {\n        transform: translateY(0);\n        transform-origin: center;\n        opacity: 1;\n    }\n    50% {\n        opacity: 0.5;\n    }\n    100% {\n        transform: translateY(-30px);\n        transform-origin: center;\n        opacity: 1;\n    }\n}\n\n:host {\n    box-sizing: border-box;\n    height: var(--wcs-counter-host-height);\n    --wcs-input-icon-color: var(--wcs-text-medium);\n    --wcs-internal-input-border-radius: calc(var(--wcs-border-radius) * 10); // 80 px\n    --wcs-internal-input-border-width: 2px;\n    font-family: var(--wcs-font-sans-serif);\n    font-size: var(--wcs-counter-font-size);\n    font-weight: bold;\n    display: flex;\n    align-items: center;\n    padding: var(--wcs-counter-host-padding);\n    width: fit-content;\n    overflow: hidden;\n    border-radius: var(--wcs-internal-input-border-radius);\n    background-color: var(--wcs-light);\n    border: var(--wcs-internal-input-border-width) solid var(--wcs-light);\n    background-clip: padding-box;\n\n    .counter-container {\n        height: var(--wcs-counter-host-height);\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        margin: 0 calc(2* var(--wcs-base-margin));\n        position: relative;\n    }\n\n    .outliers {\n        position: absolute;\n    }\n\n    #outlier-down {\n        top: calc((var(--wcs-counter-host-height) / 2) * -1);\n    }\n\n    #outlier-up {\n        bottom: calc((var(--wcs-counter-host-height) / 2) * -1);\n    }\n\n    span.current-value {\n        &:focus-visible {\n            @include focus-outline;\n        }\n    }\n\n    .animate-up {\n        animation: spin-animation-up 0.175s ease-in-out;\n    }\n\n    .animate-down {\n        animation: spin-animation-down 0.175s ease-in-out;\n    }\n\n    .hidden {\n        opacity: 0;\n    }\n}\n\n:host([size='m']) { // Default\n    --wcs-counter-host-padding: 4px;\n    --wcs-counter-host-height: var(--wcs-size-m);\n    --wcs-counter-font-size: 1rem;\n}\n\n:host([size='l']) {\n    --wcs-counter-host-padding: 8px;\n    --wcs-counter-host-height: var(--wcs-size-l);\n    --wcs-counter-font-size: 1.0625rem;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    State,\n    Watch\n} from '@stencil/core';\nimport { isEndKey, isHomeKey, isKeydown, isKeyup } from '../../utils/helpers';\nimport { CounterChangeEventDetail, isWcsCounterSize, WcsCounterSize, WcsCounterSizeValues } from './counter-interface';\n\nconst ANIMATION_DURATION = 0.175 // seconds\n\n/**\n * Counter component, meant to be used for small range of values (e.g : 0 - 5).<br>\n * For larger or specific ranges, please use [wcs-input (type number)](.?path=/docs/components-input--documentation)\n */\n@Component({\n    tag: 'wcs-counter',\n    styleUrl: 'counter.scss',\n    shadow: true,\n})\nexport class Counter implements ComponentInterface {\n    @Element() private el!: HTMLElement;\n\n    /**\n     * Specify the size (height) of the counter.\n     */\n    @Prop({reflect: true}) size: WcsCounterSize = 'm';\n\n    /**\n     * The label of the counter.<br/>\n     * e.g. Number of passengers, train carriages, railroad tracks...\n     */\n    @Prop({mutable: false}) label!: string;\n\n    /**\n     * The minimum value of the counter.\n     * If the value of the min attribute isn't set, then the element has no minimum value.\n     */\n    @Prop({mutable: true}) min?: number;\n\n    /**\n     * The maximum value of the counter.\n     * If the value of the max attribute isn't set, then the element has no maximum value.\n     */\n    @Prop({mutable: true}) max?: number;\n\n    /**\n     * Defines by how much the counter will be incremented or decremented.\n     */\n    @Prop({mutable: true}) step: number = 1;\n\n    /**\n     * Emitted when the value of the counter has changed.\n     */\n    @Event() wcsChange!: EventEmitter<CounterChangeEventDetail>;\n\n    /**\n     * The current value of the counter.\n     */\n    @Prop({mutable: true}) value!: number;\n\n    /**\n     * Only for animation and display purpose\n     */\n    @State() private displayedValue: number;\n\n    private animateRunning = false;\n\n    /**\n     * Emitted when the counter loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    componentWillLoad() {\n        this.handleValueChange();\n\n        if (!isWcsCounterSize(this.size)) {\n            console.error(`Invalid size value for wcs-counter : \"${this.size}\". Must be one of \"${WcsCounterSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n    }\n\n    /**\n     * Current value change => handle event and interval\n     */\n    @Watch('value')\n    valueChange(newVal: any, oldVal: any) {\n        if(oldVal === newVal) return;\n\n        this.handleValueChange();\n    }\n\n    private handleValueChange() {\n        this.setMinimumIfValueIsUndefinedOrNull();\n        this.ensureValueIsNotOutOfMinMax();\n        this.updateDisplayValueIfNoAnimationRunning();\n    }\n\n    private updateDisplayValueIfNoAnimationRunning() {\n        if (!this.animateRunning) {\n            this.displayedValue = this.value;\n        }\n    }\n\n    private ensureValueIsNotOutOfMinMax() {\n        if (this.max !== undefined && this.value > this.max) {\n            this.value = this.max;\n        } else if (this.min !== undefined && this.value < this.min) {\n            this.value = this.min;\n        }\n    }\n\n    private setMinimumIfValueIsUndefinedOrNull() {\n        if (this.value === undefined || this.value === null) {\n            this.value = this.min ?? 0;\n        }\n    }\n\n    onKeyDown(_event: KeyboardEvent) {\n        if (isKeyup(_event)) {\n            _event.preventDefault();\n            this.handleIncrement()\n        }\n        if (isKeydown(_event)) {\n            _event.preventDefault();\n            this.handleDecrement()\n        }\n        if (isHomeKey(_event)) {\n            _event.preventDefault();\n            if (this.min != null) {\n                this.value = this.min;\n                this.displayedValue = this.value;\n                this.notifyChange();\n            }\n        }\n        if (isEndKey(_event)) {\n            _event.preventDefault();\n            if (this.max != null) {\n                this.value = this.max;\n                this.displayedValue = this.value;\n                this.notifyChange();\n            }\n        }\n    }\n\n    private notifyChange() {\n        this.wcsChange.emit({\n            value: this.value\n        });\n    }\n    \n    private getCounterContainer = (): HTMLDivElement => {\n        return Array.from(this.el.shadowRoot.children)\n            .find(el => el.tagName === 'DIV') as HTMLDivElement;\n    }\n\n    private handleDecrement = () => {\n        if (this.min === undefined || this.value > this.min) {\n            // we set animateRunning here to prevent the watch method on value prop from affecting the displayed value\n            // before the animation runs.\n            this.animateRunning = true; \n            this.value -= this.step;\n            this.notifyChange();\n            this.animate('up');\n        }\n    };\n\n    private handleIncrement = () => {\n        if (this.max === undefined || this.value < this.max) {\n            // we set animateRunning here to prevent the watch method on value prop from affecting the displayed value\n            // before the animation runs.\n            this.animateRunning = true; \n            this.value += this.step;\n            this.notifyChange();\n            this.animate('down');\n        }\n    };\n\n    private animate = (direction: 'up' | 'down'): void => {\n        // In case someone call animate function, we want ensured that animateRunning is set to true to prevent other \n        // method to mutate the displayedValue.\n        this.animateRunning = true;  \n\n        const counterContainer = this.getCounterContainer();\n        const outliers = Array.from(counterContainer.children)\n            .filter((span: HTMLSpanElement) => span.classList.contains('outliers'));\n\n        counterContainer.classList.add('animate-' + direction);\n        outliers.forEach((span: HTMLSpanElement) => {\n            span.classList.remove('hidden')\n        });\n        setTimeout(() => {\n            counterContainer.classList.remove('animate-' + direction);\n            outliers.forEach((span: HTMLSpanElement) => {\n                span.classList.add('hidden')\n            });\n            this.displayedValue = this.value;\n\n            this.animateRunning = false;\n        }, 1000 * ANIMATION_DURATION - 20);\n    }\n\n    render() {\n        return (\n            <Host>\n                <wcs-button class=\"wcs-primary\"\n                            shape=\"round\"\n                            size=\"s\"\n                            tabindex={-1}\n                            onClick={() => this.handleDecrement()}\n                            onBlur={(event) => this.wcsBlur.emit(event)}\n                            disabled={this.value === this.min}>\n                    <wcs-mat-icon icon=\"remove\" size=\"s\"></wcs-mat-icon>\n                </wcs-button>\n                <div class=\"counter-container\">\n                    <span id=\"outlier-down\" class=\"outliers hidden\"\n                          aria-hidden=\"true\">{this.displayedValue - this.step}</span>\n                    <span tabindex=\"0\"\n                          role=\"spinbutton\"\n                          class=\"current-value\"\n                          onBlur={(event) => this.wcsBlur.emit(event)}\n                          onKeyDown={(event) => this.onKeyDown(event)}\n                          aria-valuenow={this.value}\n                          aria-valuetext={this.value}\n                          aria-valuemin={this.min}\n                          aria-valuemax={this.max}\n                          aria-label={this.label}>{this.displayedValue}</span>\n                    <span id=\"outlier-up\" class=\"outliers hidden\"\n                          aria-hidden=\"true\">{this.displayedValue + this.step}</span>\n                </div>\n                <wcs-button class=\"wcs-primary\"\n                            shape=\"round\"\n                            size=\"s\"\n                            tabindex={-1}\n                            onClick={() => this.handleIncrement()}\n                            onBlur={(event) => this.wcsBlur.emit(event)}\n                            disabled={this.value === this.max}>\n                    <wcs-mat-icon icon=\"add\" size=\"s\"></wcs-mat-icon>\n                </wcs-button>\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"wcs-counter.entry.cjs.js","mappings":"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","names":["isKeyup","isKeydown","isHomeKey","isEndKey","h","Host"],"sources":["./src/components/counter/counter-interface.ts","./src/components/counter/counter.scss?tag=wcs-counter&encapsulation=shadow","./src/components/counter/counter.tsx"],"sourcesContent":["import { WcsSize } from \"../../shared-types\";\n\nexport interface CounterChangeEventDetail {\n    value: number;\n}\n\nexport const WcsCounterSizeValues = ['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 WcsCounterSize = Extract<WcsSize, typeof WcsCounterSizeValues[number]>;\n\nexport function isWcsCounterSize(size: string): size is WcsCounterSize {\n    // @ts-ignore : ignore size type, as it is checked with WcsInputSizeValues\n    return WcsCounterSizeValues.includes(size);\n}\n","@import '../../style/focus-outline.scss';\n\n@keyframes spin-animation-up {\n    0% {\n        transform: translateY(0);\n        transform-origin: center;\n        opacity: 1;\n    }\n    50% {\n        opacity: 0.5;\n    }\n    100% {\n        transform: translateY(30px);\n        transform-origin: center;\n        opacity: 1;\n    }\n}\n\n@keyframes spin-animation-down {\n    0% {\n        transform: translateY(0);\n        transform-origin: center;\n        opacity: 1;\n    }\n    50% {\n        opacity: 0.5;\n    }\n    100% {\n        transform: translateY(-30px);\n        transform-origin: center;\n        opacity: 1;\n    }\n}\n\n:host {\n    box-sizing: border-box;\n    height: var(--wcs-counter-host-height);\n    --wcs-input-icon-color: var(--wcs-text-medium);\n    --wcs-internal-input-border-radius: calc(var(--wcs-border-radius) * 10); // 80 px\n    --wcs-internal-input-border-width: 2px;\n    font-family: var(--wcs-font-sans-serif);\n    font-size: var(--wcs-counter-font-size);\n    font-weight: bold;\n    display: flex;\n    align-items: center;\n    padding: var(--wcs-counter-host-padding);\n    width: fit-content;\n    overflow: hidden;\n    border-radius: var(--wcs-internal-input-border-radius);\n    background-color: var(--wcs-light);\n    border: var(--wcs-internal-input-border-width) solid var(--wcs-light);\n    background-clip: padding-box;\n\n    .counter-container {\n        height: var(--wcs-counter-host-height);\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        margin: 0 calc(2* var(--wcs-base-margin));\n        position: relative;\n    }\n\n    .outliers {\n        position: absolute;\n    }\n\n    #outlier-down {\n        top: calc((var(--wcs-counter-host-height) / 2) * -1);\n    }\n\n    #outlier-up {\n        bottom: calc((var(--wcs-counter-host-height) / 2) * -1);\n    }\n\n    span.current-value {\n        &:focus-visible {\n            @include focus-outline;\n        }\n    }\n\n    .animate-up {\n        animation: spin-animation-up 0.175s ease-in-out;\n    }\n\n    .animate-down {\n        animation: spin-animation-down 0.175s ease-in-out;\n    }\n\n    .hidden {\n        opacity: 0;\n    }\n}\n\n:host([size='m']) { // Default\n    --wcs-counter-host-padding: 4px;\n    --wcs-counter-host-height: var(--wcs-size-m);\n    --wcs-counter-font-size: 1rem;\n}\n\n:host([size='l']) {\n    --wcs-counter-host-padding: 8px;\n    --wcs-counter-host-height: var(--wcs-size-l);\n    --wcs-counter-font-size: 1.0625rem;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    State,\n    Watch\n} from '@stencil/core';\nimport { isEndKey, isHomeKey, isKeydown, isKeyup } from '../../utils/helpers';\nimport { CounterChangeEventDetail, isWcsCounterSize, WcsCounterSize, WcsCounterSizeValues } from './counter-interface';\n\nconst ANIMATION_DURATION = 0.175 // seconds\n\n/**\n * Counter component, meant to be used for small range of values (e.g : 0 - 5).<br>\n * For larger or specific ranges, please use [wcs-input (type number)](.?path=/docs/components-input--documentation)\n */\n@Component({\n    tag: 'wcs-counter',\n    styleUrl: 'counter.scss',\n    shadow: {\n        delegatesFocus: true\n    },\n})\nexport class Counter implements ComponentInterface {\n    @Element() private el!: HTMLElement;\n\n    /**\n     * Specify the size (height) of the counter.\n     */\n    @Prop({reflect: true}) size: WcsCounterSize = 'm';\n\n    /**\n     * The label of the counter.<br/>\n     * e.g. Number of passengers, train carriages, railroad tracks...\n     */\n    @Prop({mutable: false}) label!: string;\n\n    /**\n     * The minimum value of the counter.\n     * If the value of the min attribute isn't set, then the element has no minimum value.\n     */\n    @Prop({mutable: true}) min?: number;\n\n    /**\n     * The maximum value of the counter.\n     * If the value of the max attribute isn't set, then the element has no maximum value.\n     */\n    @Prop({mutable: true}) max?: number;\n\n    /**\n     * Defines by how much the counter will be incremented or decremented.\n     */\n    @Prop({mutable: true}) step: number = 1;\n\n    /**\n     * Emitted when the value of the counter has changed.\n     */\n    @Event() wcsChange!: EventEmitter<CounterChangeEventDetail>;\n\n    /**\n     * The current value of the counter.\n     */\n    @Prop({mutable: true}) value!: number;\n\n    /**\n     * Only for animation and display purpose\n     */\n    @State() private displayedValue: number;\n\n    private animateRunning = false;\n\n    /**\n     * Emitted when the counter loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    componentWillLoad() {\n        this.handleValueChange();\n\n        if (!isWcsCounterSize(this.size)) {\n            console.error(`Invalid size value for wcs-counter : \"${this.size}\". Must be one of \"${WcsCounterSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n    }\n\n    /**\n     * Current value change => handle event and interval\n     */\n    @Watch('value')\n    valueChange(newVal: any, oldVal: any) {\n        if(oldVal === newVal) return;\n\n        this.handleValueChange();\n    }\n\n    private handleValueChange() {\n        this.setMinimumIfValueIsUndefinedOrNull();\n        this.ensureValueIsNotOutOfMinMax();\n        this.updateDisplayValueIfNoAnimationRunning();\n    }\n\n    private updateDisplayValueIfNoAnimationRunning() {\n        if (!this.animateRunning) {\n            this.displayedValue = this.value;\n        }\n    }\n\n    private ensureValueIsNotOutOfMinMax() {\n        if (this.max !== undefined && this.value > this.max) {\n            this.value = this.max;\n        } else if (this.min !== undefined && this.value < this.min) {\n            this.value = this.min;\n        }\n    }\n\n    private setMinimumIfValueIsUndefinedOrNull() {\n        if (this.value === undefined || this.value === null) {\n            this.value = this.min ?? 0;\n        }\n    }\n\n    onKeyDown(_event: KeyboardEvent) {\n        if (isKeyup(_event)) {\n            _event.preventDefault();\n            this.handleIncrement()\n        }\n        if (isKeydown(_event)) {\n            _event.preventDefault();\n            this.handleDecrement()\n        }\n        if (isHomeKey(_event)) {\n            _event.preventDefault();\n            if (this.min != null) {\n                this.value = this.min;\n                this.displayedValue = this.value;\n                this.notifyChange();\n            }\n        }\n        if (isEndKey(_event)) {\n            _event.preventDefault();\n            if (this.max != null) {\n                this.value = this.max;\n                this.displayedValue = this.value;\n                this.notifyChange();\n            }\n        }\n    }\n\n    private notifyChange() {\n        this.wcsChange.emit({\n            value: this.value\n        });\n    }\n    \n    private getCounterContainer = (): HTMLDivElement => {\n        return Array.from(this.el.shadowRoot.children)\n            .find(el => el.tagName === 'DIV') as HTMLDivElement;\n    }\n\n    private handleDecrement = () => {\n        if (this.min === undefined || this.value > this.min) {\n            // we set animateRunning here to prevent the watch method on value prop from affecting the displayed value\n            // before the animation runs.\n            this.animateRunning = true; \n            this.value -= this.step;\n            this.notifyChange();\n            this.animate('up');\n        }\n    };\n\n    private handleIncrement = () => {\n        if (this.max === undefined || this.value < this.max) {\n            // we set animateRunning here to prevent the watch method on value prop from affecting the displayed value\n            // before the animation runs.\n            this.animateRunning = true; \n            this.value += this.step;\n            this.notifyChange();\n            this.animate('down');\n        }\n    };\n\n    private animate = (direction: 'up' | 'down'): void => {\n        // In case someone call animate function, we want ensured that animateRunning is set to true to prevent other \n        // method to mutate the displayedValue.\n        this.animateRunning = true;  \n\n        const counterContainer = this.getCounterContainer();\n        const outliers = Array.from(counterContainer.children)\n            .filter((span: HTMLSpanElement) => span.classList.contains('outliers'));\n\n        counterContainer.classList.add('animate-' + direction);\n        outliers.forEach((span: HTMLSpanElement) => {\n            span.classList.remove('hidden')\n        });\n        setTimeout(() => {\n            counterContainer.classList.remove('animate-' + direction);\n            outliers.forEach((span: HTMLSpanElement) => {\n                span.classList.add('hidden')\n            });\n            this.displayedValue = this.value;\n\n            this.animateRunning = false;\n        }, 1000 * ANIMATION_DURATION - 20);\n    }\n\n    render() {\n        return (\n            <Host>\n                <wcs-button class=\"wcs-primary\"\n                            shape=\"round\"\n                            size=\"s\"\n                            tabindex={-1}\n                            onClick={() => this.handleDecrement()}\n                            onBlur={(event) => this.wcsBlur.emit(event)}\n                            disabled={this.value === this.min}>\n                    <wcs-mat-icon icon=\"remove\" size=\"s\"></wcs-mat-icon>\n                </wcs-button>\n                <div class=\"counter-container\">\n                    <span id=\"outlier-down\" class=\"outliers hidden\"\n                          aria-hidden=\"true\">{this.displayedValue - this.step}</span>\n                    <span tabindex=\"0\"\n                          role=\"spinbutton\"\n                          class=\"current-value\"\n                          onBlur={(event) => this.wcsBlur.emit(event)}\n                          onKeyDown={(event) => this.onKeyDown(event)}\n                          aria-valuenow={this.value}\n                          aria-valuetext={this.value}\n                          aria-valuemin={this.min}\n                          aria-valuemax={this.max}\n                          aria-label={this.label}>{this.displayedValue}</span>\n                    <span id=\"outlier-up\" class=\"outliers hidden\"\n                          aria-hidden=\"true\">{this.displayedValue + this.step}</span>\n                </div>\n                <wcs-button class=\"wcs-primary\"\n                            shape=\"round\"\n                            size=\"s\"\n                            tabindex={-1}\n                            onClick={() => this.handleIncrement()}\n                            onBlur={(event) => this.wcsBlur.emit(event)}\n                            disabled={this.value === this.max}>\n                    <wcs-mat-icon icon=\"add\" size=\"s\"></wcs-mat-icon>\n                </wcs-button>\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/cjs/wcs-dropdown.cjs.entry.js

@@ -5,12 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-ca67a6dc.js');
 const selectArrow = require('./select-arrow-c9583ea9.js');
 const helpers = require('./helpers-4a14051a.js');
+const accessibility = require('./accessibility-e99b032d.js');
 const popper = require('./popper-e3b74571.js');
 
-function isElementFocused(element) {
-  return element === document.activeElement;
-}
-
 const dropdownCss = ":host{display:flex}wcs-button{--wcs-button-padding:8px 10px 8px 16px !important}:host([no-arrow]) wcs-button{--wcs-button-padding:8px 16px 8px 16px !important}:host([shape=small]) wcs-button{--wcs-button-padding:2px 10px 2px 16px !important}:host([shape=small][no-arrow]) wcs-button{--wcs-button-padding:2px 16px 2px 16px !important}.wcs-button-content-wrapper{display:flex}.popover{display:none;border:1px solid #d7d7d7;border-radius:var(--wcs-border-radius);background-color:var(--wcs-white);z-index:9999}.show{display:block}.container{border-radius:inherit;overflow:hidden;padding:calc(var(--wcs-padding) / 2) 0;background-color:var(--wcs-white)}#arrow,#arrow::before{position:absolute;width:8px;height:8px;background:inherit;border:solid 1px #d7d7d7}#arrow{visibility:hidden;z-index:-1}#arrow::before{visibility:visible;content:\"\";transform:rotate(45deg)}.popover[data-popper-placement^=top]>#arrow{bottom:-5px}.popover[data-popper-placement^=bottom]>#arrow{top:-6px}.popover[data-popper-placement^=left]>#arrow{right:-4px}.popover[data-popper-placement^=right]>#arrow{left:-6px}";
 
 const Dropdown = class {
@@ -75,7 +72,7 @@ const Dropdown = class {
       // If the user presses an arrow key (up or down), the browser is prevented from scrolling through
       evt.preventDefault();
       const items = Array.from(this.el.querySelectorAll('wcs-dropdown-item'));
-      const currentFocusedItemIndex = items.findIndex(item => isElementFocused(item));
+      const currentFocusedItemIndex = items.findIndex(item => accessibility.isElementFocused(item));
       // If the dropdown is expended by the user, but no item is focused and the keydown is pressed
       if (currentFocusedItemIndex === -1 && helpers.isKeydown(evt)) {
         this.focusFirstItemIfPresent(items);
@@ -115,6 +112,7 @@ const Dropdown = class {
   render() {
     return (index.h(index.Host, null, index.h("wcs-button", { mode: this.mode, shape: this.shape, disabled: this.disabled, onClick: ($event) => this.onButtonClick($event) }, index.h("div", { class: "wcs-button-content-wrapper" }, index.h("slot", { name: "placeholder" }), this.noArrow ? null : (index.h(selectArrow.SelectArrow, { up: this.expanded })))), index.h("div", { class: (this.expanded ? 'show ' : '') + 'popover' }, index.h("div", { id: "arrow", "data-popper-arrow": true }), index.h("div", { class: "container" }, index.h("slot", { name: "item" })))));
   }
+  static get delegatesFocus() { return true; }
   get el() { return index.getElement(this); }
   static get watchers() { return {
     "placement": ["placementChange"]

package/dist/cjs/wcs-dropdown.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-dropdown.entry.cjs.js","mappings":"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","names":["createPopper","clickTargetIsElementOrChildren","isKeydown","isKeyup","isEscapeKey","h","Host","SelectArrow"],"sources":["./src/utils/accessibility.ts","./src/components/dropdown/dropdown.scss?tag=wcs-dropdown&encapsulation=shadow","./src/components/dropdown/dropdown.tsx"],"sourcesContent":["export function isElementFocused(element: HTMLElement) {\n    return element === document.activeElement;\n}\n",":host {\n    display: flex;\n}\n\nwcs-button {\n    --wcs-button-padding: 8px 10px 8px 16px !important;\n}\n:host([no-arrow]) {\n    wcs-button {\n        --wcs-button-padding: 8px 16px 8px 16px !important;\n    }\n}\n\n\n:host([shape=small]) {\n    wcs-button {\n        --wcs-button-padding: 2px 10px 2px 16px !important;\n    }\n}\n\n:host([shape=small][no-arrow]) {\n    wcs-button {\n        --wcs-button-padding: 2px 16px 2px 16px !important;\n    }\n}\n\n.wcs-button-content-wrapper {\n    display: flex;\n}\n\n.popover {\n    display: none;\n    border: 1px solid #d7d7d7;\n    border-radius: var(--wcs-border-radius);\n    background-color: var(--wcs-white);\n    z-index: 9999;\n}\n\n.show {\n    display: block;\n}\n\n// XXX: So that item hover background does not overflow\n.container {\n    border-radius: inherit;\n    overflow: hidden;\n    padding: calc(var(--wcs-padding) / 2) 0;\n    background-color: var(--wcs-white);\n}\n\n#arrow,\n#arrow::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: inherit;\n    border: solid 1px #d7d7d7;\n}\n\n#arrow {\n    visibility: hidden;\n    z-index: -1;\n}\n\n#arrow::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n}\n\n.popover[data-popper-placement^='top'] > #arrow {\n    bottom: -5px;\n}\n\n.popover[data-popper-placement^='bottom'] > #arrow {\n    top: -6px;\n}\n\n.popover[data-popper-placement^='left'] > #arrow {\n    right: -4px;\n}\n\n.popover[data-popper-placement^='right'] > #arrow {\n    left: -6px;\n}\n","import {\n    Component,\n    ComponentInterface, Element,\n    h, Host, Listen, Prop, State, Watch\n} from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport { WcsButtonMode, WcsButtonShape } from '../button/button-interface';\nimport { createPopper, Instance } from '@popperjs/core';\nimport { WcsDropdownPlacement } from './dropdown-interface';\nimport { clickTargetIsElementOrChildren, isEscapeKey, isKeydown, isKeyup } from '../../utils/helpers';\nimport { isElementFocused } from \"../../utils/accessibility\";\n\n\n@Component({\n    tag: 'wcs-dropdown',\n    styleUrl: 'dropdown.scss',\n    shadow: true\n})\nexport class Dropdown implements ComponentInterface {\n    @Element() private el: HTMLWcsDropdownElement;\n\n    /** Hides the arrow in the button */\n    @Prop() noArrow: boolean = false;\n\n    /** Dropdown's button mode */\n    @Prop() mode: WcsButtonMode = 'stroked';\n\n    /** Dropdown's button shape */\n    @Prop() shape: WcsButtonShape = 'normal';\n\n    /** Specifies whether the dropdown button is clickable or not */\n    @Prop() disabled: boolean = false;\n\n    /** placement of the dropdown's popover */\n    @Prop() placement: WcsDropdownPlacement = 'bottom-end';\n\n    @State() private expanded = false;\n\n\n    private popper: Instance;\n\n    private buttonTextColor: string;\n\n    @Watch('placement')\n    protected placementChange() {\n        this.popper.setOptions({\n            ...this.popper.state.options,\n            placement: this.placement\n        }).then(_ => this.popper.update());\n    }\n\n    componentDidLoad() {\n        const wcsButtonElement = this.el.shadowRoot.querySelector('wcs-button');\n        const buttonWrapper = wcsButtonElement.shadowRoot.querySelector('button');\n        this.buttonTextColor = window.getComputedStyle(buttonWrapper).color;\n        const popoverDiv = this.el.shadowRoot.querySelector('.popover') as HTMLElement;\n\n\n        this.popper = createPopper(wcsButtonElement, popoverDiv, {\n            placement: this.placement,\n            modifiers: [\n                {\n                    name: 'offset',\n                    options: {\n                        offset: [0, 8]\n                    }\n                }\n            ]\n        });\n\n        if (!this.noArrow) {\n            (this.el.shadowRoot.querySelector('.arrow') as HTMLElement).style.fill = this.buttonTextColor;\n        }\n        this.fixForFirefoxBelow63();\n    }\n\n    private fixForFirefoxBelow63() {\n        // If the items appear out of the slot we place them back\n        const items = this.el.querySelectorAll('wcs-dropdown-item');\n        const container = this.el.querySelector('.container');\n        if (items.length > 0 && container) {\n            items.forEach(i => {\n                this.el.removeChild(i);\n                container.appendChild(i);\n            });\n        }\n    }\n\n    private onButtonClick(_: MouseEvent): void {\n        this.expanded = !this.expanded;\n    }\n\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(event: MouseEvent) {\n        const clickedOnDropdownOrChildren = clickTargetIsElementOrChildren(event, this.el);\n        if (this.expanded && !clickedOnDropdownOrChildren) {\n            this.expanded = false;\n        }\n    }\n\n    @Listen('wcsDropdownItemClick')\n    dropdownItemClick(_: CustomEvent<void>) {\n        this.expanded = false;\n    }\n\n    @Listen('keydown')\n    onKeyDown(evt: KeyboardEvent): void {\n        if (this.expanded && (isKeydown(evt) || isKeyup(evt))) {\n            // If the user presses an arrow key (up or down), the browser is prevented from scrolling through\n            evt.preventDefault();\n            const items = Array.from(this.el.querySelectorAll('wcs-dropdown-item'));\n            const currentFocusedItemIndex = items.findIndex(item => isElementFocused(item));\n            // If the dropdown is expended by the user, but no item is focused and the keydown is pressed\n            if (currentFocusedItemIndex === -1 && isKeydown(evt)) {\n                this.focusFirstItemIfPresent(items);\n            } else {\n                this.moveFocusedItemByDirection(items, currentFocusedItemIndex, isKeydown(evt) ? 'down' : 'up');\n            }\n        }\n        if (this.expanded && isEscapeKey(evt)) {\n            this.closeOverlayAndFocusButton();\n        }\n    }\n\n\n    private focusFirstItemIfPresent<T extends HTMLElement>(items: T[]) {\n        if (items[0]) {\n            items[0].focus();\n        }\n    }\n\n    private moveFocusedItemByDirection<T extends HTMLElement>(items: T[], currentFocusedItemIndex: number, direction: 'up' | 'down') {\n        const itemToFocus = items[(currentFocusedItemIndex) + (direction === 'down' ? 1 : -1)];\n        if (itemToFocus) {\n            itemToFocus.focus();\n        }\n    }\n\n    private closeOverlayAndFocusButton() {\n        this.expanded = !this.expanded;\n        const wcsButton = this.el.shadowRoot.querySelector('wcs-button') as HTMLWcsButtonElement;\n        wcsButton.focus();\n    }\n\n    componentDidRender() {\n        if (this.popper) {\n            this.popper.update();\n        }\n        if (!this.noArrow) {\n            (this.el.shadowRoot.querySelector('.arrow') as HTMLElement).style.fill = this.buttonTextColor;\n        }\n    }\n\n    render() {\n        return (\n            <Host>\n                <wcs-button mode={this.mode} shape={this.shape} disabled={this.disabled}\n                            onClick={($event) => this.onButtonClick($event)}>\n                    <div class=\"wcs-button-content-wrapper\">\n                        <slot name=\"placeholder\"/>\n                        {this.noArrow ? null : (<SelectArrow up={this.expanded}/>)}\n                    </div>\n                </wcs-button>\n                <div class={(this.expanded ? 'show ' : '') + 'popover'}>\n                    <div id=\"arrow\" data-popper-arrow/>\n                    <div class=\"container\">\n                        <slot name=\"item\"/>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n\n"],"version":3}
+{"file":"wcs-dropdown.entry.cjs.js","mappings":"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","names":["createPopper","clickTargetIsElementOrChildren","isKeydown","isKeyup","isElementFocused","isEscapeKey","h","Host","SelectArrow"],"sources":["./src/components/dropdown/dropdown.scss?tag=wcs-dropdown&encapsulation=shadow","./src/components/dropdown/dropdown.tsx"],"sourcesContent":[":host {\n    display: flex;\n}\n\nwcs-button {\n    --wcs-button-padding: 8px 10px 8px 16px !important;\n}\n:host([no-arrow]) {\n    wcs-button {\n        --wcs-button-padding: 8px 16px 8px 16px !important;\n    }\n}\n\n\n:host([shape=small]) {\n    wcs-button {\n        --wcs-button-padding: 2px 10px 2px 16px !important;\n    }\n}\n\n:host([shape=small][no-arrow]) {\n    wcs-button {\n        --wcs-button-padding: 2px 16px 2px 16px !important;\n    }\n}\n\n.wcs-button-content-wrapper {\n    display: flex;\n}\n\n.popover {\n    display: none;\n    border: 1px solid #d7d7d7;\n    border-radius: var(--wcs-border-radius);\n    background-color: var(--wcs-white);\n    z-index: 9999;\n}\n\n.show {\n    display: block;\n}\n\n// XXX: So that item hover background does not overflow\n.container {\n    border-radius: inherit;\n    overflow: hidden;\n    padding: calc(var(--wcs-padding) / 2) 0;\n    background-color: var(--wcs-white);\n}\n\n#arrow,\n#arrow::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: inherit;\n    border: solid 1px #d7d7d7;\n}\n\n#arrow {\n    visibility: hidden;\n    z-index: -1;\n}\n\n#arrow::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n}\n\n.popover[data-popper-placement^='top'] > #arrow {\n    bottom: -5px;\n}\n\n.popover[data-popper-placement^='bottom'] > #arrow {\n    top: -6px;\n}\n\n.popover[data-popper-placement^='left'] > #arrow {\n    right: -4px;\n}\n\n.popover[data-popper-placement^='right'] > #arrow {\n    left: -6px;\n}\n","import {\n    Component,\n    ComponentInterface, Element,\n    h, Host, Listen, Prop, State, Watch\n} from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport { WcsButtonMode, WcsButtonShape } from '../button/button-interface';\nimport { createPopper, Instance } from '@popperjs/core';\nimport { WcsDropdownPlacement } from './dropdown-interface';\nimport { clickTargetIsElementOrChildren, isEscapeKey, isKeydown, isKeyup } from '../../utils/helpers';\nimport { isElementFocused } from \"../../utils/accessibility\";\n\n\n@Component({\n    tag: 'wcs-dropdown',\n    styleUrl: 'dropdown.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Dropdown implements ComponentInterface {\n    @Element() private el: HTMLWcsDropdownElement;\n\n    /** Hides the arrow in the button */\n    @Prop() noArrow: boolean = false;\n\n    /** Dropdown's button mode */\n    @Prop() mode: WcsButtonMode = 'stroked';\n\n    /** Dropdown's button shape */\n    @Prop() shape: WcsButtonShape = 'normal';\n\n    /** Specifies whether the dropdown button is clickable or not */\n    @Prop() disabled: boolean = false;\n\n    /** placement of the dropdown's popover */\n    @Prop() placement: WcsDropdownPlacement = 'bottom-end';\n\n    @State() private expanded = false;\n\n\n    private popper: Instance;\n\n    private buttonTextColor: string;\n\n    @Watch('placement')\n    protected placementChange() {\n        this.popper.setOptions({\n            ...this.popper.state.options,\n            placement: this.placement\n        }).then(_ => this.popper.update());\n    }\n\n    componentDidLoad() {\n        const wcsButtonElement = this.el.shadowRoot.querySelector('wcs-button');\n        const buttonWrapper = wcsButtonElement.shadowRoot.querySelector('button');\n        this.buttonTextColor = window.getComputedStyle(buttonWrapper).color;\n        const popoverDiv = this.el.shadowRoot.querySelector('.popover') as HTMLElement;\n\n\n        this.popper = createPopper(wcsButtonElement, popoverDiv, {\n            placement: this.placement,\n            modifiers: [\n                {\n                    name: 'offset',\n                    options: {\n                        offset: [0, 8]\n                    }\n                }\n            ]\n        });\n\n        if (!this.noArrow) {\n            (this.el.shadowRoot.querySelector('.arrow') as HTMLElement).style.fill = this.buttonTextColor;\n        }\n        this.fixForFirefoxBelow63();\n    }\n\n    private fixForFirefoxBelow63() {\n        // If the items appear out of the slot we place them back\n        const items = this.el.querySelectorAll('wcs-dropdown-item');\n        const container = this.el.querySelector('.container');\n        if (items.length > 0 && container) {\n            items.forEach(i => {\n                this.el.removeChild(i);\n                container.appendChild(i);\n            });\n        }\n    }\n\n    private onButtonClick(_: MouseEvent): void {\n        this.expanded = !this.expanded;\n    }\n\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(event: MouseEvent) {\n        const clickedOnDropdownOrChildren = clickTargetIsElementOrChildren(event, this.el);\n        if (this.expanded && !clickedOnDropdownOrChildren) {\n            this.expanded = false;\n        }\n    }\n\n    @Listen('wcsDropdownItemClick')\n    dropdownItemClick(_: CustomEvent<void>) {\n        this.expanded = false;\n    }\n\n    @Listen('keydown')\n    onKeyDown(evt: KeyboardEvent): void {\n        if (this.expanded && (isKeydown(evt) || isKeyup(evt))) {\n            // If the user presses an arrow key (up or down), the browser is prevented from scrolling through\n            evt.preventDefault();\n            const items = Array.from(this.el.querySelectorAll('wcs-dropdown-item'));\n            const currentFocusedItemIndex = items.findIndex(item => isElementFocused(item));\n            // If the dropdown is expended by the user, but no item is focused and the keydown is pressed\n            if (currentFocusedItemIndex === -1 && isKeydown(evt)) {\n                this.focusFirstItemIfPresent(items);\n            } else {\n                this.moveFocusedItemByDirection(items, currentFocusedItemIndex, isKeydown(evt) ? 'down' : 'up');\n            }\n        }\n        if (this.expanded && isEscapeKey(evt)) {\n            this.closeOverlayAndFocusButton();\n        }\n    }\n\n\n    private focusFirstItemIfPresent<T extends HTMLElement>(items: T[]) {\n        if (items[0]) {\n            items[0].focus();\n        }\n    }\n\n    private moveFocusedItemByDirection<T extends HTMLElement>(items: T[], currentFocusedItemIndex: number, direction: 'up' | 'down') {\n        const itemToFocus = items[(currentFocusedItemIndex) + (direction === 'down' ? 1 : -1)];\n        if (itemToFocus) {\n            itemToFocus.focus();\n        }\n    }\n\n    private closeOverlayAndFocusButton() {\n        this.expanded = !this.expanded;\n        const wcsButton = this.el.shadowRoot.querySelector('wcs-button') as HTMLWcsButtonElement;\n        wcsButton.focus();\n    }\n\n    componentDidRender() {\n        if (this.popper) {\n            this.popper.update();\n        }\n        if (!this.noArrow) {\n            (this.el.shadowRoot.querySelector('.arrow') as HTMLElement).style.fill = this.buttonTextColor;\n        }\n    }\n\n    render() {\n        return (\n            <Host>\n                <wcs-button mode={this.mode} shape={this.shape} disabled={this.disabled}\n                            onClick={($event) => this.onButtonClick($event)}>\n                    <div class=\"wcs-button-content-wrapper\">\n                        <slot name=\"placeholder\"/>\n                        {this.noArrow ? null : (<SelectArrow up={this.expanded}/>)}\n                    </div>\n                </wcs-button>\n                <div class={(this.expanded ? 'show ' : '') + 'popover'}>\n                    <div id=\"arrow\" data-popper-arrow/>\n                    <div class=\"container\">\n                        <slot name=\"item\"/>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n\n"],"version":3}

package/dist/cjs/wcs-grid.cjs.entry.js

@@ -1384,7 +1384,7 @@ const Grid = class {
       case 'none':
         return;
       case 'single':
-        return index.h("td", null, index.h("wcs-radio", { checked: row.selected, onClick: this.onRowSelection.bind(this, row) }));
+        return index.h("td", null, index.h("wcs-radio", { checked: row.selected, onWcsRadioClick: this.onRowSelection.bind(this, row) }));
       case 'multiple':
         return index.h("td", null, index.h("wcs-checkbox", { checked: row.selected, onWcsChange: this.onRowSelection.bind(this, row) }));
     }