npm - q2-tecton-elements - Versions diffs - 1.59.1 → 1.60.0 - Mend

q2-tecton-elements 1.59.1 → 1.60.0

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

Files changed (286) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-pill.entry.js","sources":["src/components/q2-pill/q2-pill.scss?tag=q2-pill&encapsulation=shadow","src/components/q2-pill/q2-pill.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n position: relative;\n line-height: 0;\n}\n\n:host(:not(:last-child)) {\n margin-inline-end: var-list(var-prefixer(pill-margin), --app-scale-2x, 10px);\n}\n\nq2-popover,\n.btn-wrapper {\n --comp-pill-min-height: #{var-list(var-prefixer(pill-min-height), 44px)};\n --comp-pill-btn-height: #{var-list(var-prefixer(pill-btn-height), 30px)};\n}\n\n.popover-top-container {\n position: sticky;\n top: 0;\n z-index: 5;\n}\n\n.popover-bottom-container {\n position: sticky;\n bottom: 0;\n z-index: 5;\n}\n\n.btn-wrapper {\n --comp-pill-btn-border-width: #{var-list(var-prefixer(pill-btn-border-width), 2px)};\n --comp-close-size: 0px;\n --comp-btn-background: #{var-list(var-prefixer(pill-btn-background), --t-base, #ffffff)};\n --comp-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/*\n @slot popover-top - An optional slot to display custom content persistently at the top of the popover. This is not compatible with the action sheet workflow.\n * @slot popover-bottom - An optional slot to display custom content persistently at the bottom of the popover. This is not compatible with the action sheet workflow.\n /\n@Component({ tag: 'q2-pill', shadow: true, styleUrl: 'q2-pill.scss' })\nexport class Q2Pill implements ComponentInterface {\n // #region Own Properties\n\n mutationObserver: MutationObserver;\n optionList: HTMLQ2OptionListElement;\n popoverBottomContainer: HTMLElement;\n popoverElement: HTMLQ2PopoverElement;\n popoverTopContainer: HTMLElement;\n primaryBtn: HTMLButtonElement;\n primaryBtnWrapper: HTMLElement;\n scheduledAfterRender: (() => void)[] = [];\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n hasPopoverBottom = false;\n\n @State()\n hasPopoverTop = false;\n\n @State()\n optionCount: number;\n\n @State()\n selectedOptionElements: HTMLQ2OptionElement[] = [];\n\n // #endregion\n // #region Public Property API\n\n /* Determine if the elements is in the selected state, with values. /\n @Prop({ reflect: true, mutable: true })\n active: boolean;\n\n /* Indicates that the pill has no border /\n @Prop({ reflect: true })\n borderless: boolean;\n\n /* Indicates the pill cannot be focused or interacted with. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /\n Instructs the component to use the action sheet workflow for displaying its options.\n \n For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n /\n @Prop()\n hoist: boolean = !!window.Tecton?.useActionSheets;\n\n /\n The text that populates the label.\n * @localizable\n /\n @Prop({ reflect: true })\n label: string;\n\n /\n The maximum number of characters to display before ellipcizing.\n * @info\n * Limitless by default.\n /\n @Prop({ reflect: true })\n maxLength: number;\n\n /\n Enables the multi-select ability for the dropdown.\n * @info\n * Only applicable when options are provided.\n /\n @Prop({ reflect: true })\n multiple: boolean;\n\n /\n Determine whether the popover is open or closed.\n \n @readonly\n /\n @Prop({ reflect: true, mutable: true })\n open: boolean;\n\n /* Determines the label that is applied to the option list for accessibility purposes. /\n @Prop()\n optionListLabel: string;\n\n /* Aligns the popover dropdown to the left or right side of the input field. /\n @Prop({ mutable: true })\n popoverAlignment: 'left' \| 'right' = 'right';\n\n /\n Force the direction of the popover dropdown when it opens.\n * If no value is passed, the component will auto-detect the direction based on available space.\n /\n @Prop()\n popoverDirection: 'up' \| 'down';\n\n /\n Force the maximum height of the popover. This value will be interpreted as pixels.\n * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n /\n @Prop()\n popoverMaxHeight: number;\n\n /* @deprecated /\n @Prop()\n popoverMinHeight: number = 150;\n\n /* A list of the selected options on the element. /\n @Prop({ mutable: true })\n selectedOptions: IOptionValue[] = [];\n\n /* The color of the element when in the active state. /\n @Prop({ reflect: true })\n theme: 'primary' \| 'secondary' \| 'tertiary';\n\n /* The value emitted when the component is selected. /\n @Prop({ reflect: true, mutable: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the pill is clicked or the selected options change.\n \n When multi-select is enabled, `value` will be `undefined`.\n * @legacyEvent\n /\n @Event()\n change: EventEmitter<{ value: string; values: IOptionValue[]; active: boolean }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n this.mutationObserver = null;\n }\n\n componentWillLoad() {\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true, attributes: true });\n this.mutationObserver = observer;\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n this.syncValueProperties();\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('displayChanged')\n handleSelectedDisplay() {\n if (this.multiple) return;\n this.updateSelectedOptionElements();\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.primaryBtn.focus();\n }\n\n @Listen('popoverStateChanged')\n popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n if (this.open !== open) this.open = open;\n if (open) return;\n this.optionList.setActiveElement(null);\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Emulates clicking the `<button>` to hide the popover if it is visible.\n \n @testOnly\n /\n @Method()\n async closePopover() {\n if (!this.open \|\| this.disabled) return;\n this._togglePopover();\n }\n\n /\n Emulates clicking the `<button>` to display the popover if it is hidden.\n \n @testOnly\n /\n @Method()\n async openPopover() {\n if (this.open \|\| this.disabled) return;\n this._togglePopover();\n }\n\n /\n Emulates clicking the `<button>` to display the popover and selecting the option(s) with the specified value(s).\n \n If multi-select is enabled and the `closePopover` argument is `true` (default), the popover will be closed\n * after the option(s) are selected.\n \n @testOnly\n */\n @Method()\n async setValue(values: string \| string[], options: { closePopover?: boolean } = { closePopover: true }) {\n const valueSet = new Set(Array.isArray(values) ? values : [values]);\n const allOptions = (await this.optionList?.getOptions()) as HTMLQ2OptionElement[];\n if (!this.open) {\n await this.openPopover();\n await waitForNextPaint();\n }\n\n valueSet.forEach(value => {\n allOptions.find(option => option.value === value)?.click();\n });\n\n if (options.closePopover) {\n await this.closePopover();\n await waitForNextPaint();\n }\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('selectedOptions')\n selectedOptionsChanged(newValue) {\n const { multiple } = this;\n const firstValue = newValue?.[0]?.value ?? null;\n if (multiple) {\n if (this.value) this.value = null;\n this.updateSelectedOptionElements();\n } else if (this.value === firstValue) {\n this.updateSelectedOptionElements();\n } else {\n this.value = firstValue;\n }\n }\n\n @Watch('value')\n async valueChanged(newValue) {\n const { multiple, selectedOptions } = this;\n if (multiple) return;\n const firstValue = selectedOptions?.[0]?.value ?? null;\n if (newValue === firstValue) this.updateSelectedOptionElements();\n else {\n const selectedOption = (await this.getOption(newValue)) as HTMLQ2OptionElement;\n const { value, display } = selectedOption \|\| { value: newValue, display: null };\n this.selectedOptions = value ? [{ value, display }] : [];\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get buttonContent() {\n const { label, selectedOptions, selectedOptionElements, optionCount } = this;\n\n if (!optionCount \|\| selectedOptionElements.length === 0) return loc(label);\n else if (selectedOptionElements.length === 1) return loc(selectedOptionElements[0].display);\n\n return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });\n }\n\n get truncatedButtonContent() {\n const { maxLength, buttonContent } = this;\n if (maxLength && buttonContent.length > maxLength) return `${buttonContent.substring(0, maxLength)}…`;\n else return buttonContent;\n }\n\n _togglePopover() {\n const { primaryBtn } = this;\n primaryBtn?.click();\n primaryBtn?.focus();\n primaryBtn.dispatchEvent(new FocusEvent('focus'));\n }\n\n clearSelectedOptions = () => {\n this.selectedOptions = [];\n this.value = null;\n this.active = false;\n this.open = false;\n this.primaryBtn.focus();\n this.change.emit({ value: null, values: [], active: false });\n this.scheduledAfterRender.push(resizeIframe);\n };\n\n determineOptionCount = async () => {\n if (this.optionList) {\n const allOptions = await this.optionList.getOptions();\n this.optionCount = allOptions.length;\n } else {\n const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n this.optionCount = numberOfOptions;\n }\n };\n\n executeActionSheet = async (event: MouseEvent \| KeyboardEvent) => {\n const result = await showActionSheetList(this, event);\n this.primaryBtn.focus();\n this.handleSelectionChanges(result);\n };\n\n getOption = async (value: string) => {\n if (this.optionList) {\n const options = await this.optionList.getOptions();\n return options.find(option => option.value === value);\n } else {\n return this.hostElement.querySelector<HTMLQ2OptionElement>(`q2-option[value=\"${value}\"]`);\n }\n };\n\n 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 handleFocusOut = async (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n if (this.popoverElement?.contains(relatedTarget)) return;\n if (this.hostElement.contains(relatedTarget)) return;\n this.open = false;\n };\n\n handleKeydown = async (event: KeyboardEvent) => {\n const isTabMetaOrCtrl = event.metaKey \|\| event.ctrlKey \|\| event.key === 'Tab';\n if (!this.optionCount \|\| this.disabled \|\| isTabMetaOrCtrl) return;\n event.preventDefault();\n const hasSlot = this.hasPopoverTop \|\| this.hasPopoverBottom;\n\n // slots are incompatible with action sheet\n if (shouldShowActionSheet(this, event) && !hasSlot) {\n this.executeActionSheet(event);\n } else {\n this.optionList.handleExternalKeydown(event);\n }\n };\n\n handleSelectionChanges = async (changeDetails: { value?: string; values?: IOptionValue[] }) => {\n const { multiple } = this;\n const { value = '', values = [] } = changeDetails;\n const isActive = multiple ? !!values.length : !!value;\n if (!this.hostElement.onchange) {\n if (multiple) {\n this.selectedOptions = values;\n this.value = undefined;\n } else {\n const selectedOption = (await this.getOption(value)) as HTMLQ2OptionElement;\n this.selectedOptions = selectedOption\n ? [{ value: selectedOption.value, display: selectedOption.display }]\n : [];\n this.value = selectedOption?.value \|\| undefined;\n }\n }\n\n this.change.emit({\n value: multiple ? undefined : value,\n values,\n active: isActive,\n });\n };\n\n handleWrapperClick = () => {\n this.primaryBtn.focus();\n this.primaryBtn.click();\n };\n\n onClickElsewhere = (event: CustomEvent) => {\n const target = event.target as HTMLClickElsewhereElement;\n if (target.localName === 'click-elsewhere') {\n event.stopPropagation();\n const { popoverElement } = this;\n if (!popoverElement) return;\n popoverElement.open = false;\n }\n };\n\n onMutationObserved = () => {\n this.updateSlotState();\n this.determineOptionCount();\n this.updateSelectedOptionElements();\n };\n\n syncValueProperties = () => {\n const { value, selectedOptions } = this;\n if (!!selectedOptions?.length) this.selectedOptionsChanged(selectedOptions);\n else if (value) this.valueChanged(value);\n };\n\n updateSelectedOptionElements = async () => {\n const { selectedOptions = [] } = this;\n const selectedValues = selectedOptions.map(option => option.value);\n const options = await this.optionList?.getOptions();\n if (this.optionCount) this.active = !!selectedValues.length;\n this.selectedOptionElements =\n (options?.filter(option => selectedValues.includes(option.value)) as HTMLQ2OptionElement[]) \|\| [];\n };\n\n updateSlotState = () => {\n const { hostElement, hasPopoverTop, hasPopoverBottom } = this;\n const popTopSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-top\"]');\n const popBottomSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-bottom\"]');\n const topSlotHasNode = popTopSlot?.assignedNodes().length > 0;\n const bottomSlotHasNode = popBottomSlot?.assignedNodes().length > 0;\n\n if (hasPopoverTop !== topSlotHasNode) this.hasPopoverTop = topSlotHasNode;\n if (hasPopoverBottom !== bottomSlotHasNode) this.hasPopoverBottom = bottomSlotHasNode;\n };\n\n // #endregion\n // #region Render Methods\n\n renderHiddenElement() {\n return (\n <div\n id=\"option-description\"\n class=\"sr\"\n aria-hidden=\"true\"\n >\n {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n </div>\n );\n }\n\n renderIcon() {\n const { optionCount, active } = this;\n const isButton = optionCount && active;\n const TagName = isButton ? 'button' : 'div';\n const iconName = isButton \|\| !optionCount ? 'close' : 'chevron-down';\n\n return (\n <TagName\n class=\"btn-close\"\n onClick={(isButton && this.clearSelectedOptions) \|\| undefined}\n disabled={(isButton && this.disabled) \|\| undefined}\n aria-label={(isButton && loc('tecton.element.pill.clearSelection')) \|\| undefined}\n type={(isButton && 'button') \|\| undefined}\n >\n <q2-icon type={iconName}></q2-icon>\n </TagName>\n );\n }\n\n render() {\n const { optionCount, active, open } = this;\n const wrapperClassNames = ['btn-wrapper'];\n if (optionCount \|\| active) wrapperClassNames.push('has-icon');\n if (optionCount) wrapperClassNames.push('has-options');\n\n return (\n <click-elsewhere onChange={this.onClickElsewhere}>\n <div class={wrapperClassNames.join(' ')}>\n <div\n class=\"btn-height-wrapper\"\n ref={el => (this.primaryBtnWrapper = el)}\n onClick={this.handleWrapperClick}\n tabIndex={-1}\n >\n <button\n class=\"btn-primary\"\n test-id=\"btn-control\"\n type=\"button\"\n role={(optionCount && 'combobox') \|\| undefined}\n ref={el => (this.primaryBtn = el)}\n onClick={this.handleClick}\n onKeyDown={this.handleKeydown}\n onFocusout={this.handleFocusOut}\n disabled={this.disabled}\n aria-roledescription={!optionCount && 'filter'}\n aria-controls={(optionCount && 'option-list') \|\| undefined}\n aria-expanded={(optionCount && `${!!open}`) \|\| undefined}\n aria-label={this.buttonContent}\n aria-describedby={(optionCount && 'option-description') \|\| undefined}\n >\n {this.truncatedButtonContent}\n {!optionCount && active && <span class=\"sr\">({loc('tecton.element.pill.active')})</span>}\n </button>\n </div>\n {this.renderIcon()}\n {!!optionCount && this.renderHiddenElement()}\n </div>\n {this.optionCount > 0 && (\n <q2-popover\n ref={el => (this.popoverElement = el)}\n controlElement={this.primaryBtn}\n open={this.open}\n max-height={this.popoverMaxHeight}\n minHeight={this.popoverMinHeight}\n direction={this.popoverDirection}\n align={this.popoverAlignment}\n onFocusout={this.handleFocusOut}\n >\n <div class=\"popover-content\">\n <div\n ref={el => (this.popoverTopContainer = el)}\n class=\"popover-top-container\"\n tabindex=\"-1\"\n hidden={!this.hasPopoverTop}\n onKeyDown={this.handleKeydown}\n >\n <slot name=\"popover-top\"></slot>\n </div>\n <q2-option-list\n type=\"listbox\"\n ref={el => (this.optionList = el)}\n id=\"option-list\"\n onChange={this.handleChange}\n multiple={this.multiple}\n selectedOptions={this.selectedOptions}\n onReady={() => this.updateSelectedOptionElements()}\n label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n >\n <slot />\n </q2-option-list>\n <div\n ref={el => (this.popoverBottomContainer = el)}\n class=\"popover-bottom-container\"\n tabindex=\"-1\"\n hidden={!this.hasPopoverBottom}\n onKeyDown={this.handleKeydown}\n >\n <slot name=\"popover-bottom\"></slot>\n </div>\n </div>\n </q2-popover>\n )}\n </click-elsewhere>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"q2-pill.entry.js","sources":["src/components/q2-pill/q2-pill.scss?tag=q2-pill&encapsulation=shadow","src/components/q2-pill/q2-pill.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n position: relative;\n line-height: 0;\n}\n\n:host(:not(:last-child)) {\n margin-inline-end: var-list(var-prefixer(pill-margin), --app-scale-2x, 10px);\n}\n\nq2-popover,\n.btn-wrapper {\n --comp-pill-min-height: #{var-list(var-prefixer(pill-min-height), 44px)};\n --comp-pill-btn-height: #{var-list(var-prefixer(pill-btn-height), 30px)};\n}\n\n.popover-top-container {\n position: sticky;\n top: 0;\n z-index: 5;\n}\n\n.popover-bottom-container {\n position: sticky;\n bottom: 0;\n z-index: 5;\n}\n\n.btn-wrapper {\n --comp-pill-btn-border-width: #{var-list(var-prefixer(pill-btn-border-width), 2px)};\n --comp-close-size: 0px;\n --comp-btn-background: #{var-list(var-prefixer(pill-btn-background), --t-base, #ffffff)};\n --comp-btn-box-shadow: #{var-list(--tct-pill-btn-box-shadow, none)};\n --comp-btn-backdrop-filter: #{var-list(--tct-pill-btn-backdrop-filter, none)};\n --comp-hover-btn-background: #{var-list(var-prefixer(pill-hover-btn-background), --t-gray-13, #e6e6e6)};\n --comp-btn-padding: #{var-list(var-prefixer(pill-btn-padding-inline), --app-scale-3x, 15px)};\n --comp-btn-color: #{var-list(var-prefixer(pill-btn-color), --t-gray-3, #262626)};\n --comp-active-btn-color: #{var-list(--tct-pill-active-btn-color, --comp-btn-background)};\n --comp-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-7, #666666)};\n --comp-active-btn-box-shadow: #{var-list(--tct-pill-active-btn-box-shadow, none)};\n --comp-active-btn-backdrop-filter: #{var-list(--tct-pill-active-btn-backdrop-filter, none)};\n --comp-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-border-color), --t-gray-7, #666666)};\n --comp-hover-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n --comp-hover-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n\n position: relative;\n\n &.has-options,\n &.has-icon {\n --comp-close-size: var(--comp-pill-btn-height);\n }\n\n :host([active]:not([active='false'])) & {\n --comp-btn-color: #{var-list(var-prefixer(pill-active-btn-color), --t-base, #ffffff)};\n }\n\n :host([theme='primary']) & {\n --comp-active-btn-background: #{var-list(--tct-pill-primary-active-background, --t-primary, #0079c1)};\n --comp-active-btn-box-shadow: #{var-list(--tct-pill-primary-active-box-shadow, none)};\n --comp-active-btn-backdrop-filter: #{var-list(--tct-pill-primary-active-backdrop-filter, none)};\n --comp-active-btn-color: #{var-list(--tct-pill-primary-active-font-color, --t-primary-text, #ffffff)};\n --comp-active-btn-border-color: #{var-list(--tct-pill-primary-active-border-color, --t-primary, #0079c1)};\n --comp-hover-active-btn-background: #{var-list(\n --tct-pill-primary-active-hover-background,\n --t-primary-l3,\n #21acff\n )};\n --comp-hover-active-btn-border-color: #{var-list(\n --tct-pill-primary-active-hover-border-color,\n --t-primary-l3,\n #21acff\n )};\n }\n\n :host([theme='secondary']) & {\n --comp-active-btn-background: #{var-list(--tct-pill-secondary-active-background, --t-secondary, #b3c2cc)};\n --comp-active-btn-box-shadow: #{var-list(--tct-pill-secondary-active-box-shadow, none)};\n --comp-active-btn-backdrop-filter: #{var-list(--tct-pill-secondary-active-backdrop-filter, none)};\n --comp-active-btn-color: #{var-list(--tct-pill-secondary-active-font-color, --t-secondary-text, #141414)};\n --comp-active-btn-border-color: #{var-list(--tct-pill-secondary-active-border-color, --t-secondary, #b3c2cc)};\n --comp-hover-active-btn-background: #{var-list(\n --tct-pill-secondary-active-hover-background,\n --t-secondary-l3,\n #c9d5db\n )};\n --comp-hover-active-btn-border-color: #{var-list(\n --tct-pill-secondary-active-hover-border-color,\n --t-secondary-l3,\n #c9d5db\n )};\n }\n\n :host([theme='tertiary']) & {\n --comp-active-btn-background: #{var-list(--tct-pill-tertiary-active-background, --t-tertiary, #e8f5fc)};\n --comp-active-btn-box-shadow: #{var-list(--tct-pill-tertiary-active-box-shadow, none)};\n --comp-active-btn-backdrop-filter: #{var-list(--tct-pill-tertiary-active-backdrop-filter, none)};\n --comp-active-btn-color: #{var-list(--tct-pill-tertiary-active-font-color, --t-tertiary-text, #141414)};\n --comp-active-btn-border-color: #{var-list(--tct-pill-tertiary-active-border-color, --t-tertiary, #e8f5fc)};\n --comp-hover-active-btn-background: #{var-list(\n --tct-pill-tertiary-active-hover-background,\n --t-tertiary-l3,\n #eff8fd\n )};\n --comp-hover-active-btn-border-color: #{var-list(\n --tct-pill-tertiary-active-hover-border-color,\n --t-tertiary-l3,\n #eff8fd\n )};\n }\n}\n\n.btn-height-wrapper {\n height: var(--comp-pill-min-height);\n display: flex;\n align-items: center;\n cursor: pointer;\n &:focus {\n box-shadow: none;\n }\n\n :host([disabled]) & {\n cursor: not-allowed;\n }\n}\n\n.btn-close,\n.btn-primary {\n cursor: pointer;\n height: var(--comp-pill-btn-height);\n border-style: solid;\n border-radius: var-list(var-prefixer(pill-btn-border-radius), 30px);\n transition-property: background, color, padding, width, opacity;\n transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\n.btn-close,\n.btn-primary,\nq2-icon {\n :host([disabled]) & {\n opacity: var-list(var-prefixer(pill-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n cursor: not-allowed;\n }\n}\n\n.btn-primary {\n background: var(--comp-btn-background);\n box-shadow: var(--comp-btn-box-shadow);\n backdrop-filter: var(--comp-btn-backdrop-filter);\n border-width: var-list(--comp-pill-btn-border-width);\n border-color: var-list(var-prefixer(pill-btn-border-color), --t-a11y-gray-color-AA, #949494);\n padding-inline: var(--comp-btn-padding);\n padding-right: calc(var(--comp-btn-padding) + var(--comp-close-size));\n font-size: var-list(var-prefixer(pill-btn-font-size), --app-font-size, 14px);\n font-weight: var-list(--tct-pill-btn-font-weight, 400);\n color: var(--comp-btn-color);\n display: block;\n width: 100%;\n text-align: start;\n\n &:focus,\n &:hover {\n background: var(--comp-hover-btn-background);\n }\n\n .has-options &,\n .has-icon & {\n padding-right: calc(#{var-list(var-prefixer(pill-icon-gap), --app-scale-1x, 5px)} + var(--comp-close-size));\n }\n\n .has-options & {\n @include line-clamp(1);\n max-width: var-list(var-prefixer(pill-max-width), 200px);\n }\n\n :host([active]:not([active='false'])) & {\n background: var(--comp-active-btn-background);\n box-shadow: var(--comp-active-btn-box-shadow);\n backdrop-filter: var(--comp-active-btn-backdrop-filter);\n border-color: var(--comp-active-btn-border-color);\n color: var(--comp-active-btn-color);\n\n &:focus,\n &:hover {\n background: var(--comp-hover-active-btn-background);\n border-color: var(--comp-hover-active-btn-border-color);\n }\n }\n}\n\n.btn-close {\n background: transparent;\n border-color: transparent;\n border-width: var(--comp-pill-btn-border-width);\n width: var(--comp-close-size);\n height: var(--comp-close-size);\n padding: 0;\n border: 0;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n opacity: 0;\n :host([active]:not([active='false'])) & {\n color: var(--comp-active-btn-color);\n }\n\n .has-options &,\n .has-icon & {\n opacity: 1;\n }\n}\n\nq2-icon {\n --tct-icon-stroke-primary: #{var-list(--tct-pill-icon-stroke, currentcolor)};\n --tct-icon-stroke-width: #{var-list(--tct-pill-icon-stroke-width, inherit)};\n width: var-list(var-prefixer(pill-icon-size), 14px);\n height: var-list(var-prefixer(pill-icon-size), 14px);\n transition-property: transform;\n transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\ndiv.btn-close {\n pointer-events: none;\n\n :host([open]) & q2-icon {\n transform: rotate(180deg);\n }\n}\n\nbutton.btn-close {\n :host([active]:not([active='false'])) & {\n &:focus,\n &:hover {\n background: var-list(var-prefixer(pill-hover-close-btn-background), --t-top-a1, rgba(13, 13, 13, 0.35));\n border-color: var-list(var-prefixer(pill-hover-close-btn-border-color), --t-top-a1, rgba(13, 13, 13, 0.35));\n }\n }\n}\n\nq2-popover {\n top: calc(var(--comp-pill-min-height) - calc(calc(var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2));\n}\n\n:host([borderless]:not([borderless='false'])) {\n button {\n border-style: none;\n }\n}\n","import {\n Component,\n State,\n Prop,\n h,\n ComponentInterface,\n Listen,\n Watch,\n Element,\n EventEmitter,\n Event,\n Method,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, resizeIframe, waitForNextPaint } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\nimport { IOptionValue } from '../q2-option-list/q2-option-list';\n\n/*\n @slot popover-top - An optional slot to display custom content persistently at the top of the popover. This is not compatible with the action sheet workflow.\n * @slot popover-bottom - An optional slot to display custom content persistently at the bottom of the popover. This is not compatible with the action sheet workflow.\n /\n@Component({ tag: 'q2-pill', shadow: true, styleUrl: 'q2-pill.scss' })\nexport class Q2Pill implements ComponentInterface {\n // #region Own Properties\n\n mutationObserver: MutationObserver;\n optionList: HTMLQ2OptionListElement;\n popoverBottomContainer: HTMLElement;\n popoverElement: HTMLQ2PopoverElement;\n popoverTopContainer: HTMLElement;\n primaryBtn: HTMLButtonElement;\n primaryBtnWrapper: HTMLElement;\n scheduledAfterRender: (() => void)[] = [];\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n hasPopoverBottom = false;\n\n @State()\n hasPopoverTop = false;\n\n @State()\n optionCount: number;\n\n @State()\n selectedOptionElements: HTMLQ2OptionElement[] = [];\n\n // #endregion\n // #region Public Property API\n\n /* Determine if the elements is in the selected state, with values. /\n @Prop({ reflect: true, mutable: true })\n active: boolean;\n\n /* Indicates that the pill has no border /\n @Prop({ reflect: true })\n borderless: boolean;\n\n /* Indicates the pill cannot be focused or interacted with. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /\n Instructs the component to use the action sheet workflow for displaying its options.\n \n For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n /\n @Prop()\n hoist: boolean = !!window.Tecton?.useActionSheets;\n\n /\n The text that populates the label.\n * @localizable\n /\n @Prop({ reflect: true })\n label: string;\n\n /\n The maximum number of characters to display before ellipcizing.\n * @info\n * Limitless by default.\n /\n @Prop({ reflect: true })\n maxLength: number;\n\n /\n Enables the multi-select ability for the dropdown.\n * @info\n * Only applicable when options are provided.\n /\n @Prop({ reflect: true })\n multiple: boolean;\n\n /\n Determine whether the popover is open or closed.\n \n @readonly\n /\n @Prop({ reflect: true, mutable: true })\n open: boolean;\n\n /* Determines the label that is applied to the option list for accessibility purposes. /\n @Prop()\n optionListLabel: string;\n\n /* Aligns the popover dropdown to the left or right side of the input field. /\n @Prop({ mutable: true })\n popoverAlignment: 'left' \| 'right' = 'right';\n\n /\n Force the direction of the popover dropdown when it opens.\n * If no value is passed, the component will auto-detect the direction based on available space.\n /\n @Prop()\n popoverDirection: 'up' \| 'down';\n\n /\n Force the maximum height of the popover. This value will be interpreted as pixels.\n * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n /\n @Prop()\n popoverMaxHeight: number;\n\n /* @deprecated /\n @Prop()\n popoverMinHeight: number = 150;\n\n /* A list of the selected options on the element. /\n @Prop({ mutable: true })\n selectedOptions: IOptionValue[] = [];\n\n /* The color of the element when in the active state. /\n @Prop({ reflect: true })\n theme: 'primary' \| 'secondary' \| 'tertiary';\n\n /* The value emitted when the component is selected. /\n @Prop({ reflect: true, mutable: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the pill is clicked or the selected options change.\n \n When multi-select is enabled, `value` will be `undefined`.\n * @legacyEvent\n /\n @Event()\n change: EventEmitter<{ value: string; values: IOptionValue[]; active: boolean }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n this.mutationObserver = null;\n }\n\n componentWillLoad() {\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true, attributes: true });\n this.mutationObserver = observer;\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n this.syncValueProperties();\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('displayChanged')\n handleSelectedDisplay() {\n if (this.multiple) return;\n this.updateSelectedOptionElements();\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.primaryBtn.focus();\n }\n\n @Listen('popoverStateChanged')\n popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n if (this.open !== open) this.open = open;\n if (open) return;\n this.optionList.setActiveElement(null);\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Emulates clicking the `<button>` to hide the popover if it is visible.\n \n @testOnly\n /\n @Method()\n async closePopover() {\n if (!this.open \|\| this.disabled) return;\n this._togglePopover();\n }\n\n /\n Emulates clicking the `<button>` to display the popover if it is hidden.\n \n @testOnly\n /\n @Method()\n async openPopover() {\n if (this.open \|\| this.disabled) return;\n this._togglePopover();\n }\n\n /\n Emulates clicking the `<button>` to display the popover and selecting the option(s) with the specified value(s).\n \n If multi-select is enabled and the `closePopover` argument is `true` (default), the popover will be closed\n * after the option(s) are selected.\n \n @testOnly\n */\n @Method()\n async setValue(values: string \| string[], options: { closePopover?: boolean } = { closePopover: true }) {\n const valueSet = new Set(Array.isArray(values) ? values : [values]);\n const allOptions = (await this.optionList?.getOptions()) as HTMLQ2OptionElement[];\n if (!this.open) {\n await this.openPopover();\n await waitForNextPaint();\n }\n\n valueSet.forEach(value => {\n allOptions.find(option => option.value === value)?.click();\n });\n\n if (options.closePopover) {\n await this.closePopover();\n await waitForNextPaint();\n }\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('selectedOptions')\n selectedOptionsChanged(newValue) {\n const { multiple } = this;\n const firstValue = newValue?.[0]?.value ?? null;\n if (multiple) {\n if (this.value) this.value = null;\n this.updateSelectedOptionElements();\n } else if (this.value === firstValue) {\n this.updateSelectedOptionElements();\n } else {\n this.value = firstValue;\n }\n }\n\n @Watch('value')\n @Watch('label')\n async valueChanged(newValue, _oldValue, propName) {\n const { label, multiple, selectedOptions, value } = this;\n const valueProxy = propName === 'value' ? newValue : value;\n const labelProxy = propName === 'label' ? newValue : label;\n if (multiple) return;\n const firstValue = selectedOptions?.[0]?.value ?? null;\n if (propName === 'value' && newValue === firstValue) this.updateSelectedOptionElements();\n else {\n const selectedOption = (await this.getOption(newValue)) as HTMLQ2OptionElement;\n const { value, display } = selectedOption \|\| { value: valueProxy, display: labelProxy };\n this.selectedOptions = value ? [{ value, display }] : [];\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get buttonContent() {\n const { label, selectedOptions, selectedOptionElements, optionCount } = this;\n\n if (!optionCount \|\| selectedOptionElements.length === 0) return loc(label);\n else if (selectedOptionElements.length === 1) return loc(selectedOptionElements[0].display);\n\n return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });\n }\n\n get truncatedButtonContent() {\n const { maxLength, buttonContent } = this;\n if (maxLength && buttonContent.length > maxLength) return `${buttonContent.substring(0, maxLength)}…`;\n else return buttonContent;\n }\n\n _togglePopover() {\n const { primaryBtn } = this;\n primaryBtn?.click();\n primaryBtn?.focus();\n primaryBtn.dispatchEvent(new FocusEvent('focus'));\n }\n\n clearSelectedOptions = () => {\n this.selectedOptions = [];\n this.value = null;\n this.active = false;\n this.open = false;\n this.primaryBtn.focus();\n this.change.emit({ value: null, values: [], active: false });\n this.scheduledAfterRender.push(resizeIframe);\n };\n\n determineOptionCount = async () => {\n if (this.optionList) {\n const allOptions = await this.optionList.getOptions();\n this.optionCount = allOptions.length;\n } else {\n const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n this.optionCount = numberOfOptions;\n }\n };\n\n executeActionSheet = async (event: MouseEvent \| KeyboardEvent) => {\n const result = await showActionSheetList(this, event);\n this.primaryBtn.focus();\n this.handleSelectionChanges(result);\n };\n\n getOption = async (value: string) => {\n if (this.optionList) {\n const options = await this.optionList.getOptions();\n return options.find(option => option.value === value);\n } else {\n return this.hostElement.querySelector<HTMLQ2OptionElement>(`q2-option[value=\"${value}\"]`);\n }\n };\n\n handleChange = event => {\n event.stopPropagation();\n if (!this.optionCount) return;\n this.handleSelectionChanges(event.detail);\n };\n\n handleClick = async (event: MouseEvent) => {\n event.stopPropagation();\n if (this.disabled) return;\n if (this.optionCount) {\n if (shouldShowActionSheet(this)) {\n this.executeActionSheet(event);\n } else {\n await this.popoverElement.toggle();\n }\n } else {\n const { value, label } = this;\n const isActive = (this.active = !this.active);\n const values = isActive ? [{ value, display: label }] : [];\n this.change.emit({\n value,\n values,\n active: isActive,\n });\n }\n };\n\n handleFocusOut = async (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n if (this.popoverElement?.contains(relatedTarget)) return;\n if (this.hostElement.contains(relatedTarget)) return;\n this.open = false;\n };\n\n handleKeydown = async (event: KeyboardEvent) => {\n const isTabMetaOrCtrl = event.metaKey \|\| event.ctrlKey \|\| event.key === 'Tab';\n if (!this.optionCount \|\| this.disabled \|\| isTabMetaOrCtrl) return;\n event.preventDefault();\n const hasSlot = this.hasPopoverTop \|\| this.hasPopoverBottom;\n\n // slots are incompatible with action sheet\n if (shouldShowActionSheet(this, event) && !hasSlot) {\n this.executeActionSheet(event);\n } else {\n this.optionList.handleExternalKeydown(event);\n }\n };\n\n handleSelectionChanges = async (changeDetails: { value?: string; values?: IOptionValue[] }) => {\n const { multiple } = this;\n const { value = '', values = [] } = changeDetails;\n const isActive = multiple ? !!values.length : !!value;\n if (!this.hostElement.onchange) {\n if (multiple) {\n this.selectedOptions = values;\n this.value = undefined;\n } else {\n const selectedOption = (await this.getOption(value)) as HTMLQ2OptionElement;\n this.selectedOptions = selectedOption\n ? [{ value: selectedOption.value, display: selectedOption.display }]\n : [];\n this.value = selectedOption?.value \|\| undefined;\n }\n }\n\n this.change.emit({\n value: multiple ? undefined : value,\n values,\n active: isActive,\n });\n };\n\n handleWrapperClick = () => {\n this.primaryBtn.focus();\n this.primaryBtn.click();\n };\n\n onClickElsewhere = (event: CustomEvent) => {\n const target = event.target as HTMLClickElsewhereElement;\n if (target.localName === 'click-elsewhere') {\n event.stopPropagation();\n const { popoverElement } = this;\n if (!popoverElement) return;\n popoverElement.open = false;\n }\n };\n\n onMutationObserved = () => {\n this.updateSlotState();\n this.determineOptionCount();\n this.updateSelectedOptionElements();\n };\n\n syncValueProperties = () => {\n const { value, selectedOptions } = this;\n if (!!selectedOptions?.length) this.selectedOptionsChanged(selectedOptions);\n else if (value) this.valueChanged(value, null, 'value');\n };\n\n updateSelectedOptionElements = async () => {\n const { selectedOptions = [] } = this;\n const selectedValues = selectedOptions.map(option => option.value);\n const options = await this.optionList?.getOptions();\n if (this.optionCount) this.active = !!selectedValues.length;\n this.selectedOptionElements =\n (options?.filter(option => selectedValues.includes(option.value)) as HTMLQ2OptionElement[]) \|\| [];\n };\n\n updateSlotState = () => {\n const { hostElement, hasPopoverTop, hasPopoverBottom } = this;\n const popTopSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-top\"]');\n const popBottomSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-bottom\"]');\n const topSlotHasNode = popTopSlot?.assignedNodes().length > 0;\n const bottomSlotHasNode = popBottomSlot?.assignedNodes().length > 0;\n\n if (hasPopoverTop !== topSlotHasNode) this.hasPopoverTop = topSlotHasNode;\n if (hasPopoverBottom !== bottomSlotHasNode) this.hasPopoverBottom = bottomSlotHasNode;\n };\n\n // #endregion\n // #region Render Methods\n\n renderHiddenElement() {\n return (\n <div\n id=\"option-description\"\n class=\"sr\"\n aria-hidden=\"true\"\n >\n {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n </div>\n );\n }\n\n renderIcon() {\n const { optionCount, active } = this;\n const isButton = optionCount && active;\n const TagName = isButton ? 'button' : 'div';\n const iconName = isButton \|\| !optionCount ? 'close' : 'chevron-down';\n\n return (\n <TagName\n class=\"btn-close\"\n onClick={(isButton && this.clearSelectedOptions) \|\| undefined}\n disabled={(isButton && this.disabled) \|\| undefined}\n aria-label={(isButton && loc('tecton.element.pill.clearSelection')) \|\| undefined}\n type={(isButton && 'button') \|\| undefined}\n >\n <q2-icon type={iconName}></q2-icon>\n </TagName>\n );\n }\n\n render() {\n const { optionCount, active, open } = this;\n const wrapperClassNames = ['btn-wrapper'];\n if (optionCount \|\| active) wrapperClassNames.push('has-icon');\n if (optionCount) wrapperClassNames.push('has-options');\n\n return (\n <click-elsewhere onChange={this.onClickElsewhere}>\n <div class={wrapperClassNames.join(' ')}>\n <div\n class=\"btn-height-wrapper\"\n ref={el => (this.primaryBtnWrapper = el)}\n onClick={this.handleWrapperClick}\n tabIndex={-1}\n >\n <button\n class=\"btn-primary\"\n test-id=\"btn-control\"\n type=\"button\"\n role={(optionCount && 'combobox') \|\| undefined}\n ref={el => (this.primaryBtn = el)}\n onClick={this.handleClick}\n onKeyDown={this.handleKeydown}\n onFocusout={this.handleFocusOut}\n disabled={this.disabled}\n aria-roledescription={!optionCount && 'filter'}\n aria-controls={(optionCount && 'option-list') \|\| undefined}\n aria-expanded={(optionCount && `${!!open}`) \|\| undefined}\n aria-label={this.buttonContent}\n aria-describedby={(optionCount && 'option-description') \|\| undefined}\n >\n {this.truncatedButtonContent}\n {!optionCount && active && <span class=\"sr\">({loc('tecton.element.pill.active')})</span>}\n </button>\n </div>\n {this.renderIcon()}\n {!!optionCount && this.renderHiddenElement()}\n </div>\n {this.optionCount > 0 && (\n <q2-popover\n ref={el => (this.popoverElement = el)}\n controlElement={this.primaryBtn}\n open={this.open}\n max-height={this.popoverMaxHeight}\n minHeight={this.popoverMinHeight}\n direction={this.popoverDirection}\n align={this.popoverAlignment}\n onFocusout={this.handleFocusOut}\n >\n <div class=\"popover-content\">\n <div\n ref={el => (this.popoverTopContainer = el)}\n class=\"popover-top-container\"\n tabindex=\"-1\"\n hidden={!this.hasPopoverTop}\n onKeyDown={this.handleKeydown}\n >\n <slot name=\"popover-top\"></slot>\n </div>\n <q2-option-list\n type=\"listbox\"\n ref={el => (this.optionList = el)}\n id=\"option-list\"\n onChange={this.handleChange}\n multiple={this.multiple}\n selectedOptions={this.selectedOptions}\n onReady={() => this.updateSelectedOptionElements()}\n label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n >\n <slot />\n </q2-option-list>\n <div\n ref={el => (this.popoverBottomContainer = el)}\n class=\"popover-bottom-container\"\n tabindex=\"-1\"\n hidden={!this.hasPopoverBottom}\n onKeyDown={this.handleKeydown}\n >\n <slot name=\"popover-bottom\"></slot>\n </div>\n </div>\n </q2-popover>\n )}\n </click-elsewhere>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":"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"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-radio-group.entry.js","sources":["src/components/q2-radio-group/q2-radio-group.scss?tag=q2-radio-group&encapsulation=shadow","src/components/q2-radio-group/q2-radio-group.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n --comp-default-radio-group-margin: #{var-list(var-prefixer(radio-group-margin-top), --app-scale-5x, 25px) 0\n var-list(var-prefixer(radio-group-margin-bottom), --app-scale-5x, 25px)};\n display: block;\n margin: var-list(--tct-radio-group-margin, --comp-default-radio-group-margin);\n}\n\nfieldset {\n padding: var(--tct-radio-group-fieldset-padding, 0);\n margin: 0;\n border: 0;\n position: relative;\n}\n\n.label-row {\n display: grid;\n grid-template-columns: 1fr 24px;\n grid-template-areas: 'label icon';\n column-gap: var(--tct-radio-group-label-column-gap, var(--app-scale-2x, 10px));\n\n q2-icon {\n grid-area: icon;\n margin-top: -2px;\n margin-bottom: -2px;\n }\n}\n\n.group-legend {\n font-weight: 600;\n}\n\nlegend.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n border: 0;\n}\n\n.optional-tag {\n margin-left: var-list(--tct-radio-group-label-optional-margin-left, --app-scale-1x, 5px);\n color: var-list(\n var-prefixer(radio-group-label-optional-color),\n var-prefixer(a11y-color),\n var-prefixer(a11y-gray-color),\n var-prefixer(gray-7),\n var-prefixer(gray-d1),\n --app-gray-d1,\n rgba(77, 77, 77, 0.77)\n );\n font-size: var-list(var-prefixer(radio-group-label-optional-font-size), 12px);\n font-weight: var-list(var-prefixer(radio-group-label-optional-font-weight), 400);\n}\n\n.tile-container {\n &,\n .options-container {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n flex-grow: 1;\n }\n}\n\n.options-container {\n --comp-default-margin: #{var-list(--app-scale-1x, 5px)} 0;\n --comp-options-margin: #{var-list(var-prefixer(radio-group-options-margin), --comp-default-margin, unquote('5px 0'))};\n margin: var(--comp-options-margin);\n padding: var-list(var-prefixer(radio-group-options-padding), --app-scale-0x, 0px);\n border-width: 1px;\n border-color: transparent;\n border-style: solid;\n border-radius: var-list(--tct-radio-group-border-radius, --app-border-radius-1, 4px);\n\n :host([has-error]) & {\n border-color: var-list(--tct-radio-group-error-border-color, --const-stoplight-alert, #d20a0a);\n }\n :host([has-error='false']) & {\n border-color: transparent;\n }\n}\n\n.tile-container {\n &.left {\n justify-content: start;\n }\n &.right {\n justify-content: end;\n }\n\n .options-container {\n gap: var-list(var-prefixer(radio-group-tile-gap), --app-scale-2x, 10px);\n justify-content: inherit;\n }\n}\n","import {\n Component,\n Prop,\n Element,\n h,\n Listen,\n EventEmitter,\n Event,\n ComponentInterface,\n Watch,\n Fragment,\n Method,\n} from '@stencil/core';\nimport { createGuid, isEventFromElement, overrideFocus, renderLabel } from 'src/utils';\n\n/** @slot label - An optional slot to display a custom label. /\n@Component({ tag: 'q2-radio-group', shadow: true, styleUrl: 'q2-radio-group.scss' })\nexport class Q2RadioGroup implements ComponentInterface {\n // #region Own Properties\n\n _id: string = `radio-group-${createGuid()}`;\n mutationObserver: MutationObserver;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /* Determines if all radios in the group are put into a `disabled` state. /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /* Determines if the component should display in an errant state. /\n @Prop({ reflect: true })\n hasError: boolean = false;\n\n /\n Hide's the group's `<label>` element from view.\n * @warning\n * Only use when a visible label is impractical.\n /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n Text for the fieldset legend describing the radio group.\n * @localizable\n /\n @Prop({ reflect: true })\n label: string;\n\n /* Identifier which ties all radios together for accessibility and DOM selection. /\n @Prop({ reflect: true })\n name: string;\n\n /* Appends \"(optional)\" to the group label, and sets `aria-required` on the nested input tag to `false`. /\n @Prop({ reflect: true })\n optional: boolean;\n\n /* Determines if all radios in the group can be focused, but not interacted with. /\n @Prop({ reflect: true })\n readonly: boolean;\n\n /* Provides alignment direction for tile-style radio group. /\n @Prop({ reflect: true })\n tileAlignment: 'left' \| 'center' \| 'right' = 'center';\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n tilelayout: boolean;\n\n /* Show the radio group as a horizontal set of tiles. /\n @Prop({ reflect: true, mutable: true })\n tileLayout: boolean;\n\n /* The `value` of the currently selected `q2-radio` within the `q2-radio-group`. /\n @Prop({ mutable: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the value of the radio group changes.\n * @legacyEvent\n /\n @Event()\n change: EventEmitter<{ value: string }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n this.checkedRadioExists();\n this.onMutationObserved();\n this.handleDeprecatedTilelayout(this.tilelayout);\n }\n\n componentDidLoad() {\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true });\n this.mutationObserver = observer;\n overrideFocus(this.hostElement);\n this.checkedRadioExists();\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n onHostElementChange(event: CustomEvent) {\n if (event.target === this.hostElement) {\n if (!this.hostElement.onchange) {\n this.value = event.detail.value;\n }\n }\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n const radio = this.hostElement.querySelector('q2-radio[checked]') \|\| this.hostElement.querySelector('q2-radio');\n radio?.dispatchEvent(new FocusEvent('focus'));\n }\n\n @Listen('keydown')\n keydownHandler(event: KeyboardEvent) {\n const currentValue = (event.target as HTMLElement).getAttribute('value') \|\| this.value;\n let index = this.radioElements.findIndex(\n el => el === event.target \|\| (el as HTMLElement).getAttribute('value') === currentValue\n );\n let sign = 0;\n switch (event.key) {\n case 'ArrowLeft':\n case 'ArrowUp':\n sign = -1;\n break;\n\n case 'ArrowRight':\n case 'ArrowDown':\n sign = 1;\n break;\n }\n\n if (index === -1 \|\| sign === 0) {\n return;\n }\n index += sign;\n index = sign < 0 ? Math.max(0, index) : Math.min(this.radioElements.length - 1, index);\n event.preventDefault();\n if (!this.readonly) {\n this.value = this.radioElements[index].value;\n }\n this.radioElements[index].dispatchEvent(new FocusEvent('focus'));\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Emulates clicking the `<q2-radio>` option with the provided value.\n \n @testOnly\n */\n @Method()\n setValue(value: string) {\n this.radioElements.forEach(radio => {\n if (value !== radio.value) return;\n radio.click();\n });\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('disabled')\n disabledUpdated() {\n this.radioElements.forEach(radio => {\n radio.groupDisabled = this.disabled;\n });\n }\n\n @Watch('name')\n nameUpdated() {\n this.radioElements.forEach(radio => {\n radio.name = this.name \|\| this._id;\n });\n }\n\n @Watch('readonly')\n readonlyUpdated() {\n const readonly = this.readonly;\n this.radioElements.forEach(radio => (radio.groupReadonly = readonly));\n }\n\n @Watch('tilelayout')\n handleDeprecatedTilelayout(tilelayout: boolean) {\n if (typeof tilelayout !== 'boolean') return;\n this.tileLayout = tilelayout;\n this.tilelayout = undefined;\n }\n\n @Watch('tileLayout')\n tileLayoutUpdated(tileLayout: boolean) {\n this.radioElements.forEach(radio => {\n radio.groupTileLayout = tileLayout;\n });\n }\n\n @Watch('value')\n valueUpdated(newVal: string) {\n this.radioElements.forEach(radio => {\n radio.checked = newVal === radio.value;\n // Removes checked attribute from trailing radios, if multiple individual radio's are intially checked (checked={true}) at componentDidLoad\n if (!radio.checked) {\n radio.removeAttribute('checked');\n radio.tabIndex = -1;\n } else if (radio.checked) {\n radio.tabIndex = 0;\n }\n });\n }\n\n // #endregion\n // #region Local Methods\n\n get inputId() {\n return this._id;\n }\n\n get radioElements() {\n return Array.from(this.hostElement.querySelectorAll('q2-radio')) as HTMLQ2RadioElement[];\n }\n\n checkedRadioExists = () => {\n // Returns first checked individual q2-radio or undefined if none are set to checked={true}\n const firstCheckedRadio = this.radioElements.find(radio => radio.checked === true) \|\| undefined;\n\n // Changes radio-group[\"value\"] if inital value is not set and if a any individual q2-radio is checked\n if (!this.value && !!firstCheckedRadio) {\n this.value = firstCheckedRadio.value;\n } else if (!this.value && !firstCheckedRadio) {\n // if no radios are meant to be checked, then assign first radio tabIndex of 0\n if (this.radioElements.length) this.radioElements[0].tabIndex = 0;\n }\n };\n\n inputDom() {\n if (this.tileLayout) {\n const { tileAlignment } = this;\n const alignment = ['left', 'center', 'right'].includes(tileAlignment) ? tileAlignment : 'center';\n return (\n <div class={`tile-container ${alignment}`}>\n <div class=\"options-container\">\n <slot />\n </div>\n </div>\n );\n } else {\n return (\n <div class=\"options-container\">\n <slot />\n </div>\n );\n }\n }\n\n onInnerRadioChange = (event: CustomEvent) => {\n event.stopImmediatePropagation();\n if (this.readonly) return;\n\n this.change.emit({ value: event.detail.value });\n };\n\n onMutationObserved = () => {\n this.valueUpdated(this.value);\n this.nameUpdated();\n this.disabledUpdated();\n this.readonlyUpdated();\n this.tileLayoutUpdated(this.tileLayout);\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n const showLabel = this.label \|\| this.optional \|\| this.readonly;\n const { hasError } = this;\n const showLabelRow = (showLabel && !this.hideLabel) \|\| hasError;\n return (\n <Fragment>\n {showLabelRow && (\n <div class=\"label-row\">\n {showLabel && !this.hideLabel && <div class=\"group-legend\">{renderLabel(this)}</div>}\n {hasError && (\n <q2-icon\n type=\"error\"\n test-id=\"iconError\"\n ></q2-icon>\n )}\n </div>\n )}\n <fieldset\n onChange={this.onInnerRadioChange}\n aria-invalid={hasError ? `${hasError}` : undefined}\n >\n {showLabel && <legend class=\"sr-only\">{renderLabel(this)}</legend>}\n {this.inputDom()}\n </fieldset>\n </Fragment>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"q2-radio-group.entry.js","sources":["src/components/q2-radio-group/q2-radio-group.scss?tag=q2-radio-group&encapsulation=shadow","src/components/q2-radio-group/q2-radio-group.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n --comp-default-radio-group-margin: #{var-list(var-prefixer(radio-group-margin-top), --app-scale-5x, 25px) 0\n var-list(var-prefixer(radio-group-margin-bottom), --app-scale-5x, 25px)};\n display: block;\n margin: var-list(--tct-radio-group-margin, --comp-default-radio-group-margin);\n}\n\nfieldset {\n padding: var(--tct-radio-group-fieldset-padding, 0);\n margin: 0;\n border: 0;\n position: relative;\n}\n\n.label-row {\n display: grid;\n grid-template-columns: 1fr 24px;\n grid-template-areas: 'label icon';\n column-gap: var(--tct-radio-group-label-column-gap, var(--app-scale-2x, 10px));\n\n color: var-list(--tct-radio-group-label-font-color, inherit);\n font-size: var-list(--tct-radio-group-label-font-size, inherit);\n font-weight: var-list(--tct-radio-group-label-font-weight, 600);\n text-transform: var-list(--tct-radio-group-label-text-transform, none);\n letter-spacing: var-list(--tct-radio-group-label-letter-spacing, inherit);\n\n q2-icon {\n grid-area: icon;\n margin-top: -2px;\n margin-bottom: -2px;\n }\n}\n\n.group-legend {\n font-weight: 600;\n}\n\nlegend.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n border: 0;\n}\n\n.optional-tag {\n margin-left: var-list(--tct-radio-group-label-optional-margin-left, --app-scale-1x, 5px);\n color: var-list(\n var-prefixer(radio-group-label-optional-color),\n var-prefixer(a11y-color),\n var-prefixer(a11y-gray-color),\n var-prefixer(gray-7),\n var-prefixer(gray-d1),\n --app-gray-d1,\n rgba(77, 77, 77, 0.77)\n );\n font-size: var-list(var-prefixer(radio-group-label-optional-font-size), 12px);\n font-weight: var-list(var-prefixer(radio-group-label-optional-font-weight), 400);\n}\n\n.tile-container {\n &,\n .options-container {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n flex-grow: 1;\n }\n}\n\n.options-container {\n --comp-default-margin: #{var-list(--app-scale-1x, 5px)} 0;\n --comp-options-margin: #{var-list(var-prefixer(radio-group-options-margin), --comp-default-margin, unquote('5px 0'))};\n margin: var(--comp-options-margin);\n padding: var-list(var-prefixer(radio-group-options-padding), --app-scale-0x, 0px);\n border-width: 1px;\n border-color: transparent;\n border-style: solid;\n border-radius: var-list(--tct-radio-group-border-radius, --app-border-radius-1, 4px);\n\n :host([has-error]) & {\n border-color: var-list(--tct-radio-group-error-border-color, --const-stoplight-alert, #d20a0a);\n }\n :host([has-error='false']) & {\n border-color: transparent;\n }\n}\n\n.tile-container {\n &.left {\n justify-content: start;\n }\n &.right {\n justify-content: end;\n }\n\n .options-container {\n gap: var-list(var-prefixer(radio-group-tile-gap), --app-scale-2x, 10px);\n justify-content: inherit;\n }\n}\n","import {\n Component,\n Prop,\n Element,\n h,\n Listen,\n EventEmitter,\n Event,\n ComponentInterface,\n Watch,\n Fragment,\n Method,\n} from '@stencil/core';\nimport { createGuid, isEventFromElement, overrideFocus, renderLabel } from 'src/utils';\n\n/** @slot label - An optional slot to display a custom label. /\n@Component({ tag: 'q2-radio-group', shadow: true, styleUrl: 'q2-radio-group.scss' })\nexport class Q2RadioGroup implements ComponentInterface {\n // #region Own Properties\n\n _id: string = `radio-group-${createGuid()}`;\n mutationObserver: MutationObserver;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /* Determines if all radios in the group are put into a `disabled` state. /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /* Determines if the component should display in an errant state. /\n @Prop({ reflect: true })\n hasError: boolean = false;\n\n /\n Hide's the group's `<label>` element from view.\n * @warning\n * Only use when a visible label is impractical.\n /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n Text for the fieldset legend describing the radio group.\n * @localizable\n /\n @Prop({ reflect: true })\n label: string;\n\n /* Identifier which ties all radios together for accessibility and DOM selection. /\n @Prop({ reflect: true })\n name: string;\n\n /* Appends \"(optional)\" to the group label, and sets `aria-required` on the nested input tag to `false`. /\n @Prop({ reflect: true })\n optional: boolean;\n\n /* Determines if all radios in the group can be focused, but not interacted with. /\n @Prop({ reflect: true })\n readonly: boolean;\n\n /* Provides alignment direction for tile-style radio group. /\n @Prop({ reflect: true })\n tileAlignment: 'left' \| 'center' \| 'right' = 'center';\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n tilelayout: boolean;\n\n /* Show the radio group as a horizontal set of tiles. /\n @Prop({ reflect: true, mutable: true })\n tileLayout: boolean;\n\n /* The `value` of the currently selected `q2-radio` within the `q2-radio-group`. /\n @Prop({ mutable: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the value of the radio group changes.\n * @legacyEvent\n /\n @Event()\n change: EventEmitter<{ value: string }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n this.checkedRadioExists();\n this.onMutationObserved();\n this.handleDeprecatedTilelayout(this.tilelayout);\n }\n\n componentDidLoad() {\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true });\n this.mutationObserver = observer;\n overrideFocus(this.hostElement);\n this.checkedRadioExists();\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n onHostElementChange(event: CustomEvent) {\n if (event.target === this.hostElement) {\n if (!this.hostElement.onchange) {\n this.value = event.detail.value;\n }\n }\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n const radio = this.hostElement.querySelector('q2-radio[checked]') \|\| this.hostElement.querySelector('q2-radio');\n radio?.dispatchEvent(new FocusEvent('focus'));\n }\n\n @Listen('keydown')\n keydownHandler(event: KeyboardEvent) {\n const currentValue = (event.target as HTMLElement).getAttribute('value') \|\| this.value;\n let index = this.radioElements.findIndex(\n el => el === event.target \|\| (el as HTMLElement).getAttribute('value') === currentValue\n );\n let sign = 0;\n switch (event.key) {\n case 'ArrowLeft':\n case 'ArrowUp':\n sign = -1;\n break;\n\n case 'ArrowRight':\n case 'ArrowDown':\n sign = 1;\n break;\n }\n\n if (index === -1 \|\| sign === 0) {\n return;\n }\n index += sign;\n index = sign < 0 ? Math.max(0, index) : Math.min(this.radioElements.length - 1, index);\n event.preventDefault();\n if (!this.readonly) {\n this.value = this.radioElements[index].value;\n }\n this.radioElements[index].dispatchEvent(new FocusEvent('focus'));\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Emulates clicking the `<q2-radio>` option with the provided value.\n \n @testOnly\n */\n @Method()\n setValue(value: string) {\n this.radioElements.forEach(radio => {\n if (value !== radio.value) return;\n radio.click();\n });\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('disabled')\n disabledUpdated() {\n this.radioElements.forEach(radio => {\n radio.groupDisabled = this.disabled;\n });\n }\n\n @Watch('name')\n nameUpdated() {\n this.radioElements.forEach(radio => {\n radio.name = this.name \|\| this._id;\n });\n }\n\n @Watch('readonly')\n readonlyUpdated() {\n const readonly = this.readonly;\n this.radioElements.forEach(radio => (radio.groupReadonly = readonly));\n }\n\n @Watch('tilelayout')\n handleDeprecatedTilelayout(tilelayout: boolean) {\n if (typeof tilelayout !== 'boolean') return;\n this.tileLayout = tilelayout;\n this.tilelayout = undefined;\n }\n\n @Watch('tileLayout')\n tileLayoutUpdated(tileLayout: boolean) {\n this.radioElements.forEach(radio => {\n radio.groupTileLayout = tileLayout;\n });\n }\n\n @Watch('value')\n valueUpdated(newVal: string) {\n this.radioElements.forEach(radio => {\n radio.checked = newVal === radio.value;\n // Removes checked attribute from trailing radios, if multiple individual radio's are intially checked (checked={true}) at componentDidLoad\n if (!radio.checked) {\n radio.removeAttribute('checked');\n radio.tabIndex = -1;\n } else if (radio.checked) {\n radio.tabIndex = 0;\n }\n });\n }\n\n // #endregion\n // #region Local Methods\n\n get inputId() {\n return this._id;\n }\n\n get radioElements() {\n return Array.from(this.hostElement.querySelectorAll('q2-radio')) as HTMLQ2RadioElement[];\n }\n\n checkedRadioExists = () => {\n // Returns first checked individual q2-radio or undefined if none are set to checked={true}\n const firstCheckedRadio = this.radioElements.find(radio => radio.checked === true) \|\| undefined;\n\n // Changes radio-group[\"value\"] if inital value is not set and if a any individual q2-radio is checked\n if (!this.value && !!firstCheckedRadio) {\n this.value = firstCheckedRadio.value;\n } else if (!this.value && !firstCheckedRadio) {\n // if no radios are meant to be checked, then assign first radio tabIndex of 0\n if (this.radioElements.length) this.radioElements[0].tabIndex = 0;\n }\n };\n\n inputDom() {\n if (this.tileLayout) {\n const { tileAlignment } = this;\n const alignment = ['left', 'center', 'right'].includes(tileAlignment) ? tileAlignment : 'center';\n return (\n <div class={`tile-container ${alignment}`}>\n <div class=\"options-container\">\n <slot />\n </div>\n </div>\n );\n } else {\n return (\n <div class=\"options-container\">\n <slot />\n </div>\n );\n }\n }\n\n onInnerRadioChange = (event: CustomEvent) => {\n event.stopImmediatePropagation();\n if (this.readonly) return;\n\n this.change.emit({ value: event.detail.value });\n };\n\n onMutationObserved = () => {\n this.valueUpdated(this.value);\n this.nameUpdated();\n this.disabledUpdated();\n this.readonlyUpdated();\n this.tileLayoutUpdated(this.tileLayout);\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n const showLabel = this.label \|\| this.optional \|\| this.readonly;\n const { hasError } = this;\n const showLabelRow = (showLabel && !this.hideLabel) \|\| hasError;\n return (\n <Fragment>\n {showLabelRow && (\n <div class=\"label-row\">\n {showLabel && !this.hideLabel && <div class=\"group-legend\">{renderLabel(this)}</div>}\n {hasError && (\n <q2-icon\n type=\"error\"\n test-id=\"iconError\"\n ></q2-icon>\n )}\n </div>\n )}\n <fieldset\n onChange={this.onInnerRadioChange}\n aria-invalid={hasError ? `${hasError}` : undefined}\n >\n {showLabel && <legend class=\"sr-only\">{renderLabel(this)}</legend>}\n {this.inputDom()}\n </fieldset>\n </Fragment>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":"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"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-radio.entry.js","sources":["src/components/q2-radio/q2-radio.scss?tag=q2-radio&encapsulation=shadow","src/components/q2-radio/q2-radio.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n.radio-container {\n --comp-radio-margin: #{var-list(\n --tct-radio-margin,\n unquote(\n '#{var-list(--tct-radio-margin-vertical, --tct-scale-2, 10px)} #{var-list(--tct-radio-margin-horizontal, --tct-scale-3, 15px)}'\n )\n )};\n margin: var(--comp-radio-margin);\n\n label[for] {\n color: var-list(--tct-radio-label-color, inherit);\n font-weight: var-list(--tct-radio-font-weight, --tct-checkbox-font-weight, 400);\n align-items: center;\n cursor: pointer;\n margin-right: var-list(--tct-radio-label-margin-right, 1rem);\n display: grid;\n grid-template-columns: 18px 1fr;\n gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n\n &.label-hidden {\n grid-template-columns: var(--tct-radio-label-hidden-columns, 18px 1fr);\n }\n }\n\n svg {\n border-radius: 50%;\n transition: box-shadow var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n outline: 0;\n width: 100%;\n }\n\n circle:nth-child(1) {\n stroke-width: 2;\n stroke: var-list(--tct-radio-stroke-color, --t-a11y-gray-color-AA, #949494);\n fill: var-list(--tct-radio-background-fill, transparent);\n }\n\n input {\n &:checked {\n & + label circle:nth-child(1) {\n fill: var-list(--tct-radio-checked-background-fill, --tct-radio-checked-bg, transparent);\n stroke: var-list(\n --tct-radio-checked-stroke-color,\n --tct-radio-stroke-color,\n --t-a11y-gray-color-AA,\n #949494\n );\n }\n & + label .label-content {\n font-weight: var-list(--tct-radio-checked-label-font-weight, --tct-checkbox-selected-font-weight, 600);\n letter-spacing: var-list(\n --tct-radio-checked-label-letter-spacing,\n --tct-checkbox-selected-letter-spacing,\n 0.25\n );\n color: var-list(--tct-radio-checked-label-font-color, --tct-radio-checked-label-color, inherit);\n }\n & + label circle:nth-child(2) {\n fill: var-list(--tct-radio-checked-fill, --tct-checkbox-check-stroke-color, --t-checkbox-fill, #2e2e2e);\n }\n }\n\n &:hover {\n & + label circle:nth-child(1) {\n fill: var-list(--tct-radio-hover-background-fill, transparent);\n stroke: var-list(\n --tct-radio-hover-stroke-color,\n --tct-radio-stroke-color,\n --t-a11y-gray-color-AA,\n #949494\n );\n }\n & + label .label-content {\n color: var-list(--tct-radio-hover-label-color, inherit);\n }\n }\n\n &:focus {\n & + label circle:nth-child(1) {\n fill: var-list(--tct-radio-focus-background-fill, transparent);\n stroke: var-list(\n --tct-radio-focus-stroke-color,\n --tct-checkbox-check-stroke-color,\n --t-checkbox-fill,\n #2e2e2e\n );\n }\n & + label .label-content {\n color: var-list(--tct-radio-focus-label-color, --tct-radio-checked-label-color, inherit);\n }\n }\n\n &:focus-visible {\n & + label svg {\n box-shadow: var(--const-double-focus-ring);\n }\n }\n }\n}\n\n.radio-tile {\n flex-basis: 100px;\n flex-grow: 0;\n flex-wrap: wrap;\n\n label[for] {\n color: var-list(--tct-radio-label-font-color, --tct-radio-label-color, inherit);\n align-items: center;\n border-radius: 3px;\n border: 2px solid var-list(--tct-radio-stroke-color, --t-a11y-gray-color-AA, #949494);\n background: var-list(--tct-radio-background-fill, transparent);\n cursor: pointer;\n display: block;\n padding: 10px;\n position: relative;\n text-align: center;\n transition: border-color var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n white-space: nowrap;\n }\n\n input {\n &:checked + label {\n border-color: var-list(\n --tct-radio-checked-stroke-color,\n var-prefixer(checkbox-check-stroke-color),\n --t-checkbox-fill,\n #2e2e2e\n );\n box-shadow: inset 0 0 0 2px #ffffff;\n background: var-list(--tct-radio-checked-background-fill, transparent);\n color: var-list(--tct-radio-checked-label-color, inherit);\n\n &:after {\n border-bottom-width: 3px;\n border-bottom: 5px solid\n var-list(\n --tct-radio-checked-stroke-color,\n var-prefixer(checkbox-check-stroke-color),\n --t-checkbox-fill,\n #2e2e2e\n );\n border-left-width: 5px;\n border-left: 8px solid transparent;\n border-right-width: 5px;\n border-right: 8px solid transparent;\n bottom: 0;\n content: '';\n height: 0;\n left: 50%;\n margin-left: -5px;\n position: absolute;\n width: 0;\n }\n }\n\n &:hover + label {\n border-color: var-list(\n --tct-radio-hover-stroke-color,\n --tct-radio-stroke-color,\n --t-a11y-gray-color-AA,\n #949494\n );\n background: var-list(--tct-radio-hover-background-fill, transparent);\n color: var-list(--tct-radio-hover-label-color, --tct-radio-label-color, inherit);\n }\n\n &:focus + label,\n &:focus:checked + label {\n border-color: var-list(\n --tct-radio-focus-stroke-color,\n var-prefixer(checkbox-check-stroke-color),\n --t-checkbox-fill,\n #2e2e2e\n );\n background: var-list(--tct-radio-focus-background-fill, transparent);\n box-shadow: var(--const-double-focus-ring), var-list(--tct-global-focus, unquote('0 0 0 2px #33b4ff'));\n color: var-list(--tct-radio-focus-label-color, --tct-radio-checked-label-color, inherit);\n }\n }\n}\n\ninput:disabled + label[for] {\n cursor: not-allowed;\n opacity: var-list(--tct-disabled-opacity, --app-disabled-opacity, 0.4);\n}\n","import { Component, Prop, h, Element, ComponentInterface, Listen, Watch, Event, EventEmitter } from '@stencil/core';\nimport { createGuid, handleAriaLabel, loc, overrideFocus } from 'src/utils';\n\n@Component({ tag: 'q2-radio', shadow: true, styleUrl: 'q2-radio.scss' })\nexport class Q2Radio implements ComponentInterface {\n // #region Own Properties\n\n _id: string = `radio-${createGuid()}`;\n inputField: HTMLInputElement;\n isLoaded: boolean = false;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /** @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n /* The state of the radio. This modifies the visual appearance of the element. /\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /* Disables the radio and prevents interaction. /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /\n Used by q2-radio-group to disable all options in the group\n * @private\n /\n @Prop({ reflect: false })\n groupDisabled: boolean = false;\n\n /\n Used by q2-radio-group to make all options in the group readonly\n * @private\n /\n @Prop({ reflect: false })\n groupReadonly: boolean = false;\n\n /\n Used by q2-radio-group to make the options display as tiles\n * @private\n /\n @Prop({ reflect: false })\n groupTileLayout: boolean = false;\n\n /\n Hide's the field's `<label>` element from view.\n \n @warning\n * Only use when a visible label is impractical.\n /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n The text that describes the individual radio option.\n * @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string;\n\n /\n Used by q2-radio-group to apply a name to all options in the group\n * @private\n /\n @Prop({ reflect: true })\n name: string;\n\n /* The radio is non-interactive, but remains focusable. /\n @Prop({ reflect: true })\n readonly: boolean;\n\n /* @private /\n @Prop()\n tabIndex: number = 0;\n\n /* The value that is returned in the `change` event that is emitted from the `q2-radio-group`. /\n @Prop({ reflect: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the radio is checked.\n */\n @Event()\n change: EventEmitter<{ value: string }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n handleAriaLabel(this);\n }\n\n componentDidLoad(): void {\n this.isLoaded = true;\n overrideFocus(this.hostElement);\n this.hostElement.click = () => {\n this.inputField.focus();\n this.inputField.click();\n };\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('click')\n onHostClick(event: Event) {\n if (this.disabled) {\n event.stopImmediatePropagation();\n } else if (this.groupReadonly) {\n event.preventDefault();\n event.stopImmediatePropagation();\n this.inputField.focus();\n }\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (event.target === this.hostElement) {\n this.inputField.focus();\n }\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n @Watch('checked')\n checkedObserver() {\n if (!this.isLoaded) return;\n if (!this.checked) return;\n this.change.emit({ value: this.value });\n }\n\n // #endregion\n // #region Local Methods\n\n inputChange = (event: Event) => {\n event.stopPropagation();\n if (this.disabled \|\| this.readonly \|\| this.groupReadonly \|\| this.groupDisabled) {\n event.preventDefault();\n return false;\n }\n\n if (event.target instanceof HTMLInputElement) {\n this.checked = event.target.checked;\n }\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div class={this.groupTileLayout ? 'radio-tile' : 'radio-container'}>\n <input\n ref={el => (this.inputField = el)}\n class=\"sr\"\n id={this._id}\n type=\"radio\"\n name={this.name}\n value={this.value}\n disabled={this.disabled \|\| this.groupDisabled}\n checked={this.checked}\n aria-label={this.label && this.hideLabel ? loc(this.label) : undefined}\n onChange={this.inputChange}\n test-id=\"q2RadioInnerRadioBox\"\n ></input>\n\n <label\n htmlFor={this._id}\n class={this.hideLabel ? 'label-hidden' : undefined}\n test-id=\"radioButton\"\n >\n {!this.groupTileLayout && (\n <svg viewBox=\"0 0 18 18\">\n <circle\n stroke=\"none\"\n fill=\"none\"\n cx=\"9\"\n cy=\"9\"\n r=\"8\"\n />\n <circle\n stroke=\"none\"\n fill=\"none\"\n cx=\"9\"\n cy=\"9\"\n r=\"4\"\n />\n </svg>\n )}\n {!this.hideLabel && (\n <div class=\"label-content\">\n {(this.label && loc(this.label)) \|\| ''}\n <slot></slot>\n </div>\n )}\n </label>\n </div>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,UAAU,GAAG,swKAAswK;;MCI5wK,OAAO,GAAA,MAAA;AADpB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAII,QAAA,IAAA,CAAA,GAAG,GAAW,SAAS,UAAU,EAAE,EAAE;AAErC,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAiBzB,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;;AAIxB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEzB;;;AAGG;AAEH,QAAA,IAAa,CAAA,aAAA,GAAY,KAAK;AAE9B;;;AAGG;AAEH,QAAA,IAAa,CAAA,aAAA,GAAY,KAAK;AAE9B;;;AAGG;AAEH,QAAA,IAAe,CAAA,eAAA,GAAY,KAAK;;AA+BhC,QAAA,IAAQ,CAAA,QAAA,GAAW,CAAC;;;AAsEpB,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAY,KAAI;YAC3B,KAAK,CAAC,eAAe,EAAE;AACvB,YAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,EAAE;gBAC5E,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,OAAO,KAAK;;AAGhB,YAAA,IAAI,KAAK,CAAC,MAAM,YAAY,gBAAgB,EAAE;gBAC1C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO;;AAE3C,SAAC;AAyDJ;;;IAvHG,iBAAiB,GAAA;QACb,eAAe,CAAC,IAAI,CAAC;;IAGzB,gBAAgB,GAAA;AACZ,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACpB,QAAA,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC;AAC/B,QAAA,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,MAAK;AAC1B,YAAA,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE;AACvB,YAAA,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE;AAC3B,SAAC;;;;AAOL,IAAA,WAAW,CAAC,KAAY,EAAA;AACpB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,KAAK,CAAC,wBAAwB,EAAE;;AAC7B,aAAA,IAAI,IAAI,CAAC,aAAa,EAAE;YAC3B,KAAK,CAAC,cAAc,EAAE;YACtB,KAAK,CAAC,wBAAwB,EAAE;AAChC,YAAA,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE;;;AAK/B,IAAA,aAAa,CAAC,KAAiB,EAAA;QAC3B,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,EAAE;AACnC,YAAA,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE;;;;;IAQ/B,iBAAiB,GAAA;QACb,eAAe,CAAC,IAAI,CAAC;;IAIzB,eAAe,GAAA;QACX,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE;QACpB,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE;AACnB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;;;;IAqB3C,MAAM,GAAA;AACF,QAAA,QACI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,IAAI,CAAC,eAAe,GAAG,YAAY,GAAG,iBAAiB,EAAA,EAC/D,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,EACjC,KAAK,EAAC,IAAI,EACV,EAAE,EAAE,IAAI,CAAC,GAAG,EACZ,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa,EAC7C,OAAO,EAAE,IAAI,CAAC,OAAO,gBACT,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,SAAS,EACtE,QAAQ,EAAE,IAAI,CAAC,WAAW,EAAA,SAAA,EAClB,sBAAsB,EACzB,CAAA,EAET,CACI,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,IAAI,CAAC,GAAG,EACjB,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,cAAc,GAAG,SAAS,aAC1C,aAAa,EAAA,EAEpB,CAAC,IAAI,CAAC,eAAe,KAClB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,WAAW,EAAA,EACpB,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,MAAM,EAAC,MAAM,EACb,IAAI,EAAC,MAAM,EACX,EAAE,EAAC,GAAG,EACN,EAAE,EAAC,GAAG,EACN,CAAC,EAAC,GAAG,EACP,CAAA,EACF,CACI,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,MAAM,EAAC,MAAM,EACb,IAAI,EAAC,MAAM,EACX,EAAE,EAAC,GAAG,EACN,EAAE,EAAC,GAAG,EACN,CAAC,EAAC,GAAG,EACP,CAAA,CACA,CACT,EACA,CAAC,IAAI,CAAC,SAAS,KACZ,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACrB,CAAC,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,EACtC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACX,CACT,CACG,CACN;;;;;;;;;;;;"}
1	+ {"version":3,"file":"q2-radio.entry.js","sources":["src/components/q2-radio/q2-radio.scss?tag=q2-radio&encapsulation=shadow","src/components/q2-radio/q2-radio.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n.radio-container {\n --comp-radio-margin: #{var-list(\n --tct-radio-margin,\n unquote(\n '#{var-list(--tct-radio-margin-vertical, --tct-scale-2, 10px)} #{var-list(--tct-radio-margin-horizontal, --tct-scale-3, 15px)}'\n )\n )};\n margin: var(--comp-radio-margin);\n\n label[for] {\n color: var-list(--tct-radio-label-font-color, --tct-radio-label-color, inherit);\n font-weight: var-list(--tct-radio-font-weight, --tct-checkbox-font-weight, 400);\n align-items: center;\n cursor: pointer;\n margin-right: var-list(--tct-radio-label-margin-right, 1rem);\n display: grid;\n grid-template-columns: 18px 1fr;\n gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n\n &.label-hidden {\n grid-template-columns: var(--tct-radio-label-hidden-columns, 18px 1fr);\n }\n }\n\n svg {\n border-radius: 50%;\n transition: box-shadow var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n outline: 0;\n width: 100%;\n box-shadow: var-list(--tct-radio-box-shadow, none);\n }\n\n circle:nth-child(1) {\n stroke-width: var-list(--tct-radio-stroke-width, 2);\n stroke: var-list(--tct-radio-stroke-color, --t-a11y-gray-color-AA, #949494);\n fill: var-list(--tct-radio-background-fill, transparent);\n transition: fill var-list(--tct-checkbox-tween, --app-tween-2, unquote('0.4s ease'));\n }\n\n input {\n &:checked {\n & + label circle:nth-child(1) {\n fill: var-list(--tct-radio-checked-background-fill, --tct-radio-checked-bg, transparent);\n stroke: var-list(\n --tct-radio-checked-stroke-color,\n --tct-radio-stroke-color,\n --t-a11y-gray-color-AA,\n #949494\n );\n }\n & + label .label-content {\n font-weight: var-list(--tct-radio-checked-label-font-weight, --tct-checkbox-selected-font-weight, 600);\n letter-spacing: var-list(\n --tct-radio-checked-label-letter-spacing,\n --tct-checkbox-selected-letter-spacing,\n 0.25\n );\n color: var-list(--tct-radio-checked-label-font-color, --tct-radio-checked-label-color, inherit);\n }\n & + label circle:nth-child(2) {\n fill: var-list(--tct-radio-checked-fill, --tct-checkbox-check-stroke-color, --t-checkbox-fill, #2e2e2e);\n }\n }\n\n &:hover {\n & + label circle:nth-child(1) {\n fill: var-list(--tct-radio-hover-background-fill, transparent);\n stroke: var-list(\n --tct-radio-hover-stroke-color,\n --tct-radio-stroke-color,\n --t-a11y-gray-color-AA,\n #949494\n );\n }\n & + label .label-content {\n color: var-list(--tct-radio-hover-label-color, inherit);\n }\n }\n\n &:focus {\n & + label circle:nth-child(1) {\n fill: var-list(--tct-radio-focus-background-fill, transparent);\n stroke: var-list(\n --tct-radio-focus-stroke-color,\n --tct-checkbox-check-stroke-color,\n --t-checkbox-fill,\n #2e2e2e\n );\n }\n & + label .label-content {\n color: var-list(--tct-radio-focus-label-color, --tct-radio-checked-label-color, inherit);\n }\n }\n\n &:focus-visible {\n & + label svg {\n box-shadow: var(--tct-radio-focus-box-shadow, --const-double-focus-ring);\n }\n }\n }\n}\n\n.radio-tile {\n flex-basis: 100px;\n flex-grow: 0;\n flex-wrap: wrap;\n\n label[for] {\n color: var-list(--tct-radio-label-font-color, --tct-radio-label-color, inherit);\n align-items: center;\n border-radius: 3px;\n border: 2px solid var-list(--tct-radio-stroke-color, --t-a11y-gray-color-AA, #949494);\n background: var-list(--tct-radio-background-fill, transparent);\n cursor: pointer;\n display: block;\n padding: 10px;\n position: relative;\n text-align: center;\n transition: border-color var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n white-space: nowrap;\n }\n\n input {\n &:checked + label {\n border-color: var-list(\n --tct-radio-checked-stroke-color,\n var-prefixer(checkbox-check-stroke-color),\n --t-checkbox-fill,\n #2e2e2e\n );\n box-shadow: inset 0 0 0 2px #ffffff;\n background: var-list(--tct-radio-checked-background-fill, transparent);\n color: var-list(--tct-radio-checked-label-color, inherit);\n\n &:after {\n border-bottom-width: 3px;\n border-bottom: 5px solid\n var-list(\n --tct-radio-checked-stroke-color,\n var-prefixer(checkbox-check-stroke-color),\n --t-checkbox-fill,\n #2e2e2e\n );\n border-left-width: 5px;\n border-left: 8px solid transparent;\n border-right-width: 5px;\n border-right: 8px solid transparent;\n bottom: 0;\n content: '';\n height: 0;\n left: 50%;\n margin-left: -5px;\n position: absolute;\n width: 0;\n }\n }\n\n &:hover + label {\n border-color: var-list(\n --tct-radio-hover-stroke-color,\n --tct-radio-stroke-color,\n --t-a11y-gray-color-AA,\n #949494\n );\n background: var-list(--tct-radio-hover-background-fill, transparent);\n color: var-list(--tct-radio-hover-label-color, --tct-radio-label-color, inherit);\n }\n\n &:focus + label,\n &:focus:checked + label {\n border-color: var-list(\n --tct-radio-focus-stroke-color,\n var-prefixer(checkbox-check-stroke-color),\n --t-checkbox-fill,\n #2e2e2e\n );\n background: var-list(--tct-radio-focus-background-fill, transparent);\n box-shadow: var(--const-double-focus-ring), var-list(--tct-global-focus, unquote('0 0 0 2px #33b4ff'));\n color: var-list(--tct-radio-focus-label-color, --tct-radio-checked-label-color, inherit);\n }\n }\n}\n\ninput:disabled + label[for] {\n cursor: not-allowed;\n opacity: var-list(--tct-disabled-opacity, --app-disabled-opacity, 0.4);\n}\n","import { Component, Prop, h, Element, ComponentInterface, Listen, Watch, Event, EventEmitter } from '@stencil/core';\nimport { createGuid, handleAriaLabel, loc, overrideFocus } from 'src/utils';\n\n@Component({ tag: 'q2-radio', shadow: true, styleUrl: 'q2-radio.scss' })\nexport class Q2Radio implements ComponentInterface {\n // #region Own Properties\n\n _id: string = `radio-${createGuid()}`;\n inputField: HTMLInputElement;\n isLoaded: boolean = false;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /** @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n /* The state of the radio. This modifies the visual appearance of the element. /\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /* Disables the radio and prevents interaction. /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /\n Used by q2-radio-group to disable all options in the group\n * @private\n /\n @Prop({ reflect: false })\n groupDisabled: boolean = false;\n\n /\n Used by q2-radio-group to make all options in the group readonly\n * @private\n /\n @Prop({ reflect: false })\n groupReadonly: boolean = false;\n\n /\n Used by q2-radio-group to make the options display as tiles\n * @private\n /\n @Prop({ reflect: false })\n groupTileLayout: boolean = false;\n\n /\n Hide's the field's `<label>` element from view.\n \n @warning\n * Only use when a visible label is impractical.\n /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n The text that describes the individual radio option.\n * @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string;\n\n /\n Used by q2-radio-group to apply a name to all options in the group\n * @private\n /\n @Prop({ reflect: true })\n name: string;\n\n /* The radio is non-interactive, but remains focusable. /\n @Prop({ reflect: true })\n readonly: boolean;\n\n /* @private /\n @Prop()\n tabIndex: number = 0;\n\n /* The value that is returned in the `change` event that is emitted from the `q2-radio-group`. /\n @Prop({ reflect: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the radio is checked.\n */\n @Event()\n change: EventEmitter<{ value: string }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n handleAriaLabel(this);\n }\n\n componentDidLoad(): void {\n this.isLoaded = true;\n overrideFocus(this.hostElement);\n this.hostElement.click = () => {\n this.inputField.focus();\n this.inputField.click();\n };\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('click')\n onHostClick(event: Event) {\n if (this.disabled) {\n event.stopImmediatePropagation();\n } else if (this.groupReadonly) {\n event.preventDefault();\n event.stopImmediatePropagation();\n this.inputField.focus();\n }\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (event.target === this.hostElement) {\n this.inputField.focus();\n }\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n @Watch('checked')\n checkedObserver() {\n if (!this.isLoaded) return;\n if (!this.checked) return;\n this.change.emit({ value: this.value });\n }\n\n // #endregion\n // #region Local Methods\n\n inputChange = (event: Event) => {\n event.stopPropagation();\n if (this.disabled \|\| this.readonly \|\| this.groupReadonly \|\| this.groupDisabled) {\n event.preventDefault();\n return false;\n }\n\n if (event.target instanceof HTMLInputElement) {\n this.checked = event.target.checked;\n }\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div class={this.groupTileLayout ? 'radio-tile' : 'radio-container'}>\n <input\n ref={el => (this.inputField = el)}\n class=\"sr\"\n id={this._id}\n type=\"radio\"\n name={this.name}\n value={this.value}\n disabled={this.disabled \|\| this.groupDisabled}\n checked={this.checked}\n aria-label={this.label && this.hideLabel ? loc(this.label) : undefined}\n onChange={this.inputChange}\n test-id=\"q2RadioInnerRadioBox\"\n ></input>\n\n <label\n htmlFor={this._id}\n class={this.hideLabel ? 'label-hidden' : undefined}\n test-id=\"radioButton\"\n >\n {!this.groupTileLayout && (\n <svg viewBox=\"0 0 18 18\">\n <circle\n stroke=\"none\"\n fill=\"none\"\n cx=\"9\"\n cy=\"9\"\n r=\"8\"\n />\n <circle\n stroke=\"none\"\n fill=\"none\"\n cx=\"9\"\n cy=\"9\"\n r=\"4\"\n />\n </svg>\n )}\n {!this.hideLabel && (\n <div class=\"label-content\">\n {(this.label && loc(this.label)) \|\| ''}\n <slot></slot>\n </div>\n )}\n </label>\n </div>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/q2-stepper-vertical.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-COzomxjJ.js';
 import { o as overrideFocus, a as isEventFromElement, c as createGuid, l as loc } from './index-CkXFIBxL.js';
-const q2StepperVerticalCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:grid;grid-template-columns:var(--tct-stepper-vertical-list-width, var(--tct-advanced-stepper-list-width, var(--t-advanced-stepper-list-width, 180px))) 1fr;gap:var(--tct-stepper-vertical-layout-gap, var(--tct-advanced-stepper-layout-gap, var(--t-advanced-stepper-layout-gap, 120px)))}.step-label,.step-child-label{color:var(--comp-btn-label-color);font-size:var(--comp-btn-label-font-size);font-weight:var(--comp-label-font-weight, 400);min-height:1.5em}.step-label{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, var(--tct-advanced-stepper-label-line-count, var(--t-advanced-stepper-label-line-count, 2)));-webkit-box-orient:vertical}[aria-selected=true] .step-label{font-weight:var(--tct-stepper-vertical-btn-active-font-weight, var(--tct-advanced-stepper-btn-active-font-weight, var(--t-advanced-stepper-btn-active-font-weight, 600)))}[aria-describedby] .step-label{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, var(--tct-advanced-stepper-label-line-count, var(--t-advanced-stepper-label-line-count, 1)));-webkit-box-orient:vertical}.step-child-label{grid-area:content;color:var(--comp-btn-label-color)}.step-description{color:var(--tct-stepper-vertical-description-color, var(--tct-advanced-stepper-description-color, var(--t-advanced-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-stepper-vertical-description-font-size, var(--tct-advanced-stepper-description-font-size, var(--t-advanced-stepper-description-font-size, var(--app-font-size-small, 12px))));padding-bottom:0.2em}ul{--comp-top-btn-icon-size:var(--tct-stepper-vertical-btn-icon-size, var(--tct-advanced-stepper-btn-icon-size, var(--t-advanced-stepper-btn-icon-size, 24px)));--comp-btn-icon-size:var(--comp-top-btn-icon-size);--comp-btn-content-gap:var(--tct-stepper-vertical-btn-gap, var(--tct-advanced-stepper-btn-gap, var(--t-advanced-stepper-btn-gap, var(--app-scale-3x, 15px))));--comp-btn-label-font-size:var(--tct-stepper-vertical-btn-label-font-size, var(--tct-advanced-stepper-btn-label-font-size, var(--t-advanced-stepper-btn-label-font-size, 16px)));--comp-btn-label-color:var(--tct-stepper-vertical-label-color, var(--tct-advanced-stepper-label-color, var(--t-advanced-stepper-label-color, var(--t-text, #4d4d4d))));--comp-tween:var(--tct-stepper-vertical-tween, var(--tct-advanced-stepper-tween, var(--t-advanced-stepper-tween, var(--app-tween-1, 0.2s ease))));--comp-bullet-bg:var(--tct-stepper-vertical-bullet-active-background, var(--tct-advanced-stepper-bullet-active-bg, var(--t-advanced-stepper-bullet-active-bg, var(--t-primary, #0079c1))));list-style:none;margin:0;padding:0}ul ul{--comp-btn-icon-size:var(--tct-stepper-vertical-child-btn-icon-size, var(--tct-advanced-stepper-child-btn-icon-size, var(--t-advanced-stepper-child-btn-icon-size, 12px)));--comp-btn-content-gap:var(--tct-stepper-vertical-btn-gap, var(--tct-advanced-stepper-btn-gap, var(--t-advanced-stepper-btn-gap, var(--app-scale-2x, 10px))));--comp-btn-label-font-size:var(--tct-stepper-vertical-child-btn-label-font-size, var(--tct-advanced-stepper-child-btn-label-font-size, var(--t-advanced-stepper-child-btn-label-font-size, var(--app-font-size-small, 12px))))}ul ul[aria-hidden=true]{display:none}.step-btn,.step-child-btn{display:grid;grid-template-columns:var(--comp-btn-icon-size) 1fr;gap:var(--comp-btn-content-gap);text-align:var(--tct-stepper-vertical-btn-text-align, var(--tct-advanced-stepper-btn-text-align, var(--t-advanced-stepper-btn-text-align, start)));grid-template-areas:\"icon content\";align-items:center;width:100%;position:relative;background:transparent;border:0;cursor:pointer;padding:0;transition-property:box-shadow;outline:none}.step-btn[aria-disabled],.step-child-btn[aria-disabled]{cursor:default;--comp-label-font-weight:300;--comp-btn-label-color:var(--tct-stepper-vertical-btn-locked-color, var(--tct-advanced-stepper-btn-locked-color, var(--t-advanced-stepper-btn-locked-color, var(--t-textA, rgba(77, 77, 77, 0.77)))))}.step-btn[aria-selected=true],.step-child-btn[aria-selected=true]{--comp-label-font-weight:600}.step-btn{min-height:var(--tct-stepper-vertical-btn-height, var(--tct-advanced-stepper-btn-height, var(--t-advanced-stepper-btn-height, 40px)));font-size:var(--tct-stepper-vertical-btn-font-size, var(--tct-advanced-stepper-btn-font-size, var(--t-advanced-stepper-btn-font-size, 16px)));--comp-active-color:var(--comp-bullet-bg)}.step-btn.status-complete{--comp-active-color:var(--const-stoplight-success, #0e8a00);--tct-stoplight-success:var(--comp-active-color)}.step-btn.status-error{--comp-active-color:var(--const-stoplight-alert, #d20a0a);--tct-stoplight-warning:var(--comp-active-color)}.step-btn.status-locked{cursor:not-allowed}.step-child-btn{--comp-active-color:var(--comp-bullet-bg);min-height:var(--tct-stepper-vertical-child-btn-height, var(--tct-advanced-stepper-child-btn-height, var(--t-advanced-stepper-child-btn-height, 30px)));padding-left:var(--tct-stepper-vertical-child-btn-left-padding, var(--tct-advanced-stepper-child-btn-left-padding, var(--t-advanced-stepper-child-btn-left-padding, var(--app-scale-2x, 10px))));font-size:var(--tct-stepper-vertical-child-btn-font-size, var(--tct-advanced-stepper-child-btn-font-size, var(--t-advanced-stepper-child-btn-font-size, 12px)));border-left-width:var(--tct-stepper-vertical-child-btn-left-border-width, var(--tct-advanced-stepper-child-btn-left-border-width, var(--t-advanced-stepper-child-btn-left-border-width, 3px)));border-left-style:var(--tct-stepper-vertical-child-btn-left-border-style, var(--tct-advanced-stepper-child-btn-left-border-style, var(--t-advanced-stepper-child-btn-left-border-style, solid)));border-left-color:transparent}.step-child-btn[aria-selected=true]{--comp-btn-label-color:var(--comp-active-color);border-left-color:var(--comp-active-color)}.step-child-btn.status-error{--comp-btn-label-color:var(--const-stoplight-alert, #d20a0a);--comp-active-color:var(--const-stoplight-alert, #d20a0a)}.step-child-btn.status-locked{cursor:not-allowed}.step-content{grid-area:content}.step-icon,.step-bubble,.step-child-icon{grid-area:icon;width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);line-height:0}.step-icon q2-icon,.step-bubble q2-icon,.step-child-icon q2-icon{width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);--tct-stoplight-warning:var(--comp-active-color)}.step-icon,.step-bubble{background:var(--comp-active-color);color:var(--t-base, #ffffff);border-radius:50%}.status-complete .step-icon,.status-error .step-icon,.status-complete .step-bubble,.status-error .step-bubble{background:var(--comp-active-color)}.step-icon q2-icon:before,.step-bubble q2-icon:before{content:\"\";display:block;background:var(--t-base, #ffffff);position:absolute;width:80%;height:80%;left:11%;top:11%;border-radius:50%}.status-locked .step-icon,.status-locked .step-bubble{background:var(--t-gray-12, #d9d9d9);color:var(--t-text, #4d4d4d)}[aria-selected=true] .step-icon,[aria-selected=true] .step-bubble{box-shadow:0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color)}.step-bubble{display:flex;justify-content:center;align-items:center;line-height:0}.step-child-icon q2-icon{--tct-icon-stroke-primary:var(--comp-active-color);--tct-icon-stroke-secondary:var(--comp-active-color)}[aria-selected=true] .step-child-icon q2-icon{fill:var(--comp-active-color);--tct-icon-stroke-secondary:var(--t-base, #ffffff)}.spacer{height:0;border-left-width:var(--tct-stepper-vertical-child-border-width, var(--tct-advanced-stepaer-child-border-width, var(--t-advanced-stepaer-child-border-width, 1px)));border-left-style:var(--tct-stepper-vertical-child-border-style, var(--tct-advanced-stepper-child-border-style, var(--t-advanced-stepper-child-border-style, solid)));border-left-color:var(--tct-stepper-vertical-child-border-color, var(--tct-advanced-stepper-child-border-color, var(--t-advanced-stepper-child-border-color, var(--t-gray-12, #d9d9d9))));overflow:hidden;margin-left:calc(var(--comp-top-btn-icon-size) / 2);transition:height var(--comp-tween)}.spacer.has-sibling{height:var(--tct-stepper-vertical-spacer-height, var(--tct-advanced-stepper-spacer-height, var(--t-advanced-stepper-spacer-height, var(--app-scale-6x, 30px))))}.spacer ul{opacity:0;transition:opacity var(--comp-tween)}.spacer.is-opening ul,.spacer.is-open ul{display:block;opacity:1 !important}.spacer.is-open{overflow:visible}";
+const q2StepperVerticalCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:grid;grid-template-columns:var(--tct-stepper-vertical-list-width, var(--tct-advanced-stepper-list-width, var(--t-advanced-stepper-list-width, 180px))) 1fr;gap:var(--tct-stepper-vertical-layout-gap, var(--tct-advanced-stepper-layout-gap, var(--t-advanced-stepper-layout-gap, 120px)))}.step-label,.step-child-label{color:var(--comp-btn-label-color);font-size:var(--comp-btn-label-font-size);font-weight:var(--comp-label-font-weight, 400);min-height:1.5em}.step-label{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, var(--tct-advanced-stepper-label-line-count, var(--t-advanced-stepper-label-line-count, 2)));-webkit-box-orient:vertical}[aria-selected=true] .step-label{font-weight:var(--tct-stepper-vertical-btn-active-font-weight, var(--tct-advanced-stepper-btn-active-font-weight, var(--t-advanced-stepper-btn-active-font-weight, 600)))}[aria-describedby] .step-label{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, var(--tct-advanced-stepper-label-line-count, var(--t-advanced-stepper-label-line-count, 1)));-webkit-box-orient:vertical}.step-child-label{grid-area:content;color:var(--comp-btn-label-color)}.step-description{color:var(--tct-stepper-vertical-description-color, var(--tct-advanced-stepper-description-color, var(--t-advanced-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-stepper-vertical-description-font-size, var(--tct-advanced-stepper-description-font-size, var(--t-advanced-stepper-description-font-size, var(--app-font-size-small, 12px))));padding-bottom:0.2em}ul{--comp-top-btn-icon-size:var(--tct-stepper-vertical-btn-icon-size, var(--tct-advanced-stepper-btn-icon-size, var(--t-advanced-stepper-btn-icon-size, 24px)));--comp-btn-icon-size:var(--comp-top-btn-icon-size);--comp-btn-icon-visibility:var(--tct-stepper-vertical-btn-icon-visibility, visible);--comp-btn-content-gap:var(--tct-stepper-vertical-btn-gap, var(--tct-advanced-stepper-btn-gap, var(--t-advanced-stepper-btn-gap, var(--app-scale-3x, 15px))));--comp-btn-label-font-size:var(--tct-stepper-vertical-btn-label-font-size, var(--tct-advanced-stepper-btn-label-font-size, var(--t-advanced-stepper-btn-label-font-size, 16px)));--comp-btn-label-color:var(--tct-stepper-vertical-label-color, var(--tct-advanced-stepper-label-color, var(--t-advanced-stepper-label-color, var(--t-text, #4d4d4d))));--comp-tween:var(--tct-stepper-vertical-tween, var(--tct-advanced-stepper-tween, var(--t-advanced-stepper-tween, var(--app-tween-1, 0.2s ease))));--comp-bullet-bg:var(--tct-stepper-vertical-bullet-active-background, var(--tct-advanced-stepper-bullet-active-bg, var(--t-advanced-stepper-bullet-active-bg, var(--t-primary, #0079c1))));list-style:none;margin:0;padding:0}ul ul{--comp-btn-icon-size:var(--tct-stepper-vertical-child-btn-icon-size, var(--tct-advanced-stepper-child-btn-icon-size, var(--t-advanced-stepper-child-btn-icon-size, 12px)));--comp-btn-content-gap:var(--tct-stepper-vertical-btn-gap, var(--tct-advanced-stepper-btn-gap, var(--t-advanced-stepper-btn-gap, var(--app-scale-2x, 10px))));--comp-btn-label-font-size:var(--tct-stepper-vertical-child-btn-label-font-size, var(--tct-advanced-stepper-child-btn-label-font-size, var(--t-advanced-stepper-child-btn-label-font-size, var(--app-font-size-small, 12px))))}ul ul[aria-hidden=true]{display:none}.step-btn,.step-child-btn{display:grid;grid-template-columns:var(--comp-btn-icon-size) 1fr;gap:var(--comp-btn-content-gap);text-align:var(--tct-stepper-vertical-btn-text-align, var(--tct-advanced-stepper-btn-text-align, var(--t-advanced-stepper-btn-text-align, start)));grid-template-areas:\"icon content\";align-items:center;width:100%;position:relative;background:transparent;border:0;cursor:pointer;padding:0;transition-property:box-shadow;outline:none}.step-btn[aria-disabled],.step-child-btn[aria-disabled]{cursor:default;--comp-label-font-weight:300;--comp-btn-label-color:var(--tct-stepper-vertical-btn-locked-color, var(--tct-advanced-stepper-btn-locked-color, var(--t-advanced-stepper-btn-locked-color, var(--t-textA, rgba(77, 77, 77, 0.77)))))}.step-btn[aria-selected=true],.step-child-btn[aria-selected=true]{--comp-label-font-weight:600}.step-btn{min-height:var(--tct-stepper-vertical-btn-height, var(--tct-advanced-stepper-btn-height, var(--t-advanced-stepper-btn-height, 40px)));font-size:var(--tct-stepper-vertical-btn-font-size, var(--tct-advanced-stepper-btn-font-size, var(--t-advanced-stepper-btn-font-size, 16px)));--comp-active-color:var(--comp-bullet-bg)}.step-btn.status-complete{--comp-active-color:var(--const-stoplight-success, #0e8a00);--tct-stoplight-success:var(--comp-active-color)}.step-btn.status-error{--comp-active-color:var(--const-stoplight-alert, #d20a0a);--tct-stoplight-warning:var(--comp-active-color)}.step-btn.status-locked{cursor:not-allowed}.step-child-btn{--comp-active-color:var(--comp-bullet-bg);min-height:var(--tct-stepper-vertical-child-btn-height, var(--tct-advanced-stepper-child-btn-height, var(--t-advanced-stepper-child-btn-height, 30px)));padding-left:var(--tct-stepper-vertical-child-btn-left-padding, var(--tct-advanced-stepper-child-btn-left-padding, var(--t-advanced-stepper-child-btn-left-padding, var(--app-scale-2x, 10px))));font-size:var(--tct-stepper-vertical-child-btn-font-size, var(--tct-advanced-stepper-child-btn-font-size, var(--t-advanced-stepper-child-btn-font-size, 12px)));border-left-width:var(--tct-stepper-vertical-child-btn-left-border-width, var(--tct-advanced-stepper-child-btn-left-border-width, var(--t-advanced-stepper-child-btn-left-border-width, 3px)));border-left-style:var(--tct-stepper-vertical-child-btn-left-border-style, var(--tct-advanced-stepper-child-btn-left-border-style, var(--t-advanced-stepper-child-btn-left-border-style, solid)));border-left-color:transparent}.step-child-btn[aria-selected=true]{--comp-btn-label-color:var(--comp-active-color);border-left-color:var(--comp-active-color)}.step-child-btn.status-error{--comp-btn-label-color:var(--const-stoplight-alert, #d20a0a);--comp-active-color:var(--const-stoplight-alert, #d20a0a)}.step-child-btn.status-locked{cursor:not-allowed}.step-content{grid-area:content}.step-icon,.step-bubble,.step-child-icon{visibility:var(--comp-btn-icon-visibility);grid-area:icon;width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);line-height:0}.step-icon q2-icon,.step-bubble q2-icon,.step-child-icon q2-icon{width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);--tct-stoplight-warning:var(--comp-active-color)}.step-icon,.step-bubble{background:var(--comp-active-color);color:var(--t-base, #ffffff);border-radius:50%}.status-complete .step-icon,.status-error .step-icon,.status-complete .step-bubble,.status-error .step-bubble{background:var(--comp-active-color)}.step-icon q2-icon:before,.step-bubble q2-icon:before{content:\"\";display:block;background:var(--t-base, #ffffff);position:absolute;width:80%;height:80%;left:11%;top:11%;border-radius:50%}.status-locked .step-icon,.status-locked .step-bubble{background:var(--t-gray-12, #d9d9d9);color:var(--t-text, #4d4d4d)}[aria-selected=true] .step-icon,[aria-selected=true] .step-bubble{box-shadow:0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color)}.step-bubble{display:flex;justify-content:center;align-items:center;line-height:0}.step-child-icon q2-icon{--tct-icon-stroke-primary:var(--comp-active-color);--tct-icon-stroke-secondary:var(--comp-active-color)}[aria-selected=true] .step-child-icon q2-icon{fill:var(--comp-active-color);--tct-icon-stroke-secondary:var(--t-base, #ffffff)}.spacer{height:0;border-left-width:var(--tct-stepper-vertical-child-border-width, var(--tct-advanced-stepaer-child-border-width, var(--t-advanced-stepaer-child-border-width, 1px)));border-left-style:var(--tct-stepper-vertical-child-border-style, var(--tct-advanced-stepper-child-border-style, var(--t-advanced-stepper-child-border-style, solid)));border-left-color:var(--tct-stepper-vertical-child-border-color, var(--tct-advanced-stepper-child-border-color, var(--t-advanced-stepper-child-border-color, var(--t-gray-12, #d9d9d9))));overflow:hidden;margin-left:calc(var(--comp-top-btn-icon-size) / 2);transition:height var(--comp-tween)}.spacer.has-sibling{height:var(--tct-stepper-vertical-spacer-height, var(--tct-advanced-stepper-spacer-height, var(--t-advanced-stepper-spacer-height, var(--app-scale-6x, 30px))))}.spacer ul{opacity:0;transition:opacity var(--comp-tween)}.spacer.is-opening ul,.spacer.is-open ul{display:block;opacity:1 !important}.spacer.is-open{overflow:visible}";
 const Q2StepperVertical = class {
     constructor(hostRef) {