wcs-core 4.1.0 → 4.2.0

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

@@ -1 +1 @@
-{"file":"wcs-input.entry.cjs.js","mappings":"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","names":["debounceEvent","inheritAttributes","findItemLabel","h","Host"],"sources":["./src/components/input/input-interface.ts","./src/components/input/input.scss?tag=wcs-input&encapsulation=shadow","./src/components/input/input.tsx"],"sourcesContent":["// From: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\nimport { WcsSize } from '../../shared-types';\n\nexport type AutocompleteTypes = (\n    | 'on' | 'off' | 'name' | 'honorific-prefix' | 'given-name' | 'additional-name' | 'family-name' | 'honorific-suffix'\n    | 'nickname' | 'email' | 'username' | 'new-password' | 'current-password' | 'one-time-code' | 'organization-title' | 'organization'\n    | 'street-address' | 'address-line1' | 'address-line2' | 'address-line3' | 'address-level4' | 'address-level3' | 'address-level2'\n    | 'address-level1' | 'country' | 'country-name' | 'postal-code' | 'cc-name' | 'cc-given-name' | 'cc-additional-name' | 'cc-family-name'\n    | 'cc-family-name' | 'cc-number' | 'cc-exp' | 'cc-exp-month' | 'cc-exp-year' | 'cc-csc' | 'cc-type' | 'transaction-currency' | 'transaction-amount'\n    | 'language' | 'bday' | 'bday-day' | 'bday-month' | 'bday-year' | 'sex' | 'tel' | 'tel-country-code' | 'tel-national' | 'tel-area-code' | 'tel-local'\n    | 'tel-extension' | 'impp' | 'url' | 'photo');\n\nexport type TextFieldTypes = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'time' | 'week' | 'month' | 'datetime-local' | 'file';\n\n\nexport const WcsInputSizeValues = ['s', 'm', 'l'] as const; // as const keyword is used to infer and preserve the exact literal values of an array or object.\n\nexport type WcsInputSize = Extract<WcsSize, typeof WcsInputSizeValues[number]>;\n\nexport function isWcsInputSize(size: string): size is WcsInputSize {\n    // @ts-ignore : ignore size type, as it is checked with WcsInputSizeValues\n    return WcsInputSizeValues.includes(size);\n}\n\nexport interface InputChangeEventDetail {\n    value: string | undefined | null;\n}\n","@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-input-icon-color: var(--wcs-text-medium);\n    --wcs-internal-input-border-radius-left: var(--wcs-input-border-radius-left, var(--wcs-border-radius));\n    --wcs-internal-input-border-radius-right: var(--wcs-input-border-radius-right, var(--wcs-border-radius));\n    --wcs-internal-input-border-width: 2px;\n    display: flex;\n    width: 100%;\n    height: var(--wcs-input-host-height);\n    box-sizing: border-box;\n    border-radius: var(--wcs-internal-input-border-radius-left) var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-left);\n    background-color: var(--wcs-light);\n    border: var(--wcs-internal-input-border-width) solid var(--wcs-light);\n    background-clip: padding-box;\n\n    ::placeholder {\n        font-weight: 400;\n        font-style: italic;\n    }\n\n    input {\n        overflow: hidden;\n        min-height: var(--wcs-size-xs);\n        width: 100%;\n        background-color: transparent;\n        font-family: var(--wcs-font-sans-serif);\n        color: var(--wcs-primary);\n        font-weight: var(--wcs-font-weight-form-value) !important;\n        border: none;\n        padding: 0 calc(var(--wcs-padding) - var(--wcs-internal-input-border-width));\n        font-size: var(--wcs-input-font-size, 1rem);\n        line-height: 1.5;\n    }\n\n    input:focus {\n        box-shadow: none;\n        outline: 0;\n    }\n\n    wcs-mat-icon {\n        position: relative;\n        margin-left: 8px;\n        margin-right: -8px;\n    }\n\n    .toggle_password {\n        cursor: pointer;\n        margin-left: -8px;\n        margin-right: 8px;\n    }\n\n\n    .prefix, .suffix {\n        color: var(--wcs-white);\n        display: flex;\n        white-space: nowrap;\n        align-items: center;\n        font-size: var(--wcs-input-font-size, 1rem);\n        padding: 0 calc(var(--wcs-padding) / 2);\n        font-weight: var(--wcs-font-weight-form-value) !important;\n        background-color: var(--wcs-text-disabled);\n    }\n\n    .prefix {\n        border-radius: var(--wcs-internal-input-border-radius-left) 0 0 var(--wcs-internal-input-border-radius-left);\n        margin: calc(-1 * var(--wcs-internal-input-border-width)) 0 calc(-1 * var(--wcs-internal-input-border-width)) calc(-1 * var(--wcs-internal-input-border-width));\n        border-left: solid var(--wcs-internal-input-border-width) transparent;\n        border-top: solid var(--wcs-internal-input-border-width) transparent;\n        border-bottom: solid var(--wcs-internal-input-border-width) transparent;\n    }\n\n    .suffix {\n        border-radius: 0 var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) 0;\n        margin: calc(-1 * var(--wcs-internal-input-border-width)) calc(-1 * var(--wcs-internal-input-border-width)) calc(-1 * var(--wcs-internal-input-border-width)) 0px;\n        border-right: solid var(--wcs-internal-input-border-width) transparent;\n        border-top: solid var(--wcs-internal-input-border-width) transparent;\n        border-bottom: solid var(--wcs-internal-input-border-width) transparent;\n    }\n}\n\n:host([size=l]) {\n    --wcs-input-host-height: var(--wcs-size-l);\n    --wcs-input-font-size: 1.0625rem;\n}\n\n:host([size=m]) { // Default\n    --wcs-input-host-height: var(--wcs-size-m);\n    --wcs-input-font-size: 1rem;\n}\n\n:host([size=s]) {\n    --wcs-input-host-height: var(--wcs-size-s);\n    --wcs-input-font-size: 0.9375rem;\n}\n\n:host([state=error]) {\n    border-color: var(--wcs-red) !important;\n}\n\n:host([data-has-prefix]) {\n    input {\n        padding-left: calc(var(--wcs-padding) / 2);\n    }\n}\n\n:host([data-has-suffix]) {\n    input {\n        padding-left: calc(var(--wcs-padding) / 2);\n    }\n}\n\n:host([disabled]) {\n    input {\n        color: var(--wcs-text-disabled);\n        cursor: not-allowed;\n    }\n\n    .prefix, .suffix {\n        color: var(--wcs-light);\n    }\n}\n\n:host(:focus-within) {\n    border: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n\n    .prefix {\n        border-left: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n        border-top: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n        border-bottom: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n    }\n\n    .suffix {\n        border-right: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n        border-top: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n        border-bottom: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n    }\n\n    wcs-mat-icon {\n        color: var(--wcs-primary);\n    }\n}\n","import {\n    Build, Component,\n    ComponentInterface, Element, Event, EventEmitter, h, Host, Method, Prop,\n    State, Watch\n} from '@stencil/core';\nimport { debounceEvent, findItemLabel, inheritAttributes } from '../../utils/helpers';\nimport {\n    AutocompleteTypes, InputChangeEventDetail, isWcsInputSize, TextFieldTypes, WcsInputSize, WcsInputSizeValues\n} from './input-interface';\n\n/**\n * Mainly inspired from Ionic Input Component\n */\n@Component({\n    tag: 'wcs-input',\n    styleUrl: 'input.scss',\n    shadow: {delegatesFocus: true},\n})\nexport class Input implements ComponentInterface {\n    private nativeInput?: HTMLInputElement;\n    private inputId = `wcs-input-${inputIds++}`;\n    private didBlurAfterEdit = false;\n    private inheritedAttributes: { [k: string]: any } = {};\n    private iconPassword = \"visibility\";\n\n\n    /**\n     * This is required for a WebKit bug which requires us to\n     * blur and focus an input to properly focus the input in\n     * an item with delegatesFocus. It will no longer be needed\n     * with iOS 14.\n     *\n     * @internal\n     */\n    @Prop() fireFocusEvents = true;\n\n    @State() private hasFocus = false;\n\n    @State() private passwordReveal = false;\n\n    @Element() private el!: HTMLElement;\n\n    /**\n     * If the value of the type attribute is `\"file\"`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers.\n     */\n    @Prop() accept?: string;\n\n    /**\n     * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n     * Available options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.\n     */\n    @Prop() autocapitalize = 'off';\n\n    /**\n     * Indicates whether the value of the control can be automatically completed by the browser.\n     */\n    @Prop() autocomplete: AutocompleteTypes = 'off';\n\n    /**\n     * Whether auto correction should be enabled when the user is entering/editing the text value.\n     */\n    @Prop() autocorrect: 'on' | 'off' = 'off';\n\n    /**\n     * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n     */\n    @Prop() autofocus = false;\n\n    /**\n     * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.\n     */\n    @Prop() clearInput = false;\n\n    /**\n     * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `\"password\"`, `false` for all other types.\n     */\n    @Prop() clearOnEdit?: boolean;\n\n    /**\n     * Set the amount of time, in milliseconds, to wait to trigger the `wcsChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.\n     */\n    @Prop() debounce = 0;\n\n    /**\n     * Prefix displayed before the text field contents. This is not included in the value.\n     */\n    @Prop() prefixLabel: string;\n\n    /**\n     * Suffix displayed after the text field contents. This is not included in the value.\n     */\n    @Prop() suffixLabel: string;\n\n    @Watch('debounce')\n    protected debounceChanged() {\n        this.wcsChange = debounceEvent(this.wcsChange, this.debounce);\n    }\n\n    /**\n     * If `true`, the user cannot interact with the input.\n     */\n    @Prop() disabled = false;\n\n    /**\n     * A hint to the browser for which enter key to display.\n     * Possible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n     * `\"previous\"`, `\"search\"`, and `\"send\"`.\n     */\n    @Prop() enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\n    /**\n     * Specify the size (height) of the input.\n     */\n    @Prop({reflect: true}) size: WcsInputSize = 'm';\n\n    /**\n     * Name of the material icon to add to the input\n     */\n    @Prop() icon: string;\n\n    /**\n     * A hint to the browser for which keyboard to display.\n     * Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n     * `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n     */\n    @Prop() inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';\n\n    /**\n     * The maximum value, which must not be less than its minimum (min attribute) value.\n     */\n    @Prop() max?: string;\n\n    /**\n     * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n     */\n    @Prop() maxlength?: number;\n\n    /**\n     * The minimum value, which must not be greater than its maximum (max attribute) value.\n     */\n    @Prop() min?: string;\n\n    /**\n     * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n     */\n    @Prop() minlength?: number;\n\n    /**\n     * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"` or `\"file\"`, otherwise it is ignored.\n     */\n    @Prop() multiple?: boolean;\n\n    /**\n     * The name of the control, which is submitted with the form data.\n     */\n    @Prop() name: string = this.inputId;\n\n    /**\n     * A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, or `\"password\"`, otherwise it is ignored. When the type attribute is `\"date\"`, `pattern` will only be used in browsers that do not support the `\"date\"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information.\n     */\n    @Prop() pattern?: string;\n\n    /**\n     * Instructional text that shows before the input has a value.\n     */\n    @Prop() placeholder?: string | null;\n\n    /**\n     * If `true`, the user cannot modify the value.\n     */\n    @Prop() readonly = false;\n\n    /**\n     * If `true`, the user must fill in a value before submitting a form.\n     */\n    @Prop() required = false;\n\n    /**\n     * If `true`, the element will have its spelling and grammar checked.\n     */\n    @Prop() spellcheck = false;\n\n    /**\n     * Specifies the state of the input. By default the input is in an normal state but you can to set it to 'error' state if the data given by the user is not valid.\n     */\n    @Prop({reflect: true}) state: 'initial' | 'error' = 'initial';\n\n    /**\n     * Works with the min and max attributes to limit the increments at which a value can be set.\n     * Possible values are: `\"any\"` or a positive floating point number.\n     */\n    @Prop() step?: string;\n\n    /**\n     * The type of control to display. The default type is text.\n     */\n    @Prop() type: TextFieldTypes = 'text';\n\n    /**\n     * The value of the input.\n     */\n    @Prop({mutable: true}) value?: string | number | null = '';\n\n    /**\n     * Emitted when a keyboard input occurred.\n     */\n    @Event() wcsInput!: EventEmitter<KeyboardEvent>;\n\n    /**\n     * Emitted when the value has changed.\n     */\n    @Event() wcsChange!: EventEmitter<InputChangeEventDetail>;\n\n    /**\n     * Emitted when the input loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the input has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    /**\n     * Update the native input element when the value changes\n     */\n    @Watch('value')\n    protected valueChanged() {\n        this.wcsChange.emit({value: this.value?.toString()});\n    }\n\n    componentWillLoad() {\n        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);\n\n        if (!isWcsInputSize(this.size)) {\n            console.error(`Invalid size value for wcs-input : \"${this.size}\". Must be one of \"${WcsInputSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n    }\n\n    connectedCallback() {\n        this.debounceChanged();\n        if (Build.isBrowser) {\n            document.dispatchEvent(new CustomEvent('wcsInputDidLoad', {\n                detail: this.el\n            }));\n        }\n    }\n\n    disconnectedCallback() {\n        if (Build.isBrowser) {\n            document.dispatchEvent(new CustomEvent('wcsInputDidUnload', {\n                detail: this.el\n            }));\n        }\n    }\n\n    /**\n     * @deprecated use the native focus method instead\n     *\n     * Sets focus on the native `input` in `wcs-input`. Use this method instead of the global\n     * `input.focus()`.\n     */\n    @Method()\n    async setFocus() {\n        if (this.nativeInput) {\n            this.nativeInput.focus();\n        }\n    }\n\n    /**\n     * Sets blur on the native `input` in `wcs-input`. Use this method instead of the global\n     * `input.blur()`.\n     * @internal\n     */\n    @Method()\n    async setBlur() {\n        if (this.nativeInput) {\n            this.nativeInput.blur();\n        }\n    }\n\n    /**\n     * Returns the native `<input>` element used under the hood.\n     */\n    @Method()\n    getInputElement(): Promise<HTMLInputElement> {\n        return Promise.resolve(this.nativeInput!);\n    }\n\n    private shouldClearOnEdit() {\n        const {type, clearOnEdit} = this;\n        return (clearOnEdit === undefined)\n            ? type === 'password'\n            : clearOnEdit;\n    }\n\n    private getValue(): string {\n        return typeof this.value === 'number' ? this.value.toString() :\n            (this.value || '').toString();\n    }\n\n    private onInput = (ev: Event) => {\n        const input = ev.target as HTMLInputElement | null;\n        if (input) {\n            this.value = input.value || '';\n        }\n        this.wcsInput.emit(ev as KeyboardEvent);\n    }\n\n    private onBlur = (ev: FocusEvent) => {\n        this.hasFocus = false;\n        this.focusChanged();\n\n        if (this.fireFocusEvents) {\n            this.wcsBlur.emit(ev);\n        }\n    }\n\n    private onFocus = (ev: FocusEvent) => {\n        this.hasFocus = true;\n        this.focusChanged();\n\n        if (this.fireFocusEvents) {\n            this.wcsFocus.emit(ev);\n        }\n    }\n\n    private onKeydown = (ev: KeyboardEvent) => {\n        if (this.shouldClearOnEdit()) {\n            // Did the input value change after it was blurred and edited?\n            // Do not clear if user is hitting Enter to submit form\n            if (this.didBlurAfterEdit && this.hasValue() && ev.key !== 'Enter') {\n                // Clear the input\n                this.clearTextInput();\n            }\n\n            // Reset the flag\n            this.didBlurAfterEdit = false;\n        }\n    }\n\n    private clearTextInput = (ev?: Event) => {\n        if (this.clearInput && !this.readonly && !this.disabled && ev) {\n            ev.preventDefault();\n            ev.stopPropagation();\n\n            // Attempt to focus input again after pressing clear button\n            this.setFocus();\n        }\n\n        this.value = '';\n\n        /**\n         * This is needed for clearOnEdit\n         * Otherwise the value will not be cleared\n         * if user is inside the input\n         */\n        if (this.nativeInput) {\n            this.nativeInput.value = '';\n        }\n    }\n\n    private focusChanged() {\n        // If clearOnEdit is enabled and the input blurred but has a value, set a flag\n        if (!this.hasFocus && this.shouldClearOnEdit() && this.hasValue()) {\n            this.didBlurAfterEdit = true;\n        }\n    }\n\n    private hasValue(): boolean {\n        return this.getValue().length > 0;\n    }\n\n    private passwordRevealIconClick(): void {\n        this.passwordReveal = !this.passwordReveal;\n    }\n\n    @Watch('passwordReveal')\n    onPasswordRevealChange(): void {\n        this.iconPassword = this.passwordReveal ? 'visibility_off' : 'visibility';\n    }\n\n    render() {\n        const value = this.getValue();\n        const labelId = this.inputId + '-lbl';\n        const label = findItemLabel(this.el);\n        if (label) {\n            label.id = labelId;\n        }\n\n        return (\n            <Host\n                aria-disabled={this.disabled ? 'true' : null}\n                data-has-prefix={!!this.prefixLabel}\n                data-has-suffix={!!this.suffixLabel}\n            >\n                {this.prefixLabel ? (<span class=\"prefix\" part=\"prefix\">{this.prefixLabel}</span>) : null}\n                {this.icon ? (<wcs-mat-icon icon={this.icon} size=\"m\"></wcs-mat-icon>) : null}\n                <input\n                    class=\"native-input\"\n                    ref={input => this.nativeInput = input}\n                    aria-labelledby={label ? labelId : null}\n                    disabled={this.disabled}\n                    accept={this.accept}\n                    autoCapitalize={this.autocapitalize}\n                    autoComplete={this.autocomplete}\n                    autoCorrect={this.autocorrect}\n                    autoFocus={this.autofocus}\n                    enterKeyHint={this.enterkeyhint}\n                    inputMode={this.inputmode}\n                    min={this.min}\n                    max={this.max}\n                    minLength={this.minlength}\n                    maxLength={this.maxlength}\n                    multiple={this.multiple}\n                    name={this.name}\n                    pattern={this.pattern}\n                    placeholder={this.placeholder || ''}\n                    readOnly={this.readonly}\n                    required={this.required}\n                    spellcheck={this.spellcheck}\n                    step={this.step}\n                    type={this.passwordReveal ? 'text' : this.type}\n                    value={value}\n                    onInput={this.onInput}\n                    onBlur={this.onBlur}\n                    onFocus={this.onFocus}\n                    onKeyDown={this.onKeydown}\n                    {...this.inheritedAttributes}\n                />\n                {this.type === \"password\" ? (<wcs-mat-icon class=\"toggle_password\" icon={this.iconPassword} size=\"m\"  onClick={() => this.passwordRevealIconClick()}></wcs-mat-icon>) : null}\n                {this.suffixLabel ? (<span class=\"suffix\" part=\"suffix\">{this.suffixLabel}</span>) : null}\n            </Host>\n        );\n    }\n}\n\nlet inputIds = 0;\n"],"version":3}
+{"file":"wcs-input.entry.cjs.js","mappings":"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","names":["debounceEvent","inheritAttributes","findItemLabel","h","Host"],"sources":["./src/components/input/input-interface.ts","./src/components/input/input.scss?tag=wcs-input&encapsulation=shadow","./src/components/input/input.tsx"],"sourcesContent":["// From: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\nimport { WcsSize } from '../../shared-types';\n\nexport type AutocompleteTypes = (\n    | 'on' | 'off' | 'name' | 'honorific-prefix' | 'given-name' | 'additional-name' | 'family-name' | 'honorific-suffix'\n    | 'nickname' | 'email' | 'username' | 'new-password' | 'current-password' | 'one-time-code' | 'organization-title' | 'organization'\n    | 'street-address' | 'address-line1' | 'address-line2' | 'address-line3' | 'address-level4' | 'address-level3' | 'address-level2'\n    | 'address-level1' | 'country' | 'country-name' | 'postal-code' | 'cc-name' | 'cc-given-name' | 'cc-additional-name' | 'cc-family-name'\n    | 'cc-family-name' | 'cc-number' | 'cc-exp' | 'cc-exp-month' | 'cc-exp-year' | 'cc-csc' | 'cc-type' | 'transaction-currency' | 'transaction-amount'\n    | 'language' | 'bday' | 'bday-day' | 'bday-month' | 'bday-year' | 'sex' | 'tel' | 'tel-country-code' | 'tel-national' | 'tel-area-code' | 'tel-local'\n    | 'tel-extension' | 'impp' | 'url' | 'photo');\n\nexport type TextFieldTypes = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'time' | 'week' | 'month' | 'datetime-local' | 'file';\n\n\nexport const WcsInputSizeValues = ['s', 'm', 'l'] as const; // as const keyword is used to infer and preserve the exact literal values of an array or object.\n\nexport type WcsInputSize = Extract<WcsSize, typeof WcsInputSizeValues[number]>;\n\nexport function isWcsInputSize(size: string): size is WcsInputSize {\n    // @ts-ignore : ignore size type, as it is checked with WcsInputSizeValues\n    return WcsInputSizeValues.includes(size);\n}\n\nexport interface InputChangeEventDetail {\n    value: string | undefined | null;\n}\n","@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-input-icon-color: var(--wcs-text-medium);\n    --wcs-internal-input-border-radius-left: var(--wcs-input-border-radius-left, var(--wcs-border-radius));\n    --wcs-internal-input-border-radius-right: var(--wcs-input-border-radius-right, var(--wcs-border-radius));\n    --wcs-internal-input-border-width: 2px;\n    display: flex;\n    width: 100%;\n    height: var(--wcs-input-host-height);\n    box-sizing: border-box;\n    border-radius: var(--wcs-internal-input-border-radius-left) var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-left);\n    background-color: var(--wcs-light);\n    border: var(--wcs-internal-input-border-width) solid var(--wcs-light);\n    background-clip: padding-box;\n\n    ::placeholder {\n        font-weight: 400;\n        font-style: italic;\n    }\n\n    input {\n        overflow: hidden;\n        min-height: var(--wcs-size-xs);\n        width: 100%;\n        background-color: transparent;\n        font-family: var(--wcs-font-sans-serif);\n        color: var(--wcs-primary);\n        font-weight: var(--wcs-font-weight-form-value) !important;\n        border: none;\n        padding: 0 calc(var(--wcs-padding) - var(--wcs-internal-input-border-width));\n        font-size: var(--wcs-input-font-size, 1rem);\n        line-height: 1.5;\n    }\n\n    input:focus {\n        box-shadow: none;\n        outline: 0;\n    }\n\n    wcs-mat-icon {\n        position: relative;\n        margin-left: 8px;\n        margin-right: -8px;\n    }\n\n    .toggle_password {\n        cursor: pointer;\n        margin-left: -8px;\n        margin-right: 8px;\n    }\n\n\n    .prefix, .suffix {\n        color: var(--wcs-white);\n        display: flex;\n        white-space: nowrap;\n        align-items: center;\n        font-size: var(--wcs-input-font-size, 1rem);\n        padding: 0 calc(var(--wcs-padding) / 2);\n        font-weight: var(--wcs-font-weight-form-value) !important;\n        background-color: var(--wcs-text-disabled);\n    }\n\n    .prefix {\n        border-radius: var(--wcs-internal-input-border-radius-left) 0 0 var(--wcs-internal-input-border-radius-left);\n        margin: calc(-1 * var(--wcs-internal-input-border-width)) 0 calc(-1 * var(--wcs-internal-input-border-width)) calc(-1 * var(--wcs-internal-input-border-width));\n        border-left: solid var(--wcs-internal-input-border-width) transparent;\n        border-top: solid var(--wcs-internal-input-border-width) transparent;\n        border-bottom: solid var(--wcs-internal-input-border-width) transparent;\n    }\n\n    .suffix {\n        border-radius: 0 var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) 0;\n        margin: calc(-1 * var(--wcs-internal-input-border-width)) calc(-1 * var(--wcs-internal-input-border-width)) calc(-1 * var(--wcs-internal-input-border-width)) 0px;\n        border-right: solid var(--wcs-internal-input-border-width) transparent;\n        border-top: solid var(--wcs-internal-input-border-width) transparent;\n        border-bottom: solid var(--wcs-internal-input-border-width) transparent;\n    }\n}\n\n:host([size=l]) {\n    --wcs-input-host-height: var(--wcs-size-l);\n    --wcs-input-font-size: 1.0625rem;\n}\n\n:host([size=m]) { // Default\n    --wcs-input-host-height: var(--wcs-size-m);\n    --wcs-input-font-size: 1rem;\n}\n\n:host([size=s]) {\n    --wcs-input-host-height: var(--wcs-size-s);\n    --wcs-input-font-size: 0.9375rem;\n}\n\n:host([state=error]) {\n    border-color: var(--wcs-red) !important;\n}\n\n:host([data-has-prefix]) {\n    input {\n        padding-left: calc(var(--wcs-padding) / 2);\n    }\n}\n\n:host([data-has-suffix]) {\n    input {\n        padding-left: calc(var(--wcs-padding) / 2);\n    }\n}\n\n:host([disabled]) {\n    input {\n        color: var(--wcs-text-disabled);\n        cursor: not-allowed;\n    }\n\n    .prefix, .suffix {\n        color: var(--wcs-light);\n    }\n}\n\n:host(:focus-within) {\n    border: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n\n    .prefix {\n        border-left: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n        border-top: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n        border-bottom: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n    }\n\n    .suffix {\n        border-right: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n        border-top: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n        border-bottom: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n    }\n\n    wcs-mat-icon {\n        color: var(--wcs-primary);\n    }\n}\n","import {\n    Build, Component,\n    ComponentInterface, Element, Event, EventEmitter, h, Host, Method, Prop,\n    State, Watch\n} from '@stencil/core';\nimport { debounceEvent, findItemLabel, inheritAttributes } from '../../utils/helpers';\nimport {\n    AutocompleteTypes, InputChangeEventDetail, isWcsInputSize, TextFieldTypes, WcsInputSize, WcsInputSizeValues\n} from './input-interface';\n\n/**\n * Mainly inspired from Ionic Input Component\n */\n@Component({\n    tag: 'wcs-input',\n    styleUrl: 'input.scss',\n    shadow: {delegatesFocus: true},\n})\nexport class Input implements ComponentInterface {\n    private nativeInput?: HTMLInputElement;\n    private inputId = `wcs-input-${inputIds++}`;\n    private didBlurAfterEdit = false;\n    private inheritedAttributes: { [k: string]: any } = {};\n    private iconPassword = \"visibility\";\n\n\n    /**\n     * This is required for a WebKit bug which requires us to\n     * blur and focus an input to properly focus the input in\n     * an item with delegatesFocus. It will no longer be needed\n     * with iOS 14.\n     *\n     * @internal\n     */\n    @Prop() fireFocusEvents = true;\n\n    @State() private hasFocus = false;\n\n    @State() private passwordReveal = false;\n\n    @Element() private el!: HTMLElement;\n\n    /**\n     * If the value of the type attribute is `\"file\"`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers.\n     */\n    @Prop() accept?: string;\n\n    /**\n     * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n     * Available options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.\n     */\n    @Prop() autocapitalize = 'off';\n\n    /**\n     * Indicates whether the value of the control can be automatically completed by the browser.\n     */\n    @Prop() autocomplete: AutocompleteTypes = 'off';\n\n    /**\n     * Whether auto correction should be enabled when the user is entering/editing the text value.\n     */\n    @Prop() autocorrect: 'on' | 'off' = 'off';\n\n    /**\n     * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n     */\n    @Prop() autofocus = false;\n\n    /**\n     * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.\n     */\n    @Prop() clearInput = false;\n\n    /**\n     * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `\"password\"`, `false` for all other types.\n     */\n    @Prop() clearOnEdit?: boolean;\n\n    /**\n     * Set the amount of time, in milliseconds, to wait to trigger the `wcsChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.\n     */\n    @Prop() debounce = 0;\n\n    /**\n     * Prefix displayed before the text field contents. This is not included in the value.\n     */\n    @Prop() prefixLabel: string;\n\n    /**\n     * Suffix displayed after the text field contents. This is not included in the value.\n     */\n    @Prop() suffixLabel: string;\n\n    @Watch('debounce')\n    protected debounceChanged() {\n        this.wcsChange = debounceEvent(this.wcsChange, this.debounce);\n    }\n\n    /**\n     * If `true`, the user cannot interact with the input.\n     */\n    @Prop() disabled = false;\n\n    /**\n     * A hint to the browser for which enter key to display.\n     * Possible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n     * `\"previous\"`, `\"search\"`, and `\"send\"`.\n     */\n    @Prop() enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\n    /**\n     * Specify the size (height) of the input.\n     */\n    @Prop({reflect: true}) size: WcsInputSize = 'm';\n\n    /**\n     * Name of the material icon to add to the input\n     */\n    @Prop() icon: string;\n\n    /**\n     * A hint to the browser for which keyboard to display.\n     * Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n     * `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n     */\n    @Prop() inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';\n\n    /**\n     * The maximum value, which must not be less than its minimum (min attribute) value.\n     */\n    @Prop() max?: string;\n\n    /**\n     * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n     */\n    @Prop() maxlength?: number;\n\n    /**\n     * The minimum value, which must not be greater than its maximum (max attribute) value.\n     */\n    @Prop() min?: string;\n\n    /**\n     * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n     */\n    @Prop() minlength?: number;\n\n    /**\n     * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"` or `\"file\"`, otherwise it is ignored.\n     */\n    @Prop() multiple?: boolean;\n\n    /**\n     * The name of the control, which is submitted with the form data.\n     */\n    @Prop() name: string = this.inputId;\n\n    /**\n     * A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, or `\"password\"`, otherwise it is ignored. When the type attribute is `\"date\"`, `pattern` will only be used in browsers that do not support the `\"date\"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information.\n     */\n    @Prop() pattern?: string;\n\n    /**\n     * Instructional text that shows before the input has a value.\n     */\n    @Prop() placeholder?: string | null;\n\n    /**\n     * If `true`, the user cannot modify the value.\n     */\n    @Prop() readonly = false;\n\n    /**\n     * If `true`, the user must fill in a value before submitting a form.\n     */\n    @Prop() required = false;\n\n    /**\n     * If `true`, the element will have its spelling and grammar checked.\n     */\n    @Prop() spellcheck = false;\n\n    /**\n     * Specifies the state of the input. By default the input is in an normal state but you can to set it to 'error' state if the data given by the user is not valid.\n     */\n    @Prop({reflect: true}) state: 'initial' | 'error' = 'initial';\n\n    /**\n     * Works with the min and max attributes to limit the increments at which a value can be set.\n     * Possible values are: `\"any\"` or a positive floating point number.\n     */\n    @Prop() step?: string;\n\n    /**\n     * The type of control to display. The default type is text.\n     */\n    @Prop() type: TextFieldTypes = 'text';\n\n    /**\n     * The value of the input.\n     */\n    @Prop({mutable: true}) value?: string | number | null = '';\n\n    /**\n     * Emitted when a keyboard input occurred.\n     */\n    @Event() wcsInput!: EventEmitter<KeyboardEvent>;\n\n    /**\n     * Emitted when the value has changed.\n     */\n    @Event() wcsChange!: EventEmitter<InputChangeEventDetail>;\n\n    /**\n     * Emitted when the input loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the input has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    /**\n     * Update the native input element when the value changes\n     */\n    @Watch('value')\n    protected valueChanged() {\n        this.wcsChange.emit({value: this.value?.toString()});\n    }\n\n    componentWillLoad() {\n        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);\n\n        if (!isWcsInputSize(this.size)) {\n            console.error(`Invalid size value for wcs-input : \"${this.size}\". Must be one of \"${WcsInputSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n    }\n\n    connectedCallback() {\n        this.debounceChanged();\n        if (Build.isBrowser) {\n            document.dispatchEvent(new CustomEvent('wcsInputDidLoad', {\n                detail: this.el\n            }));\n        }\n    }\n\n    disconnectedCallback() {\n        if (Build.isBrowser) {\n            document.dispatchEvent(new CustomEvent('wcsInputDidUnload', {\n                detail: this.el\n            }));\n        }\n    }\n\n    /**\n     * @deprecated use the native focus method instead  \n     * Sets focus on the native `input` in `wcs-input`.\n     */\n    @Method()\n    async setFocus() {\n        if (this.nativeInput) {\n            this.nativeInput.focus();\n        }\n    }\n\n    /**\n     * Sets blur on the native `input` in `wcs-input`. Use this method instead of the global\n     * `input.blur()`.\n     * @internal\n     */\n    @Method()\n    async setBlur() {\n        if (this.nativeInput) {\n            this.nativeInput.blur();\n        }\n    }\n\n    /**\n     * Returns the native `<input>` element used under the hood.\n     */\n    @Method()\n    getInputElement(): Promise<HTMLInputElement> {\n        return Promise.resolve(this.nativeInput!);\n    }\n\n    private shouldClearOnEdit() {\n        const {type, clearOnEdit} = this;\n        return (clearOnEdit === undefined)\n            ? type === 'password'\n            : clearOnEdit;\n    }\n\n    private getValue(): string {\n        return typeof this.value === 'number' ? this.value.toString() :\n            (this.value || '').toString();\n    }\n\n    private onInput = (ev: Event) => {\n        const input = ev.target as HTMLInputElement | null;\n        if (input) {\n            this.value = input.value || '';\n        }\n        this.wcsInput.emit(ev as KeyboardEvent);\n    }\n\n    private onBlur = (ev: FocusEvent) => {\n        this.hasFocus = false;\n        this.focusChanged();\n\n        if (this.fireFocusEvents) {\n            this.wcsBlur.emit(ev);\n        }\n    }\n\n    private onFocus = (ev: FocusEvent) => {\n        this.hasFocus = true;\n        this.focusChanged();\n\n        if (this.fireFocusEvents) {\n            this.wcsFocus.emit(ev);\n        }\n    }\n\n    private onKeydown = (ev: KeyboardEvent) => {\n        if (this.shouldClearOnEdit()) {\n            // Did the input value change after it was blurred and edited?\n            // Do not clear if user is hitting Enter to submit form\n            if (this.didBlurAfterEdit && this.hasValue() && ev.key !== 'Enter') {\n                // Clear the input\n                this.clearTextInput();\n            }\n\n            // Reset the flag\n            this.didBlurAfterEdit = false;\n        }\n    }\n\n    private clearTextInput = (ev?: Event) => {\n        if (this.clearInput && !this.readonly && !this.disabled && ev) {\n            ev.preventDefault();\n            ev.stopPropagation();\n\n            // Attempt to focus input again after pressing clear button\n            this.setFocus();\n        }\n\n        this.value = '';\n\n        /**\n         * This is needed for clearOnEdit\n         * Otherwise the value will not be cleared\n         * if user is inside the input\n         */\n        if (this.nativeInput) {\n            this.nativeInput.value = '';\n        }\n    }\n\n    private focusChanged() {\n        // If clearOnEdit is enabled and the input blurred but has a value, set a flag\n        if (!this.hasFocus && this.shouldClearOnEdit() && this.hasValue()) {\n            this.didBlurAfterEdit = true;\n        }\n    }\n\n    private hasValue(): boolean {\n        return this.getValue().length > 0;\n    }\n\n    private passwordRevealIconClick(): void {\n        this.passwordReveal = !this.passwordReveal;\n    }\n\n    @Watch('passwordReveal')\n    onPasswordRevealChange(): void {\n        this.iconPassword = this.passwordReveal ? 'visibility_off' : 'visibility';\n    }\n\n    render() {\n        const value = this.getValue();\n        const labelId = this.inputId + '-lbl';\n        const label = findItemLabel(this.el);\n        if (label) {\n            label.id = labelId;\n        }\n\n        return (\n            <Host\n                aria-disabled={this.disabled ? 'true' : null}\n                data-has-prefix={!!this.prefixLabel}\n                data-has-suffix={!!this.suffixLabel}\n            >\n                {this.prefixLabel ? (<span class=\"prefix\" part=\"prefix\">{this.prefixLabel}</span>) : null}\n                {this.icon ? (<wcs-mat-icon icon={this.icon} size=\"m\"></wcs-mat-icon>) : null}\n                <input\n                    class=\"native-input\"\n                    ref={input => this.nativeInput = input}\n                    aria-labelledby={label ? labelId : null}\n                    disabled={this.disabled}\n                    accept={this.accept}\n                    autoCapitalize={this.autocapitalize}\n                    autoComplete={this.autocomplete}\n                    autoCorrect={this.autocorrect}\n                    autoFocus={this.autofocus}\n                    enterKeyHint={this.enterkeyhint}\n                    inputMode={this.inputmode}\n                    min={this.min}\n                    max={this.max}\n                    minLength={this.minlength}\n                    maxLength={this.maxlength}\n                    multiple={this.multiple}\n                    name={this.name}\n                    pattern={this.pattern}\n                    placeholder={this.placeholder || ''}\n                    readOnly={this.readonly}\n                    required={this.required}\n                    spellcheck={this.spellcheck}\n                    step={this.step}\n                    type={this.passwordReveal ? 'text' : this.type}\n                    value={value}\n                    onInput={this.onInput}\n                    onBlur={this.onBlur}\n                    onFocus={this.onFocus}\n                    onKeyDown={this.onKeydown}\n                    {...this.inheritedAttributes}\n                />\n                {this.type === \"password\" ? (<wcs-mat-icon class=\"toggle_password\" icon={this.iconPassword} size=\"m\"  onClick={() => this.passwordRevealIconClick()}></wcs-mat-icon>) : null}\n                {this.suffixLabel ? (<span class=\"suffix\" part=\"suffix\">{this.suffixLabel}</span>) : null}\n            </Host>\n        );\n    }\n}\n\nlet inputIds = 0;\n"],"version":3}

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

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ca67a6dc.js');
+const accessibility = require('./accessibility-e99b032d.js');
+const helpers = require('./helpers-4a14051a.js');
 
 const modalCss = "wcs-modal{z-index:999;position:fixed;top:0;bottom:0;left:0;right:0;display:none;background:rgba(0, 0, 0, 0.4)}wcs-modal[show]{display:flex;height:100vh;width:100vw;align-items:center;justify-content:center}wcs-modal[without-backdrop]{background-color:unset}wcs-modal[without-backdrop] .wcs-modal-container{border:solid 1px var(--wcs-text-light)}.wcs-modal-container{max-height:var(--wcs-modal-max-height, 80%);background-color:#fff;display:grid;grid-template-columns:100%;grid-template-rows:auto 1fr auto;box-sizing:border-box;pointer-events:auto;background-clip:padding-box;border:0 solid rgba(0, 0, 0, 0.2);border-radius:0.4375rem;z-index:20000;padding:1.375rem 1.875rem 1.875rem 1.875rem}.wcs-modal-container[data-size=s]{width:288px}.wcs-modal-container[data-size=m]{width:480px}.wcs-modal-container[data-size=l]{width:864px}.wcs-modal-container[data-size=xl]{width:1200px}.wcs-modal-header{margin-bottom:8px;display:flex;align-items:center;justify-content:space-between}.wcs-modal-header h5{font-size:24px;font-weight:400;margin:0}.wcs-modal-content{font-weight:400;font-size:16px;overflow-y:auto}.wcs-modal-actions{margin-top:20px;display:flex;justify-content:flex-end}";
 
@@ -10,28 +12,88 @@ const Modal = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.wcsDialogClosed = index.createEvent(this, "wcsDialogClosed", 7);
+    /**
+     * Give an unique id
+     * @private
+     */
+    this.modalId = modalIds++;
+    /**
+     * This attribute is used to determine whether the show attribute has changed since the last rendering.
+     * This allows us to call the focus method on the first element of the modal when the show attribute changes to true.
+     * This call is made in the componentDidRender method
+     * @private
+     */
+    this.showAttributeChangedMarker = false;
     this.withoutBackdrop = false;
     this.show = false;
     this.showCloseButton = false;
     this.size = 'm';
     this.hideActions = false;
   }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: "wcs-modal-container", "data-size": this.size }, index.h("div", { class: "wcs-modal-header" }, index.h("h5", null, index.h("slot", { name: "header" })), this.showCloseButton && (index.h("wcs-button", { shape: "round", mode: "clear", class: "wcs-dark", onClick: ($event) => this.onCloseButtonClick($event) }, index.h("wcs-mat-icon", { icon: "close" })))), index.h("div", { class: "wcs-modal-content" }, index.h("slot", null)), !this.hideActions && (index.h("div", { class: "wcs-modal-actions" }, index.h("slot", { name: "actions" }))))));
+  componentDidLoad() {
+    this.updateFocusableElements();
+  }
+  componentDidRender() {
+    var _a;
+    this.updateFocusableElements();
+    if (this.showAttributeChangedMarker) {
+      this.showAttributeChangedMarker = false;
+      (_a = this.firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+  }
+  onShowChange() {
+    if (this.show) {
+      this.showAttributeChangedMarker = true;
+    }
+  }
+  updateFocusableElements() {
+    const focusableElements = Array.from(this.el.querySelectorAll('*'))
+      .filter(element => accessibility.isFocusable(element));
+    this.firstFocusableElement = focusableElements.length > 0 && focusableElements[0];
+    this.lastFocusableElement = focusableElements.length > 0 && focusableElements[focusableElements.length - 1];
+  }
+  close() {
+    // If the modal isn't shown, we don't do anything
+    if (this.show) {
+      this.show = false;
+      this.wcsDialogClosed.emit();
+    }
   }
   onKeyDown(event) {
-    if (this.showCloseButton && event.key === 'Escape') {
+    if (this.show && this.showCloseButton && event.key === 'Escape') {
       this.close();
     }
+    if (this.show) {
+      const firstElement = this.firstFocusableElement;
+      const lastElement = this.lastFocusableElement;
+      if (helpers.isTabKey(event)) {
+        if (event.shiftKey && accessibility.isElementFocused(firstElement)) {
+          event.preventDefault();
+          lastElement.focus();
+        }
+        else if (!event.shiftKey && accessibility.isElementFocused(lastElement)) {
+          event.preventDefault();
+          firstElement.focus();
+        }
+      }
+    }
   }
   onCloseButtonClick(_) {
     this.close();
   }
-  close() {
-    this.show = false;
-    this.wcsDialogClosed.emit();
+  handleSlotContentChange() {
+    this.updateFocusableElements();
+  }
+  render() {
+    const modalTitleId = `wcs-modal-title-${this.modalId}`;
+    return (index.h(index.Host, null, index.h("div", { class: "wcs-modal-container", "data-size": this.size, "aria-modal": true, role: "dialog", "aria-labelledby": modalTitleId }, index.h("div", { class: "wcs-modal-header" }, index.h("h5", { id: modalTitleId }, index.h("slot", { name: "header" })), this.showCloseButton && (index.h("wcs-button", { shape: "round", mode: "clear", class: "wcs-dark", onClick: ($event) => this.onCloseButtonClick($event) }, index.h("wcs-mat-icon", { icon: "close" })))), index.h("div", { class: "wcs-modal-content" }, index.h("slot", { onSlotchange: () => this.handleSlotContentChange() })), !this.hideActions && (index.h("div", { class: "wcs-modal-actions" }, index.h("slot", { name: "actions" }))))));
   }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "show": ["onShowChange"]
+  }; }
 };
+let modalIds = 0;
 Modal.style = modalCss;
 
 exports.wcs_modal = Modal;

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

@@ -1 +1 @@
-{"file":"wcs-modal.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,ypCAAypC;;MCQ7pC,KAAK;;;;2BAIoC,KAAK;gBAKhB,KAAK;2BAWM,KAAK;gBAM7B,GAAG;uBAKiB,KAAK;;EAEnD,MAAM;IACF,QACIA,QAACC,UAAI,QACDD,iBAAK,KAAK,EAAC,qBAAqB,eAAY,IAAI,CAAC,IAAI,IACjDA,iBAAK,KAAK,EAAC,kBAAkB,IACzBA,oBACIA,kBAAM,IAAI,EAAC,QAAQ,GAAQ,CAC1B,EACJ,IAAI,CAAC,eAAe,KACjBA,wBAAY,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,UAAU,EAC3C,OAAO,EAAE,CAAC,MAAM,KAAK,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC,IAC5DA,0BAAc,IAAI,EAAC,OAAO,GAAgB,CACjC,CAAC,CAGhB,EACNA,iBAAK,KAAK,EAAC,mBAAmB,IAC1BA,qBAAa,CACX,EACL,CAAC,IAAI,CAAC,WAAW,KACdA,iBAAK,KAAK,EAAC,mBAAmB,IAC1BA,kBAAM,IAAI,EAAC,SAAS,GAAQ,CAC1B,CAAC,CAET,CACH,EACT;GACL;EAIO,SAAS,CAAC,KAAoB;IAClC,IAAI,IAAI,CAAC,eAAe,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;MAChD,IAAI,CAAC,KAAK,EAAE,CAAC;KAChB;GACJ;EAEO,kBAAkB,CAAC,CAAa;IACpC,IAAI,CAAC,KAAK,EAAE,CAAC;GAChB;EAEO,KAAK;IACT,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IAClB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;GAC/B;;;;;;","names":["h","Host"],"sources":["./src/components/modal/modal.scss?tag=wcs-modal","./src/components/modal/modal.tsx"],"sourcesContent":["wcs-modal {\n    z-index: 999;\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    display: none;\n    background: rgba(0, 0, 0, 0.4);\n}\n\nwcs-modal[show] {\n    display: flex;\n    height: 100vh;\n    width: 100vw;\n    align-items: center;\n    justify-content: center;\n}\n\n/**\nBackdrop\n */\nwcs-modal[without-backdrop] {\n    background-color: unset;\n\n    .wcs-modal-container {\n        border: solid 1px var(--wcs-text-light);\n    }\n}\n\n/**\nModal window\n */\n.wcs-modal-container {\n    max-height: var(--wcs-modal-max-height, 80%);\n    background-color: #fff;\n    display: grid;\n    grid-template-columns: 100%;\n    grid-template-rows: auto 1fr auto;\n    box-sizing: border-box;\n    pointer-events: auto;\n    background-clip: padding-box;\n    border: 0 solid rgba(0, 0, 0, 0.2);\n    border-radius: 0.4375rem;\n    z-index: 20000;\n    padding: 1.375rem 1.875rem 1.875rem 1.875rem;\n}\n\n.wcs-modal-container[data-size=s] {\n    width: 288px;\n}\n\n.wcs-modal-container[data-size=m] {\n    width: 480px;\n}\n\n.wcs-modal-container[data-size=l] {\n    width: 864px;\n}\n\n.wcs-modal-container[data-size=xl] {\n    width: 1200px;\n}\n\n.wcs-modal-header {\n    h5 {\n        font-size: 24px;\n        font-weight: 400;\n        margin: 0;\n    }\n\n    margin-bottom: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.wcs-modal-content {\n    font-weight: 400;\n    font-size: 16px;\n    overflow-y: auto;\n}\n\n.wcs-modal-actions {\n    margin-top: 20px;\n    display: flex;\n    justify-content: flex-end;\n}\n","import { Component, Event, EventEmitter, h, Host, Listen, Prop } from '@stencil/core';\nimport { ModalSize } from './modal-interface';\n\n@Component({\n    tag: 'wcs-modal',\n    styleUrl: 'modal.scss',\n    shadow: false,\n})\nexport class Modal {\n    /**\n     * Specifies whether the component should display a backdrop on the entire page\n     */\n    @Prop({reflect: true}) withoutBackdrop: boolean = false;\n\n    /**\n     * Displays the modal\n     */\n    @Prop({reflect: true}) show: boolean = false;\n\n    /**\n     * Triggered when the user leaves the dialog with the closing button.\n     */\n    @Event() wcsDialogClosed: EventEmitter<void>;\n\n    /**\n     * Specifies whether the component should display a close button.\n     * if false, it won't close the modal when the escape key is pressed.\n     */\n    @Prop({reflect: true}) showCloseButton: boolean = false;\n\n    /**\n     * There are multiple sizes for modals. The default size is medium (m), however other sizes are available. Select the\n     * size best suited for the content and screen size displaying the modal. Remember to test responsiveness.\n     */\n    @Prop() size: ModalSize = 'm';\n\n    /**\n     * Specifies whether the component should hide the actions slot or not\n     */\n    @Prop({reflect: true}) hideActions: boolean = false;\n\n    render() {\n        return (\n            <Host>\n                <div class=\"wcs-modal-container\" data-size={this.size}>\n                    <div class=\"wcs-modal-header\">\n                        <h5>\n                            <slot name=\"header\"></slot>\n                        </h5>\n                        {this.showCloseButton && (\n                            <wcs-button shape=\"round\" mode=\"clear\" class=\"wcs-dark\"\n                                        onClick={($event) => this.onCloseButtonClick($event)}>\n                                <wcs-mat-icon icon=\"close\"></wcs-mat-icon>\n                            </wcs-button>)\n                        }\n\n                    </div>\n                    <div class=\"wcs-modal-content\">\n                        <slot></slot>\n                    </div>\n                    {!this.hideActions && (\n                        <div class=\"wcs-modal-actions\">\n                            <slot name=\"actions\"></slot>\n                        </div>)\n                    }\n                </div>\n            </Host>\n        );\n    }\n\n    @Listen('keydown', {target: 'document'})\n    // @ts-ignore\n    private onKeyDown(event: KeyboardEvent) {\n        if (this.showCloseButton && event.key === 'Escape') {\n            this.close();\n        }\n    }\n\n    private onCloseButtonClick(_: MouseEvent) {\n        this.close();\n    }\n\n    private close() {\n        this.show = false;\n        this.wcsDialogClosed.emit();\n    }\n}\n"],"version":3}
+{"file":"wcs-modal.entry.cjs.js","mappings":"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","names":["isFocusable","isTabKey","isElementFocused","h","Host"],"sources":["./src/components/modal/modal.scss?tag=wcs-modal","./src/components/modal/modal.tsx"],"sourcesContent":["wcs-modal {\n    z-index: 999;\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    display: none;\n    background: rgba(0, 0, 0, 0.4);\n}\n\nwcs-modal[show] {\n    display: flex;\n    height: 100vh;\n    width: 100vw;\n    align-items: center;\n    justify-content: center;\n}\n\n/**\nBackdrop\n */\nwcs-modal[without-backdrop] {\n    background-color: unset;\n\n    .wcs-modal-container {\n        border: solid 1px var(--wcs-text-light);\n    }\n}\n\n/**\nModal window\n */\n.wcs-modal-container {\n    max-height: var(--wcs-modal-max-height, 80%);\n    background-color: #fff;\n    display: grid;\n    grid-template-columns: 100%;\n    grid-template-rows: auto 1fr auto;\n    box-sizing: border-box;\n    pointer-events: auto;\n    background-clip: padding-box;\n    border: 0 solid rgba(0, 0, 0, 0.2);\n    border-radius: 0.4375rem;\n    z-index: 20000;\n    padding: 1.375rem 1.875rem 1.875rem 1.875rem;\n}\n\n.wcs-modal-container[data-size=s] {\n    width: 288px;\n}\n\n.wcs-modal-container[data-size=m] {\n    width: 480px;\n}\n\n.wcs-modal-container[data-size=l] {\n    width: 864px;\n}\n\n.wcs-modal-container[data-size=xl] {\n    width: 1200px;\n}\n\n.wcs-modal-header {\n    h5 {\n        font-size: 24px;\n        font-weight: 400;\n        margin: 0;\n    }\n\n    margin-bottom: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.wcs-modal-content {\n    font-weight: 400;\n    font-size: 16px;\n    overflow-y: auto;\n}\n\n.wcs-modal-actions {\n    margin-top: 20px;\n    display: flex;\n    justify-content: flex-end;\n}\n","import {\n    Element,\n    Component,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Prop,\n    ComponentInterface, \n    Watch\n} from '@stencil/core';\nimport { ModalSize } from './modal-interface';\nimport { isElementFocused, isFocusable } from \"../../utils/accessibility\";\nimport { isTabKey } from \"../../utils/helpers\";\n\n@Component({\n    tag: 'wcs-modal',\n    styleUrl: 'modal.scss',\n    shadow: false,\n})\nexport class Modal implements ComponentInterface {\n    @Element() el: HTMLElement;\n\n    /**\n     * Specifies whether the component should display a backdrop on the entire page\n     */\n    @Prop({reflect: true}) withoutBackdrop: boolean = false;\n\n    /**\n     * Displays the modal\n     */\n    @Prop({reflect: true}) show: boolean = false;\n\n    /**\n     * Triggered when the user leaves the dialog with the closing button.\n     */\n    @Event() wcsDialogClosed: EventEmitter<void>;\n\n    /**\n     * Specifies whether the component should display a close button.\n     * if false, it won't close the modal when the escape key is pressed.\n     */\n    @Prop({reflect: true}) showCloseButton: boolean = false;\n\n    /**\n     * There are multiple sizes for modals. The default size is medium (m), however other sizes are available. Select the\n     * size best suited for the content and screen size displaying the modal. Remember to test responsiveness.\n     */\n    @Prop() size: ModalSize = 'm';\n\n    /**\n     * Specifies whether the component should hide the actions slot or not\n     */\n    @Prop({reflect: true}) hideActions: boolean = false;\n\n    /**\n     * Give an unique id\n     * @private\n     */\n    private modalId: number = modalIds++;\n\n    private firstFocusableElement: HTMLElement;\n    private lastFocusableElement: HTMLElement;\n    /**\n     * This attribute is used to determine whether the show attribute has changed since the last rendering. \n     * This allows us to call the focus method on the first element of the modal when the show attribute changes to true. \n     * This call is made in the componentDidRender method\n     * @private\n     */\n    private showAttributeChangedMarker: boolean = false;\n\n    componentDidLoad() {\n        this.updateFocusableElements();\n    }\n\n    componentDidRender() {\n        this.updateFocusableElements();\n        if (this.showAttributeChangedMarker) {\n            this.showAttributeChangedMarker = false;\n            this.firstFocusableElement?.focus();\n        }\n    }\n    \n    @Watch(\"show\")\n    onShowChange() {\n        if(this.show) {\n            this.showAttributeChangedMarker = true;\n        }\n    }\n\n    private updateFocusableElements() {\n        const focusableElements = Array.from(this.el.querySelectorAll('*'))\n            .filter(element => isFocusable(element));\n\n        this.firstFocusableElement = focusableElements.length > 0 && focusableElements[0] as HTMLElement;\n        this.lastFocusableElement = focusableElements.length > 0 && focusableElements[focusableElements.length - 1] as HTMLElement;\n    }\n    \n    private close() {\n        // If the modal isn't shown, we don't do anything\n        if (this.show) {\n            this.show = false;\n            this.wcsDialogClosed.emit();\n        }\n    }\n\n    @Listen('keydown', {target: 'document'})\n    onKeyDown(event: KeyboardEvent) {\n        if (this.show && this.showCloseButton && event.key === 'Escape') {\n            this.close();\n        }\n\n        if (this.show) {\n            const firstElement = this.firstFocusableElement;\n            const lastElement = this.lastFocusableElement;\n\n            if (isTabKey(event)) {\n                if (event.shiftKey && isElementFocused(firstElement)) {\n                    event.preventDefault();\n                    lastElement.focus();\n                } else if (!event.shiftKey && isElementFocused(lastElement)) {\n                    event.preventDefault();\n                    firstElement.focus();\n                }\n            }\n        }\n    }\n\n    private onCloseButtonClick(_: MouseEvent) {\n        this.close();\n    }\n\n    private handleSlotContentChange() {\n        this.updateFocusableElements();\n    }\n\n    render() {\n        const modalTitleId = `wcs-modal-title-${this.modalId}`;\n        return (\n            <Host>\n                <div class=\"wcs-modal-container\"\n                     data-size={this.size}\n                     aria-modal={true}\n                     role={\"dialog\"}\n                     aria-labelledby={modalTitleId}\n                >\n                    <div class=\"wcs-modal-header\">\n                        <h5 id={modalTitleId}>\n                            <slot name=\"header\"></slot>\n                        </h5>\n                        {this.showCloseButton && (\n                            <wcs-button shape=\"round\" mode=\"clear\" class=\"wcs-dark\"\n                                        onClick={($event) => this.onCloseButtonClick($event)}>\n                                <wcs-mat-icon icon=\"close\"></wcs-mat-icon>\n                            </wcs-button>)\n                        }\n\n                    </div>\n                    <div class=\"wcs-modal-content\">\n                        <slot onSlotchange={() => this.handleSlotContentChange()}></slot>\n                    </div>\n                    {!this.hideActions && (\n                        <div class=\"wcs-modal-actions\">\n                            <slot name=\"actions\"></slot>\n                        </div>)\n                    }\n                </div>\n            </Host>\n        );\n    }\n}\n\nlet modalIds = 0;\n"],"version":3}

package/dist/cjs/wcs-native-select.cjs.entry.js

@@ -31,11 +31,20 @@ const NativeSelect = class {
       if (hasSpiedAttrMutation) {
         this.updateHostAttributeWithSlottedSelect();
       }
+      // A workaround to detect when the select is reset by using a class change on the select element. For example
+      // angular add/remove ng-pristine and ng-dirty classes on the form controls when the form is reset.
+      // Not the best solution but it works since we cannot detect the reset event on the native select element.
+      if (mutations.filter(m => m.attributeName === 'class').length > 0) {
+        this._updateStyles();
+      }
     });
     this.updateHostAttributeWithSlottedSelect();
     this.observer.observe(this.selectElement, { attributes: true });
   }
   onSelectedOptionChange() {
+    this._updateStyles();
+  }
+  _updateStyles() {
     if (this.isPlaceholderOptionSelected()) {
       this.applyPlaceholderStylesOnNativeSlottedSelectElement();
     }
@@ -90,6 +99,16 @@ const NativeSelect = class {
       this.onSelectedOptionChange();
     });
   }
+  /**
+   * Use this method to force the component to update its styles. It can be useful when the select is reset (with a placeholder).
+   */
+  async updateStyles() {
+    // Note : we try to automatically detect if the select is reset with the onreset event and with a mutation
+    // observer on the select element. But it seems that the onreset event is not fired when the select is reset.
+    // and the mutation observer is not fired when the select is reset with the reset() method on the form.
+    // So we have to let the user call this method manually when he reset the select.
+    this._updateStyles();
+  }
   render() {
     return (index.h(index.Host, { class: `${this.expanded ? 'expanded' : ''}`, "data-disabled": this.disabled, "data-size": this.size }, index.h("div", { class: "select-wrapper" }, index.h("slot", null), index.h("div", { class: "arrow-container" }, index.h(selectArrow.SelectArrow, { up: this.expanded })))));
   }

package/dist/cjs/wcs-native-select.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-native-select.entry.cjs.js","mappings":"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","names":["h","Host","SelectArrow"],"sources":["./src/components/native-select/native-select.scss?tag=wcs-native-select&encapsulation=shadow","./src/components/native-select/native-select.component.tsx"],"sourcesContent":["// TODO: voir pour mettre en commun avec le style du composant personnalisée\n@import '../../style/focus-outline.scss';\n\n:host {\n    box-sizing: border-box;\n}\n\n::slotted(select) {\n    box-sizing: border-box;\n    -moz-appearance:none !important;\n    -webkit-appearance: none !important;\n    appearance: none !important;\n\n    --wcs-select-native-ligther-percentage: 40;\n    --wcs-select-native-border-radius: var(--wcs-border-radius);\n    --wcs-select-native-background-color: var(--wcs-light);\n    --wcs-select-native-placeholder-color: var(--wcs-text-medium);\n    --wcs-select-native-value-color: var(--wcs-primary);\n    --wcs-select-native-border-color: transparent;\n    --wcs-select-native-overlay-max-height: 360px;\n    --wcs-select-native-border-width: 2px;\n\n    background-color: var(--wcs-select-native-background-color);\n\n    color: var(--wcs-select-native-color);\n\n    border-radius: var(--wcs-border-radius);\n    border: none;\n\n    outline: none;\n    user-select: none;\n    cursor: pointer;\n    line-height: 1.5;\n    font-size: 1rem;\n\n    max-width: 100%;\n    flex-grow: 1;\n    padding-right: calc((var(--wcs-base-margin) * 2) + 24px);\n    padding-left: calc(var(--wcs-base-margin) * 2);\n}\n\n::slotted(select:disabled) {\n    cursor: not-allowed;\n    color: var(--wcs-text-disabled);\n}\n\n:host([data-disabled]) {\n    .select-wrapper {\n        .arrow-container {\n            .arrow {\n                fill: var(--wcs-text-medium);\n            }\n        }\n    }\n}\n\n:host([data-size=m])  {\n    ::slotted(select) {\n        height: var(--wcs-size-m);\n    }\n}\n\n:host([data-size=l]) {\n    ::slotted(select) {\n        height: var(--wcs-size-l);\n    }\n}\n\n::slotted(select:focus) {\n    background-clip: padding-box;\n    box-shadow: inset 0 0 0 var(--wcs-select-native-border-width) var(--wcs-primary);\n    background-color: var(--wcs-white);\n}\n\n.select-wrapper {\n    position: relative;\n\n    display: flex;\n    flex-wrap: nowrap;\n}\n\n// So the arrow on the right doesn't shrink when text overflows.\nsvg {\n    flex-shrink: 0;\n}\n\n.arrow {\n    fill: var(--wcs-primary);\n}\n\n.arrow-container {\n    pointer-events: none;\n    display: flex;\n    align-items: center;\n    vertical-align: center;\n\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: calc(var(--wcs-padding) - 1px);\n    margin: auto 0;\n}\n","import { Component, h, ComponentInterface, State, Prop, Host, Element } from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport { WcsSize } from \"../../shared-types\";\n\nexport type WcsNativeSelectSize = Extract<WcsSize, 'l' | 'm'>; // todo: move into common file with custom select\n\n\n\n/**\n * The `wcs-native-select` component is designed to accept a native <select> element as a slotted child. This choice\n * allows developers to bind the <select> element using the framework of their choice, without the need to re-expose all the\n * properties of the <select> and <option> elements in this component.\n *\n * The component wraps the native <select> element and provides custom styles and behavior, while preserving the native\n * functionality and accessibility.\n *\n * Example usage:\n *\n * <wcs-native-select>\n *   <select>\n *     <option value=\"option1\">Option 1</option>\n *     <option value=\"option2\">Option 2</option>\n *     <option value=\"option3\">Option 3</option>\n *   </select>\n * </wcs-native-select>\n */\n@Component({\n    tag: 'wcs-native-select',\n    styleUrl: 'native-select.scss',\n    shadow: true\n})\nexport class NativeSelect implements ComponentInterface {\n    /**\n     * The `size` property controls the size of the slotted `select` element by adjusting its padding.\n     * There are two possible size options:\n     * - 'm': medium size\n     * - 'l': large size\n     *\n     * The default value is 'm'.\n     */\n    @Prop({ reflect: true }) size: WcsNativeSelectSize = 'm';\n\n    @Element() private el!: HTMLWcsNativeSelectElement;\n\n    @State() private expanded: boolean = false;\n    @State() private disabled: boolean;\n\n    private selectElement: HTMLSelectElement;\n    private observer: MutationObserver;\n\n\n    private readonly SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST = ['disabled'];\n\n    componentWillLoad() {\n        this.selectElement = this.el.querySelector('select');\n        if (!this.selectElement) throw new Error(\"wcs-native-select must be used with a native slotted select, please refer to the documentation.\");\n\n        this.onSelectedOptionChange();\n\n        /**\n         * We use an event listener to apply the default style to the select when user chose an active option\n         */\n        this.selectElement.addEventListener('change', () => {\n            this.onSelectedOptionChange();\n        });\n\n        this.observer = new MutationObserver(mutations => {\n            const hasSpiedAttrMutation = mutations.filter(m => this.SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST.includes(m.attributeName)).length > 0;\n            if (hasSpiedAttrMutation) {\n                this.updateHostAttributeWithSlottedSelect();\n            }\n        });\n        this.updateHostAttributeWithSlottedSelect();\n        this.observer.observe(this.selectElement, {attributes: true});\n    }\n\n    private onSelectedOptionChange(): void {\n        if (this.isPlaceholderOptionSelected()) {\n            this.applyPlaceholderStylesOnNativeSlottedSelectElement();\n        } else {\n            this.applySelectedOptionStylesOnNativeSlottedSelectElement();\n        }\n    }\n\n    private isPlaceholderOptionSelected() {\n        return Array.from(this.selectElement.options).filter(o => o.selected)[0]?.disabled == true;\n    }\n\n    /**\n     * This method should always unset all styles modified by the `applyPlaceholderStylesOnNativeSlottedSelectElement()`\n     * @private\n     */\n    private applySelectedOptionStylesOnNativeSlottedSelectElement() {\n        this.selectElement.style.color = \"var(--wcs-primary)\";\n        this.selectElement.style.fontStyle = 'normal';\n        this.selectElement.style.fontWeight = '500';\n        Array.from(this.selectElement.options).forEach(option => {\n            option.style.fontStyle = 'normal';\n            if (!option.disabled) {\n                option.style.color = \"black\";\n            }\n        });\n    }\n\n    /**\n     * This method apply styles when the placeholder is shown.\n     *\n     * We use javascript because we cannot achieve that behaviour in pure css when the native select is not required\n     * @private\n     */\n    private applyPlaceholderStylesOnNativeSlottedSelectElement() {\n        this.selectElement.style.color = \"var(--wcs-text-medium)\";\n        this.selectElement.style.fontWeight = '400';\n        this.selectElement.style.fontStyle = 'italic';\n        Array.from(this.selectElement.options).forEach(option => {\n            option.style.fontStyle = 'normal';\n            if (!option.disabled) {\n                option.style.color = \"black\";\n            }\n        });\n    }\n\n    private updateHostAttributeWithSlottedSelect() {\n        this.disabled = this.selectElement?.hasAttribute('disabled');\n    }\n\n    disconnectedCallback() {\n        this.observer?.disconnect();\n        this.selectElement?.removeEventListener(\"change\", () => {\n            this.onSelectedOptionChange();\n        });\n    }\n\n    render() {\n        return (\n            <Host class={`${this.expanded ? 'expanded' : ''}`} data-disabled={this.disabled} data-size={this.size}>\n                <div class=\"select-wrapper\">\n                    <slot></slot>\n                    <div class=\"arrow-container\">\n                        <SelectArrow up={this.expanded}></SelectArrow>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"wcs-native-select.entry.cjs.js","mappings":"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","names":["h","Host","SelectArrow"],"sources":["./src/components/native-select/native-select.scss?tag=wcs-native-select&encapsulation=shadow","./src/components/native-select/native-select.tsx"],"sourcesContent":["// TODO: voir pour mettre en commun avec le style du composant personnalisée\n@import '../../style/focus-outline.scss';\n\n:host {\n    box-sizing: border-box;\n}\n\n::slotted(select) {\n    box-sizing: border-box;\n    -moz-appearance:none !important;\n    -webkit-appearance: none !important;\n    appearance: none !important;\n\n    --wcs-select-native-ligther-percentage: 40;\n    --wcs-select-native-border-radius: var(--wcs-border-radius);\n    --wcs-select-native-background-color: var(--wcs-light);\n    --wcs-select-native-placeholder-color: var(--wcs-text-medium);\n    --wcs-select-native-value-color: var(--wcs-primary);\n    --wcs-select-native-border-color: transparent;\n    --wcs-select-native-overlay-max-height: 360px;\n    --wcs-select-native-border-width: 2px;\n\n    background-color: var(--wcs-select-native-background-color);\n\n    color: var(--wcs-select-native-color);\n\n    border-radius: var(--wcs-border-radius);\n    border: none;\n\n    outline: none;\n    user-select: none;\n    cursor: pointer;\n    line-height: 1.5;\n    font-size: 1rem;\n\n    max-width: 100%;\n    flex-grow: 1;\n    padding-right: calc((var(--wcs-base-margin) * 2) + 24px);\n    padding-left: calc(var(--wcs-base-margin) * 2);\n}\n\n::slotted(select:disabled) {\n    cursor: not-allowed;\n    color: var(--wcs-text-disabled);\n}\n\n:host([data-disabled]) {\n    .select-wrapper {\n        .arrow-container {\n            .arrow {\n                fill: var(--wcs-text-medium);\n            }\n        }\n    }\n}\n\n:host([data-size=m])  {\n    ::slotted(select) {\n        height: var(--wcs-size-m);\n    }\n}\n\n:host([data-size=l]) {\n    ::slotted(select) {\n        height: var(--wcs-size-l);\n    }\n}\n\n::slotted(select:focus) {\n    background-clip: padding-box;\n    box-shadow: inset 0 0 0 var(--wcs-select-native-border-width) var(--wcs-primary);\n    background-color: var(--wcs-white);\n}\n\n.select-wrapper {\n    position: relative;\n\n    display: flex;\n    flex-wrap: nowrap;\n}\n\n// So the arrow on the right doesn't shrink when text overflows.\nsvg {\n    flex-shrink: 0;\n}\n\n.arrow {\n    fill: var(--wcs-primary);\n}\n\n.arrow-container {\n    pointer-events: none;\n    display: flex;\n    align-items: center;\n    vertical-align: center;\n\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: calc(var(--wcs-padding) - 1px);\n    margin: auto 0;\n}\n","import { Component, h, ComponentInterface, State, Prop, Host, Element, Method } from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport { WcsSize } from \"../../shared-types\";\n\nexport type WcsNativeSelectSize = Extract<WcsSize, 'l' | 'm'>; // todo: move into common file with custom select\n\n/**\n * The `wcs-native-select` component is designed to accept a native `<select>` element as a slotted child. This choice\n * allows developers to bind the `<select>` element using the framework of their choice, without the need to re-expose all the\n * properties of the `<select>` and `<option>` elements in this component.\n *\n * The component wraps the native `<select>` element and provides custom styles and behavior, while preserving the native\n * functionality and accessibility.\n *\n * ### ✅ Guidance\n *\n * - To have a placeholder, you must have an option as child which has `selected` attribute and `disabled`\n * attribute. You can add the `hidden` attribute to don't show the placeholder option in the options overlay.\n *\n * ### Example usage\n *\n * ```html\n * <wcs-native-select>\n *   <select>\n *     <option value=\"option1\">Option 1</option>\n *     <option value=\"option2\">Option 2</option>\n *     <option value=\"option3\">Option 3</option>\n *   </select>\n * </wcs-native-select>\n * ```\n *\n * ### Note\n * - We did not find a way to detect when the select is reset, if you want to apply the placeholder style when the\n * select is reset, you have to call the `updateStyles()` method manually.\n * - It is strongly recommended to use select-native when you don't have to support the multi-selection feature\n */\n@Component({\n    tag: 'wcs-native-select',\n    styleUrl: 'native-select.scss',\n    shadow: true\n})\nexport class NativeSelect implements ComponentInterface {\n    /**\n     * The `size` property controls the size of the slotted `select` element by adjusting its padding.\n     * There are two possible size options:\n     * - 'm': medium size\n     * - 'l': large size\n     *\n     * The default value is 'm'.\n     */\n    @Prop({reflect: true}) size: WcsNativeSelectSize = 'm';\n\n    @Element() private el!: HTMLWcsNativeSelectElement;\n\n    @State() private expanded: boolean = false;\n    @State() private disabled: boolean;\n\n    private selectElement: HTMLSelectElement;\n    private observer: MutationObserver;\n\n\n    private readonly SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST = ['disabled'];\n\n    componentWillLoad() {\n        this.selectElement = this.el.querySelector('select');\n        if (!this.selectElement) throw new Error(\"wcs-native-select must be used with a native slotted select, please refer to the documentation.\");\n\n        this.onSelectedOptionChange();\n\n        /**\n         * We use an event listener to apply the default style to the select when user chose an active option\n         */\n        this.selectElement.addEventListener('change', () => {\n            this.onSelectedOptionChange();\n        });\n\n        this.observer = new MutationObserver(mutations => {\n            const hasSpiedAttrMutation = mutations.filter(m => this.SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST.includes(m.attributeName)).length > 0;\n            if (hasSpiedAttrMutation) {\n                this.updateHostAttributeWithSlottedSelect();\n            }\n\n            // A workaround to detect when the select is reset by using a class change on the select element. For example\n            // angular add/remove ng-pristine and ng-dirty classes on the form controls when the form is reset.\n            // Not the best solution but it works since we cannot detect the reset event on the native select element.\n            if (mutations.filter(m => m.attributeName === 'class').length > 0) {\n                this._updateStyles();\n            }\n        });\n        this.updateHostAttributeWithSlottedSelect();\n        this.observer.observe(this.selectElement, {attributes: true});\n    }\n\n    private onSelectedOptionChange(): void {\n        this._updateStyles();\n    }\n\n    private _updateStyles() {\n        if (this.isPlaceholderOptionSelected()) {\n            this.applyPlaceholderStylesOnNativeSlottedSelectElement();\n        } else {\n            this.applySelectedOptionStylesOnNativeSlottedSelectElement();\n        }\n    }\n\n    private isPlaceholderOptionSelected() {\n        return Array.from(this.selectElement.options).filter(o => o.selected)[0]?.disabled == true;\n    }\n\n    /**\n     * This method should always unset all styles modified by the `applyPlaceholderStylesOnNativeSlottedSelectElement()`\n     * @private\n     */\n    private applySelectedOptionStylesOnNativeSlottedSelectElement() {\n        this.selectElement.style.color = \"var(--wcs-primary)\";\n        this.selectElement.style.fontStyle = 'normal';\n        this.selectElement.style.fontWeight = '500';\n        Array.from(this.selectElement.options).forEach(option => {\n            option.style.fontStyle = 'normal';\n            if (!option.disabled) {\n                option.style.color = \"black\";\n            }\n        });\n    }\n\n    /**\n     * This method apply styles when the placeholder is shown.\n     *\n     * We use javascript because we cannot achieve that behaviour in pure css when the native select is not required\n     * @private\n     */\n    private applyPlaceholderStylesOnNativeSlottedSelectElement() {\n        this.selectElement.style.color = \"var(--wcs-text-medium)\";\n        this.selectElement.style.fontWeight = '400';\n        this.selectElement.style.fontStyle = 'italic';\n        Array.from(this.selectElement.options).forEach(option => {\n            option.style.fontStyle = 'normal';\n            if (!option.disabled) {\n                option.style.color = \"black\";\n            }\n        });\n    }\n\n    private updateHostAttributeWithSlottedSelect() {\n        this.disabled = this.selectElement?.hasAttribute('disabled');\n    }\n\n    disconnectedCallback() {\n        this.observer?.disconnect();\n        this.selectElement?.removeEventListener(\"change\", () => {\n            this.onSelectedOptionChange();\n        });\n    }\n\n    /**\n     * Use this method to force the component to update its styles. It can be useful when the select is reset (with a placeholder).\n     */\n    @Method()\n    async updateStyles() {\n        // Note : we try to automatically detect if the select is reset with the onreset event and with a mutation\n        // observer on the select element. But it seems that the onreset event is not fired when the select is reset.\n        // and the mutation observer is not fired when the select is reset with the reset() method on the form.\n        // So we have to let the user call this method manually when he reset the select.\n        this._updateStyles();\n    }\n\n    render() {\n        return (\n            <Host class={`${this.expanded ? 'expanded' : ''}`} data-disabled={this.disabled} data-size={this.size}>\n                <div class=\"select-wrapper\">\n                    <slot></slot>\n                    <div class=\"arrow-container\">\n                        <SelectArrow up={this.expanded}></SelectArrow>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/cjs/wcs-radio-group.cjs.entry.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ca67a6dc.js');
+const helpers = require('./helpers-4a14051a.js');
 
 const radioGroupCss = ":host{display:flex}:host([mode=radio]){flex-direction:column}:host([mode=radio]) ::slotted([slot=option]:first-child){margin-top:0}:host([mode=radio]) ::slotted([slot=option]:last-child){margin-bottom:0}:host([mode=radio]) ::slotted([slot=options]){margin-top:calc(var(--wcs-base-margin) / 2);margin-bottom:calc(var(--wcs-base-margin) / 2)}:host([mode=option]){display:inline-flex;flex-direction:row;padding:calc(var(--wcs-base-margin) / 4);background-color:#4d4f53;border-radius:0.6875rem}:host([mode=horizontal]){justify-content:space-between}";
 
@@ -21,11 +22,19 @@ const RadioGroup = class {
     if (this.value) {
       this.updateOptionsState(this.value, true);
     }
-    if (this.mode === 'option' || this.mode === 'horizontal') {
-      for (const option of this.options) {
-        option.mode = this.mode;
+    // We set the radio group mode on all options
+    this.options.forEach(o => o.mode = this.mode);
+    this.optionsNotDisabled.forEach((option) => {
+      if (option.checked) {
+        option.tabIndex = 0;
       }
-    }
+      else {
+        option.tabIndex = -1;
+      }
+    });
+    // If no option is already checked we made the first non-disabled option focusable
+    if (this.optionsNotDisabled.length > 0 && this.optionsNotDisabled.findIndex(o => o.tabIndex === 0) === -1)
+      this.optionsNotDisabled[0].tabIndex = 0;
   }
   get options() {
     const opts = this.el.querySelectorAll('wcs-radio');
@@ -36,12 +45,47 @@ const RadioGroup = class {
         ? slot.assignedElements()
         : [];
   }
+  get optionsNotDisabled() {
+    return Array.from(this.options).filter(option => !option.disabled);
+  }
   selectedOptionChanged(event) {
     this.updateOptionsState(event.detail.value, false);
     this.wcsChange.emit({
       value: event.detail.value
     });
   }
+  handleKeyDown(ev) {
+    if (helpers.isDownArrowKey(ev) || helpers.isUpArrowKey(ev) || helpers.isLeftArrowKey(ev) || helpers.isRightArrowKey(ev)) {
+      ev.preventDefault();
+    }
+  }
+  async handleKeyUp(ev) {
+    const radiosNotDisabled = this.optionsNotDisabled;
+    // Get the index of the currently checked radio
+    const previousSelected = this.optionsNotDisabled.findIndex(o => o.checked) >= 0
+      ? this.optionsNotDisabled.findIndex(o => o.checked)
+      : 0;
+    if (helpers.isDownArrowKey(ev) || helpers.isRightArrowKey(ev)) {
+      // Let the previous wcs-radio not accessible via the tab key
+      radiosNotDisabled[previousSelected].checked = false;
+      radiosNotDisabled[previousSelected].tabIndex = -1;
+      // Check the next wcs-radio from the previous selected and let accessible via tab key (tabIndex = 0)
+      const nextOptionIndex = (previousSelected + 1) % radiosNotDisabled.length; // to return at the beginning on the list when we are on the last index
+      radiosNotDisabled[nextOptionIndex].tabIndex = 0;
+      radiosNotDisabled[nextOptionIndex].focus();
+      radiosNotDisabled[nextOptionIndex].checked = true;
+    }
+    else if (helpers.isUpArrowKey(ev) || helpers.isLeftArrowKey(ev)) {
+      // Let the previous wcs-radio not accessible via the tab key
+      radiosNotDisabled[previousSelected].checked = false;
+      radiosNotDisabled[previousSelected].tabIndex = -1;
+      // Check the previous wcs-radio from the previous selected and let accessible via tab key (tabIndex = 0)
+      const previousOptionIndex = (previousSelected - 1 + radiosNotDisabled.length) % radiosNotDisabled.length; // To return at the end of the list when we are on index=0
+      radiosNotDisabled[previousOptionIndex].tabIndex = 0;
+      radiosNotDisabled[previousOptionIndex].focus();
+      radiosNotDisabled[previousOptionIndex].checked = true;
+    }
+  }
   updateOptionsState(value, markAsChecked) {
     for (const option of this.options) {
       if (option.value !== value) {

package/dist/cjs/wcs-radio-group.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-radio-group.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,miBAAmiB;;MCoB5iB,UAAU;;;;;;gBAG2C,OAAO;;EAOrE,oBAAoB,CAAC,QAAa;IAC9B,IAAI,CAAC,kBAAkB,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;GAC3C;EAED,gBAAgB;IACZ,IAAI,IAAI,CAAC,KAAK,EAAE;MACZ,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;KAC7C;IACD,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,YAAY,EAAE;MACtD,KAAK,MAAM,MAAM,IAAI,IAAI,CAAC,OAAO,EAAE;QAC/B,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;OAC3B;KACJ;GACJ;EAED,IAAY,OAAO;IACf,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACnD,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC3C,OAAO,IAAI,CAAC,MAAM,KAAK,CAAC;QAClB,IAAwC;QACxC,IAAI,KAAK,IAAI;UACT,IAAI,CAAC,gBAAgB,EAA2B;UAChD,EAAE,CAAC;GAChB;EAGD,qBAAqB,CAAC,KAAoC;IACtD,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IACnD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;MAChB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;KAC5B,CAAC,CAAA;GACL;EAEO,kBAAkB,CAAC,KAAa,EAAE,aAAsB;IAC5D,KAAK,MAAM,MAAM,IAAI,IAAI,CAAC,OAAO,EAAE;MAC/B,IAAI,MAAM,CAAC,KAAK,KAAK,KAAK,EAAE;QACxB,MAAM,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;OACrC;WAAM;QACH,IAAI,aAAa,EAAE;UACf,MAAM,CAAC,YAAY,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;SACtC;OACJ;KACJ;GACJ;EAED,MAAM;IACF,QACIA,QAACC,UAAI,QACDD,kBAAM,IAAI,EAAC,QAAQ,GAAE,CAClB,EACT;GACL;;;;;;;;;;","names":["h","Host"],"sources":["./src/components/radio-group/radio-group.scss?tag=wcs-radio-group&encapsulation=shadow","./src/components/radio-group/radio-group.tsx"],"sourcesContent":[":host {\n    display: flex;\n}\n\n:host([mode=radio]) {\n    flex-direction: column;\n\n    ::slotted([slot=option]:first-child) {\n        margin-top: 0;\n    }\n\n    ::slotted([slot=option]:last-child) {\n        margin-bottom: 0;\n    }\n\n    ::slotted([slot=options]) {\n        margin-top: calc(var(--wcs-base-margin) / 2);\n        margin-bottom: calc(var(--wcs-base-margin) / 2);\n    }\n}\n\n:host([mode=option]) {\n    display: inline-flex;\n    flex-direction: row;\n    padding: calc(var(--wcs-base-margin) / 4);\n    background-color: #4d4f53;\n    border-radius: 0.6875rem;\n}\n\n:host([mode=horizontal]) {\n    justify-content: space-between;\n}\n","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';\n\n@Component({\n    tag: 'wcs-radio-group',\n    styleUrl: 'radio-group.scss',\n    shadow: true\n})\nexport class RadioGroup implements ComponentInterface {\n    @Prop() value: any | any[] | undefined | null;\n    @Prop({reflect: true, mutable: false}) name;\n    @Prop({reflect: true, mutable: false}) mode: RadioGroupMode = 'radio';\n    @Element() private el!: HTMLWcsRadioGroupElement;\n\n    /** Emitted when the value has changed. */\n    @Event() wcsChange!: EventEmitter<RadioGroupChangeEventDetail>;\n\n    @Watch('value')\n    onValueChangeHandler(newValue: any) {\n        this.updateOptionsState(newValue, true);\n    }\n\n    componentDidLoad() {\n        if (this.value) {\n            this.updateOptionsState(this.value, true);\n        }\n        if (this.mode === 'option' || this.mode === 'horizontal') {\n            for (const option of this.options) {\n                option.mode = this.mode;\n            }\n        }\n    }\n\n    private get options(): HTMLWcsRadioElement[] {\n        const opts = this.el.querySelectorAll('wcs-radio');\n        const slot = this.el.querySelector('slot');\n        return opts.length !== 0\n            ? opts as unknown as HTMLWcsRadioElement[]\n            : slot !== null\n                ? slot.assignedElements() as HTMLWcsRadioElement[]\n                : [];\n    }\n\n    @Listen('wcsRadioClick')\n    selectedOptionChanged(event: CustomEvent<RadioChosedEvent>) {\n        this.updateOptionsState(event.detail.value, false);\n        this.wcsChange.emit({\n            value: event.detail.value\n        })\n    }\n\n    private updateOptionsState(value: string, markAsChecked: boolean) {\n        for (const option of this.options) {\n            if (option.value !== value) {\n                option.removeAttribute('checked');\n            } else {\n                if (markAsChecked) {\n                    option.setAttribute('checked', '');\n                }\n            }\n        }\n    }\n\n    render() {\n        return (\n            <Host>\n                <slot name=\"option\"/>\n            </Host>\n        );\n    }\n\n}\n"],"version":3}
+{"file":"wcs-radio-group.entry.cjs.js","mappings":"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","names":["isDownArrowKey","isUpArrowKey","isLeftArrowKey","isRightArrowKey","h","Host"],"sources":["./src/components/radio-group/radio-group.scss?tag=wcs-radio-group&encapsulation=shadow","./src/components/radio-group/radio-group.tsx"],"sourcesContent":[":host {\n    display: flex;\n}\n\n:host([mode=radio]) {\n    flex-direction: column;\n\n    ::slotted([slot=option]:first-child) {\n        margin-top: 0;\n    }\n\n    ::slotted([slot=option]:last-child) {\n        margin-bottom: 0;\n    }\n\n    ::slotted([slot=options]) {\n        margin-top: calc(var(--wcs-base-margin) / 2);\n        margin-bottom: calc(var(--wcs-base-margin) / 2);\n    }\n}\n\n:host([mode=option]) {\n    display: inline-flex;\n    flex-direction: row;\n    padding: calc(var(--wcs-base-margin) / 4);\n    background-color: #4d4f53;\n    border-radius: 0.6875rem;\n}\n\n:host([mode=horizontal]) {\n    justify-content: space-between;\n}\n","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 { isDownArrowKey, isLeftArrowKey, isRightArrowKey, isUpArrowKey } from \"../../utils/helpers\";\n\n@Component({\n    tag: 'wcs-radio-group',\n    styleUrl: 'radio-group.scss',\n    shadow: true\n})\nexport class RadioGroup implements ComponentInterface {\n    @Prop() value: any | any[] | undefined | null;\n    @Prop({reflect: true, mutable: false}) name;\n    @Prop({reflect: true, mutable: false}) mode: RadioGroupMode = 'radio';\n    @Element() private el!: HTMLWcsRadioGroupElement;\n\n    /** Emitted when the value has changed. */\n    @Event() wcsChange!: EventEmitter<RadioGroupChangeEventDetail>;\n\n    @Watch('value')\n    onValueChangeHandler(newValue: any) {\n        this.updateOptionsState(newValue, true);\n    }\n\n    componentDidLoad() {\n        if (this.value) {\n            this.updateOptionsState(this.value, true);\n        }\n\n        // We set the radio group mode on all options\n        this.options.forEach(o => o.mode = this.mode);\n\n        this.optionsNotDisabled.forEach((option) => {\n            if (option.checked) {\n                option.tabIndex = 0;\n            } else {\n                option.tabIndex = -1\n            }\n        });\n\n        // If no option is already checked we made the first non-disabled option focusable\n        if (this.optionsNotDisabled.length > 0 && this.optionsNotDisabled.findIndex(o => o.tabIndex === 0) === -1) this.optionsNotDisabled[0].tabIndex = 0;\n    }\n\n    private get options(): HTMLWcsRadioElement[] {\n        const opts = this.el.querySelectorAll('wcs-radio');\n        const slot = this.el.querySelector('slot');\n        return opts.length !== 0\n            ? opts as unknown as HTMLWcsRadioElement[]\n            : slot !== null\n                ? slot.assignedElements() as HTMLWcsRadioElement[]\n                : [];\n    }\n\n    private get optionsNotDisabled(): HTMLWcsRadioElement[] {\n        return Array.from(this.options).filter(option => !option.disabled);\n    }\n\n    @Listen('wcsRadioClick')\n    selectedOptionChanged(event: CustomEvent<RadioChosedEvent>) {\n        this.updateOptionsState(event.detail.value, false);\n        this.wcsChange.emit({\n            value: event.detail.value\n        })\n    }\n\n    @Listen('keydown')\n    handleKeyDown(ev: KeyboardEvent) {\n        if (isDownArrowKey(ev) || isUpArrowKey(ev) || isLeftArrowKey(ev) || isRightArrowKey(ev)) {\n            ev.preventDefault();\n        }\n    }\n\n    @Listen('keyup')\n    async handleKeyUp(ev: KeyboardEvent) {\n        const radiosNotDisabled = this.optionsNotDisabled;\n\n        // Get the index of the currently checked radio\n        const previousSelected = this.optionsNotDisabled.findIndex(o => o.checked) >= 0\n            ? this.optionsNotDisabled.findIndex(o => o.checked)\n            : 0;\n\n        if (isDownArrowKey(ev) || isRightArrowKey(ev)) {\n            // Let the previous wcs-radio not accessible via the tab key\n            radiosNotDisabled[previousSelected].checked = false;\n            radiosNotDisabled[previousSelected].tabIndex = -1;\n\n            // Check the next wcs-radio from the previous selected and let accessible via tab key (tabIndex = 0)\n            const nextOptionIndex = (previousSelected + 1) % radiosNotDisabled.length;  // to return at the beginning on the list when we are on the last index\n            radiosNotDisabled[nextOptionIndex].tabIndex = 0;\n            radiosNotDisabled[nextOptionIndex].focus();\n            radiosNotDisabled[nextOptionIndex].checked = true;\n        } else if (isUpArrowKey(ev) || isLeftArrowKey(ev)) {\n            // Let the previous wcs-radio not accessible via the tab key\n            radiosNotDisabled[previousSelected].checked = false;\n            radiosNotDisabled[previousSelected].tabIndex = -1;\n\n            // Check the previous wcs-radio from the previous selected and let accessible via tab key (tabIndex = 0)\n            const previousOptionIndex = (previousSelected - 1 + radiosNotDisabled.length) % radiosNotDisabled.length; // To return at the end of the list when we are on index=0\n            radiosNotDisabled[previousOptionIndex].tabIndex = 0;\n            radiosNotDisabled[previousOptionIndex].focus();\n            radiosNotDisabled[previousOptionIndex].checked = true;\n        }\n    }\n\n    private updateOptionsState(value: string, markAsChecked: boolean) {\n        for (const option of this.options) {\n            if (option.value !== value) {\n                option.removeAttribute('checked');\n            } else {\n                if (markAsChecked) {\n                    option.setAttribute('checked', '');\n                }\n            }\n        }\n    }\n\n    render() {\n        return (\n            <Host>\n                <slot name=\"option\"/>\n            </Host>\n        );\n    }\n\n}\n"],"version":3}

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-ca67a6dc.js');
 const helpers = require('./helpers-4a14051a.js');
 
-const radioCss = ":host{width:fit-content}:host([mode=radio]:focus-within){transition:none;outline:2px dashed var(--wcs-primary);outline-offset:0;border-radius:0.5rem}:host([mode=horizontal]:focus-within){transition:none;outline:2px dashed var(--wcs-primary);outline-offset:2px;border-radius:0.5rem}:host([mode=radio]) input,:host([mode=horizontal]) input{position:absolute;opacity:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}:host([mode=radio]) label,:host([mode=horizontal]) label{margin-bottom:0;color:var(--wcs-text-medium);background-color:transparent;font-weight:500 !important;display:inline-block}:host([mode=radio]) label:before,:host([mode=horizontal]) label:before{border-radius:50%;border:2px solid var(--wcs-text-disabled);position:relative;width:1.125rem;height:1.125rem;pointer-events:none;content:\"\";background-color:var(--wcs-white)}:host([mode=radio]) label:after,:host([mode=horizontal]) label:after{transition:0.175s ease-in-out;position:relative;width:1.125rem;height:1.125rem;content:\"\";background:no-repeat 50%/50% 50%}:host([disabled]) label{color:var(--wcs-text-disabled);cursor:not-allowed}:host(:not([disabled])) label{cursor:pointer}:host([mode=radio][checked]) label,:host([mode=horizontal][checked]) label{color:var(--wcs-primary)}:host([mode=radio][checked]) label:before,:host([mode=horizontal][checked]) label:before{border-color:var(--wcs-primary);background-color:var(--wcs-primary)}:host([mode=radio]:hover):not([disabled]) label,:host([mode=horizontal]:hover):not([disabled]) label{color:var(--wcs-primary)}:host([mode=radio]:hover):not([disabled]) label:before,:host([mode=horizontal]:hover):not([disabled]) label:before{border-color:var(--wcs-primary)}:host([mode=radio]) label{padding:0.125rem 0.125rem 0 0;border:none;transition:0.175s ease-in-out}:host([mode=radio]) label:before{transition:0.175s ease-in-out;margin-right:var(--wcs-base-margin);display:inline-block;top:3px;box-sizing:border-box}:host([mode=horizontal]) label:before{transition:background-color 0.175s ease-in-out;margin:auto auto var(--wcs-base-margin);display:block}:host([mode=option]){padding:var(--wcs-base-margin) calc(var(--wcs-base-margin) / 2);font-weight:500 !important}:host([mode=option]) input{position:absolute;z-index:-1;opacity:0;box-sizing:border-box;padding:0}:host([mode=option]) label{padding:5px calc(2 * var(--wcs-base-margin));margin-bottom:0;color:var(--wcs-white);white-space:nowrap;border-radius:0.4375rem}:host([mode=option]:focus-within) label{outline:2px dashed var(--wcs-white);outline-offset:0.1rem;border-radius:0.4375rem}:host([mode=option][checked]) label{font-weight:500 !important;color:var(--wcs-primary);background-color:var(--wcs-white)}";
+const radioCss = ":host{width:fit-content}:host([mode=radio]:focus-within){transition:none;outline:2px dashed var(--wcs-primary);outline-offset:0;border-radius:0.5rem}:host([mode=horizontal]:focus-within){transition:none;outline:2px dashed var(--wcs-primary);outline-offset:2px;border-radius:0.5rem}:host([mode=radio]) input,:host([mode=horizontal]) input{position:absolute;opacity:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}:host([mode=radio]) label,:host([mode=horizontal]) label{margin-bottom:0;color:var(--wcs-text-medium);background-color:transparent;font-weight:500 !important;display:inline-block}:host([mode=radio]) label:before,:host([mode=horizontal]) label:before{border-radius:50%;border:2px solid var(--wcs-text-disabled);position:relative;width:1.125rem;height:1.125rem;pointer-events:none;content:\"\";background-color:var(--wcs-white)}:host([mode=radio]) label:after,:host([mode=horizontal]) label:after{transition:0.175s ease-in-out;position:relative;width:1.125rem;height:1.125rem;content:\"\";background:no-repeat 50%/50% 50%}:host([disabled]) label{color:var(--wcs-text-disabled);cursor:not-allowed}:host(:not([disabled])) label{cursor:pointer}:host([mode=radio][checked]) label,:host([mode=horizontal][checked]) label{color:var(--wcs-primary)}:host([mode=radio][checked]) label:before,:host([mode=horizontal][checked]) label:before{border-color:var(--wcs-primary);background-color:var(--wcs-primary);outline:solid 2px var(--wcs-white);outline-offset:-4px}:host([mode=radio]:hover):not([disabled]) label,:host([mode=horizontal]:hover):not([disabled]) label{color:var(--wcs-primary)}:host([mode=radio]:hover):not([disabled]) label:before,:host([mode=horizontal]:hover):not([disabled]) label:before{border-color:var(--wcs-primary)}:host([mode=radio]) label{padding:0.125rem;border:none;transition:0.175s ease-in-out}:host([mode=radio]) label:before{transition:0.175s ease-in-out;margin-right:var(--wcs-base-margin);display:inline-block;top:3px;box-sizing:border-box}:host([mode=radio]) label:empty::before{margin-right:0}:host([mode=horizontal]){height:fit-content}:host([mode=horizontal]) label:before{transition:background-color 0.175s ease-in-out;margin:auto auto var(--wcs-base-margin);display:block}:host([mode=horizontal]) label:empty::before{margin-bottom:0}:host([mode=option]){padding:var(--wcs-base-margin) calc(var(--wcs-base-margin) / 2);font-weight:500 !important}:host([mode=option]) input{position:absolute;z-index:-1;opacity:0;box-sizing:border-box;padding:0}:host([mode=option]) label{padding:5px calc(2 * var(--wcs-base-margin));margin-bottom:0;color:var(--wcs-white);white-space:nowrap;border-radius:0.4375rem;transition:0.175s ease-in-out}:host([mode=option]:focus-within) label{outline:2px dashed var(--wcs-white);outline-offset:0.1rem;border-radius:0.4375rem}:host([mode=option][checked]) label{font-weight:500 !important;color:var(--wcs-primary);background-color:var(--wcs-white)}";
 
 const Radio = class {
   constructor(hostRef) {
@@ -17,11 +17,20 @@ const Radio = class {
     this.label = undefined;
     this.checked = false;
     this.disabled = false;
+    this.name = undefined;
   }
   onKeyDown(_event) {
     if ((helpers.isSpaceKey(_event) || helpers.isEnterKey(_event)) && !this.el.checked) {
-      this.el.checked = true;
-      this.emitRadioChangeEvent();
+      this.checked = true;
+      this.inputEl.click(); // input[radio].checked = true does not trigger any event => input[radio].click() emit a change event
+    }
+  }
+  checkedChanged(newValue) {
+    if (newValue) {
+      this.inputEl.click();
+    }
+    else {
+      this.inputEl.click();
     }
   }
   componentWillLoad() {
@@ -45,9 +54,13 @@ const Radio = class {
     });
   }
   render() {
-    return (index.h(index.Host, { slot: "option" }, index.h("input", { id: this.inputId, type: "radio", value: this.value, checked: this.checked, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, "aria-checked": `${this.checked}` }), index.h("label", { htmlFor: `${this.inputId}` }, this.label)));
+    return (index.h(index.Host, Object.assign({ slot: "option" }, (this.disabled ? { tabIndex: -1 } : {})), index.h("input", { id: this.inputId, type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, "aria-checked": `${this.checked}` }), index.h("label", { htmlFor: `${this.inputId}` }, this.label)));
   }
+  static get delegatesFocus() { return true; }
   get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "checked": ["checkedChanged"]
+  }; }
 };
 let radioButtonIds = 0;
 Radio.style = radioCss;

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

@@ -1 +1 @@
-{"file":"wcs-radio.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,QAAQ,GAAG,qpFAAqpF;;MCUzpF,KAAK;;;;IACN,YAAO,GAAG,UAAU,cAAc,EAAE,EAAE,CAAC;gBAGiB,OAAO;;;mBAOvB,KAAK;oBAIjB,KAAK;;EAKzC,SAAS,CAAC,MAAqB;IAC3B,IAAI,CAACA,kBAAU,CAAC,MAAM,CAAC,IAAIC,kBAAU,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE;MAChE,IAAI,CAAC,EAAE,CAAC,OAAO,GAAG,IAAI,CAAC;MACvB,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC/B;GACJ;EAED,iBAAiB;IACb,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;;MAE1B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,SAAS,IAAI,EAAE,CAAC;KACxC;GACJ;EAED,gBAAgB;IACZ,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACzD,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC;MACrC,IAAI,CAAC,oBAAoB,EAAE,CAAC;MAC5B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;KACvB,CAAC,CAAA;GACL;EAED,oBAAoB;IAChB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;MACpB,KAAK,EAAE,IAAI,CAAC,KAAK;MACjB,MAAM,EAAE,IAAI,CAAC,EAAE;MACf,KAAK,EAAE,IAAI,CAAC,KAAK;KACpB,CAAC,CAAC;GACN;EAED,MAAM;IACF,QACIC,QAACC,UAAI,IAAC,IAAI,EAAC,QAAQ,IACfD,mBACI,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,mBACR,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,kBAC9B,GAAG,IAAI,CAAC,OAAO,EAAE,GAAG,EACtCA,mBAAO,OAAO,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,IAAG,IAAI,CAAC,KAAK,CAAS,CACpD,EACT;GACL;;;AAGL,IAAI,cAAc,GAAG,CAAC,CAAC;;;;;","names":["isSpaceKey","isEnterKey","h","Host"],"sources":["./src/components/radio/radio.scss?tag=wcs-radio&encapsulation=shadow","./src/components/radio/radio.component.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    width: fit-content;\n}\n\n:host([mode=radio]:focus-within) {\n    transition: none;\n    @include focus-outline($border-radius: 0.5rem, $outline-offset: 0);\n}\n\n:host([mode=horizontal]:focus-within) {\n    transition: none;\n    @include focus-outline($border-radius: 0.5rem, $outline-offset: 2px);\n}\n\n:host([mode=radio]),\n:host([mode=horizontal]) {\n    input {\n        position: absolute;\n        opacity: 0;\n        height: 1px;\n        width: 1px;\n        overflow: hidden;\n        clip-path: inset(50%);\n        white-space: nowrap;\n    }\n\n    label {\n        margin-bottom: 0;\n        color: var(--wcs-text-medium);\n        background-color: transparent;\n        font-weight: 500 !important;\n        display: inline-block;\n\n        &:before {\n            border-radius: 50%;\n            border: 2px solid var(--wcs-text-disabled);\n            position: relative;\n            width: 1.125rem;\n            height: 1.125rem;\n            pointer-events: none;\n            content: \"\";\n            background-color: var(--wcs-white);\n        }\n\n        &:after {\n            transition: 0.175s ease-in-out;\n            position: relative;\n            width: 1.125rem;\n            height: 1.125rem;\n            content: \"\";\n            background: no-repeat 50% / 50% 50%;\n        }\n    }\n}\n\n:host([disabled]) {\n    label {\n        color: var(--wcs-text-disabled);\n        cursor: not-allowed;\n    }\n}\n\n:host(:not([disabled])) {\n    label {\n        cursor: pointer;\n    }\n}\n\n:host([mode=radio][checked]),\n:host([mode=horizontal][checked]) {\n    label {\n        color: var(--wcs-primary);\n\n        &:before {\n            border-color: var(--wcs-primary);\n            background-color: var(--wcs-primary);\n        }\n    }\n}\n\n:host([mode=radio]:hover):not([disabled]),\n:host([mode=horizontal]:hover):not([disabled]) {\n    label {\n        color: var(--wcs-primary);\n\n        &:before {\n            border-color: var(--wcs-primary);\n        }\n    }\n}\n\n:host([mode=radio]) {\n    label {\n        padding: 0.125rem 0.125rem 0 0;\n        border: none;\n        transition: 0.175s ease-in-out;\n\n        &:before {\n            transition: 0.175s ease-in-out;\n            margin-right: var(--wcs-base-margin);\n            display: inline-block;\n            top: 3px;\n            box-sizing: border-box;\n        }\n    }\n}\n\n:host([mode=horizontal]) {\n    label {\n        &:before {\n            transition: background-color 0.175s ease-in-out;\n            margin: auto auto var(--wcs-base-margin);\n            display: block;\n\n        }\n    }\n}\n\n:host([mode=option]) {\n    padding: var(--wcs-base-margin) calc(var(--wcs-base-margin) / 2);\n    font-weight: 500 !important;\n\n    input {\n        position: absolute;\n        z-index: -1;\n        opacity: 0;\n        box-sizing: border-box;\n        padding: 0;\n    }\n\n    label {\n        padding: 5px calc(2 * var(--wcs-base-margin));\n        margin-bottom: 0;\n        color: var(--wcs-white);\n        white-space: nowrap;\n        border-radius: 0.4375rem;\n    }\n}\n\n:host([mode=option]:focus-within) {\n    label {\n        @include focus-outline(var(--wcs-white), 0.4375rem, 0.1rem);\n    }\n}\n\n:host([mode=option][checked]) {\n    label {\n        font-weight: 500 !important;\n        color: var(--wcs-primary);\n        background-color: var(--wcs-white);\n    }\n}\n","import { Component, ComponentInterface, h, Host, Prop, Element, Event, EventEmitter, Listen } from '@stencil/core';\nimport { RadioChosedEvent } from './radio-interface';\nimport { RadioGroupMode } from '../radio-group/radio-group-interface';\nimport { isEnterKey, isSpaceKey } from '../../utils/helpers';\n\n@Component({\n    tag: 'wcs-radio',\n    styleUrl: 'radio.scss',\n    shadow: true\n})\nexport class Radio implements ComponentInterface {\n    private inputId = `wcs-rb-${radioButtonIds++}`;\n    private inputEl: HTMLInputElement;\n    @Element() private el!: HTMLWcsRadioElement;\n    @Prop({ reflect: true, mutable: false }) mode: RadioGroupMode = 'radio';\n\n    @Prop({ mutable: true, reflect: true }) value: any | any[] | undefined | null;\n    @Prop({ mutable: true, reflect: true }) label: string;\n    /**\n     * If `true`, the radio is selected.\n     */\n    @Prop({mutable: true, reflect: true}) checked = false;\n    /**\n     * If `true`, the user cannot interact with the radio.\n     */\n    @Prop({ mutable: true }) disabled = false;\n    // FIXME renommer l'évènement c'est pas un onclick mais un onchange\n    @Event({eventName: 'wcsRadioClick' }) wcsRadioClick: EventEmitter<RadioChosedEvent>\n\n    @Listen('keydown')\n    onKeyDown(_event: KeyboardEvent) {\n        if ((isSpaceKey(_event) || isEnterKey(_event)) && !this.el.checked) {\n            this.el.checked = true;\n            this.emitRadioChangeEvent();\n        }\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\n    componentDidLoad() {\n        this.inputEl = this.el.shadowRoot.querySelector('input');\n        this.inputEl.addEventListener('change', _ => {\n            this.emitRadioChangeEvent();\n            this.checked = true;\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        return (\n            <Host slot=\"option\">\n                <input\n                    id={this.inputId}\n                    type=\"radio\"\n                    value={this.value}\n                    checked={this.checked}\n                    disabled={this.disabled}\n                    aria-disabled={this.disabled ? 'true' : null}\n                    aria-checked={`${this.checked}`}/>\n                <label htmlFor={`${this.inputId}`}>{this.label}</label>\n            </Host>\n        );\n    }\n}\n\nlet radioButtonIds = 0;\n"],"version":3}
+{"file":"wcs-radio.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,QAAQ,GAAG,63FAA63F;;MCuBj4F,KAAK;;;;IACN,YAAO,GAAG,UAAU,cAAc,EAAE,EAAE,CAAC;gBAGiB,OAAO;;;mBAOvB,KAAK;oBAIjB,KAAK;;;EAOzC,SAAS,CAAC,MAAqB;IAC3B,IAAI,CAACA,kBAAU,CAAC,MAAM,CAAC,IAAIC,kBAAU,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE;MAChE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;MACpB,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;KACxB;GACJ;EAGD,cAAc,CAAC,QAAiB;IAC5B,IAAG,QAAQ,EAAE;MACT,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;KACxB;SAAM;MACH,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;KACxB;GACJ;EAED,iBAAiB;IACb,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;;MAE1B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,SAAS,IAAI,EAAE,CAAC;KACxC;GACJ;EAED,gBAAgB;IACZ,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACzD,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC;MACrC,IAAI,CAAC,oBAAoB,EAAE,CAAC;MAC5B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;KACvB,CAAC,CAAA;GACL;EAED,oBAAoB;IAChB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;MACpB,KAAK,EAAE,IAAI,CAAC,KAAK;MACjB,MAAM,EAAE,IAAI,CAAC,EAAE;MACf,KAAK,EAAE,IAAI,CAAC,KAAK;KACpB,CAAC,CAAC;GACN;EAED,MAAM;IAEF,QACIC,QAACC,UAAI,kBAAC,IAAI,EAAC,QAAQ,KAAM,IAAI,CAAC,QAAQ,GAAG,EAAC,QAAQ,EAAE,CAAC,CAAC,EAAC,GAAG,EAAE,IACxDD,mBACI,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,mBACR,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,kBAC9B,GAAG,IAAI,CAAC,OAAO,EAAE,GACjC,EACFA,mBAAO,OAAO,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,IAAG,IAAI,CAAC,KAAK,CAAS,CACpD,EACT;GACL;;;;;;;AAGL,IAAI,cAAc,GAAG,CAAC,CAAC;;;;;","names":["isSpaceKey","isEnterKey","h","Host"],"sources":["./src/components/radio/radio.scss?tag=wcs-radio&encapsulation=shadow","./src/components/radio/radio.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    width: fit-content;\n}\n\n:host([mode=radio]:focus-within) {\n    transition: none;\n    @include focus-outline($border-radius: 0.5rem, $outline-offset: 0);\n}\n\n:host([mode=horizontal]:focus-within) {\n    transition: none;\n    @include focus-outline($border-radius: 0.5rem, $outline-offset: 2px);\n}\n\n:host([mode=radio]),\n:host([mode=horizontal]) {\n    input {\n        position: absolute;\n        opacity: 0;\n        height: 1px;\n        width: 1px;\n        overflow: hidden;\n        clip-path: inset(50%);\n        white-space: nowrap;\n    }\n\n    label {\n        margin-bottom: 0;\n        color: var(--wcs-text-medium);\n        background-color: transparent;\n        font-weight: 500 !important;\n        display: inline-block;\n\n        &:before {\n            border-radius: 50%;\n            border: 2px solid var(--wcs-text-disabled);\n            position: relative;\n            width: 1.125rem;\n            height: 1.125rem;\n            pointer-events: none;\n            content: \"\";\n            background-color: var(--wcs-white);\n        }\n\n        &:after {\n            transition: 0.175s ease-in-out;\n            position: relative;\n            width: 1.125rem;\n            height: 1.125rem;\n            content: \"\";\n            background: no-repeat 50% / 50% 50%;\n        }\n    }\n}\n\n:host([disabled]) {\n    label {\n        color: var(--wcs-text-disabled);\n        cursor: not-allowed;\n    }\n}\n\n:host(:not([disabled])) {\n    label {\n        cursor: pointer;\n    }\n}\n\n:host([mode=radio][checked]),\n:host([mode=horizontal][checked]) {\n    label {\n        color: var(--wcs-primary);\n\n        &:before {\n            border-color: var(--wcs-primary);\n            background-color: var(--wcs-primary);\n            outline: solid 2px var(--wcs-white);\n            outline-offset: -4px;\n        }\n    }\n}\n\n:host([mode=radio]:hover):not([disabled]),\n:host([mode=horizontal]:hover):not([disabled]) {\n    label {\n        color: var(--wcs-primary);\n\n        &:before {\n            border-color: var(--wcs-primary);\n        }\n    }\n}\n\n:host([mode=radio]) {\n    label {\n        padding: 0.125rem;\n        border: none;\n        transition: 0.175s ease-in-out;\n\n        &:before {\n            transition: 0.175s ease-in-out;\n            margin-right: var(--wcs-base-margin);\n            display: inline-block;\n            top: 3px;\n            box-sizing: border-box;\n        }\n\n        &:empty::before {\n            margin-right: 0;\n        }\n    }\n}\n\n:host([mode=horizontal]) {\n    height: fit-content;\n    label {\n        &:before {\n            transition: background-color 0.175s ease-in-out;\n            margin: auto auto var(--wcs-base-margin);\n            display: block;\n        }\n\n        &:empty::before {\n            margin-bottom: 0;\n        }\n    }\n}\n\n:host([mode=option]) {\n    padding: var(--wcs-base-margin) calc(var(--wcs-base-margin) / 2);\n    font-weight: 500 !important;\n\n    input {\n        position: absolute;\n        z-index: -1;\n        opacity: 0;\n        box-sizing: border-box;\n        padding: 0;\n    }\n\n    label {\n        padding: 5px calc(2 * var(--wcs-base-margin));\n        margin-bottom: 0;\n        color: var(--wcs-white);\n        white-space: nowrap;\n        border-radius: 0.4375rem;\n        transition: 0.175s ease-in-out;\n    }\n}\n\n:host([mode=option]:focus-within) {\n    label {\n        @include focus-outline(var(--wcs-white), 0.4375rem, 0.1rem);\n    }\n}\n\n:host([mode=option][checked]) {\n    label {\n        font-weight: 500 !important;\n        color: var(--wcs-primary);\n        background-color: var(--wcs-white);\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    h,\n    Host,\n    Prop,\n    Element,\n    Event,\n    EventEmitter,\n    Listen,\n    Watch\n} from '@stencil/core';\nimport { RadioChosedEvent } from './radio-interface';\nimport { RadioGroupMode } from '../radio-group/radio-group-interface';\nimport { isEnterKey, isSpaceKey } from '../../utils/helpers';\n\n@Component({\n    tag: 'wcs-radio',\n    styleUrl: 'radio.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Radio implements ComponentInterface {\n    private inputId = `wcs-rb-${radioButtonIds++}`;\n    private inputEl: HTMLInputElement;\n    @Element() private el!: HTMLWcsRadioElement;\n    @Prop({ reflect: true, mutable: false }) mode: RadioGroupMode = 'radio';\n\n    @Prop({ mutable: true, reflect: true }) value: any | any[] | undefined | null;\n    @Prop({ mutable: true, reflect: true }) label: string;\n    /**\n     * If `true`, the radio is selected. \n     */\n    @Prop({mutable: true, reflect: true}) checked = false;\n    /**\n     * If `true`, the user cannot interact with the radio.\n     */\n    @Prop({ mutable: true }) disabled = false;\n    // FIXME renommer l'évènement c'est pas un onclick mais un onchange\n    @Event({eventName: 'wcsRadioClick' }) wcsRadioClick: EventEmitter<RadioChosedEvent>\n    \n    @Prop() name: string;\n\n    @Listen('keydown')\n    onKeyDown(_event: KeyboardEvent) {\n        if ((isSpaceKey(_event) || isEnterKey(_event)) && !this.el.checked) {\n            this.checked = true;\n            this.inputEl.click(); // input[radio].checked = true does not trigger any event => input[radio].click() emit a change event\n        }\n    }\n    \n    @Watch(\"checked\")\n    checkedChanged(newValue: boolean) {\n        if(newValue) {\n            this.inputEl.click();\n        } else {\n            this.inputEl.click();\n        }\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\n    componentDidLoad() {\n        this.inputEl = this.el.shadowRoot.querySelector('input');\n        this.inputEl.addEventListener('change', _ => {\n            this.emitRadioChangeEvent();\n            this.checked = true;\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\" {...(this.disabled ? {tabIndex: -1} : {})}>\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                    aria-disabled={this.disabled ? 'true' : null}\n                    aria-checked={`${this.checked}`}\n                />\n                <label htmlFor={`${this.inputId}`}>{this.label}</label>\n            </Host>\n        );\n    }\n}\n\nlet radioButtonIds = 0;\n"],"version":3}