wcs-core 4.0.2 → 4.1.0

package/dist/cjs/wcs-skeleton-circle.cjs.entry.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca67a6dc.js');
+
+const skeletonCircleCss = ":host{display:block;position:relative;overflow:hidden}:host span{display:flex;flex:1 1 auto;height:100%;width:100%;min-height:1rem;background:#ededed;background:linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.15) 37%, rgba(0, 0, 0, 0.06) 63%);background-size:400% 100%}:host([animation=glide]) span{animation:glide 1.5s ease-in-out 0.5s infinite}:host([animation=pulse]){animation:pulse 1.5s ease-in-out 0.5s infinite}@keyframes glide{from{background-position:100% 50%}to{background-position:0 50%}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}:host{aspect-ratio:1/1;border-radius:999rem}";
+
+const SkeletonCircle = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.animation = 'glide';
+    this.radius = 50;
+  }
+  render() {
+    return (index.h(index.Host, { style: { width: `${this.radius}px`, height: `${this.radius}px` } }, index.h("span", { "aria-hidden": "true" })));
+  }
+};
+SkeletonCircle.style = skeletonCircleCss;
+
+exports.wcs_skeleton_circle = SkeletonCircle;
+
+//# sourceMappingURL=wcs-skeleton-circle.cjs.entry.js.map

package/dist/cjs/wcs-skeleton-circle.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"wcs-skeleton-circle.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,+mBAA+mB;;MCW5nB,cAAc;;;qBAKkC,OAAO;kBAKxB,EAAE;;EAE1C,MAAM;IACF,QACIA,QAACC,UAAI,IAAC,KAAK,EAAE,EAAC,KAAK,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI,EAAC,IAChED,iCAAkB,MAAM,GAAQ,CAC7B,EACT;GACL;;;;;;","names":["h","Host"],"sources":["./src/components/skeleton-circle/skeleton-circle.scss?tag=wcs-skeleton-circle&encapsulation=shadow","./src/components/skeleton-circle/skeleton-circle.tsx"],"sourcesContent":["@import \"../skeleton/skeleton.scss\";\n\n:host {\n    aspect-ratio: 1/1;\n    border-radius: 999rem;\n}\n","import { Component, ComponentInterface, h, Host, Prop } from \"@stencil/core\";\nimport { WcsSkeletonAnimation } from \"../skeleton/skeleton-interface\";\n\n/**\n * Use a skeleton circle as a placeholder round images, illustrations or components\n */\n@Component({\n    tag: 'wcs-skeleton-circle',\n    styleUrl: 'skeleton-circle.scss',\n    shadow: true\n})\nexport class SkeletonCircle implements ComponentInterface {\n\n    /**\n     * Specifies the animation of the skeleton\n     */\n    @Prop({reflect: true}) animation: WcsSkeletonAnimation = 'glide';\n\n    /**\n     * Specifies the radius of the circle in px\n     */\n    @Prop({reflect: true}) radius: number = 50;\n\n    render() {\n        return (\n            <Host style={{width: `${this.radius}px`, height: `${this.radius}px`}}>\n                <span aria-hidden=\"true\"></span>\n            </Host>\n        );\n    }\n\n}\n"],"version":3}

package/dist/cjs/wcs-skeleton-rectangle.cjs.entry.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca67a6dc.js');
+
+const skeletonRectangleCss = ":host{display:block;position:relative;overflow:hidden}:host span{display:flex;flex:1 1 auto;height:100%;width:100%;min-height:1rem;background:#ededed;background:linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.15) 37%, rgba(0, 0, 0, 0.06) 63%);background-size:400% 100%}:host([animation=glide]) span{animation:glide 1.5s ease-in-out 0.5s infinite}:host([animation=pulse]){animation:pulse 1.5s ease-in-out 0.5s infinite}@keyframes glide{from{background-position:100% 50%}to{background-position:0 50%}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}:host{--wcs-skeleton-border-radius:0rem}:host span{border-radius:var(--wcs-skeleton-border-radius)}:host([rounded]){--wcs-skeleton-border-radius:0.5rem}";
+
+const SkeletonRectangle = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.animation = 'glide';
+    this.rounded = false;
+    this.height = 'auto';
+    this.width = 'auto';
+  }
+  render() {
+    return (index.h(index.Host, { style: { height: this.height, width: this.width } }, index.h("span", null)));
+  }
+};
+SkeletonRectangle.style = skeletonRectangleCss;
+
+exports.wcs_skeleton_rectangle = SkeletonRectangle;
+
+//# sourceMappingURL=wcs-skeleton-rectangle.cjs.entry.js.map

package/dist/cjs/wcs-skeleton-rectangle.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"wcs-skeleton-rectangle.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,oBAAoB,GAAG,2tBAA2tB;;MCc3uB,iBAAiB;;;qBAK+B,OAAO;mBAKtB,KAAK;kBAKE,MAAM;iBAKR,MAAM;;EAErD,MAAM;IACF,QACIA,QAACC,UAAI,IAAC,KAAK,EAAE,EAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,IACjDD,qBAAa,CACV,EACT;GACL;;;;;;","names":["h","Host"],"sources":["./src/components/skeleton-rectangle/skeleton-rectangle.scss?tag=wcs-skeleton-rectangle&encapsulation=shadow","./src/components/skeleton-rectangle/skeleton-rectangle.tsx"],"sourcesContent":["@import \"../skeleton/skeleton.scss\";\n\n:host {\n    --wcs-skeleton-border-radius: 0rem;\n\n    span {\n        border-radius: var(--wcs-skeleton-border-radius);\n    }\n}\n\n:host([rounded]) {\n    --wcs-skeleton-border-radius: 0.5rem;\n}\n","import { Component, ComponentInterface, h, Host, Prop } from \"@stencil/core\";\nimport { WcsSkeletonAnimation } from \"../skeleton/skeleton-interface\";\nimport { CssTypes } from \"../../shared-types\";\n\n/**\n * Use a skeleton rectangle as a placeholder for large images or square-shaped components\n *\n * @cssprop --wcs-skeleton-border-radius - Controls the border-radius of the 'rounded' skeleton rectangle (default 0.5rem)\n */\n@Component({\n    tag: 'wcs-skeleton-rectangle',\n    styleUrl: 'skeleton-rectangle.scss',\n    shadow: true\n})\nexport class SkeletonRectangle implements ComponentInterface {\n\n    /**\n     * Specifies the animation of the skeleton\n     */\n    @Prop({reflect: true}) animation: WcsSkeletonAnimation = 'glide';\n\n    /**\n     * Adds a border radius on the skeleton if true\n     */\n    @Prop({reflect: true}) rounded: boolean = false;\n    \n    /**\n     * Specifies the height of the skeleton (can be any valid CSS value)\n     */\n    @Prop({reflect: true}) height: CssTypes.Height = 'auto';\n    \n    /**\n     * Specifies the width of the skeleton (can be any valid CSS value)\n     */\n    @Prop({reflect: true}) width: CssTypes.Width = 'auto';\n\n    render() {\n        return (\n            <Host style={{height: this.height, width: this.width}}>\n                <span></span>\n            </Host>\n        );\n    }\n\n}\n"],"version":3}

package/dist/cjs/wcs-skeleton-text.cjs.entry.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca67a6dc.js');
+
+const skeletonTextCss = ":host{display:block;position:relative;overflow:hidden}:host span{display:flex;flex:1 1 auto;height:100%;width:100%;min-height:1rem;background:#ededed;background:linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.15) 37%, rgba(0, 0, 0, 0.06) 63%);background-size:400% 100%}:host([animation=glide]) span{animation:glide 1.5s ease-in-out 0.5s infinite}:host([animation=pulse]){animation:pulse 1.5s ease-in-out 0.5s infinite}@keyframes glide{from{background-position:100% 50%}to{background-position:0 50%}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}:host([height=h1]){height:42px}:host([height=h2]){height:36px}:host([height=h3]){height:30px}:host([height=caption]){height:24px}:host([height=body]){height:16px}";
+
+const SkeletonText = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.animation = 'glide';
+    this.height = 'body';
+  }
+  render() {
+    return index.h("span", { "aria-hidden": "true" });
+  }
+};
+SkeletonText.style = skeletonTextCss;
+
+exports.wcs_skeleton_text = SkeletonText;
+
+//# sourceMappingURL=wcs-skeleton-text.cjs.entry.js.map

package/dist/cjs/wcs-skeleton-text.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"wcs-skeleton-text.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,quBAAquB;;MCWhvB,YAAY;;;qBAKoC,OAAO;kBAKN,MAAM;;EAEhE,MAAM;IACF,OAAOA,iCAAkB,MAAM,GAAQ,CAAC;GAC3C;;;;;;","names":["h"],"sources":["./src/components/skeleton-text/skeleton-text.scss?tag=wcs-skeleton-text&encapsulation=shadow","./src/components/skeleton-text/skeleton-text.tsx"],"sourcesContent":["@import \"../skeleton/skeleton.scss\";\n\n:host([height=h1]) {\n    height: 42px;\n}\n\n:host([height=h2]) {\n    height: 36px;\n}\n\n:host([height=h3]) {\n    height: 30px;\n}\n\n:host([height=caption]) {\n    height: 24px;\n}\n\n:host([height=body]) {\n    height: 16px;\n}\n\n","import { Component, ComponentInterface, h, Prop } from \"@stencil/core\";\nimport { WcsSkeletonAnimation } from \"../skeleton/skeleton-interface\";\n\n/**\n * Use a skeleton text as a placeholder for titles or paragraphs.\n */\n@Component({\n    tag: 'wcs-skeleton-text',\n    styleUrl: 'skeleton-text.scss',\n    shadow: true\n})\nexport class SkeletonText implements ComponentInterface {\n\n    /**\n     * Specifies the animation of the skeleton\n     */\n    @Prop({reflect: true}) animation: WcsSkeletonAnimation = 'glide';\n\n    /**\n     * Specifies the line height of the text skeleton\n     */\n    @Prop() height: 'h1' | 'h2' | 'h3' | 'caption' | 'body' = 'body';\n\n    render() {\n        return <span aria-hidden=\"true\"></span>;\n    }\n\n}\n"],"version":3}

package/dist/cjs/wcs.cjs.js

@@ -20,7 +20,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(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",[[1,"wcs-counter",{"size":[513],"label":[1],"min":[1026],"max":[1026],"step":[1026],"value":[1026],"currentValue":[32],"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"]]]]],["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-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",[[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);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -53,6 +53,9 @@
     "./components/radio-group/radio-group.js",
     "./components/select/select.js",
     "./components/select-option/select-option.js",
+    "./components/skeleton-circle/skeleton-circle.js",
+    "./components/skeleton-rectangle/skeleton-rectangle.js",
+    "./components/skeleton-text/skeleton-text.js",
     "./components/spinner/spinner.js",
     "./components/switch/switch.js",
     "./components/tab/tab.js",

package/dist/collection/components/button/button.js

@@ -4,6 +4,14 @@ import { isWcsButtonSize, WcsButtonSizeValues } from './button-interface';
 import { hasShadowDom } from '../../utils/helpers';
 /**
  * Button component, can also be a link when specifying href.
+ *
+ * ## Click event
+ *
+ * The WCS button relies on the native click event to pass a user click to your app.
+ * For now, it's not possible for us to prevent the click event to be fired when the button's disabled attribute is true.
+ * This means you'll receive click events on a disabled wcs button.
+ * If you're using the button with a library like Angular or React, they have internal mechanisms to prevent this behavior. Your callbacks will therefore not be called.
+ * To fix this problem, we plan to provide a wcsClick event in addition to the native click for applications developed without frameworks.
  */
 export class Button {
   constructor() {
@@ -17,6 +25,10 @@ export class Button {
     this.mode = 'plain';
     this.loading = false;
   }
+  /**
+   * Native event click is emit event if we decide to stop propagation of it
+   * @param ev
+   */
   onClick(ev) {
     if (this.disabled || this.loading) {
       ev.stopImmediatePropagation();

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

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, ComponentInterface, Element, h, Listen, Prop, Watch} from '@stencil/core';\n\nimport { MDCRipple } from '@material/ripple';\n\nimport {\n    isWcsButtonSize,\n    WcsButtonMode,\n    WcsButtonShape,\n    WcsButtonSize,\n    WcsButtonSizeValues,\n    WcsButtonType\n} from './button-interface';\nimport { hasShadowDom } from '../../utils/helpers';\n\n/**\n * Button component, can also be a link when specifying href.\n */\n@Component({\n    tag: 'wcs-button',\n    styleUrl: 'button.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Button implements ComponentInterface {\n    @Element() private el!: HTMLElement;\n\n    /**\n     * Specify the button type.\n     */\n    @Prop({ mutable: true }) type: WcsButtonType = 'button';\n\n    /**\n     * Set a URL to point to.<br/>\n     * If specified use a `a` tag instead of `btn`.\n     */\n    @Prop() href?: string;\n\n    /**\n     * Specifies where to open the linked document when using href (see prop above)<br/>\n     * Default '_self' will open the linked document in the same frame as it was clicked\n     */\n    @Prop() target?: '_blank' | '_self';\n\n    /**\n     * Specify whether the button is disabled or not.\n     */\n    @Prop({ reflect: true }) disabled = false;\n\n    /**\n     * Specify whether the button should have a ripple effect or not.\n     */\n    @Prop() ripple = true;\n    private mdcRipple: MDCRipple;\n\n    /**\n     * Specify the size of the button.\n     */\n    @Prop({ reflect: true }) size: WcsButtonSize = 'm';\n\n    /**\n     * Specify the shape of the button.\n     */\n    @Prop({ reflect: true }) shape: WcsButtonShape = 'normal';\n\n    /**\n     * This attribute specify the appearance of the button.\n     */\n    @Prop({ reflect: true }) mode: WcsButtonMode = 'plain';\n\n    /**\n     * Flag to display spinner until the end of action\n     */\n    @Prop({mutable: true}) loading: boolean = false;\n\n    @Listen('click')\n    onClick(ev: Event) {\n        if (this.disabled || this.loading) {\n            ev.stopImmediatePropagation();\n        }\n        if (this.type !== 'button' && hasShadowDom(this.el)) {\n            // this button wants to specifically submit a form\n            // climb up the dom to see if we're in a <form>\n            // and if so, then use JS to submit it\n            const form = this.el.closest('form');\n            if (form) {\n                ev.preventDefault();\n\n                const fakeButton = window.document.createElement('button');\n                fakeButton.type = this.type;\n                fakeButton.style.display = 'none';\n                form.appendChild(fakeButton);\n                fakeButton.click();\n                fakeButton.remove();\n            }\n        }\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        if (!isWcsButtonSize(this.size)) {\n            console.error(`Invalid size value for wcs-button : \"${this.size}\". Must be one of \"${WcsButtonSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n    }\n\n    componentDidLoad() {\n        this.mdcRipple = new MDCRipple(this.el.shadowRoot.querySelector('.wcs-inner-button'));\n    }\n\n    private enabledRippleEffect() {\n        this.mdcRipple.disabled = false;\n    }\n\n    private disabledRippleEffect() {\n        this.mdcRipple.disabled = true;\n    }\n\n    private getTagName() {\n        return this.href !== undefined ? 'a' : 'button';\n    }\n\n    @Watch('ripple')\n    onRippleChange(): void {\n        if (this.ripple) {\n            this.enabledRippleEffect();\n        } else {\n            this.disabledRippleEffect();\n        }\n    }\n\n    render() {\n        const TagType = this.getTagName();\n        const attrs = this.href !== undefined\n            ? { href: this.href, role: 'button', target: this.target }\n            : { type: this.type };\n        return (\n            <TagType\n                {...attrs}\n                class=\"wcs-inner-button\"\n                disabled = {this.disabled || this.loading}\n            >\n                {\n                    this.loading && <wcs-spinner></wcs-spinner>\n                }\n                <slot/>\n            </TagType>\n        );\n    }\n}\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, ComponentInterface, Element, h, Listen, Prop, Watch} from '@stencil/core';\n\nimport { MDCRipple } from '@material/ripple';\n\nimport {\n    isWcsButtonSize,\n    WcsButtonMode,\n    WcsButtonShape,\n    WcsButtonSize,\n    WcsButtonSizeValues,\n    WcsButtonType\n} from './button-interface';\nimport { hasShadowDom } from '../../utils/helpers';\n\n/**\n * Button component, can also be a link when specifying href.\n *\n * ## Click event\n *\n * The WCS button relies on the native click event to pass a user click to your app.\n * For now, it's not possible for us to prevent the click event to be fired when the button's disabled attribute is true.\n * This means you'll receive click events on a disabled wcs button.\n * If you're using the button with a library like Angular or React, they have internal mechanisms to prevent this behavior. Your callbacks will therefore not be called.\n * To fix this problem, we plan to provide a wcsClick event in addition to the native click for applications developed without frameworks.\n */\n@Component({\n    tag: 'wcs-button',\n    styleUrl: 'button.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Button implements ComponentInterface {\n    @Element() private el!: HTMLElement;\n\n    /**\n     * Specify the button type.\n     */\n    @Prop({ mutable: true }) type: WcsButtonType = 'button';\n\n    /**\n     * Set a URL to point to.<br/>\n     * If specified use a `a` tag instead of `btn`.\n     */\n    @Prop() href?: string;\n\n    /**\n     * Specifies where to open the linked document when using href (see prop above)<br/>\n     * Default '_self' will open the linked document in the same frame as it was clicked\n     */\n    @Prop() target?: '_blank' | '_self';\n\n    /**\n     * Specify whether the button is disabled or not.\n     */\n    @Prop({ reflect: true }) disabled = false;\n\n    /**\n     * Specify whether the button should have a ripple effect or not.\n     */\n    @Prop() ripple = true;\n    private mdcRipple: MDCRipple;\n\n    /**\n     * Specify the size of the button.\n     */\n    @Prop({ reflect: true }) size: WcsButtonSize = 'm';\n\n    /**\n     * Specify the shape of the button.\n     */\n    @Prop({ reflect: true }) shape: WcsButtonShape = 'normal';\n\n    /**\n     * This attribute specify the appearance of the button.\n     */\n    @Prop({ reflect: true }) mode: WcsButtonMode = 'plain';\n\n    /**\n     * Flag to display spinner until the end of action\n     */\n    @Prop({mutable: true}) loading: boolean = false;\n\n    /**\n     * Native event click is emit event if we decide to stop propagation of it\n     * @param ev\n     */\n    @Listen('click')  // TODO: define custom event click to be able to stop it's propagation when the custom button is disabled or is in loading state\n    onClick(ev: Event) {\n        if (this.disabled || this.loading) {\n            ev.stopImmediatePropagation();\n        }\n        if (this.type !== 'button' && hasShadowDom(this.el)) {\n            // this button wants to specifically submit a form\n            // climb up the dom to see if we're in a <form>\n            // and if so, then use JS to submit it\n            const form = this.el.closest('form');\n            if (form) {\n                ev.preventDefault();\n\n                const fakeButton = window.document.createElement('button');\n                fakeButton.type = this.type;\n                fakeButton.style.display = 'none';\n                form.appendChild(fakeButton);\n                fakeButton.click();\n                fakeButton.remove();\n            }\n        }\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        if (!isWcsButtonSize(this.size)) {\n            console.error(`Invalid size value for wcs-button : \"${this.size}\". Must be one of \"${WcsButtonSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n    }\n\n    componentDidLoad() {\n        this.mdcRipple = new MDCRipple(this.el.shadowRoot.querySelector('.wcs-inner-button'));\n    }\n\n    private enabledRippleEffect() {\n        this.mdcRipple.disabled = false;\n    }\n\n    private disabledRippleEffect() {\n        this.mdcRipple.disabled = true;\n    }\n\n    private getTagName() {\n        return this.href !== undefined ? 'a' : 'button';\n    }\n\n    @Watch('ripple')\n    onRippleChange(): void {\n        if (this.ripple) {\n            this.enabledRippleEffect();\n        } else {\n            this.disabledRippleEffect();\n        }\n    }\n\n    render() {\n        const TagType = this.getTagName();\n        const attrs = this.href !== undefined\n            ? { href: this.href, role: 'button', target: this.target }\n            : { type: this.type };\n        return (\n            <TagType\n                {...attrs}\n                class=\"wcs-inner-button\"\n                disabled = {this.disabled || this.loading}\n            >\n                {\n                    this.loading && <wcs-spinner></wcs-spinner>\n                }\n                <slot/>\n            </TagType>\n        );\n    }\n}\n"]}

package/dist/collection/components/com-nav/com-nav.css

@@ -70,6 +70,21 @@
   margin-left: var(--wcs-base-margin);
   border-left: solid 1px var(--wcs-text-light);
 }
+:host #mobile-menu-icon:focus {
+  outline: none;
+}
+:host #mobile-menu-icon:focus-visible::after {
+  outline: 2px dashed var(--wcs-primary);
+  outline-offset: 4px;
+  border-radius: 0.1rem;
+}
+@supports not selector(#mobile-menu-icon:focus-visible::after) {
+  :host #mobile-menu-icon:focus::after {
+    outline: 2px dashed var(--wcs-primary);
+    outline-offset: 4px;
+    border-radius: 0.1rem;
+  }
+}
 :host #mobile-menu-icon:after {
   font-family: icons;
   font-size: 24px;

package/dist/collection/components/com-nav/com-nav.js

@@ -1,5 +1,6 @@
 import { Host, h } from '@stencil/core';
 import { registerCloseHandlerForFocusOutEventOn } from "./com-nav-utils";
+import { isEnterKey, isEscapeKey, isSpaceKey } from "../../utils/helpers";
 const WCS_COM_NAV_SUBMENU_TAG_NAME = 'WCS-COM-NAV-SUBMENU';
 export class ComNav {
   constructor() {
@@ -66,7 +67,26 @@ export class ComNav {
   }
   //endregion
   render() {
-    return (h(Host, null, h("div", { class: "container" }, h("div", { class: "container-left" }, h("div", { class: "app-name" }, this.appName, h("slot", { name: "app-name" })), h("div", { class: "menu-bar" }, this.currentActiveSizing === 'desktop' ? h("slot", null) : null)), h("div", { class: "container-right" }, h("slot", { name: "actions" }), h("span", { id: "mobile-menu-icon", "data-mobile-open": this.mobileMenuOpen, onClick: () => this.mobileMenuIconClick() }))), h("div", { class: "mobile-overlay", "data-mobile-open": this.mobileMenuOpen }, this.currentActiveSizing === 'mobile' ? h("slot", null) : null)));
+    return (h(Host, null, h("div", { class: "container" }, h("div", { class: "container-left" }, h("div", { class: "app-name" }, this.appName, h("slot", { name: "app-name" })), h("div", { class: "menu-bar" }, this.currentActiveSizing === 'desktop' ? h("slot", null) : null)), h("div", { class: "container-right" }, h("slot", { name: "actions" }), h("span", { id: "mobile-menu-icon", tabindex: 0, "data-mobile-open": this.mobileMenuOpen, onClick: () => this.mobileMenuIconClick(), onKeyDown: evt => this.mobileMenuIconOnKeyDown(evt) }))), h("div", { class: "mobile-overlay", "data-mobile-open": this.mobileMenuOpen }, this.currentActiveSizing === 'mobile' ? h("slot", null) : null)));
+  }
+  /**
+   * Handle the keydown event on the mobile menu icon. Open the menu if the user press space or enter.
+   * @param evt The keydown event.
+   * @private
+   */
+  mobileMenuIconOnKeyDown(evt) {
+    if (isSpaceKey(evt) || isEnterKey(evt)) {
+      this.mobileMenuIconClick();
+    }
+  }
+  /**
+   * Close the mobile menu if the user press escape.
+   * @param evt keydown event on window target.
+   */
+  exitMobileMenuOnKeyDown(evt) {
+    if (isEscapeKey(evt)) {
+      this.mobileMenuOpen = false;
+    }
   }
   static get is() { return "wcs-com-nav"; }
   static get encapsulation() { return "shadow"; }
@@ -121,6 +141,12 @@ export class ComNav {
         "target": undefined,
         "capture": false,
         "passive": false
+      }, {
+        "name": "keydown",
+        "method": "exitMobileMenuOnKeyDown",
+        "target": "window",
+        "capture": false,
+        "passive": false
       }];
   }
 }

package/dist/collection/components/com-nav/com-nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"com-nav.js","sourceRoot":"","sources":["../../../src/components/com-nav/com-nav.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Host, h, Prop, Element, ComponentInterface, State, Listen} from '@stencil/core';\nimport {registerCloseHandlerForFocusOutEventOn} from \"./com-nav-utils\";\n\nconst WCS_COM_NAV_SUBMENU_TAG_NAME = 'WCS-COM-NAV-SUBMENU';\n\n@Component({\n    tag: 'wcs-com-nav',\n    styleUrl: 'com-nav.scss',\n    shadow: true,\n})\nexport class ComNav implements ComponentInterface {\n    @Element() private el!: HTMLWcsComNavElement;\n\n    /** Name of the application to be displayed in the menu bar */\n    @Prop() appName: string;\n\n    @State() private mobileMenuOpen: boolean = false;\n    @State() private currentActiveSizing: 'desktop' | 'mobile';\n    private resizeObserver: ResizeObserver;\n    private hasAlreadyRegisteredClickHandlerOnSlottedLink: boolean = false;\n\n    private mobileMenuIconClick() {\n        this.mobileMenuOpen = !this.mobileMenuOpen;\n    }\n\n    disconnectedCallback() {\n        this.resizeObserver?.disconnect();\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.resizeObserver = new ResizeObserver(entry => {\n            const cr = entry[0].contentRect;\n            const paddingRight = cr.right - cr.width;\n            const paddingLeft = cr.left;\n            if (cr.width < 576 - (paddingLeft + paddingRight)) {\n                this.currentActiveSizing = 'mobile';\n            } else {\n                this.currentActiveSizing = 'desktop';\n            }\n        });\n        this.resizeObserver.observe(document.body);\n\n        const slottedNavigableItems = this.el.querySelectorAll(':scope > wcs-com-nav-submenu:not([slot]), :scope > a:not([slot])');\n        registerCloseHandlerForFocusOutEventOn<HTMLWcsComNavSubmenuElement>(slottedNavigableItems, WCS_COM_NAV_SUBMENU_TAG_NAME);\n    }\n\n    componentDidRender() {\n        this.registerHandlerToCloseMobileMenuOnClickOnSlottedLinkTag();\n    }\n\n\n    private registerHandlerToCloseMobileMenuOnClickOnSlottedLinkTag() {\n        if (this.hasAlreadyRegisteredClickHandlerOnSlottedLink) return;\n\n        const mainSlot = this.el.shadowRoot.querySelector('slot:not([name])') as HTMLSlotElement;\n        if (mainSlot) {\n            this.hasAlreadyRegisteredClickHandlerOnSlottedLink = true;\n            // If the user click on a `a` tag, we close the mobile menu overlay.\n            mainSlot.assignedElements().filter(e => e.tagName === 'A').forEach(a => {\n                    a.addEventListener('click', _ => {\n                        this.mobileMenuOpen = false;\n                    })\n                }\n            );\n\n        }\n    }\n\n    //region Handlers for mobile menu overlay visibility\n    //\n    // In mobile mode, we have only one global drawer to display the menu, that why we have to listen the clicks events\n    // in the root component (this component). In desktop mode, all submenus and categories manage their drawer its\n    // opening state.\n    //\n    // We listen to the click events fired by the sebmenu component and we close the mobile menu.\n    // In desktop mode, the submenu itself manages the closing of the menu.\n    @Listen('wcsClickOnFinalAction')\n    onClickOnFinalAction() {\n        this.mobileMenuOpen = false;\n    }\n\n    // We also listen click events on the category menu items, to close the mobile menu.\n    // In desktop mode, the category itself manages the closing of the menu.\n    @Listen('wcsCategoryItemClicked')\n    onClickOnFinalActionCat() {\n        this.mobileMenuOpen = false;\n    }\n\n    //endregion\n\n    render() {\n        return (\n            <Host>\n                <div class=\"container\">\n                    <div class=\"container-left\">\n                        <div class=\"app-name\">{this.appName}\n                            <slot name=\"app-name\"/>\n                        </div>\n                        <div class=\"menu-bar\">\n                            {this.currentActiveSizing === 'desktop' ? <slot/> : null}\n                        </div>\n                    </div>\n                    <div class=\"container-right\">\n                        <slot name=\"actions\"/>\n                        <span id=\"mobile-menu-icon\" data-mobile-open={this.mobileMenuOpen}\n                              onClick={() => this.mobileMenuIconClick()}></span>\n                    </div>\n                </div>\n                <div class=\"mobile-overlay\" data-mobile-open={this.mobileMenuOpen}>\n                    {this.currentActiveSizing === 'mobile' ? <slot/> : null}\n                </div>\n            </Host>\n        );\n    }\n\n}\n"]}
+{"version":3,"file":"com-nav.js","sourceRoot":"","sources":["../../../src/components/com-nav/com-nav.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Host, h, Prop, Element, ComponentInterface, State, Listen} from '@stencil/core';\nimport {registerCloseHandlerForFocusOutEventOn} from \"./com-nav-utils\";\nimport { isEnterKey, isEscapeKey, isSpaceKey } from \"../../utils/helpers\";\n\nconst WCS_COM_NAV_SUBMENU_TAG_NAME = 'WCS-COM-NAV-SUBMENU';\n\n@Component({\n    tag: 'wcs-com-nav',\n    styleUrl: 'com-nav.scss',\n    shadow: true,\n})\nexport class ComNav implements ComponentInterface {\n    @Element() private el!: HTMLWcsComNavElement;\n\n    /** Name of the application to be displayed in the menu bar */\n    @Prop() appName: string;\n\n    @State() private mobileMenuOpen: boolean = false;\n    @State() private currentActiveSizing: 'desktop' | 'mobile';\n    private resizeObserver: ResizeObserver;\n    private hasAlreadyRegisteredClickHandlerOnSlottedLink: boolean = false;\n\n    private mobileMenuIconClick() {\n        this.mobileMenuOpen = !this.mobileMenuOpen;\n    }\n\n    disconnectedCallback() {\n        this.resizeObserver?.disconnect();\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.resizeObserver = new ResizeObserver(entry => {\n            const cr = entry[0].contentRect;\n            const paddingRight = cr.right - cr.width;\n            const paddingLeft = cr.left;\n            if (cr.width < 576 - (paddingLeft + paddingRight)) {\n                this.currentActiveSizing = 'mobile';\n            } else {\n                this.currentActiveSizing = 'desktop';\n            }\n        });\n        this.resizeObserver.observe(document.body);\n\n        const slottedNavigableItems = this.el.querySelectorAll(':scope > wcs-com-nav-submenu:not([slot]), :scope > a:not([slot])');\n        registerCloseHandlerForFocusOutEventOn<HTMLWcsComNavSubmenuElement>(slottedNavigableItems, WCS_COM_NAV_SUBMENU_TAG_NAME);\n    }\n\n    componentDidRender() {\n        this.registerHandlerToCloseMobileMenuOnClickOnSlottedLinkTag();\n    }\n\n\n    private registerHandlerToCloseMobileMenuOnClickOnSlottedLinkTag() {\n        if (this.hasAlreadyRegisteredClickHandlerOnSlottedLink) return;\n\n        const mainSlot = this.el.shadowRoot.querySelector('slot:not([name])') as HTMLSlotElement;\n        if (mainSlot) {\n            this.hasAlreadyRegisteredClickHandlerOnSlottedLink = true;\n            // If the user click on a `a` tag, we close the mobile menu overlay.\n            mainSlot.assignedElements().filter(e => e.tagName === 'A').forEach(a => {\n                    a.addEventListener('click', _ => {\n                        this.mobileMenuOpen = false;\n                    })\n                }\n            );\n\n        }\n    }\n\n    //region Handlers for mobile menu overlay visibility\n    //\n    // In mobile mode, we have only one global drawer to display the menu, that why we have to listen the clicks events\n    // in the root component (this component). In desktop mode, all submenus and categories manage their drawer its\n    // opening state.\n    //\n    // We listen to the click events fired by the sebmenu component and we close the mobile menu.\n    // In desktop mode, the submenu itself manages the closing of the menu.\n    @Listen('wcsClickOnFinalAction')\n    onClickOnFinalAction() {\n        this.mobileMenuOpen = false;\n    }\n\n    // We also listen click events on the category menu items, to close the mobile menu.\n    // In desktop mode, the category itself manages the closing of the menu.\n    @Listen('wcsCategoryItemClicked')\n    onClickOnFinalActionCat() {\n        this.mobileMenuOpen = false;\n    }\n\n    //endregion\n\n    render() {\n        return (\n            <Host>\n                <div class=\"container\">\n                    <div class=\"container-left\">\n                        <div class=\"app-name\">{this.appName}\n                            <slot name=\"app-name\"/>\n                        </div>\n                        <div class=\"menu-bar\">\n                            {this.currentActiveSizing === 'desktop' ? <slot/> : null}\n                        </div>\n                    </div>\n                    <div class=\"container-right\">\n                        <slot name=\"actions\"/>\n                        <span id=\"mobile-menu-icon\" tabindex={0} data-mobile-open={this.mobileMenuOpen}\n                              onClick={() => this.mobileMenuIconClick()} onKeyDown={evt => this.mobileMenuIconOnKeyDown(evt)}></span>\n                    </div>\n                </div>\n                <div class=\"mobile-overlay\" data-mobile-open={this.mobileMenuOpen}>\n                    {this.currentActiveSizing === 'mobile' ? <slot/> : null}\n                </div>\n            </Host>\n        );\n    }\n\n    /**\n     * Handle the keydown event on the mobile menu icon. Open the menu if the user press space or enter.\n     * @param evt The keydown event.\n     * @private\n     */\n    private mobileMenuIconOnKeyDown(evt: KeyboardEvent) {\n        if (isSpaceKey(evt) || isEnterKey(evt)) {\n            this.mobileMenuIconClick();\n        }\n    }\n\n    /**\n     * Close the mobile menu if the user press escape.\n     * @param evt keydown event on window target.\n     */\n    @Listen('keydown', {target: 'window'})\n    exitMobileMenuOnKeyDown(evt: KeyboardEvent) {\n        if(isEscapeKey(evt)) {\n            this.mobileMenuOpen = false;\n        }\n    }\n}\n"]}

package/dist/collection/components/counter/counter.js

@@ -8,23 +8,35 @@ const ANIMATION_DURATION = 0.175; // seconds
  */
 export class Counter {
   constructor() {
+    this.animateRunning = false;
     this.getCounterContainer = () => {
       return Array.from(this.el.shadowRoot.children)
         .find(el => el.tagName === 'DIV');
     };
     this.handleDecrement = () => {
-      if (this.min === undefined || this.currentValue > this.min) {
-        this.currentValue -= this.step;
+      if (this.min === undefined || this.value > this.min) {
+        // we set animateRunning here to prevent the watch method on value prop from affecting the displayed value
+        // before the animation runs.
+        this.animateRunning = true;
+        this.value -= this.step;
+        this.notifyChange();
         this.animate('up');
       }
     };
     this.handleIncrement = () => {
-      if (this.max === undefined || this.currentValue < this.max) {
-        this.currentValue += this.step;
+      if (this.max === undefined || this.value < this.max) {
+        // we set animateRunning here to prevent the watch method on value prop from affecting the displayed value
+        // before the animation runs.
+        this.animateRunning = true;
+        this.value += this.step;
+        this.notifyChange();
         this.animate('down');
       }
     };
     this.animate = (direction) => {
+      // In case someone call animate function, we want ensured that animateRunning is set to true to prevent other 
+      // method to mutate the displayedValue.
+      this.animateRunning = true;
       const counterContainer = this.getCounterContainer();
       const outliers = Array.from(counterContainer.children)
         .filter((span) => span.classList.contains('outliers'));
@@ -37,7 +49,8 @@ export class Counter {
         outliers.forEach((span) => {
           span.classList.add('hidden');
         });
-        this.displayedValue = this.currentValue;
+        this.displayedValue = this.value;
+        this.animateRunning = false;
       }, 1000 * ANIMATION_DURATION - 20);
     };
     this.size = 'm';
@@ -46,41 +59,45 @@ export class Counter {
     this.max = undefined;
     this.step = 1;
     this.value = undefined;
-    this.currentValue = undefined;
     this.displayedValue = undefined;
   }
   componentWillLoad() {
-    var _a, _b;
-    this.currentValue = (_b = (_a = this.value) !== null && _a !== void 0 ? _a : this.min) !== null && _b !== void 0 ? _b : 0;
-    this.displayedValue = this.currentValue;
+    this.handleValueChange();
     if (!isWcsCounterSize(this.size)) {
       console.error(`Invalid size value for wcs-counter : "${this.size}". Must be one of "${WcsCounterSizeValues.join(', ')}"`);
       this.size = "m"; // Default fallback value
     }
   }
-  /**
-   * Value change programmatically => update currentValue and displayedValue
-   */
-  valueChanged() {
-    var _a, _b;
-    this.currentValue = (_b = (_a = this.value) !== null && _a !== void 0 ? _a : this.min) !== null && _b !== void 0 ? _b : 0;
-    this.displayedValue = this.currentValue;
-  }
   /**
    * Current value change => handle event and interval
    */
-  currentValueChanged(newVal, oldVal) {
-    if (this.max !== undefined && this.currentValue > this.max) {
-      this.currentValue = this.max;
+  valueChange(newVal, oldVal) {
+    if (oldVal === newVal)
+      return;
+    this.handleValueChange();
+  }
+  handleValueChange() {
+    this.setMinimumIfValueIsUndefinedOrNull();
+    this.ensureValueIsNotOutOfMinMax();
+    this.updateDisplayValueIfNoAnimationRunning();
+  }
+  updateDisplayValueIfNoAnimationRunning() {
+    if (!this.animateRunning) {
+      this.displayedValue = this.value;
     }
-    else if (this.min !== undefined && this.currentValue < this.min) {
-      this.currentValue = this.min;
+  }
+  ensureValueIsNotOutOfMinMax() {
+    if (this.max !== undefined && this.value > this.max) {
+      this.value = this.max;
     }
-    // Emit event only if value has changed and if it's not at component initialization
-    if (newVal !== oldVal && oldVal !== undefined) {
-      this.wcsChange.emit({
-        value: this.currentValue
-      });
+    else if (this.min !== undefined && this.value < this.min) {
+      this.value = this.min;
+    }
+  }
+  setMinimumIfValueIsUndefinedOrNull() {
+    var _a;
+    if (this.value === undefined || this.value === null) {
+      this.value = (_a = this.min) !== null && _a !== void 0 ? _a : 0;
     }
   }
   onKeyDown(_event) {
@@ -94,17 +111,28 @@ export class Counter {
     }
     if (isHomeKey(_event)) {
       _event.preventDefault();
-      this.currentValue = this.min;
-      this.displayedValue = this.currentValue;
+      if (this.min != null) {
+        this.value = this.min;
+        this.displayedValue = this.value;
+        this.notifyChange();
+      }
     }
     if (isEndKey(_event)) {
       _event.preventDefault();
-      this.currentValue = this.max;
-      this.displayedValue = this.currentValue;
+      if (this.max != null) {
+        this.value = this.max;
+        this.displayedValue = this.value;
+        this.notifyChange();
+      }
     }
   }
+  notifyChange() {
+    this.wcsChange.emit({
+      value: this.value
+    });
+  }
   render() {
-    return (h(Host, null, h("wcs-button", { class: "wcs-primary", shape: "round", size: "s", tabindex: -1, onClick: () => this.handleDecrement(), onBlur: (event) => this.wcsBlur.emit(event), disabled: this.currentValue === this.min }, h("wcs-mat-icon", { icon: "remove", size: "s" })), h("div", { class: "counter-container" }, h("span", { id: "outlier-down", class: "outliers hidden", "aria-hidden": "true" }, this.displayedValue - this.step), h("span", { tabindex: "0", role: "spinbutton", class: "current-value", onBlur: (event) => this.wcsBlur.emit(event), onKeyDown: (event) => this.onKeyDown(event), "aria-valuenow": this.currentValue, "aria-valuetext": this.currentValue, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-label": this.label }, this.displayedValue), h("span", { id: "outlier-up", class: "outliers hidden", "aria-hidden": "true" }, this.displayedValue + this.step)), h("wcs-button", { class: "wcs-primary", shape: "round", size: "s", tabindex: -1, onClick: () => this.handleIncrement(), onBlur: (event) => this.wcsBlur.emit(event), disabled: this.currentValue === this.max }, h("wcs-mat-icon", { icon: "add", size: "s" }))));
+    return (h(Host, null, 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 }, h("wcs-mat-icon", { icon: "remove", size: "s" })), h("div", { class: "counter-container" }, h("span", { id: "outlier-down", class: "outliers hidden", "aria-hidden": "true" }, this.displayedValue - this.step), 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), h("span", { id: "outlier-up", class: "outliers hidden", "aria-hidden": "true" }, this.displayedValue + this.step)), 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 }, h("wcs-mat-icon", { icon: "add", size: "s" }))));
   }
   static get is() { return "wcs-counter"; }
   static get encapsulation() { return "shadow"; }
@@ -220,11 +248,11 @@ export class Counter {
           "resolved": "number",
           "references": {}
         },
-        "required": false,
-        "optional": true,
+        "required": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "Allow to change currentValue programmatically"
+          "text": "The current value of the counter."
         },
         "attribute": "value",
         "reflect": false
@@ -233,7 +261,6 @@ export class Counter {
   }
   static get states() {
     return {
-      "currentValue": {},
       "displayedValue": {}
     };
   }
@@ -283,10 +310,7 @@ export class Counter {
   static get watchers() {
     return [{
         "propName": "value",
-        "methodName": "valueChanged"
-      }, {
-        "propName": "currentValue",
-        "methodName": "currentValueChanged"
+        "methodName": "valueChange"
       }];
   }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"counter.js","sourceRoot":"","sources":["../../../src/components/counter/counter.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    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     * Allow to change currentValue programmatically\n     */\n    @Prop({mutable: true}) value?: number;\n\n    /**\n     * The current value of the counter.\n     */\n    @State() private currentValue!: number;\n\n    /**\n     * Only for animation and display purpose\n     */\n    @State() private displayedValue: number;\n\n    /**\n     * Emitted when the counter loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    componentWillLoad() {\n        this.currentValue = this.value ?? this.min ?? 0;\n        this.displayedValue = this.currentValue;\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     * Value change programmatically => update currentValue and displayedValue\n     */\n    @Watch('value')\n    valueChanged() {\n        this.currentValue = this.value ?? this.min ?? 0;\n        this.displayedValue = this.currentValue;\n    }\n\n    /**\n     * Current value change => handle event and interval\n     */\n    @Watch('currentValue')\n    currentValueChanged(newVal: any, oldVal: any) {\n        if (this.max !== undefined && this.currentValue > this.max) {\n            this.currentValue = this.max;\n        } else if (this.min !== undefined && this.currentValue < this.min) {\n            this.currentValue = this.min;\n        }\n\n        // Emit event only if value has changed and if it's not at component initialization\n        if (newVal !== oldVal && oldVal !== undefined) {\n            this.wcsChange.emit({\n                value: this.currentValue\n            });\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            this.currentValue = this.min;\n            this.displayedValue = this.currentValue;\n        }\n        if (isEndKey(_event)) {\n            _event.preventDefault();\n            this.currentValue = this.max;\n            this.displayedValue = this.currentValue;\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.currentValue > this.min) {\n            this.currentValue -= this.step;\n            this.animate('up');\n        }\n    };\n\n    private handleIncrement = () => {\n        if (this.max === undefined || this.currentValue < this.max) {\n            this.currentValue += this.step;\n            this.animate('down');\n        }\n    };\n\n    private animate = (direction: 'up' | 'down') => {\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.currentValue;\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.currentValue === 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.currentValue}\n                          aria-valuetext={this.currentValue}\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.currentValue === 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":"counter.js","sourceRoot":"","sources":["../../../src/components/counter/counter.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    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"]}