wcs-core 4.2.0 → 5.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Method,\n    Prop,\n    State,\n    Watch\n} from '@stencil/core';\n\nimport { interpret, Interpreter, Machine, MachineConfig, MachineOptions } from 'xstate';\nimport { isWcsSelectSize, SelectChangeEventDetail, WcsSelectSize, WcsSelectSizeValue } from './select-interface';\nimport { SelectArrow } from './select-arrow';\nimport { SelectOptionChosedEvent, SelectOptionValue } from '../select-option/select-option-interface';\nimport {\n    isDownArrowKey,\n    isElement,\n    isEnterKey,\n    isEscapeKey,\n    isHomeKey,\n    isLeftArrowKey,\n    isPageDownKey,\n    isPageUpKey,\n    isRightArrowKey,\n    isTabKey,\n    isUpArrowKey,\n    generateUniqueId,\n    findItemLabel,\n    isSpaceKey,\n} from '../../utils/helpers';\nimport { SelectChips } from './select-chips';\nimport { MDCRipple } from '@material/ripple';\nimport { createPopper, Instance } from '@popperjs/core';\nimport { isEqual } from 'lodash-es';\n\ninterface SelectStateSchema {\n    states: {\n        closed: {};\n        opened: {};\n    };\n}\n\ntype SelectEvent\n    = { type: 'OPEN' }\n    | { type: 'CLOSE', value: { shouldBlur?: boolean } }\n    | { type: 'CLICK' }\n    | { type: 'OPTION_SELECTED', value: SelectOptionChosedEvent };\n\nconst SELECT_MACHINE_CONFIG: MachineConfig<any, SelectStateSchema, SelectEvent> = {\n    key: 'select',\n    initial: 'closed',\n    states: {\n        closed: {\n            entry: ['close'],\n            on: {\n                CLICK: 'opened',\n                OPEN: 'opened',\n                OPTION_SELECTED: {actions: ['selectOption']}\n            },\n        },\n        opened: {\n            entry: ['open'],\n            on: {\n                CLICK: 'closed',\n                CLOSE: 'closed',\n                OPTION_SELECTED: {actions: ['selectOption']}\n            },\n        },\n    }\n};\n\n/**\n * Select component, use in conjuction with wcs-select-option.\n *\n * @example ```hmtl\n *  <wcs-select>\n *      <wcs-select-option value=\"1\">One</wcs-select-option>\n *  </wcs-select>```\n */\n@Component({\n    tag: 'wcs-select',\n    styleUrl: 'select.scss',\n    shadow: true\n})\nexport class Select implements ComponentInterface {\n    private stateService!: Interpreter<any, SelectStateSchema, SelectEvent>;\n\n    private selectId = `wcs-select-${selectIds++}`;\n    private labelElement: HTMLWcsLabelElement;\n    private optionsEl!: HTMLDivElement;\n    private optionsId = generateUniqueId(\"OPTIONS\");\n    private controlEl!: HTMLDivElement;\n\n    // Only used for multiples.\n    private values: SelectOptionValue[];\n    private lastSelectedOptionElement: HTMLWcsSelectOptionElement | null;\n    private lastFocusedOptionElement: HTMLWcsSelectOptionElement | null;\n\n    @Element() private el!: HTMLWcsSelectElement;\n\n    /** Wether the select is expanded */\n    @State()\n    private expanded = false;\n\n    /**\n     * Specify the size (height) of the select.\n     */\n    @Prop({reflect: true}) size: WcsSelectSize = 'm';\n\n    /** Wether the component is fully loaded in the DOM. */\n    @State()\n    // @ts-ignore\n    private hasLoaded = false;\n\n    /** Text to display for the selected option, when no option is selected, the value is undefined. */\n    @State()\n    private displayText: string;\n\n    /** When the host is focused. */\n    @State()\n    // @ts-ignore\n    private focused: boolean;\n\n    /** The currently selected value. */\n    @Prop({mutable: true})\n    value?: any | null;\n\n    /** The text to display when the select is empty. */\n    @Prop({mutable: true, reflect: true})\n    placeholder?: string | null;\n\n    /** If `true`, the user cannot interact with the select. */\n    @Prop({mutable: true})\n    disabled = false;\n\n    /** If `true`, the user can select multiple values at once. */\n    @Prop({reflect: true})\n    multiple = false;\n\n    /** If `true`, selected items are shown in chips mode. */\n    @Prop({reflect: true})\n    chips = false;\n\n    /** The name of the control, which is submitted with the form data. */\n    @Prop()\n    name?: string;\n\n    /** Function used to compare options, default : deep comparison. */\n    @Prop()\n    compareWith?: (optionValue: any, selectedValue: any) => boolean = (optionValue, selectedValue) => isEqual(optionValue, selectedValue);\n\n    private popper: Instance;\n\n    @State() private overlayDirection: 'bottom' | 'top' = 'bottom';\n\n    /** Emitted when the value has changed. */\n    @Event() wcsChange!: EventEmitter<SelectChangeEventDetail>;\n\n    /** Emitted when the select has focus. */\n    @Event() wcsFocus!: EventEmitter<void>;\n\n    /** Emitted when the select loses focus. */\n    @Event() wcsBlur!: EventEmitter<void>;\n\n    /** Open the component. */\n    @Method()\n    async open() {\n        this.stateService.send('OPEN');\n    }\n\n    /** Close the component. */\n    @Method()\n    async close() {\n        this.stateService.send('CLOSE');\n    }\n\n    @Watch('value')\n    onValueChangeHandler(newValue: any) {\n        this.updateSelectedValue(newValue);\n        this.emitChange(this.value);\n    }\n\n    private updateSelectedValue(value: any) {\n        // If no value is passed, the select is reset.\n        if (!value) {\n            this.reset();\n        }\n        if (this.multiple) {\n            // If user don't give an array, we provide one\n            if (!Array.isArray(value)) {\n                value = [value];\n            }\n            this.values = [];\n\n            this.options.forEach((opt: HTMLWcsSelectOptionElement) => {\n                const isSelected = value ?\n                    value.findIndex(v => this.compareWith(opt.value, v)) !== -1\n                    : false;\n                if (isSelected) {\n                    this.values.push({\n                        value: opt.value,\n                        displayText: opt.innerText,\n                        chipColor: opt.chipColor,\n                        chipBackgroundColor: opt.chipBackgroundColor\n                    });\n                }\n                opt.selected = isSelected;\n            });\n            // update select placeholder text\n            this.displayText = this.values.length !== 0\n                ? this.values.map(v => v.displayText).join(', ')\n                : undefined;\n        } else {\n            this.options.forEach((opt: HTMLWcsSelectOptionElement) => {\n                const isSelected = this.compareWith(opt.value, value);\n                if (isSelected) {\n                    this.displayText = opt.innerText;\n                }\n                opt.selected = isSelected;\n            });\n        }\n    }\n\n    /**\n     * Reset the select: unselects all options for multiple mode and displays the placeholder\n     * @private\n     */\n    private reset() {\n        this.values = [];\n        this.displayText = undefined;\n        this.options.forEach((opt: HTMLWcsSelectOptionElement) => {\n            opt.selected = false;\n        });\n    }\n\n    componentDidLoad() {\n        this.optionsEl = this.el.shadowRoot.querySelector('.wcs-select-options');\n        this.controlEl = this.el.shadowRoot.querySelector('.wcs-select-control');\n\n        const stateMachine = Machine(\n            SELECT_MACHINE_CONFIG,\n            this.initMachineOptions()\n        );\n        // FIXME: type checking failed...\n        // @ts-ignore\n        this.stateService = interpret(stateMachine);\n\n        if (this.multiple) {\n            this.values = [];\n        }\n\n        this.addRippleEffect();\n        this.stateService.start();\n        if (this.optionsEl.querySelector('slot') === null) {\n            this.replaceOptions_firefoxBefore63();\n            this.listenDomUpdate_firefoxBefore63();\n        }\n\n        if (this.value !== undefined) {\n            this.updateSelectedValue(this.value);\n        }\n\n        this.popper = this.createPopperInstance();\n\n        // if the select is inside a wcs-form-field, we set an id to the wcs-label if present\n        // the wcs-label element reference is kept to compute aria-label value during the rendering\n        this.labelElement = findItemLabel(this.el);\n        if (this.labelElement) {\n            this.labelElement.id = this.selectId + \"-lbl\";\n        }\n\n        // TODO: is this still usefull for anything ?\n        this.hasLoaded = true;\n    }\n\n    private createPopperInstance() {\n        return createPopper(this.controlEl, this.optionsEl, {\n            placement: \"bottom\",\n            modifiers: [\n                {\n                    name: 'offset',\n                    options: {\n                        offset: [0, 4] // we want 4px between select control and select options\n                    }\n                }\n            ]\n        });\n    }\n\n    private emitChange(newValue: any): void {\n        this.wcsChange.emit({\n            value: newValue\n        });\n    }\n\n    private replaceOptions_firefoxBefore63() {\n        Array.from(this.el.querySelectorAll('wcs-select-option'))\n            .forEach(option => {\n                if (option.parentNode === this.el) {\n                    this.el.removeChild(option);\n                    this.optionsEl.appendChild(option);\n                }\n            });\n    }\n\n    private listenDomUpdate_firefoxBefore63() {\n        const observer = new MutationObserver((mutationsList) => {\n            for (const mutation of mutationsList) {\n                if (mutation.type === 'childList') {\n                    this.replaceOptions_firefoxBefore63();\n                }\n            }\n        });\n        observer.observe(this.el, {childList: true});\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        if (!isWcsSelectSize(this.size)) {\n            console.error(`Invalid size value for wcs-select : \"${this.size}\". Must be one of \"${WcsSelectSizeValue.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n    }\n\n    componentWillUpdate() {\n        if (this.multiple) {\n            this.options\n                .forEach((opt: HTMLWcsSelectOptionElement) => opt.multiple = true);\n        }\n    }\n\n    private get options(): HTMLWcsSelectOptionElement[] {\n        const opts = this.el?.querySelectorAll('wcs-select-option');\n        if (opts && opts.length !== 0) {\n            return opts as any as HTMLWcsSelectOptionElement[];\n        }\n        return [];\n    }\n\n    private get notDisabledOptions(): HTMLWcsSelectOptionElement[] {\n        const opts = this.el?.querySelectorAll('wcs-select-option:not([disabled])');\n        if (opts && opts.length !== 0) {\n            return opts as any as HTMLWcsSelectOptionElement[];\n        }\n        return [];\n    }\n\n    private initMachineOptions(): Partial<MachineOptions<any, SelectEvent>> {\n        return {\n            actions: {\n                open: () => {\n                    if (!this.disabled) {\n                        this.expanded = true;\n                        this.focused = false;\n                        if(this.notDisabledOptions.length > 0) {\n                            this.lastFocusedOptionElement = this.lastSelectedOptionElement ?? this.notDisabledOptions[0];\n                            requestAnimationFrame(() => {\n                                this.lastFocusedOptionElement?.focus();\n                            });\n                        }\n                    }\n                },\n                close: (_, event: SelectEvent) => {\n                    if (event.type === 'CLOSE') {\n                        if (event.value?.shouldBlur) {\n                            this.el.closest(\"wcs-select\")?.focus();\n                            this.focused = false;\n                        } else {\n                            this.el.focus();\n                            this.focused = true\n                        }\n                    }\n                    this.expanded = false;\n                },\n                selectOption: (_, event) => {\n                    if (event.type === 'OPTION_SELECTED') {\n                        this.handleClickEvent(event.value);\n                    }\n                }\n            },\n            guards: {\n                enabled: () => !this.disabled\n            }\n        };\n    }\n\n    private handleClickEvent(event: SelectOptionChosedEvent) {\n        if (this.multiple) {\n            this.handleClickOnMultiple(event);\n        } else {\n            this.handleNormalClick(event);\n        }\n    }\n\n    private handleClickOnMultiple(event: SelectOptionChosedEvent) {\n        const index = this.values.findIndex(v => v.value === event.value);\n        if (index === -1) {\n            const {value, displayText, chipColor, chipBackgroundColor} = event;\n            this.values.push({value, displayText, chipColor, chipBackgroundColor});\n            event.source.selected = true;\n            this.lastSelectedOptionElement = event.source;\n        } else {\n            event.source.selected = false;\n            this.values.splice(index, 1);\n            if (this.lastSelectedOptionElement === event.source) this.lastSelectedOptionElement = null;\n        }\n        this.updateValueWithValues();\n    }\n\n    private updateValueWithValues() {\n        this.value = this.values.map(v => v.value);\n        this.displayText = this.values.length !== 0\n            ? this.values.map(v => v.displayText).join(', ')\n            : undefined;\n    }\n\n    private handleNormalClick(event: SelectOptionChosedEvent) {\n        // Reset other options to false if they were selected.\n        this.options\n            .forEach(option => {\n                if (option.selected) option.selected = false;\n            });\n\n        event.source.selected = true;\n        this.value = event.value;\n        this.displayText = event.displayText;\n        this.lastSelectedOptionElement = event.source;\n        this.stateService.send('CLOSE');\n    }\n\n    disconnectedCallback() {\n        this.stateService?.stop();\n    }\n\n    private addRippleEffect() {\n        // TODO: wrap MDCRipple dependency so we can eventually write our own or at least decouple a bit.\n        const ripple = new MDCRipple(this.controlEl);\n        ripple.unbounded = false;\n    }\n\n    private get hasValue(): boolean {\n        // TODO: change this behavior.\n        return this.displayText !== undefined;\n    }\n\n    @Listen('mousedown')\n    onMouseDown(event: MouseEvent) {\n        const clickOnScroll = isElement(event.target)\n            && (event.offsetX > event.target.clientWidth\n                || event.offsetY > event.target.clientHeight // If the click il located bellow the component height the click happen in the overlay\n                || event.offsetY < 0); // If the click is made above the component\n\n        const clickOnRemoveChip = event.composedPath()\n            .filter(x => {\n                const el = (x as HTMLElement);\n                return el.nodeName === 'svg' && el.classList.contains('chip');\n            })\n            .length > 0;\n\n        if (!clickOnScroll && !clickOnRemoveChip) {\n            this.stateService.send('CLICK');\n        }\n    }\n\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(event: MouseEvent) {\n        const firstSelectInEventPath = event.composedPath().filter(x => (x as HTMLElement).nodeName === 'WCS-SELECT')[0];\n        const clickOnCurrentSelect = firstSelectInEventPath === this.el;\n        // TODO: Move this logic in the state machine\n        // FIXME: Doesnt work with single + disabled option\n        if (this.expanded && !clickOnCurrentSelect) {\n            this.stateService.send('CLOSE');\n        }\n    }\n\n    @Listen('keydown')\n    onKeyDown(_event: KeyboardEvent) {\n        // close\n        if (this.stateService.getSnapshot().matches(\"closed\")) {\n            if (isEnterKey(_event) || (_event.altKey && isDownArrowKey(_event)) || isSpaceKey(_event)) {\n                _event.preventDefault();\n                _event.stopPropagation();\n                this.stateService.send('OPEN');\n                return;\n            }\n            if (this.multiple) {\n                if (isDownArrowKey(_event)) {\n                    this.stateService.send('OPEN');\n                }\n            } else {\n                if (isDownArrowKey(_event) || isRightArrowKey(_event)) {\n                    _event.preventDefault();\n                    this.selectClosestOption(\"next\");\n                }\n                if (isUpArrowKey(_event) || isLeftArrowKey(_event)) {\n                    _event.preventDefault();\n                    this.selectClosestOption(\"previous\");\n                } else if (isPageDownKey(_event)) {\n                    _event.preventDefault();\n                    this.selectLastOption();\n                } else if (isPageUpKey(_event) || isHomeKey(_event)) {\n                    _event.preventDefault();\n                    this.selectFirstOption();\n                }\n            }\n        }\n        // open\n        else if (this.stateService.getSnapshot().matches(\"opened\")) {\n            if (isEscapeKey(_event) || (_event.altKey && isUpArrowKey(_event))) {\n                this.stateService.send({type: \"CLOSE\", value: {shouldBlur: false}});\n            } else if (isTabKey(_event) || (_event.shiftKey && isTabKey(_event))) {\n                this.stateService.send({type: \"CLOSE\", value: {shouldBlur: true}});\n            } else if (isDownArrowKey(_event)) {\n                _event.preventDefault();\n                this.focusClosestOption(\"next\");\n            } else if (isUpArrowKey(_event)) {\n                _event.preventDefault();\n                this.focusClosestOption(\"previous\");\n            } else if (isPageUpKey(_event) || isHomeKey(_event)) {\n                _event.preventDefault();\n                this.focusFirstOption();\n            } else if (isPageDownKey(_event)) {\n                _event.preventDefault();\n                this.focusLastOption();\n            }\n        }\n    }\n\n    private getClosestActiveOptionIndexForState(direction: 'next' | 'previous', state: 'focused' | 'selected'): number | 'nothing' {\n        let currentIndex = Array.from(this.notDisabledOptions).indexOf(state === 'focused' ? this.lastFocusedOptionElement : this.lastSelectedOptionElement);\n\n        if (direction === 'next' && currentIndex < this.notDisabledOptions.length - 1) {\n            currentIndex++;\n        } else if (direction === 'previous' && currentIndex > 0) {\n            currentIndex--;\n        } else {\n            return 'nothing';\n        }\n        return currentIndex;\n    }\n\n    private selectOption(indexToSelect: number) {\n        this.lastSelectedOptionElement = this.notDisabledOptions[indexToSelect];\n        this.lastSelectedOptionElement.selected = true;\n        this.sendOptionSelectedToStateMachine({\n            source: this.lastSelectedOptionElement,\n            value: this.value,\n            displayText: this.lastSelectedOptionElement.innerText\n        });\n    }\n\n    private selectClosestOption(direction: 'next' | 'previous'): void {\n        const indexToSelect = this.getClosestActiveOptionIndexForState(direction, 'selected');\n        if(indexToSelect === 'nothing') return;\n        this.selectOption(indexToSelect);\n    }\n\n    private selectFirstOption() {\n        if(this.notDisabledOptions.length < 1) {\n            return;\n        }\n\n        this.selectOption(0);\n    }\n\n    private selectLastOption() {\n        if(this.notDisabledOptions.length < 1) {\n            return;\n        }\n\n        this.selectOption(this.notDisabledOptions.length - 1);\n    }\n\n    private focusOption(indexToFocus: number) {\n        this.lastFocusedOptionElement = this.notDisabledOptions[indexToFocus];\n        this.lastFocusedOptionElement?.focus();\n        this.el.setAttribute(\"aria-activedescendant\", this.lastFocusedOptionElement.id);\n    }\n\n    private focusClosestOption(direction: 'next' | 'previous'): void {\n        const indexToFocus = this.getClosestActiveOptionIndexForState(direction, 'focused');\n        if(indexToFocus === 'nothing') return;\n\n        this.focusOption(indexToFocus);\n    }\n\n    private focusFirstOption() {\n        this.focusOption(0);\n    }\n\n    private focusLastOption() {\n        this.focusOption(this.notDisabledOptions.length - 1);\n    }\n\n    @Listen('wcsSelectOptionClick')\n    selectedOptionChanged(event: CustomEvent<SelectOptionChosedEvent>) {\n        this.sendOptionSelectedToStateMachine(event.detail);\n    }\n\n    sendOptionSelectedToStateMachine(event: SelectOptionChosedEvent) {\n        this.stateService.send({type: 'OPTION_SELECTED', value: event});\n    }\n\n    onSlotchange() {\n        this.updateSelectedValue(this.value);\n    }\n\n    removeChip(v: SelectOptionValue) {\n        this.options\n            .forEach(opt => {\n                if (opt.value === v.value) {\n                    this.sendOptionSelectedToStateMachine({\n                        ...v,\n                        source: opt\n                    });\n                }\n            });\n    }\n\n    componentDidRender() {\n        this.popper?.update();\n    }\n\n    render() {\n        const ariaLabelValue = `${this.labelElement ? this.labelElement.innerText : ''} ${this.hasValue ? this.displayText : ''}`.trimEnd();\n        return (\n            <Host class={this.expanded ? 'expanded ' : ''}\n                  overlayDirection={this.overlayDirection} {...this.focusedAttributes()}\n                  role=\"combobox\"\n                  aria-haspopup=\"listbox\"\n                  aria-disabled={this.disabled ? 'true' : null}\n                  aria-expanded={this.expanded ? 'true' : 'false'}\n                  aria-controls={this.optionsId}\n                  aria-owns={this.optionsId}\n                  aria-multiselectable={this.multiple ? 'true' : 'false'}\n                  aria-label={ariaLabelValue}>\n                <div class=\"wcs-select-control\">\n                    <div class=\"wcs-select-value-container\">\n                    {this.hasValue\n                        ?\n                        (this.chips ?\n                            this.values.map((option: SelectOptionValue) =>\n                                    <SelectChips disabled={this.disabled} option={option}\n                                                  onRemove={this.removeChip.bind(this)}/>\n                            )\n                            : <label class=\"wcs-select-value\">{this.displayText}</label>)\n                        : <label class=\"wcs-select-placeholder\">{this.placeholder}</label>\n                    }\n                    </div>\n                    <SelectArrow up={this.expanded}/>\n                </div>\n                <div class=\"wcs-select-options\" id={this.optionsId} role=\"listbox\">\n                    <slot name=\"wcs-select-option\" onSlotchange={this.onSlotchange.bind(this)}/>\n                </div>\n            </Host>\n        );\n    }\n\n    private focusedAttributes() {\n        return !this.disabled ? {tabIndex: 0} : {};\n    }\n}\n\nlet selectIds = 0;\n"]}
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Method,\n    Prop,\n    State,\n    Watch\n} from '@stencil/core';\n\nimport { interpret, Interpreter, Machine, MachineConfig, MachineOptions } from 'xstate';\nimport {\n    isWcsSelectSize,\n    SelectChangeEventDetail,\n    SelectFilerChangeEventDetail,\n    WcsDefaultSelectFilterFn,\n    WcsSelectFilterFn,\n    WcsSelectSize,\n    WcsSelectSizeValue\n} from './select-interface';\nimport { SelectArrow } from './select-arrow';\nimport { SelectOptionChosedEvent, SelectOptionValue } from '../select-option/select-option-interface';\nimport { isElement, generateUniqueId, findItemLabel } from '../../utils/helpers';\nimport { SelectChips } from './select-chips';\nimport { MDCRipple } from '@material/ripple';\nimport { createPopper, Instance } from '@popperjs/core';\nimport { isEqual } from 'lodash-es';\nimport { getActionForKeyboardEvent, KeyboardEventAssociatedAction } from './select-keyboard-event';\nimport { isFocusable } from '../../utils/accessibility';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\ninterface SelectStateSchema {\n    states: {\n        closed: {};\n        opened: {};\n    };\n}\n\ntype SelectEvent\n    = { type: 'OPEN' }\n    | { type: 'CLOSE', value: { shouldBlur?: boolean, fromKeyboard: boolean } }\n    | { type: 'CLICK' }\n    | { type: 'OPTION_SELECTED', value: { option: SelectOptionChosedEvent, fromKeyboard: boolean } };\n\nconst SELECT_MACHINE_CONFIG: MachineConfig<any, SelectStateSchema, SelectEvent> = {\n    key: 'select',\n    initial: 'closed',\n    states: {\n        closed: {\n            entry: ['close'],\n            on: {\n                CLICK: 'opened',\n                OPEN: 'opened',\n                OPTION_SELECTED: {actions: ['selectOption']}\n            },\n        },\n        opened: {\n            entry: ['open'],\n            on: {\n                CLICK: 'closed',\n                CLOSE: 'closed',\n                OPTION_SELECTED: {actions: ['selectOption']}\n            },\n        },\n    }\n};\n\n/**\n * The select component (also named combobox) is a form component that allows users to select one or more options\n * from a list.\n * Use it with several slotted `wcs-select-option` inside.\n *\n * @slot filter-no-result Contains the customizable \"No result found\" div (autocomplete mode only).\n */\n@Component({\n    tag: 'wcs-select',\n    styleUrl: 'select.scss',\n    shadow: true\n})\nexport class Select implements ComponentInterface, MutableAriaAttribute {\n    private stateService!: Interpreter<any, SelectStateSchema, SelectEvent>;\n\n    private selectId = `wcs-select-${selectIds++}`;\n    private labelElement: HTMLWcsLabelElement;\n    private optionsEl!: HTMLDivElement;\n    private optionsId = generateUniqueId(\"OPTIONS\");\n    private controlEl!: HTMLDivElement;\n\n    // Only used for multiples.\n    private values: SelectOptionValue[];\n\n    /**\n     * This attribute mutate when a new option is selected OR unselected\n     * @private\n     */\n    private lastModifiedOptionElement: HTMLWcsSelectOptionElement | null;\n    /**\n     * It serves for accessibility feature: keyboard navigation. It serves to focus the option if defined when the select\n     * is opened based on which key pressed.\n     *\n     * When the select is <b>opened</b> user can navigate through options with keyboard:\n     *\n     * - Arrow right | down: `lastFocusedOptionElement` equals to the next option of `lastFocusedOptionElement` or\n     * the first if `lastFocusedOptionElement` is not defined\n     * - Arrow left | top: `lastFocusedOptionElement` equals to the previous enabled option of `lastFocusedOptionElement`\n     * or the first if `lastFocusedOptionElement` is not defined\n     * - Page up: `lastFocusedOptionElement` equals to the first enabled option\n     * - Page down: `lastFocusedOptionElement` equals to the last enabled option\n     * @private\n     */\n    private lastFocusedOptionElement: HTMLWcsSelectOptionElement | null;\n\n    // Only used for autocomplete.\n    private lastHighlightedOptionElement: HTMLWcsSelectOptionElement | null;\n    private autocompleteInput: HTMLInputElement;\n\n    @Element() private el!: HTMLWcsSelectElement;\n\n    /** Wether the select is expanded */\n    @State()\n    private expanded = false;\n\n    /**\n     * Specify the size (height) of the select.\n     */\n    @Prop({reflect: true}) size: WcsSelectSize = 'm';\n\n    /** Text to display for the selected option, when no option is selected, the value is undefined. */\n    @State()\n    private displayText: string;\n\n    /** When the host is focused. */\n    @State()\n    // @ts-ignore\n    private focused: boolean;\n\n    /** The currently selected value. */\n    @Prop({mutable: true})\n    value?: any | null;\n\n    /** The text to display when the select is empty. */\n    @Prop({mutable: true, reflect: true})\n    placeholder?: string | null;\n\n    /** If `true`, the user cannot interact with the select. */\n    @Prop({mutable: true})\n    disabled = false;\n\n    /** If `true`, the user can select multiple values at once. */\n    @Prop({reflect: true})\n    multiple = false;\n\n    /** If `true`, the select acts as an autocomplete field to filter your results. */\n    @Prop({reflect: true})\n    autocomplete = false;\n\n    /**\n     * Customizable sort function to change the comparison of values. If not provided, uses the default behavior :\n     * `option.textContent.toLowerCase().startsWith(filter.toLowerCase())`\n     */\n    @Prop({attribute: null}) filterFn: WcsSelectFilterFn;\n\n    /** If `true`, selected items are shown in chips mode. */\n    @Prop({reflect: true})\n    chips = false;\n\n    /** The name of the control, which is submitted with the form data. */\n    @Prop()\n    name?: string;\n\n    /** Function used to compare options, default : deep comparison. */\n    @Prop()\n    compareWith?: (optionValue: any, selectedValue: any) => boolean = (optionValue, selectedValue) => isEqual(optionValue, selectedValue);\n\n    private popper: Instance;\n\n    /**\n     * Boolean to toggle the text \"No result found\" (only for autocomplete with filter)\n     * @private\n     */\n    @State() private showNoResultFoundLabel = false;\n\n    /**\n     * Value of the autocomplete input field\n     * @private\n     */\n    @State() private autocompleteValue = undefined;\n\n    @State() private overlayDirection: 'bottom' | 'top' = 'bottom';\n\n    /** Emitted when the value has changed. */\n    @Event() wcsChange!: EventEmitter<SelectChangeEventDetail>;\n\n    /** Emitted when the select has focus. */\n    @Event() wcsFocus!: EventEmitter<void>;\n\n    /** Emitted when the select loses focus. */\n    @Event() wcsBlur!: EventEmitter<void>;\n\n    /** Emitted when the autocomplete filter has changed. */\n    @Event() wcsFilterChange!: EventEmitter<SelectFilerChangeEventDetail>;\n\n    /** Open the component. */\n    @Method()\n    async open() {\n        this.stateService.send('OPEN');\n    }\n\n    /** Close the component. */\n    @Method()\n    async close() {\n        this.stateService.send('CLOSE');\n    }\n\n    @Watch('value')\n    onValueChangeHandler(newValue: any) {\n        this.updateSelectedValue(newValue);\n    }\n\n    private updateSelectedValue(value: any) {\n        // If no value is passed, the select is reset.\n        if (!value) {\n            this.reset();\n        }\n        if (this.multiple) {\n            // If user don't give an array, we provide one\n            if (!Array.isArray(value)) {\n                value = [value];\n            }\n            this.values = [];\n\n            this.options.forEach((opt: HTMLWcsSelectOptionElement) => {\n                const isSelected = value ?\n                    value.findIndex(v => this.compareWith(opt.value, v)) !== -1\n                    : false;\n                if (isSelected) {\n                    this.values.push({\n                        value: opt.value,\n                        displayText: opt.innerText,\n                        chipColor: opt.chipColor,\n                        chipBackgroundColor: opt.chipBackgroundColor\n                    });\n                }\n                opt.selected = isSelected;\n            });\n            // update select placeholder text\n            this.displayText = this.values.length !== 0\n                ? this.values.map(v => v.displayText).join(', ')\n                : undefined;\n        } else {\n            this.options.forEach((opt: HTMLWcsSelectOptionElement) => {\n                const isSelected = this.compareWith(opt.value, value);\n                if (isSelected) {\n                    this.displayText = opt.innerText;\n                    if (this.autocomplete) {\n                        this.autocompleteValue = opt.innerText;\n                    }\n                }\n                opt.selected = isSelected;\n            });\n        }\n    }\n\n    /**\n     * Reset the select: unselects all options for multiple mode and displays the placeholder\n     * @private\n     */\n    private reset() {\n        this.values = [];\n        this.displayText = undefined;\n        if (this.autocomplete) {\n            this.autocompleteValue = undefined;\n        }\n        this.options.forEach((opt: HTMLWcsSelectOptionElement) => {\n            opt.selected = false;\n        });\n    }\n\n    componentDidLoad() {\n        this.optionsEl = this.el.shadowRoot.querySelector('.wcs-select-options');\n        this.controlEl = this.el.shadowRoot.querySelector('.wcs-select-control');\n\n        const stateMachine = Machine(\n            SELECT_MACHINE_CONFIG,\n            this.initMachineOptions()\n        );\n        // FIXME: type checking failed...\n        // @ts-ignore\n        this.stateService = interpret(stateMachine);\n\n        if (this.multiple) {\n            this.values = [];\n        }\n\n        this.addRippleEffect();\n        this.stateService.start();\n        if (this.optionsEl.querySelector('slot') === null) {\n            this.replaceOptions_firefoxBefore63();\n            this.listenDomUpdate_firefoxBefore63();\n        }\n\n        if (this.value !== undefined) {\n            this.updateSelectedValue(this.value);\n        }\n\n        this.popper = this.createPopperInstance();\n\n        // if the select is inside a wcs-form-field, we set an id to the wcs-label if present\n        // the wcs-label element reference is kept to compute aria-label value during the rendering\n        this.labelElement = findItemLabel(this.el);\n        if (this.labelElement) {\n            this.labelElement.id = this.selectId + \"-lbl\";\n        }\n    }\n\n    private createPopperInstance() {\n        return createPopper(this.controlEl, this.optionsEl, {\n            placement: \"bottom\",\n            modifiers: [\n                {\n                    name: 'offset',\n                    options: {\n                        offset: [0, 4] // we want 4px between select control and select options\n                    }\n                }\n            ]\n        });\n    }\n\n    private emitChange(newValue: any): void {\n        this.wcsChange.emit({\n            value: newValue\n        });\n    }\n\n    private replaceOptions_firefoxBefore63() {\n        Array.from(this.el.querySelectorAll('wcs-select-option'))\n            .forEach(option => {\n                if (option.parentNode === this.el) {\n                    this.el.removeChild(option);\n                    this.optionsEl.appendChild(option);\n                }\n            });\n    }\n\n    private listenDomUpdate_firefoxBefore63() {\n        const observer = new MutationObserver((mutationsList) => {\n            for (const mutation of mutationsList) {\n                if (mutation.type === 'childList') {\n                    this.replaceOptions_firefoxBefore63();\n                }\n            }\n        });\n        observer.observe(this.el, {childList: true});\n    }\n    \n    componentWillRender(): Promise<void> | void {\n        if (this.multiple) {\n            this.options\n              .forEach((opt: HTMLWcsSelectOptionElement) => opt.multiple = true);\n        }\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        if (!isWcsSelectSize(this.size)) {\n            console.error(`Invalid size value for wcs-select : \"${this.size}\". Must be one of \"${WcsSelectSizeValue.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string) {\n        if(this.autocomplete === false) {\n            this.el.setAttribute(attr, value);\n        } else {\n            this.autocompleteInput.setAttribute(attr, value);\n        }\n    }\n\n    private get options(): HTMLWcsSelectOptionElement[] {\n        const opts = this.el?.querySelectorAll('wcs-select-option');\n        if (opts && opts.length !== 0) {\n            return opts as any as HTMLWcsSelectOptionElement[];\n        }\n        return [];\n    }\n\n    private get notDisabledOptions(): HTMLWcsSelectOptionElement[] {\n        const opts = this.el?.querySelectorAll('wcs-select-option:not([disabled]):not([aria-hidden])');\n        if (opts && opts.length !== 0) {\n            return opts as any as HTMLWcsSelectOptionElement[];\n        }\n        return [];\n    }\n\n    private initMachineOptions(): Partial<MachineOptions<any, SelectEvent>> {\n        return {\n            actions: {\n                open: () => {\n                    if (!this.disabled) {\n                        this.expanded = true;\n                        this.focused = false;\n                        if(this.multiple === false && this.autocomplete && this.hasValue === false) {\n                            // If we open the select in single autocomplete mode, we update the autocomplete value at \n                            // the blur event so that the displayed value reflect the current select value. \n                            // Indeed, we have to tell the component to take the current filter state manually at the \n                            // opening (because the input event of the autocomplete field is not fired at this point).\n                            this.handleAutocompleteValueChange(this.autocompleteValue ?? '');\n                        }\n                        this.clearHighlightOnLastHighlightedOption();\n                        if (this.notDisabledOptions.length > 0) {\n                            this.lastFocusedOptionElement = this.lastModifiedOptionElement ?? this.notDisabledOptions[0];\n                            requestAnimationFrame(() => {\n                                this.autocomplete\n                                    ? this.autocompleteInput?.focus()\n                                    : this.lastFocusedOptionElement?.focus();\n                            });\n                        }\n                    }\n                },\n                close: (_, event: SelectEvent) => {\n                    if (event.type === 'CLOSE') {\n                        this.clearHighlightOnLastHighlightedOption();\n                        if (event.value?.shouldBlur) {\n                            this.focused = false;\n                        } else {\n                            if (this.autocomplete && event.value?.fromKeyboard) {\n                                // If we're in autocomplete mode, a keyboard event (e.g. escape) doesn't change the \n                                // focus (so this.el.focus() aren't called because the select was already focused)\n                                // but you still have to go back to the autocomplete input.\n                                this.focusAutocompleteInput();\n                            } else {\n                                // Otherwise, we focus the select element\n                                this.el.focus();\n                            }\n                            this.focused = true;\n                        }\n                    }\n                    this.expanded = false;\n                },\n                selectOption: (_, event) => {\n                    if (event.type === 'OPTION_SELECTED') {\n                        if (this.multiple) {\n                            this.handleOptionSelectedOnMultiple(event.value.option);\n                        } else {\n                            this.handleOptionSelectedOnSingle(event.value.option);\n                            this.stateService.send('CLOSE', {value: {fromKeyboard: event.value.fromKeyboard}});\n                        }\n\n                        if (this.autocomplete) {\n                            if (this.multiple) {\n                                requestAnimationFrame(() => {\n                                    this.autocompleteInput.focus();\n                                })\n                            } else {\n                                this.autocompleteValue = event.value.option.displayText;\n                            }\n                        }\n                        this.emitChange(this.value);\n                    }\n                }\n            },\n            guards: {\n                enabled: () => !this.disabled\n            }\n        };\n    }\n\n    private handleOptionSelectedOnMultiple(event: SelectOptionChosedEvent) {\n        const index = this.values.findIndex(v => v.value === event.value);\n        if (index === -1) {\n            const {value, displayText, chipColor, chipBackgroundColor} = event;\n            this.values.push({value, displayText, chipColor, chipBackgroundColor});\n            event.source.selected = true;\n        } else {\n            event.source.selected = false;\n            this.values.splice(index, 1);\n        }\n        this.lastModifiedOptionElement = event.source;\n        this.updateValueWithValues();\n    }\n\n    private updateValueWithValues() {\n        this.value = this.values.map(v => v.value);\n        this.displayText = this.values.length !== 0\n            ? this.values.map(v => v.displayText).join(', ')\n            : undefined;\n    }\n\n    private handleOptionSelectedOnSingle(event: SelectOptionChosedEvent) {\n        // Reset other options to false if they were selected.\n        this.options\n            .forEach(option => {\n                if (option.selected) option.selected = false;\n            });\n\n        event.source.selected = true;\n        this.value = event.value;\n        this.displayText = event.displayText;\n        this.lastModifiedOptionElement = event.source;\n    }\n\n    disconnectedCallback() {\n        this.stateService?.stop();\n    }\n\n    private addRippleEffect() {\n        // TODO: wrap MDCRipple dependency so we can eventually write our own or at least decouple a bit.\n        const ripple = new MDCRipple(this.controlEl);\n        ripple.unbounded = false;\n    }\n\n    private get hasValue(): boolean {\n        // TODO: change this behavior.\n        return this.displayText !== undefined;\n    }\n\n    @Listen('mousedown')\n    onMouseDown(event: MouseEvent) {\n        const clickOnScroll = isElement(event.target)\n            && (event.offsetX > event.target.clientWidth\n                || event.offsetY > event.target.clientHeight // If the click il located bellow the component height the click happen in the overlay\n                || event.offsetY < 0); // If the click is made above the component\n\n        const clickOnRemoveChip = event.composedPath()\n            .filter(x => {\n                const el = (x as HTMLElement);\n                return el.nodeName === 'svg' && el.classList.contains('chip');\n            })\n            .length > 0;\n\n        if (!clickOnScroll && !clickOnRemoveChip) {\n            this.stateService.send('CLICK');\n        }\n    }\n\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(event: MouseEvent) {\n        const firstSelectInEventPath = event.composedPath().filter(x => (x as HTMLElement).nodeName === 'WCS-SELECT')[0];\n        const clickOnCurrentSelect = firstSelectInEventPath === this.el;\n        // TODO: Move this logic in the state machine\n        // FIXME: Doesnt work with single + disabled option\n        if (this.expanded && !clickOnCurrentSelect) {\n            this.stateService.send({type: 'CLOSE', value: {shouldBlur: true, fromKeyboard: false}});\n        }\n    }\n\n    @Listen('keydown')\n    onKeyDown(_event: KeyboardEvent) {\n        const currentState = this.stateService.getSnapshot().matches(\"closed\") ? 'closed' : 'opened';\n        let type: 'autocomplete_unique' | 'autocomplete_multiple' | 'unique' | 'multiple';\n        if (this.autocomplete) {\n            type = this.multiple ? 'autocomplete_multiple' : 'autocomplete_unique';\n        } else {\n            type = this.multiple ? 'multiple' : 'unique';\n        }\n        const actionsFromKeyboardEvents: KeyboardEventAssociatedAction[] = getActionForKeyboardEvent(_event, currentState, type);\n        \n        // If we have at least one associated actions, we prevent the default behavior of the event. \n        // Except if the action is a focus move (we have to handle the preventDefault behavior ourselves in the action implementation)\n        if (actionsFromKeyboardEvents.length != 0 && actionsFromKeyboardEvents.filter(a => a.kind === 'MoveFocus').length === 0) {\n            _event.preventDefault();\n        }\n\n        for (const actionFromKeyboardEvent of actionsFromKeyboardEvents) {\n            this.doActionFromKeyboardEventAssociatedAction(actionFromKeyboardEvent, _event);\n        }\n    }\n\n    doActionFromKeyboardEventAssociatedAction(actionFromKeyboardEvent: KeyboardEventAssociatedAction, event: KeyboardEvent) {\n        switch (actionFromKeyboardEvent.kind) {\n            case \"CloseSelect\":\n                this.stateService.send({\n                    type: 'CLOSE',\n                    value: {shouldBlur: actionFromKeyboardEvent.shouldBlur, fromKeyboard: true}\n                });\n                break;\n            case \"OpenSelect\":\n                this.stateService.send('OPEN');\n                break;\n            case \"SelectOption\":\n                switch (actionFromKeyboardEvent.target) {\n                    case \"next\":\n                        this.selectClosestOption('next');\n                        break;\n                    case \"previous\":\n                        this.selectClosestOption('previous');\n                        break;\n                    case \"first\":\n                        this.selectFirstOption();\n                        break;\n                    case \"last\":\n                        this.selectLastOption();\n                        break;\n                    case \"lastHighlighted\": {\n                        // We have to handle enterKey here because with autocomplete mode, a wcs-select-option\n                        // is only highlighted, therefore the event is not fired\n                        const indexToSelect = Array.from(this.notDisabledOptions).indexOf(this.lastHighlightedOptionElement);\n\n                        if (indexToSelect !== -1) {\n                            this.lastModifiedOptionElement = this.lastHighlightedOptionElement;\n                            this.selectOption(indexToSelect, true);\n                        }\n                        break;\n                    }\n                }\n                break;\n            case \"ClearAutocompleteInput\":\n                this.autocompleteValue = '';\n                break;\n            case \"ClearHighlight\":\n                this.clearHighlightOnLastHighlightedOption();\n                break;\n            case \"HighlightOption\":\n                switch (actionFromKeyboardEvent.target) {\n                    case \"next\":\n                        this.highlightClosestOption('next');\n                        break;\n                    case \"previous\":\n                        this.highlightClosestOption('previous');\n                        break;\n                    case \"first\":\n                        this.highlightFirstOption();\n                        break;\n                    case \"last\":\n                        this.highlightLastOption();\n                        break;\n                    default:\n                        break;\n                }\n                break;\n            case \"FocusOption\":\n                switch (actionFromKeyboardEvent.target) {\n                    case \"next\":\n                        this.focusClosestOption('next');\n                        break;\n                    case \"previous\":\n                        this.focusClosestOption('previous')\n                        break;\n                    case \"first\":\n                        this.focusFirstOption()\n                        break;\n                    case \"last\":\n                        this.focusLastOption();\n                        break;\n                    case \"lastFocused\":\n                        if (this.lastFocusedOptionElement != null) {\n                            this.focusOption(Array.from(this.notDisabledOptions).indexOf(this.lastFocusedOptionElement));\n                        }\n                        break;\n                    default:\n                        break;\n                }\n                break;\n            case \"MoveFocus\":\n                switch (actionFromKeyboardEvent.target) {\n                    case \"previous\": {\n                        let elementToFocus: Element = this.el.previousElementSibling ?? this.el.parentElement;\n                        while (elementToFocus) {\n                            if (isFocusable(elementToFocus)) break;\n                            elementToFocus = elementToFocus.previousElementSibling ?? elementToFocus.parentElement;\n                        }\n                        if (elementToFocus) {\n                            event.preventDefault();\n                            (elementToFocus as HTMLElement).focus();\n                        }\n                        break;\n                    }\n                    default:\n                        break;\n                }\n                break;\n            default:\n                throw new Error(\"Internal error\");\n        }\n    }\n\n    private getClosestActiveOptionIndexForState(direction: 'next' | 'previous', state: 'highlighted' | 'focused' | 'modified'): number | 'nothing' {\n        let concernedOption: HTMLWcsSelectOptionElement | null;\n        switch (state) {\n            case 'focused':\n                concernedOption = this.lastFocusedOptionElement;\n                break;\n            case 'modified':\n                concernedOption = this.lastModifiedOptionElement;\n                break;\n            case 'highlighted':\n                concernedOption = this.lastHighlightedOptionElement;\n                break;\n            default:\n                concernedOption = null;\n        }\n        let currentIndex = Array.from(this.notDisabledOptions).indexOf(concernedOption);\n\n        const MIN_INDEX = 0;\n        const MAX_INDEX = this.notDisabledOptions.length - 1;\n\n        if (direction === 'next' && currentIndex < MAX_INDEX) {\n            currentIndex++;\n        } else if (direction === 'previous' && currentIndex > MIN_INDEX) {\n            currentIndex--;\n        } else {\n            if (!this.autocomplete)\n                return 'nothing';\n\n            // Used to scroll options infinitely with keyboard (autocomplete mode only)\n            if (direction === 'next' && currentIndex >= MAX_INDEX) {\n                currentIndex = 0;\n            }\n            if (direction === 'previous' && currentIndex === MIN_INDEX) {\n                currentIndex = MAX_INDEX;\n            }\n        }\n        return currentIndex;\n    }\n\n    /**\n     * Selects the non-disabled option with the index passed as a parameter.\n     * The method sends an event to the state machine (the same as when clicking on an option with the mouse)\n     * @param indexToSelect Option index within non-deactivated options list\n     * @param fromKeyboard\n     * @private\n     */\n    private selectOption(indexToSelect: number, fromKeyboard = false) {\n        const optionToSelect = this.notDisabledOptions[indexToSelect];\n\n        if (!optionToSelect) return;\n\n        this.sendOptionSelectedToStateMachine({\n            source: optionToSelect,\n            value: optionToSelect.value,\n            displayText: optionToSelect.innerText\n        }, fromKeyboard);\n    }\n\n    private selectClosestOption(direction: 'next' | 'previous'): void {\n        const indexToSelect = this.getClosestActiveOptionIndexForState(direction, 'modified');\n        if (indexToSelect === 'nothing') return;\n        this.selectOption(indexToSelect, true);\n    }\n\n    private selectFirstOption() {\n        if (this.notDisabledOptions.length < 1) {\n            return;\n        }\n\n        this.selectOption(0, true);\n    }\n\n    private selectLastOption() {\n        if (this.notDisabledOptions.length < 1) {\n            return;\n        }\n\n        this.selectOption(this.notDisabledOptions.length - 1, true);\n    }\n\n    private focusOption(indexToFocus: number) {\n        this.lastFocusedOptionElement = this.notDisabledOptions[indexToFocus];\n        this.lastFocusedOptionElement?.focus();\n        this.el.setAttribute(\"aria-activedescendant\", this.lastFocusedOptionElement.id);\n    }\n\n    private focusClosestOption(direction: 'next' | 'previous'): void {\n        const indexToFocus = this.getClosestActiveOptionIndexForState(direction, 'focused');\n        if (indexToFocus === 'nothing') return;\n\n        this.focusOption(indexToFocus);\n    }\n\n    private focusFirstOption() {\n        this.focusOption(0);\n    }\n\n    private focusLastOption() {\n        this.focusOption(this.notDisabledOptions.length - 1);\n    }\n\n    @Listen('wcsSelectOptionClick')\n    selectedOptionChanged(event: CustomEvent<SelectOptionChosedEvent>) {\n        this.sendOptionSelectedToStateMachine(event.detail);\n    }\n\n    sendOptionSelectedToStateMachine(event: SelectOptionChosedEvent, fromKeyboard = false) {\n        this.stateService.send({type: 'OPTION_SELECTED', value: {option: event, fromKeyboard}});\n    }\n\n    onSlotchange() {\n        this.updateSelectedValue(this.value);\n    }\n\n    removeChip(v: SelectOptionValue) {\n        this.options\n            .forEach(opt => {\n                if (opt.value === v.value) {\n                    this.sendOptionSelectedToStateMachine({\n                        ...v,\n                        source: opt\n                    });\n                }\n            });\n    }\n\n    //region Autocomplete mode\n\n    private highlightOption(indexToHighlight: number) {\n        this.clearHighlightOnLastHighlightedOption();\n        this.lastHighlightedOptionElement = this.notDisabledOptions[indexToHighlight];\n        if (this.lastHighlightedOptionElement) {\n            this.lastHighlightedOptionElement.highlighted = true;\n            this.autocompleteInput.setAttribute(\"aria-activedescendant\", this.lastHighlightedOptionElement.id);\n            requestAnimationFrame(() => {\n                this.lastHighlightedOptionElement.scrollIntoView({block: \"nearest\", inline: \"nearest\"});\n            })\n        }\n    }\n\n    private highlightFirstOption() {\n        this.highlightOption(0);\n    }\n\n    private highlightLastOption() {\n        this.highlightOption(this.notDisabledOptions.length - 1);\n    }\n\n    private highlightClosestOption(direction: 'next' | 'previous'): void {\n        const indexToHighlight = this.getClosestActiveOptionIndexForState(direction, 'highlighted');\n        if (indexToHighlight === 'nothing') return;\n\n        this.highlightOption(indexToHighlight);\n    }\n\n    /**\n     * This method removes the highlight that applies to the last highlighted option if any.\n     * This is used only for accessibility of autocomplete mode.\n     * @private\n     */\n    private clearHighlightOnLastHighlightedOption() {\n        if (this.lastHighlightedOptionElement) {\n            this.lastHighlightedOptionElement.highlighted = false;\n            this.lastHighlightedOptionElement = null;\n        }\n    }\n\n    private onAutocompleteInputEvent(e: InputEvent) {\n        const filter = this.autocompleteInput.value ?? '';\n\n        this.handleAutocompleteValueChange(filter);\n        // Avoid the inputEvent event to bubble and be emitted, we rather use wcsFilterChange in this case :\n        e.stopPropagation();\n\n    }\n    \n    private handleAutocompleteValueChange(filter: string): void {\n        this.clearHighlightOnLastHighlightedOption();\n        const newValueIsDifferentFromLastModifiedOption = this.lastModifiedOptionElement == null || this.lastModifiedOptionElement?.textContent !== this.autocompleteValue;\n        if (!this.expanded && newValueIsDifferentFromLastModifiedOption) {\n            this.open();\n        }\n\n        if (filter.length) {\n            const [matchingOptions, optionsToHide] = [[], []];\n            const filteringFunction: WcsSelectFilterFn = this.filterFn ?? WcsDefaultSelectFilterFn;\n            this.options.forEach((optionEl: HTMLWcsSelectOptionElement) =>\n                (filteringFunction(optionEl, filter) ? matchingOptions : optionsToHide).push(optionEl)\n            );\n\n            this.showNoResultFoundLabel = matchingOptions.length === 0;\n            matchingOptions.forEach(o => {\n                o.hidden = false;\n                o.removeAttribute(\"aria-hidden\");\n            });\n            optionsToHide.forEach(o => {\n                o.hidden = true;\n                o.setAttribute(\"aria-hidden\", \"true\");\n            });\n        } else {\n            this.showNoResultFoundLabel = false;\n            this.options.forEach(o => {\n                o.hidden = false;\n                o.removeAttribute(\"aria-hidden\");\n            });\n        }\n\n        this.autocompleteValue = filter;\n        this.wcsFilterChange.emit({\n            value: filter,\n        });\n    }\n\n    @Listen('focus')\n    onFocus() {\n        if (this.autocomplete) {\n            this.focusAutocompleteInput();\n        }\n    }\n\n    private focusAutocompleteInput(): void {\n        this.autocompleteInput?.focus();\n    }\n\n    //endregion\n\n    componentDidRender() {\n        this.popper?.update();\n    }\n\n    render() {\n        const ariaLabelValue = `${this.labelElement ? this.labelElement.innerText : ''} ${this.hasValue ? this.displayText : ''}`.trimEnd();\n        return (\n            <Host class={this.expanded ? 'expanded ' : ''}\n                  overlayDirection={this.overlayDirection}\n                  {...this.focusedAttributes()}\n                  role={!this.autocomplete ? \"combobox\" : null}\n                  aria-haspopup={!this.autocomplete ? \"listbox\" : null}\n                  aria-owns={!this.autocomplete ? this.optionsId : null}\n                  aria-controls={!this.autocomplete ? this.optionsId : null}\n                  aria-disabled={this.disabled ? 'true' : null}\n                  aria-expanded={this.expanded ? 'true' : 'false'}\n                  aria-multiselectable={this.multiple ? 'true' : 'false'}\n                  aria-label={ariaLabelValue}>\n                <div class=\"wcs-select-control\">\n                    <div class=\"wcs-select-value-container\">\n                        {this.hasValue\n                            ?\n                            (this.chips ?\n                                this.values.map((option: SelectOptionValue) =>\n                                    <SelectChips disabled={this.disabled} option={option}\n                                                 onRemove={this.removeChip.bind(this)}/>\n                                )\n                                : (!this.autocomplete || this.autocomplete && this.multiple) &&\n                                <label class=\"wcs-select-value\">{this.displayText}</label>)\n                            : !this.autocomplete && <label class=\"wcs-select-placeholder\">{this.placeholder}</label>\n                        }\n                        {this.autocomplete && <input class=\"autocomplete-field\"\n                                                         value={this.autocompleteValue}\n                                                         role=\"combobox\"\n                                                         aria-haspopup=\"listbox\"\n                                                         aria-label={ariaLabelValue}\n                                                         aria-disabled={this.disabled ? 'true' : null}\n                                                         aria-expanded={this.expanded ? 'true' : 'false'}\n                                                         aria-controls={this.optionsId}\n                                                         aria-owns={this.optionsId}\n                                                         aria-multiselectable={this.multiple ? 'true' : 'false'}\n                                                         aria-autocomplete=\"list\"\n                                                         onBlur={(e) => this.onAutocompleteFieldBlur(e)}\n                                                         placeholder={this.values?.length ? null : this.placeholder}\n                                                         onInput={(e) => this.onAutocompleteInputEvent(e)}\n                                                         ref={el => this.autocompleteInput = el}/>\n                        }\n                    </div>\n                    <SelectArrow up={this.expanded}/>\n                </div>\n                <div class=\"wcs-select-options\" id={this.optionsId} role=\"listbox\">\n                    <slot name=\"options\" onSlotchange={this.onSlotchange.bind(this)}/>\n                    {(this.autocomplete && this.showNoResultFoundLabel) &&\n                        <div class=\"noresult-container\">\n                            <slot name=\"filter-no-result\">\n                                <span>Aucun résultat</span>\n                            </slot>\n                        </div>}\n                </div>\n            </Host>\n        );\n    }\n\n    private focusedAttributes() {\n        return !this.disabled ? {tabIndex: 0} : {};\n    }\n\n    private onAutocompleteFieldBlur(_e: FocusEvent) {\n        if (this.multiple === false && this.autocomplete === true) {\n            this.autocompleteValue = this.displayText;\n        }\n    }\n}\n\nlet selectIds = 0;\n"]}

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

@@ -286,6 +286,10 @@ wcs-select-option[disabled] {
   color: var(--wcs-text-disabled);
 }
 
+wcs-select-option[hidden] {
+  display: none;
+}
+
 wcs-select-option[selected] {
   color: var(--wcs-primary);
   background-color: var(--wcs-light);
@@ -297,4 +301,15 @@ wcs-select-option[multiple] wcs-checkbox {
 }
 wcs-select-option[multiple]:hover wcs-checkbox {
   --wcs-checkbox-border-color: var(--wcs-primary);
+}
+
+wcs-select-option[highlighted] {
+  outline: solid 1px var(--wcs-primary);
+  outline-offset: -1px;
+  border-radius: var(--wcs-border-radius);
+  color: var(--wcs-primary);
+  background-color: var(--wcs-light);
+}
+wcs-select-option[highlighted] wcs-checkbox {
+  --wcs-checkbox-border-color: var(--wcs-primary);
 }

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

@@ -2,13 +2,14 @@ import { h, Host } from '@stencil/core';
 import { MDCRipple } from '@material/ripple';
 import { isEnterKey, generateUniqueId, isSpaceKey } from "../../utils/helpers";
 /**
- * Select option component, use in conjunction with wcs-select.
+ * The select option is a subcomponent of `wcs-select` that represents a single option in a select list.
  */
 export class SelectOption {
   constructor() {
     this.selectOptionId = generateUniqueId(this.el.tagName);
     this.disabled = false;
     this.selected = false;
+    this.highlighted = false;
     this.value = undefined;
     this.chipColor = undefined;
     this.chipBackgroundColor = undefined;
@@ -50,7 +51,7 @@ export class SelectOption {
     }
   }
   render() {
-    return (h(Host, { id: this.selectOptionId, "aria-selected": this.selected ? 'true' : 'false', slot: "wcs-select-option", role: "option", tabindex: "-1" }, this.multiple &&
+    return (h(Host, { id: this.selectOptionId, "aria-selected": this.selected || this.highlighted ? 'true' : 'false', slot: "options", role: "option", tabindex: "-1" }, this.multiple &&
       h("wcs-checkbox", { tabindex: "-1", checked: this.selected }), h("slot", null)));
   }
   static get is() { return "wcs-select-option"; }
@@ -78,7 +79,7 @@ export class SelectOption {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Wether this option can be selected."
+          "text": "Whether this option can be selected."
         },
         "attribute": "disabled",
         "reflect": true,
@@ -96,12 +97,36 @@ export class SelectOption {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Wether this option is selected."
+          "text": "Whether this option is selected."
         },
         "attribute": "selected",
         "reflect": true,
         "defaultValue": "false"
       },
+      "highlighted": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }, {
+              "name": "ignore",
+              "text": undefined
+            }],
+          "text": "This property mustn't be set by hand, it is used by the `wcs-select` component.\nApplies a highlight design on the option for autocomplete mode."
+        },
+        "attribute": "highlighted",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "value": {
         "type": "any",
         "mutable": false,
@@ -171,7 +196,7 @@ export class SelectOption {
               "name": "ignore",
               "text": undefined
             }],
-          "text": "This property musn't be set by hand, it is used by the `wcs-select` component.\nIf you want a multiple select, set `multiple` attribute on the parent select instead."
+          "text": "This property mustn't be set by hand, it is used by the `wcs-select` component.\nIf you want a multiple select, set `multiple` attribute on the parent select instead."
         },
         "attribute": "multiple",
         "reflect": true,

package/dist/collection/components/select-option/select-option.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-option.js","sourceRoot":"","sources":["../../../src/components/select-option/select-option.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAoC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEnH,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAC,UAAU,EAAE,gBAAgB,EAAE,UAAU,EAAC,MAAM,qBAAqB,CAAC;AAE7E;;GAEG;AAKH,MAAM,OAAO,YAAY;;IAEb,mBAAc,GAAW,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;oBAGhB,KAAK;oBAGL,KAAK;;;;oBAiBL,KAAK;;EAWxD,iBAAiB;IACb,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;MAC1B,yDAAyD;MACzD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,SAAS,IAAI,EAAE,CAAC;KACxC;EACL,CAAC;EAED,gBAAgB;IACZ,IAAI,CAAC,SAAS,GAAG,IAAI,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;EAC5C,CAAC;EAEO,YAAY,CAAC,KAAc;IAC/B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAChB,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,4DAA4D;MAC5D,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC;MACtC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC;QAC3B,MAAM,EAAE,IAAI,CAAC,EAAE;QACf,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,WAAW;OACd,CAAC,CAAC;KACN;EACL,CAAC;EAGD,WAAW,CAAC,KAAiB;IACzB,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;EAC7B,CAAC;EAED;;;KAGG;EAEH,aAAa,CAAC,KAAoB;IAC9B,IAAG,UAAU,CAAC,KAAK,CAAC,IAAI,UAAU,CAAC,KAAK,CAAC,EAAE;MACvC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;MACzB,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,KAAK,CAAC,eAAe,EAAE,CAAC;KAC3B;EACL,CAAC;EAED,MAAM;IACF,OAAO,CACH,EAAC,IAAI,IAAC,EAAE,EAAE,IAAI,CAAC,cAAc,mBAAiB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAAE,IAAI,EAAC,mBAAmB,EAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAC,IAAI;MAC/H,IAAI,CAAC,QAAQ;QACV,oBAAc,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,GAAiB;MAEvE,eAAQ,CACL,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, Event, Prop, EventEmitter, ComponentInterface, h, Host, Listen } from '@stencil/core';\nimport { SelectOptionChosedEvent } from './select-option-interface';\nimport { MDCRipple } from '@material/ripple';\nimport {isEnterKey, generateUniqueId, isSpaceKey} from \"../../utils/helpers\";\n\n/**\n * Select option component, use in conjunction with wcs-select.\n */\n@Component({\n    tag: 'wcs-select-option',\n    styleUrl: 'select-option.scss'\n})\nexport class SelectOption implements ComponentInterface {\n    @Element() private el!: HTMLWcsSelectOptionElement;\n    private selectOptionId: string = generateUniqueId(this.el.tagName);\n\n    /** Wether this option can be selected. */\n    @Prop({ mutable: true, reflect: true }) disabled = false;\n\n    /** Wether this option is selected. */\n    @Prop({ mutable: true, reflect: true }) selected = false;\n\n    /** The option value, not what's displayed, use inner text instead. */\n    @Prop() value?: any;\n\n    /** Chip's displayed text color. */\n    @Prop() chipColor?: string;\n\n    /** Chip's background color. */\n    @Prop() chipBackgroundColor?: string;\n\n    /**\n     * This property musn't be set by hand, it is used by the `wcs-select` component.\n     * If you want a multiple select, set `multiple` attribute on the parent select instead.\n     * @internal\n     * @ignore\n     */\n    @Prop({ reflect: true, mutable: true }) multiple = false;\n\n    // @ts-ignore\n    private mdcRipple: MDCRipple;\n\n    @Event({\n        eventName: 'wcsSelectOptionClick',\n    })\n    // TODO: find a better name ?\n    wcsSelectOptionClick: EventEmitter<SelectOptionChosedEvent>;\n\n    componentWillLoad() {\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.mdcRipple = new MDCRipple(this.el);\n    }\n\n    private chooseOption(event: UIEvent) {\n        if (!this.disabled) {\n            event.stopPropagation();\n            // We select inner HTML as it's what's passed into the slot.\n            const displayText = this.el.innerText;\n            this.wcsSelectOptionClick.emit({\n                source: this.el,\n                value: this.value,\n                displayText\n            });\n        }\n    }\n\n    @Listen('mousedown')\n    onMouseDown(event: MouseEvent) {\n        this.chooseOption(event);\n    }\n\n    /**\n     * Handles the keydown event to update the selection.\n     * @param event keyboard event\n     */\n    @Listen('keydown')\n    handleKeydown(event: KeyboardEvent) {\n        if(isEnterKey(event) || isSpaceKey(event)) {\n            this.chooseOption(event);\n            event.preventDefault();\n            event.stopPropagation();\n        }\n    }\n\n    render() {\n        return (\n            <Host id={this.selectOptionId} aria-selected={this.selected ? 'true' : 'false'} slot=\"wcs-select-option\" role=\"option\" tabindex=\"-1\">\n                {this.multiple &&\n                    <wcs-checkbox tabindex=\"-1\" checked={this.selected}></wcs-checkbox>\n                }\n                <slot />\n            </Host>\n        );\n    }\n}\n"]}
+{"version":3,"file":"select-option.js","sourceRoot":"","sources":["../../../src/components/select-option/select-option.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAoC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEnH,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAC,UAAU,EAAE,gBAAgB,EAAE,UAAU,EAAC,MAAM,qBAAqB,CAAC;AAE7E;;GAEG;AAKH,MAAM,OAAO,YAAY;;IAEb,mBAAc,GAAW,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;oBAGhB,KAAK;oBAGL,KAAK;uBAOF,KAAK;;;;oBAiBR,KAAK;;EAWxD,iBAAiB;IACb,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;MAC1B,yDAAyD;MACzD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,SAAS,IAAI,EAAE,CAAC;KACxC;EACL,CAAC;EAED,gBAAgB;IACZ,IAAI,CAAC,SAAS,GAAG,IAAI,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;EAC5C,CAAC;EAEO,YAAY,CAAC,KAAc;IAC/B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAChB,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,4DAA4D;MAC5D,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC;MACtC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC;QAC3B,MAAM,EAAE,IAAI,CAAC,EAAE;QACf,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,WAAW;OACd,CAAC,CAAC;KACN;EACL,CAAC;EAGD,WAAW,CAAC,KAAiB;IACzB,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;EAC7B,CAAC;EAED;;;KAGG;EAEH,aAAa,CAAC,KAAoB;IAC9B,IAAG,UAAU,CAAC,KAAK,CAAC,IAAI,UAAU,CAAC,KAAK,CAAC,EAAE;MACvC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;MACzB,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,KAAK,CAAC,eAAe,EAAE,CAAC;KAC3B;EACL,CAAC;EAED,MAAM;IACF,OAAO,CACH,EAAC,IAAI,IAAC,EAAE,EAAE,IAAI,CAAC,cAAc,mBAAiB,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAAE,IAAI,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAC,IAAI;MACzI,IAAI,CAAC,QAAQ;QACV,oBAAc,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,GAAiB;MAEvE,eAAQ,CACL,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, Event, Prop, EventEmitter, ComponentInterface, h, Host, Listen } from '@stencil/core';\nimport { SelectOptionChosedEvent } from './select-option-interface';\nimport { MDCRipple } from '@material/ripple';\nimport {isEnterKey, generateUniqueId, isSpaceKey} from \"../../utils/helpers\";\n\n/**\n * The select option is a subcomponent of `wcs-select` that represents a single option in a select list.\n */\n@Component({\n    tag: 'wcs-select-option',\n    styleUrl: 'select-option.scss'\n})\nexport class SelectOption implements ComponentInterface {\n    @Element() private el!: HTMLWcsSelectOptionElement;\n    private selectOptionId: string = generateUniqueId(this.el.tagName);\n\n    /** Whether this option can be selected. */\n    @Prop({ mutable: true, reflect: true }) disabled = false;\n\n    /** Whether this option is selected. */\n    @Prop({ mutable: true, reflect: true }) selected = false;\n    \n    /** This property mustn't be set by hand, it is used by the `wcs-select` component.\n     * Applies a highlight design on the option for autocomplete mode.\n     * @internal\n     * @ignore\n    */\n    @Prop({ mutable: true, reflect: true }) highlighted = false;\n\n    /** The option value, not what's displayed, use inner text instead. */\n    @Prop() value?: any;\n\n    /** Chip's displayed text color. */\n    @Prop() chipColor?: string;\n\n    /** Chip's background color. */\n    @Prop() chipBackgroundColor?: string;\n\n    /**\n     * This property mustn't be set by hand, it is used by the `wcs-select` component.\n     * If you want a multiple select, set `multiple` attribute on the parent select instead.\n     * @internal\n     * @ignore\n     */\n    @Prop({ reflect: true, mutable: true }) multiple = false;\n\n    // @ts-ignore\n    private mdcRipple: MDCRipple;\n\n    @Event({\n        eventName: 'wcsSelectOptionClick',\n    })\n    // TODO: find a better name ?\n    wcsSelectOptionClick: EventEmitter<SelectOptionChosedEvent>;\n\n    componentWillLoad() {\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.mdcRipple = new MDCRipple(this.el);\n    }\n\n    private chooseOption(event: UIEvent) {\n        if (!this.disabled) {\n            event.stopPropagation();\n            // We select inner HTML as it's what's passed into the slot.\n            const displayText = this.el.innerText;\n            this.wcsSelectOptionClick.emit({\n                source: this.el,\n                value: this.value,\n                displayText\n            });\n        }\n    }\n\n    @Listen('mousedown')\n    onMouseDown(event: MouseEvent) {\n        this.chooseOption(event);\n    }\n\n    /**\n     * Handles the keydown event to update the selection.\n     * @param event keyboard event\n     */\n    @Listen('keydown')\n    handleKeydown(event: KeyboardEvent) {\n        if(isEnterKey(event) || isSpaceKey(event)) {\n            this.chooseOption(event);\n            event.preventDefault();\n            event.stopPropagation();\n        }\n    }\n\n    render() {\n        return (\n            <Host id={this.selectOptionId} aria-selected={this.selected || this.highlighted ? 'true' : 'false'} slot=\"options\" role=\"option\" tabindex=\"-1\">\n                {this.multiple &&\n                    <wcs-checkbox tabindex=\"-1\" checked={this.selected}></wcs-checkbox>\n                }\n                <slot />\n            </Host>\n        );\n    }\n}\n"]}

package/dist/collection/components/switch/switch.js

@@ -13,8 +13,11 @@ export class Switch {
       checked: this.checked
     });
   }
+  async setAriaAttribute(attr, value) {
+    this.input.setAttribute(attr, value);
+  }
   render() {
-    return (h(Host, null, h("label", { htmlFor: this.name, class: "wcs-container", "aria-disabled": this.disabled }, h("input", { onChange: (evt) => this.toggleChange(evt), checked: this.checked, class: "wcs-switch", type: "checkbox", name: this.name, disabled: this.disabled, id: this.name }), h("span", { class: "wcs-checkmark" }), h("span", { class: "text" }, h("slot", null)))));
+    return (h(Host, null, h("label", { htmlFor: this.name, class: "wcs-container", "aria-disabled": this.disabled }, h("input", { onChange: (evt) => this.toggleChange(evt), checked: this.checked, class: "wcs-switch", type: "checkbox", name: this.name, disabled: this.disabled, ref: el => { this.input = el; }, id: this.name }), h("span", { class: "wcs-checkmark" }), h("span", { class: "text" }, h("slot", null)))));
   }
   static get is() { return "wcs-switch"; }
   static get encapsulation() { return "shadow"; }
@@ -132,6 +135,36 @@ export class Switch {
         }
       }];
   }
+  static get methods() {
+    return {
+      "setAriaAttribute": {
+        "complexType": {
+          "signature": "(attr: AriaAttributeName, value: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "AriaAttributeName": {
+              "location": "import",
+              "path": "../../utils/mutable-aria-attribute"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
 }
 let switchIds = 0;
 //# sourceMappingURL=switch.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/switch/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQlG,MAAM,OAAO,MAAM;;IACP,aAAQ,GAAG,cAAc,SAAS,EAAE,EAAE,CAAC;gBAEhC,IAAI,CAAC,QAAQ;mBAKK,KAAK;0BAUwB,QAAQ;oBAK1C,KAAK;;EAEjC,YAAY,CAAC,MAAa;IACtB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC7B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;MAChB,OAAO,EAAE,IAAI,CAAC,OAAO;KACxB,CAAC,CAAC;EACP,CAAC;EAED,MAAM;IACF,OAAO,CACH,EAAC,IAAI;MACD,aAAO,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,eAAe,mBAAgB,IAAI,CAAC,QAAQ;QACzE,aAAO,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,EACzC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,IAAI,GACZ;QACR,YAAM,KAAK,EAAC,eAAe,GAAQ;QACnC,YAAM,KAAK,EAAC,MAAM;UACd,eAAO,CACJ,CACH,CACL,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ;AAED,IAAI,SAAS,GAAG,CAAC,CAAC","sourcesContent":["import { Component, ComponentInterface, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { SwitchChangeEventDetail, SwitchLabelAlignment } from './switch-interface';\n\n@Component({\n    tag: 'wcs-switch',\n    styleUrl: 'switch.scss',\n    shadow: true\n})\nexport class Switch implements ComponentInterface {\n    private switchId = `wcs-switch-${switchIds++}`;\n\n    @Prop() name = this.switchId;\n\n    /**\n     * If `true`, the switch is selected.\n     */\n    @Prop({reflect: true}) checked = false;\n\n    /**\n     * Emitted when the checked property has changed.\n     */\n    @Event() wcsChange!: EventEmitter<SwitchChangeEventDetail>;\n\n    /**\n     * Specifie the alignment of the switch with the label content\n     */\n    @Prop({reflect: true}) labelAlignment: SwitchLabelAlignment = 'center';\n\n    /**\n     * Specify wether the switch is disabled or not.\n     */\n    @Prop() disabled: boolean = false;\n\n    toggleChange(_event: Event) {\n        this.checked = !this.checked;\n        this.wcsChange.emit({\n            checked: this.checked\n        });\n    }\n\n    render() {\n        return (\n            <Host>\n                <label htmlFor={this.name} class=\"wcs-container\" aria-disabled={this.disabled}>\n                    <input onChange={(evt) => this.toggleChange(evt)}\n                           checked={this.checked}\n                           class=\"wcs-switch\"\n                           type=\"checkbox\"\n                           name={this.name}\n                           disabled={this.disabled}\n                           id={this.name}>\n                    </input>\n                    <span class=\"wcs-checkmark\"></span>\n                    <span class=\"text\">\n                        <slot/>\n                    </span>\n                </label>\n            </Host>\n        );\n    }\n}\n\nlet switchIds = 0;\n"]}
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/switch/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAS1G,MAAM,OAAO,MAAM;;IACP,aAAQ,GAAG,cAAc,SAAS,EAAE,EAAE,CAAC;gBAGhC,IAAI,CAAC,QAAQ;mBAKK,KAAK;0BAUwB,QAAQ;oBAK1C,KAAK;;EAEjC,YAAY,CAAC,MAAa;IACtB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC7B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;MAChB,OAAO,EAAE,IAAI,CAAC,OAAO;KACxB,CAAC,CAAC;EACP,CAAC;EAGD,KAAK,CAAC,gBAAgB,CAAC,IAAuB,EAAE,KAAa;IACzD,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;EACzC,CAAC;EAED,MAAM;IACF,OAAO,CACH,EAAC,IAAI;MACD,aAAO,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,eAAe,mBAAgB,IAAI,CAAC,QAAQ;QACzE,aAAO,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,EACzC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EAAE,EAAE,CAAC,EAAE,GAAE,IAAI,CAAC,KAAK,GAAG,EAAE,CAAA,CAAA,CAAC,EAC5B,EAAE,EAAE,IAAI,CAAC,IAAI,GACZ;QACR,YAAM,KAAK,EAAC,eAAe,GAAQ;QACnC,YAAM,KAAK,EAAC,MAAM;UACd,eAAO,CACJ,CACH,CACL,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ;AAED,IAAI,SAAS,GAAG,CAAC,CAAC","sourcesContent":["import { Component, ComponentInterface, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { SwitchChangeEventDetail, SwitchLabelAlignment } from './switch-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\n@Component({\n    tag: 'wcs-switch',\n    styleUrl: 'switch.scss',\n    shadow: true\n})\nexport class Switch implements ComponentInterface, MutableAriaAttribute {\n    private switchId = `wcs-switch-${switchIds++}`;\n    private input!: HTMLInputElement;\n\n    @Prop() name = this.switchId;\n\n    /**\n     * If `true`, the switch is selected.\n     */\n    @Prop({reflect: true}) checked = false;\n\n    /**\n     * Emitted when the checked property has changed.\n     */\n    @Event() wcsChange!: EventEmitter<SwitchChangeEventDetail>;\n\n    /**\n     * Specifie the alignment of the switch with the label content\n     */\n    @Prop({reflect: true}) labelAlignment: SwitchLabelAlignment = 'center';\n\n    /**\n     * Specify wether the switch is disabled or not.\n     */\n    @Prop() disabled: boolean = false;\n\n    toggleChange(_event: Event) {\n        this.checked = !this.checked;\n        this.wcsChange.emit({\n            checked: this.checked\n        });\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string) {\n        this.input.setAttribute(attr, value);\n    }\n\n    render() {\n        return (\n            <Host>\n                <label htmlFor={this.name} class=\"wcs-container\" aria-disabled={this.disabled}>\n                    <input onChange={(evt) => this.toggleChange(evt)}\n                           checked={this.checked}\n                           class=\"wcs-switch\"\n                           type=\"checkbox\"\n                           name={this.name}\n                           disabled={this.disabled}\n                           ref={el => {this.input = el}}\n                           id={this.name}>\n                    </input>\n                    <span class=\"wcs-checkmark\"></span>\n                    <span class=\"text\">\n                        <slot/>\n                    </span>\n                </label>\n            </Host>\n        );\n    }\n}\n\nlet switchIds = 0;\n"]}

package/dist/collection/components/tab/tab.css

@@ -0,0 +1,7 @@
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}

package/dist/collection/components/tab/tab.js

@@ -16,6 +16,16 @@ export class Tab {
   }
   static get is() { return "wcs-tab"; }
   static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tab.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tab.css"]
+    };
+  }
   static get properties() {
     return {
       "header": {
@@ -47,7 +57,7 @@ export class Tab {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "The id of the tab. It should be unique."
         },
         "attribute": "item-key",
         "reflect": false

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

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../src/components/tab/tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAE9E;;;GAGG;AAKH,MAAM,OAAO,GAAG;;;;;EAiBZ,gBAAgB;IACZ,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;EAC1B,CAAC;EAED,MAAM;IACF,OAAO,CACH,EAAC,IAAI,IAAC,IAAI,EAAC,SAAS,EAAC,IAAI,EAAE,UAAU;MACjC,eAAa,CACV,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Tab content component.\n * Use this component to specify the content of a component.\n */\n@Component({\n    tag: 'wcs-tab',\n    shadow: true,\n})\nexport class Tab {\n    /**\n     * The header you want to be displayed for this tab.\n     */\n    @Prop({ reflect: true }) header: string;\n\n    @Prop() itemKey: any;\n\n    // TODO: See if there is a solution that doesn't pollute the API.\n    /**\n     * Do not use, meant for internal use only.\n     * @inner\n     * @ignore\n     */\n    @Event()\n    tabLoaded!: EventEmitter<void>;\n\n    componentDidLoad() {\n        this.tabLoaded.emit();\n    }\n\n    render() {\n        return (\n            <Host slot=\"wcs-tab\" role={\"tabpanel\"}>\n                <slot></slot>\n            </Host>\n        );\n    }\n}\n"]}
+{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../src/components/tab/tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAE9E;;;GAGG;AAMH,MAAM,OAAO,GAAG;;;;;EAoBZ,gBAAgB;IACZ,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;EAC1B,CAAC;EAED,MAAM;IACF,OAAO,CACH,EAAC,IAAI,IAAC,IAAI,EAAC,SAAS,EAAC,IAAI,EAAE,UAAU;MACjC,eAAa,CACV,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Tab content component.\n * Use this component to specify the content of a component.\n */\n@Component({\n    tag: 'wcs-tab',\n    styleUrl: 'tab.scss',\n    shadow: true,\n})\nexport class Tab {\n    /**\n     * The header you want to be displayed for this tab.\n     */\n    @Prop({ reflect: true }) header: string;\n\n    /**\n     * The id of the tab. It should be unique.\n     */\n    @Prop() itemKey: any;\n\n    // TODO: See if there is a solution that doesn't pollute the API.\n    /**\n     * Do not use, meant for internal use only.\n     * @inner\n     * @ignore\n     */\n    @Event()\n    tabLoaded!: EventEmitter<void>;\n\n    componentDidLoad() {\n        this.tabLoaded.emit();\n    }\n\n    render() {\n        return (\n            <Host slot=\"wcs-tab\" role={\"tabpanel\"}>\n                <slot></slot>\n            </Host>\n        );\n    }\n}\n"]}

package/dist/collection/components/tabs/tabs.js

@@ -10,6 +10,10 @@ import { h, Host } from '@stencil/core';
  *    <wcs-tab header="Two">More content !</wcs-tab>
  * </wcs-tabs>
  * ```
+ *
+ * @cssprop --wcs-tabs-width - Width of each tab
+ * @cssprop --wcs-tabs-padding-horizontal - Width of each tab
+ * @cssprop --wcs-tabs-padding-vertical - Vertical padding
  */
 export class Tabs {
   constructor() {
@@ -147,15 +151,15 @@ export class Tabs {
   updateTabVisibility() {
     this.tabs.forEach((el, idx) => {
       if (idx !== this.currentActiveTabIndex) {
-        el.setAttribute('style', 'display: none;');
+        el.hidden = true;
       }
       else {
-        el.setAttribute('style', 'display: block;');
+        el.hidden = false;
       }
     });
   }
   hideAllTabsContent() {
-    this.tabs.forEach((el) => el.setAttribute('style', 'display: none;'));
+    this.tabs.forEach((el) => el.hidden = true);
   }
   render() {
     return (h(Host, null, h("div", { class: "wcs-tabs-headers", role: "tablist", "aria-label": this.description }, this.headers.map((header, idx) => h("div", { class: 'wcs-tab-header ' + (this.currentActiveTabIndex === idx ? 'active' : ''), onClick: () => this.selectTabAndEmitChangeEvent(idx), onKeyDown: evt => this.handleKeyDown(evt, idx), tabIndex: this.currentActiveTabIndex === idx ? 0 : -1, role: "tab", id: `tabs-id-${this.tabsId}-tab-id-${idx}`, "aria-controls": `tabs-id-${this.tabsId}-tab-panel-${idx}`, "aria-label": header, "aria-selected": this.currentActiveTabIndex === idx ? 'true' : 'false' }, h("span", null, header)))), h("div", { class: "wcs-tabs" }, h("slot", { onSlotchange: () => this.onTabsSlotChange(), name: "wcs-tab" }))));

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Prop,\n    Element,\n    State,\n    ComponentInterface,\n    Event,\n    EventEmitter,\n    Watch,\n    h,\n    Host,\n    Listen\n} from '@stencil/core';\n\nimport { WcsTabsAlignment, WcsTabChangeEvent } from './tabs-interface';\n\n/**\n * Tabs component to switch between tab content.\n * Use in conjuction with `wcs-tab`.\n *\n * @example\n * ```html\n * <wcs-tabs>\n *    <wcs-tab header=\"One\">The content !</wcs-tab>\n *    <wcs-tab header=\"Two\">More content !</wcs-tab>\n * </wcs-tabs>\n * ```\n */\n@Component({\n    tag: 'wcs-tabs',\n    styleUrl: 'tabs.scss',\n    shadow: true,\n})\nexport class Tabs implements ComponentInterface {\n    /**\n     * Tab headers alignment.\n     */\n    @Prop({reflect: true}) align: WcsTabsAlignment = 'start';\n\n    /**\n     * Current selected tab index.\n     * Starts at 0.\n     */\n    @Prop() selectedIndex: number = 0;\n\n    @Prop() selectedKey: any;\n\n    /**\n     * Whether to skip rendering the tabpanel with the content of the selected tab. Use this prop if you plan to\n     * separately render the tab content.\n     */\n    @Prop() headersOnly: boolean = false;\n    /** Determines if tabs header should have a border at the bottom */\n    @Prop() gutter: boolean;\n\n    /**\n     * Description is used to provide aria-label for the tabs container which has `role=\"tablist\"`.\n     */\n    @Prop() description: string;\n\n    /**\n     *\n     * Emitted when the selected tab change.\n     */\n    @Event() tabChange!: EventEmitter<WcsTabChangeEvent>;\n\n    @Element() private el!: HTMLWcsTabsElement;\n\n    @State() private headers: string[] = [];\n\n    @State() private currentActiveTabIndex = 0;\n\n    private tabsId: number = tabsId++;\n\n    @Watch('selectedIndex')\n    selectedIndexChanged(newValue: number) {\n        this.currentActiveTabIndex = newValue;\n    }\n\n    @Watch('selectedKey')\n    selectedTabkeyChanged(newValue: any) {\n        this.updateCurrentActiveIndexByTabKey(newValue);\n    }\n\n    private emitActiveTabChange() {\n        this.tabChange.emit({\n            tabName: this.headers[this.currentActiveTabIndex],\n            tabIndex: this.currentActiveTabIndex,\n            selectedKey: this.tabs[this.currentActiveTabIndex].itemKey\n        });\n    }\n\n    private updateCurrentActiveIndexByTabKey(newValue: any) {\n        for (let i = 0; i < this.tabs.length; i++) {\n            const tab = this.tabs[i];\n            if (tab.itemKey === newValue) {\n                this.currentActiveTabIndex = i;\n            }\n        }\n    }\n\n    @Listen('tabLoaded')\n    onTabLoaded() {\n        this.refreshHeaders();\n    }\n\n    componentDidLoad() {\n        this.putTabsInCorrectDivIfTheyAreNot();\n        this.refreshHeaders();\n        if (this.selectedIndex) {\n            this.currentActiveTabIndex = this.selectedIndex;\n        }\n        if (this.selectedKey) {\n            this.updateCurrentActiveIndexByTabKey(this.selectedKey);\n        }\n    }\n\n    // XXX: Firefox < 63\n    private putTabsInCorrectDivIfTheyAreNot() {\n        const tabDiv = this.el.shadowRoot.querySelector('.wcs-tabs');\n        if (tabDiv.querySelector('slot') === null) {\n            Array.from(this.el.querySelectorAll('wcs-tab'))\n                .filter(node => node.parentNode !== tabDiv)\n                .forEach(tab => {\n                    if (tab.parentElement.isEqualNode(this.el)) {\n                        this.el.removeChild(tab);\n                        tabDiv.appendChild(tab);\n                    }\n                });\n        }\n    }\n\n    handleKeyDown(ev: KeyboardEvent, tabIndex: number) {\n        const target = ev.target as HTMLDivElement;\n        switch (ev.key) {\n            case ' ':\n            case 'Enter': {\n                this.currentActiveTabIndex = tabIndex;\n                this.emitActiveTabChange();\n                ev.preventDefault();\n                break;\n            }\n            case 'ArrowLeft': {\n                if (target.previousElementSibling?.classList.contains('wcs-tab-header')) {\n                    (target.previousElementSibling as HTMLDivElement).focus();\n                    ev.preventDefault();\n                }\n                break;\n            }\n            case 'ArrowRight': {\n                if (target.nextElementSibling?.classList.contains('wcs-tab-header')) {\n                    (target.nextElementSibling as HTMLDivElement).focus();\n                    ev.preventDefault();\n                }\n                break;\n            }\n            case 'Home': {\n                const firstTab = this.el.shadowRoot.querySelector('.wcs-tab-header:first-child');\n                if (firstTab) {\n                    (firstTab as HTMLDivElement).focus();\n                    ev.preventDefault();\n                }\n                break;\n            }\n            case 'End': {\n                const lastTab = this.el.shadowRoot.querySelector('.wcs-tab-header:last-child');\n                if (lastTab) {\n                    (lastTab as HTMLDivElement).focus();\n                    ev.preventDefault();\n                }\n                break;\n            }\n        }\n    }\n\n    private refreshHeaders() {\n        this.headers = [];\n        this.tabs\n            .forEach(x => {\n                this.headers.push(x.getAttribute('header'));\n            });\n    }\n\n    private get tabs() {\n        const tabsEl = this.el.shadowRoot.querySelector('.wcs-tabs');\n        // FIXME: problem with this selector being too greedy in ff < 63\n        const tabs = this.el.shadowRoot.querySelectorAll('.wcs-tabs > wcs-tab');\n\n        return tabs.length !== 0\n            ? tabs\n            : tabsEl?.querySelector('slot')\n                ? tabsEl?.querySelector('slot')?.assignedElements() as unknown as NodeListOf<HTMLWcsTabElement>\n                : [];\n    }\n\n    private selectTabAndEmitChangeEvent(index: number) {\n        this.currentActiveTabIndex = index;\n        this.emitActiveTabChange()\n    }\n\n    componentWillUpdate() {\n        if (!this.headersOnly) {\n            this.updateTabVisibility();\n        } else {\n            this.hideAllTabsContent();\n        }\n    }\n\n    private updateTabVisibility() {\n        this.tabs.forEach((el: HTMLWcsTabElement, idx: number) => {\n            if (idx !== this.currentActiveTabIndex) {\n                el.setAttribute('style', 'display: none;');\n            } else {\n                el.setAttribute('style', 'display: block;');\n            }\n        });\n    }\n\n    private hideAllTabsContent() {\n        this.tabs.forEach((el: HTMLWcsTabElement) => el.setAttribute('style', 'display: none;'));\n    }\n\n    render() {\n        return (\n            <Host>\n                <div class=\"wcs-tabs-headers\" role=\"tablist\" aria-label={this.description}>\n                    {this.headers.map((header, idx) =>\n                        <div class={'wcs-tab-header ' + (this.currentActiveTabIndex === idx ? 'active' : '')}\n                             onClick={() => this.selectTabAndEmitChangeEvent(idx)}\n                             onKeyDown={evt => this.handleKeyDown(evt, idx)}\n                             tabIndex={this.currentActiveTabIndex === idx ? 0 : -1}\n                             role=\"tab\"\n                             id={`tabs-id-${this.tabsId}-tab-id-${idx}`}\n                             // aria-controls refers to ID of the tab panel related to the header\n                             aria-controls={`tabs-id-${this.tabsId}-tab-panel-${idx}`}\n                             aria-label={header}\n                             aria-selected={this.currentActiveTabIndex === idx ? 'true' : 'false'}\n                        >\n                            <span>{header}</span>\n                        </div>\n                    )}\n                </div>\n                <div class=\"wcs-tabs\">\n                    <slot onSlotchange={() => this.onTabsSlotChange()} name=\"wcs-tab\"/>\n                </div>\n            </Host>\n        );\n    }\n\n    /**\n     * Observe when a new tab panel is added to the slot to let's handle accessibility properties for tabs panel:\n     * - id: to let header tab refers it proper panel\n     * - aria-label: take the same name as it's referenced header name\n     * \n     * @private\n     */\n    private onTabsSlotChange() {\n        let tabId = 0;\n        this.tabs.forEach(tab => {\n            tab.setAttribute(\"aria-label\", this.headers.at(tabId));\n            // set an ID to set aria-controls on header tab \n            // (https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-automatic/#:~:text=Refers%20to%20the%20element)\n            tab.setAttribute(\"id\", `tabs-id-${this.tabsId}-tab-panel-${tabId}`);\n            tabId++;\n        });\n    }\n}\n\nlet tabsId = 0;\n"]}
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Prop,\n    Element,\n    State,\n    ComponentInterface,\n    Event,\n    EventEmitter,\n    Watch,\n    h,\n    Host,\n    Listen\n} from '@stencil/core';\n\nimport { WcsTabsAlignment, WcsTabChangeEvent } from './tabs-interface';\n\n/**\n * Tabs component to switch between tab content.\n * Use in conjuction with `wcs-tab`.\n *\n * @example\n * ```html\n * <wcs-tabs>\n *    <wcs-tab header=\"One\">The content !</wcs-tab>\n *    <wcs-tab header=\"Two\">More content !</wcs-tab>\n * </wcs-tabs>\n * ```\n * \n * @cssprop --wcs-tabs-width - Width of each tab\n * @cssprop --wcs-tabs-padding-horizontal - Width of each tab\n * @cssprop --wcs-tabs-padding-vertical - Vertical padding\n */\n@Component({\n    tag: 'wcs-tabs',\n    styleUrl: 'tabs.scss',\n    shadow: true,\n})\nexport class Tabs implements ComponentInterface {\n    /**\n     * Tab headers alignment.\n     */\n    @Prop({reflect: true}) align: WcsTabsAlignment = 'start';\n\n    /**\n     * Current selected tab index.\n     * Starts at 0.\n     */\n    @Prop() selectedIndex: number = 0;\n\n    @Prop() selectedKey: any;\n\n    /**\n     * Whether to skip rendering the tabpanel with the content of the selected tab. Use this prop if you plan to\n     * separately render the tab content.\n     */\n    @Prop() headersOnly: boolean = false;\n    /** Determines if tabs header should have a border at the bottom */\n    @Prop() gutter: boolean;\n\n    /**\n     * Description is used to provide aria-label for the tabs container which has `role=\"tablist\"`.\n     */\n    @Prop() description: string;\n\n    /**\n     *\n     * Emitted when the selected tab change.\n     */\n    @Event() tabChange!: EventEmitter<WcsTabChangeEvent>;\n\n    @Element() private el!: HTMLWcsTabsElement;\n\n    @State() private headers: string[] = [];\n\n    @State() private currentActiveTabIndex = 0;\n\n    private tabsId: number = tabsId++;\n\n    @Watch('selectedIndex')\n    selectedIndexChanged(newValue: number) {\n        this.currentActiveTabIndex = newValue;\n    }\n\n    @Watch('selectedKey')\n    selectedTabkeyChanged(newValue: any) {\n        this.updateCurrentActiveIndexByTabKey(newValue);\n    }\n\n    private emitActiveTabChange() {\n        this.tabChange.emit({\n            tabName: this.headers[this.currentActiveTabIndex],\n            tabIndex: this.currentActiveTabIndex,\n            selectedKey: this.tabs[this.currentActiveTabIndex].itemKey\n        });\n    }\n\n    private updateCurrentActiveIndexByTabKey(newValue: any) {\n        for (let i = 0; i < this.tabs.length; i++) {\n            const tab = this.tabs[i];\n            if (tab.itemKey === newValue) {\n                this.currentActiveTabIndex = i;\n            }\n        }\n    }\n\n    @Listen('tabLoaded')\n    onTabLoaded() {\n        this.refreshHeaders();\n    }\n\n    componentDidLoad() {\n        this.putTabsInCorrectDivIfTheyAreNot();\n        this.refreshHeaders();\n        if (this.selectedIndex) {\n            this.currentActiveTabIndex = this.selectedIndex;\n        }\n        if (this.selectedKey) {\n            this.updateCurrentActiveIndexByTabKey(this.selectedKey);\n        }\n    }\n\n    // XXX: Firefox < 63\n    private putTabsInCorrectDivIfTheyAreNot() {\n        const tabDiv = this.el.shadowRoot.querySelector('.wcs-tabs');\n        if (tabDiv.querySelector('slot') === null) {\n            Array.from(this.el.querySelectorAll('wcs-tab'))\n                .filter(node => node.parentNode !== tabDiv)\n                .forEach(tab => {\n                    if (tab.parentElement.isEqualNode(this.el)) {\n                        this.el.removeChild(tab);\n                        tabDiv.appendChild(tab);\n                    }\n                });\n        }\n    }\n\n    handleKeyDown(ev: KeyboardEvent, tabIndex: number) {\n        const target = ev.target as HTMLDivElement;\n        switch (ev.key) {\n            case ' ':\n            case 'Enter': {\n                this.currentActiveTabIndex = tabIndex;\n                this.emitActiveTabChange();\n                ev.preventDefault();\n                break;\n            }\n            case 'ArrowLeft': {\n                if (target.previousElementSibling?.classList.contains('wcs-tab-header')) {\n                    (target.previousElementSibling as HTMLDivElement).focus();\n                    ev.preventDefault();\n                }\n                break;\n            }\n            case 'ArrowRight': {\n                if (target.nextElementSibling?.classList.contains('wcs-tab-header')) {\n                    (target.nextElementSibling as HTMLDivElement).focus();\n                    ev.preventDefault();\n                }\n                break;\n            }\n            case 'Home': {\n                const firstTab = this.el.shadowRoot.querySelector('.wcs-tab-header:first-child');\n                if (firstTab) {\n                    (firstTab as HTMLDivElement).focus();\n                    ev.preventDefault();\n                }\n                break;\n            }\n            case 'End': {\n                const lastTab = this.el.shadowRoot.querySelector('.wcs-tab-header:last-child');\n                if (lastTab) {\n                    (lastTab as HTMLDivElement).focus();\n                    ev.preventDefault();\n                }\n                break;\n            }\n        }\n    }\n\n    private refreshHeaders() {\n        this.headers = [];\n        this.tabs\n            .forEach(x => {\n                this.headers.push(x.getAttribute('header'));\n            });\n    }\n\n    private get tabs() {\n        const tabsEl = this.el.shadowRoot.querySelector('.wcs-tabs');\n        // FIXME: problem with this selector being too greedy in ff < 63\n        const tabs = this.el.shadowRoot.querySelectorAll('.wcs-tabs > wcs-tab');\n\n        return tabs.length !== 0\n            ? tabs\n            : tabsEl?.querySelector('slot')\n                ? tabsEl?.querySelector('slot')?.assignedElements() as unknown as NodeListOf<HTMLWcsTabElement>\n                : [];\n    }\n\n    private selectTabAndEmitChangeEvent(index: number) {\n        this.currentActiveTabIndex = index;\n        this.emitActiveTabChange()\n    }\n\n    componentWillUpdate() {\n        if (!this.headersOnly) {\n            this.updateTabVisibility();\n        } else {\n            this.hideAllTabsContent();\n        }\n    }\n\n    private updateTabVisibility() {\n        this.tabs.forEach((el: HTMLWcsTabElement, idx: number) => {\n            if (idx !== this.currentActiveTabIndex) {\n                el.hidden = true;\n            } else {\n                el.hidden = false;\n            }\n        });\n    }\n\n    private hideAllTabsContent() {\n        this.tabs.forEach((el: HTMLWcsTabElement) => el.hidden = true);\n    }\n\n    render() {\n        return (\n            <Host>\n                <div class=\"wcs-tabs-headers\" role=\"tablist\" aria-label={this.description}>\n                    {this.headers.map((header, idx) =>\n                        <div class={'wcs-tab-header ' + (this.currentActiveTabIndex === idx ? 'active' : '')}\n                             onClick={() => this.selectTabAndEmitChangeEvent(idx)}\n                             onKeyDown={evt => this.handleKeyDown(evt, idx)}\n                             tabIndex={this.currentActiveTabIndex === idx ? 0 : -1}\n                             role=\"tab\"\n                             id={`tabs-id-${this.tabsId}-tab-id-${idx}`}\n                             // aria-controls refers to ID of the tab panel related to the header\n                             aria-controls={`tabs-id-${this.tabsId}-tab-panel-${idx}`}\n                             aria-label={header}\n                             aria-selected={this.currentActiveTabIndex === idx ? 'true' : 'false'}\n                        >\n                            <span>{header}</span>\n                        </div>\n                    )}\n                </div>\n                <div class=\"wcs-tabs\">\n                    <slot onSlotchange={() => this.onTabsSlotChange()} name=\"wcs-tab\"/>\n                </div>\n            </Host>\n        );\n    }\n\n    /**\n     * Observe when a new tab panel is added to the slot to let's handle accessibility properties for tabs panel:\n     * - id: to let header tab refers it proper panel\n     * - aria-label: take the same name as it's referenced header name\n     * \n     * @private\n     */\n    private onTabsSlotChange() {\n        let tabId = 0;\n        this.tabs.forEach(tab => {\n            tab.setAttribute(\"aria-label\", this.headers.at(tabId));\n            // set an ID to set aria-controls on header tab \n            // (https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-automatic/#:~:text=Refers%20to%20the%20element)\n            tab.setAttribute(\"id\", `tabs-id-${this.tabsId}-tab-panel-${tabId}`);\n            tabId++;\n        });\n    }\n}\n\nlet tabsId = 0;\n"]}