npm - q2-tecton-elements - Versions diffs - 1.49.2 → 1.50.1 - Mend

q2-tecton-elements 1.49.2 → 1.50.1

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 (703) hide show

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

	@@ -1 +1 @@
1	- {"file":"q2-pill.entry.js","mappings":"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","names":[],"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.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-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(--comp-btn-background);\n --comp-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-7, #666666)};\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]) & {\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-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-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-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 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 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]) & {\n background: var(--comp-active-btn-background);\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]) & {\n color: var(--comp-active-btn-color);\n }\n\n .has-options &,\n .has-icon & {\n opacity: 1;\n }\n}\n\nq2-icon {\n --t-icon-stroke-primary: currentcolor;\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]) & {\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} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, resizeIframe } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\nimport { IOptionValue } from '../q2-option-list/q2-option-list';\n\n@Component({ tag: 'q2-pill', shadow: true, styleUrl: 'q2-pill.scss' })\nexport class Q2Pill implements ComponentInterface {\n // #region Own Properties\n\n mutationObserver: MutationObserver;\n optionList: HTMLQ2OptionListElement;\n popoverElement: HTMLQ2PopoverElement;\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 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 /* Determine whether the popover is open or closed. /\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 /* @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 * @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.determineOptionCount);\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 Watchers\n\n @Watch('selectedOptions')\n selectedOptionsChanged(newValue) {\n const { multiple } = this;\n const firstValue = newValue?.[0]?.value ?? null;\n if (multiple) {\n if (this.value) this.value = null;\n this.updateSelectedOptionElements();\n } else if (this.value === firstValue) {\n this.updateSelectedOptionElements();\n } else {\n this.value = firstValue;\n }\n }\n\n @Watch('value')\n async valueChanged(newValue) {\n const { multiple, selectedOptions } = this;\n const firstValue = selectedOptions?.[0]?.value ?? null;\n if (multiple) return;\n if (newValue === firstValue) this.updateSelectedOptionElements();\n else {\n const selectedOption = await this.getOption(newValue);\n const { value, display } = selectedOption \|\| { value: newValue, display: null };\n this.selectedOptions = value ? [{ value, display }] : [];\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get buttonContent() {\n const { label, selectedOptions, selectedOptionElements, optionCount } = this;\n\n if (!optionCount \|\| selectedOptionElements.length === 0) return loc(label);\n else if (selectedOptionElements.length === 1) return loc(selectedOptionElements[0].display);\n\n return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });\n }\n\n get truncatedButtonContent() {\n const { maxLength, buttonContent } = this;\n if (maxLength)\n return buttonContent.length > maxLength ? `${buttonContent.substring(0, maxLength)}…` : buttonContent;\n else return buttonContent;\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 = () => {\n const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n this.optionCount = numberOfOptions;\n };\n\n async executeActionSheet(event: MouseEvent \| KeyboardEvent) {\n const result = await showActionSheetList(this, event);\n this.handleSelectionChanges(result);\n }\n\n generateHiddenElement() {\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 generateIcon() {\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 getOption = async (value: string) => {\n if (this.optionList) {\n const options = await this.optionList.getOptions();\n return options.find(option => option.value === value);\n } else {\n return this.hostElement.querySelector<HTMLQ2OptionElement>(`q2-option[value=\"${value}\"]`);\n }\n };\n\n handleButtonFocusout = async (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n if (relatedTarget?.tagName === 'Q2-OPTION') return;\n this.open = false;\n };\n\n handleChange = event => {\n event.stopPropagation();\n if (!this.optionCount) return;\n this.handleSelectionChanges(event.detail);\n };\n\n handleClick = async (event: MouseEvent) => {\n event.stopPropagation();\n if (this.disabled) return;\n if (this.optionCount) {\n if (shouldShowActionSheet(this)) {\n this.executeActionSheet(event);\n } else {\n await this.popoverElement.toggle();\n }\n } else {\n const { value, label } = this;\n const isActive = (this.active = !this.active);\n const values = isActive ? [{ value, display: label }] : [];\n this.selectedOptions = values;\n this.change.emit({\n value,\n values,\n active: isActive,\n });\n }\n };\n\n handleKeydown = async (event: KeyboardEvent) => {\n const isTabMetaOrCtrl = event.metaKey \|\| event.ctrlKey \|\| event.key === 'Tab';\n if (!this.optionCount \|\| this.disabled \|\| isTabMetaOrCtrl) return;\n\n event.preventDefault();\n if (shouldShowActionSheet(this, event)) {\n this.executeActionSheet(event);\n } else {\n this.optionList.handleExternalKeydown(event);\n }\n };\n\n async handleSelectionChanges(changeDetails: { value?: string; values?: IOptionValue[] }) {\n const { multiple } = this;\n const { value = '', values = [] } = changeDetails;\n const isActive = multiple ? !!values.length : !!value;\n if (!this.hostElement.onchange) {\n if (multiple) {\n this.selectedOptions = values;\n this.value = undefined;\n } else {\n const selectedOption = await this.getOption(value);\n this.selectedOptions = selectedOption\n ? [{ value: selectedOption.value, display: selectedOption.display }]\n : [];\n this.value = selectedOption?.value \|\| undefined;\n }\n }\n\n this.change.emit({\n value,\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 syncValueProperties = () => {\n const { value, selectedOptions } = this;\n if (!!selectedOptions?.length) this.selectedOptionsChanged(selectedOptions);\n else if (value) this.valueChanged(value);\n };\n\n updateSelectedOptionElements = async () => {\n const { selectedOptions = [] } = this;\n const selectedValues = selectedOptions.map(option => option.value);\n const options = await this.optionList?.getOptions();\n if (this.optionCount) this.active = !!selectedValues.length;\n this.selectedOptionElements = options?.filter(option => selectedValues.includes(option.value)) \|\| [];\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { optionCount, active, open } = this;\n const wrapperClassNames = ['btn-wrapper'];\n if (optionCount \|\| active) wrapperClassNames.push('has-icon');\n if (optionCount) wrapperClassNames.push('has-options');\n\n return (\n <click-elsewhere onChange={this.onClickElsewhere}>\n <div class={wrapperClassNames.join(' ')}>\n <div\n class=\"btn-height-wrapper\"\n ref={el => (this.primaryBtnWrapper = el)}\n onClick={this.handleWrapperClick}\n tabIndex={-1}\n >\n <button\n class=\"btn-primary\"\n test-id=\"btn-control\"\n type=\"button\"\n role={(optionCount && 'combobox') \|\| undefined}\n ref={el => (this.primaryBtn = el)}\n onClick={this.handleClick}\n onKeyDown={this.handleKeydown}\n onFocusout={this.handleButtonFocusout}\n disabled={this.disabled}\n aria-roledescription={!optionCount && 'filter'}\n aria-controls={(optionCount && 'option-list') \|\| undefined}\n aria-expanded={(optionCount && `${!!open}`) \|\| undefined}\n aria-label={this.buttonContent}\n aria-describedby={(optionCount && 'option-description') \|\| undefined}\n >\n {this.truncatedButtonContent}\n {!optionCount && active && <span class=\"sr\">({loc('tecton.element.pill.active')})</span>}\n </button>\n </div>\n {this.generateIcon()}\n {this.generateHiddenElement()}\n </div>\n {this.optionCount > 0 && (\n <q2-popover\n ref={el => (this.popoverElement = el)}\n controlElement={this.primaryBtn}\n open={this.open}\n minHeight={this.popoverMinHeight}\n direction={this.popoverDirection}\n align={this.popoverAlignment}\n >\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 </q2-popover>\n )}\n </click-elsewhere>\n );\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-pill.entry.js","mappings":"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","names":[],"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.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-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(--comp-btn-background);\n --comp-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-7, #666666)};\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]) & {\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-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-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-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 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 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]) & {\n background: var(--comp-active-btn-background);\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]) & {\n color: var(--comp-active-btn-color);\n }\n\n .has-options &,\n .has-icon & {\n opacity: 1;\n }\n}\n\nq2-icon {\n --t-icon-stroke-primary: currentcolor;\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]) & {\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@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 popoverElement: HTMLQ2PopoverElement;\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 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 /* Determine whether the popover is open or closed. /\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 /* @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.determineOptionCount);\n observer.observe(this.hostElement, { childList: true, attributes: true });\n this.mutationObserver = observer;\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n this.syncValueProperties();\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('displayChanged')\n handleSelectedDisplay() {\n if (this.multiple) return;\n this.updateSelectedOptionElements();\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.primaryBtn.focus();\n }\n\n @Listen('popoverStateChanged')\n popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n if (this.open !== open) this.open = open;\n if (open) return;\n this.optionList.setActiveElement(null);\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Emulates clicking the `<button>` to hide the popover if it is visible.\n \n @testOnly\n /\n @Method()\n async closePopover() {\n if (!this.open \|\| this.disabled) return;\n this._togglePopover();\n }\n\n /\n Emulates clicking the `<button>` to display the popover if it is hidden.\n \n @testOnly\n /\n @Method()\n async openPopover() {\n if (this.open \|\| this.disabled) return;\n this._togglePopover();\n }\n\n /\n Emulates clicking the `<button>` to display the popover and selecting the option(s) with the specified value(s).\n \n If multi-select is enabled and the `closePopover` argument is `true` (default), the popover will be closed\n * after the option(s) are selected.\n \n @testOnly\n */\n @Method()\n async setValue(values: string \| string[], options: { closePopover?: boolean } = { closePopover: true }) {\n const valueSet = new Set(Array.isArray(values) ? values : [values]);\n const allOptions: HTMLQ2OptionElement[] = await this.optionList?.getOptions();\n if (!this.open) {\n await this.openPopover();\n await waitForNextPaint();\n }\n\n valueSet.forEach(value => {\n allOptions.find(option => option.value === value)?.click();\n });\n\n if (options.closePopover) {\n await this.closePopover();\n await waitForNextPaint();\n }\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('selectedOptions')\n selectedOptionsChanged(newValue) {\n const { multiple } = this;\n const firstValue = newValue?.[0]?.value ?? null;\n if (multiple) {\n if (this.value) this.value = null;\n this.updateSelectedOptionElements();\n } else if (this.value === firstValue) {\n this.updateSelectedOptionElements();\n } else {\n this.value = firstValue;\n }\n }\n\n @Watch('value')\n async valueChanged(newValue) {\n const { multiple, selectedOptions } = this;\n if (multiple) return;\n const firstValue = selectedOptions?.[0]?.value ?? null;\n if (newValue === firstValue) this.updateSelectedOptionElements();\n else {\n const selectedOption = await this.getOption(newValue);\n const { value, display } = selectedOption \|\| { value: newValue, display: null };\n this.selectedOptions = value ? [{ value, display }] : [];\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get buttonContent() {\n const { label, selectedOptions, selectedOptionElements, optionCount } = this;\n\n if (!optionCount \|\| selectedOptionElements.length === 0) return loc(label);\n else if (selectedOptionElements.length === 1) return loc(selectedOptionElements[0].display);\n\n return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });\n }\n\n get truncatedButtonContent() {\n const { maxLength, buttonContent } = this;\n if (maxLength)\n return buttonContent.length > maxLength ? `${buttonContent.substring(0, maxLength)}…` : buttonContent;\n else return buttonContent;\n }\n\n _togglePopover() {\n const { primaryBtn } = this;\n primaryBtn?.click();\n primaryBtn?.focus();\n primaryBtn.dispatchEvent(new FocusEvent('focus'));\n }\n\n clearSelectedOptions = () => {\n this.selectedOptions = [];\n this.value = null;\n this.active = false;\n this.open = false;\n this.primaryBtn.focus();\n this.change.emit({ value: null, values: [], active: false });\n this.scheduledAfterRender.push(resizeIframe);\n };\n\n determineOptionCount = async () => {\n if (this.optionList) {\n const allOptions = await this.optionList.getOptions();\n this.optionCount = allOptions.length;\n } else {\n const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n this.optionCount = numberOfOptions;\n }\n };\n\n executeActionSheet = async (event: MouseEvent \| KeyboardEvent) => {\n const result = await showActionSheetList(this, event);\n this.handleSelectionChanges(result);\n };\n\n getOption = async (value: string) => {\n if (this.optionList) {\n const options = await this.optionList.getOptions();\n return options.find(option => option.value === value);\n } else {\n return this.hostElement.querySelector<HTMLQ2OptionElement>(`q2-option[value=\"${value}\"]`);\n }\n };\n\n handleButtonFocusout = async (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n if (relatedTarget?.tagName === 'Q2-OPTION') return;\n this.open = false;\n };\n\n handleChange = event => {\n event.stopPropagation();\n if (!this.optionCount) return;\n this.handleSelectionChanges(event.detail);\n };\n\n handleClick = async (event: MouseEvent) => {\n event.stopPropagation();\n if (this.disabled) return;\n if (this.optionCount) {\n if (shouldShowActionSheet(this)) {\n this.executeActionSheet(event);\n } else {\n await this.popoverElement.toggle();\n }\n } else {\n const { value, label } = this;\n const isActive = (this.active = !this.active);\n const values = isActive ? [{ value, display: label }] : [];\n this.selectedOptions = values;\n this.change.emit({\n value,\n values,\n active: isActive,\n });\n }\n };\n\n handleKeydown = async (event: KeyboardEvent) => {\n const isTabMetaOrCtrl = event.metaKey \|\| event.ctrlKey \|\| event.key === 'Tab';\n if (!this.optionCount \|\| this.disabled \|\| isTabMetaOrCtrl) return;\n\n event.preventDefault();\n if (shouldShowActionSheet(this, event)) {\n this.executeActionSheet(event);\n } else {\n this.optionList.handleExternalKeydown(event);\n }\n };\n\n handleSelectionChanges = async (changeDetails: { value?: string; values?: IOptionValue[] }) => {\n const { multiple } = this;\n const { value = '', values = [] } = changeDetails;\n const isActive = multiple ? !!values.length : !!value;\n if (!this.hostElement.onchange) {\n if (multiple) {\n this.selectedOptions = values;\n this.value = undefined;\n } else {\n const selectedOption = await this.getOption(value);\n this.selectedOptions = selectedOption\n ? [{ value: selectedOption.value, display: selectedOption.display }]\n : [];\n this.value = selectedOption?.value \|\| undefined;\n }\n }\n\n this.change.emit({\n value: multiple ? undefined : value,\n values,\n active: isActive,\n });\n };\n\n handleWrapperClick = () => {\n this.primaryBtn.focus();\n this.primaryBtn.click();\n };\n\n onClickElsewhere = (event: CustomEvent) => {\n const target = event.target as HTMLClickElsewhereElement;\n if (target.localName === 'click-elsewhere') {\n event.stopPropagation();\n const { popoverElement } = this;\n if (!popoverElement) return;\n popoverElement.open = false;\n }\n };\n\n syncValueProperties = () => {\n const { value, selectedOptions } = this;\n if (!!selectedOptions?.length) this.selectedOptionsChanged(selectedOptions);\n else if (value) this.valueChanged(value);\n };\n\n updateSelectedOptionElements = async () => {\n const { selectedOptions = [] } = this;\n const selectedValues = selectedOptions.map(option => option.value);\n const options = await this.optionList?.getOptions();\n if (this.optionCount) this.active = !!selectedValues.length;\n this.selectedOptionElements = options?.filter(option => selectedValues.includes(option.value)) \|\| [];\n };\n\n // #endregion\n // #region Render Methods\n\n renderHiddenElement() {\n return (\n <div\n id=\"option-description\"\n class=\"sr\"\n aria-hidden=\"true\"\n >\n {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n </div>\n );\n }\n\n renderIcon() {\n const { optionCount, active } = this;\n const isButton = optionCount && active;\n const TagName = isButton ? 'button' : 'div';\n const iconName = isButton \|\| !optionCount ? 'close' : 'chevron-down';\n\n return (\n <TagName\n class=\"btn-close\"\n onClick={(isButton && this.clearSelectedOptions) \|\| undefined}\n disabled={(isButton && this.disabled) \|\| undefined}\n aria-label={(isButton && loc('tecton.element.pill.clearSelection')) \|\| undefined}\n type={(isButton && 'button') \|\| undefined}\n >\n <q2-icon type={iconName}></q2-icon>\n </TagName>\n );\n }\n\n render() {\n const { optionCount, active, open } = this;\n const wrapperClassNames = ['btn-wrapper'];\n if (optionCount \|\| active) wrapperClassNames.push('has-icon');\n if (optionCount) wrapperClassNames.push('has-options');\n\n return (\n <click-elsewhere onChange={this.onClickElsewhere}>\n <div class={wrapperClassNames.join(' ')}>\n <div\n class=\"btn-height-wrapper\"\n ref={el => (this.primaryBtnWrapper = el)}\n onClick={this.handleWrapperClick}\n tabIndex={-1}\n >\n <button\n class=\"btn-primary\"\n test-id=\"btn-control\"\n type=\"button\"\n role={(optionCount && 'combobox') \|\| undefined}\n ref={el => (this.primaryBtn = el)}\n onClick={this.handleClick}\n onKeyDown={this.handleKeydown}\n onFocusout={this.handleButtonFocusout}\n disabled={this.disabled}\n aria-roledescription={!optionCount && 'filter'}\n aria-controls={(optionCount && 'option-list') \|\| undefined}\n aria-expanded={(optionCount && `${!!open}`) \|\| undefined}\n aria-label={this.buttonContent}\n aria-describedby={(optionCount && 'option-description') \|\| undefined}\n >\n {this.truncatedButtonContent}\n {!optionCount && active && <span class=\"sr\">({loc('tecton.element.pill.active')})</span>}\n </button>\n </div>\n {this.renderIcon()}\n {!!optionCount && this.renderHiddenElement()}\n </div>\n {this.optionCount > 0 && (\n <q2-popover\n ref={el => (this.popoverElement = el)}\n controlElement={this.primaryBtn}\n open={this.open}\n minHeight={this.popoverMinHeight}\n direction={this.popoverDirection}\n align={this.popoverAlignment}\n >\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 </q2-popover>\n )}\n </click-elsewhere>\n );\n }\n\n // #endregion\n}\n"],"version":3}

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-1e1ce94e.js';
-import { c as createGuid, o as overrideFocus, i as isEventFromElement, e as labelDOM } from './index-3c5cd75e.js';
+import { c as createGuid, o as overrideFocus, i as isEventFromElement, f as labelDOM } from './index-4a80972c.js';
 const q2RadioGroupCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{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{margin-top:var(--tct-scale-2, var(--app-scale-2x, 10px))}fieldset{padding:0;margin:0;border:0;position:relative}.label-row{display:grid;grid-template-columns:1fr 24px;grid-template-areas:\"label icon\";gap:var(--app-scale-1x, 5px)}.label-row q2-icon{grid-area:icon;margin-top:-2px;margin-bottom:-2px}.group-legend{font-weight:600}.optional-tag{margin-left:var(--tct-input-label-optional-margin-left, var(--t-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px))));color:var(--tct-input-label-optional-font-color, var(--t-input-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-input-label-optional-font-size, var(--t-input-label-optional-font-size, 12px));font-weight:var(--tct-input-label-optional-font-weight, var(--t-input-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-1x, 5px)));border-width:1px;border-color:transparent;border-style:solid;border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 4px))}:host([has-error]) .options-container{border-color:var(--tct-input-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}";
 const Q2RadioGroupStyle0 = q2RadioGroupCss;
@@ -180,7 +180,7 @@ const Q2RadioGroup = class {
         const showLabel = this.label || this.optional || this.readonly;
         const { hasError } = this;
         const showLabelRow = showLabel || hasError;
-        return (h(Fragment, { key: '391daee73ed99703223e6d72ea8109cdb0f3a728' }, showLabelRow && (h("div", { key: '7e9b358ff98e87551783c7ccfeb789a27c9282cc', class: "label-row" }, showLabel && h("div", { key: '198215d1006af99957bd108540f58b36162c102a', class: "group-legend" }, labelDOM(this)), hasError && (h("q2-icon", { key: 'bb6e82ecc48c28eb6efae09d8f8cd03f1a4bc957', type: "error", "test-id": "iconError" })))), h("fieldset", { key: 'fe4e72b6c8cbd827909f4b6caa47e96699f29163', onChange: this.onInnerRadioChange, "aria-invalid": `${this.hasError}` }, showLabel && h("legend", { key: '963d3f6d55511c5cf5ca99218addaaa12a34f505', class: "sr" }, labelDOM(this)), this.inputDom())));
+        return (h(Fragment, { key: '3536f41532e1cc18001e2e1d8f8f4c9e8223dd67' }, showLabelRow && (h("div", { key: '4ec07666943cb4b0a25ad2dd70fdc26b072affb0', class: "label-row" }, showLabel && h("div", { key: '0442988f9575a44d0d0de1e7885be9239e06ba64', class: "group-legend" }, labelDOM(this)), hasError && (h("q2-icon", { key: 'e455ee3337a5e401c5a4a4a9f8276bff189b26f2', type: "error", "test-id": "iconError" })))), h("fieldset", { key: '2f849878d217decc154d9d04fa8182b3d1b1d79a', onChange: this.onInnerRadioChange, "aria-invalid": `${this.hasError}` }, showLabel && h("legend", { key: '95e7c2f3fcb370048801b4f6be953047011a83f2', class: "sr" }, labelDOM(this)), this.inputDom())));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/q2-radio.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-1e1ce94e.js';
-import { c as createGuid, h as handleAriaLabel, o as overrideFocus, l as loc } from './index-3c5cd75e.js';
+import { c as createGuid, a as handleAriaLabel, o as overrideFocus, l as loc } from './index-4a80972c.js';
 const q2RadioCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{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-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%}.radio-container circle:nth-child(1){stroke-width:2;stroke:var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494));fill:var(--tct-radio-background-fill, transparent)}.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 svg{box-shadow:var(--const-double-focus-ring)}.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-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 Q2RadioStyle0 = q2RadioCss;
@@ -81,7 +81,7 @@ const Q2Radio = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '210cc7331f317028a89673653eef957e002bccfc', class: this.groupTileLayout ? 'radio-tile' : 'radio-container' }, h("input", { key: '2323fefb73a45336442e51e02e07cc20d8ff7237', ref: el => (this.inputField = el), class: "sr", id: this._id, type: "radio", name: this.name, value: this.value, disabled: this.disabled || this.groupDisabled, checked: this.checked, "aria-label": this.label && this.hideLabel ? loc(this.label) : undefined, onChange: this.inputChange, "test-id": "q2RadioInnerRadioBox" }), h("label", { key: 'a79888b871fcbcd8234779f508edbdfbb8a6d778', htmlFor: this._id, class: this.hideLabel ? 'label-hidden' : undefined, "test-id": "radioButton" }, !this.groupTileLayout && (h("svg", { key: 'a7268ee6225beeeea0cb719d7c6d2feca48614de', viewBox: "0 0 18 18" }, h("circle", { key: '41c33face1190dc510c7f9f2f53fe1796a918188', stroke: "none", fill: "none", cx: "9", cy: "9", r: "8" }), h("circle", { key: '947c9fbc47945c59678d9fa08c042d9e47a56a51', stroke: "none", fill: "none", cx: "9", cy: "9", r: "4" }))), !this.hideLabel && (h("div", { key: '46654e6f4ff3596983f1e20b8a501bedf882bcec', class: "label-content" }, (this.label && loc(this.label)) || '', h("slot", { key: 'aef00a9fc70c904d4d09561c430c3df65fc36121' }))))));
+        return (h("div", { key: '2eb548fb623e624b5304c321f4b57c1a48eaa4b0', class: this.groupTileLayout ? 'radio-tile' : 'radio-container' }, h("input", { key: '42eb98daad18d1aca54e84e5ed9647be6dbd7fca', ref: el => (this.inputField = el), class: "sr", id: this._id, type: "radio", name: this.name, value: this.value, disabled: this.disabled || this.groupDisabled, checked: this.checked, "aria-label": this.label && this.hideLabel ? loc(this.label) : undefined, onChange: this.inputChange, "test-id": "q2RadioInnerRadioBox" }), h("label", { key: '5f063d1a3b5a4494f1e471eda96844368d9c5c59', htmlFor: this._id, class: this.hideLabel ? 'label-hidden' : undefined, "test-id": "radioButton" }, !this.groupTileLayout && (h("svg", { key: 'aa0a30ecc9ed0b539c28b24f8ff5467fe158ff1c', viewBox: "0 0 18 18" }, h("circle", { key: '413e5556dbb780820bd91da40bed8bde37998e45', stroke: "none", fill: "none", cx: "9", cy: "9", r: "8" }), h("circle", { key: '6b27c265867df2752d63aa2f3f91266460328e70', stroke: "none", fill: "none", cx: "9", cy: "9", r: "4" }))), !this.hideLabel && (h("div", { key: '6dc3398a42d68bad7f064743bc53e45f24ba2b6e', class: "label-content" }, (this.label && loc(this.label)) || '', h("slot", { key: '9c259a28aeb1b056aca638df99a3c9e2524b04e1' }))))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, F as Fragment, g as getElement } from './index-1e1ce94e.js';
-import { d as dateFns } from './index-1c019b24.js';
-import { l as loc } from './index-3c5cd75e.js';
+import { d as dateFns } from './index-c6d74f10.js';
+import { l as loc } from './index-4a80972c.js';
 const q2RelativeTimeCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{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}";
 const Q2RelativeTimeStyle0 = q2RelativeTimeCss;
@@ -141,7 +141,7 @@ const Q2RelativeTime = class {
     // #region Render Methods
     render() {
         const { shouldShow, displayedMessage } = this;
-        return h(Fragment, { key: '26038fa24d32109482710ec28cb689e1db340abd' }, shouldShow ? h("time", { dateTime: displayedMessage }, displayedMessage) : null);
+        return h(Fragment, { key: 'bec57e7e2ad096c2493a0ff26e6bf223e2080641' }, shouldShow ? h("time", { dateTime: displayedMessage }, displayedMessage) : null);
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/q2-section.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-1e1ce94e.js';
-import { r as resizeIframe, o as overrideFocus, i as isEventFromElement, n as nextPaint, l as loc } from './index-3c5cd75e.js';
+import { r as resizeIframe, o as overrideFocus, i as isEventFromElement, n as nextPaint, l as loc } from './index-4a80972c.js';
-const q2SectionCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{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, uppercase);letter-spacing:var(--tct-section-title-letter-spacing, 0.5px)}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}";
+const q2SectionCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{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, 0.5px)}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}";
 const Q2SectionStyle0 = q2SectionCss;
 const Q2Section = class {
@@ -164,9 +164,9 @@ const Q2Section = class {
                 wrapperClasses.push('is-transitioning');
         }
         const showDefaultHeader = !this.hasYieldedHeader && !!this.label;
-        return (h("section", { key: '550b55c43f6a037c30df83d5bdd3c5f6c18b548a', class: "wrapper" }, h("header", { key: '74a281cd6434a7e33d32ed35d46752d313b7e226', class: hasHeader ? 'has-header' : '' }, h("div", { key: 'bccad40c23075adf4d25eedfb6acc733a3a8f57e', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: '0b7c240a0b9cc245d2d8426092c805146f15b553', class: "title" }, loc(this.label)), h("div", { key: '2aacff31aadee0770129b767d3aed1f43fc626de', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: '3317e6865bc814005f03ea7dd0b431885739f5d1', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: '1462f06ccc824c1db7439e015a887763d323620d', label: loc(this.label || 'tecton.element.section.defaultToggleLabel'), ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, h("q2-icon", { key: '21efcebc32fc92ee1912532552f8efa8fc1552eb', type: "chevron-up" })))), h("div", { key: '6a6de47b233079f00743e6a23fd25dc66acce2c2', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
+        return (h("section", { key: 'f7969997a0aaea2c5f883156428626bde982d6f2', class: "wrapper" }, h("header", { key: '1dca67129a19b4ab1f13e96ad4069f51e66aa744', class: hasHeader ? 'has-header' : '' }, h("div", { key: 'ed9c5f0a351cfe2afe39b26de41816ad7842a5c0', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: '2d3081f31e0cbe7255c9eab2ca03fc0de8aecb9f', class: "title" }, loc(this.label)), h("div", { key: '4bda5e123c97f10bee569b96ead7585ce4910c0e', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: 'fa1cf27e2c5a6d05f47887a3b40adf8d1f6b6fbd', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: 'dc9ce02e335aed9c06cb4eac6a2d4e15212bc95e', label: loc(this.label || 'tecton.element.section.defaultToggleLabel'), ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, h("q2-icon", { key: '377521b837fce45914a003d768862871dfb89bdb', type: "chevron-up" })))), h("div", { key: 'cae742942789c59d37466d3767b4ec4b3da2c138', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
                 height: this.contentHeight,
-            } }, h("div", { key: '8d70829cef7eb0f671779ce89ecab354bb33a028', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: '88e723ba02fecd1c3845c9956c9e2b1769623d7a', ref: (el) => (this.contentSlot = el) })))));
+            } }, h("div", { key: '43f57ee880d454ecfef29f92177946350da7eec4', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: 'f13ca46b06dcdb43e1c307add290f7bb16065365', ref: (el) => (this.contentSlot = el) })))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/q2-section.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-section.entry.js","mappings":"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","names":[],"sources":["src/components/q2-section/q2-section.scss?tag=q2-section&encapsulation=shadow","src/components/q2-section/q2-section.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions.scss';\n\n:host {\n display: block;\n background: var-list(\n --tct-section-background,\n var-prefixer(section-background-color),\n var-prefixer(section-bg),\n --app-white,\n #ffffff\n );\n color: var-list(var-prefixer(section-font-color), --t-text, #4d4d4d);\n border-radius: var-list(var-prefixer(section-border-radius), --app-border-radius-1, 4px);\n margin: var-list(var-prefixer(section-margin), --app-scale-3x, 15px);\n border-width: var-list(--tct-section-border-width, 0);\n border-style: var-list(--tct-section-border-style, solid);\n border-color: var-list(--tct-section-border-color, none);\n\n @media screen and (max-width: 767px) {\n --comp-default-margin: var(--app-scale-3x, 15px) 0;\n margin: var-list(var-prefixer(section-margin), --comp-default-margin);\n }\n\n @media print {\n --comp-default-print-margin: var(--app-scale-3x, 15px) 0;\n margin: var-list(--tct-section-print-margin, --comp-default-print-margin);\n }\n}\n\n.wrapper {\n --comp-tween: #{var-list(var-prefixer(section-tween), --app-tween-1, unquote('0.2s ease'))};\n --comp-default-wrapper-padding: var(--app-scale-1x, 5px) 0;\n display: block;\n padding: var-list(var-prefixer(section-wrapper-padding), --comp-default-wrapper-padding);\n\n &:hover {\n box-shadow: var-list(var-prefixer(section-wrapper-hover-box-shadow), inherit);\n }\n\n :host([collapsible]) & {\n --comp-tween: #{var-list(var-prefixer(section-tween), --app-tween-2, unquote('0.4s ease'))};\n }\n}\n\nheader {\n --comp-default-header-padding: 0 var(--app-scale-3x, 15px);\n padding: var-list(var-prefixer(section-header-padding), --comp-default-header-padding);\n display: flex;\n\n @media print {\n padding: var-list(--tct-section-header-print-padding, 0);\n }\n\n &.has-header {\n min-height: var-list(var-prefixer(section-header-min-height), 44px);\n }\n}\n\n.header-content {\n flex: 1 1 100%;\n min-width: 0;\n align-self: center;\n\n :host([collapsible]) & {\n cursor: pointer;\n }\n}\n\n.title {\n margin: var-list(--tct-section-title-margin, 0);\n font-size: var-list(--tct-section-title-font-size, 20px);\n font-weight: var-list(--tct-section-title-font-weight, 600);\n text-transform: var-list(--tct-section-title-text-transform, uppercase);\n letter-spacing: var-list(--tct-section-title-letter-spacing, 0.5px);\n}\n\nq2-icon {\n transition: transform var(--comp-tween);\n\n :host(:not([expanded])) &,\n :host([expanded='false']) & {\n transform: rotate(180deg);\n }\n}\n\n.content-wrapper {\n height: auto;\n\n &.is-closed {\n display: none;\n overflow: hidden;\n }\n\n &.is-transitioning {\n overflow: hidden;\n }\n\n :host([collapsible]) & {\n transition: height var(--comp-tween);\n }\n}\n\n.content {\n --comp-default-content-padding: var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);\n padding: var-list(var-prefixer(section-content-padding), --comp-default-content-padding);\n\n @media print {\n padding: var-list(--tct-section-content-print-padding, 0);\n }\n\n &:focus {\n box-shadow: none;\n }\n\n :host([collapsible]) :host(:not([expanded])) & {\n visibility: hidden;\n }\n}\n","import {\n Component,\n ComponentInterface,\n Prop,\n Element,\n Listen,\n State,\n Watch,\n h,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport { isEventFromElement, loc, nextPaint, overrideFocus, resizeIframe } from 'src/utils';\n\n@Component({ tag: 'q2-section', shadow: true, styleUrl: 'q2-section.scss' })\nexport class Q2Section implements ComponentInterface {\n // #region Own Properties\n\n contentContainer: HTMLDivElement;\n contentId: string = 'content';\n contentSlot: HTMLSlotElement;\n contentSlotMutationObserver: MutationObserver;\n headerSlot: HTMLSlotElement;\n headerSlotMutationObserver: MutationObserver;\n headerSlotWrapper: HTMLDivElement;\n resizerFn: NodeJS.Timeout \| undefined;\n titleId: string = 'title';\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 contentHeight: string;\n\n @State()\n hasYieldedHeader: boolean = false;\n\n @State()\n hideContent: boolean = false;\n\n // #endregion\n // #region Public Property API\n\n /** Determines if the section is collapsible. /\n @Prop({ reflect: true })\n collapsible: boolean;\n\n /* Indicates if the `q2-section` is in an expanded state or not. /\n @Prop({ reflect: true, mutable: true })\n expanded: boolean;\n\n /\n The text to display above the `q2-section`. Renders as an `<h2>` element.\n \n It is also used to provided an `aria-label` for the toggle button when the component is collapsible.\n \n @warning\n * If you are providing a custom header, setting this property is still strongly encouraged for the purposes of\n * accessibility.\n /\n @Prop({ reflect: true })\n label: string;\n\n /* Determines if the collapse chevron icon should show in the `q2-section` header. /\n @Prop({ reflect: true })\n noCollapseIcon: boolean;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the section is expanded or collapsed.\n * @legacyEvent\n */\n @Event()\n change: EventEmitter<{ expanded: boolean }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.removeHeaderSlotListener();\n this.removeContentSlotListener();\n }\n\n componentWillLoad() {\n this.onHeaderSlotChange();\n const { collapsible, expanded } = this;\n this.contentHeight = collapsible && expanded ? undefined : '0px';\n this.hideContent = !expanded;\n }\n\n componentDidLoad() {\n this.addHeaderSlotListener();\n this.addContentSlotListener();\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n defaultChangeHandler(event: CustomEvent) {\n if (event.target === this.hostElement && !this.hostElement.onchange && !!event.detail) {\n this.expanded = event.detail.expanded;\n }\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.contentContainer.focus();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('collapsible')\n collapsibleObserver() {\n this.contentHeight = this.currentHeight;\n }\n\n @Watch('expanded')\n async expandedObserver(expanded: boolean) {\n this.clearResizeInterval();\n this.resizerFn = setInterval(resizeIframe, 5);\n\n if (expanded) {\n this.expandSection();\n } else {\n this.collapseSection();\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get contentContainerHeight() {\n return `${this.contentContainer.offsetHeight \|\| 0}px`;\n }\n\n get currentHeight() {\n const { collapsible, expanded } = this;\n if (!collapsible) {\n return null;\n } else if (expanded) {\n return this.contentContainerHeight;\n } else {\n return '0';\n }\n }\n\n addContentSlotListener = () => {\n if (this.contentSlot) {\n this.contentSlot.addEventListener('slotchange', resizeIframe);\n return;\n }\n\n const observer = new MutationObserver(resizeIframe);\n observer.observe(this.contentContainer, { childList: true, subtree: true });\n this.contentSlotMutationObserver = observer;\n };\n\n addHeaderSlotListener = () => {\n if (this.headerSlot) {\n this.headerSlot.addEventListener('slotchange', this.onHeaderSlotChange);\n return;\n }\n\n const observer = new MutationObserver(this.onHeaderSlotChange);\n observer.observe(this.headerSlotWrapper, { childList: true });\n this.headerSlotMutationObserver = observer;\n };\n\n clearResizeInterval = () => {\n this.resizerFn && clearInterval(this.resizerFn);\n };\n\n async collapseSection() {\n this.contentHeight = this.contentContainerHeight;\n await nextPaint(() => {\n this.contentHeight = this.currentHeight;\n });\n }\n\n async expandSection() {\n this.hideContent = false;\n await nextPaint(() => {\n this.contentHeight = this.currentHeight;\n });\n }\n\n onHeaderClick = () => {\n this.change.emit({\n expanded: !this.expanded,\n });\n };\n\n onHeaderSlotChange = () => {\n const hasSlotContent = !!this.hostElement.querySelector('[slot=\"q2-section-header\"]');\n\n if (this.hasYieldedHeader !== hasSlotContent) {\n this.hasYieldedHeader = !!hasSlotContent;\n }\n };\n\n onTransitionEnd = () => {\n if (this.expanded) {\n this.contentHeight = undefined;\n } else {\n this.hideContent = true;\n }\n\n setTimeout(() => {\n // This gives enough time for all values to get passed over\n // Previously, the interval was never cleared and the fn was called indefinitely then filtered\n // Will revisit in TCT-599\n this.clearResizeInterval();\n }, 1000);\n };\n\n removeContentSlotListener = () => {\n if (this.contentSlot) {\n this.contentSlot.removeEventListener('slotchange', resizeIframe);\n return;\n }\n this.contentSlotMutationObserver.disconnect();\n };\n\n removeHeaderSlotListener = () => {\n if (this.headerSlot) {\n this.headerSlot.removeEventListener('slotchange', this.onHeaderSlotChange);\n return;\n }\n\n this.headerSlotMutationObserver.disconnect();\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n const hasHeader = this.label \|\| this.hasYieldedHeader;\n const wrapperClasses = ['content-wrapper'];\n const { collapsible, hideContent, contentHeight } = this;\n if (collapsible) {\n if (hideContent) wrapperClasses.push('is-closed');\n else if (contentHeight) wrapperClasses.push('is-transitioning');\n }\n\n const showDefaultHeader = !this.hasYieldedHeader && !!this.label;\n\n return (\n <section class=\"wrapper\">\n <header class={hasHeader ? 'has-header' : ''}>\n <div\n class=\"header-content\"\n id={this.titleId}\n onClick={this.collapsible && this.onHeaderClick}\n >\n {showDefaultHeader && <h2 class=\"title\">{loc(this.label)}</h2>}\n <div\n ref={el => (this.headerSlotWrapper = el)}\n class=\"header-slot-wrapper\"\n >\n <slot\n ref={(el: HTMLSlotElement) => (this.headerSlot = el)}\n name=\"q2-section-header\"\n />\n </div>\n </div>\n {this.collapsible && !this.noCollapseIcon && (\n <q2-btn\n label={loc(this.label \|\| 'tecton.element.section.defaultToggleLabel')}\n ariaExpanded={`${!!this.expanded}`}\n ariaControls={this.contentId}\n test-id=\"toggleButton\"\n hide-label\n onClick={this.onHeaderClick}\n >\n <q2-icon type=\"chevron-up\" />\n </q2-btn>\n )}\n </header>\n <div\n class={wrapperClasses.join(' ')}\n id={this.contentId}\n aria-labelledby={this.titleId}\n role=\"region\"\n onTransitionEnd={this.onTransitionEnd}\n style={\n this.collapsible && {\n height: this.contentHeight,\n }\n }\n >\n <div\n ref={el => (this.contentContainer = el)}\n class=\"content\"\n tabindex=\"-1\"\n >\n <slot ref={(el: HTMLSlotElement) => (this.contentSlot = el)} />\n </div>\n </div>\n </section>\n );\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-section.entry.js","mappings":"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","names":[],"sources":["src/components/q2-section/q2-section.scss?tag=q2-section&encapsulation=shadow","src/components/q2-section/q2-section.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions.scss';\n\n:host {\n display: block;\n background: var-list(\n --tct-section-background,\n var-prefixer(section-background-color),\n var-prefixer(section-bg),\n --app-white,\n #ffffff\n );\n color: var-list(var-prefixer(section-font-color), --t-text, #4d4d4d);\n border-radius: var-list(var-prefixer(section-border-radius), --app-border-radius-1, 4px);\n margin: var-list(var-prefixer(section-margin), --app-scale-3x, 15px);\n border-width: var-list(--tct-section-border-width, 0);\n border-style: var-list(--tct-section-border-style, solid);\n border-color: var-list(--tct-section-border-color, none);\n\n @media screen and (max-width: 767px) {\n --comp-default-margin: var(--app-scale-3x, 15px) 0;\n margin: var-list(var-prefixer(section-margin), --comp-default-margin);\n }\n\n @media print {\n --comp-default-print-margin: var(--app-scale-3x, 15px) 0;\n margin: var-list(--tct-section-print-margin, --comp-default-print-margin);\n }\n}\n\n.wrapper {\n --comp-tween: #{var-list(var-prefixer(section-tween), --app-tween-1, unquote('0.2s ease'))};\n --comp-default-wrapper-padding: var(--app-scale-1x, 5px) 0;\n display: block;\n padding: var-list(var-prefixer(section-wrapper-padding), --comp-default-wrapper-padding);\n\n &:hover {\n box-shadow: var-list(var-prefixer(section-wrapper-hover-box-shadow), inherit);\n }\n\n :host([collapsible]) & {\n --comp-tween: #{var-list(var-prefixer(section-tween), --app-tween-2, unquote('0.4s ease'))};\n }\n}\n\nheader {\n --comp-default-header-padding: 0 var(--app-scale-3x, 15px);\n padding: var-list(var-prefixer(section-header-padding), --comp-default-header-padding);\n display: flex;\n\n @media print {\n padding: var-list(--tct-section-header-print-padding, 0);\n }\n\n &.has-header {\n min-height: var-list(var-prefixer(section-header-min-height), 44px);\n }\n}\n\n.header-content {\n flex: 1 1 100%;\n min-width: 0;\n align-self: center;\n\n :host([collapsible]) & {\n cursor: pointer;\n }\n}\n\n.title {\n margin: var-list(--tct-section-title-margin, 0);\n font-size: var-list(--tct-section-title-font-size, 20px);\n font-weight: var-list(--tct-section-title-font-weight, 600);\n text-transform: var-list(--tct-section-title-text-transform, none);\n letter-spacing: var-list(--tct-section-title-letter-spacing, 0.5px);\n}\n\nq2-icon {\n transition: transform var(--comp-tween);\n\n :host(:not([expanded])) &,\n :host([expanded='false']) & {\n transform: rotate(180deg);\n }\n}\n\n.content-wrapper {\n height: auto;\n\n &.is-closed {\n display: none;\n overflow: hidden;\n }\n\n &.is-transitioning {\n overflow: hidden;\n }\n\n :host([collapsible]) & {\n transition: height var(--comp-tween);\n }\n}\n\n.content {\n --comp-default-content-padding: var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);\n padding: var-list(var-prefixer(section-content-padding), --comp-default-content-padding);\n\n @media print {\n padding: var-list(--tct-section-content-print-padding, 0);\n }\n\n &:focus {\n box-shadow: none;\n }\n\n :host([collapsible]) :host(:not([expanded])) & {\n visibility: hidden;\n }\n}\n","import {\n Component,\n ComponentInterface,\n Prop,\n Element,\n Listen,\n State,\n Watch,\n h,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport { isEventFromElement, loc, nextPaint, overrideFocus, resizeIframe } from 'src/utils';\n\n@Component({ tag: 'q2-section', shadow: true, styleUrl: 'q2-section.scss' })\nexport class Q2Section implements ComponentInterface {\n // #region Own Properties\n\n contentContainer: HTMLDivElement;\n contentId: string = 'content';\n contentSlot: HTMLSlotElement;\n contentSlotMutationObserver: MutationObserver;\n headerSlot: HTMLSlotElement;\n headerSlotMutationObserver: MutationObserver;\n headerSlotWrapper: HTMLDivElement;\n resizerFn: NodeJS.Timeout \| undefined;\n titleId: string = 'title';\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 contentHeight: string;\n\n @State()\n hasYieldedHeader: boolean = false;\n\n @State()\n hideContent: boolean = false;\n\n // #endregion\n // #region Public Property API\n\n /** Determines if the section is collapsible. /\n @Prop({ reflect: true })\n collapsible: boolean;\n\n /* Indicates if the `q2-section` is in an expanded state or not. /\n @Prop({ reflect: true, mutable: true })\n expanded: boolean;\n\n /\n The text to display above the `q2-section`. Renders as an `<h2>` element.\n \n It is also used to provided an `aria-label` for the toggle button when the component is collapsible.\n \n @warning\n * If you are providing a custom header, setting this property is still strongly encouraged for the purposes of\n * accessibility.\n /\n @Prop({ reflect: true })\n label: string;\n\n /* Determines if the collapse chevron icon should show in the `q2-section` header. /\n @Prop({ reflect: true })\n noCollapseIcon: boolean;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the section is expanded or collapsed.\n * @legacyEvent\n */\n @Event()\n change: EventEmitter<{ expanded: boolean }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.removeHeaderSlotListener();\n this.removeContentSlotListener();\n }\n\n componentWillLoad() {\n this.onHeaderSlotChange();\n const { collapsible, expanded } = this;\n this.contentHeight = collapsible && expanded ? undefined : '0px';\n this.hideContent = !expanded;\n }\n\n componentDidLoad() {\n this.addHeaderSlotListener();\n this.addContentSlotListener();\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n defaultChangeHandler(event: CustomEvent) {\n if (event.target === this.hostElement && !this.hostElement.onchange && !!event.detail) {\n this.expanded = event.detail.expanded;\n }\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.contentContainer.focus();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('collapsible')\n collapsibleObserver() {\n this.contentHeight = this.currentHeight;\n }\n\n @Watch('expanded')\n async expandedObserver(expanded: boolean) {\n this.clearResizeInterval();\n this.resizerFn = setInterval(resizeIframe, 5);\n\n if (expanded) {\n this.expandSection();\n } else {\n this.collapseSection();\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get contentContainerHeight() {\n return `${this.contentContainer.offsetHeight \|\| 0}px`;\n }\n\n get currentHeight() {\n const { collapsible, expanded } = this;\n if (!collapsible) {\n return null;\n } else if (expanded) {\n return this.contentContainerHeight;\n } else {\n return '0';\n }\n }\n\n addContentSlotListener = () => {\n if (this.contentSlot) {\n this.contentSlot.addEventListener('slotchange', resizeIframe);\n return;\n }\n\n const observer = new MutationObserver(resizeIframe);\n observer.observe(this.contentContainer, { childList: true, subtree: true });\n this.contentSlotMutationObserver = observer;\n };\n\n addHeaderSlotListener = () => {\n if (this.headerSlot) {\n this.headerSlot.addEventListener('slotchange', this.onHeaderSlotChange);\n return;\n }\n\n const observer = new MutationObserver(this.onHeaderSlotChange);\n observer.observe(this.headerSlotWrapper, { childList: true });\n this.headerSlotMutationObserver = observer;\n };\n\n clearResizeInterval = () => {\n this.resizerFn && clearInterval(this.resizerFn);\n };\n\n async collapseSection() {\n this.contentHeight = this.contentContainerHeight;\n await nextPaint(() => {\n this.contentHeight = this.currentHeight;\n });\n }\n\n async expandSection() {\n this.hideContent = false;\n await nextPaint(() => {\n this.contentHeight = this.currentHeight;\n });\n }\n\n onHeaderClick = () => {\n this.change.emit({\n expanded: !this.expanded,\n });\n };\n\n onHeaderSlotChange = () => {\n const hasSlotContent = !!this.hostElement.querySelector('[slot=\"q2-section-header\"]');\n\n if (this.hasYieldedHeader !== hasSlotContent) {\n this.hasYieldedHeader = !!hasSlotContent;\n }\n };\n\n onTransitionEnd = () => {\n if (this.expanded) {\n this.contentHeight = undefined;\n } else {\n this.hideContent = true;\n }\n\n setTimeout(() => {\n // This gives enough time for all values to get passed over\n // Previously, the interval was never cleared and the fn was called indefinitely then filtered\n // Will revisit in TCT-599\n this.clearResizeInterval();\n }, 1000);\n };\n\n removeContentSlotListener = () => {\n if (this.contentSlot) {\n this.contentSlot.removeEventListener('slotchange', resizeIframe);\n return;\n }\n this.contentSlotMutationObserver.disconnect();\n };\n\n removeHeaderSlotListener = () => {\n if (this.headerSlot) {\n this.headerSlot.removeEventListener('slotchange', this.onHeaderSlotChange);\n return;\n }\n\n this.headerSlotMutationObserver.disconnect();\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n const hasHeader = this.label \|\| this.hasYieldedHeader;\n const wrapperClasses = ['content-wrapper'];\n const { collapsible, hideContent, contentHeight } = this;\n if (collapsible) {\n if (hideContent) wrapperClasses.push('is-closed');\n else if (contentHeight) wrapperClasses.push('is-transitioning');\n }\n\n const showDefaultHeader = !this.hasYieldedHeader && !!this.label;\n\n return (\n <section class=\"wrapper\">\n <header class={hasHeader ? 'has-header' : ''}>\n <div\n class=\"header-content\"\n id={this.titleId}\n onClick={this.collapsible && this.onHeaderClick}\n >\n {showDefaultHeader && <h2 class=\"title\">{loc(this.label)}</h2>}\n <div\n ref={el => (this.headerSlotWrapper = el)}\n class=\"header-slot-wrapper\"\n >\n <slot\n ref={(el: HTMLSlotElement) => (this.headerSlot = el)}\n name=\"q2-section-header\"\n />\n </div>\n </div>\n {this.collapsible && !this.noCollapseIcon && (\n <q2-btn\n label={loc(this.label \|\| 'tecton.element.section.defaultToggleLabel')}\n ariaExpanded={`${!!this.expanded}`}\n ariaControls={this.contentId}\n test-id=\"toggleButton\"\n hide-label\n onClick={this.onHeaderClick}\n >\n <q2-icon type=\"chevron-up\" />\n </q2-btn>\n )}\n </header>\n <div\n class={wrapperClasses.join(' ')}\n id={this.contentId}\n aria-labelledby={this.titleId}\n role=\"region\"\n onTransitionEnd={this.onTransitionEnd}\n style={\n this.collapsible && {\n height: this.contentHeight,\n }\n }\n >\n <div\n ref={el => (this.contentContainer = el)}\n class=\"content\"\n tabindex=\"-1\"\n >\n <slot ref={(el: HTMLSlotElement) => (this.contentSlot = el)} />\n </div>\n </div>\n </section>\n );\n }\n\n // #endregion\n}\n"],"version":3}

package/dist/esm/q2-select.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-1e1ce94e.js';
-import { l as loc, h as handleAriaLabel, o as overrideFocus, g as isRelatedTargetWithinHost, i as isEventFromElement, w as waitForNextPaint, j as isHostLosingFocus } from './index-3c5cd75e.js';
-import { s as shouldShowActionSheet, a as showActionSheetList } from './action-sheet-dd527168.js';
+import { l as loc, a as handleAriaLabel, o as overrideFocus, q as isRelatedTargetWithinHost, i as isEventFromElement, w as waitForNextPaint, t as isHostLosingFocus } from './index-4a80972c.js';
+import { a as shouldShowActionSheet, s as showActionSheetList } from './action-sheet-e64cb6f7.js';
 const q2SelectCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{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}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white, #ffffff);color:var(--t-text, #4d4d4d);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14));height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1, 0.2s ease);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host([block]) q2-btn,:host([block]){display:block}:host{--comp-select-margin:var(--tct-select-margin, var(--tct-select-margin-top, var(--t-select-margin-top, var(--app-scale-4, 30px))) 0 var(--tct-select-margin-bottom, var(--t-select-margin-bottom, var(--app-scale-4, 30px))));display:block;margin:var(--comp-select-margin)}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0;--tct-input-min-height:var(--tct-select-input-min-height, var(--t-select-input-min-height));--tct-input-max-height:var(--tct-select-input-max-height, var(--t-select-input-max-height, none))}::slotted([slot=_selected-display]){width:100%;min-height:var(--comp-selected-display-height, 44px)}.custom-display-content{position:absolute;bottom:0;left:calc(var(--tct-scale-2, var(--app-scale-2x, 10px)) + 1px);height:44px;width:calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3x, 15px)));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var(--tct-scale-3, var(--app-scale-3x, 15px)) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3x, 15px)))}.popover-content{display:flex;flex-direction:column-reverse}.popover-bottom-container{position:sticky;bottom:0;z-index:5}.popover-top-container{position:sticky;top:0;z-index:5}.popover-top-container .multi-select-header{padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--app-white);display:flex;gap:var(--app-scale-2x, 10px);align-items:center}.popover-top-container .multi-select-header fieldset{margin:0;padding:0;border:0;display:flex;gap:var(--app-scale-2x, 10px)}.popover-top-container .multi-select-header legend{padding:0;float:left}.popover-top-container .multi-select-header label{cursor:pointer;padding:var(--tct-select-multi-select-option-padding, var(--t-select-multi-select-option-padding, var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px))));font-size:var(--tct-select-multi-select-option-font-size, var(--t-select-multi-select-option-font-size, var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, inherit))));border-radius:var(--tct-select-multi-select-option-radius, var(--t-select-multi-select-option-radius, var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--app-border-radius-1, 4px)))));background:var(--tct-select-multi-select-option-background, var(--tct-select-multi-select-option-bg, var(--t-select-multi-select-option-bg, var(--tct-badge-background, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent))))));color:var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))))}.popover-top-container .multi-select-header label:hover{background:var(--tct-select-multi-select-option-hover-background, var(--tct-select-multi-select-option-hover-background-color, var(--t-select-multi-select-option-hover-background-color, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--app-gray-l3, #f2f2f2))))))));color:var(--tct-select-multi-select-option-hover-color, var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--app-gray-d2, #404040))))))))}.popover-top-container .multi-select-header input:checked+label,.popover-top-container .multi-select-header input:checked+label:enabled:hover{background:var(--tct-select-multi-select-option-active-background, var(--tct-select-multi-select-option-active-background-color, var(--t-select-multi-select-option-active-background-color, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)))));color:var(--tct-select-multi-select-option-active-color, var(--t-select-multi-select-option-active-color, var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--app-white, #ffffff)))))}.popover-top-container .multi-select-header input:disabled+label{opacity:var(--tct-select-multi-select-option-disabled-opacity, var(--t-select-multi-select-option-disabled-opacity, var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--app-disabled-opacity, 0.4)))));cursor:not-allowed}.popover-top-container .multi-select-header input:focus+label{box-shadow:var(--const-double-focus-ring)}";
 const Q2SelectStyle0 = q2SelectCss;
@@ -50,12 +50,13 @@ const Q2Select = class {
         this.inputKeydownHandler = (event) => {
             if (this.readonly || this.disabled)
                 return;
-            const key = event.key;
+            const { key, shiftKey } = event;
+            const isShiftTab = key === 'Tab' && shiftKey;
             const hasSlot = this.hasPopoverTop || this.hasPopoverBottom;
-            const isShiftTab = key === 'Tab' && event.shiftKey;
-            if (hasSlot && (key === 'Tab' || key === 'Enter' || isShiftTab))
+            if (hasSlot && (key === 'Tab' || isShiftTab))
                 return;
-            if (shouldShowActionSheet(this, event)) {
+            // slots are incompatible with action sheet
+            if (shouldShowActionSheet(this, event) && !hasSlot) {
                 return this.executeActionSheet(event);
             }
             const keysForOptionListToHandle = [
@@ -558,9 +559,6 @@ const Q2Select = class {
         this.optionList.setActiveElement(null);
         this.open = true;
     }
-    optionsDropdown() {
-        return (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.innerInputContainer, open: this.open, minHeight: this.popoverMinHeight, direction: this.popDirection, mode: this.popoverMode || undefined, block: true }, h("div", { class: "popover-content" }, h("q2-option-list", { onPopoverState: this.onPopoverState, ref: el => (this.optionList = el), type: "listbox", id: "option-list", "show-selected": this.showSelected, label: this.listLabel, multiple: this.multiple, selectedOptions: this.structuredSelectedOptions, onChange: this.onOptionListChange }, h("slot", null)), h("div", { class: "popover-top-container", ref: el => (this.popoverTopContainer = el), hidden: !this.multiple && !this.hasPopoverTop, tabindex: "-1" }, h("slot", { name: "popover-top" }), this.multiple && this.visibilityToggle())), h("div", { class: "popover-bottom-container", hidden: !this.hasPopoverBottom, tabindex: "-1" }, h("slot", { name: "popover-bottom" }))));
-    }
     setStatusMessage(message) {
         clearTimeout(this.statusMessageTimer);
         this.statusMessage = '';
@@ -581,14 +579,6 @@ const Q2Select = class {
             this.openDropdownWithoutActiveElement();
         }
     }
-    visibilityToggle() {
-        var _a, _b;
-        const selectedOptionsCount = (_b = (_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
-        const { showSelected } = this;
-        return (h("div", { class: "multi-select-header" }, h("fieldset", null, h("legend", { "aria-label": loc('tecton.element.select.multiHeader.showing') }, loc('tecton.element.select.multiHeader.showing')), h("div", null, h("input", { class: "sr", type: "radio", id: "all", name: "viewDisplay", value: "all", checked: !showSelected, "aria-label": loc('tecton.element.select.multiHeader.allAriaLabel'), "test-id": "allOptionsButton", onClick: this.showAllOptions, onKeyDown: this.visibilityToggleKeyDown }), h("label", { htmlFor: "all" }, loc('tecton.element.select.multiHeader.all'))), h("div", null, h("input", { class: "sr", type: "radio", id: "selected", disabled: selectedOptionsCount === 0, name: "viewDisplay", value: "selected", "aria-label": loc('tecton.element.select.multiHeader.selectedAriaLabel', [
-                selectedOptionsCount,
-            ]), checked: showSelected, "test-id": "selectedOptionsButton", onClick: this.showSelectedOptions, onKeyDown: this.visibilityToggleKeyDown }), h("label", { htmlFor: "selected" }, loc('tecton.element.select.multiHeader.selected', [selectedOptionsCount]))))));
-    }
     // #endregion
     // #region Render Methods
     renderCustomDisplay() {
@@ -598,13 +588,24 @@ const Q2Select = class {
         this.checkSelectedDisplayHeight();
         return (h("slot", { name: "_selected-display", slot: "custom-display" }));
     }
+    renderOptionsDropdown() {
+        return (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.innerInputContainer, open: this.open, minHeight: this.popoverMinHeight, direction: this.popDirection, mode: this.popoverMode || undefined, block: true }, h("div", { class: "popover-content" }, h("q2-option-list", { onPopoverState: this.onPopoverState, ref: el => (this.optionList = el), type: "listbox", id: "option-list", "show-selected": this.showSelected, label: this.listLabel, multiple: this.multiple, selectedOptions: this.structuredSelectedOptions, onChange: this.onOptionListChange }, h("slot", null)), h("div", { class: "popover-top-container", ref: el => (this.popoverTopContainer = el), hidden: !this.multiple && !this.hasPopoverTop, tabindex: "-1" }, h("slot", { name: "popover-top" }), this.multiple && this.renderVisibilityToggle())), h("div", { class: "popover-bottom-container", hidden: !this.hasPopoverBottom, tabindex: "-1" }, h("slot", { name: "popover-bottom" }))));
+    }
+    renderVisibilityToggle() {
+        var _a, _b;
+        const selectedOptionsCount = (_b = (_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+        const { showSelected } = this;
+        return (h("div", { class: "multi-select-header" }, h("fieldset", null, h("legend", { "aria-label": loc('tecton.element.select.multiHeader.showing') }, loc('tecton.element.select.multiHeader.showing')), h("div", null, h("input", { class: "sr", type: "radio", id: "all", name: "viewDisplay", value: "all", checked: !showSelected, "aria-label": loc('tecton.element.select.multiHeader.allAriaLabel'), "test-id": "allOptionsButton", onClick: this.showAllOptions, onKeyDown: this.visibilityToggleKeyDown }), h("label", { htmlFor: "all" }, loc('tecton.element.select.multiHeader.all'))), h("div", null, h("input", { class: "sr", type: "radio", id: "selected", disabled: selectedOptionsCount === 0, name: "viewDisplay", value: "selected", "aria-label": loc('tecton.element.select.multiHeader.selectedAriaLabel', [
+                selectedOptionsCount,
+            ]), checked: showSelected, "test-id": "selectedOptionsButton", onClick: this.showSelectedOptions, onKeyDown: this.visibilityToggleKeyDown }), h("label", { htmlFor: "selected" }, loc('tecton.element.select.multiHeader.selected', [selectedOptionsCount]))))));
+    }
     render() {
         var _a;
-        return (h("click-elsewhere", { key: 'ee1f153325884056a488d4bdfda9b5ef501cf3be', class: this.wrapperClasses, onChange: this.clickedElsewhere }, h("div", { key: 'd60cf7a63ba2d5af7f67e2a811336255506ad422', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("q2-input", { key: '2a6c022291b99e1561e090bc74c5014fd5628bc4', ref: el => (this.inputField = el), class: "q2-select-input", label: (this.label && loc(this.label)) || '', value: this.selectedDisplay, clearable: (this.clearable && (!!this.value || !!((_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a.length))) || undefined, errors: (Array.isArray(this.errors) &&
+        return (h("click-elsewhere", { key: 'f2a43df7402a1156caa1488fc2cd309b04c95620', class: this.wrapperClasses, onChange: this.clickedElsewhere }, h("div", { key: '303e21b9ad4519b5150636b6826c0ab1064d8420', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("q2-input", { key: '83a1f5e0bdd84ff98496746bda20f58f9539f7d2', ref: el => (this.inputField = el), class: "q2-select-input", label: (this.label && loc(this.label)) || '', value: this.selectedDisplay, clearable: (this.clearable && (!!this.value || !!((_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a.length))) || undefined, errors: (Array.isArray(this.errors) &&
                 this.errors.length > 0 &&
                 this.errors.map(error => loc(error))) ||
                 (this.invalid && ['tecton.element.select.invalid']) ||
-                [], disabled: this.disabled, optional: this.optional, readonly: !!this.readonly, placeholder: this.placeholder || undefined, hideLabel: this.hideLabel, ariaExpanded: `${this.open}`, ariaControls: "option-list", ariaHaspopup: "listbox", "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler, badgeValue: this.badgeValue, badgeTheme: this.inputFocused ? 'primary' : undefined, _role: "combobox", _preventEntry: !this.searchable }, this.renderCustomDisplay()), h("div", { key: 'a29711927968b10f9225994ed41367d8ad35c1a9', class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick }, h("slot", { key: '3e63c82e5bb6a12638f6d5a8f6af8eb246b105a6', name: "q2-select-display" })), this.optionsDropdown()));
+                [], disabled: this.disabled, optional: this.optional, readonly: !!this.readonly, placeholder: this.placeholder || undefined, hideLabel: this.hideLabel, ariaExpanded: `${this.open}`, ariaControls: "option-list", ariaHaspopup: "listbox", "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler, badgeValue: this.badgeValue, badgeTheme: this.inputFocused ? 'primary' : undefined, _role: "combobox", _preventEntry: !this.searchable }, this.renderCustomDisplay()), h("div", { key: 'f0e68cea358f777459f803a6ba85be074938986b', class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick }, h("slot", { key: '6c125851f5db40a876f29e3d4d32e5656a52d6f1', name: "q2-select-display" })), this.renderOptionsDropdown()));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {