npm - q2-tecton-elements - Versions diffs - 1.67.2 → 1.68.0 - Mend

q2-tecton-elements 1.67.2 → 1.68.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 (807) hide show

package/dist/q2-tecton-elements/q2-pill.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-pill.entry.esm.js","sources":["src/components/q2-pill/q2-pill.scss?tag=q2-pill&encapsulation=shadow","src/components/q2-pill/q2-pill.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n position: relative;\n line-height: 0;\n}\n\n:host(:not(:last-child)) {\n margin-inline-end: var-list(var-prefixer(pill-margin), --app-scale-2x, 10px);\n}\n\nq2-popover,\n.btn-wrapper {\n --comp-pill-min-height: #{var-list(var-prefixer(pill-min-height), 44px)};\n --comp-pill-btn-height: #{var-list(var-prefixer(pill-btn-height), 30px)};\n}\n\n.popover-top-container {\n position: sticky;\n top: 0;\n z-index: 5;\n}\n\n.popover-bottom-container {\n position: sticky;\n bottom: 0;\n z-index: 5;\n}\n\n.btn-wrapper {\n --comp-pill-btn-border-width: #{var-list(var-prefixer(pill-btn-border-width), 2px)};\n --comp-close-size: 0px;\n --comp-btn-background: #{var-list(var-prefixer(pill-btn-background), --t-base, #ffffff)};\n --comp-btn-box-shadow: #{var-list(--tct-pill-btn-box-shadow, none)};\n --comp-btn-backdrop-filter: #{var-list(--tct-pill-btn-backdrop-filter, none)};\n --comp-hover-btn-background: #{var-list(var-prefixer(pill-hover-btn-background), --t-gray-13, #e6e6e6)};\n --comp-btn-padding: #{var-list(var-prefixer(pill-btn-padding-inline), --app-scale-3x, 15px)};\n --comp-btn-color: #{var-list(var-prefixer(pill-btn-color), --t-gray-3, #262626)};\n --comp-active-btn-color: #{var-list(--tct-pill-active-btn-color, --comp-btn-background)};\n --comp-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-7, #666666)};\n --comp-active-btn-box-shadow: #{var-list(--tct-pill-active-btn-box-shadow, --tct-pill-btn-box-shadow, none)};\n --comp-active-btn-backdrop-filter: #{var-list(--tct-pill-active-btn-backdrop-filter, none)};\n --comp-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-border-color), --t-gray-7, #666666)};\n --comp-hover-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n --comp-hover-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n\n position: relative;\n\n &.has-options,\n &.has-icon {\n --comp-close-size: var(--comp-pill-btn-height);\n }\n\n :host([active]:not([active='false'])) & {\n --comp-btn-color: #{var-list(var-prefixer(pill-active-btn-color), --t-base, #ffffff)};\n }\n\n :host([theme='primary']) & {\n --comp-active-btn-background: #{var-list(--tct-pill-primary-active-background, --t-primary, #0079c1)};\n --comp-active-btn-box-shadow: #{var-list(--tct-pill-primary-active-btn-box-shadow, none)};\n --comp-active-btn-backdrop-filter: #{var-list(--tct-pill-primary-active-backdrop-filter, none)};\n --comp-active-btn-color: #{var-list(--tct-pill-primary-active-font-color, --t-primary-text, #ffffff)};\n --comp-active-btn-border-color: #{var-list(--tct-pill-primary-active-border-color, --t-primary, #0079c1)};\n --comp-hover-active-btn-background: #{var-list(\n --tct-pill-primary-active-hover-background,\n --t-primary-l3,\n #21acff\n )};\n --comp-hover-active-btn-border-color: #{var-list(\n --tct-pill-primary-active-hover-border-color,\n --t-primary-l3,\n #21acff\n )};\n }\n\n :host([theme='secondary']) & {\n --comp-active-btn-background: #{var-list(--tct-pill-secondary-active-background, --t-secondary, #b3c2cc)};\n --comp-active-btn-box-shadow: #{var-list(--tct-pill-secondary-active-box-shadow, none)};\n --comp-active-btn-backdrop-filter: #{var-list(--tct-pill-secondary-active-backdrop-filter, none)};\n --comp-active-btn-color: #{var-list(--tct-pill-secondary-active-font-color, --t-secondary-text, #141414)};\n --comp-active-btn-border-color: #{var-list(--tct-pill-secondary-active-border-color, --t-secondary, #b3c2cc)};\n --comp-hover-active-btn-background: #{var-list(\n --tct-pill-secondary-active-hover-background,\n --t-secondary-l3,\n #c9d5db\n )};\n --comp-hover-active-btn-border-color: #{var-list(\n --tct-pill-secondary-active-hover-border-color,\n --t-secondary-l3,\n #c9d5db\n )};\n }\n\n :host([theme='tertiary']) & {\n --comp-active-btn-background: #{var-list(--tct-pill-tertiary-active-background, --t-tertiary, #e8f5fc)};\n --comp-active-btn-box-shadow: #{var-list(--tct-pill-tertiary-active-box-shadow, none)};\n --comp-active-btn-backdrop-filter: #{var-list(--tct-pill-tertiary-active-backdrop-filter, none)};\n --comp-active-btn-color: #{var-list(--tct-pill-tertiary-active-font-color, --t-tertiary-text, #141414)};\n --comp-active-btn-border-color: #{var-list(--tct-pill-tertiary-active-border-color, --t-tertiary, #e8f5fc)};\n --comp-hover-active-btn-background: #{var-list(\n --tct-pill-tertiary-active-hover-background,\n --t-tertiary-l3,\n #eff8fd\n )};\n --comp-hover-active-btn-border-color: #{var-list(\n --tct-pill-tertiary-active-hover-border-color,\n --t-tertiary-l3,\n #eff8fd\n )};\n }\n}\n\n.btn-height-wrapper {\n height: var(--comp-pill-min-height);\n display: flex;\n align-items: center;\n cursor: pointer;\n &:focus {\n box-shadow: none;\n }\n\n :host([disabled]) & {\n cursor: not-allowed;\n }\n}\n\n.btn-close,\n.btn-primary {\n cursor: pointer;\n height: var(--comp-pill-btn-height);\n border-style: solid;\n border-radius: var-list(var-prefixer(pill-btn-border-radius), 30px);\n transition-property: background, color, padding, width, opacity;\n transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\n.btn-close,\n.btn-primary,\nq2-icon {\n :host([disabled]) & {\n opacity: var-list(var-prefixer(pill-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n cursor: not-allowed;\n }\n}\n\n.btn-primary {\n background: var(--comp-btn-background);\n box-shadow: var(--comp-btn-box-shadow);\n backdrop-filter: var(--comp-btn-backdrop-filter);\n border-width: var-list(--comp-pill-btn-border-width);\n border-color: var-list(var-prefixer(pill-btn-border-color), --t-a11y-gray-color-AA, #949494);\n padding-inline: var(--comp-btn-padding);\n padding-right: calc(var(--comp-btn-padding) + var(--comp-close-size));\n font-size: var-list(var-prefixer(pill-btn-font-size), --app-font-size, 14px);\n font-weight: var-list(--tct-pill-btn-font-weight, 400);\n color: var(--comp-btn-color);\n display: block;\n width: 100%;\n text-align: start;\n\n &:focus {\n box-shadow: var-list(--tct-pill-btn-focus-box-shadow, --const-double-focus-ring);\n }\n\n &:focus-visible {\n box-shadow: var-list(--tct-pill-btn-focus-visible-box-shadow, --const-double-focus-ring);\n }\n\n &:hover {\n background: var(--comp-hover-btn-background);\n }\n\n .has-options &,\n .has-icon & {\n padding-right: calc(#{var-list(var-prefixer(pill-icon-gap), --app-scale-1x, 5px)} + var(--comp-close-size));\n }\n\n .has-options & {\n @include line-clamp(1);\n max-width: var-list(var-prefixer(pill-max-width), 200px);\n }\n\n :host([active]:not([active='false'])) & {\n background: var(--comp-active-btn-background);\n box-shadow: var(--comp-active-btn-box-shadow);\n backdrop-filter: var(--comp-active-btn-backdrop-filter);\n border-color: var(--comp-active-btn-border-color);\n color: var(--comp-active-btn-color);\n\n &:focus {\n box-shadow: var-list(--tct-pill-btn-focus-box-shadow, --const-double-focus-ring);\n }\n\n &:focus-visible {\n box-shadow: var-list(--tct-pill-btn-focus-visible-box-shadow, --const-double-focus-ring);\n }\n\n &:hover {\n background: var(--comp-hover-active-btn-background);\n border-color: var(--comp-hover-active-btn-border-color);\n }\n }\n}\n\n.btn-close {\n background: transparent;\n border-color: transparent;\n border-width: var(--comp-pill-btn-border-width);\n width: var(--comp-close-size);\n height: var(--comp-close-size);\n padding: 0;\n border: 0;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n opacity: 0;\n &:focus-visible {\n box-shadow: var-list(--tct-pill-btn-focus-visible-box-shadow, --const-double-focus-ring);\n }\n :host([active]:not([active='false'])) & {\n color: var(--comp-active-btn-color);\n }\n\n .has-options &,\n .has-icon & {\n opacity: 1;\n }\n}\n\nq2-icon {\n --tct-icon-stroke-primary: #{var-list(--tct-pill-icon-stroke, currentcolor)};\n --tct-icon-stroke-width: #{var-list(--tct-pill-icon-stroke-width, inherit)};\n width: var-list(var-prefixer(pill-icon-size), 14px);\n height: var-list(var-prefixer(pill-icon-size), 14px);\n transition-property: transform;\n transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\ndiv.btn-close {\n pointer-events: none;\n\n :host([open]) & q2-icon {\n transform: rotate(180deg);\n }\n}\n\nbutton.btn-close {\n :host([active]:not([active='false'])) & {\n &:focus,\n &:hover {\n background: var-list(var-prefixer(pill-hover-close-btn-background), --t-top-a1, rgba(13, 13, 13, 0.35));\n border-color: var-list(var-prefixer(pill-hover-close-btn-border-color), --t-top-a1, rgba(13, 13, 13, 0.35));\n }\n }\n}\n\nq2-popover {\n top: calc(var(--comp-pill-min-height) - calc(calc(var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2));\n}\n\n:host([borderless]:not([borderless='false'])) {\n button {\n border-style: none;\n }\n}\n","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 mirrorEmit from '@/utils/mirror-emit';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\nimport { OptionValue } from '../q2-option-list/q2-option-list';\n\n/*\n @name Pill\n * @category Display\n * @summary Use for displaying and removing active filters in data views.\n * @slot popover-top - An optional slot to display custom content persistently at the top of the popover. This is not compatible with the action sheet workflow.\n * @slot popover-bottom - An optional slot to display custom content persistently at the bottom of the popover. This is not compatible with the action sheet workflow.\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: OptionValue[] = [];\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 * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter<{ value: string; values: OptionValue[]; active: boolean }>;\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 tctChange: EventEmitter<{ value: string; values: OptionValue[]; 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 async popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n if (this.open !== open) this.open = open;\n if (open) return;\n this.setOptionListActiveElement(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.getOptionListOptions()) 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 @Watch('label')\n async valueChanged(newValue, _oldValue, propName) {\n const { label, multiple, selectedOptions, value } = this;\n const valueProxy = propName === 'value' ? newValue : value;\n const labelProxy = propName === 'label' ? newValue : label;\n if (multiple) return;\n const firstValue = selectedOptions?.[0]?.value ?? null;\n if (propName === 'value' && newValue === firstValue) this.updateSelectedOptionElements();\n else {\n const selectedOption = (await this.getOption(newValue)) as HTMLQ2OptionElement;\n const { value, display } = selectedOption \|\| { value: valueProxy, display: labelProxy };\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 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 mirrorEmit(this, ['change', 'tctChange'], { value: null, values: [], active: false });\n this.scheduledAfterRender.push(resizeIframe);\n };\n\n determineOptionCount = async () => {\n if (this.optionList) {\n const allOptions = await this.getOptionListOptions();\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.getOptionListOptions();\n return options.find(option => option.value === value);\n } else {\n return this.hostElement.querySelector<HTMLQ2OptionElement>(`q2-option[value=\"${value}\"]`);\n }\n };\n\n // for spec testing\n getOptionListOptions = async () => {\n return await this.optionList?.getOptions();\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 mirrorEmit(this, ['change', 'tctChange'], {\n value,\n values,\n active: isActive,\n });\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 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.handleOptionListExternalKeydown(event);\n }\n };\n\n // for spec testing\n handleOptionListExternalKeydown = async (event: KeyboardEvent) => {\n await this.optionList?.handleExternalKeydown(event);\n };\n\n handleSelectionChanges = async (changeDetails: { value?: string; values?: OptionValue[] }) => {\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 mirrorEmit(this, ['change', 'tctChange'], {\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 onPopoverState = (event: CustomEvent<{ open: boolean; action: 'close' \| 'select' \| 'open' }>) => {\n const { open, action } = event.detail;\n if (open) return;\n\n switch (action) {\n case 'select':\n case 'close':\n this.primaryBtn.focus();\n break;\n }\n };\n\n // for spec testing\n setOptionListActiveElement = async (index: number) => {\n await this.optionList?.setActiveElement(index);\n };\n\n syncValueProperties = () => {\n const { value, selectedOptions } = this;\n if (!!selectedOptions?.length) this.selectedOptionsChanged(selectedOptions);\n else if (value) this.valueChanged(value, null, 'value');\n };\n\n updateSelectedOptionElements = async () => {\n const { selectedOptions = [] } = this;\n const selectedValues = selectedOptions.map(option => option.value);\n const options = await this.getOptionListOptions();\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}${!optionCount && active ? ` ${loc('tecton.element.pill.active')}` : ''}`}\n aria-describedby={(optionCount && 'option-description') \|\| undefined}\n >\n {this.truncatedButtonContent}\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 onPopoverState={this.onPopoverState}\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"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"q2-pill.entry.esm.js","sources":["src/components/q2-pill/q2-pill.scss?tag=q2-pill&encapsulation=shadow","src/components/q2-pill/q2-pill.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n display: inline-block;\n position: relative;\n line-height: 0;\n}\n\n:host(:not(:last-child)) {\n margin-inline-end: var-list(var-prefixer(pill-margin), --app-scale-2x, 10px);\n}\n\nq2-popover,\n.btn-wrapper {\n --comp-pill-min-height: #{var-list(var-prefixer(pill-min-height), 44px)};\n --comp-pill-btn-height: #{var-list(var-prefixer(pill-btn-height), 30px)};\n}\n\n.popover-top-container {\n position: sticky;\n top: 0;\n z-index: 5;\n}\n\n.popover-bottom-container {\n position: sticky;\n bottom: 0;\n z-index: 5;\n}\n\n.btn-wrapper {\n --comp-pill-btn-border-width: #{var-list(var-prefixer(pill-btn-border-width), 2px)};\n --comp-close-size: 0px;\n --comp-btn-background: #{var-list(var-prefixer(pill-btn-background), --t-base, #ffffff)};\n --comp-btn-box-shadow: #{var-list(--tct-pill-btn-box-shadow, none)};\n --comp-btn-backdrop-filter: #{var-list(--tct-pill-btn-backdrop-filter, none)};\n --comp-hover-btn-background: #{var-list(var-prefixer(pill-hover-btn-background), --t-gray-13, #e6e6e6)};\n --comp-btn-padding: #{var-list(var-prefixer(pill-btn-padding-inline), --app-scale-3x, 15px)};\n --comp-btn-color: #{var-list(var-prefixer(pill-btn-color), --t-gray-3, #262626)};\n --comp-active-btn-color: #{var-list(--tct-pill-active-btn-color, --comp-btn-background)};\n --comp-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-7, #666666)};\n --comp-active-btn-box-shadow: #{var-list(--tct-pill-active-btn-box-shadow, --tct-pill-btn-box-shadow, none)};\n --comp-active-btn-backdrop-filter: #{var-list(--tct-pill-active-btn-backdrop-filter, none)};\n --comp-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-border-color), --t-gray-7, #666666)};\n --comp-hover-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n --comp-hover-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n\n position: relative;\n\n &.has-options,\n &.has-icon {\n --comp-close-size: var(--comp-pill-btn-height);\n }\n\n :host([active]:not([active='false'])) & {\n --comp-btn-color: #{var-list(var-prefixer(pill-active-btn-color), --t-base, #ffffff)};\n }\n\n :host([theme='primary']) & {\n --comp-active-btn-background: #{var-list(--tct-pill-primary-active-background, --t-primary, #0079c1)};\n --comp-active-btn-box-shadow: #{var-list(--tct-pill-primary-active-btn-box-shadow, none)};\n --comp-active-btn-backdrop-filter: #{var-list(--tct-pill-primary-active-backdrop-filter, none)};\n --comp-active-btn-color: #{var-list(--tct-pill-primary-active-font-color, --t-primary-text, #ffffff)};\n --comp-active-btn-border-color: #{var-list(--tct-pill-primary-active-border-color, --t-primary, #0079c1)};\n --comp-hover-active-btn-background: #{var-list(\n --tct-pill-primary-active-hover-background,\n --t-primary-l3,\n #21acff\n )};\n --comp-hover-active-btn-border-color: #{var-list(\n --tct-pill-primary-active-hover-border-color,\n --t-primary-l3,\n #21acff\n )};\n }\n\n :host([theme='secondary']) & {\n --comp-active-btn-background: #{var-list(--tct-pill-secondary-active-background, --t-secondary, #b3c2cc)};\n --comp-active-btn-box-shadow: #{var-list(--tct-pill-secondary-active-box-shadow, none)};\n --comp-active-btn-backdrop-filter: #{var-list(--tct-pill-secondary-active-backdrop-filter, none)};\n --comp-active-btn-color: #{var-list(--tct-pill-secondary-active-font-color, --t-secondary-text, #141414)};\n --comp-active-btn-border-color: #{var-list(--tct-pill-secondary-active-border-color, --t-secondary, #b3c2cc)};\n --comp-hover-active-btn-background: #{var-list(\n --tct-pill-secondary-active-hover-background,\n --t-secondary-l3,\n #c9d5db\n )};\n --comp-hover-active-btn-border-color: #{var-list(\n --tct-pill-secondary-active-hover-border-color,\n --t-secondary-l3,\n #c9d5db\n )};\n }\n\n :host([theme='tertiary']) & {\n --comp-active-btn-background: #{var-list(--tct-pill-tertiary-active-background, --t-tertiary, #e8f5fc)};\n --comp-active-btn-box-shadow: #{var-list(--tct-pill-tertiary-active-box-shadow, none)};\n --comp-active-btn-backdrop-filter: #{var-list(--tct-pill-tertiary-active-backdrop-filter, none)};\n --comp-active-btn-color: #{var-list(--tct-pill-tertiary-active-font-color, --t-tertiary-text, #141414)};\n --comp-active-btn-border-color: #{var-list(--tct-pill-tertiary-active-border-color, --t-tertiary, #e8f5fc)};\n --comp-hover-active-btn-background: #{var-list(\n --tct-pill-tertiary-active-hover-background,\n --t-tertiary-l3,\n #eff8fd\n )};\n --comp-hover-active-btn-border-color: #{var-list(\n --tct-pill-tertiary-active-hover-border-color,\n --t-tertiary-l3,\n #eff8fd\n )};\n }\n}\n\n.btn-height-wrapper {\n height: var(--comp-pill-min-height);\n display: flex;\n align-items: center;\n cursor: pointer;\n &:focus {\n box-shadow: none;\n }\n\n :host([disabled]) & {\n cursor: not-allowed;\n }\n}\n\n.btn-close,\n.btn-primary {\n cursor: pointer;\n height: var(--comp-pill-btn-height);\n border-style: solid;\n border-radius: var-list(var-prefixer(pill-btn-border-radius), 30px);\n transition-property: background, color, padding, width, opacity;\n transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\n.btn-close,\n.btn-primary,\nq2-icon {\n :host([disabled]) & {\n opacity: var-list(var-prefixer(pill-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n cursor: not-allowed;\n }\n}\n\n.btn-primary {\n background: var(--comp-btn-background);\n box-shadow: var(--comp-btn-box-shadow);\n backdrop-filter: var(--comp-btn-backdrop-filter);\n border-width: var-list(--comp-pill-btn-border-width);\n border-color: var-list(var-prefixer(pill-btn-border-color), --t-a11y-gray-color-AA, #949494);\n padding-inline: var(--comp-btn-padding);\n padding-right: calc(var(--comp-btn-padding) + var(--comp-close-size));\n font-size: var-list(var-prefixer(pill-btn-font-size), --app-font-size, 14px);\n font-weight: var-list(--tct-pill-btn-font-weight, 400);\n color: var(--comp-btn-color);\n display: block;\n width: 100%;\n text-align: start;\n\n &:focus {\n box-shadow: var-list(--tct-pill-btn-focus-box-shadow, --const-double-focus-ring);\n }\n\n &:focus-visible {\n box-shadow: var-list(--tct-pill-btn-focus-visible-box-shadow, --const-double-focus-ring);\n }\n\n &:hover {\n background: var(--comp-hover-btn-background);\n }\n\n .has-options &,\n .has-icon & {\n padding-right: calc(#{var-list(var-prefixer(pill-icon-gap), --app-scale-1x, 5px)} + var(--comp-close-size));\n }\n\n .has-options & {\n @include line-clamp(1);\n max-width: var-list(var-prefixer(pill-max-width), 200px);\n }\n\n :host([active]:not([active='false'])) & {\n background: var(--comp-active-btn-background);\n box-shadow: var(--comp-active-btn-box-shadow);\n backdrop-filter: var(--comp-active-btn-backdrop-filter);\n border-color: var(--comp-active-btn-border-color);\n color: var(--comp-active-btn-color);\n\n &:focus {\n box-shadow: var-list(--tct-pill-btn-focus-box-shadow, --const-double-focus-ring);\n }\n\n &:focus-visible {\n box-shadow: var-list(--tct-pill-btn-focus-visible-box-shadow, --const-double-focus-ring);\n }\n\n &:hover {\n background: var(--comp-hover-active-btn-background);\n border-color: var(--comp-hover-active-btn-border-color);\n }\n }\n}\n\n.btn-close {\n background: transparent;\n border-color: transparent;\n border-width: var(--comp-pill-btn-border-width);\n width: var(--comp-close-size);\n height: var(--comp-close-size);\n padding: 0;\n border: 0;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n opacity: 0;\n &:focus-visible {\n box-shadow: var-list(--tct-pill-btn-focus-visible-box-shadow, --const-double-focus-ring);\n }\n :host([active]:not([active='false'])) & {\n color: var(--comp-active-btn-color);\n }\n\n .has-options &,\n .has-icon & {\n opacity: 1;\n }\n}\n\nq2-icon {\n --tct-icon-stroke-primary: #{var-list(--tct-pill-icon-stroke, currentcolor)};\n --tct-icon-stroke-width: #{var-list(--tct-pill-icon-stroke-width, inherit)};\n width: var-list(var-prefixer(pill-icon-size), 14px);\n height: var-list(var-prefixer(pill-icon-size), 14px);\n transition-property: transform;\n transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\ndiv.btn-close {\n pointer-events: none;\n\n :host([open]) & q2-icon {\n transform: rotate(180deg);\n }\n}\n\nbutton.btn-close {\n :host([active]:not([active='false'])) & {\n &:focus,\n &:hover {\n background: var-list(var-prefixer(pill-hover-close-btn-background), --t-top-a1, rgba(13, 13, 13, 0.35));\n border-color: var-list(var-prefixer(pill-hover-close-btn-border-color), --t-top-a1, rgba(13, 13, 13, 0.35));\n }\n }\n}\n\nq2-popover {\n top: calc(var(--comp-pill-min-height) - calc(calc(var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2));\n}\n\n:host([borderless]:not([borderless='false'])) {\n button {\n border-style: none;\n }\n}\n","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 mirrorEmit from '@/utils/mirror-emit';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\nimport { OptionValue } from '../q2-option-list/q2-option-list';\n\n/*\n @name Pill\n * @category Display\n * @summary Use for displaying and removing active filters in data views.\n * @slot popover-top - An optional slot to display custom content persistently at the top of the popover. This is not compatible with the action sheet workflow.\n * @slot popover-bottom - An optional slot to display custom content persistently at the bottom of the popover. This is not compatible with the action sheet workflow.\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: OptionValue[] = [];\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 * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter<{ value: string; values: OptionValue[]; active: boolean }>;\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 tctChange: EventEmitter<{ value: string; values: OptionValue[]; 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 async popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n if (this.open !== open) this.open = open;\n if (open) return;\n this.setOptionListActiveElement(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.getOptionListOptions()) 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 @Watch('label')\n async valueChanged(newValue, _oldValue, propName) {\n const { label, multiple, selectedOptions, value } = this;\n const valueProxy = propName === 'value' ? newValue : value;\n const labelProxy = propName === 'label' ? newValue : label;\n if (multiple) return;\n const firstValue = selectedOptions?.[0]?.value ?? null;\n if (propName === 'value' && newValue === firstValue) this.updateSelectedOptionElements();\n else {\n const selectedOption = (await this.getOption(newValue)) as HTMLQ2OptionElement;\n const { value, display } = selectedOption \|\| { value: valueProxy, display: labelProxy };\n this.selectedOptions = value ? [{ value, display }] : [];\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get buttonContent() {\n const { label, selectedOptionElements, optionCount, maxLength } = this;\n const count = selectedOptionElements.length;\n\n let text: string;\n if (!optionCount \|\| count === 0) {\n text = loc(label);\n } else if (count === 1) {\n text = loc(selectedOptionElements[0].display);\n } else {\n const firstDisplay = loc(selectedOptionElements[0].display);\n const suffix = ` +${count - 1}`;\n return {\n text: `${firstDisplay}${suffix}`,\n truncatedText: `${this._truncate(firstDisplay, maxLength)}${suffix}`,\n };\n }\n\n return { text, truncatedText: this._truncate(text, maxLength) };\n }\n\n _togglePopover() {\n const { primaryBtn } = this;\n primaryBtn?.click();\n primaryBtn?.focus();\n primaryBtn.dispatchEvent(new FocusEvent('focus'));\n }\n\n _truncate(text: string = '', maxLength: number = 0) {\n return maxLength && text.length > maxLength ? `${text.substring(0, maxLength)}…` : text;\n }\n\n clearSelectedOptions = () => {\n this.selectedOptions = [];\n this.value = null;\n this.active = false;\n this.open = false;\n this.primaryBtn.focus();\n mirrorEmit(this, ['change', 'tctChange'], { value: null, values: [], active: false });\n this.scheduledAfterRender.push(resizeIframe);\n };\n\n determineOptionCount = async () => {\n if (this.optionList) {\n const allOptions = await this.getOptionListOptions();\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.getOptionListOptions();\n return options.find(option => option.value === value);\n } else {\n return this.hostElement.querySelector<HTMLQ2OptionElement>(`q2-option[value=\"${value}\"]`);\n }\n };\n\n // for spec testing\n getOptionListOptions = async () => {\n return await this.optionList?.getOptions();\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 mirrorEmit(this, ['change', 'tctChange'], {\n value,\n values,\n active: isActive,\n });\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 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.handleOptionListExternalKeydown(event);\n }\n };\n\n // for spec testing\n handleOptionListExternalKeydown = async (event: KeyboardEvent) => {\n await this.optionList?.handleExternalKeydown(event);\n };\n\n handleSelectionChanges = async (changeDetails: { value?: string; values?: OptionValue[] }) => {\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 mirrorEmit(this, ['change', 'tctChange'], {\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 onPopoverState = (event: CustomEvent<{ open: boolean; action: 'close' \| 'select' \| 'open' }>) => {\n const { open, action } = event.detail;\n if (open) return;\n\n switch (action) {\n case 'select':\n case 'close':\n this.primaryBtn.focus();\n break;\n }\n };\n\n // for spec testing\n setOptionListActiveElement = async (index: number) => {\n await this.optionList?.setActiveElement(index);\n };\n\n syncValueProperties = () => {\n const { value, selectedOptions } = this;\n if (!!selectedOptions?.length) this.selectedOptionsChanged(selectedOptions);\n else if (value) this.valueChanged(value, null, 'value');\n };\n\n updateSelectedOptionElements = async () => {\n const { selectedOptions = [] } = this;\n const selectedValues = selectedOptions.map(option => option.value);\n const options = await this.getOptionListOptions();\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 { text, truncatedText } = this.buttonContent;\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={text}\n aria-pressed={!optionCount ? `${!!active}` : undefined}\n aria-describedby={(optionCount && 'option-description') \|\| undefined}\n >\n {truncatedText}\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 onPopoverState={this.onPopoverState}\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"],"names":[],"mappings":"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"}

package/dist/q2-tecton-elements/q2-pill.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as t, c as i, h as o, g as e } from "./index-CGkHOjh1.js";
-import { a, o as r, i as n, w as c, l as s } from "./index-C4PILj1_.js";
+import { a, o as r, i as n, w as c, l as s } from "./index-C5gj0T_3.js";
 import { m as l } from "./mirror-emit-DUjY_ucm.js";
@@ -316,15 +316,25 @@ const h = class {
   // #endregion
   // #region Local Methods
   get buttonContent() {
-    const {label: t, selectedOptions: i, selectedOptionElements: o, optionCount: e} = this;
-    if (!e || o.length === 0) return s(t); else if (o.length === 1) return `${s(o[0].display)}`;
-    return s("tecton.element.pill.activeCount", {
-      count: i.length
-    });
-  }
-  get truncatedButtonContent() {
-    const {maxLength: t, buttonContent: i} = this;
-    if (t && i.length > t) return `${i.substring(0, t)}…`; else return i;
+    const {label: t, selectedOptionElements: i, optionCount: o, maxLength: e} = this;
+    const a = i.length;
+    let r;
+    if (!o || a === 0) {
+      r = s(t);
+    } else if (a === 1) {
+      r = s(i[0].display);
+    } else {
+      const t = s(i[0].display);
+      const o = ` +${a - 1}`;
+      return {
+        text: `${t}${o}`,
+        truncatedText: `${this._truncate(t, e)}${o}`
+      };
+    }
+    return {
+      text: r,
+      truncatedText: this._truncate(r, e)
+    };
   }
   _togglePopover() {
     const {primaryBtn: t} = this;
@@ -332,6 +342,9 @@ const h = class {
     t === null || t === void 0 ? void 0 : t.focus();
     t.dispatchEvent(new FocusEvent("focus"));
   }
+  _truncate(t = "", i = 0) {
+    return i && t.length > i ? `${t.substring(0, i)}…` : t;
+  }
   // #endregion
   // #region Render Methods
   renderHiddenElement() {
@@ -358,23 +371,24 @@ const h = class {
   }
   render() {
     const {optionCount: t, active: i, open: e} = this;
-    const a = [ "btn-wrapper" ];
-    if (t || i) a.push("has-icon");
-    if (t) a.push("has-options");
+    const {text: a, truncatedText: r} = this.buttonContent;
+    const n = [ "btn-wrapper" ];
+    if (t || i) n.push("has-icon");
+    if (t) n.push("has-options");
     return o("click-elsewhere", {
-      key: "1f6a917d21078d5007387acd85fb7c03736db6ae",
+      key: "0af6d3ca759838e5ef540ed2746a10907c1eb31d",
       onChange: this.onClickElsewhere
     }, o("div", {
-      key: "346b5d9651e27827e304377f9009edd50a141102",
-      class: a.join(" ")
+      key: "79345714aa98cfaabb6e7e00b0ac1eb66085144a",
+      class: n.join(" ")
     }, o("div", {
-      key: "c261c06b88781ea9af6f2b0f0a335476c0c7e89a",
+      key: "95bb0453d6871d829292caf5143f1c35ff5e4142",
       class: "btn-height-wrapper",
       ref: t => this.primaryBtnWrapper = t,
       onClick: this.handleWrapperClick,
       tabIndex: -1
     }, o("button", {
-      key: "b717af900dc54f65de00aef3ee59dade83f6da21",
+      key: "b640d20887ef7e45345d266b69e428951c8c02ac",
       class: "btn-primary",
       "test-id": "btn-control",
       type: "button",
@@ -387,10 +401,11 @@ const h = class {
       "aria-roledescription": !t && "filter",
       "aria-controls": t && "option-list" || undefined,
       "aria-expanded": t && `${!!e}` || undefined,
-      "aria-label": `${this.buttonContent}${!t && i ? ` ${s("tecton.element.pill.active")}` : ""}`,
+      "aria-label": a,
+      "aria-pressed": !t ? `${!!i}` : undefined,
       "aria-describedby": t && "option-description" || undefined
-    }, this.truncatedButtonContent)), this.renderIcon(), !!t && this.renderHiddenElement()), this.optionCount > 0 && o("q2-popover", {
-      key: "4d415fbec7b43fe7f2b8abff0e3a02467028cdb4",
+    }, r)), this.renderIcon(), !!t && this.renderHiddenElement()), this.optionCount > 0 && o("q2-popover", {
+      key: "a9d86ad663999c5008427746ebadd3319f9d8368",
       ref: t => this.popoverElement = t,
       controlElement: this.primaryBtn,
       open: this.open,
@@ -400,20 +415,20 @@ const h = class {
       align: this.popoverAlignment,
       onFocusout: this.handleFocusOut
     }, o("div", {
-      key: "75e71787bad82eb4a5682a2315d7f5dcbd3c3b82",
+      key: "516e72df5497552a4c8f863d9dfeb60c93a56ef2",
       class: "popover-content"
     }, o("div", {
-      key: "5de5d4a2f606e4b936ee46fda3aded8b09e17854",
+      key: "e2973903570f235f5814855924487d93312a5ea0",
       ref: t => this.popoverTopContainer = t,
       class: "popover-top-container",
       tabindex: "-1",
       hidden: !this.hasPopoverTop,
       onKeyDown: this.handleKeydown
     }, o("slot", {
-      key: "6d971654eb266bd5a3c37e04cde81dd7d6876ca5",
+      key: "c8184daffd49fbb8021e935801e16c9362d0153c",
       name: "popover-top"
     })), o("q2-option-list", {
-      key: "670e99d6859d673e781eba1e6eee87ee8ac728b4",
+      key: "7d0645106f16399fa90345ed7ff13d1ce8d7537d",
       type: "listbox",
       ref: t => this.optionList = t,
       id: "option-list",
@@ -424,16 +439,16 @@ const h = class {
       onPopoverState: this.onPopoverState,
       label: s("tecton.element.optionList.label", [ this.optionListLabel ])
     }, o("slot", {
-      key: "fde147d6d4c6deca9952ebdd5f022f0d348bf75e"
+      key: "35525f5931d910a9a899c839b82ae82e1951ce60"
     })), o("div", {
-      key: "f8704bee883058f635b936fe03e888eaa9b3ce35",
+      key: "602c7fdf35b20085d45698f1db471cb4c0883e26",
       ref: t => this.popoverBottomContainer = t,
       class: "popover-bottom-container",
       tabindex: "-1",
       hidden: !this.hasPopoverBottom,
       onKeyDown: this.handleKeydown
     }, o("slot", {
-      key: "6761a2e76fbba5410a974eb0a24110c0c135b84e",
+      key: "be13e0e756eb9aa9bf961b7bfc375aabcfc2804a",
       name: "popover-bottom"
     })))));
   }

package/dist/q2-tecton-elements/q2-pill.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["q2PillCss","Q2Pill","constructor","hostRef","this","scheduledAfterRender","hasPopoverBottom","hasPopoverTop","selectedOptionElements","hoist","_a","window","Tecton","useActionSheets","popoverAlignment","popoverMinHeight","selectedOptions","clearSelectedOptions","value","active","open","primaryBtn","focus","mirrorEmit","values","push","resizeIframe","determineOptionCount","async","optionList","allOptions","getOptionListOptions","optionCount","length","numberOfOptions","hostElement","querySelectorAll","executeActionSheet","event","result","showActionSheetList","handleSelectionChanges","getOption","options","find","option","querySelector","getOptions","handleChange","stopPropagation","detail","handleClick","disabled","shouldShowActionSheet","popoverElement","toggle","label","isActive","display","handleFocusOut","relatedTarget","contains","handleKeydown","isTabMetaOrCtrl","metaKey","ctrlKey","key","preventDefault","hasSlot","handleOptionListExternalKeydown","handleExternalKeydown","changeDetails","multiple","onchange","undefined","selectedOption","handleWrapperClick","click","onClickElsewhere","target","localName","onMutationObserved","updateSlotState","updateSelectedOptionElements","onPopoverState","action","setOptionListActiveElement","index","setActiveElement","syncValueProperties","selectedOptionsChanged","valueChanged","selectedValues","map","filter","includes","popTopSlot","shadowRoot","popBottomSlot","topSlotHasNode","assignedNodes","bottomSlotHasNode","disconnectedCallback","mutationObserver","disconnect","componentWillLoad","observer","MutationObserver","observe","childList","attributes","componentDidLoad","overrideFocus","componentDidRender","forEach","fn","handleSelectedDisplay","delegateFocus","isEventFromElement","popoverStateHandler","closePopover","_togglePopover","openPopover","setValue","valueSet","Set","Array","isArray","waitForNextPaint","newValue","firstValue","_b","_oldValue","propName","valueProxy","labelProxy","buttonContent","loc","count","truncatedButtonContent","maxLength","substring","dispatchEvent","FocusEvent","renderHiddenElement","h","id","class","renderIcon","isButton","TagName","iconName","onClick","type","render","wrapperClassNames","onChange","join","ref","el","primaryBtnWrapper","tabIndex","role","onKeyDown","onFocusout","controlElement","popoverMaxHeight","minHeight","direction","popoverDirection","align","popoverTopContainer","tabindex","hidden","name","onReady","optionListLabel","popoverBottomContainer"],"sources":["src/components/q2-pill/q2-pill.scss?tag=q2-pill&encapsulation=shadow","src/components/q2-pill/q2-pill.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n position: relative;\n line-height: 0;\n}\n\n:host(:not(:last-child)) {\n margin-inline-end: var-list(var-prefixer(pill-margin), --app-scale-2x, 10px);\n}\n\nq2-popover,\n.btn-wrapper {\n --comp-pill-min-height: #{var-list(var-prefixer(pill-min-height), 44px)};\n --comp-pill-btn-height: #{var-list(var-prefixer(pill-btn-height), 30px)};\n}\n\n.popover-top-container {\n position: sticky;\n top: 0;\n z-index: 5;\n}\n\n.popover-bottom-container {\n position: sticky;\n bottom: 0;\n z-index: 5;\n}\n\n.btn-wrapper {\n --comp-pill-btn-border-width: #{var-list(var-prefixer(pill-btn-border-width), 2px)};\n --comp-close-size: 0px;\n --comp-btn-background: #{var-list(var-prefixer(pill-btn-background), --t-base, #ffffff)};\n --comp-btn-box-shadow: #{var-list(--tct-pill-btn-box-shadow, none)};\n --comp-btn-backdrop-filter: #{var-list(--tct-pill-btn-backdrop-filter, none)};\n --comp-hover-btn-background: #{var-list(var-prefixer(pill-hover-btn-background), --t-gray-13, #e6e6e6)};\n --comp-btn-padding: #{var-list(var-prefixer(pill-btn-padding-inline), --app-scale-3x, 15px)};\n --comp-btn-color: #{var-list(var-prefixer(pill-btn-color), --t-gray-3, #262626)};\n --comp-active-btn-color: #{var-list(--tct-pill-active-btn-color, --comp-btn-background)};\n --comp-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-7, #666666)};\n --comp-active-btn-box-shadow: #{var-list(--tct-pill-active-btn-box-shadow, --tct-pill-btn-box-shadow, none)};\n --comp-active-btn-backdrop-filter: #{var-list(--tct-pill-active-btn-backdrop-filter, none)};\n --comp-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-border-color), --t-gray-7, #666666)};\n --comp-hover-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n --comp-hover-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n\n position: relative;\n\n &.has-options,\n &.has-icon {\n --comp-close-size: var(--comp-pill-btn-height);\n }\n\n :host([active]:not([active='false'])) & {\n --comp-btn-color: #{var-list(var-prefixer(pill-active-btn-color), --t-base, #ffffff)};\n }\n\n :host([theme='primary']) & {\n --comp-active-btn-background: #{var-list(--tct-pill-primary-active-background, --t-primary, #0079c1)};\n --comp-active-btn-box-shadow: #{var-list(--tct-pill-primary-active-btn-box-shadow, none)};\n --comp-active-btn-backdrop-filter: #{var-list(--tct-pill-primary-active-backdrop-filter, none)};\n --comp-active-btn-color: #{var-list(--tct-pill-primary-active-font-color, --t-primary-text, #ffffff)};\n --comp-active-btn-border-color: #{var-list(--tct-pill-primary-active-border-color, --t-primary, #0079c1)};\n --comp-hover-active-btn-background: #{var-list(\n --tct-pill-primary-active-hover-background,\n --t-primary-l3,\n #21acff\n )};\n --comp-hover-active-btn-border-color: #{var-list(\n --tct-pill-primary-active-hover-border-color,\n --t-primary-l3,\n #21acff\n )};\n }\n\n :host([theme='secondary']) & {\n --comp-active-btn-background: #{var-list(--tct-pill-secondary-active-background, --t-secondary, #b3c2cc)};\n --comp-active-btn-box-shadow: #{var-list(--tct-pill-secondary-active-box-shadow, none)};\n --comp-active-btn-backdrop-filter: #{var-list(--tct-pill-secondary-active-backdrop-filter, none)};\n --comp-active-btn-color: #{var-list(--tct-pill-secondary-active-font-color, --t-secondary-text, #141414)};\n --comp-active-btn-border-color: #{var-list(--tct-pill-secondary-active-border-color, --t-secondary, #b3c2cc)};\n --comp-hover-active-btn-background: #{var-list(\n --tct-pill-secondary-active-hover-background,\n --t-secondary-l3,\n #c9d5db\n )};\n --comp-hover-active-btn-border-color: #{var-list(\n --tct-pill-secondary-active-hover-border-color,\n --t-secondary-l3,\n #c9d5db\n )};\n }\n\n :host([theme='tertiary']) & {\n --comp-active-btn-background: #{var-list(--tct-pill-tertiary-active-background, --t-tertiary, #e8f5fc)};\n --comp-active-btn-box-shadow: #{var-list(--tct-pill-tertiary-active-box-shadow, none)};\n --comp-active-btn-backdrop-filter: #{var-list(--tct-pill-tertiary-active-backdrop-filter, none)};\n --comp-active-btn-color: #{var-list(--tct-pill-tertiary-active-font-color, --t-tertiary-text, #141414)};\n --comp-active-btn-border-color: #{var-list(--tct-pill-tertiary-active-border-color, --t-tertiary, #e8f5fc)};\n --comp-hover-active-btn-background: #{var-list(\n --tct-pill-tertiary-active-hover-background,\n --t-tertiary-l3,\n #eff8fd\n )};\n --comp-hover-active-btn-border-color: #{var-list(\n --tct-pill-tertiary-active-hover-border-color,\n --t-tertiary-l3,\n #eff8fd\n )};\n }\n}\n\n.btn-height-wrapper {\n height: var(--comp-pill-min-height);\n display: flex;\n align-items: center;\n cursor: pointer;\n &:focus {\n box-shadow: none;\n }\n\n :host([disabled]) & {\n cursor: not-allowed;\n }\n}\n\n.btn-close,\n.btn-primary {\n cursor: pointer;\n height: var(--comp-pill-btn-height);\n border-style: solid;\n border-radius: var-list(var-prefixer(pill-btn-border-radius), 30px);\n transition-property: background, color, padding, width, opacity;\n transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\n.btn-close,\n.btn-primary,\nq2-icon {\n :host([disabled]) & {\n opacity: var-list(var-prefixer(pill-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n cursor: not-allowed;\n }\n}\n\n.btn-primary {\n background: var(--comp-btn-background);\n box-shadow: var(--comp-btn-box-shadow);\n backdrop-filter: var(--comp-btn-backdrop-filter);\n border-width: var-list(--comp-pill-btn-border-width);\n border-color: var-list(var-prefixer(pill-btn-border-color), --t-a11y-gray-color-AA, #949494);\n padding-inline: var(--comp-btn-padding);\n padding-right: calc(var(--comp-btn-padding) + var(--comp-close-size));\n font-size: var-list(var-prefixer(pill-btn-font-size), --app-font-size, 14px);\n font-weight: var-list(--tct-pill-btn-font-weight, 400);\n color: var(--comp-btn-color);\n display: block;\n width: 100%;\n text-align: start;\n\n &:focus {\n box-shadow: var-list(--tct-pill-btn-focus-box-shadow, --const-double-focus-ring);\n }\n\n &:focus-visible {\n box-shadow: var-list(--tct-pill-btn-focus-visible-box-shadow, --const-double-focus-ring);\n }\n\n &:hover {\n background: var(--comp-hover-btn-background);\n }\n\n .has-options &,\n .has-icon & {\n padding-right: calc(#{var-list(var-prefixer(pill-icon-gap), --app-scale-1x, 5px)} + var(--comp-close-size));\n }\n\n .has-options & {\n @include line-clamp(1);\n max-width: var-list(var-prefixer(pill-max-width), 200px);\n }\n\n :host([active]:not([active='false'])) & {\n background: var(--comp-active-btn-background);\n box-shadow: var(--comp-active-btn-box-shadow);\n backdrop-filter: var(--comp-active-btn-backdrop-filter);\n border-color: var(--comp-active-btn-border-color);\n color: var(--comp-active-btn-color);\n\n &:focus {\n box-shadow: var-list(--tct-pill-btn-focus-box-shadow, --const-double-focus-ring);\n }\n\n &:focus-visible {\n box-shadow: var-list(--tct-pill-btn-focus-visible-box-shadow, --const-double-focus-ring);\n }\n\n &:hover {\n background: var(--comp-hover-active-btn-background);\n border-color: var(--comp-hover-active-btn-border-color);\n }\n }\n}\n\n.btn-close {\n background: transparent;\n border-color: transparent;\n border-width: var(--comp-pill-btn-border-width);\n width: var(--comp-close-size);\n height: var(--comp-close-size);\n padding: 0;\n border: 0;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n opacity: 0;\n &:focus-visible {\n box-shadow: var-list(--tct-pill-btn-focus-visible-box-shadow, --const-double-focus-ring);\n }\n :host([active]:not([active='false'])) & {\n color: var(--comp-active-btn-color);\n }\n\n .has-options &,\n .has-icon & {\n opacity: 1;\n }\n}\n\nq2-icon {\n --tct-icon-stroke-primary: #{var-list(--tct-pill-icon-stroke, currentcolor)};\n --tct-icon-stroke-width: #{var-list(--tct-pill-icon-stroke-width, inherit)};\n width: var-list(var-prefixer(pill-icon-size), 14px);\n height: var-list(var-prefixer(pill-icon-size), 14px);\n transition-property: transform;\n transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\ndiv.btn-close {\n pointer-events: none;\n\n :host([open]) & q2-icon {\n transform: rotate(180deg);\n }\n}\n\nbutton.btn-close {\n :host([active]:not([active='false'])) & {\n &:focus,\n &:hover {\n background: var-list(var-prefixer(pill-hover-close-btn-background), --t-top-a1, rgba(13, 13, 13, 0.35));\n border-color: var-list(var-prefixer(pill-hover-close-btn-border-color), --t-top-a1, rgba(13, 13, 13, 0.35));\n }\n }\n}\n\nq2-popover {\n top: calc(var(--comp-pill-min-height) - calc(calc(var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2));\n}\n\n:host([borderless]:not([borderless='false'])) {\n button {\n border-style: none;\n }\n}\n","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 mirrorEmit from '@/utils/mirror-emit';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\nimport { OptionValue } from '../q2-option-list/q2-option-list';\n\n/*\n @name Pill\n * @category Display\n * @summary Use for displaying and removing active filters in data views.\n * @slot popover-top - An optional slot to display custom content persistently at the top of the popover. This is not compatible with the action sheet workflow.\n * @slot popover-bottom - An optional slot to display custom content persistently at the bottom of the popover. This is not compatible with the action sheet workflow.\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: OptionValue[] = [];\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 * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter<{ value: string; values: OptionValue[]; active: boolean }>;\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 tctChange: EventEmitter<{ value: string; values: OptionValue[]; 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 async popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n if (this.open !== open) this.open = open;\n if (open) return;\n this.setOptionListActiveElement(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.getOptionListOptions()) 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 @Watch('label')\n async valueChanged(newValue, _oldValue, propName) {\n const { label, multiple, selectedOptions, value } = this;\n const valueProxy = propName === 'value' ? newValue : value;\n const labelProxy = propName === 'label' ? newValue : label;\n if (multiple) return;\n const firstValue = selectedOptions?.[0]?.value ?? null;\n if (propName === 'value' && newValue === firstValue) this.updateSelectedOptionElements();\n else {\n const selectedOption = (await this.getOption(newValue)) as HTMLQ2OptionElement;\n const { value, display } = selectedOption \|\| { value: valueProxy, display: labelProxy };\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 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 mirrorEmit(this, ['change', 'tctChange'], { value: null, values: [], active: false });\n this.scheduledAfterRender.push(resizeIframe);\n };\n\n determineOptionCount = async () => {\n if (this.optionList) {\n const allOptions = await this.getOptionListOptions();\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.getOptionListOptions();\n return options.find(option => option.value === value);\n } else {\n return this.hostElement.querySelector<HTMLQ2OptionElement>(`q2-option[value=\"${value}\"]`);\n }\n };\n\n // for spec testing\n getOptionListOptions = async () => {\n return await this.optionList?.getOptions();\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 mirrorEmit(this, ['change', 'tctChange'], {\n value,\n values,\n active: isActive,\n });\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 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.handleOptionListExternalKeydown(event);\n }\n };\n\n // for spec testing\n handleOptionListExternalKeydown = async (event: KeyboardEvent) => {\n await this.optionList?.handleExternalKeydown(event);\n };\n\n handleSelectionChanges = async (changeDetails: { value?: string; values?: OptionValue[] }) => {\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 mirrorEmit(this, ['change', 'tctChange'], {\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 onPopoverState = (event: CustomEvent<{ open: boolean; action: 'close' \| 'select' \| 'open' }>) => {\n const { open, action } = event.detail;\n if (open) return;\n\n switch (action) {\n case 'select':\n case 'close':\n this.primaryBtn.focus();\n break;\n }\n };\n\n // for spec testing\n setOptionListActiveElement = async (index: number) => {\n await this.optionList?.setActiveElement(index);\n };\n\n syncValueProperties = () => {\n const { value, selectedOptions } = this;\n if (!!selectedOptions?.length) this.selectedOptionsChanged(selectedOptions);\n else if (value) this.valueChanged(value, null, 'value');\n };\n\n updateSelectedOptionElements = async () => {\n const { selectedOptions = [] } = this;\n const selectedValues = selectedOptions.map(option => option.value);\n const options = await this.getOptionListOptions();\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}${!optionCount && active ? ` ${loc('tecton.element.pill.active')}` : ''}`}\n aria-describedby={(optionCount && 'option-description') \|\| undefined}\n >\n {this.truncatedButtonContent}\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 onPopoverState={this.onPopoverState}\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"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["q2PillCss","Q2Pill","constructor","hostRef","this","scheduledAfterRender","hasPopoverBottom","hasPopoverTop","selectedOptionElements","hoist","_a","window","Tecton","useActionSheets","popoverAlignment","popoverMinHeight","selectedOptions","clearSelectedOptions","value","active","open","primaryBtn","focus","mirrorEmit","values","push","resizeIframe","determineOptionCount","async","optionList","allOptions","getOptionListOptions","optionCount","length","numberOfOptions","hostElement","querySelectorAll","executeActionSheet","event","result","showActionSheetList","handleSelectionChanges","getOption","options","find","option","querySelector","getOptions","handleChange","stopPropagation","detail","handleClick","disabled","shouldShowActionSheet","popoverElement","toggle","label","isActive","display","handleFocusOut","relatedTarget","contains","handleKeydown","isTabMetaOrCtrl","metaKey","ctrlKey","key","preventDefault","hasSlot","handleOptionListExternalKeydown","handleExternalKeydown","changeDetails","multiple","onchange","undefined","selectedOption","handleWrapperClick","click","onClickElsewhere","target","localName","onMutationObserved","updateSlotState","updateSelectedOptionElements","onPopoverState","action","setOptionListActiveElement","index","setActiveElement","syncValueProperties","selectedOptionsChanged","valueChanged","selectedValues","map","filter","includes","popTopSlot","shadowRoot","popBottomSlot","topSlotHasNode","assignedNodes","bottomSlotHasNode","disconnectedCallback","mutationObserver","disconnect","componentWillLoad","observer","MutationObserver","observe","childList","attributes","componentDidLoad","overrideFocus","componentDidRender","forEach","fn","handleSelectedDisplay","delegateFocus","isEventFromElement","popoverStateHandler","closePopover","_togglePopover","openPopover","setValue","valueSet","Set","Array","isArray","waitForNextPaint","newValue","firstValue","_b","_oldValue","propName","valueProxy","labelProxy","buttonContent","maxLength","count","text","loc","firstDisplay","suffix","truncatedText","_truncate","dispatchEvent","FocusEvent","substring","renderHiddenElement","h","id","class","renderIcon","isButton","TagName","iconName","onClick","type","render","wrapperClassNames","onChange","join","ref","el","primaryBtnWrapper","tabIndex","role","onKeyDown","onFocusout","controlElement","popoverMaxHeight","minHeight","direction","popoverDirection","align","popoverTopContainer","tabindex","hidden","name","onReady","optionListLabel","popoverBottomContainer"],"sources":["src/components/q2-pill/q2-pill.scss?tag=q2-pill&encapsulation=shadow","src/components/q2-pill/q2-pill.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n display: inline-block;\n position: relative;\n line-height: 0;\n}\n\n:host(:not(:last-child)) {\n margin-inline-end: var-list(var-prefixer(pill-margin), --app-scale-2x, 10px);\n}\n\nq2-popover,\n.btn-wrapper {\n --comp-pill-min-height: #{var-list(var-prefixer(pill-min-height), 44px)};\n --comp-pill-btn-height: #{var-list(var-prefixer(pill-btn-height), 30px)};\n}\n\n.popover-top-container {\n position: sticky;\n top: 0;\n z-index: 5;\n}\n\n.popover-bottom-container {\n position: sticky;\n bottom: 0;\n z-index: 5;\n}\n\n.btn-wrapper {\n --comp-pill-btn-border-width: #{var-list(var-prefixer(pill-btn-border-width), 2px)};\n --comp-close-size: 0px;\n --comp-btn-background: #{var-list(var-prefixer(pill-btn-background), --t-base, #ffffff)};\n --comp-btn-box-shadow: #{var-list(--tct-pill-btn-box-shadow, none)};\n --comp-btn-backdrop-filter: #{var-list(--tct-pill-btn-backdrop-filter, none)};\n --comp-hover-btn-background: #{var-list(var-prefixer(pill-hover-btn-background), --t-gray-13, #e6e6e6)};\n --comp-btn-padding: #{var-list(var-prefixer(pill-btn-padding-inline), --app-scale-3x, 15px)};\n --comp-btn-color: #{var-list(var-prefixer(pill-btn-color), --t-gray-3, #262626)};\n --comp-active-btn-color: #{var-list(--tct-pill-active-btn-color, --comp-btn-background)};\n --comp-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-7, #666666)};\n --comp-active-btn-box-shadow: #{var-list(--tct-pill-active-btn-box-shadow, --tct-pill-btn-box-shadow, none)};\n --comp-active-btn-backdrop-filter: #{var-list(--tct-pill-active-btn-backdrop-filter, none)};\n --comp-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-border-color), --t-gray-7, #666666)};\n --comp-hover-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n --comp-hover-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n\n position: relative;\n\n &.has-options,\n &.has-icon {\n --comp-close-size: var(--comp-pill-btn-height);\n }\n\n :host([active]:not([active='false'])) & {\n --comp-btn-color: #{var-list(var-prefixer(pill-active-btn-color), --t-base, #ffffff)};\n }\n\n :host([theme='primary']) & {\n --comp-active-btn-background: #{var-list(--tct-pill-primary-active-background, --t-primary, #0079c1)};\n --comp-active-btn-box-shadow: #{var-list(--tct-pill-primary-active-btn-box-shadow, none)};\n --comp-active-btn-backdrop-filter: #{var-list(--tct-pill-primary-active-backdrop-filter, none)};\n --comp-active-btn-color: #{var-list(--tct-pill-primary-active-font-color, --t-primary-text, #ffffff)};\n --comp-active-btn-border-color: #{var-list(--tct-pill-primary-active-border-color, --t-primary, #0079c1)};\n --comp-hover-active-btn-background: #{var-list(\n --tct-pill-primary-active-hover-background,\n --t-primary-l3,\n #21acff\n )};\n --comp-hover-active-btn-border-color: #{var-list(\n --tct-pill-primary-active-hover-border-color,\n --t-primary-l3,\n #21acff\n )};\n }\n\n :host([theme='secondary']) & {\n --comp-active-btn-background: #{var-list(--tct-pill-secondary-active-background, --t-secondary, #b3c2cc)};\n --comp-active-btn-box-shadow: #{var-list(--tct-pill-secondary-active-box-shadow, none)};\n --comp-active-btn-backdrop-filter: #{var-list(--tct-pill-secondary-active-backdrop-filter, none)};\n --comp-active-btn-color: #{var-list(--tct-pill-secondary-active-font-color, --t-secondary-text, #141414)};\n --comp-active-btn-border-color: #{var-list(--tct-pill-secondary-active-border-color, --t-secondary, #b3c2cc)};\n --comp-hover-active-btn-background: #{var-list(\n --tct-pill-secondary-active-hover-background,\n --t-secondary-l3,\n #c9d5db\n )};\n --comp-hover-active-btn-border-color: #{var-list(\n --tct-pill-secondary-active-hover-border-color,\n --t-secondary-l3,\n #c9d5db\n )};\n }\n\n :host([theme='tertiary']) & {\n --comp-active-btn-background: #{var-list(--tct-pill-tertiary-active-background, --t-tertiary, #e8f5fc)};\n --comp-active-btn-box-shadow: #{var-list(--tct-pill-tertiary-active-box-shadow, none)};\n --comp-active-btn-backdrop-filter: #{var-list(--tct-pill-tertiary-active-backdrop-filter, none)};\n --comp-active-btn-color: #{var-list(--tct-pill-tertiary-active-font-color, --t-tertiary-text, #141414)};\n --comp-active-btn-border-color: #{var-list(--tct-pill-tertiary-active-border-color, --t-tertiary, #e8f5fc)};\n --comp-hover-active-btn-background: #{var-list(\n --tct-pill-tertiary-active-hover-background,\n --t-tertiary-l3,\n #eff8fd\n )};\n --comp-hover-active-btn-border-color: #{var-list(\n --tct-pill-tertiary-active-hover-border-color,\n --t-tertiary-l3,\n #eff8fd\n )};\n }\n}\n\n.btn-height-wrapper {\n height: var(--comp-pill-min-height);\n display: flex;\n align-items: center;\n cursor: pointer;\n &:focus {\n box-shadow: none;\n }\n\n :host([disabled]) & {\n cursor: not-allowed;\n }\n}\n\n.btn-close,\n.btn-primary {\n cursor: pointer;\n height: var(--comp-pill-btn-height);\n border-style: solid;\n border-radius: var-list(var-prefixer(pill-btn-border-radius), 30px);\n transition-property: background, color, padding, width, opacity;\n transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\n.btn-close,\n.btn-primary,\nq2-icon {\n :host([disabled]) & {\n opacity: var-list(var-prefixer(pill-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n cursor: not-allowed;\n }\n}\n\n.btn-primary {\n background: var(--comp-btn-background);\n box-shadow: var(--comp-btn-box-shadow);\n backdrop-filter: var(--comp-btn-backdrop-filter);\n border-width: var-list(--comp-pill-btn-border-width);\n border-color: var-list(var-prefixer(pill-btn-border-color), --t-a11y-gray-color-AA, #949494);\n padding-inline: var(--comp-btn-padding);\n padding-right: calc(var(--comp-btn-padding) + var(--comp-close-size));\n font-size: var-list(var-prefixer(pill-btn-font-size), --app-font-size, 14px);\n font-weight: var-list(--tct-pill-btn-font-weight, 400);\n color: var(--comp-btn-color);\n display: block;\n width: 100%;\n text-align: start;\n\n &:focus {\n box-shadow: var-list(--tct-pill-btn-focus-box-shadow, --const-double-focus-ring);\n }\n\n &:focus-visible {\n box-shadow: var-list(--tct-pill-btn-focus-visible-box-shadow, --const-double-focus-ring);\n }\n\n &:hover {\n background: var(--comp-hover-btn-background);\n }\n\n .has-options &,\n .has-icon & {\n padding-right: calc(#{var-list(var-prefixer(pill-icon-gap), --app-scale-1x, 5px)} + var(--comp-close-size));\n }\n\n .has-options & {\n @include line-clamp(1);\n max-width: var-list(var-prefixer(pill-max-width), 200px);\n }\n\n :host([active]:not([active='false'])) & {\n background: var(--comp-active-btn-background);\n box-shadow: var(--comp-active-btn-box-shadow);\n backdrop-filter: var(--comp-active-btn-backdrop-filter);\n border-color: var(--comp-active-btn-border-color);\n color: var(--comp-active-btn-color);\n\n &:focus {\n box-shadow: var-list(--tct-pill-btn-focus-box-shadow, --const-double-focus-ring);\n }\n\n &:focus-visible {\n box-shadow: var-list(--tct-pill-btn-focus-visible-box-shadow, --const-double-focus-ring);\n }\n\n &:hover {\n background: var(--comp-hover-active-btn-background);\n border-color: var(--comp-hover-active-btn-border-color);\n }\n }\n}\n\n.btn-close {\n background: transparent;\n border-color: transparent;\n border-width: var(--comp-pill-btn-border-width);\n width: var(--comp-close-size);\n height: var(--comp-close-size);\n padding: 0;\n border: 0;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n opacity: 0;\n &:focus-visible {\n box-shadow: var-list(--tct-pill-btn-focus-visible-box-shadow, --const-double-focus-ring);\n }\n :host([active]:not([active='false'])) & {\n color: var(--comp-active-btn-color);\n }\n\n .has-options &,\n .has-icon & {\n opacity: 1;\n }\n}\n\nq2-icon {\n --tct-icon-stroke-primary: #{var-list(--tct-pill-icon-stroke, currentcolor)};\n --tct-icon-stroke-width: #{var-list(--tct-pill-icon-stroke-width, inherit)};\n width: var-list(var-prefixer(pill-icon-size), 14px);\n height: var-list(var-prefixer(pill-icon-size), 14px);\n transition-property: transform;\n transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\ndiv.btn-close {\n pointer-events: none;\n\n :host([open]) & q2-icon {\n transform: rotate(180deg);\n }\n}\n\nbutton.btn-close {\n :host([active]:not([active='false'])) & {\n &:focus,\n &:hover {\n background: var-list(var-prefixer(pill-hover-close-btn-background), --t-top-a1, rgba(13, 13, 13, 0.35));\n border-color: var-list(var-prefixer(pill-hover-close-btn-border-color), --t-top-a1, rgba(13, 13, 13, 0.35));\n }\n }\n}\n\nq2-popover {\n top: calc(var(--comp-pill-min-height) - calc(calc(var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2));\n}\n\n:host([borderless]:not([borderless='false'])) {\n button {\n border-style: none;\n }\n}\n","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 mirrorEmit from '@/utils/mirror-emit';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\nimport { OptionValue } from '../q2-option-list/q2-option-list';\n\n/*\n @name Pill\n * @category Display\n * @summary Use for displaying and removing active filters in data views.\n * @slot popover-top - An optional slot to display custom content persistently at the top of the popover. This is not compatible with the action sheet workflow.\n * @slot popover-bottom - An optional slot to display custom content persistently at the bottom of the popover. This is not compatible with the action sheet workflow.\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: OptionValue[] = [];\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 * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter<{ value: string; values: OptionValue[]; active: boolean }>;\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 tctChange: EventEmitter<{ value: string; values: OptionValue[]; 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 async popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n if (this.open !== open) this.open = open;\n if (open) return;\n this.setOptionListActiveElement(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.getOptionListOptions()) 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 @Watch('label')\n async valueChanged(newValue, _oldValue, propName) {\n const { label, multiple, selectedOptions, value } = this;\n const valueProxy = propName === 'value' ? newValue : value;\n const labelProxy = propName === 'label' ? newValue : label;\n if (multiple) return;\n const firstValue = selectedOptions?.[0]?.value ?? null;\n if (propName === 'value' && newValue === firstValue) this.updateSelectedOptionElements();\n else {\n const selectedOption = (await this.getOption(newValue)) as HTMLQ2OptionElement;\n const { value, display } = selectedOption \|\| { value: valueProxy, display: labelProxy };\n this.selectedOptions = value ? [{ value, display }] : [];\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get buttonContent() {\n const { label, selectedOptionElements, optionCount, maxLength } = this;\n const count = selectedOptionElements.length;\n\n let text: string;\n if (!optionCount \|\| count === 0) {\n text = loc(label);\n } else if (count === 1) {\n text = loc(selectedOptionElements[0].display);\n } else {\n const firstDisplay = loc(selectedOptionElements[0].display);\n const suffix = ` +${count - 1}`;\n return {\n text: `${firstDisplay}${suffix}`,\n truncatedText: `${this._truncate(firstDisplay, maxLength)}${suffix}`,\n };\n }\n\n return { text, truncatedText: this._truncate(text, maxLength) };\n }\n\n _togglePopover() {\n const { primaryBtn } = this;\n primaryBtn?.click();\n primaryBtn?.focus();\n primaryBtn.dispatchEvent(new FocusEvent('focus'));\n }\n\n _truncate(text: string = '', maxLength: number = 0) {\n return maxLength && text.length > maxLength ? `${text.substring(0, maxLength)}…` : text;\n }\n\n clearSelectedOptions = () => {\n this.selectedOptions = [];\n this.value = null;\n this.active = false;\n this.open = false;\n this.primaryBtn.focus();\n mirrorEmit(this, ['change', 'tctChange'], { value: null, values: [], active: false });\n this.scheduledAfterRender.push(resizeIframe);\n };\n\n determineOptionCount = async () => {\n if (this.optionList) {\n const allOptions = await this.getOptionListOptions();\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.getOptionListOptions();\n return options.find(option => option.value === value);\n } else {\n return this.hostElement.querySelector<HTMLQ2OptionElement>(`q2-option[value=\"${value}\"]`);\n }\n };\n\n // for spec testing\n getOptionListOptions = async () => {\n return await this.optionList?.getOptions();\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 mirrorEmit(this, ['change', 'tctChange'], {\n value,\n values,\n active: isActive,\n });\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 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.handleOptionListExternalKeydown(event);\n }\n };\n\n // for spec testing\n handleOptionListExternalKeydown = async (event: KeyboardEvent) => {\n await this.optionList?.handleExternalKeydown(event);\n };\n\n handleSelectionChanges = async (changeDetails: { value?: string; values?: OptionValue[] }) => {\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 mirrorEmit(this, ['change', 'tctChange'], {\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 onPopoverState = (event: CustomEvent<{ open: boolean; action: 'close' \| 'select' \| 'open' }>) => {\n const { open, action } = event.detail;\n if (open) return;\n\n switch (action) {\n case 'select':\n case 'close':\n this.primaryBtn.focus();\n break;\n }\n };\n\n // for spec testing\n setOptionListActiveElement = async (index: number) => {\n await this.optionList?.setActiveElement(index);\n };\n\n syncValueProperties = () => {\n const { value, selectedOptions } = this;\n if (!!selectedOptions?.length) this.selectedOptionsChanged(selectedOptions);\n else if (value) this.valueChanged(value, null, 'value');\n };\n\n updateSelectedOptionElements = async () => {\n const { selectedOptions = [] } = this;\n const selectedValues = selectedOptions.map(option => option.value);\n const options = await this.getOptionListOptions();\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 { text, truncatedText } = this.buttonContent;\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={text}\n aria-pressed={!optionCount ? `${!!active}` : undefined}\n aria-describedby={(optionCount && 'option-description') \|\| undefined}\n >\n {truncatedText}\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 onPopoverState={this.onPopoverState}\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"],"mappings":"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","ignoreList":[]}