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

wcs-core 7.1.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 (570) hide show

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 parseCssTimeValueToMilliseconds,\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\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 = 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 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"]}
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: '1480819d88a274e16ebb4544de646c47748d8223' }, h("button", Object.assign({ key: 'f5695efc0671635050c8a72a22894ec68691ae18', 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: '6a6f447e212cebee7af2e73fe03cfe862c820c27', 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: 'e2342ef539cfd88f61a5970f33c9cbce8dc29fa6', class: "wcs-button-content-wrapper" }, h("slot", { key: '1ce22f6b985d763763e4738d188e2e4f9540d8af', name: "placeholder" }), this.noArrow ? null : (h(SelectArrow, { up: this.expanded })))), h("div", { key: '2e62c382bf097f6c85f2c590f8b98feb9d0f2993', class: (this.expanded ? 'show ' : '') + 'popover', id: "menu", role: "menu", "aria-labelledby": "dropdown-button", tabindex: -1, ref: el => this.popoverDiv = el }, h("div", { key: '0556f15d918b936198d4ab61844ffada916bf328', role: "presentation", id: "arrow", "data-popper-arrow": true }), h("div", { key: '27129e6faa2a8921154b547e219e93543a72ac52', role: "presentation", class: "container" }, h("slot", { key: '484b677521290251daf185f50bbfc288538cb5ef', name: "item" }, h("span", { key: '6bdff4146ffe5a503fd024c6a0f89239c031daef', 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": {

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({ reflect: true }) 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

@@ -25,6 +25,9 @@
   --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 {

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

@@ -302,7 +302,7 @@ export class EditableField {
     }
     render() {
         const { formattedValue, formattedValueText, formattedCurrentValue } = this.formatValues();
-        return (h(Host, { key: '69142544bd835d3f7f161ca5174f78b957e9c65e' }, h("div", { key: 'b0d2d5fca3fb3297ea9a66cfd715d987714b60c1', class: "label" }, this.label), h("button", { key: 'cc69601762a0f05bcfb626730ee9ac210a052c13', type: "button", class: 'display-container ' + (this.currentState !== EditableComponentState.DISPLAY ? 'display-none' : ''), onClick: () => this.onDisplayContainerClick(), ref: (el) => this.editModeBtn = el, "aria-label": `${EDIT_ARIA_LABEL} ${this.label} ${formattedValueText}` }, formattedValue, h("wcs-mat-icon", { key: 'eda7d88109e0b5b55d913eae61861a5c63cc79d3', icon: "edit", size: "s" }), this.readonly ? this.getReadonlySvgIcon() : null), h("div", { key: '37aa4ca56e3e52bb28b559e11738b79d0b0b7164', class: 'load-container ' + (this.currentState !== EditableComponentState.LOAD ? 'display-none' : '') }, formattedCurrentValue, h("wcs-spinner", { key: 'b2015422620aae0c7101c06d3693cf6356eba419' })), h("wcs-form-field", { key: '391ef6b73c942817994a133b191a1c81e7565fe7', "is-error": this.isError, class: 'edit-container ' + (this.currentState !== EditableComponentState.EDIT ? 'display-none' : '') }, h("wcs-label", { key: '816e06561d96bdb9ca19c27d1329a0fe8f4d581f', class: "visually-hidden" }, this.label), h("slot", { key: 'a7855da5f41a873d01298218a32991010e589e34' }), this.isError && this.errorMsg
+        return (h(Host, { key: '81f6b6b92cd0a6f60a0eb4fbdb781a42863d4478' }, h("div", { key: '1278b7794e0127f1f2bc819d246712d55a139abd', class: "label" }, this.label), h("button", { key: '6049a936d198c5ee68db9a29466b82dc0ca55fa2', type: "button", class: 'display-container ' + (this.currentState !== EditableComponentState.DISPLAY ? 'display-none' : ''), onClick: () => this.onDisplayContainerClick(), ref: (el) => this.editModeBtn = el, "aria-label": `${EDIT_ARIA_LABEL} ${this.label} ${formattedValueText}` }, formattedValue, h("wcs-mat-icon", { key: '97020f20f553553b1e3a866d6d2ad274504b1bc9', icon: "edit", size: "s" }), this.readonly ? this.getReadonlySvgIcon() : null), h("div", { key: '17c58773fdaa738eef36c20545815ff10c35c5eb', class: 'load-container ' + (this.currentState !== EditableComponentState.LOAD ? 'display-none' : '') }, formattedCurrentValue, h("wcs-spinner", { key: 'b2ef7dd52a95d0604cd74368a17cf26283a663a9' })), h("wcs-form-field", { key: '38891efe6c9c119ad7d261f31edba4b4e5e3ae71', "is-error": this.isError, class: 'edit-container ' + (this.currentState !== EditableComponentState.EDIT ? 'display-none' : '') }, h("wcs-label", { key: '80ff051b722d175932c4cf56410f8c4081fe4cb8', class: "visually-hidden" }, this.label), h("slot", { key: '4e8592e8283ce75e629f61dafd609c59cd5fbbc0' }), this.isError && this.errorMsg
             ? h("wcs-error", null, this.errorMsg)
             : null)));
     }

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

@@ -15,7 +15,7 @@ import { h, Host } from "@stencil/core";
  */
 export class Label {
     render() {
-        return (h(Host, { key: 'b6443e62088347631e56dcf0c503ab77c0f16ffb', "aria-live": "polite", "aria-atomic": "true", slot: "error" }, h("slot", { key: '73821911a5e02463baa056786c62e386d0ebb18d' })));
+        return (h(Host, { key: '7dffcb3487f7210c5c9a45af709fc942a1410679', role: "alert", slot: "error" }, h("slot", { key: '251fbdc26fe58be4296328c4ebaed77329c6c507' })));
     }
     static get is() { return "wcs-error"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"error.js","sourceRoot":"","sources":["../../../src/components/error/error.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEvE;;;;;;;;;;;;;GAaG;AAMH,MAAM,OAAO,KAAK;IACd,MAAM;QACF,OAAO,CACH,EAAC,IAAI,~~kEAAW~~,~~QAAQ~~,~~iBAAa~~,~~MAAM~~,EAAC,IAAI,EAAC,OAAO;~~YACpD~~,8DAAQ,CACL,CACV,CAAC;IACN,CAAC;;;;;;;;;CACJ","sourcesContent":["import { Component, ComponentInterface, h, Host } from '@stencil/core';\n\n/*\n The `wcs-error` should always be wrapped in a `wcs-form-field`.\n * It is used to display a red message under the field indicating an incorrect user input.\n * \n * ## Accessibility guidelines 💡\n * - Provide a relevant error message to inform the users what they should change to make the field valid\n * - Always add the error icon, to ensure the visual indication of the error state other than the color\n * - `aria-description` will be automatically added to the field for screen readers\n * - `aria-invalid=\"true\"` will be automatically added to the field for screen readers\n * \n * @cssprop --wcs-error-color - Color of the text\n * @cssprop --wcs-error-font-size - Font size\n * @cssprop --wcs-error-font-weight - Font weight\n */\n@Component({\n tag: 'wcs-error',\n styleUrl: 'error.scss',\n shadow: true,\n})\nexport class Label implements ComponentInterface {\n render() {\n return (\n <Host ~~aria-live~~=\"~~polite~~\" ~~aria-atomic=\"true\"~~ slot=\"error\">\n <slot />\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"error.js","sourceRoot":"","sources":["../../../src/components/error/error.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEvE;;;;;;;;;;;;;GAaG;AAMH,MAAM,OAAO,KAAK;IACd,MAAM;QACF,OAAO,CACH,EAAC,IAAI,qDAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO;YAC3B,8DAAQ,CACL,CACV,CAAC;IACN,CAAC;;;;;;;;;CACJ","sourcesContent":["import { Component, ComponentInterface, h, Host } from '@stencil/core';\n\n/*\n The `wcs-error` should always be wrapped in a `wcs-form-field`.\n * It is used to display a red message under the field indicating an incorrect user input.\n * \n * ## Accessibility guidelines 💡\n * - Provide a relevant error message to inform the users what they should change to make the field valid\n * - Always add the error icon, to ensure the visual indication of the error state other than the color\n * - `aria-description` will be automatically added to the field for screen readers\n * - `aria-invalid=\"true\"` will be automatically added to the field for screen readers\n * \n * @cssprop --wcs-error-color - Color of the text\n * @cssprop --wcs-error-font-size - Font size\n * @cssprop --wcs-error-font-weight - Font weight\n */\n@Component({\n tag: 'wcs-error',\n styleUrl: 'error.scss',\n shadow: true,\n})\nexport class Label implements ComponentInterface {\n render() {\n return (\n <Host role=\"alert\" slot=\"error\">\n <slot />\n </Host>\n );\n }\n}\n"]}

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

@@ -21,7 +21,7 @@ import { h, Host, } from "@stencil/core";
  */
 export class Field {
     render() {
-        return (h(Host, { key: 'fb2c8c01280829e581dda580158aa646771324d0' }, h("slot", { key: '26ad71454a94463bc4f0b9c32ad7b9a1cca72196', name: "label" }), h("slot", { key: '2bb5c1c03c3e26e07cc6da22b20a581b7fb4a4aa', name: "content" })));
+        return (h(Host, { key: 'ae0a6c7224dc199cd6cd342d77878bfff17aa49b' }, h("slot", { key: '408c146f3e6bfa1868964a29934494215627fb59', name: "label" }), h("slot", { key: '9c2151491f6acc4a5a6da36676e21e8dee6f156a', name: "content" })));
     }
     static get is() { return "wcs-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/field-content/field-content.js CHANGED Viewed

@@ -9,7 +9,7 @@ import { h, Host } from "@stencil/core";
  */
 export class FieldContent {
     render() {
-        return (h(Host, { key: '90046cecd6e01ef9425879a47216ff4180d70526', slot: "content" }, h("slot", { key: '9b658ba9f8b688f5738d7181a9c6c0bcddd9aa82' })));
+        return (h(Host, { key: '251b9ccc1b13766b287f356dfc51d6a953ad0a5e', slot: "content" }, h("slot", { key: 'ee7d55bf47c0f468829e99a26a0fe340fbafcc9f' })));
     }
     static get is() { return "wcs-field-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/field-label/field-label.js CHANGED Viewed

@@ -9,7 +9,7 @@ import { h, Host, } from "@stencil/core";
  */
 export class FieldLabel {
     render() {
-        return (h(Host, { key: '4ec0eb745e24f80408c9e28d178875ea1d37c66e', slot: "label" }, h("slot", { key: '9baea00992b41058ccbe8e1f44d0938e0f1aeaae' })));
+        return (h(Host, { key: 'a051b09993d67bf56b087d86ba433caf1bdbb7a6', slot: "label" }, h("slot", { key: '6044b728151fd48878f555d3db3e0754f31b7e51' })));
     }
     static get is() { return "wcs-field-label"; }
     static get encapsulation() { return "shadow"; }

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

@@ -20,7 +20,7 @@ import { h, Host } from "@stencil/core";
  */
 export class Footer {
     render() {
-        return (h(Host, { key: '98c10026067800d6d448f8f294f17b94d3f47bff' }, h("footer", { key: '6cba4d564d2febebb9a86489f664fa11f15a915a', role: "contentinfo" }, h("div", { key: '435b4010ba33fd6426dc9b55f2d38ad35883cc8d', class: "container" }, h("div", { key: 'a3a5f625ac9d40d3550d43f1be880f53995cdca1' }, h("slot", { key: '720270631183615417cf4436bb8977e54e167d70' })), h("div", { key: '48bc00852f3ef7703153dfc185e2dab24a47b921', class: "end" }, h("div", { key: '591e2769df499367ff23948ba1960c67bf068e0c', class: "end-left" }, h("slot", { key: 'edcfaa3ef55a895a975fe0571e0346a86ac784d6', name: "end-left" })), h("div", { key: '0ef66c2342f680b5ebd6ff6bfdd90b67b7675d47', class: "end-right" }, h("slot", { key: '8a58b3a68a545e1cb7941784e2d437dd9099b9ab', name: "end-right" })))))));
+        return (h(Host, { key: '6fe975235d6de2793e55e8d10860649b5684c093' }, h("footer", { key: '80b0ff721eedab3e4cc00fd2484a638718fc8b13', role: "contentinfo" }, h("div", { key: 'f7d676d79f4d8780736e3a28e3e4b2aa1f0786e1', class: "container" }, h("div", { key: 'e1f9ea823133d972d3eb2bc8e7eaa18558448a73' }, h("slot", { key: 'd7177b9e98ac24ad39008669de01899e71c27079' })), h("div", { key: '849ceafdd459f24b672e1f68edf86ffd4fcce733', class: "end" }, h("div", { key: '7077861e872bbb50e7e5de0c968fe2222e9bf7d7', class: "end-left" }, h("slot", { key: 'dded653e62bf683e0514c51b06e55ccb44f70c54', name: "end-left" })), h("div", { key: 'ec25d2a5f84cb477eaa6a63de4df6ce6e9db07c5', class: "end-right" }, h("slot", { key: '4201096294b44a29f74112c2acaa2163f9ecfcb9', name: "end-right" })))))));
     }
     static get is() { return "wcs-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/form-field/form-field.js CHANGED Viewed

@@ -188,7 +188,7 @@ export class FormField {
         if (this.hasPrefix) {
             classes += ' has-prefix';
         }
-        return (h(Host, { key: '401976638f0eee23e5bf2faf49b2c065e08242ae', class: classes }, h("slot", { key: '47730da34957feea1da07abce0235f1deaebb1db', name: "label" }), h("div", { key: 'ea12a8196369b1a1b254c8ac0a1230ad88d378cc', class: "input-container" }, h("slot", { key: '27c32a6ae85030b3bcbef032eb185e5e424a64ff', name: "prefix" }), h("slot", { key: 'caf42f2f0c9fe6a8d082e50e22afca8303a7486b', onSlotchange: () => this.onFormInputSlotChange() }), h("slot", { key: '11bc3a58667ef09116fada427389a9e958d06c02', name: "suffix" })), isError ? (h("slot", { name: "error" })) : '', h("slot", { key: '8d8e6cd24167731fee1c49ddc33bd8e07c38e522', name: "messages" })));
+        return (h(Host, { key: 'd8a5d2023add393b0a31173351a3d16d9fa0b1a6', class: classes }, h("slot", { key: '3f347f4dce239c0106fbbe52bdc217fa37c05d01', name: "label" }), h("div", { key: 'd6cb92104d72530059ecb9a383ff832afb0c2141', class: "input-container" }, h("slot", { key: '8be28f721ff351d41dced80c97c0e34337703d0e', name: "prefix" }), h("slot", { key: 'cc58d463877a1e8513736a987286e965870e096d', onSlotchange: () => this.onFormInputSlotChange() }), h("slot", { key: '898709cfcf0ae1cd43dabd55547d62199d6230c9', name: "suffix" })), isError ? (h("slot", { name: "error" })) : '', h("slot", { key: 'aaf2d35dfbdfda47b440f96d7f9aa22cb09f6a06', name: "messages" })));
     }
     onFormInputSlotChange() {
         this.initSpiedElement();

package/dist/collection/components/form-field/form-field.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"form-field.js","sourceRoot":"","sources":["../../../src/components/form-field/form-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { isMutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { normalizeWhitespace } from '../../utils/helpers';\nimport { isControlComponentWithLabel } from \"../../utils/control-component-interface\";\n\n/*\n Form field component wraps the native input element and add some more functionality on top of it.\n \n You can use the `wcs-form-field` to wrap any of these components :\n * - `wcs-input`\n * - `wcs-textarea`\n * - `wcs-radio-group`\n * - `wcs-switch`\n * - `wcs-checkbox`\n * - `wcs-native-select`\n * - `wcs-select`\n * - `wcs-counter`\n \n For non-supported slotted component, you can use the `required` attribute on the wrapped component to tell the\n * form-field that it is required. It will add a red star after the label of the form field.\n * \n * ## Accessibility guidelines 💡\n * - Each form control should be identified with a unique `wcs-label`\n * - Don't forget to add form validation to make sure the data is correctly formatted\n * - If the `wcs-label` is required, the form control must have the `required` HTML attribute and vice-versa (this is normally automatically set)\n * - The form should not be submittable if at least one required form control is not filled\n * - Hints are optional and should only be used to add extra information\n * - Additional aria attributes put on `<wcs-form-field>` won't inherit onto the native component : you must use the `setAriaAttribute` method.\n * \n * @slot label - Automatically filled when a `wcs-label` is provided\n * @slot <no-name> - The main slot containing the wrapped component\n * @slot prefix - (Optional) Display a component as prefix. See \"Prefix Suffix Group\" story for more info.\n * @slot suffix - (Optional) Display a component as suffix. See \"Prefix Suffix Group\" story for more info.\n * @slot error - Automatically filled when a `wcs-error` is provided\n * @slot messages - Automatically filled when a `wcs-hint` is provided\n \n @cssprop --wcs-form-field-gap - Defines the spacing between the label, input control, and hint messages.\n * @cssprop --wcs-form-field-prefix-suffix-border-radius - Sets the border radius for both prefix and suffix elements.\n * \n * @cssprop --wcs-form-field-prefix-background-color-default - Background color default for prefix elements\n * @cssprop --wcs-form-field-prefix-background-color-disabled - Background color for prefix elements when disabled\n * @cssprop --wcs-form-field-prefix-background-color-hover - Background color for prefix elements when hovered\n * @cssprop --wcs-form-field-prefix-border-color-default - Defines the default border color for prefix\n * @cssprop --wcs-form-field-prefix-border-color-focus - Sets the border color for prefix elements when focused.\n * @cssprop --wcs-form-field-prefix-border-color-disabled - Determines the border color for prefix elements when disabled.\n * \n * @cssprop --wcs-form-field-prefix-icon-color - Specifies the color of icons within prefix elements.\n * @cssprop --wcs-form-field-prefix-value-color - Sets the color of values within prefix elements.\n * @cssprop --wcs-form-field-prefix-placeholder-color - Defines the placeholder text color within prefix elements.\n * @cssprop --wcs-form-field-prefix-color-disabled - Determines the text color for prefix elements when disabled.\n /\n@Component({\n tag: 'wcs-form-field',\n styleUrl: 'form-field.scss',\n shadow: true,\n})\nexport class FormField implements ComponentInterface {\n @Element() private el!: HTMLWcsFormFieldElement;\n\n /\n Specifies whether the form field is in an error state. Displays the field border in red and the message contained in the wcs-error component\n /\n @Prop({mutable: true, reflect: true}) isError = false;\n\n @State() private hasPrefix = false;\n @State() private hasSuffix = false;\n @State() private spiedElement: Element;\n\n private observer: MutationObserver;\n\n componentWillLoad() {\n this.hasSuffix = this.el.querySelector('[slot=suffix]') !== null;\n this.hasPrefix = this.el.querySelector('[slot=prefix]') !== null;\n }\n\n componentDidLoad() {\n this.initSpiedElement();\n this.addRequiredMarkerToLabel();\n this.updateErrorStateOnInput(this.isError);\n }\n\n @Watch('isError')\n // @ts-ignore\n private isErrorChange(newValue: boolean) {\n this.updateErrorStateOnInput(newValue);\n this.updateAriaAttributes();\n }\n\n private updateErrorStateOnInput(newValue: boolean) {\n if (this.spiedElementIsOfType('wcs-input', 'wcs-textarea')) {\n if (newValue) {\n this.spiedElement.setAttribute('state', 'error');\n } else {\n this.spiedElement.setAttribute('state', 'initial');\n }\n }\n }\n\n /\n This function return true if the form field contains an element with tagName matches a value of the types param\n * @param types\n * @private\n */\n private spiedElementIsOfType(...types: string[]): boolean {\n for (const type of types) {\n if (this.spiedElement?.tagName === type.toUpperCase()) return true;\n }\n return false\n }\n\n\n private addRequiredMarkerToLabel() {\n // TODO: deprecate this in favor of the 'required' component attribute\n const label = this.el.querySelector('wcs-label');\n this.observer = new MutationObserver(mutations => {\n const requiredAttMutation = mutations.filter(m => m.attributeName === 'required')[0];\n if (requiredAttMutation) {\n this.updateLabelRequiredFlag(this.spiedElement?.hasAttribute('required'), label);\n }\n });\n if (this.spiedElement) {\n this.observer.observe(this.spiedElement, {attributes: true});\n }\n\n const isRequired = this.spiedElement?.hasAttribute('required');\n this.updateLabelRequiredFlag(isRequired, label);\n }\n\n\n private initSpiedElement() {\n const SUPPORTED_COMPONENTS = ['wcs-input', 'wcs-select', 'wcs-native-select', 'wcs-textarea', 'wcs-radio-group', 'wcs-switch', 'wcs-checkbox', 'wcs-native-select', 'wcs-counter'];\n\n this.spiedElement = (this.el.shadowRoot.querySelector('slot:not([name])') as HTMLSlotElement)\n ?.assignedElements()\n .filter(n => [...SUPPORTED_COMPONENTS, 'SLOT'].map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0];\n\n // If the component is used in another web component\n if (this.spiedElement?.tagName === 'SLOT') {\n this.spiedElement = ((this.spiedElement as HTMLSlotElement)\n .assignedElements()\n .filter(n => SUPPORTED_COMPONENTS.map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0]) as HTMLElement;\n }\n\n if (!this.spiedElement) {\n // tslint:disable-next-line:no-console\n console.warn('Form-field component support only ' + SUPPORTED_COMPONENTS.toString() + '. Some features may not work with the provided component.');\n return;\n }\n }\n \n private async updateAriaAttributes(): Promise<void> {\n if (isMutableAriaAttribute(this.spiedElement)) {\n const ariaLabelParts: string[] = [];\n if (isControlComponentWithLabel(this.spiedElement)) {\n const innerLabel = await this.spiedElement.getLabel();\n const combinedLabel = `${this.label \|\| ''} ${innerLabel \|\| ''}`.trim();\n if(combinedLabel) {\n ariaLabelParts.push(normalizeWhitespace(combinedLabel));\n }\n } else {\n if(this.label) {\n ariaLabelParts.push(normalizeWhitespace(this.label));\n }\n }\n\n if(this.description) {\n ariaLabelParts.push(normalizeWhitespace(this.description));\n }\n \n // Sur les autres DS, généralement seul l'erreur est affichée et pas avec la description\n if(this.isError) {\n this.spiedElement.setAriaAttribute('aria-invalid', 'true');\n if(this.error) {\n ariaLabelParts.push(normalizeWhitespace(this.error));\n }\n } else {\n this.spiedElement.setAriaAttribute('aria-invalid', 'false');\n }\n\n this.spiedElement.setAriaAttribute('aria-label', ariaLabelParts.length > 0 ? ariaLabelParts.join(' ') : null);\n }\n }\n \n private get label(): string \| null {\n return this.el.querySelector('wcs-label')?.textContent \|\| null;\n }\n \n private get description(): string \| null {\n return this.el.querySelector('wcs-hint')?.textContent \|\| null;\n }\n \n private get error(): string \| null {\n return this.el.querySelector('wcs-error')?.textContent \|\| null;\n }\n\n private updateLabelRequiredFlag(isRequired: boolean, label: Element) {\n if (isRequired && label) {\n label.setAttribute('required', 'true');\n } else if (!isRequired && label) {\n label.removeAttribute('required');\n }\n }\n\n disconnectedCallback() {\n this.observer?.disconnect();\n }\n\n render() {\n let classes = '';\n const isError = this.isError;\n\n if (this.hasSuffix) {\n classes += ' has-suffix';\n }\n if (this.hasPrefix) {\n classes += ' has-prefix';\n }\n return (\n <Host class={classes}>\n <slot name=\"label\"/>\n <div class=\"input-container\">\n <slot name=\"prefix\"/>\n <slot onSlotchange={() => this.onFormInputSlotChange()}/>\n <slot name=\"suffix\"/>\n </div>\n {\n isError ? (<slot name=\"error\"/>) : ''\n }\n <slot name=\"messages\"/>\n </Host>\n );\n }\n\n private onFormInputSlotChange() {\n this.initSpiedElement();\n this.updateAriaAttributes()\n this.addRequiredMarkerToLabel();\n this.updateErrorStateOnInput(this.isError);\n }\n}\n"]}
1	+ {"version":3,"file":"form-field.js","sourceRoot":"","sources":["../../../src/components/form-field/form-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { isMutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { normalizeWhitespace } from '../../utils/helpers';\nimport { isControlComponentWithLabel } from \"../../utils/control-component-interface\";\n\n/*\n Form field component wraps the native input element and add some more functionality on top of it.\n \n You can use the `wcs-form-field` to wrap any of these components :\n * - `wcs-input`\n * - `wcs-textarea`\n * - `wcs-radio-group`\n * - `wcs-switch`\n * - `wcs-checkbox`\n * - `wcs-native-select`\n * - `wcs-select`\n * - `wcs-counter`\n \n For non-supported slotted component, you can use the `required` attribute on the wrapped component to tell the\n * form-field that it is required. It will add a red star after the label of the form field.\n * \n * ## Accessibility guidelines 💡\n * - Each form control should be identified with a unique `wcs-label`\n * - Don't forget to add form validation to make sure the data is correctly formatted\n * - If the `wcs-label` is required, the form control must have the `required` HTML attribute and vice-versa (this is normally automatically set)\n * - The form should not be submittable if at least one required form control is not filled\n * - Hints are optional and should only be used to add extra information\n * - Additional aria attributes put on `<wcs-form-field>` won't inherit onto the native component : you must use the `setAriaAttribute` method.\n * \n * @slot label - Automatically filled when a `wcs-label` is provided\n * @slot <no-name> - The main slot containing the wrapped component\n * @slot prefix - (Optional) Display a component as prefix. See \"Prefix Suffix Group\" story for more info.\n * @slot suffix - (Optional) Display a component as suffix. See \"Prefix Suffix Group\" story for more info.\n * @slot error - Automatically filled when a `wcs-error` is provided\n * @slot messages - Automatically filled when a `wcs-hint` is provided\n \n @cssprop --wcs-form-field-gap - Defines the spacing between the label, input control, and hint messages.\n * @cssprop --wcs-form-field-prefix-suffix-border-radius - Sets the border radius for both prefix and suffix elements.\n * \n * @cssprop --wcs-form-field-prefix-background-color-default - Background color default for prefix elements\n * @cssprop --wcs-form-field-prefix-background-color-disabled - Background color for prefix elements when disabled\n * @cssprop --wcs-form-field-prefix-background-color-hover - Background color for prefix elements when hovered\n * @cssprop --wcs-form-field-prefix-border-color-default - Defines the default border color for prefix\n * @cssprop --wcs-form-field-prefix-border-color-focus - Sets the border color for prefix elements when focused.\n * @cssprop --wcs-form-field-prefix-border-color-disabled - Determines the border color for prefix elements when disabled.\n * \n * @cssprop --wcs-form-field-prefix-icon-color - Specifies the color of icons within prefix elements.\n * @cssprop --wcs-form-field-prefix-value-color - Sets the color of values within prefix elements.\n * @cssprop --wcs-form-field-prefix-placeholder-color - Defines the placeholder text color within prefix elements.\n * @cssprop --wcs-form-field-prefix-color-disabled - Determines the text color for prefix elements when disabled.\n /\n@Component({\n tag: 'wcs-form-field',\n styleUrl: 'form-field.scss',\n shadow: true,\n})\nexport class FormField implements ComponentInterface {\n @Element() private el!: HTMLWcsFormFieldElement;\n\n /\n Specifies whether the form field is in an error state. Displays the field border in red and the message contained in the wcs-error component\n /\n @Prop({mutable: true, reflect: true}) isError: boolean = false;\n\n @State() private hasPrefix: boolean = false;\n @State() private hasSuffix: boolean = false;\n @State() private spiedElement: Element;\n\n private observer: MutationObserver;\n\n componentWillLoad() {\n this.hasSuffix = this.el.querySelector('[slot=suffix]') !== null;\n this.hasPrefix = this.el.querySelector('[slot=prefix]') !== null;\n }\n\n componentDidLoad() {\n this.initSpiedElement();\n this.addRequiredMarkerToLabel();\n this.updateErrorStateOnInput(this.isError);\n }\n\n @Watch('isError')\n // @ts-ignore\n private isErrorChange(newValue: boolean) {\n this.updateErrorStateOnInput(newValue);\n this.updateAriaAttributes();\n }\n\n private updateErrorStateOnInput(newValue: boolean) {\n if (this.spiedElementIsOfType('wcs-input', 'wcs-textarea')) {\n if (newValue) {\n this.spiedElement.setAttribute('state', 'error');\n } else {\n this.spiedElement.setAttribute('state', 'initial');\n }\n }\n }\n\n /\n This function return true if the form field contains an element with tagName matches a value of the types param\n * @param types\n * @private\n */\n private spiedElementIsOfType(...types: string[]): boolean {\n for (const type of types) {\n if (this.spiedElement?.tagName === type.toUpperCase()) return true;\n }\n return false\n }\n\n\n private addRequiredMarkerToLabel() {\n // TODO: deprecate this in favor of the 'required' component attribute\n const label = this.el.querySelector('wcs-label');\n this.observer = new MutationObserver(mutations => {\n const requiredAttMutation = mutations.filter(m => m.attributeName === 'required')[0];\n if (requiredAttMutation) {\n this.updateLabelRequiredFlag(this.spiedElement?.hasAttribute('required'), label);\n }\n });\n if (this.spiedElement) {\n this.observer.observe(this.spiedElement, {attributes: true});\n }\n\n const isRequired = this.spiedElement?.hasAttribute('required');\n this.updateLabelRequiredFlag(isRequired, label);\n }\n\n\n private initSpiedElement() {\n const SUPPORTED_COMPONENTS = ['wcs-input', 'wcs-select', 'wcs-native-select', 'wcs-textarea', 'wcs-radio-group', 'wcs-switch', 'wcs-checkbox', 'wcs-native-select', 'wcs-counter'];\n\n this.spiedElement = (this.el.shadowRoot.querySelector('slot:not([name])') as HTMLSlotElement)\n ?.assignedElements()\n .filter(n => [...SUPPORTED_COMPONENTS, 'SLOT'].map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0];\n\n // If the component is used in another web component\n if (this.spiedElement?.tagName === 'SLOT') {\n this.spiedElement = ((this.spiedElement as HTMLSlotElement)\n .assignedElements()\n .filter(n => SUPPORTED_COMPONENTS.map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0]) as HTMLElement;\n }\n\n if (!this.spiedElement) {\n // tslint:disable-next-line:no-console\n console.warn('Form-field component support only ' + SUPPORTED_COMPONENTS.toString() + '. Some features may not work with the provided component.');\n return;\n }\n }\n \n private async updateAriaAttributes(): Promise<void> {\n if (isMutableAriaAttribute(this.spiedElement)) {\n const ariaLabelParts: string[] = [];\n if (isControlComponentWithLabel(this.spiedElement)) {\n const innerLabel = await this.spiedElement.getLabel();\n const combinedLabel = `${this.label \|\| ''} ${innerLabel \|\| ''}`.trim();\n if(combinedLabel) {\n ariaLabelParts.push(normalizeWhitespace(combinedLabel));\n }\n } else {\n if(this.label) {\n ariaLabelParts.push(normalizeWhitespace(this.label));\n }\n }\n\n if(this.description) {\n ariaLabelParts.push(normalizeWhitespace(this.description));\n }\n \n // Sur les autres DS, généralement seul l'erreur est affichée et pas avec la description\n if(this.isError) {\n this.spiedElement.setAriaAttribute('aria-invalid', 'true');\n if(this.error) {\n ariaLabelParts.push(normalizeWhitespace(this.error));\n }\n } else {\n this.spiedElement.setAriaAttribute('aria-invalid', 'false');\n }\n\n this.spiedElement.setAriaAttribute('aria-label', ariaLabelParts.length > 0 ? ariaLabelParts.join(' ') : null);\n }\n }\n \n private get label(): string \| null {\n return this.el.querySelector('wcs-label')?.textContent \|\| null;\n }\n \n private get description(): string \| null {\n return this.el.querySelector('wcs-hint')?.textContent \|\| null;\n }\n \n private get error(): string \| null {\n return this.el.querySelector('wcs-error')?.textContent \|\| null;\n }\n\n private updateLabelRequiredFlag(isRequired: boolean, label: Element) {\n if (isRequired && label) {\n label.setAttribute('required', 'true');\n } else if (!isRequired && label) {\n label.removeAttribute('required');\n }\n }\n\n disconnectedCallback() {\n this.observer?.disconnect();\n }\n\n render() {\n let classes = '';\n const isError = this.isError;\n\n if (this.hasSuffix) {\n classes += ' has-suffix';\n }\n if (this.hasPrefix) {\n classes += ' has-prefix';\n }\n return (\n <Host class={classes}>\n <slot name=\"label\"/>\n <div class=\"input-container\">\n <slot name=\"prefix\"/>\n <slot onSlotchange={() => this.onFormInputSlotChange()}/>\n <slot name=\"suffix\"/>\n </div>\n {\n isError ? (<slot name=\"error\"/>) : ''\n }\n <slot name=\"messages\"/>\n </Host>\n );\n }\n\n private onFormInputSlotChange() {\n this.initSpiedElement();\n this.updateAriaAttributes()\n this.addRequiredMarkerToLabel();\n this.updateErrorStateOnInput(this.isError);\n }\n}\n"]}

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

@@ -21,7 +21,7 @@ export class Galactic {
         this.show = false;
     }
     render() {
-        return (h(Host, { key: '650d312b2d662bb9e900d330d9e89a279af10160' }, h("div", { key: 'eee212ebe7bc3031b700cbcd959133ba3ab05457', class: "container" }, h("div", { key: 'ee49e9c2e3cf1ed93c93812747374f4b2fb3c5aa', class: "logo-container" }, h("img", { key: 'd40d693d547591e088e7b2d9e45a39db0152a166', src: SNCF_BASE64_SVG_LOGO, id: "sncf-logo", alt: "SNCF" }), h("span", { key: 'e8e1ab2521b54b73ad3a9b27b82e19cc9a534b70' }, this.text)), h("div", { key: '2be508619dad9c082a129e2ec20fa298ebc4b0b5', class: "actions-container" }, h("slot", { key: '4df31395f1507d942e86971c041c41b17442c3a7' })))));
+        return (h(Host, { key: 'bcede9aa03d2014887eeaa4d5728d57c32a69de2' }, h("div", { key: '2d031655b20b592b77e2227a195f15535071c069', class: "container" }, h("div", { key: '1d3a345c56925946f5b39ad9edaad7ee927343cc', class: "logo-container" }, h("img", { key: '3f7e9a0a7df3a954d21e328da562189771baf8a8', src: SNCF_BASE64_SVG_LOGO, id: "sncf-logo", alt: "SNCF" }), h("span", { key: '68c00801e7f2564930d6a5f77fc6f45511a321cf' }, this.text)), h("div", { key: '3724b08dca457a9be21ecb84925ed3fea4e49f95', class: "actions-container" }, h("slot", { key: '572f4ca9036c737a579f2c58ec113cada4dd421c' })))));
     }
     static get is() { return "wcs-galactic"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/galactic-menu/galactic-menu.js CHANGED Viewed

@@ -71,9 +71,9 @@ export class Galactic {
         }
     }
     render() {
-        return (h(Host, { key: '57fa555ec72e13761295e18aa779d5ac5be81111' }, h("span", { key: '91b4fe9a2f6ee303c3ba00c2ba1a1ded0ac7a761' }, this.text), h("button", Object.assign({ key: '324d0c458e500ba5d47187bdd59297f67e067374', "aria-haspopup": "true", "aria-controls": "menu", ref: el => {
+        return (h(Host, { key: 'bc460c17b222723b8cc037042cc758f8ca0e50ec' }, h("span", { key: 'd324ff624a9e5c9f6984134d4091986cac11f18b' }, this.text), h("button", Object.assign({ key: '7b0160174a249b30e082b9b2a77aca334ee6256a', "aria-haspopup": "true", "aria-controls": "menu", ref: el => {
                 this.menuButton = el;
-            }, "aria-expanded": this.showPopoverMenu ? "true" : "false" }, this.inheritedAttributes, { onClick: _ => this.toggleMenu() }), h("wcs-mat-icon", { key: 'accf07fb4f5d737f30f16c5cd96b96a5b66ba1d0', id: "toggle-menu-icon", icon: "more_horiz", size: "m" })), h("span", { key: 'f9ae129e58d7911a7a88d8b2449a8b2e19be516f', id: "menu", role: "menu", "data-show": this.showPopoverMenu }, h("div", { key: 'f4b78cf4631a7fa1b6ca1e68a7eb633d52c7b994', id: "arrow", "data-popper-arrow": true }), h("slot", { key: 'c9eb687e1b82f075a5ef1b84d09b69bdbf9c292f' }))));
+            }, "aria-expanded": this.showPopoverMenu ? "true" : "false" }, this.inheritedAttributes, { onClick: _ => this.toggleMenu() }), h("wcs-mat-icon", { key: '96b20053845f5490791ea278c2444392ba630600', id: "toggle-menu-icon", icon: "more_horiz", size: "m" })), h("span", { key: '6f959f220edbf293fe6922f7aaeaab0f213bf736', id: "menu", role: "menu", "data-show": this.showPopoverMenu }, h("div", { key: '6a05e468d65252ecbb57b421a53be0a0a1974f98', id: "arrow", "data-popper-arrow": true }), h("slot", { key: 'c9398cbb856d836820ac1cddf3113710eeaff5fb' }))));
     }
     static get is() { return "wcs-galactic-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -89,6 +89,14 @@ export class Grid {
     onBlur(event) {
         this.wcsBlur.emit(event);
     }
+    /**
+     * Set focus on the first cell of the grid
+     */
+    async focusFirstCell() {
+        var _a;
+        this.cursorPosition = { col: this.selectionConfig === 'none' ? 0 : 1, row: 1 };
+        (_a = this.getElementToFocusAtCursorPosition()) === null || _a === void 0 ? void 0 : _a.focus();
+    }
     /**
      * If selectionConfig is different from `none`, that means that an extra column for radio or checkbox is rendered
      * in the table.
@@ -497,12 +505,12 @@ export class Grid {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: 'bdafd86216877fd703389c65665e75aa5ba21a90' }, h("table", Object.assign({ key: 'a1e58206dcaa31084f031a6461f4aceabb90bd46', role: "grid", ref: (el) => (this.nativeTable = el), "aria-rowcount": !this.loading && ((_a = this.rows) === null || _a === void 0 ? void 0 : _a.length), "aria-colcount": !this.loading && this.totalDisplayedColumnCount() }, this.inheritedAttributes), h("thead", { key: 'e22c92431c2f0e75cfb456688525015820aee43a' }, h("tr", { key: '9f857089bc5b552964024039a2ed3b4ab241bc6d', "aria-rowindex": "1" }, this.selectionConfig === 'none' ? ''
+        return (h(Host, { key: '98d13e7497ec9d9ecd3e149b3f6986e16bc5cc2a' }, h("table", Object.assign({ key: 'a44825cf71ff284a5204e9d922c0eba2c2ca23f4', role: "grid", ref: (el) => (this.nativeTable = el), "aria-rowcount": !this.loading && ((_a = this.rows) === null || _a === void 0 ? void 0 : _a.length), "aria-colcount": !this.loading && this.totalDisplayedColumnCount() }, this.inheritedAttributes), h("thead", { key: '336578d350ae8082a19fa6798af35f2fdd015ff9' }, h("tr", { key: 'fdb38402ea5c58dd77dad7df2ef97d54c521123c', "aria-rowindex": "1" }, this.selectionConfig === 'none' ? ''
             : h("th", { class: "wcs-grid-selection-column" }, this.selectionConfig === 'single' ? '' :
                 h("wcs-checkbox", { tabIndex: ((_b = this.cursorPosition) === null || _b === void 0 ? void 0 : _b.col) === 0
-                        && ((_c = this.cursorPosition) === null || _c === void 0 ? void 0 : _c.row) === 0 ? 0 : -1, part: "all-rows-checkbox", checked: this.allRowsAreSelected(), onWcsChange: this.selectAllRows.bind(this) })), h("slot", { key: '51a565cc671f43bfb054bdf85370cd2035d4f43e', name: "grid-column" }))), h("tbody", { key: '30b62b585ba5d925b6abdfe83e0059c94f27b5e7' }, this.loading
+                        && ((_c = this.cursorPosition) === null || _c === void 0 ? void 0 : _c.row) === 0 ? 0 : -1, part: "all-rows-checkbox", checked: this.allRowsAreSelected(), onWcsChange: this.selectAllRows.bind(this) })), h("slot", { key: '2d68b72fac0251dab9f519cf84c25c96262c193b', name: "grid-column" }))), h("tbody", { key: '4156e796ac5a81170b5dba011159f8e6bb7a7e60' }, this.loading
             ? h("tr", { "aria-busy": "true" }, h("td", { colSpan: this.totalColumnCount(), class: "loading" }, h("wcs-spinner", null)))
-            : (_d = this.rows) === null || _d === void 0 ? void 0 : _d.filter(row => this.serverMode || !this.paginationEl || row.page === this.paginationEl.currentPage).map((row, index) => this.renderRow(row, index)))), h("slot", { key: 'a6f76be638c7761f7f98acb837ff742f8ce08319', name: "grid-pagination" })));
+            : (_d = this.rows) === null || _d === void 0 ? void 0 : _d.filter(row => this.serverMode || !this.paginationEl || row.page === this.paginationEl.currentPage).map((row, index) => this.renderRow(row, index)))), h("slot", { key: 'c683eb883707ffbd1fed22d86ececb595f70c2c0', name: "grid-pagination" })));
     }
     /**
      * Returns the row with all mapped cells inside.
@@ -560,7 +568,7 @@ export class Grid {
                     "text": "Manage sort and pagination with a backend server when set to `true`"
                 },
                 "attribute": "server-mode",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "data": {
@@ -593,7 +601,7 @@ export class Grid {
                     "text": "Flag to display a spinner during data loading"
                 },
                 "attribute": "loading",
-                "reflect": false
+                "reflect": true
             },
             "selectionConfig": {
                 "type": "string",
@@ -790,6 +798,23 @@ export class Grid {
     }
     static get methods() {
         return {
+            "focusFirstCell": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Set focus on the first cell of the grid",
+                    "tags": []
+                }
+            },
             "setAriaAttribute": {
                 "complexType": {
                     "signature": "(attr: AriaAttributeName, value: string | null | undefined) => Promise<void>",