wcs-core 7.0.0 → 7.2.0

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

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Method,\n    Prop,\n    State\n} from '@stencil/core';\nimport { RadioChosedEvent } from './radio-interface';\nimport { RadioGroupMode } from '../radio-group/radio-group-interface';\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst RADIO_INHERITED_ATTRS = ['title'];\n\n/**\n * The radio component should always be wrapped in a `wcs-radio-group`.\n * \n * @cssprop --wcs-radio-transition-duration - Duration of the transition\n * \n * @cssprop --wcs-radio-text-color-default - Color of the text when the radio is not selected\n * @cssprop --wcs-radio-text-font-weight-default - Default font weight of the text\n * @cssprop --wcs-radio-text-color-selected - Color of the text when the radio is selected\n * @cssprop --wcs-radio-text-font-weight-selected - Font weight of the text when the radio is selected\n * @cssprop --wcs-radio-text-color-disabled - Color of the text when the radio is disabled\n * @cssprop --wcs-radio-text-color-hover - Color of the text when the radio is hovered\n * \n * @cssprop --wcs-radio-outline-color-focus - Color of the outline when the radio is focused\n * \n * @cssprop --wcs-radio-checkmark-size - Size of the checkmark circle\n * @cssprop --wcs-radio-checkmark-border-width - Width of the border of the checkmark circle\n * @cssprop --wcs-radio-checkmark-border-color-default - Color of the border of the checkmark circle when the radio's is not selected\n * @cssprop --wcs-radio-checkmark-border-color-selected - Color of the border of the checkmark circle when the radio is selected\n * @cssprop --wcs-radio-checkmark-border-color-hover - Color of the border of the checkmark circle when the radio is hovered\n * @cssprop --wcs-radio-checkmark-border-color-disabled - Color of the border of the checkmark circle when the radio is disabled\n * @cssprop --wcs-radio-checkmark-background-color-default - Background color of the checkmark circle when the radio's is not selected\n * @cssprop --wcs-radio-checkmark-background-color-selected - Background color of the checkmark circle when the radio's is selected\n * @cssprop --wcs-radio-checkmark-background-color-selected-disabled - Background color of the checkmark circle when the radio is selected and disabled\n * @cssprop --wcs-radio-checkmark-background-color-selected-hover - Background color of the checkmark circle when the radio is selected and hovered\n *\n * @cssprop --wcs-radio-checkmark-outline-distance-with-checkmark-circle - Distance between the checkmark circle and the outline (inside the background)\n * @cssprop --wcs-radio-checkmark-outline-width - Width of the outline of the checkmark circle (inside the background)\n * @cssprop --wcs-radio-checkmark-outline-color - Color of the outline of the checkmark circle (inside the background)\n * @cssprop --wcs-radio-checkmark-border-radius - Border radius of the checkmark circle\n * \n * @cssprop --wcs-radio-gap - Gap between the radio checkmark circle and the label\n * \n * @cssprop --wcs-radio-border-radius - Border radius of the radio (default mode)\n *\n * @cssprop --wcs-radio-option-background-color-default - Background color of the radio option when not selected\n * @cssprop --wcs-radio-option-background-color-hover - Background color of the radio option not selected when hovered\n * @cssprop --wcs-radio-option-background-color-press - Background color of the radio option when pressed\n * @cssprop --wcs-radio-option-background-color-disabled - Background color of the radio option when disabled\n * \n * @cssprop --wcs-radio-option-background-color-selected-default - Background color of the radio option when selected\n * @cssprop --wcs-radio-option-background-color-selected-hover - Background color of the radio option when selected and hovered\n * @cssprop --wcs-radio-option-background-color-selected-press - Background color of the radio option when selected and pressed\n * @cssprop --wcs-radio-option-background-color-selected-disabled - Background color of the radio option when selected and disabled\n * \n * @cssprop --wcs-radio-option-text-color-default - Color of the text when the radio option is not selected\n * @cssprop --wcs-radio-option-text-color-hover - Color of the text when the radio option not selected is hovered\n * @cssprop --wcs-radio-option-text-color-press - Color of the text when the radio option is pressed\n * \n * @cssprop --wcs-radio-option-text-color-selected-default - Color of the text when the radio option is selected\n * @cssprop --wcs-radio-option-text-color-selected-hover - Color of the text when the radio option is selected and hovered\n * @cssprop --wcs-radio-option-text-color-selected-press - Color of the text when the radio option is selected and pressed\n * @cssprop --wcs-radio-option-text-color-disabled - Color of the text when the radio option's is disabled\n * \n * @cssprop --wcs-radio-option-text-font-weight-default - Default font weight of the text\n * @cssprop --wcs-radio-option-text-font-weight-selected - Font weight of the text when the radio option is selected\n *\n * @cssprop --wcs-radio-option-border-radius - Border radius of the radio option\n * @cssprop --wcs-radio-option-border-width - Width of the border of the radio option\n * @cssprop --wcs-radio-option-border-color-hover - Color of the border of the radio option when not selected and hovered\n * @cssprop --wcs-radio-option-border-color-press - Color of the border of the radio option when not selected and pressed\n * \n * @cssprop --wcs-radio-option-padding-top - Padding top of the radio option\n * @cssprop --wcs-radio-option-padding-right - Padding right of the radio option\n * @cssprop --wcs-radio-option-padding-bottom - Padding bottom of the radio option\n * @cssprop --wcs-radio-option-padding-left - Padding left of the radio option\n */\n@Component({\n    tag: 'wcs-radio',\n    styleUrl: 'radio.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Radio implements ComponentInterface, MutableAriaAttribute {\n    private inputId = `wcs-rb-${radioButtonIds++}`;\n    @Element() private el!: HTMLWcsRadioElement;\n    private nativeRadio!: HTMLInputElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    /**\n     * If `true`, the radio is selected. \n     * @private\n     */\n    @State() private checked = false;\n\n    /**\n     * The tabindex of the radio button\n     * @private\n     */\n    @State() private radioTabIndex = -1;\n\n    /**\n     * Sets a unique value for each radio, used to identify which radio button in a group is selected\n     */\n    @Prop({ mutable: true, reflect: true }) value: any | any[] | undefined | null;\n\n    /**\n     * The label text displayed for the user\n     */\n    @Prop({ mutable: true, reflect: true }) label: string;\n    \n    /**\n     * If `true`, the user cannot interact with the radio.\n     */\n    @Prop({ mutable: true }) disabled = false;\n\n    /**\n     * Emitted when the radio is clicked or Space/Enter is pressed above an unchecked radio\n     */\n    @Event({ eventName: 'wcsRadioClick' }) wcsRadioClick: EventEmitter<RadioChosedEvent>\n\n    /**\n     * Emitted when the radio loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the radio has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    /**\n     * The name of the control, automatically set by the radio group.  \n     * (You shouldn't set this prop by yourself)\n     * @internal\n     */\n    @Prop({ mutable: true }) name: string;\n\n\n    /**\n     * The display mode of the control, automatically set by the radio group.  \n     * (You shouldn't set this prop by yourself)\n     * @internal\n     */\n    @Prop({ reflect: true, mutable: false }) mode: RadioGroupMode = 'radio';\n\n    /**\n     * @internal\n     * Checks of unchecks the radio according to it's radio-group value\n     */\n    @Method()\n    async updateState() {\n        const radioGroup = this.getClosestRadioGroup();\n        if (radioGroup) {\n            this.checked = radioGroup.name === this.name && radioGroup.value === this.value\n        }\n    }\n\n    /** @internal */\n    @Method()\n    async setTabIndex(value: number) {\n        this.radioTabIndex = value;\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeRadio, attr, value);\n    }\n\n    onFocus(ev: FocusEvent) {\n        this.wcsFocus.emit(ev);\n    }\n\n    onBlur(ev: FocusEvent) {\n        this.wcsBlur.emit(ev);\n    }\n    \n    private getClosestRadioGroup(): HTMLWcsRadioGroupElement | null {\n        return this.el.closest('wcs-radio-group');\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        if (this.value === undefined) {\n            // If no value was given we use the text content instead.\n            this.value = this.el.innerText || '';\n        }\n        \n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, RADIO_INHERITED_ATTRS),\n        };\n    }\n    \n    private onChange(_: Event) {\n        if (this.disabled) return;\n\n        // If the radio is unchecked, then the change represents its transition to the check state.\n        // Only emit the change event when going from unchecked to checked, like the native behavior.\n        // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event\n        if (!this.checked) {\n            this.checked = true;\n            this.emitRadioChangeEvent();\n        }\n    }\n\n    emitRadioChangeEvent() {\n        this.wcsRadioClick.emit({\n            label: this.label,\n            source: this.el,\n            value: this.value\n        });\n    }\n\n    render() {\n        \n        return (\n            <Host slot=\"option\"\n                  tabIndex={this.disabled ? -1 : this.radioTabIndex}\n                  class={this.checked ? 'checked' : ''}>\n                <input\n                    id={this.inputId}\n                    type=\"radio\"\n                    name={this.name}\n                    value={this.value}\n                    checked={this.checked} // Initial checked state of native input\n                    disabled={this.disabled}\n                    onChange={this.onChange.bind(this)}\n                    onFocus={this.onFocus.bind(this)}\n                    onBlur={this.onBlur.bind(this)}\n                    aria-disabled={this.disabled ? 'true' : null}\n                    aria-checked={`${this.checked}`}\n                    ref={(el) => (this.nativeRadio = el)}\n                    {...this.inheritedAttributes}\n                />\n                <label htmlFor={`${this.inputId}`}>{this.label}</label>\n            </Host>\n        );\n    }\n}\n\nlet radioButtonIds = 0;\n"]}
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Method,\n    Prop,\n    State\n} from '@stencil/core';\nimport { RadioChosedEvent } from './radio-interface';\nimport { RadioGroupMode } from '../radio-group/radio-group-interface';\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst RADIO_INHERITED_ATTRS = ['title'];\n\n/**\n * The radio component should always be wrapped in a `wcs-radio-group`.\n * \n * @cssprop --wcs-radio-transition-duration - Duration of the transition\n * \n * @cssprop --wcs-radio-text-color-default - Color of the text when the radio is not selected\n * @cssprop --wcs-radio-text-font-weight-default - Default font weight of the text\n * @cssprop --wcs-radio-text-color-selected - Color of the text when the radio is selected\n * @cssprop --wcs-radio-text-font-weight-selected - Font weight of the text when the radio is selected\n * @cssprop --wcs-radio-text-color-disabled - Color of the text when the radio is disabled\n * @cssprop --wcs-radio-text-color-hover - Color of the text when the radio is hovered\n * \n * @cssprop --wcs-radio-outline-color-focus - Color of the outline when the radio is focused\n * \n * @cssprop --wcs-radio-checkmark-size - Size of the checkmark circle\n * @cssprop --wcs-radio-checkmark-border-width - Width of the border of the checkmark circle\n * @cssprop --wcs-radio-checkmark-border-color-default - Color of the border of the checkmark circle when the radio's is not selected\n * @cssprop --wcs-radio-checkmark-border-color-selected - Color of the border of the checkmark circle when the radio is selected\n * @cssprop --wcs-radio-checkmark-border-color-hover - Color of the border of the checkmark circle when the radio is hovered\n * @cssprop --wcs-radio-checkmark-border-color-disabled - Color of the border of the checkmark circle when the radio is disabled\n * @cssprop --wcs-radio-checkmark-background-color-default - Background color of the checkmark circle when the radio's is not selected\n * @cssprop --wcs-radio-checkmark-background-color-selected - Background color of the checkmark circle when the radio's is selected\n * @cssprop --wcs-radio-checkmark-background-color-selected-disabled - Background color of the checkmark circle when the radio is selected and disabled\n * @cssprop --wcs-radio-checkmark-background-color-selected-hover - Background color of the checkmark circle when the radio is selected and hovered\n *\n * @cssprop --wcs-radio-checkmark-outline-distance-with-checkmark-circle - Distance between the checkmark circle and the outline (inside the background)\n * @cssprop --wcs-radio-checkmark-outline-width - Width of the outline of the checkmark circle (inside the background)\n * @cssprop --wcs-radio-checkmark-outline-color - Color of the outline of the checkmark circle (inside the background)\n * @cssprop --wcs-radio-checkmark-border-radius - Border radius of the checkmark circle\n * \n * @cssprop --wcs-radio-gap - Gap between the radio checkmark circle and the label\n * \n * @cssprop --wcs-radio-border-radius - Border radius of the radio (default mode)\n *\n * @cssprop --wcs-radio-option-background-color-default - Background color of the radio option when not selected\n * @cssprop --wcs-radio-option-background-color-hover - Background color of the radio option not selected when hovered\n * @cssprop --wcs-radio-option-background-color-press - Background color of the radio option when pressed\n * @cssprop --wcs-radio-option-background-color-disabled - Background color of the radio option when disabled\n * \n * @cssprop --wcs-radio-option-background-color-selected-default - Background color of the radio option when selected\n * @cssprop --wcs-radio-option-background-color-selected-hover - Background color of the radio option when selected and hovered\n * @cssprop --wcs-radio-option-background-color-selected-press - Background color of the radio option when selected and pressed\n * @cssprop --wcs-radio-option-background-color-selected-disabled - Background color of the radio option when selected and disabled\n * \n * @cssprop --wcs-radio-option-text-color-default - Color of the text when the radio option is not selected\n * @cssprop --wcs-radio-option-text-color-hover - Color of the text when the radio option not selected is hovered\n * @cssprop --wcs-radio-option-text-color-press - Color of the text when the radio option is pressed\n * \n * @cssprop --wcs-radio-option-text-color-selected-default - Color of the text when the radio option is selected\n * @cssprop --wcs-radio-option-text-color-selected-hover - Color of the text when the radio option is selected and hovered\n * @cssprop --wcs-radio-option-text-color-selected-press - Color of the text when the radio option is selected and pressed\n * @cssprop --wcs-radio-option-text-color-disabled - Color of the text when the radio option's is disabled\n * \n * @cssprop --wcs-radio-option-text-font-weight-default - Default font weight of the text\n * @cssprop --wcs-radio-option-text-font-weight-selected - Font weight of the text when the radio option is selected\n *\n * @cssprop --wcs-radio-option-border-radius - Border radius of the radio option\n * @cssprop --wcs-radio-option-border-width - Width of the border of the radio option\n * @cssprop --wcs-radio-option-border-color-hover - Color of the border of the radio option when not selected and hovered\n * @cssprop --wcs-radio-option-border-color-press - Color of the border of the radio option when not selected and pressed\n * \n * @cssprop --wcs-radio-option-padding-top - Padding top of the radio option\n * @cssprop --wcs-radio-option-padding-right - Padding right of the radio option\n * @cssprop --wcs-radio-option-padding-bottom - Padding bottom of the radio option\n * @cssprop --wcs-radio-option-padding-left - Padding left of the radio option\n */\n@Component({\n    tag: 'wcs-radio',\n    styleUrl: 'radio.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Radio implements ComponentInterface, MutableAriaAttribute {\n    private inputId = `wcs-rb-${radioButtonIds++}`;\n    @Element() private el!: HTMLWcsRadioElement;\n    private nativeRadio!: HTMLInputElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    /**\n     * If `true`, the radio is selected. \n     * @private\n     */\n    @State() private checked: boolean = false;\n\n    /**\n     * The tabindex of the radio button\n     * @private\n     */\n    @State() private radioTabIndex = -1;\n\n    /**\n     * Sets a unique value for each radio, used to identify which radio button in a group is selected\n     */\n    @Prop({ mutable: true, reflect: true }) value: any | any[] | undefined | null;\n\n    /**\n     * The label text displayed for the user\n     */\n    @Prop({ mutable: true, reflect: true }) label: string;\n    \n    /**\n     * If `true`, the user cannot interact with the radio.\n     */\n    @Prop({ reflect: true, mutable: true }) disabled: boolean = false;\n\n    /**\n     * Emitted when the radio is clicked or Space/Enter is pressed above an unchecked radio\n     */\n    @Event({ eventName: 'wcsRadioClick' }) wcsRadioClick: EventEmitter<RadioChosedEvent>\n\n    /**\n     * Emitted when the radio loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the radio has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    /**\n     * The name of the control, automatically set by the radio group.  \n     * (You shouldn't set this prop by yourself)\n     * @internal\n     */\n    @Prop({ mutable: true }) name: string;\n\n\n    /**\n     * The display mode of the control, automatically set by the radio group.  \n     * (You shouldn't set this prop by yourself)\n     * @internal\n     */\n    @Prop({ reflect: true, mutable: false }) mode: RadioGroupMode = 'radio';\n\n    /**\n     * @internal\n     * Checks of unchecks the radio according to it's radio-group value\n     */\n    @Method()\n    async updateState() {\n        const radioGroup = this.getClosestRadioGroup();\n        if (radioGroup) {\n            this.checked = radioGroup.name === this.name && radioGroup.value === this.value\n        }\n    }\n\n    /** @internal */\n    @Method()\n    async setTabIndex(value: number) {\n        this.radioTabIndex = value;\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeRadio, attr, value);\n    }\n\n    onFocus(ev: FocusEvent) {\n        this.wcsFocus.emit(ev);\n    }\n\n    onBlur(ev: FocusEvent) {\n        this.wcsBlur.emit(ev);\n    }\n    \n    private getClosestRadioGroup(): HTMLWcsRadioGroupElement | null {\n        return this.el.closest('wcs-radio-group');\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        if (this.value === undefined) {\n            // If no value was given we use the text content instead.\n            this.value = this.el.innerText || '';\n        }\n        \n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, RADIO_INHERITED_ATTRS),\n        };\n    }\n    \n    private onChange(_: Event) {\n        if (this.disabled) return;\n\n        // If the radio is unchecked, then the change represents its transition to the check state.\n        // Only emit the change event when going from unchecked to checked, like the native behavior.\n        // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event\n        if (!this.checked) {\n            this.checked = true;\n            this.emitRadioChangeEvent();\n        }\n    }\n\n    emitRadioChangeEvent() {\n        this.wcsRadioClick.emit({\n            label: this.label,\n            source: this.el,\n            value: this.value\n        });\n    }\n\n    render() {\n        \n        return (\n            <Host slot=\"option\"\n                  tabIndex={this.disabled ? -1 : this.radioTabIndex}\n                  class={this.checked ? 'checked' : ''}>\n                <input\n                    id={this.inputId}\n                    type=\"radio\"\n                    name={this.name}\n                    value={this.value}\n                    checked={this.checked} // Initial checked state of native input\n                    disabled={this.disabled}\n                    onChange={this.onChange.bind(this)}\n                    onFocus={this.onFocus.bind(this)}\n                    onBlur={this.onBlur.bind(this)}\n                    aria-disabled={this.disabled ? 'true' : null}\n                    aria-checked={`${this.checked}`}\n                    ref={(el) => (this.nativeRadio = el)}\n                    {...this.inheritedAttributes}\n                />\n                <label htmlFor={`${this.inputId}`}>{this.label}</label>\n            </Host>\n        );\n    }\n}\n\nlet radioButtonIds = 0;\n"]}

package/dist/collection/components/radio-group/radio-group.js

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { isDownArrowKey, isEnterKey, isLeftArrowKey, isRightArrowKey, isSpaceKey, isTabKey, isUpArrowKey } from "../../utils/helpers";
+import { isDownArrowKey, isEnterKey, isLeftArrowKey, isRightArrowKey, isSpaceKey, isTabKey, isUpArrowKey, setOrRemoveAttribute } from "../../utils/helpers";
 /**
  * @cssprop --wcs-radio-group-gap - Gap between each radio (checkmark + label) in horizontal mode
  *
@@ -23,6 +23,9 @@ export class RadioGroup {
         this.updateRadioTabIndex(value);
         this.updateAllRadioState();
     }
+    async setAriaAttribute(attr, value) {
+        setOrRemoveAttribute(this.el, attr, value);
+    }
     componentDidLoad() {
         this.onValueChangeHandler(this.value);
         this.updateAllRadioModeAndName();
@@ -101,7 +104,7 @@ export class RadioGroup {
         }
     }
     render() {
-        return (h(Host, { key: '3bdbfd7aa67f709fed97c60c7226a25058bc6092', role: "radiogroup" }, h("slot", { key: '5b64203983551a6504ae675442c36e904bb5dec8', name: "option", onSlotchange: this.onSlotChange.bind(this) })));
+        return (h(Host, { key: '3179704d2f1ed56f940941c1777b90a49ecd0ffa', role: "radiogroup" }, h("slot", { key: 'f01213b0c89bc04622601447005e24df07fea376', name: "option", onSlotchange: this.onSlotChange.bind(this) })));
     }
     static get is() { return "wcs-radio-group"; }
     static get encapsulation() { return "shadow"; }
@@ -201,6 +204,40 @@ export class RadioGroup {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "setAriaAttribute": {
+                "complexType": {
+                    "signature": "(attr: AriaAttributeName, value: string | null | undefined) => Promise<void>",
+                    "parameters": [{
+                            "name": "attr",
+                            "type": "\"role\" | `aria-${string}`",
+                            "docs": ""
+                        }, {
+                            "name": "value",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "AriaAttributeName": {
+                            "location": "import",
+                            "path": "../../utils/mutable-aria-attribute",
+                            "id": "src/utils/mutable-aria-attribute.ts::AriaAttributeName"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{

package/dist/collection/components/radio-group/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Prop,\n    Watch\n} from '@stencil/core';\nimport { RadioGroupChangeEventDetail, RadioGroupMode } from './radio-group-interface';\nimport { RadioChosedEvent } from '../radio/radio-interface';\nimport {\n    isDownArrowKey, isEnterKey,\n    isLeftArrowKey,\n    isRightArrowKey,\n    isSpaceKey,\n    isTabKey,\n    isUpArrowKey\n} from \"../../utils/helpers\";\n\n/**\n * @cssprop --wcs-radio-group-gap - Gap between each radio (checkmark + label) in horizontal mode\n * \n *\n * @cssprop --wcs-radio-group-option-background-color - Background color of the radio group option\n * \n * @cssprop --wcs-radio-group-option-height - Height of the radio group option\n * @cssprop --wcs-radio-group-option-padding - Padding of the radio group option\n *  \n * @cssprop --wcs-radio-group-option-border-radius - Border radius of the radio group option\n * \n * @cssprop --wcs-radio-group-option-gap - Gap between each radio option\n */\n@Component({\n    tag: 'wcs-radio-group',\n    styleUrl: 'radio-group.scss',\n    shadow: true\n})\nexport class RadioGroup implements ComponentInterface {\n    @Element() private el!: HTMLWcsRadioGroupElement;\n    \n    /**\n     * The value of the radio-group. Automatically reflects which radio button is selected.\n     */\n    @Prop({ mutable: true }) value: any | any[] | undefined | null;\n\n    /**\n     * The name of the control to be set on all radio button children\n     */\n    @Prop({ reflect: true }) name;\n\n    /**\n     * The display mode of the control to be set on all radio button children\n     */\n    @Prop({ reflect: true }) mode: RadioGroupMode = 'radio';\n\n    /** Emitted when the value has changed. */\n    @Event() wcsChange!: EventEmitter<RadioGroupChangeEventDetail>;\n\n    @Watch('value')\n    onValueChangeHandler(value: any | undefined) {\n        this.updateRadioTabIndex(value);\n        this.updateAllRadioState();\n    }\n\n    componentDidLoad() {\n       this.onValueChangeHandler(this.value);\n       this.updateAllRadioModeAndName();\n    }\n    \n    onSlotChange() {\n        this.updateRadioTabIndex(this.value);\n        this.updateAllRadioModeAndName();\n    }\n    \n    updateAllRadioState() {\n        this.getSlottedRadios().forEach(r => r.updateState());\n    }\n    \n    @Watch('name')\n    @Watch('mode')\n    updateAllRadioModeAndName() {\n        this.getSlottedRadios().forEach(r => {\n            r.mode = this.mode;\n            r.name = this.name;\n        });\n    }\n    \n    updateRadioTabIndex(value: any | undefined) {\n        const radios = this.getSlottedRadios();\n\n        // Get the first radio that is not disabled and the checked one\n        const first = radios.find((radio) => !radio.disabled);\n        const checked = radios.find((radio) => radio.value === value && !radio.disabled);\n\n        if (!first && !checked) {\n            return;\n        }\n\n        // If an enabled checked radio exists, set it to be the focusable radio\n        // otherwise we default to focus the first radio\n        const focusable = checked || first;\n\n        for (const radio of radios) {\n            const tabindex = radio === focusable ? 0 : -1;\n            radio.setTabIndex(tabindex);\n        }\n    }\n\n    private getSlottedRadios(): HTMLWcsRadioElement[] {\n        return Array.from(this.el.querySelectorAll('wcs-radio'));\n    }\n\n    private getSlottedRadiosNotDisabled(): HTMLWcsRadioElement[] {\n        return Array.from(this.getSlottedRadios().filter(radio => !radio.disabled));\n    }\n\n    @Listen('wcsRadioClick')\n    handleRadioClick(event: CustomEvent<RadioChosedEvent>) {\n        this.value = event.detail.value;\n        this.wcsChange.emit({\n            value: event.detail.value\n        });\n    }\n\n    @Listen('keydown')\n    async handleKeyDown(ev: KeyboardEvent) {\n        const radiosNotDisabled = this.getSlottedRadiosNotDisabled();\n        const previousSelected = radiosNotDisabled.findIndex(r => r === ev.target);\n        let indexToSelect: number;\n\n        if ((isSpaceKey(ev) || isEnterKey(ev))) {\n            ev.preventDefault();\n            indexToSelect = previousSelected;\n        } else if (isDownArrowKey(ev) || isRightArrowKey(ev)) {\n            ev.preventDefault();\n            // Check the next wcs-radio from the previous selected\n            indexToSelect = (previousSelected + 1) % radiosNotDisabled.length;  // to return at the beginning on the list when we are on the last index\n        } else if (isUpArrowKey(ev) || isLeftArrowKey(ev)) {\n            ev.preventDefault();\n            // Check the previous wcs-radio from the previous selected\n            indexToSelect = (previousSelected - 1 + radiosNotDisabled.length) % radiosNotDisabled.length; // To return at the end of the list when we are on index=0\n        } else if (isTabKey(ev)) {\n            return;\n        }\n        \n        const radioToSelect = radiosNotDisabled[indexToSelect]\n        if (radioToSelect) {\n            radioToSelect.focus();\n            \n            if (this.value !== radioToSelect.value) {\n                this.wcsChange.emit({\n                    value: radioToSelect.value\n                })\n            }\n            \n            this.value = radioToSelect.value;\n        }\n    }\n\n    render() {\n        return (\n            <Host role=\"radiogroup\">\n                <slot name=\"option\" onSlotchange={this.onSlotChange.bind(this)}/>\n            </Host>\n        );\n    }\n\n}\n"]}
+{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EAET,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,MAAM,EACN,IAAI,EACJ,KAAK,EACR,MAAM,eAAe,CAAC;AAGvB,OAAO,EACH,cAAc,EAAE,UAAU,EAC1B,cAAc,EACd,eAAe,EACf,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,oBAAoB,EACvB,MAAM,qBAAqB,CAAC;AAG7B;;;;;;;;;;;;GAYG;AAMH,MAAM,OAAO,UAAU;;;;oBAgB6B,OAAO;;IAMvD,oBAAoB,CAAC,KAAsB;QACvC,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC;QAChC,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC/B,CAAC;IAGD,KAAK,CAAC,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5E,oBAAoB,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;IAC/C,CAAC;IAED,gBAAgB;QACb,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACtC,IAAI,CAAC,yBAAyB,EAAE,CAAC;IACpC,CAAC;IAED,YAAY;QACR,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACrC,IAAI,CAAC,yBAAyB,EAAE,CAAC;IACrC,CAAC;IAED,mBAAmB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC;IAC1D,CAAC;IAID,yBAAyB;QACrB,IAAI,CAAC,gBAAgB,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;YAChC,CAAC,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;YACnB,CAAC,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACvB,CAAC,CAAC,CAAC;IACP,CAAC;IAED,mBAAmB,CAAC,KAAsB;QACtC,MAAM,MAAM,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAEvC,+DAA+D;QAC/D,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QACtD,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QAEjF,IAAI,CAAC,KAAK,IAAI,CAAC,OAAO,EAAE,CAAC;YACrB,OAAO;QACX,CAAC;QAED,uEAAuE;QACvE,gDAAgD;QAChD,MAAM,SAAS,GAAG,OAAO,IAAI,KAAK,CAAC;QAEnC,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;YACzB,MAAM,QAAQ,GAAG,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC9C,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QAChC,CAAC;IACL,CAAC;IAEO,gBAAgB;QACpB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;IAC7D,CAAC;IAEO,2BAA2B;QAC/B,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAChF,CAAC;IAGD,gBAAgB,CAAC,KAAoC;QACjD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QAChC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;YAChB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;SAC5B,CAAC,CAAC;IACP,CAAC;IAGD,KAAK,CAAC,aAAa,CAAC,EAAiB;QACjC,MAAM,iBAAiB,GAAG,IAAI,CAAC,2BAA2B,EAAE,CAAC;QAC7D,MAAM,gBAAgB,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,CAAC;QAC3E,IAAI,aAAqB,CAAC;QAE1B,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC,IAAI,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;YACrC,EAAE,CAAC,cAAc,EAAE,CAAC;YACpB,aAAa,GAAG,gBAAgB,CAAC;QACrC,CAAC;aAAM,IAAI,cAAc,CAAC,EAAE,CAAC,IAAI,eAAe,CAAC,EAAE,CAAC,EAAE,CAAC;YACnD,EAAE,CAAC,cAAc,EAAE,CAAC;YACpB,sDAAsD;YACtD,aAAa,GAAG,CAAC,gBAAgB,GAAG,CAAC,CAAC,GAAG,iBAAiB,CAAC,MAAM,CAAC,CAAE,uEAAuE;QAC/I,CAAC;aAAM,IAAI,YAAY,CAAC,EAAE,CAAC,IAAI,cAAc,CAAC,EAAE,CAAC,EAAE,CAAC;YAChD,EAAE,CAAC,cAAc,EAAE,CAAC;YACpB,0DAA0D;YAC1D,aAAa,GAAG,CAAC,gBAAgB,GAAG,CAAC,GAAG,iBAAiB,CAAC,MAAM,CAAC,GAAG,iBAAiB,CAAC,MAAM,CAAC,CAAC,0DAA0D;QAC5J,CAAC;aAAM,IAAI,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC;YACtB,OAAO;QACX,CAAC;QAED,MAAM,aAAa,GAAG,iBAAiB,CAAC,aAAa,CAAC,CAAA;QACtD,IAAI,aAAa,EAAE,CAAC;YAChB,aAAa,CAAC,KAAK,EAAE,CAAC;YAEtB,IAAI,IAAI,CAAC,KAAK,KAAK,aAAa,CAAC,KAAK,EAAE,CAAC;gBACrC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;oBAChB,KAAK,EAAE,aAAa,CAAC,KAAK;iBAC7B,CAAC,CAAA;YACN,CAAC;YAED,IAAI,CAAC,KAAK,GAAG,aAAa,CAAC,KAAK,CAAC;QACrC,CAAC;IACL,CAAC;IAED,MAAM;QACF,OAAO,CACH,EAAC,IAAI,qDAAC,IAAI,EAAC,YAAY;YACnB,6DAAM,IAAI,EAAC,QAAQ,EAAC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAC9D,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEJ","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Method,\n    Prop,\n    Watch\n} from '@stencil/core';\nimport { RadioGroupChangeEventDetail, RadioGroupMode } from './radio-group-interface';\nimport { RadioChosedEvent } from '../radio/radio-interface';\nimport {\n    isDownArrowKey, isEnterKey,\n    isLeftArrowKey,\n    isRightArrowKey,\n    isSpaceKey,\n    isTabKey,\n    isUpArrowKey,\n    setOrRemoveAttribute\n} from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from '../../utils/mutable-aria-attribute';\n\n/**\n * @cssprop --wcs-radio-group-gap - Gap between each radio (checkmark + label) in horizontal mode\n * \n *\n * @cssprop --wcs-radio-group-option-background-color - Background color of the radio group option\n * \n * @cssprop --wcs-radio-group-option-height - Height of the radio group option\n * @cssprop --wcs-radio-group-option-padding - Padding of the radio group option\n *  \n * @cssprop --wcs-radio-group-option-border-radius - Border radius of the radio group option\n * \n * @cssprop --wcs-radio-group-option-gap - Gap between each radio option\n */\n@Component({\n    tag: 'wcs-radio-group',\n    styleUrl: 'radio-group.scss',\n    shadow: true\n})\nexport class RadioGroup implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLWcsRadioGroupElement;\n    \n    /**\n     * The value of the radio-group. Automatically reflects which radio button is selected.\n     */\n    @Prop({ mutable: true }) value: any | any[] | undefined | null;\n\n    /**\n     * The name of the control to be set on all radio button children\n     */\n    @Prop({ reflect: true }) name;\n\n    /**\n     * The display mode of the control to be set on all radio button children\n     */\n    @Prop({ reflect: true }) mode: RadioGroupMode = 'radio';\n\n    /** Emitted when the value has changed. */\n    @Event() wcsChange!: EventEmitter<RadioGroupChangeEventDetail>;\n\n    @Watch('value')\n    onValueChangeHandler(value: any | undefined) {\n        this.updateRadioTabIndex(value);\n        this.updateAllRadioState();\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.el, attr, value);\n    }\n\n    componentDidLoad() {\n       this.onValueChangeHandler(this.value);\n       this.updateAllRadioModeAndName();\n    }\n    \n    onSlotChange() {\n        this.updateRadioTabIndex(this.value);\n        this.updateAllRadioModeAndName();\n    }\n    \n    updateAllRadioState() {\n        this.getSlottedRadios().forEach(r => r.updateState());\n    }\n    \n    @Watch('name')\n    @Watch('mode')\n    updateAllRadioModeAndName() {\n        this.getSlottedRadios().forEach(r => {\n            r.mode = this.mode;\n            r.name = this.name;\n        });\n    }\n    \n    updateRadioTabIndex(value: any | undefined) {\n        const radios = this.getSlottedRadios();\n\n        // Get the first radio that is not disabled and the checked one\n        const first = radios.find((radio) => !radio.disabled);\n        const checked = radios.find((radio) => radio.value === value && !radio.disabled);\n\n        if (!first && !checked) {\n            return;\n        }\n\n        // If an enabled checked radio exists, set it to be the focusable radio\n        // otherwise we default to focus the first radio\n        const focusable = checked || first;\n\n        for (const radio of radios) {\n            const tabindex = radio === focusable ? 0 : -1;\n            radio.setTabIndex(tabindex);\n        }\n    }\n\n    private getSlottedRadios(): HTMLWcsRadioElement[] {\n        return Array.from(this.el.querySelectorAll('wcs-radio'));\n    }\n\n    private getSlottedRadiosNotDisabled(): HTMLWcsRadioElement[] {\n        return Array.from(this.getSlottedRadios().filter(radio => !radio.disabled));\n    }\n\n    @Listen('wcsRadioClick')\n    handleRadioClick(event: CustomEvent<RadioChosedEvent>) {\n        this.value = event.detail.value;\n        this.wcsChange.emit({\n            value: event.detail.value\n        });\n    }\n\n    @Listen('keydown')\n    async handleKeyDown(ev: KeyboardEvent) {\n        const radiosNotDisabled = this.getSlottedRadiosNotDisabled();\n        const previousSelected = radiosNotDisabled.findIndex(r => r === ev.target);\n        let indexToSelect: number;\n\n        if ((isSpaceKey(ev) || isEnterKey(ev))) {\n            ev.preventDefault();\n            indexToSelect = previousSelected;\n        } else if (isDownArrowKey(ev) || isRightArrowKey(ev)) {\n            ev.preventDefault();\n            // Check the next wcs-radio from the previous selected\n            indexToSelect = (previousSelected + 1) % radiosNotDisabled.length;  // to return at the beginning on the list when we are on the last index\n        } else if (isUpArrowKey(ev) || isLeftArrowKey(ev)) {\n            ev.preventDefault();\n            // Check the previous wcs-radio from the previous selected\n            indexToSelect = (previousSelected - 1 + radiosNotDisabled.length) % radiosNotDisabled.length; // To return at the end of the list when we are on index=0\n        } else if (isTabKey(ev)) {\n            return;\n        }\n        \n        const radioToSelect = radiosNotDisabled[indexToSelect]\n        if (radioToSelect) {\n            radioToSelect.focus();\n            \n            if (this.value !== radioToSelect.value) {\n                this.wcsChange.emit({\n                    value: radioToSelect.value\n                })\n            }\n            \n            this.value = radioToSelect.value;\n        }\n    }\n\n    render() {\n        return (\n            <Host role=\"radiogroup\">\n                <slot name=\"option\" onSlotchange={this.onSlotChange.bind(this)}/>\n            </Host>\n        );\n    }\n\n}\n"]}

package/dist/collection/components/select/select.css

@@ -158,7 +158,7 @@ label::after {
   display: block;
 }
 
-:host([aria-invalid=true]) .wcs-select-control {
+:host([aria-invalid=true]) .wcs-select-control, :host([autocomplete]):has(input[aria-invalid=true]) .wcs-select-control {
   outline-style: var(--wcs-select-control-border-style-error);
   outline-color: var(--wcs-select-control-border-color-error);
 }

package/dist/collection/components/select/select.js

@@ -110,6 +110,7 @@ export class Select {
         this.value = undefined;
         this.placeholder = undefined;
         this.disabled = false;
+        this.required = false;
         this.multiple = false;
         this.autocomplete = false;
         this.serverMode = false;
@@ -214,7 +215,7 @@ export class Select {
                     this.displayText = opt.innerText;
                     this.lastModifiedOptionElement = opt;
                     if (this.autocomplete) {
-                        this.autocompleteValue = opt.innerText;
+                        this.setAutocompleteValue(opt.innerText);
                     }
                 }
                 opt.selected = isSelected;
@@ -231,7 +232,7 @@ export class Select {
         if (this.autocomplete) {
             // When need to reset the internal filter state of the component as the mutation of 
             // autocompleteValue from the code doesn't call onAutocompleteInputEvent method.
-            this.handleAutocompleteValueChange('', true);
+            this.setAutocompleteValue('', true);
         }
         this.options.forEach((opt) => {
             opt.selected = false;
@@ -356,7 +357,7 @@ export class Select {
                             // Indeed, we have to tell the component to take the current filter state manually at the 
                             // opening (because the input event of the autocomplete field is not fired at this point).
                             if (this.autocompleteValue && this.autocompleteValue !== '') {
-                                this.handleAutocompleteValueChange(this.autocompleteValue);
+                                this.setAutocompleteValue(this.autocompleteValue);
                             }
                         }
                         this.clearHighlightOnLastHighlightedOption();
@@ -751,11 +752,17 @@ export class Select {
     onAutocompleteInputEvent(e) {
         var _a;
         const filter = (_a = this.autocompleteInput.value) !== null && _a !== void 0 ? _a : '';
-        this.handleAutocompleteValueChange(filter);
+        this.setAutocompleteValue(filter);
         // Avoid the inputEvent event to bubble and be emitted, we rather use wcsFilterChange in this case :
         e.stopPropagation();
     }
-    handleAutocompleteValueChange(filter, isReset = false) {
+    /**
+     * Set the autocomplete value and open the select if needed.
+     * @param filter - The new filter value
+     * @param isReset - If true, the filter is reset and the select is closed
+     * @private
+     */
+    setAutocompleteValue(filter, isReset = false) {
         var _a, _b;
         this.clearHighlightOnLastHighlightedOption();
         const newValueIsDifferentFromLastModifiedOption = this.lastModifiedOptionElement == null || ((_a = this.lastModifiedOptionElement) === null || _a === void 0 ? void 0 : _a.textContent) !== this.autocompleteValue;
@@ -827,14 +834,15 @@ export class Select {
     render() {
         var _a;
         const ariaLabelValue = `${this.labelElement ? this.labelElement.innerText : ''} ${this.hasValue ? this.displayText : ''}`.trimEnd();
-        return (h(Host, Object.assign({ key: '201fc0413dca958b717f8e68a3180475a6d29cc6', class: this.expanded ? 'expanded ' : '', overlayDirection: this.overlayDirection }, this.focusedAttributes(), { role: !this.autocomplete ? "combobox" : null, "aria-haspopup": !this.autocomplete ? "listbox" : null, "aria-owns": !this.autocomplete ? this.optionsId : null, "aria-controls": !this.autocomplete ? this.optionsId : null, "aria-disabled": this.disabled ? 'true' : null, "aria-expanded": this.expanded ? 'true' : 'false', "aria-multiselectable": this.multiple ? 'true' : 'false', "aria-label": ariaLabelValue }), h("div", { key: 'ed3644949eb6b936640af99c24992b041efd3377', class: "wcs-select-control" }, h("div", { key: '3760064787fb454b33e4d957110fddc981aa4f30', class: "wcs-select-value-container" }, this.hasValue
+        const noResultContainerId = 'no-result-container';
+        return (h(Host, Object.assign({ key: '6a973d4f68de6f668fda8b17de1da78b94076dc0', class: this.expanded ? 'expanded ' : '', overlayDirection: this.overlayDirection }, this.focusedAttributes(), { role: !this.autocomplete ? "combobox" : null, "aria-haspopup": !this.autocomplete ? "listbox" : null, "aria-owns": !this.autocomplete ? this.optionsId : null, "aria-controls": !this.autocomplete ? this.optionsId : null, "aria-disabled": !this.autocomplete ? (this.disabled ? 'true' : null) : null, "aria-required": !this.autocomplete ? (this.required ? 'true' : 'false') : null, "aria-expanded": !this.autocomplete ? (this.expanded ? 'true' : 'false') : null, "aria-multiselectable": !this.autocomplete ? (this.multiple ? 'true' : 'false') : null, "aria-label": !this.autocomplete ? ariaLabelValue : null }), h("div", { key: '190343789a5d2b4227b4a9822348aa087b4bbbad', class: "wcs-select-control" }, h("div", { key: '2f61ddd11d08bd25d8acf00ecfdced4a97a33320', class: "wcs-select-value-container" }, this.hasValue
             ?
                 (this.chips ?
                     this.values.map((option) => h(SelectChips, { disabled: this.disabled, option: option, onRemove: this.removeChip.bind(this) }))
                     : (!this.autocomplete || this.autocomplete && this.multiple) &&
                         h("label", { class: "wcs-select-value" }, this.displayText))
-            : !this.autocomplete && h("label", { class: "wcs-select-placeholder" }, this.placeholder), this.autocomplete && h("input", Object.assign({ key: '5cc152dd3815f8852493876baa56ab513eb1b424', class: "autocomplete-field", value: this.autocompleteValue, role: "combobox", "aria-haspopup": "listbox", "aria-label": ariaLabelValue, "aria-disabled": this.disabled ? 'true' : null, "aria-expanded": this.expanded ? 'true' : 'false', "aria-controls": this.optionsId, "aria-owns": this.optionsId, "aria-multiselectable": this.multiple ? 'true' : 'false', "aria-autocomplete": "list", autocomplete: "off", disabled: this.disabled, onBlur: (e) => this.onAutocompleteFieldBlur(e), placeholder: ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) ? null : this.placeholder, onInput: (e) => this.onAutocompleteInputEvent(e), ref: el => this.autocompleteInput = el }, this.inheritedAttributes))), h(SelectArrow, { key: '5c555ddc2049519b25316a4c0428e6cd02a02ea8', up: this.expanded })), h("div", { key: 'ffed16dd522116e992fba80451a242a34d6efa0d', class: "wcs-select-options", id: this.optionsId, role: "listbox" }, h("slot", { key: '296e306aad573f1c71bb23439c501127a5c1b298', name: "options", onSlotchange: this.onSlotchange.bind(this) }), (this.autocomplete && this.showNoResultFoundLabel) &&
-            h("div", { key: '8f49959dccc48542d89d8425d4659201627b27a8', class: "noresult-container" }, h("slot", { key: '16be57220be51e5417b9b1e92f929c678a0f6f02', name: "filter-no-result" }, h("span", { key: 'c45dd71a0243a08dd77cafc40577d39c8f7e6d5d' }, "Aucun r\u00E9sultat"))))));
+            : !this.autocomplete && h("label", { class: "wcs-select-placeholder" }, this.placeholder), this.autocomplete && h("input", Object.assign({ key: '7f2fc76276628b45ebcbcb40f64a82acafa5e192', class: "autocomplete-field", value: this.autocompleteValue, role: "combobox", "aria-haspopup": "listbox", "aria-label": ariaLabelValue, "aria-describedby": noResultContainerId, "aria-disabled": this.disabled ? 'true' : null, "aria-expanded": this.expanded ? 'true' : 'false', "aria-controls": this.optionsId, "aria-owns": this.optionsId, "aria-multiselectable": this.multiple ? 'true' : 'false', "aria-autocomplete": "list", autocomplete: "off", disabled: this.disabled, required: this.required, onBlur: (e) => this.onAutocompleteFieldBlur(e), placeholder: ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) ? null : this.placeholder, onInput: (e) => this.onAutocompleteInputEvent(e), ref: el => this.autocompleteInput = el }, this.inheritedAttributes))), h(SelectArrow, { key: 'a6075fc5a325bc1e19cc3d62ddbffb8a3409d454', up: this.expanded })), h("div", { key: '36a6ea6029659db97f174c12a4a5ff3c4c0bfd69', class: "wcs-select-options", id: this.optionsId, role: "listbox" }, h("slot", { key: '3a02c19f0b77c98807a684ae77f2612c422cb096', name: "options", onSlotchange: this.onSlotchange.bind(this) }), (this.autocomplete && this.showNoResultFoundLabel) &&
+            h("div", { key: '82ecd4b70ed11d8497e9d5d3aea0c3c95f20ec36', role: "alert", id: noResultContainerId, class: "noresult-container" }, h("slot", { key: '607e7d9c3c112e64218d2170ca4e07aaf5cbd25c', name: "filter-no-result" }, h("span", { key: 'da3800fefd8f57c0d7b62e261933e3293bea2161' }, "Aucun r\u00E9sultat"))))));
     }
     static get is() { return "wcs-select"; }
     static get encapsulation() { return "shadow"; }
@@ -923,7 +931,25 @@ export class Select {
                     "text": "If `true`, the user cannot interact with the select."
                 },
                 "attribute": "disabled",
-                "reflect": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the user must fill in a value before submitting a form."
+                },
+                "attribute": "required",
+                "reflect": true,
                 "defaultValue": "false"
             },
             "multiple": {