q2-tecton-elements 1.54.5 → 1.55.1

package/dist/collection/components/q2-tag/q2-tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-tag.js","sourceRoot":"","sources":["../../../src/components/q2-tag/q2-tag.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Host,\n    Listen,\n    Method,\n    Element,\n    EventEmitter,\n    Event,\n    Fragment,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, waitForNextPaint } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\n\n@Component({ tag: 'q2-tag', shadow: true, styleUrl: 'q2-tag.scss' })\nexport class Q2Tag implements ComponentInterface {\n    // #region Own Properties\n\n    dropdownBtn: HTMLButtonElement;\n    mutationObserver: MutationObserver;\n    optionList: HTMLQ2OptionListElement;\n    popoverElement: HTMLQ2PopoverElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    optionCount: number;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Instructs the component to use the action sheet workflow for displaying its options.\n     *\n     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n     */\n    @Prop()\n    hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /**\n     * The text that populates the label.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * Determine whether the popover is open or closed.\n     *\n     * @readonly\n     */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    /** Determines the label that is applied to the option list for accessibility purposes. */\n    @Prop()\n    optionListLabel: string = 'options';\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true })\n    popoverAlignment: 'left' | 'right' = 'right';\n\n    /**\n     * Force the direction of the popover dropdown when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop()\n    popoverDirection: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    popoverMaxHeight: number;\n\n    /** @deprecated */\n    @Prop()\n    popoverMinHeight: number = 150;\n\n    /** The color of the element. */\n    @Prop({ reflect: true })\n    theme: 'primary' | 'secondary' | 'tertiary';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when a provided option is clicked.\n     *\n     * Requires at least one option to be provided.\n     */\n    @Event()\n    click: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        const observer = new MutationObserver(this.determineOptionCount);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        if (!this.optionCount) return;\n        this.dropdownBtn.focus();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        if (open) return;\n        this.optionList.setActiveElement(null);\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    @Method()\n    async closePopover() {\n        if (!this.optionCount || !this.open) return;\n        this._togglePopover();\n    }\n\n    @Method()\n    async openPopover() {\n        if (!this.optionCount || this.open) return;\n        this._togglePopover();\n    }\n\n    @Method()\n    async selectOption(value) {\n        if (!this.optionCount) return;\n        await this.openPopover();\n        await waitForNextPaint();\n        const allOptions = await this.optionList.getOptions();\n        const desiredOption = allOptions.find(option => option.value === value);\n        desiredOption?.click();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    _togglePopover() {\n        const { dropdownBtn } = this;\n        dropdownBtn?.click();\n        dropdownBtn?.focus();\n        dropdownBtn.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    determineOptionCount = () => {\n        const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n        this.optionCount = numberOfOptions;\n    };\n\n    handleButtonFocusout = async (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as HTMLElement;\n        if (this.popoverElement?.contains(relatedTarget)) return;\n        if (this.hostElement.contains(relatedTarget)) return;\n        this.open = false;\n    };\n\n    handleChange = event => {\n        event.stopPropagation();\n        if (!this.optionCount) return;\n        const { value } = event.detail;\n\n        this.click.emit({ value });\n    };\n\n    handleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        this.popoverElement.controlElement = this.dropdownBtn;\n        if (shouldShowActionSheet(this)) {\n            const { value } = await showActionSheetList(this, event);\n            this.dropdownBtn.focus();\n            this.click.emit({ value });\n        } else {\n            await this.popoverElement.toggle();\n        }\n    };\n\n    handleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (isTabMetaOrCtrl) return;\n\n        event.preventDefault();\n        this.popoverElement.controlElement = this.dropdownBtn;\n        if (shouldShowActionSheet(this, event)) {\n            const { value } = await showActionSheetList(this, event);\n            this.dropdownBtn.focus();\n            this.click.emit({ value });\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    handleWrapperClick = () => {\n        this.dropdownBtn.focus();\n        this.dropdownBtn.click();\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderHiddenElement() {\n        return (\n            <div\n                id=\"option-description\"\n                class=\"sr\"\n                aria-hidden=\"true\"\n            >\n                {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n            </div>\n        );\n    }\n\n    render() {\n        const { optionCount, open } = this;\n        const wrapperClassNames = ['tag'];\n        if (optionCount) wrapperClassNames.push('has-options');\n\n        return (\n            <Host role={this.optionCount > 0 ? 'list' : undefined}>\n                <click-elsewhere onChange={this.onClickElsewhere}>\n                    {this.optionCount ? (\n                        <Fragment>\n                            <div\n                                class=\"btn-wrapper\"\n                                onClick={this.handleWrapperClick}\n                            >\n                                <button\n                                    class=\"tag-wrapper\"\n                                    ref={el => (this.dropdownBtn = el)}\n                                    test-id=\"btn-control\"\n                                    type=\"button\"\n                                    role=\"combobox\"\n                                    onClick={this.handleClick}\n                                    onKeyDown={this.handleKeydown}\n                                    onFocusout={this.handleButtonFocusout}\n                                    aria-controls=\"option-list\"\n                                    aria-expanded={open ? 'true' : 'false'}\n                                    aria-describedby=\"option-description\"\n                                >\n                                    <div class={wrapperClassNames.join(' ')}>{this.label}</div>\n                                    <q2-icon type=\"options\"></q2-icon>\n                                </button>\n                            </div>\n                            {this.renderHiddenElement()}\n                        </Fragment>\n                    ) : (\n                        <div\n                            class=\"tag-wrapper\"\n                            onClick={e => e.stopPropagation()}\n                        >\n                            <div class={wrapperClassNames.join(' ')}>{this.label}</div>\n                        </div>\n                    )}\n\n                    {this.optionCount > 0 && (\n                        <q2-popover\n                            ref={el => (this.popoverElement = el)}\n                            controlElement={this.dropdownBtn}\n                            open={this.open}\n                            maxHeight={this.popoverMaxHeight}\n                            minHeight={this.popoverMinHeight}\n                            direction={this.popoverDirection}\n                            align={this.popoverAlignment}\n                        >\n                            <q2-option-list\n                                id=\"option-list\"\n                                ref={el => (this.optionList = el)}\n                                onChange={this.handleChange}\n                                type=\"menu\"\n                                align=\"right\"\n                                label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                                no-select\n                            >\n                                <slot />\n                            </q2-option-list>\n                        </q2-popover>\n                    )}\n                </click-elsewhere>\n            </Host>\n        );\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-tag.js","sourceRoot":"","sources":["../../../../src/components/q2-tag/q2-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,KAAK,EACL,IAAI,EACJ,CAAC,EAED,IAAI,EACJ,MAAM,EACN,MAAM,EACN,OAAO,EAEP,KAAK,EACL,QAAQ,GACX,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,GAAG,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AACrF,OAAO,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAGpF,MAAM,OAAO,KAAK;;;QA6Kd,yBAAoB,GAAG,GAAG,EAAE;YACxB,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC;YAC9E,IAAI,CAAC,WAAW,GAAG,eAAe,CAAC;QACvC,CAAC,CAAC;QAEF,0BAAqB,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,CAAC,iBAAiB,IAAI,MAAM,CAAC;gBAAE,OAAO;YAC3C,MAAM,IAAI,GAAoB,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;YAClG,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,EAAE,KAAI,EAAE,CAAC,CAAC;YACpE,IAAI,CAAC,gBAAgB,CAAC,MAAM;gBAAE,OAAO;YAErC,MAAM,gBAAgB,GAAG,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;YACjD,gBAAgB,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;gBACxC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;oBAC3D,OAAO,CAAC,MAAM,EAAE,CAAC;gBACrB,CAAC;YACL,CAAC,CAAC,CAAC;QACP,CAAC,CAAC;QAEF,yBAAoB,GAAG,KAAK,EAAE,KAAiB,EAAE,EAAE;;YAC/C,MAAM,aAAa,GAAG,KAAK,CAAC,aAA4B,CAAC;YACzD,IAAI,MAAA,IAAI,CAAC,cAAc,0CAAE,QAAQ,CAAC,aAAa,CAAC;gBAAE,OAAO;YACzD,IAAI,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC;gBAAE,OAAO;YACrD,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QACtB,CAAC,CAAC;QAEF,iBAAY,GAAG,KAAK,CAAC,EAAE;YACnB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,IAAI,CAAC,WAAW;gBAAE,OAAO;YAC9B,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;YAE/B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;QAC/B,CAAC,CAAC;QAEF,gBAAW,GAAG,KAAK,EAAE,KAAiB,EAAE,EAAE;YACtC,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,cAAc,CAAC,cAAc,GAAG,IAAI,CAAC,WAAW,CAAC;YACtD,IAAI,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC;gBAC9B,MAAM,EAAE,KAAK,EAAE,GAAG,MAAM,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;gBACzD,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;gBACzB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;YAC/B,CAAC;iBAAM,CAAC;gBACJ,MAAM,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC;YACvC,CAAC;QACL,CAAC,CAAC;QAEF,kBAAa,GAAG,KAAK,EAAE,KAAoB,EAAE,EAAE;YAC3C,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,CAAC;YAC9E,IAAI,eAAe;gBAAE,OAAO;YAE5B,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,cAAc,CAAC,cAAc,GAAG,IAAI,CAAC,WAAW,CAAC;YACtD,IAAI,qBAAqB,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC;gBACrC,MAAM,EAAE,KAAK,EAAE,GAAG,MAAM,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;gBACzD,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;gBACzB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;YAC/B,CAAC;iBAAM,CAAC;gBACJ,IAAI,CAAC,UAAU,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC;YACjD,CAAC;QACL,CAAC,CAAC;QAEF,uBAAkB,GAAG,GAAG,EAAE;YACtB,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;YACzB,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;QAC7B,CAAC,CAAC;QAEF,yBAAoB,GAAG,GAAG,EAAE;YACxB,IAAI,CAAC,CAAC,kBAAkB,IAAI,MAAM,CAAC;gBAAE,OAAO;YAC5C,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;YAC/D,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;YAC1E,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;QACrC,CAAC,CAAC;QAEF,qBAAgB,GAAG,CAAC,KAAkB,EAAE,EAAE;YACtC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAmC,CAAC;YACzD,IAAI,MAAM,CAAC,SAAS,KAAK,iBAAiB,EAAE,CAAC;gBACzC,KAAK,CAAC,eAAe,EAAE,CAAC;gBACxB,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;gBAChC,IAAI,CAAC,cAAc;oBAAE,OAAO;gBAC5B,cAAc,CAAC,IAAI,GAAG,KAAK,CAAC;YAChC,CAAC;QACL,CAAC,CAAC;QAEF,uBAAkB,GAAG,GAAG,EAAE;YACtB,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC5B,IAAI,CAAC,qBAAqB,EAAE,CAAC;QACjC,CAAC,CAAC;;qBAtOe,CAAC,CAAC,CAAA,MAAA,MAAM,CAAC,MAAM,0CAAE,eAAe,CAAA;;;+BAmBvB,SAAS;gCAIE,OAAO;;;;;;IAmC5C,aAAa;IACb,qCAAqC;IAErC,oBAAoB;;QAChB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;QACpC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;IACjC,CAAC;IAED,iBAAiB;QACb,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAChC,CAAC;IAED,gBAAgB;QACZ,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAChC,IAAI,CAAC,qBAAqB,EAAE,CAAC;IACjC,CAAC;IAED,aAAa;IACb,oBAAoB;IAGpB,aAAa,CAAC,KAAiB;QAC3B,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;YAAE,OAAO;QACzD,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE,OAAO;QAC9B,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;IAC7B,CAAC;IAGD,mBAAmB,CAAC,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAkC;QACpE,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI;YAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACzC,IAAI,IAAI;YAAE,OAAO;QACjB,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC3C,CAAC;IAED,aAAa;IACb,6BAA6B;IAE7B;;;OAGG;IAEH,KAAK,CAAC,YAAY;QACd,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO;QAC5C,IAAI,CAAC,cAAc,EAAE,CAAC;IAC1B,CAAC;IAED;;;OAGG;IAEH,KAAK,CAAC,WAAW;QACb,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI;YAAE,OAAO;QAC3C,IAAI,CAAC,cAAc,EAAE,CAAC;IAC1B,CAAC;IAED;;;;;;;OAOG;IAEH,KAAK,CAAC,YAAY,CAAC,KAAK;QACpB,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE,OAAO;QAC9B,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC;QACzB,MAAM,gBAAgB,EAAE,CAAC;QACzB,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,UAAU,EAAE,CAAC;QACtD,MAAM,aAAa,GAAG,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;QACxE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,KAAK,EAAE,CAAC;IAC3B,CAAC;IAED,aAAa;IACb,wBAAwB;IAExB,cAAc;QACV,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;QAC7B,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,KAAK,EAAE,CAAC;QACrB,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,KAAK,EAAE,CAAC;QACrB,WAAW,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;IACvD,CAAC;IA0FD,aAAa;IACb,yBAAyB;IAEzB,mBAAmB;QACf,OAAO,CACH,WACI,EAAE,EAAC,oBAAoB,EACvB,KAAK,EAAC,IAAI,iBACE,MAAM,IAEjB,GAAG,CAAC,uCAAuC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAC/D,CACT,CAAC;IACN,CAAC;IAED,MAAM;QACF,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QACtB,MAAM,iBAAiB,GAAG,CAAC,KAAK,CAAC,CAAC;QAClC,IAAI,IAAI,CAAC,WAAW;YAAE,iBAAiB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAC5D,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;QAE/C,OAAO,CACH,EAAC,IAAI,qDAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;YAC9C,wEAAiB,QAAQ,EAAE,IAAI,CAAC,gBAAgB;gBAC3C,iBAAiB,CAAC,CAAC,CAAC,CACjB,EAAC,QAAQ;oBACL,WACI,KAAK,EAAC,aAAa,EACnB,OAAO,EAAE,IAAI,CAAC,kBAAkB;wBAEhC,cACI,KAAK,EAAC,aAAa,EACnB,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,aAC1B,aAAa,EACrB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,UAAU,EAAE,IAAI,CAAC,oBAAoB,mBACvB,aAAa,mBACZ,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,sBACrB,oBAAoB;4BAErC,WAAK,KAAK,EAAE,iBAAiB,CAAC,IAAI,CAAC,GAAG,CAAC,IAAG,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAO;4BAChE,eAAS,IAAI,EAAC,SAAS,GAAW,CAC7B,CACP;oBACL,IAAI,CAAC,mBAAmB,EAAE,CACpB,CACd,CAAC,CAAC,CAAC,CACA,WACI,KAAK,EAAC,aAAa,EACnB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;oBAEjC,WAAK,KAAK,EAAE,iBAAiB,CAAC,IAAI,CAAC,GAAG,CAAC;wBACnC,YAAM,IAAI,EAAC,WAAW,GAAG;wBACxB,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CACd,CACJ,CACT;gBAEA,iBAAiB,IAAI,CAClB,mEACI,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,EACrC,cAAc,EAAE,IAAI,CAAC,WAAW,EAChC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,KAAK,EAAE,IAAI,CAAC,gBAAgB;oBAE5B,uEACI,EAAE,EAAC,aAAa,EAChB,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,EACjC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,OAAO,EACb,KAAK,EAAE,GAAG,CAAC,iCAAiC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;wBAGrE,8DAAQ,CACK,CACR,CAChB,CACa,CACf,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGJ","sourcesContent":["import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Host,\n    Listen,\n    Method,\n    Element,\n    EventEmitter,\n    Event,\n    Fragment,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, waitForNextPaint } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\n\n@Component({ tag: 'q2-tag', shadow: true, styleUrl: 'q2-tag.scss' })\nexport class Q2Tag implements ComponentInterface {\n    // #region Own Properties\n\n    dropdownBtn: HTMLButtonElement;\n    mutationObserver: MutationObserver;\n    optionList: HTMLQ2OptionListElement;\n    popoverElement: HTMLQ2PopoverElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    optionCount: number;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Instructs the component to use the action sheet workflow for displaying its options.\n     *\n     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n     */\n    @Prop()\n    hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /**\n     * The text that populates the label.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * Determine whether the popover is open or closed.\n     *\n     * @readonly\n     */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    /** Determines the label that is applied to the option list for accessibility purposes. */\n    @Prop()\n    optionListLabel: string = 'options';\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true })\n    popoverAlignment: 'left' | 'right' = 'right';\n\n    /**\n     * Force the direction of the popover dropdown when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop()\n    popoverDirection: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    popoverMaxHeight: number;\n\n    /** @deprecated */\n    @Prop()\n    popoverMinHeight: number;\n\n    /** The color of the element. */\n    @Prop({ reflect: true })\n    theme: 'primary' | 'secondary' | 'tertiary';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when a provided option is clicked.\n     *\n     * Requires at least one option to be provided.\n     */\n    @Event()\n    click: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        this.initMutationObserver();\n        this.determineOptionCount();\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        this.filterSlottedElements();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        if (!this.optionCount) return;\n        this.dropdownBtn.focus();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        if (open) return;\n        this.optionList.setActiveElement(null);\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the tag to close the popover when options are provided and the popover is open.\n     * @testonly\n     */\n    @Method()\n    async closePopover() {\n        if (!this.optionCount || !this.open) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the tag to open the popover when options are provided and the popover is closed.\n     * @testonly\n     */\n    @Method()\n    async openPopover() {\n        if (!this.optionCount || this.open) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates selecting an option matching the passed value.\n     *\n     * If the popover is closed, this will open it before selecting the option.\n     *\n     * If there are not options, or the passed value does not match any option's value, this method does nothing.\n     * @testonly\n     */\n    @Method()\n    async selectOption(value) {\n        if (!this.optionCount) return;\n        await this.openPopover();\n        await waitForNextPaint();\n        const allOptions = await this.optionList.getOptions();\n        const desiredOption = allOptions.find(option => option.value === value);\n        desiredOption?.click();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    _togglePopover() {\n        const { dropdownBtn } = this;\n        dropdownBtn?.click();\n        dropdownBtn?.focus();\n        dropdownBtn.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    determineOptionCount = () => {\n        const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n        this.optionCount = numberOfOptions;\n    };\n\n    filterSlottedElements = () => {\n        if (!('HTMLSlotElement' in window)) return;\n        const slot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"decorator\"]');\n        const assignedElements = Array.from(slot?.assignedElements() || []);\n        if (!assignedElements.length) return;\n\n        const approvedElements = ['Q2-ICON', 'Q2-BADGE'];\n        assignedElements.forEach((element, index) => {\n            if (!approvedElements.includes(element.tagName) || index > 0) {\n                element.remove();\n            }\n        });\n    };\n\n    handleButtonFocusout = async (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as HTMLElement;\n        if (this.popoverElement?.contains(relatedTarget)) return;\n        if (this.hostElement.contains(relatedTarget)) return;\n        this.open = false;\n    };\n\n    handleChange = event => {\n        event.stopPropagation();\n        if (!this.optionCount) return;\n        const { value } = event.detail;\n\n        this.click.emit({ value });\n    };\n\n    handleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        this.popoverElement.controlElement = this.dropdownBtn;\n        if (shouldShowActionSheet(this)) {\n            const { value } = await showActionSheetList(this, event);\n            this.dropdownBtn.focus();\n            this.click.emit({ value });\n        } else {\n            await this.popoverElement.toggle();\n        }\n    };\n\n    handleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (isTabMetaOrCtrl) return;\n\n        event.preventDefault();\n        this.popoverElement.controlElement = this.dropdownBtn;\n        if (shouldShowActionSheet(this, event)) {\n            const { value } = await showActionSheetList(this, event);\n            this.dropdownBtn.focus();\n            this.click.emit({ value });\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    handleWrapperClick = () => {\n        this.dropdownBtn.focus();\n        this.dropdownBtn.click();\n    };\n\n    initMutationObserver = () => {\n        if (!('MutationObserver' in window)) return;\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    onMutationObserved = () => {\n        this.determineOptionCount();\n        this.filterSlottedElements();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderHiddenElement() {\n        return (\n            <div\n                id=\"option-description\"\n                class=\"sr\"\n                aria-hidden=\"true\"\n            >\n                {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n            </div>\n        );\n    }\n\n    render() {\n        const { open } = this;\n        const wrapperClassNames = ['tag'];\n        if (this.optionCount) wrapperClassNames.push('has-options');\n        const shouldShowOptions = this.optionCount > 0;\n\n        return (\n            <Host role={shouldShowOptions ? 'list' : undefined}>\n                <click-elsewhere onChange={this.onClickElsewhere}>\n                    {shouldShowOptions ? (\n                        <Fragment>\n                            <div\n                                class=\"btn-wrapper\"\n                                onClick={this.handleWrapperClick}\n                            >\n                                <button\n                                    class=\"tag-wrapper\"\n                                    ref={el => (this.dropdownBtn = el)}\n                                    test-id=\"btn-control\"\n                                    type=\"button\"\n                                    role=\"combobox\"\n                                    onClick={this.handleClick}\n                                    onKeyDown={this.handleKeydown}\n                                    onFocusout={this.handleButtonFocusout}\n                                    aria-controls=\"option-list\"\n                                    aria-expanded={open ? 'true' : 'false'}\n                                    aria-describedby=\"option-description\"\n                                >\n                                    <div class={wrapperClassNames.join(' ')}>{loc(this.label)}</div>\n                                    <q2-icon type=\"options\"></q2-icon>\n                                </button>\n                            </div>\n                            {this.renderHiddenElement()}\n                        </Fragment>\n                    ) : (\n                        <div\n                            class=\"tag-wrapper\"\n                            onClick={e => e.stopPropagation()}\n                        >\n                            <div class={wrapperClassNames.join(' ')}>\n                                <slot name=\"decorator\" />\n                                {loc(this.label)}\n                            </div>\n                        </div>\n                    )}\n\n                    {shouldShowOptions && (\n                        <q2-popover\n                            ref={el => (this.popoverElement = el)}\n                            controlElement={this.dropdownBtn}\n                            open={this.open}\n                            maxHeight={this.popoverMaxHeight}\n                            minHeight={this.popoverMinHeight}\n                            direction={this.popoverDirection}\n                            align={this.popoverAlignment}\n                        >\n                            <q2-option-list\n                                id=\"option-list\"\n                                ref={el => (this.optionList = el)}\n                                onChange={this.handleChange}\n                                type=\"menu\"\n                                align=\"right\"\n                                label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                                no-select\n                            >\n                                <slot />\n                            </q2-option-list>\n                        </q2-popover>\n                    )}\n                </click-elsewhere>\n            </Host>\n        );\n    }\n\n    // #endregion\n}\n"]}

package/dist/collection/components/q2-tag/test/q2-tag-test.e2e.js

@@ -1,8 +1,7 @@
-import { setup, getFocusedAttribute, getFocusedTagName, getFocusedOptionValue, getActiveElementTestId, getListOfStyleCompilationIssues, evaluateA11y, } from "../../../utils/helpers";
+import { setup, getFocusedAttribute, getFocusedOptionValue, getActiveElementTestId, getListOfStyleCompilationIssues, evaluateA11y, } from "../../../utils/helpers";
 describe('q2-tag', () => {
     let page;
     let tag;
-    let optionList;
     let popover;
     let controlBtn;
     let allOptions;
@@ -13,143 +12,6 @@ describe('q2-tag', () => {
         const page = await setup({ html: `<q2-tag></q2-tag>` });
         expect(await getListOfStyleCompilationIssues(page, 'q2-tag')).toHaveLength(0);
     });
-    it('does not render button or dropdown by default', async () => {
-        page = await setup({
-            html: `<q2-tag label="My tag"></q2-tag>`,
-        });
-        optionList = await page.find('q2-tag >>> q2-option-list');
-        controlBtn = await page.find('q2-tag >>> button');
-        expect(controlBtn).toBeNull();
-        expect(optionList).toBeNull();
-    });
-    describe('when options are provided', () => {
-        beforeEach(async () => {
-            page = await setup({
-                html: `
-                    <q2-tag label="My tag">
-                        <q2-option value="1">Option 1</q2-option>
-                        <q2-option value="2">Option 2</q2-option>
-                        <q2-option value="3">Option 3</q2-option>
-                    </q2-tag>
-                `,
-            });
-            tag = await page.find('q2-tag');
-            allOptions = await page.findAll('q2-option');
-            optionList = await page.find('q2-tag >>> q2-option-list');
-            popover = await page.find('q2-tag >>> q2-popover');
-            optionContainer = await page.find('q2-tag >>> q2-option-list >>> .options');
-            controlBtn = await page.find('q2-tag >>> button');
-            clickSpy = await tag.spyOnEvent('click');
-            changeSpy = await tag.spyOnEvent('change');
-        });
-        it('renders the tag-wrapper as a button', async () => {
-            const tagWrapper = await page.find('q2-tag >>> .tag-wrapper');
-            expect(tagWrapper.nodeName).toEqual('BUTTON');
-        });
-        it('can select option via keyboard', async () => {
-            const tagLabel = await page.find('q2-tag >>> .tag');
-            expect(tagLabel.classList.contains('has-options')).toBe(true);
-            expect(popover).not.toHaveAttribute('open');
-            await controlBtn.press('ArrowDown');
-            await page.waitForChanges();
-            expect(tag).toHaveAttribute('open');
-            expect(popover).toHaveAttribute('open');
-            expect(await getFocusedOptionValue(page)).toEqual('1');
-            await optionContainer.press('ArrowDown');
-            await page.waitForChanges();
-            expect(await getFocusedOptionValue(page)).toEqual('2');
-            await allOptions[1].press(' ');
-            await page.waitForChanges();
-            expect(tag).not.toHaveAttribute('open');
-            expect(popover).not.toHaveAttribute('open');
-            expect(clickSpy).toHaveReceivedEventDetail({
-                value: '2',
-            });
-            expect(changeSpy).not.toHaveReceivedEvent();
-        });
-        it('can select option via mouse', async () => {
-            const tagLabel = await page.find('q2-tag >>> .tag');
-            expect(tagLabel.classList.contains('has-options')).toBe(true);
-            expect(popover).not.toHaveAttribute('open');
-            await controlBtn.click();
-            await page.waitForChanges();
-            expect(tag).toHaveAttribute('open');
-            expect(popover).toHaveAttribute('open');
-            expect(await getFocusedTagName(page)).toEqual('Q2-TAG');
-            await allOptions[1].click();
-            await page.waitForChanges();
-            // expect(tag).not.toHaveAttribute('open');
-            // expect(popover).not.toHaveAttribute('open');
-            expect(clickSpy).toHaveReceivedEventDetail({
-                value: '2',
-            });
-            expect(changeSpy).not.toHaveReceivedEvent();
-        });
-        describe('when keyboard is pressed', () => {
-            it('opens list and focuses first option on ArrowDown', async () => {
-                await controlBtn.press('ArrowDown');
-                await page.waitForChanges();
-                expect(tag).toHaveAttribute('open');
-                expect(popover).toHaveAttribute('open');
-                expect(await getFocusedOptionValue(page)).toEqual('1');
-            });
-            it('opens list and focuses last option on ArrowUp', async () => {
-                await controlBtn.press('ArrowUp');
-                await page.waitForChanges();
-                expect(tag).toHaveAttribute('open');
-                expect(popover).toHaveAttribute('open');
-                expect(await getFocusedOptionValue(page)).toEqual('3');
-            });
-            it('opens list and focuses first option on Enter', async () => {
-                await controlBtn.press('Enter');
-                await page.waitForChanges();
-                expect(tag).toHaveAttribute('open');
-                expect(popover).toHaveAttribute('open');
-                expect(await getFocusedOptionValue(page)).toEqual('1');
-            });
-            it('opens list and focuses first option on Space', async () => {
-                await controlBtn.press(' ');
-                await page.waitForChanges();
-                expect(tag).toHaveAttribute('open');
-                expect(popover).toHaveAttribute('open');
-                expect(await getFocusedOptionValue(page)).toEqual('1');
-            });
-            it('opens list and focuses last option on Home', async () => {
-                await controlBtn.press('Home');
-                await page.waitForChanges();
-                expect(tag).toHaveAttribute('open');
-                expect(popover).toHaveAttribute('open');
-                expect(await getFocusedAttribute(page, 'value')).toEqual('1');
-            });
-            it('opens list and focuses last option on End', async () => {
-                await controlBtn.press('End');
-                await page.waitForChanges();
-                expect(tag).toHaveAttribute('open');
-                expect(popover).toHaveAttribute('open');
-                expect(await getFocusedAttribute(page, 'value')).toEqual('3');
-            });
-        });
-    });
-    describe('when options are NOT provided', () => {
-        beforeEach(async () => {
-            page = await setup({
-                html: `
-                <q2-tag label="My tag">
-                </q2-tag>
-            `,
-            });
-            tag = await page.find('q2-tag');
-        });
-        it('renders the tag-wrapper as a div', async () => {
-            const tagWrapper = await page.find('q2-tag >>> .tag-wrapper');
-            expect(tagWrapper.nodeName).toEqual('DIV');
-        });
-        it('zero is not rendered inside the click-elsewhere element (TCT-2433)', async () => {
-            const clickElsewhere = await page.find('q2-tag >>> click-elsewhere');
-            expect(await tag.getProperty('label')).toBe('My tag');
-            expect(clickElsewhere.textContent.slice(-1)).not.toBe('0');
-        });
-    });
     describe('Props', () => {
         describe('hoist', () => {
             const runHoistSetup = async (action, hoistEnabled = false, defineShowActionSheet = false, isCancelled = false) => {
@@ -281,189 +143,32 @@ describe('q2-tag', () => {
                 });
             });
         });
-        describe('popoverMinHeight', () => {
-            describe('when not provided', () => {
-                it('defaults to 150 and passes that value to q2-popover', async () => {
-                    page = await setup({
-                        html: `
-                            <q2-tag label="My tag">
-                                <q2-option value="1">Option 1</q2-option>
-                                <q2-option value="2">Option 2</q2-option>
-                                <q2-option value="3">Option 3</q2-option>
-                            </q2-tag>
-                        `,
-                    });
-                    tag = await page.find('q2-tag');
-                    popover = await page.find('q2-tag >>> q2-popover');
-                    expect(await tag.getProperty('popoverMinHeight')).toEqual(150);
-                    expect(await popover.getProperty('minHeight')).toEqual(150);
-                });
-            });
-            describe('when provided', () => {
-                it('passes the provided value to the q2-popover', async () => {
-                    page = await setup({
-                        html: `
-                            <q2-tag label="My tag" popover-min-height="300">
-                                <q2-option value="1">Option 1</q2-option>
-                                <q2-option value="2">Option 2</q2-option>
-                                <q2-option value="3">Option 3</q2-option>
-                            </q2-tag>
-                        `,
-                    });
-                    popover = await page.find('q2-tag >>> q2-popover');
-                    expect(await popover.getProperty('minHeight')).toEqual(300);
-                });
-            });
-        });
-        describe('popoverMaxHeight', () => {
-            it('when provided, passes the value to q2-popover', async () => {
-                page = await setup({
-                    html: `
-                            <q2-tag label="My tag" popover-max-height="600">
-                                <q2-option value="1">Option 1</q2-option>
-                                <q2-option value="2">Option 2</q2-option>
-                                <q2-option value="3">Option 3</q2-option>
-                            </q2-tag>
-                        `,
-                });
-                popover = await page.find('q2-tag >>> q2-popover');
-                expect(await popover.getProperty('maxHeight')).toEqual(600);
-            });
-        });
-        describe('popoverDirection', () => {
-            describe('when not provided', () => {
-                it('does not default and does not pass a value to q2-popover', async () => {
-                    page = await setup({
-                        html: `
-                            <q2-tag label="My tag">
-                                <q2-option value="1">Option 1</q2-option>
-                                <q2-option value="2">Option 2</q2-option>
-                                <q2-option value="3">Option 3</q2-option>
-                            </q2-tag>
-                        `,
-                    });
-                    tag = await page.find('q2-tag');
-                    popover = await page.find('q2-tag >>> q2-popover');
-                    expect(await tag.getProperty('popoverDirection')).toBeUndefined();
-                    expect(await popover.getProperty('direction')).toBeUndefined();
-                });
-            });
-            describe('when provided', () => {
-                it('passes the provided value to the q2-popover', async () => {
-                    page = await setup({
-                        html: `
-                            <q2-tag label="My tag" popover-direction="up">
-                                <q2-option value="1">Option 1</q2-option>
-                                <q2-option value="2">Option 2</q2-option>
-                                <q2-option value="3">Option 3</q2-option>
-                            </q2-tag>
-                        `,
-                    });
-                    popover = await page.find('q2-tag >>> q2-popover');
-                    expect(await popover.getProperty('direction')).toEqual('up');
-                });
-            });
-        });
-        describe('popoverAlignment', () => {
-            it('can be initally set to left, then assigned to right, then back to left', async () => {
+        describe('focus', () => {
+            let page;
+            let tag;
+            beforeEach(async () => {
                 page = await setup({
                     html: `
-                        <q2-tag popover-alignment="left">
-                            <q2-option value="1">Option 1</q2-option>
-                            <q2-option value="2">Option 2</q2-option>
-                            <q2-option value="3">Option 3</q2-option>
-                        </q2-tag>
-                    `,
-                });
-                await page.waitForChanges();
-                tag = await page.find('q2-tag');
-                expect(await tag.getProperty('popoverAlignment')).toEqual('left');
-                tag.setProperty('popoverAlignment', 'right');
-                await page.waitForChanges();
-                expect(await tag.getProperty('popoverAlignment')).toEqual('right');
-                tag.setProperty('popoverAlignment', 'left');
-                await page.waitForChanges();
-                expect(await tag.getProperty('popoverAlignment')).toEqual('left');
-            });
-            it('will default to right via the prop inital value in q2-tag', async () => {
-                page = await setup({
-                    html: `
-                        <q2-tag>
-                            <q2-option value="1">Option 1</q2-option>
-                            <q2-option value="2">Option 2</q2-option>
-                            <q2-option value="3">Option 3</q2-option>
-                        </q2-tag>
-                    `,
-                });
-                await page.waitForChanges();
-                tag = await page.find('q2-tag');
-                expect(await tag.getProperty('popoverAlignment')).toEqual('right');
-            });
-        });
-    });
-    describe('Methods', () => {
-        beforeEach(async () => {
-            page = await setup({
-                html: `
                     <q2-tag label="My tag">
                         <q2-option value="1">Option 1</q2-option>
                         <q2-option value="2">Option 2</q2-option>
                         <q2-option value="3">Option 3</q2-option>
                     </q2-tag>
                 `,
+                });
+                tag = await page.find('q2-tag');
             });
-            tag = await page.find('q2-tag');
-        });
-        it('openPopover() opens the popover', async () => {
-            await tag.callMethod('openPopover');
-            await page.waitForChanges();
-            expect(tag).toHaveAttribute('open');
-        });
-        it('closePopover() closes the popover', async () => {
-            expect(tag).not.toHaveAttribute('open');
-            await tag.callMethod('openPopover');
-            await page.waitForChanges();
-            expect(tag).toHaveAttribute('open');
-            await tag.callMethod('closePopover');
-            await page.waitForChanges();
-            expect(tag).not.toHaveAttribute('open');
-        });
-        it('selectOption() selects the option matching the provided value and closes the popover ', async () => {
-            const clickSpy = await tag.spyOnEvent('click');
-            await tag.callMethod('selectOption', '2');
-            await page.waitForChanges();
-            expect(tag).not.toHaveAttribute('open');
-            expect(clickSpy).toHaveReceivedEventDetail({
-                value: '2',
-            });
-        });
-    });
-    describe('focus', () => {
-        let page;
-        let tag;
-        beforeEach(async () => {
-            page = await setup({
-                html: `
-                    <q2-tag label="My tag">
-                        <q2-option value="1">Option 1</q2-option>
-                        <q2-option value="2">Option 2</q2-option>
-                        <q2-option value="3">Option 3</q2-option>
-                    </q2-tag>
-                `,
+            it('focuses the <button> element when focus event is dispatched', async function () {
+                tag.triggerEvent('focus');
+                await page.waitForChanges();
+                expect(await getFocusedAttribute(page, 'test-id')).toEqual('btn-control');
             });
-            tag = await page.find('q2-tag');
         });
-        it('focuses the <button> element when focus event is dispatched', async function () {
-            tag.triggerEvent('focus');
-            await page.waitForChanges();
-            expect(await getFocusedAttribute(page, 'test-id')).toEqual('btn-control');
-        });
-    });
-    describe('Regressions', () => {
-        describe('TCT-2161', () => {
-            it('leaves the element when Tab is pressed', async function () {
-                page = await setup({
-                    html: `
+        describe('Regressions', () => {
+            describe('TCT-2161', () => {
+                it('leaves the element when Tab is pressed', async function () {
+                    page = await setup({
+                        html: `
                         <q2-tag label="My tag">
                             <q2-option value="1">Option 1</q2-option>
                             <q2-option value="2">Option 2</q2-option>
@@ -471,51 +176,136 @@ describe('q2-tag', () => {
                         </q2-tag>
                         <button test-id="btn-next">Test</button>
                     `,
+                    });
+                    tag = await page.find('q2-tag');
+                    await tag.focus();
+                    expect(await getActiveElementTestId(page)).toEqual('btn-control');
+                    await tag.press('Tab');
+                    await page.waitForChanges();
+                    expect(await getActiveElementTestId(page)).toEqual('btn-next');
                 });
-                tag = await page.find('q2-tag');
-                await tag.focus();
-                expect(await getActiveElementTestId(page)).toEqual('btn-control');
-                await tag.press('Tab');
-                await page.waitForChanges();
-                expect(await getActiveElementTestId(page)).toEqual('btn-next');
             });
         });
-    });
-    describe('Accessibility', () => {
-        describe('aXe DevTools', () => {
-            it('does not have accessibility violations', async () => {
-                const page = await setup({
-                    html: `<q2-tag label="My tag" theme="primary"></q2-tag>`,
+        describe('Accessibility', () => {
+            describe('aXe DevTools', () => {
+                it('does not have accessibility violations', async () => {
+                    const page = await setup({
+                        html: `<q2-tag label="My tag" theme="primary"></q2-tag>`,
+                    });
+                    const hasViolations = await evaluateA11y(page);
+                    expect(hasViolations).toBe(false);
                 });
-                const hasViolations = await evaluateA11y(page);
-                expect(hasViolations).toBe(false);
             });
-        });
-        describe('Accessibility Tree', () => {
-            it("option-list should have a role of 'menu' and the options a role of 'menuoption'", async () => {
-                page = await setup({
-                    html: `
+            describe('Accessibility Tree', () => {
+                it("option-list should have a role of 'menu' and the options a role of 'menuoption'", async () => {
+                    page = await setup({
+                        html: `
                         <q2-tag label="My tag" open>
                             <q2-option value="1">Option 1</q2-option>
                             <q2-option value="2">Option 2</q2-option>
                             <q2-option value="3">Option 3</q2-option>
                         </q2-tag>
                     `,
+                    });
+                    await page.waitForChanges();
+                    const snapshot = await page.accessibility.snapshot();
+                    const button = snapshot.children[0];
+                    const optionList = snapshot.children[1].children[0];
+                    expect(button.role).toEqual('combobox');
+                    expect(optionList.role).toEqual('menu');
+                    expect(optionList.children).toHaveLength(3);
+                    optionList.children.forEach(child => {
+                        expect(child.role).toEqual('menuitem');
+                    });
                 });
-                await page.waitForChanges();
-                const snapshot = await page.accessibility.snapshot();
-                const button = snapshot.children[0];
-                const optionList = snapshot.children[1].children[0];
-                expect(button.role).toEqual('combobox');
-                expect(optionList.role).toEqual('menu');
-                expect(optionList.children).toHaveLength(3);
-                optionList.children.forEach(child => {
-                    expect(child.role).toEqual('menuitem');
+            });
+            describe('Keyboard Controls', () => {
+                beforeEach(async () => {
+                    page = await setup({
+                        html: `
+                            <q2-tag label="My tag">
+                                <q2-option value="1">Option 1</q2-option>
+                                <q2-option value="2">Option 2</q2-option>
+                                <q2-option value="3">Option 3</q2-option>
+                            </q2-tag>
+                        `,
+                    });
+                    tag = await page.find('q2-tag');
+                    allOptions = await page.findAll('q2-option');
+                    popover = await page.find('q2-tag >>> q2-popover');
+                    optionContainer = await page.find('q2-tag >>> q2-option-list >>> .options');
+                    controlBtn = await page.find('q2-tag >>> button');
+                    clickSpy = await tag.spyOnEvent('click');
+                    changeSpy = await tag.spyOnEvent('change');
+                });
+                it('can select option via keyboard', async () => {
+                    const tagLabel = await page.find('q2-tag >>> .tag');
+                    expect(tagLabel.classList.contains('has-options')).toBe(true);
+                    expect(popover).not.toHaveAttribute('open');
+                    await controlBtn.press('ArrowDown');
+                    await page.waitForChanges();
+                    expect(tag).toHaveAttribute('open');
+                    expect(popover).toHaveAttribute('open');
+                    expect(await getFocusedOptionValue(page)).toEqual('1');
+                    await optionContainer.press('ArrowDown');
+                    await page.waitForChanges();
+                    expect(await getFocusedOptionValue(page)).toEqual('2');
+                    await allOptions[1].press(' ');
+                    await page.waitForChanges();
+                    expect(tag).not.toHaveAttribute('open');
+                    expect(popover).not.toHaveAttribute('open');
+                    expect(clickSpy).toHaveReceivedEventDetail({
+                        value: '2',
+                    });
+                    expect(changeSpy).not.toHaveReceivedEvent();
+                });
+                describe('when keyboard is pressed', () => {
+                    it('opens list and focuses first option on ArrowDown', async () => {
+                        await controlBtn.press('ArrowDown');
+                        await page.waitForChanges();
+                        expect(tag).toHaveAttribute('open');
+                        expect(popover).toHaveAttribute('open');
+                        expect(await getFocusedOptionValue(page)).toEqual('1');
+                    });
+                    it('opens list and focuses last option on ArrowUp', async () => {
+                        await controlBtn.press('ArrowUp');
+                        await page.waitForChanges();
+                        expect(tag).toHaveAttribute('open');
+                        expect(popover).toHaveAttribute('open');
+                        expect(await getFocusedOptionValue(page)).toEqual('3');
+                    });
+                    it('opens list and focuses first option on Enter', async () => {
+                        await controlBtn.press('Enter');
+                        await page.waitForChanges();
+                        expect(tag).toHaveAttribute('open');
+                        expect(popover).toHaveAttribute('open');
+                        expect(await getFocusedOptionValue(page)).toEqual('1');
+                    });
+                    it('opens list and focuses first option on Space', async () => {
+                        await controlBtn.press(' ');
+                        await page.waitForChanges();
+                        expect(tag).toHaveAttribute('open');
+                        expect(popover).toHaveAttribute('open');
+                        expect(await getFocusedOptionValue(page)).toEqual('1');
+                    });
+                    it('opens list and focuses last option on Home', async () => {
+                        await controlBtn.press('Home');
+                        await page.waitForChanges();
+                        expect(tag).toHaveAttribute('open');
+                        expect(popover).toHaveAttribute('open');
+                        expect(await getFocusedAttribute(page, 'value')).toEqual('1');
+                    });
+                    it('opens list and focuses last option on End', async () => {
+                        await controlBtn.press('End');
+                        await page.waitForChanges();
+                        expect(tag).toHaveAttribute('open');
+                        expect(popover).toHaveAttribute('open');
+                        expect(await getFocusedAttribute(page, 'value')).toEqual('3');
+                    });
                 });
             });
+            describe('Other', () => { });
         });
-        describe('Keyboard Controls', () => { });
-        describe('Other', () => { });
     });
 });
 //# sourceMappingURL=q2-tag-test.e2e.js.map