wcs-core 7.0.0 → 7.1.0

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

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

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

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

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

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

package/dist/collection/components/editable-field/editable-field.e2e.js.map

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