npm - wcs-core - Versions diffs - 7.0.0 → 7.2.0 - Mend

wcs-core 7.0.0 → 7.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (664) hide show

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

@@ -1,8 +1,6 @@
 import { h, Host } from "@stencil/core";
-import { inheritAriaAttributes, inheritAttributes, isEndKey, isHomeKey, isKeydown, isKeyup, setOrRemoveAttribute } from "../../utils/helpers";
-import { isWcsCounterSize, WcsCounterSizeValues } from "./counter-interface";
+import { inheritAriaAttributes, inheritAttributes, isEndKey, isHomeKey, isKeydown, isKeyup, parseCssTimeValueToMilliseconds, setOrRemoveAttribute } from "../../utils/helpers";
 const COUNTER_INHERITED_ATTRS = ['tabindex', 'title'];
-const ANIMATION_DURATION = 0.175; // seconds
 /**
  * Counter component, meant to be used for small range of values (e.g : 0 - 5).<br>
  * For larger or specific ranges, please use [wcs-input (type number)](.?path=/docs/components-input--documentation)
@@ -32,6 +30,11 @@ const ANIMATION_DURATION = 0.175; // seconds
 export class Counter {
     constructor() {
         this.inheritedAttributes = {};
+        /**
+         * Default animation duration, in milliseconds
+         * @private
+         */
+        this.ANIMATION_DURATION = 150;
         this.animateRunning = false;
         this.handleDecrement = () => {
             if (this.disabled)
@@ -74,7 +77,7 @@ export class Counter {
                 });
                 this.displayedValue = this.value;
                 this.animateRunning = false;
-            }, 1000 * ANIMATION_DURATION - 20);
+            }, this.ANIMATION_DURATION - 20);
         };
         this.size = 'm';
         this.label = undefined;
@@ -87,12 +90,12 @@ export class Counter {
     }
     componentWillLoad() {
         this.handleValueChange();
-        if (!isWcsCounterSize(this.size)) {
-            console.warn(`Invalid size value for wcs-counter : "${this.size}". Must be one of "${WcsCounterSizeValues.join(', ')}"`);
-            this.size = "m"; // Default fallback value
-        }
         this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, COUNTER_INHERITED_ATTRS));
     }
+    componentDidRender() {
+        var _a, _b;
+        this.ANIMATION_DURATION = (_b = parseCssTimeValueToMilliseconds((_a = window.getComputedStyle(this.el).getPropertyValue('--wcs-counter-transition-duration')) !== null && _a !== void 0 ? _a : '150ms')) !== null && _b !== void 0 ? _b : 150;
+    }
     async setAriaAttribute(attr, value) {
         setOrRemoveAttribute(this.spinButton, attr, value);
     }
@@ -162,7 +165,7 @@ export class Counter {
         });
     }
     render() {
-        return (h(Host, { key: 'd434b2eec575d309f38d01c6e41098d0642e46f8' }, h("div", { key: '03b667ad64ca4df8d7c46ac0091abdaff9c99227', class: "counter" }, h("wcs-button", { key: '365f153616e5f96d2d00441c535cbe8d6d3014d6', class: "wcs-primary", shape: "round", size: "s", tabindex: -1, onClick: () => this.handleDecrement(), onBlur: (event) => this.wcsBlur.emit(event), disabled: this.disabled || this.value === this.min }, h("wcs-mat-icon", { key: '7c8d7c723648ef133cdf2da19dd29daf65a4a997', icon: "remove", size: "s" })), h("div", { key: 'c07088653c5a8d08e6cfe039cfa8386ec6daf8cf', class: "counter-container", ref: input => this.counterContainer = input }, h("span", { key: '7f048ddef2bacb1a8c4bd7167afe9e51cd3116e8', id: "outlier-down", class: "outliers", hidden: true, "aria-hidden": "true" }, this.displayedValue - this.step), h("span", Object.assign({ key: 'd1f38d3ca08a2f8ddf6b71c5585e96e1cec9b3b7', tabindex: this.disabled ? -1 : 0, role: "spinbutton", ref: (el) => this.spinButton = el, class: "current-value", onBlur: (event) => this.wcsBlur.emit(event), onKeyDown: (event) => this.onKeyDown(event), "aria-disabled": this.disabled ? 'true' : null, "aria-valuenow": this.value, "aria-valuetext": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-label": this.label }, this.inheritedAttributes), this.displayedValue), h("span", { key: 'ace304e6764d87d3cc774cd4d22cac39b2012c0f', id: "outlier-up", class: "outliers", hidden: true, "aria-hidden": "true" }, this.displayedValue + this.step)), h("wcs-button", { key: 'ab7241308c768ee562921707ecfffba03b8e57d7', class: "wcs-primary", shape: "round", size: "s", tabindex: -1, onClick: () => this.handleIncrement(), onBlur: (event) => this.wcsBlur.emit(event), disabled: this.disabled || this.value === this.max }, h("wcs-mat-icon", { key: '4b3bd5cceb59cfd6b6d4a95c07da1f33c64f6347', icon: "add", size: "s" })))));
+        return (h(Host, { key: '6f1d46e231cc1f88a92a2faa0122e1ed7b9dd834' }, h("div", { key: 'c3ed2c944c2a8f61ab862411b1d503a84ac37ae4', class: "counter" }, h("wcs-button", { key: 'c0d0d41e07a99ef0730b22d029529e629ff2f8d3', class: "wcs-primary", shape: "round", size: "s", tabindex: -1, onClick: () => this.handleDecrement(), onBlur: (event) => this.wcsBlur.emit(event), disabled: this.disabled || this.value === this.min }, h("wcs-mat-icon", { key: '5003db6a007f8ede51d567a76ea18160fdb60949', icon: "remove", size: "s" })), h("div", { key: 'ae3b0ca61a95fe908583df73748b7e7d19242fd0', class: "counter-container", ref: input => this.counterContainer = input }, h("span", { key: '499a0d0ff7f38fcae6664b118991aeb39f5d6034', id: "outlier-down", class: "outliers", hidden: true, "aria-hidden": "true" }, this.displayedValue - this.step), h("span", Object.assign({ key: '62cab421b796106f0b2957e4d8445266bd6ba754', tabindex: this.disabled ? -1 : 0, role: "spinbutton", ref: (el) => this.spinButton = el, class: "current-value", onBlur: (event) => this.wcsBlur.emit(event), onKeyDown: (event) => this.onKeyDown(event), "aria-disabled": this.disabled ? 'true' : null, "aria-valuenow": this.value, "aria-valuetext": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-label": this.label }, this.inheritedAttributes), this.displayedValue), h("span", { key: '339b6949d2b64262085f7bda19897f9533166cb4', id: "outlier-up", class: "outliers", hidden: true, "aria-hidden": "true" }, this.displayedValue + this.step)), h("wcs-button", { key: 'ee77cee6c9d08225c1844d1c4703ea6868c054da', class: "wcs-primary", shape: "round", size: "s", tabindex: -1, onClick: () => this.handleIncrement(), onBlur: (event) => this.wcsBlur.emit(event), disabled: this.disabled || this.value === this.max }, h("wcs-mat-icon", { key: 'b1b6cc395186ee871801d47ad2b9b62791f64b29', icon: "add", size: "s" })))));
     }
     static get is() { return "wcs-counter"; }
     static get encapsulation() { return "shadow"; }
@@ -235,7 +238,7 @@ export class Counter {
                     "text": "Specify whether the counter is disabled or not."
                 },
                 "attribute": "disabled",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "min": {

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

	@@ -1 +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, Element,\n Event,\n EventEmitter,\n h,\n Host, Method,\n Prop,\n State,\n Watch\n} from '@stencil/core';\nimport {\n inheritAriaAttributes,\n inheritAttributes,\n isEndKey,\n isHomeKey,\n isKeydown,\n isKeyup,\n setOrRemoveAttribute\n} from '../../utils/helpers';\nimport { CounterChangeEventDetail, isWcsCounterSize, WcsCounterSize, WcsCounterSizeValues } from './counter-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst COUNTER_INHERITED_ATTRS = ['tabindex', 'title'];\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 * @cssprop --wcs-counter-border-radius - Border radius of the counter\n * \n * @cssprop --wcs-counter-value-color-default - Default color of the value \n * @cssprop --wcs-counter-value-color-disabled - Color of the text when the counter is disabled\n * @cssprop --wcs-counter-font-weight - Font weight of the value\n * \n * @cssprop --wcs-counter-height-m - Height medium of the counter\n * @cssprop --wcs-counter-height-l - Height large of the counter\n * @cssprop --wcs-counter-font-size-m - Font size medium of the counter\n * @cssprop --wcs-counter-font-size-l - Font size large of the counter\n * @cssprop --wcs-counter-padding-m - Padding medium of the counter\n * @cssprop --wcs-counter-padding-l - Padding large of the counter\n * \n * @cssprop --wcs-counter-background-color - Background color of the counter\n * @cssprop --wcs-counter-gap - Gap between the buttons and the label\n * @cssprop --wcs-counter-gap-size-m - Gap between the buttons and the label when the size is M\n * @cssprop --wcs-counter-gap-size-l - Gap between the buttons and the label when the size is L\n * @cssprop --wcs-counter-outline-color-focus - Color of the focus outline\n \n @cssprop --wcs-counter-transition-duration - Duration of the animation\n * \n /\n@Component({\n tag: 'wcs-counter',\n styleUrl: 'counter.scss',\n shadow: {\n delegatesFocus: true\n },\n})\nexport class Counter implements ComponentInterface, MutableAriaAttribute {\n @Element() private el!: HTMLElement;\n private spinButton!: HTMLSpanElement;\n private counterContainer!: HTMLDivElement;\n private inheritedAttributes: { [k: string]: any } = {};\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 Specify whether the counter is disabled or not.\n /\n @Prop() disabled = false;\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.warn(`Invalid size value for wcs-counter : \"${this.size}\". Must be one of \"${WcsCounterSizeValues.join(', ')}\"`);\n this.size = \"m\"; // Default fallback value\n }\n\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, COUNTER_INHERITED_ATTRS),\n };\n }\n \n\n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string \| null \| undefined) {\n setOrRemoveAttribute(this.spinButton, attr, value);\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 (this.disabled) return; \n \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 handleDecrement = () => {\n if (this.disabled) return;\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.disabled) return;\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 outliers = Array.from(this.counterContainer.children)\n .filter((span: HTMLSpanElement) => span.classList.contains('outliers'));\n\n this.counterContainer.classList.add('animate-' + direction);\n outliers.forEach((span: HTMLSpanElement) => {\n span.hidden = false;\n });\n setTimeout(() => {\n this.counterContainer.classList.remove('animate-' + direction);\n outliers.forEach((span: HTMLSpanElement) => {\n span.hidden = true;\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 <div class=\"counter\">\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.disabled \|\| this.value === this.min}>\n <wcs-mat-icon icon=\"remove\" size=\"s\"></wcs-mat-icon> \n </wcs-button>\n <div class=\"counter-container\" ref={input => this.counterContainer = input}>\n <span id=\"outlier-down\"\n class=\"outliers\"\n hidden\n aria-hidden=\"true\">{this.displayedValue - this.step}</span>\n <span tabindex={this.disabled ? -1 : 0}\n role=\"spinbutton\"\n ref={(el) => this.spinButton = el}\n class=\"current-value\"\n onBlur={(event) => this.wcsBlur.emit(event)}\n onKeyDown={(event) => this.onKeyDown(event)}\n aria-disabled={this.disabled ? 'true' : null}\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}\n {...this.inheritedAttributes}>{this.displayedValue}</span>\n <span id=\"outlier-up\"\n class=\"outliers\"\n 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.disabled \|\| this.value === this.max}>\n <wcs-mat-icon icon=\"add\" size=\"s\"></wcs-mat-icon>\n </wcs-button>\n </div>\n </Host>\n );\n }\n}\n"]}
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, Element,\n Event,\n EventEmitter,\n h,\n Host, Method,\n Prop,\n State,\n Watch\n} from '@stencil/core';\nimport {\n inheritAriaAttributes,\n inheritAttributes,\n isEndKey,\n isHomeKey,\n isKeydown,\n isKeyup,\n parseCssTimeValueToMilliseconds,\n setOrRemoveAttribute\n} from '../../utils/helpers';\nimport { CounterChangeEventDetail, WcsCounterSize } from './counter-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst COUNTER_INHERITED_ATTRS = ['tabindex', 'title'];\n\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 * @cssprop --wcs-counter-border-radius - Border radius of the counter\n * \n * @cssprop --wcs-counter-value-color-default - Default color of the value \n * @cssprop --wcs-counter-value-color-disabled - Color of the text when the counter is disabled\n * @cssprop --wcs-counter-font-weight - Font weight of the value\n * \n * @cssprop --wcs-counter-height-m - Height medium of the counter\n * @cssprop --wcs-counter-height-l - Height large of the counter\n * @cssprop --wcs-counter-font-size-m - Font size medium of the counter\n * @cssprop --wcs-counter-font-size-l - Font size large of the counter\n * @cssprop --wcs-counter-padding-m - Padding medium of the counter\n * @cssprop --wcs-counter-padding-l - Padding large of the counter\n * \n * @cssprop --wcs-counter-background-color - Background color of the counter\n * @cssprop --wcs-counter-gap - Gap between the buttons and the label\n * @cssprop --wcs-counter-gap-size-m - Gap between the buttons and the label when the size is M\n * @cssprop --wcs-counter-gap-size-l - Gap between the buttons and the label when the size is L\n * @cssprop --wcs-counter-outline-color-focus - Color of the focus outline\n \n @cssprop --wcs-counter-transition-duration - Duration of the animation\n * \n /\n@Component({\n tag: 'wcs-counter',\n styleUrl: 'counter.scss',\n shadow: {\n delegatesFocus: true\n },\n})\nexport class Counter implements ComponentInterface, MutableAriaAttribute {\n @Element() private el!: HTMLElement;\n private spinButton!: HTMLSpanElement;\n private counterContainer!: HTMLDivElement;\n private inheritedAttributes: { [k: string]: any } = {};\n\n /\n Default animation duration, in milliseconds\n * @private\n /\n private ANIMATION_DURATION = 150;\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 Specify whether the counter is disabled or not.\n /\n @Prop({ reflect: true }) disabled: boolean = false;\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: boolean = false;\n\n /\n Emitted when the counter loses focus.\n /\n @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n componentWillLoad() {\n this.handleValueChange();\n\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, COUNTER_INHERITED_ATTRS),\n };\n }\n \n componentDidRender() {\n this.ANIMATION_DURATION = parseCssTimeValueToMilliseconds(window.getComputedStyle(this.el).getPropertyValue('--wcs-counter-transition-duration') ?? '150ms') ?? 150;\n }\n\n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string \| null \| undefined) {\n setOrRemoveAttribute(this.spinButton, attr, value);\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 (this.disabled) return; \n \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 handleDecrement = () => {\n if (this.disabled) return;\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.disabled) return;\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 outliers = Array.from(this.counterContainer.children)\n .filter((span: HTMLSpanElement) => span.classList.contains('outliers'));\n\n this.counterContainer.classList.add('animate-' + direction);\n outliers.forEach((span: HTMLSpanElement) => {\n span.hidden = false;\n });\n setTimeout(() => {\n this.counterContainer.classList.remove('animate-' + direction);\n outliers.forEach((span: HTMLSpanElement) => {\n span.hidden = true;\n });\n this.displayedValue = this.value;\n\n this.animateRunning = false;\n }, this.ANIMATION_DURATION - 20);\n }\n\n render() {\n return (\n <Host>\n <div class=\"counter\">\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.disabled \|\| this.value === this.min}>\n <wcs-mat-icon icon=\"remove\" size=\"s\"></wcs-mat-icon> \n </wcs-button>\n <div class=\"counter-container\" ref={input => this.counterContainer = input}>\n <span id=\"outlier-down\"\n class=\"outliers\"\n hidden\n aria-hidden=\"true\">{this.displayedValue - this.step}</span>\n <span tabindex={this.disabled ? -1 : 0}\n role=\"spinbutton\"\n ref={(el) => this.spinButton = el}\n class=\"current-value\"\n onBlur={(event) => this.wcsBlur.emit(event)}\n onKeyDown={(event) => this.onKeyDown(event)}\n aria-disabled={this.disabled ? 'true' : null}\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}\n {...this.inheritedAttributes}>{this.displayedValue}</span>\n <span id=\"outlier-up\"\n class=\"outliers\"\n 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.disabled \|\| this.value === this.max}>\n <wcs-mat-icon icon=\"add\" size=\"s\"></wcs-mat-icon>\n </wcs-button>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/divider/divider.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { h, Host } from "@stencil/core";
  */
 export class Divider {
     render() {
-        return (h(Host, { key: '19525963d8b8e0153b9644369ca44959cea01efa' }));
+        return (h(Host, { key: 'cf4452e90a52e1bb419fec0db2d9c0838ad7b134' }));
     }
     static get is() { return "wcs-divider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown/dropdown.js CHANGED Viewed

@@ -1,6 +1,5 @@
 import { h, Host } from "@stencil/core";
 import { SelectArrow } from "../select/select-arrow";
-import { isWcsButtonSize, WcsButtonSizeValues } from "../button/button-interface";
 import { createPopper } from "@popperjs/core";
 import { clickTargetIsElementOrChildren, inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from "../../utils/helpers";
 import { getActionForKeyboardEvent } from "./dropdown-keyboard-event";
@@ -50,10 +49,6 @@ export class Dropdown {
         this.expanded = false;
     }
     componentDidLoad() {
-        if (!isWcsButtonSize(this.size)) {
-            console.warn(`Invalid size value for wcs-dropdown : "${this.size}". Must be one of "${WcsButtonSizeValues.join(', ')}"`);
-            this.size = "m"; // Default fallback value
-        }
         this.popper = createPopper(this.wcsButton, this.popoverDiv, {
             placement: this.placement,
             modifiers: [
@@ -203,7 +198,7 @@ export class Dropdown {
         this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, DROPDOWN_INHERITED_ATTRS));
     }
     render() {
-        return (h(Host, { key: 'd9f0aaa67dff366e7348e4aa04e320da4e22140d' }, h("button", Object.assign({ key: '4a51cdba15db74f689368a04730fb369fa3eea5f', id: "dropdown-button", "aria-controls": "menu", disabled: this.disabled, "aria-haspopup": "true", role: "button", "aria-expanded": this.expanded ? 'true' : 'false', ref: el => this.nativeButton = el, onClick: ($event) => this.onButtonClick($event), onBlur: ($event) => $event.stopImmediatePropagation() }, this.inheritedAttributes), "Dropdown"), h("wcs-button", { key: '2889dd5844070fdebe42378d78ea48ff98d46747', mode: this.mode, shape: this.shape, disabled: this.disabled, size: this.size, ref: el => this.wcsButton = el, "aria-hidden": "true", tabindex: -1, onClick: ($event) => this.onButtonClick($event), onBlur: (e) => e.stopImmediatePropagation() }, h("div", { key: 'ebefdbf77021cf3419d0189c868532e9322ab074', class: "wcs-button-content-wrapper" }, h("slot", { key: '58221a64908d7366d1fa14db09ab3dcb8bcd01af', name: "placeholder" }), this.noArrow ? null : (h(SelectArrow, { up: this.expanded })))), h("div", { key: 'b2fb5b0ef3729efc573c38b7c93a1bb7cc9c8018', class: (this.expanded ? 'show ' : '') + 'popover', id: "menu", role: "menu", "aria-labelledby": "dropdown-button", tabindex: -1, ref: el => this.popoverDiv = el }, h("div", { key: '3ba77338711b95656bd126a0cf46056371f27f51', role: "presentation", id: "arrow", "data-popper-arrow": true }), h("div", { key: '99971db1b1ea35b64548a4fa441bee906e447612', role: "presentation", class: "container" }, h("slot", { key: 'fcb72e8f187871dc19b58e6cb3f072f5a7fc88ec', name: "item" }, h("span", { key: '1aa63a1942b320d8322f90fd35eee4f1a744235c', id: "is-empty" }))))));
+        return (h(Host, { key: '96be2f9df0a80b4d6c88cf15419ff29cb001c695' }, h("button", Object.assign({ key: '562456822837e6ff61ed23569335e42ad4e36df9', id: "dropdown-button", "aria-controls": "menu", disabled: this.disabled, "aria-haspopup": "true", role: "button", "aria-expanded": this.expanded ? 'true' : 'false', ref: el => this.nativeButton = el, onClick: ($event) => this.onButtonClick($event), onBlur: ($event) => $event.stopImmediatePropagation() }, this.inheritedAttributes), "Dropdown"), h("wcs-button", { key: '66348725409b810219dd1bd4658611c63bbb5eb8', mode: this.mode, shape: this.shape, disabled: this.disabled, size: this.size, ref: el => this.wcsButton = el, "aria-hidden": "true", tabindex: -1, onClick: ($event) => this.onButtonClick($event), onBlur: (e) => e.stopImmediatePropagation() }, h("div", { key: '028e06637e35ecc14b66cf74fba32dc59d58121a', class: "wcs-button-content-wrapper" }, h("slot", { key: '7f7e2db54f9b5d3a20588c48c1d3fd6750187017', name: "placeholder" }), this.noArrow ? null : (h(SelectArrow, { up: this.expanded })))), h("div", { key: '7f6f4efe22cab63033b3e7775791856ed8e1b921', class: (this.expanded ? 'show ' : '') + 'popover', id: "menu", role: "menu", "aria-labelledby": "dropdown-button", tabindex: -1, ref: el => this.popoverDiv = el }, h("div", { key: 'ca7ce6adea1005d7126d4ae060ada55e9d3b6d70', role: "presentation", id: "arrow", "data-popper-arrow": true }), h("div", { key: '0f2a9e15df898550117743f855e7ee0746157ab1', role: "presentation", class: "container" }, h("slot", { key: '688fd29a894bae8aee4c848a9b07380c95302ca2', name: "item" }, h("span", { key: 'a80c902d26d7afed58e8a17646dac92473042fa4', id: "is-empty" }))))));
     }
     static get is() { return "wcs-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -235,7 +230,7 @@ export class Dropdown {
                     "text": "Hides the arrow in the button"
                 },
                 "attribute": "no-arrow",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "mode": {
@@ -325,7 +320,7 @@ export class Dropdown {
                     "text": "Specifies whether the dropdown button is clickable or not"
                 },
                 "attribute": "disabled",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "placement": {

package/dist/collection/components/dropdown/dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport {\n isWcsButtonSize,\n WcsButtonMode,\n WcsButtonShape,\n WcsButtonSize,\n WcsButtonSizeValues\n} from '../button/button-interface';\nimport { createPopper, Instance } from '@popperjs/core';\nimport { WcsDropdownPlacement } from './dropdown-interface';\nimport {\n clickTargetIsElementOrChildren,\n inheritAriaAttributes,\n inheritAttributes,\n setOrRemoveAttribute\n} from '../../utils/helpers';\nimport { getActionForKeyboardEvent, KeyboardEventAssociatedAction } from \"./dropdown-keyboard-event\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst DROPDOWN_INHERITED_ATTRS = ['tabindex'];\n\n/*\n The dropdown component use a wcs-button under the hood, so you can use the same css classes as the button to style the\n * dropdown.\n * \n * @slot placeholder - The slot containing the placeholder displayed in button\n * @slot item - The slot container the list of `wcs-dropdown-item` elements\n * \n * @cssprop --wcs-dropdown-outline-color-focus - Outline color of dropdown when focus it\n * \n * @cssprop --wcs-dropdown-plain-arrow-color - Color of the arrow indicator when the dropdown is plain\n * @cssprop --wcs-dropdown-stroked-arrow-color - Color of the arrow indicator when the dropdown is stroked\n * @cssprop --wcs-dropdown-clear-arrow-color - Color of the arrow indicator when the dropdown is not filled\n * @cssprop --wcs-dropdown-arrow-color-disabled - Base color of the arrow indicator when the dropdown is disabled\n * \n * @cssprop --wcs-dropdown-padding-empty - Padding of and empty dropdown\n * \n * @cssprop --wcs-dropdown-overlay-padding - Defines the vertical padding inside the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-max-height - Specifies the maximum height of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-background-color - Determines the background color of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-border-width - Sets the border width of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-border-radius - Defines the border radius of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-border-color - Specifies the border color of the dropdown overlay\n /\n@Component({\n tag: 'wcs-dropdown',\n styleUrl: 'dropdown.scss',\n shadow: {\n delegatesFocus: true\n }\n})\nexport class Dropdown implements ComponentInterface, MutableAriaAttribute {\n @Element() private el: HTMLWcsDropdownElement;\n private inheritedAttributes: { [k: string]: any } = {};\n\n /\n This button is visually hidden. It used to carry all aria attributes and acts as the controller of the menu.\n * The wcs-button could not handle the aria-controls and aria-activedescendant attributes because of the IDREF\n * not passing from a shadow-dom through another.\n * @private\n /\n private nativeButton!: HTMLButtonElement;\n\n /\n This button is shown on the user interface, and visually receives focus and catch click events. \n * It is hidden to screen readers since the native button carries all the aria informations.\n * @private\n /\n private wcsButton!: HTMLWcsButtonElement;\n\n /\n This div is shown on the user interface when the dropdown is expanded.\n * @private\n /\n private popoverDiv!: HTMLDivElement;\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 /* Dropdown's button size /\n @Prop() size: WcsButtonSize = 'm';\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 lastFocusedItemElement: HTMLWcsDropdownItemElement \| null;\n \n private get items(): HTMLWcsDropdownItemElement[] {\n return Array.from(this.el.querySelectorAll('wcs-dropdown-item'));\n }\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 @Listen('blur')\n onBlur() {\n this.clearLastFocusedItem();\n this.expanded = false;\n }\n\n componentDidLoad() {\n if (!isWcsButtonSize(this.size)) {\n console.warn(`Invalid size value for wcs-dropdown : \"${this.size}\". Must be one of \"${WcsButtonSizeValues.join(', ')}\"`);\n this.size = \"m\"; // Default fallback value\n }\n\n this.popper = createPopper(this.wcsButton, this.popoverDiv, {\n placement: this.placement,\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [0, 8]\n }\n }\n ]\n });\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.clearLastFocusedItem();\n this.expanded = !this.expanded;\n \n if (this.expanded) {\n this.focusItem(0);\n }\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 this.nativeButton.focus();\n }\n\n @Listen('keydown')\n onKeyDown(_event: KeyboardEvent): void {\n const currentState = this.expanded ? 'opened' : 'closed';\n const actionsFromKeyboardEvents: KeyboardEventAssociatedAction[] = getActionForKeyboardEvent(_event, currentState);\n\n // If we have at least one associated actions, we prevent the default behavior of the event. \n // Except if the action is a focus move (we have to handle the preventDefault behavior ourselves in the action implementation)\n if (actionsFromKeyboardEvents.length != 0) {\n _event.preventDefault();\n }\n\n for (const actionFromKeyboardEvent of actionsFromKeyboardEvents) {\n this.doActionFromKeyboardEventAssociatedAction(actionFromKeyboardEvent);\n }\n }\n \n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string \| null \| undefined) {\n setOrRemoveAttribute(this.nativeButton, attr, value);\n }\n\n doActionFromKeyboardEventAssociatedAction(actionFromKeyboardEvent: KeyboardEventAssociatedAction) {\n switch (actionFromKeyboardEvent.kind) {\n case 'OpenMenu':\n this.expanded = true;\n this.focusItem(0);\n break;\n case 'CloseMenu':\n this.expanded = false;\n this.nativeButton.focus();\n break;\n case 'ClearFocus':\n this.clearLastFocusedItem();\n break;\n case 'FocusItem':\n switch (actionFromKeyboardEvent.target) {\n case 'previous':\n this.focusClosestItem('previous');\n break;\n case 'next':\n this.focusClosestItem('next');\n break;\n case 'first':\n this.focusItem(0);\n break;\n case 'last':\n this.focusItem(this.items.length - 1);\n break;\n default:\n break;\n }\n break;\n default:\n break;\n }\n }\n\n /\n Removes the focus and tabindex 0 of the last focused item if any.\n * @private\n */\n private clearLastFocusedItem() {\n if (this.lastFocusedItemElement) {\n this.lastFocusedItemElement.tabIndex = -1;\n this.lastFocusedItemElement = null;\n }\n }\n \n private focusItem(indexToFocus: number) {\n this.clearLastFocusedItem();\n this.lastFocusedItemElement = this.items[indexToFocus];\n if (this.lastFocusedItemElement) {\n this.lastFocusedItemElement.tabIndex = 0;\n requestAnimationFrame(() => {\n this.lastFocusedItemElement?.focus();\n });\n }\n }\n \n private focusClosestItem(direction: 'next' \| 'previous'): void {\n const indexToFocus = this.getClosestActiveItemIndexForDirection(direction);\n if (indexToFocus === -1) return;\n \n this.focusItem(indexToFocus);\n }\n \n private getClosestActiveItemIndexForDirection(direction: 'next' \| 'previous'): number {\n const items = this.items;\n let currentIndex = Array.from(items).indexOf(this.lastFocusedItemElement);\n\n const MIN_INDEX = 0;\n const MAX_INDEX = items.length - 1;\n\n if (direction === 'next' && currentIndex < MAX_INDEX) {\n currentIndex++;\n } else if (direction === 'previous' && currentIndex > MIN_INDEX) {\n currentIndex--;\n } else {\n // Used to scroll through items infinitely with keyboard\n if (direction === 'next' && currentIndex >= MAX_INDEX) {\n currentIndex = 0;\n }\n if (direction === 'previous' && currentIndex === MIN_INDEX) {\n currentIndex = MAX_INDEX;\n }\n }\n \n return currentIndex;\n }\n\n componentDidRender() {\n if (this.popper) {\n this.popper.update();\n }\n }\n\n componentWillLoad(): Promise<void> \| void {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, DROPDOWN_INHERITED_ATTRS),\n };\n }\n \n render() {\n return (\n <Host>\n <button id=\"dropdown-button\"\n aria-controls=\"menu\"\n disabled={this.disabled}\n aria-haspopup=\"true\"\n role=\"button\"\n aria-expanded={this.expanded ? 'true' : 'false'}\n ref={el => this.nativeButton = el}\n onClick={($event) => this.onButtonClick($event)}\n onBlur={($event) => $event.stopImmediatePropagation()}\n {...this.inheritedAttributes}>Dropdown</button>\n <wcs-button mode={this.mode} shape={this.shape} disabled={this.disabled} size={this.size}\n ref={el => this.wcsButton = el}\n aria-hidden=\"true\"\n tabindex={-1}\n onClick={($event) => this.onButtonClick($event)}\n onBlur={(e) => e.stopImmediatePropagation()}>\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 id=\"menu\"\n role=\"menu\"\n aria-labelledby=\"dropdown-button\"\n tabindex={-1}\n ref={el => this.popoverDiv = el}>\n <div role=\"presentation\" id=\"arrow\" data-popper-arrow/>\n <div role=\"presentation\" class=\"container\">\n <slot name=\"item\">\n <span id={\"is-empty\"}></span>\n </slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n\n"]}
1	+ {"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport {\n WcsButtonMode,\n WcsButtonShape,\n WcsButtonSize,\n} from '../button/button-interface';\nimport { createPopper, Instance } from '@popperjs/core';\nimport { WcsDropdownPlacement } from './dropdown-interface';\nimport {\n clickTargetIsElementOrChildren,\n inheritAriaAttributes,\n inheritAttributes,\n setOrRemoveAttribute\n} from '../../utils/helpers';\nimport { getActionForKeyboardEvent, KeyboardEventAssociatedAction } from \"./dropdown-keyboard-event\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst DROPDOWN_INHERITED_ATTRS = ['tabindex'];\n\n/*\n The dropdown component use a wcs-button under the hood, so you can use the same css classes as the button to style the\n * dropdown.\n * \n * @slot placeholder - The slot containing the placeholder displayed in button\n * @slot item - The slot container the list of `wcs-dropdown-item` elements\n * \n * @cssprop --wcs-dropdown-outline-color-focus - Outline color of dropdown when focus it\n * \n * @cssprop --wcs-dropdown-plain-arrow-color - Color of the arrow indicator when the dropdown is plain\n * @cssprop --wcs-dropdown-stroked-arrow-color - Color of the arrow indicator when the dropdown is stroked\n * @cssprop --wcs-dropdown-clear-arrow-color - Color of the arrow indicator when the dropdown is not filled\n * @cssprop --wcs-dropdown-arrow-color-disabled - Base color of the arrow indicator when the dropdown is disabled\n * \n * @cssprop --wcs-dropdown-padding-empty - Padding of and empty dropdown\n * \n * @cssprop --wcs-dropdown-overlay-padding - Defines the vertical padding inside the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-max-height - Specifies the maximum height of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-background-color - Determines the background color of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-border-width - Sets the border width of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-border-radius - Defines the border radius of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-border-color - Specifies the border color of the dropdown overlay\n /\n@Component({\n tag: 'wcs-dropdown',\n styleUrl: 'dropdown.scss',\n shadow: {\n delegatesFocus: true\n }\n})\nexport class Dropdown implements ComponentInterface, MutableAriaAttribute {\n @Element() private el: HTMLWcsDropdownElement;\n private inheritedAttributes: { [k: string]: any } = {};\n\n /\n This button is visually hidden. It used to carry all aria attributes and acts as the controller of the menu.\n * The wcs-button could not handle the aria-controls and aria-activedescendant attributes because of the IDREF\n * not passing from a shadow-dom through another.\n * @private\n /\n private nativeButton!: HTMLButtonElement;\n\n /\n This button is shown on the user interface, and visually receives focus and catch click events. \n * It is hidden to screen readers since the native button carries all the aria informations.\n * @private\n /\n private wcsButton!: HTMLWcsButtonElement;\n\n /\n This div is shown on the user interface when the dropdown is expanded.\n * @private\n /\n private popoverDiv!: HTMLDivElement;\n\n /* Hides the arrow in the button /\n @Prop({ reflect: true }) 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 /* Dropdown's button size /\n @Prop() size: WcsButtonSize = 'm';\n\n /* Specifies whether the dropdown button is clickable or not /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* placement of the dropdown's popover /\n @Prop() placement: WcsDropdownPlacement = 'bottom-end';\n\n @State() private expanded: boolean = false;\n\n\n private popper: Instance;\n \n private lastFocusedItemElement: HTMLWcsDropdownItemElement \| null;\n \n private get items(): HTMLWcsDropdownItemElement[] {\n return Array.from(this.el.querySelectorAll('wcs-dropdown-item'));\n }\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 @Listen('blur')\n onBlur() {\n this.clearLastFocusedItem();\n this.expanded = false;\n }\n\n componentDidLoad() {\n this.popper = createPopper(this.wcsButton, this.popoverDiv, {\n placement: this.placement,\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [0, 8]\n }\n }\n ]\n });\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.clearLastFocusedItem();\n this.expanded = !this.expanded;\n \n if (this.expanded) {\n this.focusItem(0);\n }\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 this.nativeButton.focus();\n }\n\n @Listen('keydown')\n onKeyDown(_event: KeyboardEvent): void {\n const currentState = this.expanded ? 'opened' : 'closed';\n const actionsFromKeyboardEvents: KeyboardEventAssociatedAction[] = getActionForKeyboardEvent(_event, currentState);\n\n // If we have at least one associated actions, we prevent the default behavior of the event. \n // Except if the action is a focus move (we have to handle the preventDefault behavior ourselves in the action implementation)\n if (actionsFromKeyboardEvents.length != 0) {\n _event.preventDefault();\n }\n\n for (const actionFromKeyboardEvent of actionsFromKeyboardEvents) {\n this.doActionFromKeyboardEventAssociatedAction(actionFromKeyboardEvent);\n }\n }\n \n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string \| null \| undefined) {\n setOrRemoveAttribute(this.nativeButton, attr, value);\n }\n\n doActionFromKeyboardEventAssociatedAction(actionFromKeyboardEvent: KeyboardEventAssociatedAction) {\n switch (actionFromKeyboardEvent.kind) {\n case 'OpenMenu':\n this.expanded = true;\n this.focusItem(0);\n break;\n case 'CloseMenu':\n this.expanded = false;\n this.nativeButton.focus();\n break;\n case 'ClearFocus':\n this.clearLastFocusedItem();\n break;\n case 'FocusItem':\n switch (actionFromKeyboardEvent.target) {\n case 'previous':\n this.focusClosestItem('previous');\n break;\n case 'next':\n this.focusClosestItem('next');\n break;\n case 'first':\n this.focusItem(0);\n break;\n case 'last':\n this.focusItem(this.items.length - 1);\n break;\n default:\n break;\n }\n break;\n default:\n break;\n }\n }\n\n /\n Removes the focus and tabindex 0 of the last focused item if any.\n * @private\n */\n private clearLastFocusedItem() {\n if (this.lastFocusedItemElement) {\n this.lastFocusedItemElement.tabIndex = -1;\n this.lastFocusedItemElement = null;\n }\n }\n \n private focusItem(indexToFocus: number) {\n this.clearLastFocusedItem();\n this.lastFocusedItemElement = this.items[indexToFocus];\n if (this.lastFocusedItemElement) {\n this.lastFocusedItemElement.tabIndex = 0;\n requestAnimationFrame(() => {\n this.lastFocusedItemElement?.focus();\n });\n }\n }\n \n private focusClosestItem(direction: 'next' \| 'previous'): void {\n const indexToFocus = this.getClosestActiveItemIndexForDirection(direction);\n if (indexToFocus === -1) return;\n \n this.focusItem(indexToFocus);\n }\n \n private getClosestActiveItemIndexForDirection(direction: 'next' \| 'previous'): number {\n const items = this.items;\n let currentIndex = Array.from(items).indexOf(this.lastFocusedItemElement);\n\n const MIN_INDEX = 0;\n const MAX_INDEX = items.length - 1;\n\n if (direction === 'next' && currentIndex < MAX_INDEX) {\n currentIndex++;\n } else if (direction === 'previous' && currentIndex > MIN_INDEX) {\n currentIndex--;\n } else {\n // Used to scroll through items infinitely with keyboard\n if (direction === 'next' && currentIndex >= MAX_INDEX) {\n currentIndex = 0;\n }\n if (direction === 'previous' && currentIndex === MIN_INDEX) {\n currentIndex = MAX_INDEX;\n }\n }\n \n return currentIndex;\n }\n\n componentDidRender() {\n if (this.popper) {\n this.popper.update();\n }\n }\n\n componentWillLoad(): Promise<void> \| void {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, DROPDOWN_INHERITED_ATTRS),\n };\n }\n \n render() {\n return (\n <Host>\n <button id=\"dropdown-button\"\n aria-controls=\"menu\"\n disabled={this.disabled}\n aria-haspopup=\"true\"\n role=\"button\"\n aria-expanded={this.expanded ? 'true' : 'false'}\n ref={el => this.nativeButton = el}\n onClick={($event) => this.onButtonClick($event)}\n onBlur={($event) => $event.stopImmediatePropagation()}\n {...this.inheritedAttributes}>Dropdown</button>\n <wcs-button mode={this.mode} shape={this.shape} disabled={this.disabled} size={this.size}\n ref={el => this.wcsButton = el}\n aria-hidden=\"true\"\n tabindex={-1}\n onClick={($event) => this.onButtonClick($event)}\n onBlur={(e) => e.stopImmediatePropagation()}>\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 id=\"menu\"\n role=\"menu\"\n aria-labelledby=\"dropdown-button\"\n tabindex={-1}\n ref={el => this.popoverDiv = el}>\n <div role=\"presentation\" id=\"arrow\" data-popper-arrow/>\n <div role=\"presentation\" class=\"container\">\n <slot name=\"item\">\n <span id={\"is-empty\"}></span>\n </slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n\n"]}

package/dist/collection/components/dropdown-divider/dropdown-divider.js CHANGED Viewed

@@ -8,7 +8,7 @@ import { h, Host } from "@stencil/core";
  */
 export class DropdownDivider {
     render() {
-        return (h(Host, { key: '81d4f1fbc372b6905c0abfa9ab2e17da62e66bb7', slot: "item", tabindex: "-1", "aria-hidden": "true" }));
+        return (h(Host, { key: '52d90154f003445f1d62badde51df437a38d6f19', slot: "item", tabindex: "-1", "aria-hidden": "true" }));
     }
     static get is() { return "wcs-dropdown-divider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown-header/dropdown-header.js CHANGED Viewed

@@ -12,7 +12,7 @@ import { h, Host } from "@stencil/core";
  */
 export class DropdownHeader {
     render() {
-        return (h(Host, { key: 'f039b729d86e1f346c2880e9496357478282a8e1', slot: "item", tabindex: "-1" }, h("slot", { key: '74daac4ec9add9a5b2cd3a16dd820c64a2a55954' })));
+        return (h(Host, { key: 'a9f4cf33ebcc666bd3f703c3d51d17b655f28ed8', slot: "item", tabindex: "-1" }, h("slot", { key: 'ccabe9a8805d48d8b2bec9326b5aaa1b6338f06b' })));
     }
     static get is() { return "wcs-dropdown-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown-item/dropdown-item.js CHANGED Viewed

@@ -31,7 +31,7 @@ export class DropdownItem {
         }
     }
     render() {
-        return (h(Host, { key: '42948ba23a57e020d496f17bf667e976ce7768d2', slot: "item", role: "menuitem", tabindex: "-1" }, h("slot", { key: '6f5ac6bf76bc964f5a28ca5d6ee3bd43c3213e50' })));
+        return (h(Host, { key: '70e0767afe5fe295df4292e356db89d555fa71a3', slot: "item", role: "menuitem", tabindex: "-1" }, h("slot", { key: '11cd674f89784aec6bfa1ba4d15f0fb0f25d976e' })));
     }
     static get is() { return "wcs-dropdown-item"; }
     static get originalStyleUrls() {

package/dist/collection/components/editable-field/editable-field.css CHANGED Viewed

@@ -6,7 +6,7 @@
   --wcs-editable-field-background-color: var(--wcs-semantic-color-background-control-default);
   --wcs-editable-field-value-font-weight: var(--wcs-semantic-font-weight-medium);
   --wcs-editable-field-value-color-default: var(--wcs-semantic-color-text-primary);
-  --wcs-editable-field-value-color-hover: var(--wcs-semantic-color-foreground-brand);
+  --wcs-editable-field-value-color-hover: var(--wcs-semantic-color-text-primary);
   --wcs-editable-field-value-color-readonly: var(--wcs-semantic-color-text-tertiary);
   --wcs-editable-field-height-m: var(--wcs-semantic-size-m);
   --wcs-editable-field-height-l: var(--wcs-semantic-size-l);
@@ -18,12 +18,16 @@
   --wcs-editable-field-border-width-hover: var(--wcs-semantic-border-width-default);
   --wcs-editable-field-border-color-default: var(--wcs-semantic-color-border-primary);
   --wcs-editable-field-border-color-hover: var(--wcs-semantic-color-border-control-focus);
+  --wcs-editable-field-border-color-focus: var(--wcs-semantic-color-border-control-focus);
   --wcs-editable-field-border-style: var(--wcs-semantic-border-style-focus-control);
   --wcs-editable-field-padding-vertical-m: 0;
   --wcs-editable-field-padding-vertical-l: 0;
-  --wcs-editable-field-padding-horizontal-m: calc(var(--wcs-semantic-spacing-large) - var(--wcs-editable-field-border-width));
-  --wcs-editable-field-padding-horizontal-l: calc(var(--wcs-semantic-spacing-large) - var(--wcs-editable-field-border-width));
+  --wcs-editable-field-padding-horizontal-m: var(--wcs-semantic-spacing-large);
+  --wcs-editable-field-padding-horizontal-l: var(--wcs-semantic-spacing-large);
   --wcs-editable-field-icon-color-readonly: var(--wcs-semantic-color-text-tertiary);
+  --wcs-editable-field-host-padding: var(--wcs-editable-field-padding-vertical-m) var(--wcs-editable-field-padding-horizontal-m);
+  --wcs-editable-field-host-height: var(--wcs-editable-field-height-m);
+  --wcs-editable-field-font-size: var(--wcs-editable-field-font-size-m);
   display: block;
 }
 :host .display-none {
@@ -39,7 +43,22 @@
   display: flex;
   width: 100%;
 }
-:host .display-container {
+:host .edit-container .visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  outline: 0;
+  outline-offset: 0;
+}
+:host button.display-container {
+  width: 100%;
+  border: none;
+  font-family: inherit;
+  text-align: start;
   box-sizing: border-box;
   min-height: var(--wcs-editable-field-host-height);
   white-space: break-spaces;
@@ -53,10 +72,9 @@
   font-weight: var(--wcs-editable-field-value-font-weight);
   color: var(--wcs-editable-field-value-color-default);
   padding: var(--wcs-editable-field-host-padding);
-  transition: 150ms all;
   outline: var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width) var(--wcs-editable-field-border-color-default);
 }
-:host .display-container wcs-mat-icon {
+:host button.display-container wcs-mat-icon {
   display: none;
 }
 :host .load-container {
@@ -72,7 +90,6 @@
   font-weight: var(--wcs-editable-field-value-font-weight);
   color: var(--wcs-editable-field-value-color-default);
   padding: var(--wcs-editable-field-host-padding);
-  transition: 150ms all;
   outline: var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width) var(--wcs-editable-field-border-color-default);
   align-items: center;
 }
@@ -90,15 +107,22 @@
 :host([readonly]) .display-container {
   color: var(--wcs-editable-field-value-color-readonly);
 }
+:host([readonly]) .display-container:focus-visible {
+  outline: var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width-focus) var(--wcs-editable-field-border-color-default);
+}
+:host(:not([readonly])) .display-container:hover wcs-mat-icon,
+:host(:not([readonly])) .display-container:focus-visible wcs-mat-icon {
+  display: flex;
+  align-items: center;
+}
 :host(:not([readonly])) .display-container:hover {
   color: var(--wcs-editable-field-value-color-hover);
   cursor: pointer;
   outline: var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width-hover) var(--wcs-editable-field-border-color-hover);
 }
-:host(:not([readonly])) .display-container:hover wcs-mat-icon {
-  display: flex;
-  align-items: center;
+:host(:not([readonly])) .display-container:focus-visible {
+  outline: var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width-focus) var(--wcs-editable-field-border-color-focus);
 }
 :host([size=l]) {

package/dist/collection/components/editable-field/editable-field.e2e.js ADDED Viewed

@@ -0,0 +1,176 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('wcs-editable-field', () => {
+    it('renders with input element and default props', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+            <wcs-editable-field label="Test Input" value="Initial value" type="input" id="test">
+                <wcs-input></wcs-input>
+            </wcs-editable-field>
+        `);
+        const displayContainer = await page.find('wcs-editable-field >>> .display-container');
+        expect(displayContainer).not.toBeNull();
+        expect(displayContainer.textContent).toContain('Initial value');
+        const label = await page.find('wcs-editable-field >>> .label');
+        expect(label.textContent).toBe('Test Input');
+    });
+    it('transitions from DISPLAY to EDIT state when clicked', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+            <wcs-editable-field label="Test Input" value="Initial value" type="input" id="test">
+                <wcs-input></wcs-input>
+            </wcs-editable-field>
+        `);
+        const displayContainer = await page.find('wcs-editable-field >>> .display-container');
+        await displayContainer.click();
+        // Wait for state transition
+        await page.waitForChanges();
+        const editContainer = await page.find('wcs-editable-field >>> .edit-container:not(.display-none)');
+        expect(editContainer).not.toBeNull();
+    });
+    it('properly handles validation', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+            <wcs-editable-field id="validate-test" label="Test Validation" value="Valid" error-msg="Value is invalid" type="input">
+                <wcs-input></wcs-input>
+            </wcs-editable-field>
+        `);
+        // Set up validation function
+        await page.$eval('wcs-editable-field', (el) => {
+            el.validateFn = (val) => val === 'Valid';
+        });
+        // Go to edit mode
+        const displayContainer = await page.find('wcs-editable-field >>> .display-container');
+        await displayContainer.click();
+        await page.waitForChanges();
+        // Input invalid value
+        const input = await page.find('wcs-input');
+        await input.type('Invalid');
+        await page.waitForChanges();
+        // Trigger validation (simulate Enter key)
+        await input.press('Enter');
+        await page.waitForChanges();
+        // Check error message is displayed
+        const errorElement = await page.find('wcs-editable-field >>> wcs-error');
+        expect(errorElement).not.toBeNull();
+        expect(errorElement.textContent).toBe('Value is invalid');
+    });
+    it('emits wcsChange event with correct data', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+            <wcs-editable-field label="Test Events" value="Old value" type="input" id="event-test">
+                <wcs-input id="test-input"></wcs-input>
+            </wcs-editable-field>
+        `);
+        const changeEvent = await page.spyOnEvent('wcsChange');
+        // Go to edit mode
+        const displayContainer = await page.find('wcs-editable-field >>> .display-container');
+        await displayContainer.click();
+        await page.waitForChanges();
+        // Input new value
+        const input = await page.find('wcs-input');
+        await input.press('Backspace'); // Clear value (backspace is easier than selecting all)
+        await input.press('Backspace');
+        await input.press('Backspace');
+        await input.press('Backspace');
+        await input.press('Backspace');
+        await input.press('Backspace');
+        await input.press('Backspace');
+        await input.press('Backspace');
+        await input.press('Backspace');
+        await input.type('New value');
+        await page.waitForChanges();
+        // Submit the form
+        await input.press('Enter');
+        await page.waitForChanges();
+        // Note: Functions defined in the event's detail object (successHandler and errorHandler)
+        // are not cloned by the DOM's structured clone algorithm.
+        // This means that when the event is emitted, these functions will not be present in the
+        // event.detail object when accessed in E2E tests, even though they exist in the browser.
+        expect(changeEvent).toHaveNthReceivedEventDetail(0, {
+            newValue: 'New value'
+        });
+    });
+    it('respects readonly property', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+            <wcs-editable-field label="Read Only Field" value="Readonly value" readonly="true" type="input" id="test">
+                <wcs-input></wcs-input>
+            </wcs-editable-field>
+        `);
+        // Check readonly icon is displayed
+        const readonlyIcon = await page.find('wcs-editable-field >>> .readonly-icon');
+        expect(readonlyIcon).not.toBeNull();
+        // Try clicking
+        const displayContainer = await page.find('wcs-editable-field >>> .display-container');
+        await displayContainer.click();
+        await page.waitForChanges();
+        // Should still be in display mode
+        const editContainer = await page.find('wcs-editable-field >>> .edit-container:not(.display-none)');
+        expect(editContainer).toBeNull();
+    });
+    it('works correctly with textarea', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+            <wcs-editable-field label="Textarea Test" type="textarea" value="Multiline\nText" id="test">
+                <wcs-textarea></wcs-textarea>
+            </wcs-editable-field>
+        `);
+        // Check it renders correctly
+        const displayContainer = await page.find('wcs-editable-field >>> .display-container');
+        expect(displayContainer.textContent).toContain('Multiline\nText');
+        // Go to edit mode
+        await displayContainer.click();
+        await page.waitForChanges();
+        // Should need Ctrl+Enter to submit with textarea
+        const textarea = await page.find('wcs-textarea');
+        await textarea.press('Enter'); // This should NOT submit
+        await page.waitForChanges();
+        // Should still be in edit mode
+        const editContainerVisible = await page.find('wcs-editable-field >>> .edit-container:not(.display-none)');
+        expect(editContainerVisible).not.toBeNull();
+    });
+    it('works correctly with select', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+            <wcs-editable-field label="Select Test" type="select" value="option1" id="test">
+                <wcs-select>
+                    <wcs-select-option value="option1">Option 1</wcs-select-option>
+                    <wcs-select-option value="option2">Option 2</wcs-select-option>
+                </wcs-select>
+            </wcs-editable-field>
+        `);
+        // Go to edit mode
+        const displayContainer = await page.find('wcs-editable-field >>> .display-container');
+        await displayContainer.click();
+        await page.waitForChanges();
+        // We get the select element
+        const select = await page.find('wcs-select');
+        await select.focus();
+        await select.press('ArrowDown');
+        // press CTRL + ENTER (combined) to validate
+        await page.keyboard.down('Control');
+        await page.keyboard.press('Enter');
+        await page.keyboard.up('Control');
+        await page.waitForChanges();
+        // Should be in load state after change
+        const loadContainer = await page.find('wcs-editable-field >>> .load-container:not(.display-none)');
+        expect(loadContainer).not.toBeNull();
+    });
+    it('properly handles custom formatting function', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+            <wcs-editable-field id="format-test" label="Formatting Test" value="test value" type="input">
+                <wcs-input></wcs-input>
+            </wcs-editable-field>
+        `);
+        // Set custom formatter
+        await page.$eval('wcs-editable-field', (el) => {
+            el.formatFn = (val) => val ? val.toUpperCase() : '';
+        });
+        await page.waitForChanges();
+        // Check formatted output
+        const displayContainer = await page.find('wcs-editable-field >>> .display-container');
+        expect(displayContainer.textContent).toContain('TEST VALUE');
+    });
+});
+//# sourceMappingURL=editable-field.e2e.js.map