npm - q2-tecton-elements - Versions diffs - 1.60.2 → 1.61.0 - Mend

q2-tecton-elements 1.60.2 → 1.61.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 (315) hide show

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","change","emit","values","push","resizeIframe","determineOptionCount","async","optionList","allOptions","getOptions","optionCount","length","numberOfOptions","hostElement","querySelectorAll","executeActionSheet","event","result","showActionSheetList","handleSelectionChanges","getOption","options","find","option","querySelector","handleChange","stopPropagation","detail","handleClick","disabled","shouldShowActionSheet","popoverElement","toggle","label","isActive","display","handleFocusOut","relatedTarget","contains","handleKeydown","isTabMetaOrCtrl","metaKey","ctrlKey","key","preventDefault","hasSlot","handleExternalKeydown","changeDetails","multiple","onchange","undefined","selectedOption","handleWrapperClick","click","onClickElsewhere","target","localName","onMutationObserved","updateSlotState","updateSelectedOptionElements","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","setActiveElement","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, 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-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 &: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 &: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 :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 { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\nimport { IOptionValue } from '../q2-option-list/q2-option-list';\n\n/*\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: IOptionValue[] = [];\n\n /* The color of the element when in the active state. /\n @Prop({ reflect: true })\n theme: 'primary' \| 'secondary' \| 'tertiary';\n\n /* The value emitted when the component is selected. /\n @Prop({ reflect: true, mutable: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the pill is clicked or the selected options change.\n \n When multi-select is enabled, `value` will be `undefined`.\n * @legacyEvent\n /\n @Event()\n change: EventEmitter<{ value: string; values: IOptionValue[]; active: boolean }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n this.mutationObserver = null;\n }\n\n componentWillLoad() {\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true, attributes: true });\n this.mutationObserver = observer;\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n this.syncValueProperties();\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('displayChanged')\n handleSelectedDisplay() {\n if (this.multiple) return;\n this.updateSelectedOptionElements();\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.primaryBtn.focus();\n }\n\n @Listen('popoverStateChanged')\n popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n if (this.open !== open) this.open = open;\n if (open) return;\n this.optionList.setActiveElement(null);\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Emulates clicking the `<button>` to hide the popover if it is visible.\n \n @testOnly\n /\n @Method()\n async closePopover() {\n if (!this.open \|\| this.disabled) return;\n this._togglePopover();\n }\n\n /\n Emulates clicking the `<button>` to display the popover if it is hidden.\n \n @testOnly\n /\n @Method()\n async openPopover() {\n if (this.open \|\| this.disabled) return;\n this._togglePopover();\n }\n\n /\n Emulates clicking the `<button>` to display the popover and selecting the option(s) with the specified value(s).\n \n If multi-select is enabled and the `closePopover` argument is `true` (default), the popover will be closed\n * after the option(s) are selected.\n \n @testOnly\n */\n @Method()\n async setValue(values: string \| string[], options: { closePopover?: boolean } = { closePopover: true }) {\n const valueSet = new Set(Array.isArray(values) ? values : [values]);\n const allOptions = (await this.optionList?.getOptions()) as HTMLQ2OptionElement[];\n if (!this.open) {\n await this.openPopover();\n await waitForNextPaint();\n }\n\n valueSet.forEach(value => {\n allOptions.find(option => option.value === value)?.click();\n });\n\n if (options.closePopover) {\n await this.closePopover();\n await waitForNextPaint();\n }\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('selectedOptions')\n selectedOptionsChanged(newValue) {\n const { multiple } = this;\n const firstValue = newValue?.[0]?.value ?? null;\n if (multiple) {\n if (this.value) this.value = null;\n this.updateSelectedOptionElements();\n } else if (this.value === firstValue) {\n this.updateSelectedOptionElements();\n } else {\n this.value = firstValue;\n }\n }\n\n @Watch('value')\n @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\n if (!optionCount \|\| selectedOptionElements.length === 0) return loc(label);\n else if (selectedOptionElements.length === 1) return loc(selectedOptionElements[0].display);\n\n return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });\n }\n\n get truncatedButtonContent() {\n const { maxLength, buttonContent } = this;\n if (maxLength && buttonContent.length > maxLength) return `${buttonContent.substring(0, maxLength)}…`;\n else return buttonContent;\n }\n\n _togglePopover() {\n const { primaryBtn } = this;\n primaryBtn?.click();\n primaryBtn?.focus();\n primaryBtn.dispatchEvent(new FocusEvent('focus'));\n }\n\n clearSelectedOptions = () => {\n this.selectedOptions = [];\n this.value = null;\n this.active = false;\n this.open = false;\n this.primaryBtn.focus();\n this.change.emit({ value: null, values: [], active: false });\n this.scheduledAfterRender.push(resizeIframe);\n };\n\n determineOptionCount = async () => {\n if (this.optionList) {\n const allOptions = await this.optionList.getOptions();\n this.optionCount = allOptions.length;\n } else {\n const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n this.optionCount = numberOfOptions;\n }\n };\n\n executeActionSheet = async (event: MouseEvent \| KeyboardEvent) => {\n const result = await showActionSheetList(this, event);\n this.primaryBtn.focus();\n this.handleSelectionChanges(result);\n };\n\n getOption = async (value: string) => {\n if (this.optionList) {\n const options = await this.optionList.getOptions();\n return options.find(option => option.value === value);\n } else {\n return this.hostElement.querySelector<HTMLQ2OptionElement>(`q2-option[value=\"${value}\"]`);\n }\n };\n\n handleChange = event => {\n event.stopPropagation();\n if (!this.optionCount) return;\n this.handleSelectionChanges(event.detail);\n };\n\n handleClick = async (event: MouseEvent) => {\n event.stopPropagation();\n if (this.disabled) return;\n if (this.optionCount) {\n if (shouldShowActionSheet(this)) {\n this.executeActionSheet(event);\n } else {\n await this.popoverElement.toggle();\n }\n } else {\n const { value, label } = this;\n const isActive = (this.active = !this.active);\n const values = isActive ? [{ value, display: label }] : [];\n this.change.emit({\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.optionList.handleExternalKeydown(event);\n }\n };\n\n handleSelectionChanges = async (changeDetails: { value?: string; values?: IOptionValue[] }) => {\n const { multiple } = this;\n const { value = '', values = [] } = changeDetails;\n const isActive = multiple ? !!values.length : !!value;\n if (!this.hostElement.onchange) {\n if (multiple) {\n this.selectedOptions = values;\n this.value = undefined;\n } else {\n const selectedOption = (await this.getOption(value)) as HTMLQ2OptionElement;\n this.selectedOptions = selectedOption\n ? [{ value: selectedOption.value, display: selectedOption.display }]\n : [];\n this.value = selectedOption?.value \|\| undefined;\n }\n }\n\n this.change.emit({\n value: multiple ? undefined : value,\n values,\n active: isActive,\n });\n };\n\n handleWrapperClick = () => {\n this.primaryBtn.focus();\n this.primaryBtn.click();\n };\n\n onClickElsewhere = (event: CustomEvent) => {\n const target = event.target as HTMLClickElsewhereElement;\n if (target.localName === 'click-elsewhere') {\n event.stopPropagation();\n const { popoverElement } = this;\n if (!popoverElement) return;\n popoverElement.open = false;\n }\n };\n\n onMutationObserved = () => {\n this.updateSlotState();\n this.determineOptionCount();\n this.updateSelectedOptionElements();\n };\n\n syncValueProperties = () => {\n const { value, selectedOptions } = this;\n if (!!selectedOptions?.length) this.selectedOptionsChanged(selectedOptions);\n else if (value) this.valueChanged(value, null, 'value');\n };\n\n updateSelectedOptionElements = async () => {\n const { selectedOptions = [] } = this;\n const selectedValues = selectedOptions.map(option => option.value);\n const options = await this.optionList?.getOptions();\n if (this.optionCount) this.active = !!selectedValues.length;\n this.selectedOptionElements =\n (options?.filter(option => selectedValues.includes(option.value)) as HTMLQ2OptionElement[]) \|\| [];\n };\n\n updateSlotState = () => {\n const { hostElement, hasPopoverTop, hasPopoverBottom } = this;\n const popTopSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-top\"]');\n const popBottomSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-bottom\"]');\n const topSlotHasNode = popTopSlot?.assignedNodes().length > 0;\n const bottomSlotHasNode = popBottomSlot?.assignedNodes().length > 0;\n\n if (hasPopoverTop !== topSlotHasNode) this.hasPopoverTop = topSlotHasNode;\n if (hasPopoverBottom !== bottomSlotHasNode) this.hasPopoverBottom = bottomSlotHasNode;\n };\n\n // #endregion\n // #region Render Methods\n\n renderHiddenElement() {\n return (\n <div\n id=\"option-description\"\n class=\"sr\"\n aria-hidden=\"true\"\n >\n {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n </div>\n );\n }\n\n renderIcon() {\n const { optionCount, active } = this;\n const isButton = optionCount && active;\n const TagName = isButton ? 'button' : 'div';\n const iconName = isButton \|\| !optionCount ? 'close' : 'chevron-down';\n\n return (\n <TagName\n class=\"btn-close\"\n onClick={(isButton && this.clearSelectedOptions) \|\| undefined}\n disabled={(isButton && this.disabled) \|\| undefined}\n aria-label={(isButton && loc('tecton.element.pill.clearSelection')) \|\| undefined}\n type={(isButton && 'button') \|\| undefined}\n >\n <q2-icon type={iconName}></q2-icon>\n </TagName>\n );\n }\n\n render() {\n const { optionCount, active, open } = this;\n const wrapperClassNames = ['btn-wrapper'];\n if (optionCount \|\| active) wrapperClassNames.push('has-icon');\n if (optionCount) wrapperClassNames.push('has-options');\n\n return (\n <click-elsewhere onChange={this.onClickElsewhere}>\n <div class={wrapperClassNames.join(' ')}>\n <div\n class=\"btn-height-wrapper\"\n ref={el => (this.primaryBtnWrapper = el)}\n onClick={this.handleWrapperClick}\n tabIndex={-1}\n >\n <button\n class=\"btn-primary\"\n test-id=\"btn-control\"\n type=\"button\"\n role={(optionCount && 'combobox') \|\| undefined}\n ref={el => (this.primaryBtn = el)}\n onClick={this.handleClick}\n onKeyDown={this.handleKeydown}\n onFocusout={this.handleFocusOut}\n disabled={this.disabled}\n aria-roledescription={!optionCount && 'filter'}\n aria-controls={(optionCount && 'option-list') \|\| undefined}\n aria-expanded={(optionCount && `${!!open}`) \|\| undefined}\n aria-label={this.buttonContent}\n aria-describedby={(optionCount && 'option-description') \|\| undefined}\n >\n {this.truncatedButtonContent}\n {!optionCount && active && <span class=\"sr\">({loc('tecton.element.pill.active')})</span>}\n </button>\n </div>\n {this.renderIcon()}\n {!!optionCount && this.renderHiddenElement()}\n </div>\n {this.optionCount > 0 && (\n <q2-popover\n ref={el => (this.popoverElement = el)}\n controlElement={this.primaryBtn}\n open={this.open}\n max-height={this.popoverMaxHeight}\n minHeight={this.popoverMinHeight}\n direction={this.popoverDirection}\n align={this.popoverAlignment}\n onFocusout={this.handleFocusOut}\n >\n <div class=\"popover-content\">\n <div\n ref={el => (this.popoverTopContainer = el)}\n class=\"popover-top-container\"\n tabindex=\"-1\"\n hidden={!this.hasPopoverTop}\n onKeyDown={this.handleKeydown}\n >\n <slot name=\"popover-top\"></slot>\n </div>\n <q2-option-list\n type=\"listbox\"\n ref={el => (this.optionList = el)}\n id=\"option-list\"\n onChange={this.handleChange}\n multiple={this.multiple}\n selectedOptions={this.selectedOptions}\n onReady={() => this.updateSelectedOptionElements()}\n label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n >\n <slot />\n </q2-option-list>\n <div\n ref={el => (this.popoverBottomContainer = el)}\n class=\"popover-bottom-container\"\n tabindex=\"-1\"\n hidden={!this.hasPopoverBottom}\n onKeyDown={this.handleKeydown}\n >\n <slot name=\"popover-bottom\"></slot>\n </div>\n </div>\n </q2-popover>\n )}\n </click-elsewhere>\n );\n }\n\n // #endregion\n}\n"],"mappings":";;;;;;AAAA,MAAMA,IAAY;;MCsBLC,IAAM;EADnB,WAAAC,CAAAC;;;;IAWIC,KAAoBC,uBAAmB;;;QAYvCD,KAAgBE,mBAAG;IAGnBF,KAAaG,gBAAG;IAMhBH,KAAsBI,yBAA0B;;;;;eAuBhDJ,KAAKK,YAAcC,IAAAC,OAAOC,YAAM,QAAAF,WAAA,aAAAA,EAAEG;wFAuClCT,KAAgBU,mBAAqB;0BAkBrCV,KAAgBW,mBAAW;6DAI3BX,KAAeY,kBAAmB;IAkLlCZ,KAAoBa,uBAAG;MACnBb,KAAKY,kBAAkB;MACvBZ,KAAKc,QAAQ;MACbd,KAAKe,SAAS;MACdf,KAAKgB,OAAO;MACZhB,KAAKiB,WAAWC;MAChBlB,KAAKmB,OAAOC,KAAK;QAAEN,OAAO;QAAMO,QAAQ;QAAIN,QAAQ;;MACpDf,KAAKC,qBAAqBqB,KAAKC;AAAa;IAGhDvB,KAAoBwB,uBAAGC;MACnB,IAAIzB,KAAK0B,YAAY;QACjB,MAAMC,UAAmB3B,KAAK0B,WAAWE;QACzC5B,KAAK6B,cAAcF,EAAWG;aAC3B;QACH,MAAMC,IAAkB/B,KAAKgC,YAAYC,iBAAiB,aAAaH;QACvE9B,KAAK6B,cAAcE;;;IAI3B/B,KAAAkC,qBAAqBT,MAAOU;MACxB,MAAMC,UAAeC,EAAoBrC,MAAMmC;MAC/CnC,KAAKiB,WAAWC;MAChBlB,KAAKsC,uBAAuBF;AAAO;IAGvCpC,KAAAuC,YAAYd,MAAOX;MACf,IAAId,KAAK0B,YAAY;QACjB,MAAMc,UAAgBxC,KAAK0B,WAAWE;QACtC,OAAOY,EAAQC,MAAKC,KAAUA,EAAO5B,UAAUA;aAC5C;QACH,OAAOd,KAAKgC,YAAYW,cAAmC,oBAAoB7B;;;IAIvFd,KAAY4C,eAAGT;MACXA,EAAMU;MACN,KAAK7C,KAAK6B,aAAa;MACvB7B,KAAKsC,uBAAuBH,EAAMW;AAAO;IAG7C9C,KAAA+C,cAActB,MAAOU;MACjBA,EAAMU;MACN,IAAI7C,KAAKgD,UAAU;MACnB,IAAIhD,KAAK6B,aAAa;QAClB,IAAIoB,EAAsBjD,OAAO;UAC7BA,KAAKkC,mBAAmBC;eACrB;gBACGnC,KAAKkD,eAAeC;;aAE3B;QACH,OAAMrC,OAAEA,GAAKsC,OAAEA,KAAUpD;QACzB,MAAMqD,IAAYrD,KAAKe,UAAUf,KAAKe;QACtC,MAAMM,IAASgC,IAAW,EAAC;UAAEvC;UAAOwC,SAASF;cAAW;QACxDpD,KAAKmB,OAAOC,KAAK;UACbN;UACAO;UACAN,QAAQsC;;;;IAKpBrD,KAAAuD,iBAAiB9B,MAAOU;;MACpB,MAAMqB,IAAgBrB,EAAMqB;MAC5B,KAAIlD,IAAAN,KAAKkD,oBAAc,QAAA5C,WAAA,aAAAA,EAAEmD,SAASD,IAAgB;MAClD,IAAIxD,KAAKgC,YAAYyB,SAASD,IAAgB;MAC9CxD,KAAKgB,OAAO;AAAK;IAGrBhB,KAAA0D,gBAAgBjC,MAAOU;MACnB,MAAMwB,IAAkBxB,EAAMyB,WAAWzB,EAAM0B,WAAW1B,EAAM2B,QAAQ;MACxE,KAAK9D,KAAK6B,eAAe7B,KAAKgD,YAAYW,GAAiB;MAC3DxB,EAAM4B;MACN,MAAMC,IAAUhE,KAAKG,iBAAiBH,KAAKE;;YAG3C,IAAI+C,EAAsBjD,MAAMmC,OAAW6B,GAAS;QAChDhE,KAAKkC,mBAAmBC;aACrB;QACHnC,KAAK0B,WAAWuC,sBAAsB9B;;;IAI9CnC,KAAAsC,yBAAyBb,MAAOyC;MAC5B,OAAMC,UAAEA,KAAanE;MACrB,OAAMc,OAAEA,IAAQ,IAAEO,QAAEA,IAAS,MAAO6C;MACpC,MAAMb,IAAWc,MAAa9C,EAAOS,WAAWhB;MAChD,KAAKd,KAAKgC,YAAYoC,UAAU;QAC5B,IAAID,GAAU;UACVnE,KAAKY,kBAAkBS;UACvBrB,KAAKc,QAAQuD;eACV;UACH,MAAMC,UAAwBtE,KAAKuC,UAAUzB;UAC7Cd,KAAKY,kBAAkB0D,IACjB,EAAC;YAAExD,OAAOwD,EAAexD;YAAOwC,SAASgB,EAAehB;gBACxD;UACNtD,KAAKc,SAAQwD,MAAc,QAAdA,WAAc,aAAdA,EAAgBxD,UAASuD;;;MAI9CrE,KAAKmB,OAAOC,KAAK;QACbN,OAAOqD,IAAWE,YAAYvD;QAC9BO;QACAN,QAAQsC;;AACV;IAGNrD,KAAkBuE,qBAAG;MACjBvE,KAAKiB,WAAWC;MAChBlB,KAAKiB,WAAWuD;AAAO;IAG3BxE,KAAAyE,mBAAoBtC;MAChB,MAAMuC,IAASvC,EAAMuC;MACrB,IAAIA,EAAOC,cAAc,mBAAmB;QACxCxC,EAAMU;QACN,OAAMK,gBAAEA,KAAmBlD;QAC3B,KAAKkD,GAAgB;QACrBA,EAAelC,OAAO;;;IAI9BhB,KAAkB4E,qBAAG;MACjB5E,KAAK6E;MACL7E,KAAKwB;MACLxB,KAAK8E;AAA8B;IAGvC9E,KAAmB+E,sBAAG;MAClB,OAAMjE,OAAEA,GAAKF,iBAAEA,KAAoBZ;MACnC,OAAMY,MAAe,QAAfA,WAAA,aAAAA,EAAiBkB,SAAQ9B,KAAKgF,uBAAuBpE,SACtD,IAAIE,GAAOd,KAAKiF,aAAanE,GAAO,MAAM;AAAQ;IAG3Dd,KAA4B8E,+BAAGrD;;MAC3B,OAAMb,iBAAEA,IAAkB,MAAOZ;MACjC,MAAMkF,IAAiBtE,EAAgBuE,KAAIzC,KAAUA,EAAO5B;MAC5D,MAAM0B,YAAgBlC,IAAAN,KAAK0B,gBAAY,QAAApB,WAAA,aAAAA,EAAAsB;MACvC,IAAI5B,KAAK6B,aAAa7B,KAAKe,WAAWmE,EAAepD;MACrD9B,KAAKI,0BACAoC,MAAO,QAAPA,WAAO,aAAPA,EAAS4C,QAAO1C,KAAUwC,EAAeG,SAAS3C,EAAO5B,aAAqC;AAAE;IAGzGd,KAAe6E,kBAAG;MACd,OAAM7C,aAAEA,GAAW7B,eAAEA,GAAaD,kBAAEA,KAAqBF;MACzD,MAAMsF,IAAatD,EAAYuD,WAAW5C,cAA+B;MACzE,MAAM6C,IAAgBxD,EAAYuD,WAAW5C,cAA+B;MAC5E,MAAM8C,KAAiBH,MAAU,QAAVA,WAAU,aAAVA,EAAYI,gBAAgB5D,UAAS;MAC5D,MAAM6D,KAAoBH,MAAa,QAAbA,WAAa,aAAbA,EAAeE,gBAAgB5D,UAAS;MAElE,IAAI3B,MAAkBsF,GAAgBzF,KAAKG,gBAAgBsF;MAC3D,IAAIvF,MAAqByF,GAAmB3F,KAAKE,mBAAmByF;AAAiB;AA6H5F;;;EA7aG,oBAAAC;;KACItF,IAAAN,KAAK6F,sBAAkB,QAAAvF,WAAA,aAAAA,EAAAwF;IACvB9F,KAAK6F,mBAAmB;;EAG5B,iBAAAE;IACI,MAAMC,IAAW,IAAIC,iBAAiBjG,KAAK4E;IAC3CoB,EAASE,QAAQlG,KAAKgC,aAAa;MAAEmE,WAAW;MAAMC,YAAY;;IAClEpG,KAAK6F,mBAAmBG;;EAG5B,gBAAAK;IACIC,EAActG,KAAKgC;IACnBhC,KAAK+E;;EAGT,kBAAAwB;IACIvG,KAAKC,qBAAqBuG,SAAQC,KAAMA;IACxCzG,KAAKC,uBAAuB;;;;EAOhC,qBAAAyG;IACI,IAAI1G,KAAKmE,UAAU;IACnBnE,KAAK8E;;EAIT,aAAA6B,CAAcxE;IACV,KAAKyE,EAAmBzE,GAAOnC,KAAKgC,cAAc;IAClDhC,KAAKiB,WAAWC;;EAIpB,mBAAA2F,EAAsB/D,SAAQ9B,MAAEA;IAC5B,IAAIhB,KAAKgB,SAASA,GAAMhB,KAAKgB,OAAOA;IACpC,IAAIA,GAAM;IACVhB,KAAK0B,WAAWoF,iBAAiB;;;;;;;;;EAYrC,kBAAMC;IACF,KAAK/G,KAAKgB,QAAQhB,KAAKgD,UAAU;IACjChD,KAAKgH;;;;;;SAST,iBAAMC;IACF,IAAIjH,KAAKgB,QAAQhB,KAAKgD,UAAU;IAChChD,KAAKgH;;;;;;;;;SAYT,cAAME,CAAS7F,GAA2BmB,IAAsC;IAAEuE,cAAc;;;IAC5F,MAAMI,IAAW,IAAIC,IAAIC,MAAMC,QAAQjG,KAAUA,IAAS,EAACA;IAC3D,MAAMM,YAAoBrB,IAAAN,KAAK0B,gBAAY,QAAApB,WAAA,aAAAA,EAAAsB;IAC3C,KAAK5B,KAAKgB,MAAM;YACNhB,KAAKiH;YACLM;;IAGVJ,EAASX,SAAQ1F;;OACbR,IAAAqB,EAAWc,MAAKC,KAAUA,EAAO5B,UAAUA,SAAQ,QAAAR,WAAA,aAAAA,EAAAkE;AAAO;IAG9D,IAAIhC,EAAQuE,cAAc;YAChB/G,KAAK+G;YACLQ;;;;;EAQd,sBAAAvC,CAAuBwC;;IACnB,OAAMrD,UAAEA,KAAanE;IACrB,MAAMyH,KAAaC,KAAApH,IAAAkH,MAAQ,QAARA,WAAQ,aAARA,EAAW,QAAE,QAAAlH,WAAA,aAAAA,EAAEQ,WAAK,QAAA4G,WAAA,IAAAA,IAAI;IAC3C,IAAIvD,GAAU;MACV,IAAInE,KAAKc,OAAOd,KAAKc,QAAQ;MAC7Bd,KAAK8E;WACF,IAAI9E,KAAKc,UAAU2G,GAAY;MAClCzH,KAAK8E;WACF;MACH9E,KAAKc,QAAQ2G;;;EAMrB,kBAAMxC,CAAauC,GAAUG,GAAWC;;IACpC,OAAMxE,OAAEA,GAAKe,UAAEA,GAAQvD,iBAAEA,GAAeE,OAAEA,KAAUd;IACpD,MAAM6H,IAAaD,MAAa,UAAUJ,IAAW1G;IACrD,MAAMgH,IAAaF,MAAa,UAAUJ,IAAWpE;IACrD,IAAIe,GAAU;IACd,MAAMsD,KAAaC,KAAApH,IAAAM,MAAe,QAAfA,WAAe,aAAfA,EAAkB,QAAE,QAAAN,WAAA,aAAAA,EAAEQ,WAAK,QAAA4G,WAAA,IAAAA,IAAI;IAClD,IAAIE,MAAa,WAAWJ,MAAaC,GAAYzH,KAAK8E,qCACrD;MACD,MAAMR,UAAwBtE,KAAKuC,UAAUiF;MAC7C,OAAM1G,OAAEA,GAAKwC,SAAEA,KAAYgB,KAAkB;QAAExD,OAAO+G;QAAYvE,SAASwE;;MAC3E9H,KAAKY,kBAAkBE,IAAQ,EAAC;QAAEA;QAAOwC;YAAa;;;;;EAO9D,iBAAIyE;IACA,OAAM3E,OAAEA,GAAKxC,iBAAEA,GAAeR,wBAAEA,GAAsByB,aAAEA,KAAgB7B;IAExE,KAAK6B,KAAezB,EAAuB0B,WAAW,GAAG,OAAOkG,EAAI5E,SAC/D,IAAIhD,EAAuB0B,WAAW,GAAG,OAAOkG,EAAI5H,EAAuB,GAAGkD;IAEnF,OAAO0E,EAAI,mCAAmC;MAAEC,OAAOrH,EAAgBkB;;;EAG3E,0BAAIoG;IACA,OAAMC,WAAEA,GAASJ,eAAEA,KAAkB/H;IACrC,IAAImI,KAAaJ,EAAcjG,SAASqG,GAAW,OAAO,GAAGJ,EAAcK,UAAU,GAAGD,YACnF,OAAOJ;;EAGhB,cAAAf;IACI,OAAM/F,YAAEA,KAAejB;IACvBiB,MAAU,QAAVA,WAAU,aAAVA,EAAYuD;IACZvD,MAAU,QAAVA,WAAU,aAAVA,EAAYC;IACZD,EAAWoH,cAAc,IAAIC,WAAW;;;;EAgK5C,mBAAAC;IACI,OACIC,EACI;MAAAC,IAAG;MACHC,OAAM;MAAI,eACE;OAEXV,EAAI,yCAAyC,EAAChI,KAAK6B;;EAKhE,UAAA8G;IACI,OAAM9G,aAAEA,GAAWd,QAAEA,KAAWf;IAChC,MAAM4I,IAAW/G,KAAed;IAChC,MAAM8H,IAAUD,IAAW,WAAW;IACtC,MAAME,IAAWF,MAAa/G,IAAc,UAAU;IAEtD,OACI2G,EAACK,GAAO;MACJH,OAAM;MACNK,SAAUH,KAAY5I,KAAKa,wBAAyBwD;MACpDrB,UAAW4F,KAAY5I,KAAKgD,YAAaqB;MAAS,cACrCuE,KAAYZ,EAAI,yCAA0C3D;MACvE2E,MAAOJ,KAAY,YAAavE;OAEhCmE,EAAA;MAASQ,MAAMF;;;EAK3B,MAAAG;IACI,OAAMpH,aAAEA,GAAWd,QAAEA,GAAMC,MAAEA,KAAShB;IACtC,MAAMkJ,IAAoB,EAAC;IAC3B,IAAIrH,KAAed,GAAQmI,EAAkB5H,KAAK;IAClD,IAAIO,GAAaqH,EAAkB5H,KAAK;IAExC,OACIkH,EAAiB;MAAA1E,KAAA;MAAAqF,UAAUnJ,KAAKyE;OAC5B+D,EAAA;MAAA1E,KAAA;MAAK4E,OAAOQ,EAAkBE,KAAK;OAC/BZ,EACI;MAAA1E,KAAA;MAAA4E,OAAM;MACNW,KAAKC,KAAOtJ,KAAKuJ,oBAAoBD;MACrCP,SAAS/I,KAAKuE;MACdiF,WAAU;OAEVhB,EACI;MAAA1E,KAAA;MAAA4E,OAAM;MAAa,WACX;MACRM,MAAK;MACLS,MAAO5H,KAAe,cAAewC;MACrCgF,KAAKC,KAAOtJ,KAAKiB,aAAaqI;MAC9BP,SAAS/I,KAAK+C;MACd2G,WAAW1J,KAAK0D;MAChBiG,YAAY3J,KAAKuD;MACjBP,UAAUhD,KAAKgD;MAAQ,yBACAnB,KAAe;MACvB,iBAACA,KAAe,iBAAkBwC;MAAS,iBAC1CxC,KAAe,KAAKb,OAAWqD;MAAS,cAC5CrE,KAAK+H;MACC,oBAAClG,KAAe,wBAAyBwC;OAE1DrE,KAAKkI,yBACJrG,KAAed,KAAUyH,EAAM;MAAA1E,KAAA;MAAA4E,OAAM;OAAI,KAAGV,EAAI,+BAAsC,QAG/FhI,KAAK2I,gBACH9G,KAAe7B,KAAKuI,wBAE1BvI,KAAK6B,cAAc,KAChB2G,EAAA;MAAA1E,KAAA;MACIuF,KAAKC,KAAOtJ,KAAKkD,iBAAiBoG;MAClCM,gBAAgB5J,KAAKiB;MACrBD,MAAMhB,KAAKgB;MAAI,cACHhB,KAAK6J;MACjBC,WAAW9J,KAAKW;MAChBoJ,WAAW/J,KAAKgK;MAChBC,OAAOjK,KAAKU;MACZiJ,YAAY3J,KAAKuD;OAEjBiF,EAAK;MAAA1E,KAAA;MAAA4E,OAAM;OACPF,EAAA;MAAA1E,KAAA;MACIuF,KAAKC,KAAOtJ,KAAKkK,sBAAsBZ;MACvCZ,OAAM;MACNyB,UAAS;MACTC,SAASpK,KAAKG;MACduJ,WAAW1J,KAAK0D;OAEhB8E,EAAA;MAAA1E,KAAA;MAAMuG,MAAK;SAEf7B,EAAA;MAAA1E,KAAA;MACIkF,MAAK;MACLK,KAAKC,KAAOtJ,KAAK0B,aAAa4H;MAC9Bb,IAAG;MACHU,UAAUnJ,KAAK4C;MACfuB,UAAUnE,KAAKmE;MACfvD,iBAAiBZ,KAAKY;MACtB0J,SAAS,MAAMtK,KAAK8E;MACpB1B,OAAO4E,EAAI,mCAAmC,EAAChI,KAAKuK;OAEpD/B,EAAA;MAAA1E,KAAA;SAEJ0E,EAAA;MAAA1E,KAAA;MACIuF,KAAKC,KAAOtJ,KAAKwK,yBAAyBlB;MAC1CZ,OAAM;MACNyB,UAAS;MACTC,SAASpK,KAAKE;MACdwJ,WAAW1J,KAAK0D;OAEhB8E,EAAM;MAAA1E,KAAA;MAAAuG,MAAK","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","change","emit","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 &: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 &: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 :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 { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\nimport { IOptionValue } from '../q2-option-list/q2-option-list';\n\n/*\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: IOptionValue[] = [];\n\n /* The color of the element when in the active state. /\n @Prop({ reflect: true })\n theme: 'primary' \| 'secondary' \| 'tertiary';\n\n /* The value emitted when the component is selected. /\n @Prop({ reflect: true, mutable: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the pill is clicked or the selected options change.\n \n When multi-select is enabled, `value` will be `undefined`.\n * @legacyEvent\n /\n @Event()\n change: EventEmitter<{ value: string; values: IOptionValue[]; active: boolean }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n this.mutationObserver = null;\n }\n\n componentWillLoad() {\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true, attributes: true });\n this.mutationObserver = observer;\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n this.syncValueProperties();\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('displayChanged')\n handleSelectedDisplay() {\n if (this.multiple) return;\n this.updateSelectedOptionElements();\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.primaryBtn.focus();\n }\n\n @Listen('popoverStateChanged')\n 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 this.change.emit({ value: null, values: [], active: false });\n this.scheduledAfterRender.push(resizeIframe);\n };\n\n determineOptionCount = async () => {\n if (this.optionList) {\n const allOptions = await this.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 this.change.emit({\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?: IOptionValue[] }) => {\n const { multiple } = this;\n const { value = '', values = [] } = changeDetails;\n const isActive = multiple ? !!values.length : !!value;\n if (!this.hostElement.onchange) {\n if (multiple) {\n this.selectedOptions = values;\n this.value = undefined;\n } else {\n const selectedOption = (await this.getOption(value)) as HTMLQ2OptionElement;\n this.selectedOptions = selectedOption\n ? [{ value: selectedOption.value, display: selectedOption.display }]\n : [];\n this.value = selectedOption?.value \|\| undefined;\n }\n }\n\n this.change.emit({\n value: multiple ? undefined : value,\n values,\n active: isActive,\n });\n };\n\n handleWrapperClick = () => {\n this.primaryBtn.focus();\n this.primaryBtn.click();\n };\n\n onClickElsewhere = (event: CustomEvent) => {\n const target = event.target as HTMLClickElsewhereElement;\n if (target.localName === 'click-elsewhere') {\n event.stopPropagation();\n const { popoverElement } = this;\n if (!popoverElement) return;\n popoverElement.open = false;\n }\n };\n\n onMutationObserved = () => {\n this.updateSlotState();\n this.determineOptionCount();\n this.updateSelectedOptionElements();\n };\n\n 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":[]}

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

@@ -1,6 +1,6 @@
 import { r as t, c as r, h as i, F as a, g as o } from "./index-CGkHOjh1.js";
-import { c as e, o as n, a as s, r as d } from "./index-xCuy-dFb.js";
+import { c as e, o as n, a as s, r as d } from "./index-LNnzUeDP.js";
 const l = '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{--comp-default-radio-group-margin:var(--tct-radio-group-margin-top, var(--t-radio-group-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-radio-group-margin-bottom, var(--t-radio-group-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-radio-group-margin, var(--comp-default-radio-group-margin))}fieldset{padding:var(--tct-radio-group-fieldset-padding, 0);margin:0;border:0;position:relative}.label-row{display:grid;grid-template-columns:1fr 24px;grid-template-areas:"label icon";column-gap:var(--tct-radio-group-label-column-gap, var(--app-scale-2x, 10px));color:var(--tct-radio-group-label-font-color, inherit);font-size:var(--tct-radio-group-label-font-size, inherit);font-weight:var(--tct-radio-group-label-font-weight, 600);text-transform:var(--tct-radio-group-label-text-transform, none);letter-spacing:var(--tct-radio-group-label-letter-spacing, inherit)}.label-row q2-icon{grid-area:icon;margin-top:-2px;margin-bottom:-2px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.optional-tag{margin-left:var(--tct-radio-group-label-optional-margin-left, var(--app-scale-1x, 5px));color:var(--tct-radio-group-label-optional-color, var(--t-radio-group-label-optional-color, var(--tct-a11y-color, var(--t-a11y-color, var(--tct-a11y-gray-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--t-gray-d1, var(--app-gray-d1, rgba(77, 77, 77, 0.77))))))))))));font-size:var(--tct-radio-group-label-optional-font-size, var(--t-radio-group-label-optional-font-size, 12px));font-weight:var(--tct-radio-group-label-optional-font-weight, var(--t-radio-group-label-optional-font-weight, 400))}.tile-container,.tile-container .options-container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;flex-grow:1}.options-container{--comp-default-margin:var(--app-scale-1x, 5px) 0;--comp-options-margin:var(--tct-radio-group-options-margin, var(--t-radio-group-options-margin, var(--comp-default-margin, 5px 0)));margin:var(--comp-options-margin);padding:var(--tct-radio-group-options-padding, var(--t-radio-group-options-padding, var(--app-scale-0x, 0px)));border-width:1px;border-color:transparent;border-style:solid;border-radius:var(--tct-radio-group-border-radius, var(--app-border-radius-1, 4px))}:host([has-error]) .options-container{border-color:var(--tct-radio-group-error-border-color, var(--const-stoplight-alert, #d20a0a))}:host([has-error=false]) .options-container{border-color:transparent}.tile-container.left{justify-content:start}.tile-container.right{justify-content:end}.tile-container .options-container{gap:var(--tct-radio-group-tile-gap, var(--t-radio-group-tile-gap, var(--app-scale-2x, 10px)));justify-content:inherit}';

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

@@ -1,10 +1,10 @@
 import { r as t, c as r, h as e, g as o } from "./index-CGkHOjh1.js";
-import { c as a, e as i, o as c, l } from "./index-xCuy-dFb.js";
+import { c as a, e as i, o as c, l } from "./index-LNnzUeDP.js";
 const n = '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.radio-container{--comp-radio-margin:var(--tct-radio-margin, var(--tct-radio-margin-vertical, var(--tct-scale-2, 10px)) var(--tct-radio-margin-horizontal, var(--tct-scale-3, 15px)));margin:var(--comp-radio-margin)}.radio-container label[for]{color:var(--tct-radio-label-font-color, var(--tct-radio-label-color, inherit));font-weight:var(--tct-radio-font-weight, var(--tct-checkbox-font-weight, 400));align-items:center;cursor:pointer;margin-right:var(--tct-radio-label-margin-right, 1rem);display:grid;grid-template-columns:18px 1fr;gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}.radio-container label[for].label-hidden{grid-template-columns:var(--tct-radio-label-hidden-columns, 18px 1fr)}.radio-container svg{border-radius:50%;transition:box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));outline:0;width:100%;box-shadow:var(--tct-radio-box-shadow, none)}.radio-container circle:nth-child(1){stroke-width:var(--tct-radio-stroke-width, 2);stroke:var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494));fill:var(--tct-radio-background-fill, transparent);transition:fill var(--tct-checkbox-tween, var(--app-tween-2, 0.4s ease))}.radio-container input:checked+label circle:nth-child(1){fill:var(--tct-radio-checked-background-fill, var(--tct-radio-checked-bg, transparent));stroke:var(--tct-radio-checked-stroke-color, var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494)))}.radio-container input:checked+label .label-content{font-weight:var(--tct-radio-checked-label-font-weight, var(--tct-checkbox-selected-font-weight, 600));letter-spacing:var(--tct-radio-checked-label-letter-spacing, var(--tct-checkbox-selected-letter-spacing, 0.25));color:var(--tct-radio-checked-label-font-color, var(--tct-radio-checked-label-color, inherit))}.radio-container input:checked+label circle:nth-child(2){fill:var(--tct-radio-checked-fill, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))}.radio-container input:hover+label circle:nth-child(1){fill:var(--tct-radio-hover-background-fill, transparent);stroke:var(--tct-radio-hover-stroke-color, var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494)))}.radio-container input:hover+label .label-content{color:var(--tct-radio-hover-label-color, inherit)}.radio-container input:focus+label circle:nth-child(1){fill:var(--tct-radio-focus-background-fill, transparent);stroke:var(--tct-radio-focus-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))}.radio-container input:focus+label .label-content{color:var(--tct-radio-focus-label-color, var(--tct-radio-checked-label-color, inherit))}.radio-container input:focus-visible+label svg{box-shadow:var(--tct-radio-focus-box-shadow, --const-double-focus-ring)}.radio-tile{flex-basis:100px;flex-grow:0;flex-wrap:wrap}.radio-tile label[for]{color:var(--tct-radio-label-font-color, var(--tct-radio-label-color, inherit));align-items:center;border-radius:3px;border:2px solid var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494));background:var(--tct-radio-background-fill, transparent);cursor:pointer;display:block;padding:10px;position:relative;text-align:center;transition:border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));white-space:nowrap}.radio-tile input:checked+label{border-color:var(--tct-radio-checked-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e))));box-shadow:inset 0 0 0 2px #ffffff;background:var(--tct-radio-checked-background-fill, transparent);color:var(--tct-radio-checked-label-color, inherit)}.radio-tile input:checked+label:after{border-bottom-width:3px;border-bottom:5px solid var(--tct-radio-checked-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e))));border-left-width:5px;border-left:8px solid transparent;border-right-width:5px;border-right:8px solid transparent;bottom:0;content:"";height:0;left:50%;margin-left:-5px;position:absolute;width:0}.radio-tile input:hover+label{border-color:var(--tct-radio-hover-stroke-color, var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494)));background:var(--tct-radio-hover-background-fill, transparent);color:var(--tct-radio-hover-label-color, var(--tct-radio-label-color, inherit))}.radio-tile input:focus+label,.radio-tile input:focus:checked+label{border-color:var(--tct-radio-focus-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e))));background:var(--tct-radio-focus-background-fill, transparent);box-shadow:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);color:var(--tct-radio-focus-label-color, var(--tct-radio-checked-label-color, inherit))}input:disabled+label[for]{cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))}';
-const d = class {
+const s = class {
   constructor(e) {
     t(this, e);
     this.change = r(this, "change", 7);
@@ -139,8 +139,8 @@ const d = class {
   }
 };
-d.style = n;
+s.style = n;
-export { d as q2_radio };
+export { s as q2_radio };
 //# sourceMappingURL=q2-radio.entry.esm.js.map
 //# sourceMappingURL=q2-radio.entry.js.map

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

@@ -2,7 +2,7 @@ import { r as e, h as t, F as i, g as s } from "./index-CGkHOjh1.js";
 import { d as a } from "./index-O1A-ZSZs.js";
-import { l as n } from "./index-xCuy-dFb.js";
+import { l as n } from "./index-LNnzUeDP.js";
 const r = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline}";
@@ -141,7 +141,7 @@ const o = class {
   render() {
     const {shouldShow: e, displayedMessage: s} = this;
     return t(i, {
-      key: "e1d5750a6b6a3b4ca86c5b4af8c2ecb1975f1c4e"
+      key: "9e4de12f0204aed3785403117927f10d2b1aded8"
     }, e ? t("time", {
       dateTime: s
     }, s) : null);

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

@@ -1,6 +1,6 @@
-import { r as t, c as e, h as i, g as a } from "./index-CGkHOjh1.js";
+import { r as t, c as e, h as i, g as n } from "./index-CGkHOjh1.js";
-import { b as n, o as s, a as r, n as o, l as c } from "./index-xCuy-dFb.js";
+import { b as a, o as s, a as r, n as o, l as c } from "./index-LNnzUeDP.js";
 const d = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;background:var(--tct-section-background, var(--tct-section-background-color, var(--t-section-background-color, var(--tct-section-bg, var(--t-section-bg, var(--app-white, #ffffff))))));color:var(--tct-section-font-color, var(--t-section-font-color, var(--t-text, #4d4d4d)));border-radius:var(--tct-section-border-radius, var(--t-section-border-radius, var(--app-border-radius-1, 4px)));margin:var(--tct-section-margin, var(--t-section-margin, var(--app-scale-3x, 15px)));border-width:var(--tct-section-border-width, 0);border-style:var(--tct-section-border-style, solid);border-color:var(--tct-section-border-color, none)}@media screen and (max-width: 767px){:host{--comp-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-margin, var(--t-section-margin, var(--comp-default-margin)))}}@media print{:host{--comp-default-print-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-print-margin, var(--comp-default-print-margin))}}.wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-1, 0.2s ease)));--comp-default-wrapper-padding:var(--app-scale-1x, 5px) 0;display:block;padding:var(--tct-section-wrapper-padding, var(--t-section-wrapper-padding, var(--comp-default-wrapper-padding)))}.wrapper:hover{box-shadow:var(--tct-section-wrapper-hover-box-shadow, var(--t-section-wrapper-hover-box-shadow, inherit))}:host([collapsible]) .wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-2, 0.4s ease)))}header{--comp-default-header-padding:0 var(--app-scale-3x, 15px);padding:var(--tct-section-header-padding, var(--t-section-header-padding, var(--comp-default-header-padding)));display:flex}@media print{header{padding:var(--tct-section-header-print-padding, 0)}}header.has-header{min-height:var(--tct-section-header-min-height, var(--t-section-header-min-height, 44px))}.header-content{flex:1 1 100%;min-width:0;align-self:center}:host([collapsible]) .header-content{cursor:pointer}.title{margin:var(--tct-section-title-margin, 0);font-size:var(--tct-section-title-font-size, 20px);font-weight:var(--tct-section-title-font-weight, 600);text-transform:var(--tct-section-title-text-transform, none);letter-spacing:var(--tct-section-title-letter-spacing, inherit)}q2-icon{transition:transform var(--comp-tween)}:host(:not([expanded])) q2-icon,:host([expanded=false]) q2-icon{transform:rotate(180deg)}.content-wrapper{height:auto}.content-wrapper.is-closed{display:none;overflow:hidden}.content-wrapper.is-transitioning{overflow:hidden}:host([collapsible]) .content-wrapper{transition:height var(--comp-tween)}.content{--comp-default-content-padding:var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);padding:var(--tct-section-content-padding, var(--t-section-content-padding, var(--comp-default-content-padding)))}@media print{.content{padding:var(--tct-section-content-print-padding, 0)}}.content:focus{box-shadow:none}:host([collapsible]) :host(:not([expanded])) .content{visibility:hidden}";
@@ -14,10 +14,10 @@ const h = class {
     this.hideContent = false;
     this.addContentSlotListener = () => {
       if (this.contentSlot) {
-        this.contentSlot.addEventListener("slotchange", n);
+        this.contentSlot.addEventListener("slotchange", a);
         return;
       }
-      const t = new MutationObserver(n);
+      const t = new MutationObserver(a);
       t.observe(this.contentContainer, {
         childList: true,
         subtree: true
@@ -65,7 +65,7 @@ const h = class {
     this.removeContentSlotListener = () => {
       var t;
       if (this.contentSlot) {
-        this.contentSlot.removeEventListener("slotchange", n);
+        this.contentSlot.removeEventListener("slotchange", a);
         return;
       }
       (t = this.contentSlotMutationObserver) === null || t === void 0 ? void 0 : t.disconnect();
@@ -135,7 +135,7 @@ const h = class {
   }
   async expandedObserver(t) {
     this.clearResizeInterval();
-    this.resizerFn = setInterval(n, 5);
+    this.resizerFn = setInterval(a, 5);
     if (t) {
       this.expandSection();
     } else {
@@ -174,35 +174,35 @@ const h = class {
   render() {
     const t = this.label || this.hasYieldedHeader;
     const e = [ "content-wrapper" ];
-    const {collapsible: a, hideContent: n, contentHeight: s} = this;
-    if (a) {
-      if (n) e.push("is-closed"); else if (s) e.push("is-transitioning");
+    const {collapsible: n, hideContent: a, contentHeight: s} = this;
+    if (n) {
+      if (a) e.push("is-closed"); else if (s) e.push("is-transitioning");
     }
     const r = !this.hasYieldedHeader && !!this.label;
     return i("section", {
-      key: "a452ccc6afa55a60b5a113149b61cff3c2b91d41",
+      key: "75ee3365532a808fddf450d5d77b633ba5356446",
       class: "wrapper"
     }, i("header", {
-      key: "3c1fad3cc6c5a699c630e3a79bf24aac6fab9bd8",
+      key: "5d770cc75a6db249182a3648fa1bdd8807d6a59f",
       class: t ? "has-header" : ""
     }, i("div", {
-      key: "92c40fed762ba25a1773b38256463b1635957124",
+      key: "9e9746b5365c2c84ed1cbc41bfd1a72fa00a31c4",
       class: "header-content",
       id: this.titleId,
       onClick: this.collapsible && this.onHeaderClick
     }, r && i("h2", {
-      key: "4171548d9475cbc26385e92796fce4fe31de7efb",
+      key: "8ac27af413dfb5256798022a4969909c1b765207",
       class: "title"
     }, c(this.label)), i("div", {
-      key: "3e15ee305c36a0e595ec5bad06b8e8e182d00294",
+      key: "66dae1296194b900b31cfab5771fedce650520b3",
       ref: t => this.headerSlotWrapper = t,
       class: "header-slot-wrapper"
     }, i("slot", {
-      key: "4dd77571c2be2a7a59b0953d689bc502446bec57",
+      key: "0f1fd020cec309910a89e89723bfbd334fc0cf69",
       ref: t => this.headerSlot = t,
       name: "q2-section-header"
     }))), this.collapsible && !this.noCollapseIcon && i("q2-btn", {
-      key: "adc0959a31b2cd03fe42ddbed049aa2131828b82",
+      key: "cd94ab34ea64ee4d82d74a3937151d6a815fc8c6",
       label: c(this.label || "tecton.element.section.defaultToggleLabel"),
       ariaExpanded: `${!!this.expanded}`,
       ariaControls: this.contentId,
@@ -210,10 +210,10 @@ const h = class {
       "hide-label": true,
       onClick: this.onHeaderClick
     }, i("q2-icon", {
-      key: "5da2d38afbe4f9b7341905fdc8b8dd0ef1ca8295",
+      key: "14fc44b7680b1bc16e6f60b0ce03e05a7e484e6e",
       type: "chevron-up"
     }))), i("div", {
-      key: "c113434c40a9498b17fa94584895a87a8d0a8457",
+      key: "b3047b05bcafa05c3304887c8817375429f265b8",
       class: e.join(" "),
       id: this.contentId,
       "aria-labelledby": this.titleId,
@@ -223,17 +223,17 @@ const h = class {
         height: this.contentHeight
       }
     }, i("div", {
-      key: "02fe907e426ce7ac692173aa00457e3d819922fb",
+      key: "b78e94b5caba8d5de6a2266d7ac788b2d0058a69",
       ref: t => this.contentContainer = t,
       class: "content",
       tabindex: "-1"
     }, i("slot", {
-      key: "9743cb500ca41269b6434a442c94f9555f0c7d1e",
+      key: "67fa665161cd0680a20e9d2615edc9caebbfa255",
       ref: t => this.contentSlot = t
     }))));
   }
   get hostElement() {
-    return a(this);
+    return n(this);
   }
   static get watchers() {
     return {