npm - q2-tecton-elements - Versions diffs - 1.52.2 → 1.54.0 - Mend

q2-tecton-elements 1.52.2 → 1.54.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (361) hide show

package/dist/collection/components/q2-pill/q2-pill.js CHANGED Viewed

@@ -26,6 +26,7 @@ export class Q2Pill {
         };
         this.executeActionSheet = async (event) => {
             const result = await showActionSheetList(this, event);
+            this.primaryBtn.focus();
             this.handleSelectionChanges(result);
         };
         this.getOption = async (value) => {
@@ -37,9 +38,12 @@ export class Q2Pill {
                 return this.hostElement.querySelector(`q2-option[value="${value}"]`);
             }
         };
-        this.handleButtonFocusout = async (event) => {
+        this.handleFocusOut = async (event) => {
+            var _a;
             const relatedTarget = event.relatedTarget;
-            if ((relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.tagName) === 'Q2-OPTION')
+            if ((_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.contains(relatedTarget))
+                return;
+            if (this.hostElement.contains(relatedTarget))
                 return;
             this.open = false;
         };
@@ -97,7 +101,7 @@ export class Q2Pill {
                     this.value = undefined;
                 }
                 else {
-                    const selectedOption = await this.getOption(value);
+                    const selectedOption = (await this.getOption(value));
                     this.selectedOptions = selectedOption
                         ? [{ value: selectedOption.value, display: selectedOption.display }]
                         : [];
@@ -143,7 +147,8 @@ export class Q2Pill {
             const options = await ((_a = this.optionList) === null || _a === void 0 ? void 0 : _a.getOptions());
             if (this.optionCount)
                 this.active = !!selectedValues.length;
-            this.selectedOptionElements = (options === null || options === void 0 ? void 0 : options.filter(option => selectedValues.includes(option.value))) || [];
+            this.selectedOptionElements =
+                (options === null || options === void 0 ? void 0 : options.filter(option => selectedValues.includes(option.value))) || [];
         };
         this.updateSlotState = () => {
             const { hostElement, hasPopoverTop, hasPopoverBottom } = this;
@@ -249,7 +254,7 @@ export class Q2Pill {
     async setValue(values, options = { closePopover: true }) {
         var _a;
         const valueSet = new Set(Array.isArray(values) ? values : [values]);
-        const allOptions = await ((_a = this.optionList) === null || _a === void 0 ? void 0 : _a.getOptions());
+        const allOptions = (await ((_a = this.optionList) === null || _a === void 0 ? void 0 : _a.getOptions()));
         if (!this.open) {
             await this.openPopover();
             await waitForNextPaint();
@@ -290,7 +295,7 @@ export class Q2Pill {
         if (newValue === firstValue)
             this.updateSelectedOptionElements();
         else {
-            const selectedOption = await this.getOption(newValue);
+            const selectedOption = (await this.getOption(newValue));
             const { value, display } = selectedOption || { value: newValue, display: null };
             this.selectedOptions = value ? [{ value, display }] : [];
         }
@@ -337,7 +342,7 @@ export class Q2Pill {
             wrapperClassNames.push('has-icon');
         if (optionCount)
             wrapperClassNames.push('has-options');
-        return (h("click-elsewhere", { key: '2e6401852016f9edeb1e27b8b69335755a7a9202', onChange: this.onClickElsewhere }, h("div", { key: '997b3609f4cbd894fdf412d71624de290558a53c', class: wrapperClassNames.join(' ') }, h("div", { key: '6326d50ba96228f78ccf29f1ac3ec2f88d4d88aa', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: 'bf29ea540b04bef1a58c9106b15a0155e8c9f81b', class: "btn-primary", "test-id": "btn-control", type: "button", role: (optionCount && 'combobox') || undefined, ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": this.buttonContent, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent, !optionCount && active && h("span", { key: '927bcd7ece084b5eb47bea58357f0f3f62d07536', class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: 'a87ee59b7a7b9b0f4cecb7d74aa71618e50c57ba', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("div", { key: '3952981f8a3dec4126035529df72e04f59dd3245', class: "popover-content" }, h("div", { key: 'f31e255a8f052cd2d3d1a53506ba51b4fdb936c3', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleKeydown }, h("slot", { key: '18a55b89efe4ca840cbb80c8266c5aa5cdd2c9d8', name: "popover-top" })), h("q2-option-list", { key: '923c991cc3dddc5ad8d8416b488f5c151b215984', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", { key: '00d05bcff3be94a8de0dad038f67f9650234ef0f' })), h("div", { key: 'cbbb918f147fe82de2411dba9d7297d18d540c2e', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleKeydown }, h("slot", { key: 'd327cd4e04931acd87f4889229543d69b3340860', name: "popover-bottom" })))))));
+        return (h("click-elsewhere", { key: '42dced5b6e9014362980f4f6310fe3538ff3ced9', onChange: this.onClickElsewhere }, h("div", { key: '7cc2a6e5a9dad73564d7127d3adc2a55f5465d82', class: wrapperClassNames.join(' ') }, h("div", { key: '43bc33de012bd7de5369037f19cfabc31688afa0', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: 'a2421c3c6a0219cebb68d31679b3877b87090fe8', class: "btn-primary", "test-id": "btn-control", type: "button", role: (optionCount && 'combobox') || undefined, ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleFocusOut, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": this.buttonContent, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent, !optionCount && active && h("span", { key: 'f760cc0a9cebbf45328510ed928025ed88f1da00', class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: '5f33a1298dda8fdf0b858afaac71adb5ca6c2429', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, onFocusout: this.handleFocusOut }, h("div", { key: 'b568df98d6b7c5a7fefc4261e4cf437ca47c6666', class: "popover-content" }, h("div", { key: '1198cd47cfed3fe5eb2971b1872046eeb912a377', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleKeydown }, h("slot", { key: '5cbd8b646ed30b03d27503c4fe9fc19bf2f926d4', name: "popover-top" })), h("q2-option-list", { key: '512825dd2d6736d8b2ed09d607bf2479c1febe50', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", { key: '3c6081da6094ff75ea383d917c4a627e2c43805e' })), h("div", { key: '3353abb362573e54905a74d564010c36db5fa068', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleKeydown }, h("slot", { key: '0e47b0b2f6701b5beba8f4a8fc367ee25e53ee81', name: "popover-bottom" })))))));
     }
     static get is() { return "q2-pill"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-pill/q2-pill.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-pill.js","sourceRoot":"","sources":["../../../src/components/q2-pill/q2-pill.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n State,\n Prop,\n h,\n ComponentInterface,\n Listen,\n Watch,\n Element,\n EventEmitter,\n Event,\n Method,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, resizeIframe, waitForNextPaint } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\nimport { IOptionValue } from '../q2-option-list/q2-option-list';\n\n@Component({ tag: 'q2-pill', shadow: true, styleUrl: 'q2-pill.scss' })\nexport class Q2Pill implements ComponentInterface {\n // #region Own Properties\n\n mutationObserver: MutationObserver;\n optionList: HTMLQ2OptionListElement;\n popoverBottomContainer: HTMLElement;\n popoverElement: HTMLQ2PopoverElement;\n popoverTopContainer: HTMLElement;\n primaryBtn: HTMLButtonElement;\n primaryBtnWrapper: HTMLElement;\n scheduledAfterRender: (() => void)[] = [];\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 hasPopoverBottom = false;\n\n @State()\n hasPopoverTop = false;\n\n @State()\n optionCount: number;\n\n @State()\n selectedOptionElements: HTMLQ2OptionElement[] = [];\n\n // #endregion\n // #region Public Property API\n\n /** Determine if the elements is in the selected state, with values. /\n @Prop({ reflect: true, mutable: true })\n active: boolean;\n\n /* Indicates that the pill has no border /\n @Prop({ reflect: true })\n borderless: boolean;\n\n /* Indicates the pill cannot be focused or interacted with. /\n @Prop({ reflect: true })\n disabled: boolean;\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 The maximum number of characters to display before ellipcizing.\n * @info\n * Limitless by default.\n /\n @Prop({ reflect: true })\n maxLength: number;\n\n /\n Enables the multi-select ability for the dropdown.\n * @info\n * Only applicable when options are provided.\n /\n @Prop({ reflect: true })\n multiple: boolean;\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;\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 /* A list of the selected options on the element. /\n @Prop({ mutable: true })\n selectedOptions: IOptionValue[] = [];\n\n /* The color of the element when in the active state. /\n @Prop({ reflect: true })\n theme: 'primary' \| 'secondary' \| 'tertiary';\n\n /* The value emitted when the component is selected. /\n @Prop({ reflect: true, mutable: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the pill is clicked or the selected options change.\n \n When multi-select is enabled, `value` will be `undefined`.\n * @legacyEvent\n /\n @Event()\n change: EventEmitter<{ value: string; values: IOptionValue[]; active: boolean }>;\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.onMutationObserved);\n observer.observe(this.hostElement, { childList: true, attributes: true });\n this.mutationObserver = observer;\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n this.syncValueProperties();\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('displayChanged')\n handleSelectedDisplay() {\n if (this.multiple) return;\n this.updateSelectedOptionElements();\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.primaryBtn.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 `<button>` to hide the popover if it is visible.\n \n @testOnly\n /\n @Method()\n async closePopover() {\n if (!this.open \|\| this.disabled) return;\n this._togglePopover();\n }\n\n /\n Emulates clicking the `<button>` to display the popover if it is hidden.\n \n @testOnly\n /\n @Method()\n async openPopover() {\n if (this.open \|\| this.disabled) return;\n this._togglePopover();\n }\n\n /\n Emulates clicking the `<button>` to display the popover and selecting the option(s) with the specified value(s).\n \n If multi-select is enabled and the `closePopover` argument is `true` (default), the popover will be closed\n * after the option(s) are selected.\n \n @testOnly\n */\n @Method()\n async setValue(values: string \| string[], options: { closePopover?: boolean } = { closePopover: true }) {\n const valueSet = new Set(Array.isArray(values) ? values : [values]);\n const allOptions: HTMLQ2OptionElement[] = await this.optionList?.getOptions();\n if (!this.open) {\n await this.openPopover();\n await waitForNextPaint();\n }\n\n valueSet.forEach(value => {\n allOptions.find(option => option.value === value)?.click();\n });\n\n if (options.closePopover) {\n await this.closePopover();\n await waitForNextPaint();\n }\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('selectedOptions')\n selectedOptionsChanged(newValue) {\n const { multiple } = this;\n const firstValue = newValue?.[0]?.value ?? null;\n if (multiple) {\n if (this.value) this.value = null;\n this.updateSelectedOptionElements();\n } else if (this.value === firstValue) {\n this.updateSelectedOptionElements();\n } else {\n this.value = firstValue;\n }\n }\n\n @Watch('value')\n async valueChanged(newValue) {\n const { multiple, selectedOptions } = this;\n if (multiple) return;\n const firstValue = selectedOptions?.[0]?.value ?? null;\n if (newValue === firstValue) this.updateSelectedOptionElements();\n else {\n const selectedOption = await this.getOption(newValue);\n const { value, display } = selectedOption \|\| { value: newValue, display: null };\n this.selectedOptions = value ? [{ value, display }] : [];\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get buttonContent() {\n const { label, selectedOptions, selectedOptionElements, optionCount } = this;\n\n if (!optionCount \|\| selectedOptionElements.length === 0) return loc(label);\n else if (selectedOptionElements.length === 1) return loc(selectedOptionElements[0].display);\n\n return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });\n }\n\n get truncatedButtonContent() {\n const { maxLength, buttonContent } = this;\n if (maxLength && buttonContent.length > maxLength) return `${buttonContent.substring(0, maxLength)}…`;\n else return buttonContent;\n }\n\n _togglePopover() {\n const { primaryBtn } = this;\n primaryBtn?.click();\n primaryBtn?.focus();\n primaryBtn.dispatchEvent(new FocusEvent('focus'));\n }\n\n clearSelectedOptions = () => {\n this.selectedOptions = [];\n this.value = null;\n this.active = false;\n this.open = false;\n this.primaryBtn.focus();\n this.change.emit({ value: null, values: [], active: false });\n this.scheduledAfterRender.push(resizeIframe);\n };\n\n determineOptionCount = async () => {\n if (this.optionList) {\n const allOptions = await this.optionList.getOptions();\n this.optionCount = allOptions.length;\n } else {\n const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n this.optionCount = numberOfOptions;\n }\n };\n\n executeActionSheet = async (event: MouseEvent \| KeyboardEvent) => {\n const result = await showActionSheetList(this, event);\n this.handleSelectionChanges(result);\n };\n\n getOption = async (value: string) => {\n if (this.optionList) {\n const options = await this.optionList.getOptions();\n return options.find(option => option.value === value);\n } else {\n return this.hostElement.querySelector<HTMLQ2OptionElement>(`q2-option[value=\"${value}\"]`);\n }\n };\n\n handleButtonFocusout = async (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n if (relatedTarget?.tagName === 'Q2-OPTION') return;\n this.open = false;\n };\n\n handleChange = event => {\n event.stopPropagation();\n if (!this.optionCount) return;\n this.handleSelectionChanges(event.detail);\n };\n\n handleClick = async (event: MouseEvent) => {\n event.stopPropagation();\n if (this.disabled) return;\n if (this.optionCount) {\n if (shouldShowActionSheet(this)) {\n this.executeActionSheet(event);\n } else {\n await this.popoverElement.toggle();\n }\n } else {\n const { value, label } = this;\n const isActive = (this.active = !this.active);\n const values = isActive ? [{ value, display: label }] : [];\n this.selectedOptions = values;\n this.change.emit({\n value,\n values,\n active: isActive,\n });\n }\n };\n\n handleKeydown = async (event: KeyboardEvent) => {\n const isTabMetaOrCtrl = event.metaKey \|\| event.ctrlKey \|\| event.key === 'Tab';\n if (!this.optionCount \|\| this.disabled \|\| isTabMetaOrCtrl) return;\n event.preventDefault();\n const hasSlot = this.hasPopoverTop \|\| this.hasPopoverBottom;\n\n // slots are incompatible with action sheet\n if (shouldShowActionSheet(this, event) && !hasSlot) {\n this.executeActionSheet(event);\n } else {\n this.optionList.handleExternalKeydown(event);\n }\n };\n\n handleSelectionChanges = async (changeDetails: { value?: string; values?: IOptionValue[] }) => {\n const { multiple } = this;\n const { value = '', values = [] } = changeDetails;\n const isActive = multiple ? !!values.length : !!value;\n if (!this.hostElement.onchange) {\n if (multiple) {\n this.selectedOptions = values;\n this.value = undefined;\n } else {\n const selectedOption = await this.getOption(value);\n this.selectedOptions = selectedOption\n ? [{ value: selectedOption.value, display: selectedOption.display }]\n : [];\n this.value = selectedOption?.value \|\| undefined;\n }\n }\n\n this.change.emit({\n value: multiple ? undefined : value,\n values,\n active: isActive,\n });\n };\n\n handleWrapperClick = () => {\n this.primaryBtn.focus();\n this.primaryBtn.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 onMutationObserved = () => {\n this.updateSlotState();\n this.determineOptionCount();\n this.updateSelectedOptionElements();\n };\n\n syncValueProperties = () => {\n const { value, selectedOptions } = this;\n if (!!selectedOptions?.length) this.selectedOptionsChanged(selectedOptions);\n else if (value) this.valueChanged(value);\n };\n\n updateSelectedOptionElements = async () => {\n const { selectedOptions = [] } = this;\n const selectedValues = selectedOptions.map(option => option.value);\n const options = await this.optionList?.getOptions();\n if (this.optionCount) this.active = !!selectedValues.length;\n this.selectedOptionElements = options?.filter(option => selectedValues.includes(option.value)) \|\| [];\n };\n\n updateSlotState = () => {\n const { hostElement, hasPopoverTop, hasPopoverBottom } = this;\n const popTopSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-top\"]');\n const popBottomSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-bottom\"]');\n const topSlotHasNode = popTopSlot?.assignedNodes().length > 0;\n const bottomSlotHasNode = popBottomSlot?.assignedNodes().length > 0;\n\n if (hasPopoverTop !== topSlotHasNode) this.hasPopoverTop = topSlotHasNode;\n if (hasPopoverBottom !== bottomSlotHasNode) this.hasPopoverBottom = bottomSlotHasNode;\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 renderIcon() {\n const { optionCount, active } = this;\n const isButton = optionCount && active;\n const TagName = isButton ? 'button' : 'div';\n const iconName = isButton \|\| !optionCount ? 'close' : 'chevron-down';\n\n return (\n <TagName\n class=\"btn-close\"\n onClick={(isButton && this.clearSelectedOptions) \|\| undefined}\n disabled={(isButton && this.disabled) \|\| undefined}\n aria-label={(isButton && loc('tecton.element.pill.clearSelection')) \|\| undefined}\n type={(isButton && 'button') \|\| undefined}\n >\n <q2-icon type={iconName}></q2-icon>\n </TagName>\n );\n }\n\n render() {\n const { optionCount, active, open } = this;\n const wrapperClassNames = ['btn-wrapper'];\n if (optionCount \|\| active) wrapperClassNames.push('has-icon');\n if (optionCount) wrapperClassNames.push('has-options');\n\n return (\n <click-elsewhere onChange={this.onClickElsewhere}>\n <div class={wrapperClassNames.join(' ')}>\n <div\n class=\"btn-height-wrapper\"\n ref={el => (this.primaryBtnWrapper = el)}\n onClick={this.handleWrapperClick}\n tabIndex={-1}\n >\n <button\n class=\"btn-primary\"\n test-id=\"btn-control\"\n type=\"button\"\n role={(optionCount && 'combobox') \|\| undefined}\n ref={el => (this.primaryBtn = el)}\n onClick={this.handleClick}\n onKeyDown={this.handleKeydown}\n onFocusout={this.handleButtonFocusout}\n disabled={this.disabled}\n aria-roledescription={!optionCount && 'filter'}\n aria-controls={(optionCount && 'option-list') \|\| undefined}\n aria-expanded={(optionCount && `${!!open}`) \|\| undefined}\n aria-label={this.buttonContent}\n aria-describedby={(optionCount && 'option-description') \|\| undefined}\n >\n {this.truncatedButtonContent}\n {!optionCount && active && <span class=\"sr\">({loc('tecton.element.pill.active')})</span>}\n </button>\n </div>\n {this.renderIcon()}\n {!!optionCount && this.renderHiddenElement()}\n </div>\n {this.optionCount > 0 && (\n <q2-popover\n ref={el => (this.popoverElement = el)}\n controlElement={this.primaryBtn}\n open={this.open}\n max-height={this.popoverMaxHeight}\n minHeight={this.popoverMinHeight}\n direction={this.popoverDirection}\n align={this.popoverAlignment}\n >\n <div class=\"popover-content\">\n <div\n ref={el => (this.popoverTopContainer = el)}\n class=\"popover-top-container\"\n tabindex=\"-1\"\n hidden={!this.hasPopoverTop}\n onKeyDown={this.handleKeydown}\n >\n <slot name=\"popover-top\"></slot>\n </div>\n <q2-option-list\n type=\"listbox\"\n ref={el => (this.optionList = el)}\n id=\"option-list\"\n onChange={this.handleChange}\n multiple={this.multiple}\n selectedOptions={this.selectedOptions}\n onReady={() => this.updateSelectedOptionElements()}\n label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n >\n <slot />\n </q2-option-list>\n <div\n ref={el => (this.popoverBottomContainer = el)}\n class=\"popover-bottom-container\"\n tabindex=\"-1\"\n hidden={!this.hasPopoverBottom}\n onKeyDown={this.handleKeydown}\n >\n <slot name=\"popover-bottom\"></slot>\n </div>\n </div>\n </q2-popover>\n )}\n </click-elsewhere>\n );\n }\n\n // #endregion\n}\n"]}
1	+ {"version":3,"file":"q2-pill.js","sourceRoot":"","sources":["../../../src/components/q2-pill/q2-pill.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,KAAK,EACL,IAAI,EACJ,CAAC,EAED,MAAM,EACN,KAAK,EACL,OAAO,EAEP,KAAK,EACL,MAAM,GACT,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,GAAG,EAAE,aAAa,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AACnG,OAAO,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAIpF,MAAM,OAAO,MAAM;;;QAUf,yBAAoB,GAAmB,EAAE,CAAC;QAwR1C,yBAAoB,GAAG,GAAG,EAAE;YACxB,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC;YAC1B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YAClB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;YACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;YAC7D,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACjD,CAAC,CAAC;QAEF,yBAAoB,GAAG,KAAK,IAAI,EAAE;YAC9B,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBAClB,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,UAAU,EAAE,CAAC;gBACtD,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC,MAAM,CAAC;YACzC,CAAC;iBAAM,CAAC;gBACJ,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC;gBAC9E,IAAI,CAAC,WAAW,GAAG,eAAe,CAAC;YACvC,CAAC;QACL,CAAC,CAAC;QAEF,uBAAkB,GAAG,KAAK,EAAE,KAAiC,EAAE,EAAE;YAC7D,MAAM,MAAM,GAAG,MAAM,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;YACtD,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;YACxB,IAAI,CAAC,sBAAsB,CAAC,MAAM,CAAC,CAAC;QACxC,CAAC,CAAC;QAEF,cAAS,GAAG,KAAK,EAAE,KAAa,EAAE,EAAE;YAChC,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBAClB,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,UAAU,EAAE,CAAC;gBACnD,OAAO,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;YAC1D,CAAC;iBAAM,CAAC;gBACJ,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAsB,oBAAoB,KAAK,IAAI,CAAC,CAAC;YAC9F,CAAC;QACL,CAAC,CAAC;QAEF,mBAAc,GAAG,KAAK,EAAE,KAAiB,EAAE,EAAE;;YACzC,MAAM,aAAa,GAAG,KAAK,CAAC,aAAuC,CAAC;YACpE,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,IAAI,CAAC,sBAAsB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAC9C,CAAC,CAAC;QAEF,gBAAW,GAAG,KAAK,EAAE,KAAiB,EAAE,EAAE;YACtC,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;gBACnB,IAAI,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC;oBAC9B,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;gBACnC,CAAC;qBAAM,CAAC;oBACJ,MAAM,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC;gBACvC,CAAC;YACL,CAAC;iBAAM,CAAC;gBACJ,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;gBAC9B,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;gBAC9C,MAAM,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;gBAC3D,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC;gBAC9B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;oBACb,KAAK;oBACL,MAAM;oBACN,MAAM,EAAE,QAAQ;iBACnB,CAAC,CAAC;YACP,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,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,QAAQ,IAAI,eAAe;gBAAE,OAAO;YAClE,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,gBAAgB,CAAC;YAE5D,2CAA2C;YAC3C,IAAI,qBAAqB,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;gBACjD,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;YACnC,CAAC;iBAAM,CAAC;gBACJ,IAAI,CAAC,UAAU,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC;YACjD,CAAC;QACL,CAAC,CAAC;QAEF,2BAAsB,GAAG,KAAK,EAAE,aAA0D,EAAE,EAAE;YAC1F,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;YAC1B,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,EAAE,GAAG,aAAa,CAAC;YAClD,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YACtD,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,CAAC;gBAC7B,IAAI,QAAQ,EAAE,CAAC;oBACX,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC;oBAC9B,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;gBAC3B,CAAC;qBAAM,CAAC;oBACJ,MAAM,cAAc,GAAG,CAAC,MAAM,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAwB,CAAC;oBAC5E,IAAI,CAAC,eAAe,GAAG,cAAc;wBACjC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE,OAAO,EAAE,cAAc,CAAC,OAAO,EAAE,CAAC;wBACpE,CAAC,CAAC,EAAE,CAAC;oBACT,IAAI,CAAC,KAAK,GAAG,CAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,KAAK,KAAI,SAAS,CAAC;gBACpD,CAAC;YACL,CAAC;YAED,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;gBACb,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK;gBACnC,MAAM;gBACN,MAAM,EAAE,QAAQ;aACnB,CAAC,CAAC;QACP,CAAC,CAAC;QAEF,uBAAkB,GAAG,GAAG,EAAE;YACtB,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;YACxB,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;QAC5B,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,eAAe,EAAE,CAAC;YACvB,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC5B,IAAI,CAAC,4BAA4B,EAAE,CAAC;QACxC,CAAC,CAAC;QAEF,wBAAmB,GAAG,GAAG,EAAE;YACvB,MAAM,EAAE,KAAK,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;YACxC,IAAI,CAAC,CAAC,CAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,MAAM,CAAA;gBAAE,IAAI,CAAC,sBAAsB,CAAC,eAAe,CAAC,CAAC;iBACvE,IAAI,KAAK;gBAAE,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QAC7C,CAAC,CAAC;QAEF,iCAA4B,GAAG,KAAK,IAAI,EAAE;;YACtC,MAAM,EAAE,eAAe,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC;YACtC,MAAM,cAAc,GAAG,eAAe,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YACnE,MAAM,OAAO,GAAG,MAAM,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,UAAU,EAAE,CAAA,CAAC;YACpD,IAAI,IAAI,CAAC,WAAW;gBAAE,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,cAAc,CAAC,MAAM,CAAC;YAC5D,IAAI,CAAC,sBAAsB;gBACvB,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,cAAc,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAA2B,KAAI,EAAE,CAAC;QAC1G,CAAC,CAAC;QAEF,oBAAe,GAAG,GAAG,EAAE;YACnB,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC;YAC9D,MAAM,UAAU,GAAG,WAAW,CAAC,UAAU,CAAC,aAAa,CAAkB,0BAA0B,CAAC,CAAC;YACrG,MAAM,aAAa,GAAG,WAAW,CAAC,UAAU,CAAC,aAAa,CAAkB,6BAA6B,CAAC,CAAC;YAC3G,MAAM,cAAc,GAAG,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,aAAa,GAAG,MAAM,IAAG,CAAC,CAAC;YAC9D,MAAM,iBAAiB,GAAG,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,aAAa,GAAG,MAAM,IAAG,CAAC,CAAC;YAEpE,IAAI,aAAa,KAAK,cAAc;gBAAE,IAAI,CAAC,aAAa,GAAG,cAAc,CAAC;YAC1E,IAAI,gBAAgB,KAAK,iBAAiB;gBAAE,IAAI,CAAC,gBAAgB,GAAG,iBAAiB,CAAC;QAC1F,CAAC,CAAC;gCAraiB,KAAK;6BAGR,KAAK;;sCAM2B,EAAE;;;;qBAuBjC,CAAC,CAAC,CAAA,MAAA,MAAM,CAAC,MAAM,0CAAE,eAAe,CAAA;;;;;;gCAuCZ,OAAO;;;gCAkBjB,GAAG;+BAII,EAAE;;;;IAsBpC,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,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAC/D,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;QAC1E,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;IACrC,CAAC;IAED,gBAAgB;QACZ,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAChC,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC/B,CAAC;IAED,kBAAkB;QACd,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;QAC9C,IAAI,CAAC,oBAAoB,GAAG,EAAE,CAAC;IACnC,CAAC;IAED,aAAa;IACb,oBAAoB;IAGpB,qBAAqB;QACjB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,4BAA4B,EAAE,CAAC;IACxC,CAAC;IAGD,aAAa,CAAC,KAAiB;QAC3B,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;YAAE,OAAO;QACzD,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;IAC5B,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;;;;OAIG;IAEH,KAAK,CAAC,YAAY;QACd,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QACxC,IAAI,CAAC,cAAc,EAAE,CAAC;IAC1B,CAAC;IAED;;;;OAIG;IAEH,KAAK,CAAC,WAAW;QACb,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QACvC,IAAI,CAAC,cAAc,EAAE,CAAC;IAC1B,CAAC;IAED;;;;;;;OAOG;IAEH,KAAK,CAAC,QAAQ,CAAC,MAAyB,EAAE,UAAsC,EAAE,YAAY,EAAE,IAAI,EAAE;;QAClG,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;QACpE,MAAM,UAAU,GAAG,CAAC,MAAM,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,UAAU,EAAE,CAAA,CAA0B,CAAC;QAClF,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACb,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC;YACzB,MAAM,gBAAgB,EAAE,CAAC;QAC7B,CAAC;QAED,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;;YACrB,MAAA,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,KAAK,CAAC,0CAAE,KAAK,EAAE,CAAC;QAC/D,CAAC,CAAC,CAAC;QAEH,IAAI,OAAO,CAAC,YAAY,EAAE,CAAC;YACvB,MAAM,IAAI,CAAC,YAAY,EAAE,CAAC;YAC1B,MAAM,gBAAgB,EAAE,CAAC;QAC7B,CAAC;IACL,CAAC;IAED,aAAa;IACb,mBAAmB;IAGnB,sBAAsB,CAAC,QAAQ;;QAC3B,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAC1B,MAAM,UAAU,GAAG,MAAA,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,0CAAE,KAAK,mCAAI,IAAI,CAAC;QAChD,IAAI,QAAQ,EAAE,CAAC;YACX,IAAI,IAAI,CAAC,KAAK;gBAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YAClC,IAAI,CAAC,4BAA4B,EAAE,CAAC;QACxC,CAAC;aAAM,IAAI,IAAI,CAAC,KAAK,KAAK,UAAU,EAAE,CAAC;YACnC,IAAI,CAAC,4BAA4B,EAAE,CAAC;QACxC,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC;QAC5B,CAAC;IACL,CAAC;IAGD,KAAK,CAAC,YAAY,CAAC,QAAQ;;QACvB,MAAM,EAAE,QAAQ,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;QAC3C,IAAI,QAAQ;YAAE,OAAO;QACrB,MAAM,UAAU,GAAG,MAAA,MAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAG,CAAC,CAAC,0CAAE,KAAK,mCAAI,IAAI,CAAC;QACvD,IAAI,QAAQ,KAAK,UAAU;YAAE,IAAI,CAAC,4BAA4B,EAAE,CAAC;aAC5D,CAAC;YACF,MAAM,cAAc,GAAG,CAAC,MAAM,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAwB,CAAC;YAC/E,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,cAAc,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;YAChF,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAC7D,CAAC;IACL,CAAC;IAED,aAAa;IACb,wBAAwB;IAExB,IAAI,aAAa;QACb,MAAM,EAAE,KAAK,EAAE,eAAe,EAAE,sBAAsB,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;QAE7E,IAAI,CAAC,WAAW,IAAI,sBAAsB,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,GAAG,CAAC,KAAK,CAAC,CAAC;aACtE,IAAI,sBAAsB,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,GAAG,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QAE5F,OAAO,GAAG,CAAC,iCAAiC,EAAE,EAAE,KAAK,EAAE,eAAe,CAAC,MAAM,EAAE,CAAC,CAAC;IACrF,CAAC;IAED,IAAI,sBAAsB;QACtB,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC;QAC1C,IAAI,SAAS,IAAI,aAAa,CAAC,MAAM,GAAG,SAAS;YAAE,OAAO,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC;;YACjG,OAAO,aAAa,CAAC;IAC9B,CAAC;IAED,cAAc;QACV,MAAM,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QAC5B,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,KAAK,EAAE,CAAC;QACpB,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,KAAK,EAAE,CAAC;QACpB,UAAU,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;IACtD,CAAC;IA6JD,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,UAAU;QACN,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;QACrC,MAAM,QAAQ,GAAG,WAAW,IAAI,MAAM,CAAC;QACvC,MAAM,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;QAC5C,MAAM,QAAQ,GAAG,QAAQ,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;QAErE,OAAO,CACH,EAAC,OAAO,IACJ,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,CAAC,QAAQ,IAAI,IAAI,CAAC,oBAAoB,CAAC,IAAI,SAAS,EAC7D,QAAQ,EAAE,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,SAAS,gBACtC,CAAC,QAAQ,IAAI,GAAG,CAAC,oCAAoC,CAAC,CAAC,IAAI,SAAS,EAChF,IAAI,EAAE,CAAC,QAAQ,IAAI,QAAQ,CAAC,IAAI,SAAS;YAEzC,eAAS,IAAI,EAAE,QAAQ,GAAY,CAC7B,CACb,CAAC;IACN,CAAC;IAED,MAAM;QACF,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QAC3C,MAAM,iBAAiB,GAAG,CAAC,aAAa,CAAC,CAAC;QAC1C,IAAI,WAAW,IAAI,MAAM;YAAE,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC9D,IAAI,WAAW;YAAE,iBAAiB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAEvD,OAAO,CACH,wEAAiB,QAAQ,EAAE,IAAI,CAAC,gBAAgB;YAC5C,4DAAK,KAAK,EAAE,iBAAiB,CAAC,IAAI,CAAC,GAAG,CAAC;gBACnC,4DACI,KAAK,EAAC,oBAAoB,EAC1B,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,GAAG,EAAE,CAAC,EACxC,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAChC,QAAQ,EAAE,CAAC,CAAC;oBAEZ,+DACI,KAAK,EAAC,aAAa,aACX,aAAa,EACrB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,CAAC,WAAW,IAAI,UAAU,CAAC,IAAI,SAAS,EAC9C,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,EACjC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,UAAU,EAAE,IAAI,CAAC,cAAc,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,0BACD,CAAC,WAAW,IAAI,QAAQ,mBAC/B,CAAC,WAAW,IAAI,aAAa,CAAC,IAAI,SAAS,mBAC3C,CAAC,WAAW,IAAI,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,IAAI,SAAS,gBAC5C,IAAI,CAAC,aAAa,sBACZ,CAAC,WAAW,IAAI,oBAAoB,CAAC,IAAI,SAAS;wBAEnE,IAAI,CAAC,sBAAsB;wBAC3B,CAAC,WAAW,IAAI,MAAM,IAAI,6DAAM,KAAK,EAAC,IAAI;;4BAAG,GAAG,CAAC,4BAA4B,CAAC;gCAAS,CACnF,CACP;gBACL,IAAI,CAAC,UAAU,EAAE;gBACjB,CAAC,CAAC,WAAW,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAC1C;YACL,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CACrB,mEACI,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,EACrC,cAAc,EAAE,IAAI,CAAC,UAAU,EAC/B,IAAI,EAAE,IAAI,CAAC,IAAI,gBACH,IAAI,CAAC,gBAAgB,EACjC,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAC5B,UAAU,EAAE,IAAI,CAAC,cAAc;gBAE/B,4DAAK,KAAK,EAAC,iBAAiB;oBACxB,4DACI,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,mBAAmB,GAAG,EAAE,CAAC,EAC1C,KAAK,EAAC,uBAAuB,EAC7B,QAAQ,EAAC,IAAI,EACb,MAAM,EAAE,CAAC,IAAI,CAAC,aAAa,EAC3B,SAAS,EAAE,IAAI,CAAC,aAAa;wBAE7B,6DAAM,IAAI,EAAC,aAAa,GAAQ,CAC9B;oBACN,uEACI,IAAI,EAAC,SAAS,EACd,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,EACjC,EAAE,EAAC,aAAa,EAChB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,4BAA4B,EAAE,EAClD,KAAK,EAAE,GAAG,CAAC,iCAAiC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;wBAErE,8DAAQ,CACK;oBACjB,4DACI,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,sBAAsB,GAAG,EAAE,CAAC,EAC7C,KAAK,EAAC,0BAA0B,EAChC,QAAQ,EAAC,IAAI,EACb,MAAM,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAC9B,SAAS,EAAE,IAAI,CAAC,aAAa;wBAE7B,6DAAM,IAAI,EAAC,gBAAgB,GAAQ,CACjC,CACJ,CACG,CAChB,CACa,CACrB,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGJ","sourcesContent":["import {\n Component,\n State,\n Prop,\n h,\n ComponentInterface,\n Listen,\n Watch,\n Element,\n EventEmitter,\n Event,\n Method,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, resizeIframe, waitForNextPaint } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\nimport { IOptionValue } from '../q2-option-list/q2-option-list';\n\n@Component({ tag: 'q2-pill', shadow: true, styleUrl: 'q2-pill.scss' })\nexport class Q2Pill implements ComponentInterface {\n // #region Own Properties\n\n mutationObserver: MutationObserver;\n optionList: HTMLQ2OptionListElement;\n popoverBottomContainer: HTMLElement;\n popoverElement: HTMLQ2PopoverElement;\n popoverTopContainer: HTMLElement;\n primaryBtn: HTMLButtonElement;\n primaryBtnWrapper: HTMLElement;\n scheduledAfterRender: (() => void)[] = [];\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 hasPopoverBottom = false;\n\n @State()\n hasPopoverTop = false;\n\n @State()\n optionCount: number;\n\n @State()\n selectedOptionElements: HTMLQ2OptionElement[] = [];\n\n // #endregion\n // #region Public Property API\n\n /** Determine if the elements is in the selected state, with values. /\n @Prop({ reflect: true, mutable: true })\n active: boolean;\n\n /* Indicates that the pill has no border /\n @Prop({ reflect: true })\n borderless: boolean;\n\n /* Indicates the pill cannot be focused or interacted with. /\n @Prop({ reflect: true })\n disabled: boolean;\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 The maximum number of characters to display before ellipcizing.\n * @info\n * Limitless by default.\n /\n @Prop({ reflect: true })\n maxLength: number;\n\n /\n Enables the multi-select ability for the dropdown.\n * @info\n * Only applicable when options are provided.\n /\n @Prop({ reflect: true })\n multiple: boolean;\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;\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 /* A list of the selected options on the element. /\n @Prop({ mutable: true })\n selectedOptions: IOptionValue[] = [];\n\n /* The color of the element when in the active state. /\n @Prop({ reflect: true })\n theme: 'primary' \| 'secondary' \| 'tertiary';\n\n /* The value emitted when the component is selected. /\n @Prop({ reflect: true, mutable: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the pill is clicked or the selected options change.\n \n When multi-select is enabled, `value` will be `undefined`.\n * @legacyEvent\n /\n @Event()\n change: EventEmitter<{ value: string; values: IOptionValue[]; active: boolean }>;\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.onMutationObserved);\n observer.observe(this.hostElement, { childList: true, attributes: true });\n this.mutationObserver = observer;\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n this.syncValueProperties();\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('displayChanged')\n handleSelectedDisplay() {\n if (this.multiple) return;\n this.updateSelectedOptionElements();\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.primaryBtn.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 `<button>` to hide the popover if it is visible.\n \n @testOnly\n /\n @Method()\n async closePopover() {\n if (!this.open \|\| this.disabled) return;\n this._togglePopover();\n }\n\n /\n Emulates clicking the `<button>` to display the popover if it is hidden.\n \n @testOnly\n /\n @Method()\n async openPopover() {\n if (this.open \|\| this.disabled) return;\n this._togglePopover();\n }\n\n /\n Emulates clicking the `<button>` to display the popover and selecting the option(s) with the specified value(s).\n \n If multi-select is enabled and the `closePopover` argument is `true` (default), the popover will be closed\n * after the option(s) are selected.\n \n @testOnly\n */\n @Method()\n async setValue(values: string \| string[], options: { closePopover?: boolean } = { closePopover: true }) {\n const valueSet = new Set(Array.isArray(values) ? values : [values]);\n const allOptions = (await this.optionList?.getOptions()) as HTMLQ2OptionElement[];\n if (!this.open) {\n await this.openPopover();\n await waitForNextPaint();\n }\n\n valueSet.forEach(value => {\n allOptions.find(option => option.value === value)?.click();\n });\n\n if (options.closePopover) {\n await this.closePopover();\n await waitForNextPaint();\n }\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('selectedOptions')\n selectedOptionsChanged(newValue) {\n const { multiple } = this;\n const firstValue = newValue?.[0]?.value ?? null;\n if (multiple) {\n if (this.value) this.value = null;\n this.updateSelectedOptionElements();\n } else if (this.value === firstValue) {\n this.updateSelectedOptionElements();\n } else {\n this.value = firstValue;\n }\n }\n\n @Watch('value')\n async valueChanged(newValue) {\n const { multiple, selectedOptions } = this;\n if (multiple) return;\n const firstValue = selectedOptions?.[0]?.value ?? null;\n if (newValue === firstValue) this.updateSelectedOptionElements();\n else {\n const selectedOption = (await this.getOption(newValue)) as HTMLQ2OptionElement;\n const { value, display } = selectedOption \|\| { value: newValue, display: null };\n this.selectedOptions = value ? [{ value, display }] : [];\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get buttonContent() {\n const { label, selectedOptions, selectedOptionElements, optionCount } = this;\n\n if (!optionCount \|\| selectedOptionElements.length === 0) return loc(label);\n else if (selectedOptionElements.length === 1) return loc(selectedOptionElements[0].display);\n\n return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });\n }\n\n get truncatedButtonContent() {\n const { maxLength, buttonContent } = this;\n if (maxLength && buttonContent.length > maxLength) return `${buttonContent.substring(0, maxLength)}…`;\n else return buttonContent;\n }\n\n _togglePopover() {\n const { primaryBtn } = this;\n primaryBtn?.click();\n primaryBtn?.focus();\n primaryBtn.dispatchEvent(new FocusEvent('focus'));\n }\n\n clearSelectedOptions = () => {\n this.selectedOptions = [];\n this.value = null;\n this.active = false;\n this.open = false;\n this.primaryBtn.focus();\n this.change.emit({ value: null, values: [], active: false });\n this.scheduledAfterRender.push(resizeIframe);\n };\n\n determineOptionCount = async () => {\n if (this.optionList) {\n const allOptions = await this.optionList.getOptions();\n this.optionCount = allOptions.length;\n } else {\n const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n this.optionCount = numberOfOptions;\n }\n };\n\n executeActionSheet = async (event: MouseEvent \| KeyboardEvent) => {\n const result = await showActionSheetList(this, event);\n this.primaryBtn.focus();\n this.handleSelectionChanges(result);\n };\n\n getOption = async (value: string) => {\n if (this.optionList) {\n const options = await this.optionList.getOptions();\n return options.find(option => option.value === value);\n } else {\n return this.hostElement.querySelector<HTMLQ2OptionElement>(`q2-option[value=\"${value}\"]`);\n }\n };\n\n handleFocusOut = async (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as unknown 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 this.handleSelectionChanges(event.detail);\n };\n\n handleClick = async (event: MouseEvent) => {\n event.stopPropagation();\n if (this.disabled) return;\n if (this.optionCount) {\n if (shouldShowActionSheet(this)) {\n this.executeActionSheet(event);\n } else {\n await this.popoverElement.toggle();\n }\n } else {\n const { value, label } = this;\n const isActive = (this.active = !this.active);\n const values = isActive ? [{ value, display: label }] : [];\n this.selectedOptions = values;\n this.change.emit({\n value,\n values,\n active: isActive,\n });\n }\n };\n\n handleKeydown = async (event: KeyboardEvent) => {\n const isTabMetaOrCtrl = event.metaKey \|\| event.ctrlKey \|\| event.key === 'Tab';\n if (!this.optionCount \|\| this.disabled \|\| isTabMetaOrCtrl) return;\n event.preventDefault();\n const hasSlot = this.hasPopoverTop \|\| this.hasPopoverBottom;\n\n // slots are incompatible with action sheet\n if (shouldShowActionSheet(this, event) && !hasSlot) {\n this.executeActionSheet(event);\n } else {\n this.optionList.handleExternalKeydown(event);\n }\n };\n\n handleSelectionChanges = async (changeDetails: { value?: string; values?: IOptionValue[] }) => {\n const { multiple } = this;\n const { value = '', values = [] } = changeDetails;\n const isActive = multiple ? !!values.length : !!value;\n if (!this.hostElement.onchange) {\n if (multiple) {\n this.selectedOptions = values;\n this.value = undefined;\n } else {\n const selectedOption = (await this.getOption(value)) as HTMLQ2OptionElement;\n this.selectedOptions = selectedOption\n ? [{ value: selectedOption.value, display: selectedOption.display }]\n : [];\n this.value = selectedOption?.value \|\| undefined;\n }\n }\n\n this.change.emit({\n value: multiple ? undefined : value,\n values,\n active: isActive,\n });\n };\n\n handleWrapperClick = () => {\n this.primaryBtn.focus();\n this.primaryBtn.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 onMutationObserved = () => {\n this.updateSlotState();\n this.determineOptionCount();\n this.updateSelectedOptionElements();\n };\n\n syncValueProperties = () => {\n const { value, selectedOptions } = this;\n if (!!selectedOptions?.length) this.selectedOptionsChanged(selectedOptions);\n else if (value) this.valueChanged(value);\n };\n\n updateSelectedOptionElements = async () => {\n const { selectedOptions = [] } = this;\n const selectedValues = selectedOptions.map(option => option.value);\n const options = await this.optionList?.getOptions();\n if (this.optionCount) this.active = !!selectedValues.length;\n this.selectedOptionElements =\n (options?.filter(option => selectedValues.includes(option.value)) as HTMLQ2OptionElement[]) \|\| [];\n };\n\n updateSlotState = () => {\n const { hostElement, hasPopoverTop, hasPopoverBottom } = this;\n const popTopSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-top\"]');\n const popBottomSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-bottom\"]');\n const topSlotHasNode = popTopSlot?.assignedNodes().length > 0;\n const bottomSlotHasNode = popBottomSlot?.assignedNodes().length > 0;\n\n if (hasPopoverTop !== topSlotHasNode) this.hasPopoverTop = topSlotHasNode;\n if (hasPopoverBottom !== bottomSlotHasNode) this.hasPopoverBottom = bottomSlotHasNode;\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 renderIcon() {\n const { optionCount, active } = this;\n const isButton = optionCount && active;\n const TagName = isButton ? 'button' : 'div';\n const iconName = isButton \|\| !optionCount ? 'close' : 'chevron-down';\n\n return (\n <TagName\n class=\"btn-close\"\n onClick={(isButton && this.clearSelectedOptions) \|\| undefined}\n disabled={(isButton && this.disabled) \|\| undefined}\n aria-label={(isButton && loc('tecton.element.pill.clearSelection')) \|\| undefined}\n type={(isButton && 'button') \|\| undefined}\n >\n <q2-icon type={iconName}></q2-icon>\n </TagName>\n );\n }\n\n render() {\n const { optionCount, active, open } = this;\n const wrapperClassNames = ['btn-wrapper'];\n if (optionCount \|\| active) wrapperClassNames.push('has-icon');\n if (optionCount) wrapperClassNames.push('has-options');\n\n return (\n <click-elsewhere onChange={this.onClickElsewhere}>\n <div class={wrapperClassNames.join(' ')}>\n <div\n class=\"btn-height-wrapper\"\n ref={el => (this.primaryBtnWrapper = el)}\n onClick={this.handleWrapperClick}\n tabIndex={-1}\n >\n <button\n class=\"btn-primary\"\n test-id=\"btn-control\"\n type=\"button\"\n role={(optionCount && 'combobox') \|\| undefined}\n ref={el => (this.primaryBtn = el)}\n onClick={this.handleClick}\n onKeyDown={this.handleKeydown}\n onFocusout={this.handleFocusOut}\n disabled={this.disabled}\n aria-roledescription={!optionCount && 'filter'}\n aria-controls={(optionCount && 'option-list') \|\| undefined}\n aria-expanded={(optionCount && `${!!open}`) \|\| undefined}\n aria-label={this.buttonContent}\n aria-describedby={(optionCount && 'option-description') \|\| undefined}\n >\n {this.truncatedButtonContent}\n {!optionCount && active && <span class=\"sr\">({loc('tecton.element.pill.active')})</span>}\n </button>\n </div>\n {this.renderIcon()}\n {!!optionCount && this.renderHiddenElement()}\n </div>\n {this.optionCount > 0 && (\n <q2-popover\n ref={el => (this.popoverElement = el)}\n controlElement={this.primaryBtn}\n open={this.open}\n max-height={this.popoverMaxHeight}\n minHeight={this.popoverMinHeight}\n direction={this.popoverDirection}\n align={this.popoverAlignment}\n onFocusout={this.handleFocusOut}\n >\n <div class=\"popover-content\">\n <div\n ref={el => (this.popoverTopContainer = el)}\n class=\"popover-top-container\"\n tabindex=\"-1\"\n hidden={!this.hasPopoverTop}\n onKeyDown={this.handleKeydown}\n >\n <slot name=\"popover-top\"></slot>\n </div>\n <q2-option-list\n type=\"listbox\"\n ref={el => (this.optionList = el)}\n id=\"option-list\"\n onChange={this.handleChange}\n multiple={this.multiple}\n selectedOptions={this.selectedOptions}\n onReady={() => this.updateSelectedOptionElements()}\n label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n >\n <slot />\n </q2-option-list>\n <div\n ref={el => (this.popoverBottomContainer = el)}\n class=\"popover-bottom-container\"\n tabindex=\"-1\"\n hidden={!this.hasPopoverBottom}\n onKeyDown={this.handleKeydown}\n >\n <slot name=\"popover-bottom\"></slot>\n </div>\n </div>\n </q2-popover>\n )}\n </click-elsewhere>\n );\n }\n\n // #endregion\n}\n"]}

package/dist/collection/components/q2-pill/test/q2-pill-test.e2e.js CHANGED Viewed

@@ -820,6 +820,61 @@ describe('q2-pill', () => {
                 const slotContainer = await page.find('q2-pill >>> .popover-top-container');
                 expect(slotContainer).toHaveAttribute('hidden');
             });
+            it('allows a button in the slot to be clicked without closing the popover', async () => {
+                page = await setup({
+                    html: `
+                        <q2-pill label="My pill" value="my-pill-value">
+                            <q2-option value="1">Option 1</q2-option>
+                            <q2-option value="2">Option 2</q2-option>
+                            <q2-option value="3">Option 3</q2-option>
+                            <div slot='popover-top'>
+                                <button id="popover-top-button">Popover Slot Top</button>
+                            </div>
+                        </q2-pill>
+                    `,
+                });
+                popover = await page.find('q2-pill >>> q2-popover');
+                controlBtn = await page.find('q2-pill >>> .btn-wrapper');
+                expect(popover).not.toHaveAttribute('open');
+                await controlBtn.click();
+                await page.waitForChanges();
+                expect(popover).toHaveAttribute('open');
+                await page.waitForChanges();
+                const slotButton = await page.find('#popover-top-button');
+                const slotButtonClickSpy = await slotButton.spyOnEvent('click');
+                await slotButton.click();
+                await page.waitForChanges();
+                expect(slotButtonClickSpy).toHaveReceivedEvent();
+                expect(popover).toHaveAttribute('open');
+            });
+            it('allows a button in the slot to be tabbed to without closing the popover', async () => {
+                page = await setup({
+                    html: `
+                        <q2-pill label="My pill" value="my-pill-value">
+                            <q2-option value="1">Option 1</q2-option>
+                            <q2-option value="2">Option 2</q2-option>
+                            <q2-option value="3">Option 3</q2-option>
+                            <div slot='popover-top'>
+                                <button id="popover-top-button">Popover Slot</button>
+                            </div>
+                        </q2-pill>
+                    `,
+                });
+                popover = await page.find('q2-pill >>> q2-popover');
+                controlBtn = await page.find('q2-pill >>> .btn-primary');
+                expect(popover).not.toHaveAttribute('open');
+                await controlBtn.press('ArrowDown');
+                await page.waitForChanges();
+                expect(popover).toHaveAttribute('open');
+                await page.keyboard.down('Shift');
+                await page.keyboard.press('Tab');
+                await page.keyboard.up('Shift');
+                await page.waitForChanges();
+                expect(await getFocusedAttribute(page, 'id')).toEqual('popover-top-button');
+                await page.keyboard.press('Tab');
+                await page.waitForChanges();
+                expect(popover).not.toHaveAttribute('open');
+            });
         });
         describe('popover-bottom', () => {
             it('renders the provided content in the popover-bottom slot', async () => {
@@ -862,6 +917,59 @@ describe('q2-pill', () => {
                 const slotContainer = await page.find('q2-pill >>> .popover-bottom-container');
                 expect(slotContainer).toHaveAttribute('hidden');
             });
+            it('allows a button in the slot to be clicked without closing the popover', async () => {
+                page = await setup({
+                    html: `
+                        <q2-pill label="My pill" value="my-pill-value">
+                            <q2-option value="1">Option 1</q2-option>
+                            <q2-option value="2">Option 2</q2-option>
+                            <q2-option value="3">Option 3</q2-option>
+                            <div slot='popover-bottom'>
+                                <button id="popover-bottom-button">Popover Slot</button>
+                            </div>
+                        </q2-pill>
+                    `,
+                });
+                popover = await page.find('q2-pill >>> q2-popover');
+                controlBtn = await page.find('q2-pill >>> .btn-wrapper');
+                expect(popover).not.toHaveAttribute('open');
+                await controlBtn.click();
+                await page.waitForChanges();
+                expect(popover).toHaveAttribute('open');
+                await page.waitForChanges();
+                const slotButton = await page.find('#popover-bottom-button');
+                const slotButtonClickSpy = await slotButton.spyOnEvent('click');
+                await slotButton.click();
+                await page.waitForChanges();
+                expect(slotButtonClickSpy).toHaveReceivedEvent();
+                expect(popover).toHaveAttribute('open');
+            });
+            it('allows a button in the slot to be tabbed to without closing the popover', async () => {
+                page = await setup({
+                    html: `
+                        <q2-pill label="My pill" value="my-pill-value">
+                            <q2-option value="1">Option 1</q2-option>
+                            <q2-option value="2">Option 2</q2-option>
+                            <q2-option value="3">Option 3</q2-option>
+                            <div slot='popover-bottom'>
+                                <button id="popover-bottom-button">Popover Slot</button>
+                            </div>
+                        </q2-pill>
+                    `,
+                });
+                popover = await page.find('q2-pill >>> q2-popover');
+                controlBtn = await page.find('q2-pill >>> .btn-primary');
+                expect(popover).not.toHaveAttribute('open');
+                await controlBtn.press('ArrowDown');
+                await page.waitForChanges();
+                expect(popover).toHaveAttribute('open');
+                await page.keyboard.press('Tab');
+                await page.waitForChanges();
+                expect(await getFocusedAttribute(page, 'id')).toEqual('popover-bottom-button');
+                await page.keyboard.press('Tab');
+                await page.waitForChanges();
+                expect(popover).not.toHaveAttribute('open');
+            });
         });
     });
     describe('Mutation Observer', () => {
@@ -1023,7 +1131,7 @@ describe('q2-pill', () => {
                 await page.waitForChanges();
                 const snapshot = await page.accessibility.snapshot();
                 const button = snapshot.children[0].children[0];
-                const optionList = snapshot.children[1];
+                const optionList = snapshot.children[1].children[0];
                 expect(button.role).toEqual('combobox');
                 expect(optionList.role).toEqual('listbox');
                 expect(optionList.children).toHaveLength(3);