npm - q2-tecton-elements - Versions diffs - 1.32.1 → 1.34.0 - Mend

q2-tecton-elements 1.32.1 → 1.34.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 (294) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/q2-pill/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n State,\n Prop,\n h,\n ComponentInterface,\n Listen,\n Watch,\n Element,\n EventEmitter,\n Event,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, resizeIframe } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\nimport { IOptionValue } from '../q2-option-list';\n\n@Component({\n tag: 'q2-pill',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Pill implements ComponentInterface {\n @Prop() hoist: boolean = !!window.Tecton?.useActionSheets;\n @Prop({ reflect: true }) disabled: boolean;\n @Prop({ reflect: true, mutable: true }) active: boolean;\n @Prop({ reflect: true, mutable: true }) open: boolean;\n @Prop({ reflect: true }) multiple: boolean;\n @Prop({ reflect: true }) maxLength: number;\n @Prop({ reflect: true }) label: string;\n @Prop({ reflect: true, mutable: true }) value: string;\n @Prop({ reflect: true }) theme: 'primary' \| 'secondary' \| 'tertiary';\n @Prop({ mutable: true }) selectedOptions: IOptionValue[] = [];\n @Prop() popoverMinHeight: number = 150;\n @Prop() popoverDirection: 'up' \| 'down';\n @Prop({ mutable: true }) popoverAlignment: 'left' \| 'right' = 'right';\n\n @State() hasOptions: boolean;\n @State() selectedOptionElements: HTMLQ2OptionElement[] = [];\n\n @Element() hostElement: HTMLElement;\n @Event() change: EventEmitter<{ value: string; values: IOptionValue[]; active: boolean }>;\n scheduledAfterRender: (() => void)[] = [];\n primaryBtn: HTMLButtonElement;\n primaryBtnWrapper: HTMLElement;\n optionList: HTMLQ2OptionListElement;\n mutationObserver: MutationObserver;\n popoverElement: HTMLQ2PopoverElement;\n\n /// LifeCycle Hooks ///\n componentWillLoad() {\n const observer = new MutationObserver(this.determineHasOptions);\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 disconnectedCallback() {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n\n /// Getters ///\n get buttonContent() {\n const { label, selectedOptions, selectedOptionElements, hasOptions } = this;\n\n if (!hasOptions \|\| selectedOptionElements.length === 0) return label;\n else if (selectedOptionElements.length === 1) return selectedOptionElements[0].display;\n\n return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });\n }\n\n get truncatedButtonContent() {\n const { maxLength, buttonContent } = this;\n if (maxLength)\n return buttonContent.length > maxLength ? `${buttonContent.substring(0, maxLength)}…` : buttonContent;\n else return buttonContent;\n }\n\n /// Helpers ///\n syncValueProperties = () => {\n const { value, selectedOptions } = this;\n if (!!selectedOptions?.length) this.selectedOptionsChanged(selectedOptions);\n else if (value) this.valueChanged(value);\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 updateSelectedOptionElements = async () => {\n const { selectedOptions } = this;\n const selectedValues = selectedOptions.map(option => option.value);\n const options = await this.optionList?.getOptions();\n if (this.hasOptions) this.active = !!selectedValues.length;\n this.selectedOptionElements = options?.filter(option => selectedValues.includes(option.value)) \|\| [];\n };\n\n determineHasOptions = () => {\n const hasOptions = !!this.hostElement.querySelectorAll('q2-option').length;\n this.hasOptions = hasOptions;\n };\n\n async executeActionSheet(event: MouseEvent \| KeyboardEvent) {\n const result = await showActionSheetList(this, event);\n this.handleSelectionChanges(result);\n }\n\n async handleSelectionChanges(changeDetails: { value?: string; values?: IOptionValue[] }) {\n const { multiple } = this;\n const { value = '', values = [] } = changeDetails;\n const isActive = multiple ? !!values.length : !!value;\n if (!this.hostElement.onchange) {\n if (multiple) {\n this.selectedOptions = values;\n this.value = undefined;\n } else {\n const selectedOption = await this.getOption(value);\n this.selectedOptions = selectedOption\n ? [{ value: selectedOption.value, display: selectedOption.display }]\n : undefined;\n this.value = selectedOption.value \|\| undefined;\n }\n }\n\n this.change.emit({\n value,\n values,\n active: isActive,\n });\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 /// Watchers ///\n @Watch('value')\n async valueChanged(newValue) {\n const { multiple, selectedOptions } = this;\n const firstValue = selectedOptions?.[0]?.value ?? null;\n if (multiple) return;\n if (newValue === firstValue) this.updateSelectedOptionElements();\n else {\n const selectedOption = await this.getOption(newValue);\n const { value, display } = selectedOption \|\| { value: newValue, display: null };\n this.selectedOptions = [{ value, display }];\n }\n }\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 /// Listeners ///\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 @Listen('displayChanged')\n handleSelectedDisplay() {\n if (this.multiple) return;\n this.updateSelectedOptionElements();\n }\n /// Event Handlers ///\n\n handleClick = async (event: MouseEvent) => {\n event.stopPropagation();\n if (this.disabled) return;\n if (this.hasOptions) {\n if (shouldShowActionSheet(this)) {\n this.executeActionSheet(event);\n } else {\n await this.popoverElement.toggle();\n }\n } else {\n const { value, label } = this;\n const isActive = (this.active = !this.active);\n const values = isActive ? [{ value, display: label }] : [];\n this.selectedOptions = values;\n this.change.emit({\n value,\n values,\n active: isActive,\n });\n }\n };\n\n handleKeydown = async (event: KeyboardEvent) => {\n const isTabMetaOrCtrl = event.metaKey \|\| event.ctrlKey \|\| event.key === 'Tab';\n if (!this.hasOptions \|\| this.disabled \|\| isTabMetaOrCtrl) return;\n\n event.preventDefault();\n if (shouldShowActionSheet(this, event)) {\n this.executeActionSheet(event);\n } else {\n this.optionList.handleExternalKeydown(event);\n }\n };\n\n handleButtonFocusout = async (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n if (relatedTarget?.tagName === 'Q2-OPTION' ?? false) return;\n this.open = false;\n };\n\n handleChange = event => {\n event.stopPropagation();\n if (!this.hasOptions) return;\n this.handleSelectionChanges(event.detail);\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 /// DOM ///\n generateIcon() {\n const { hasOptions, active } = this;\n const isButton = hasOptions && active;\n const TagName = isButton ? 'button' : 'div';\n const iconName = isButton \|\| !hasOptions ? 'close' : 'chevron-down';\n\n return (\n <TagName\n class=\"btn-close\"\n onClick={isButton && this.clearSelectedOptions}\n disabled={isButton && this.disabled}\n aria-label={isButton && loc('tecton.element.pill.clearSelection')}\n type={isButton && 'button'}\n >\n <q2-icon type={iconName}></q2-icon>\n </TagName>\n );\n }\n\n render() {\n const { hasOptions, active, open } = this;\n const wrapperClassNames = ['btn-wrapper'];\n if (hasOptions \|\| active) wrapperClassNames.push('has-icon');\n if (hasOptions) 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 ref={el => (this.primaryBtn = el)}\n onClick={this.handleClick}\n onKeyDown={this.handleKeydown}\n onFocusout={this.handleButtonFocusout}\n disabled={this.disabled}\n aria-selected={!hasOptions && active ? 'true' : 'false'}\n aria-roledescription={!hasOptions && 'filter'}\n aria-controls={hasOptions && 'option-list'}\n aria-haspopup={hasOptions && 'true'}\n aria-expanded={(hasOptions && `${!!open}`) \|\| undefined}\n aria-label={this.maxLength && this.buttonContent}\n >\n {this.truncatedButtonContent}\n {!hasOptions && active && <span class=\"sr\">({loc('tecton.element.pill.active')})</span>}\n </button>\n </div>\n {this.generateIcon()}\n </div>\n {this.hasOptions && (\n <q2-popover\n ref={el => (this.popoverElement = el)}\n controlElement={this.primaryBtn}\n open={this.open}\n minHeight={this.popoverMinHeight}\n direction={this.popoverDirection}\n align={this.popoverAlignment}\n >\n <q2-option-list\n role=\"menu\"\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 >\n <slot />\n </q2-option-list>\n </q2-popover>\n )}\n </click-elsewhere>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/q2-pill/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n State,\n Prop,\n h,\n ComponentInterface,\n Listen,\n Watch,\n Element,\n EventEmitter,\n Event,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, resizeIframe } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\nimport { IOptionValue } from '../q2-option-list';\n\n@Component({\n tag: 'q2-pill',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Pill implements ComponentInterface {\n @Prop() hoist: boolean = !!window.Tecton?.useActionSheets;\n @Prop({ reflect: true }) disabled: boolean;\n @Prop({ reflect: true, mutable: true }) active: boolean;\n @Prop({ reflect: true, mutable: true }) open: boolean;\n @Prop({ reflect: true }) multiple: boolean;\n @Prop({ reflect: true }) maxLength: number;\n @Prop({ reflect: true }) label: string;\n @Prop({ reflect: true, mutable: true }) value: string;\n @Prop({ reflect: true }) theme: 'primary' \| 'secondary' \| 'tertiary';\n @Prop({ mutable: true }) selectedOptions: IOptionValue[] = [];\n @Prop() popoverMinHeight: number = 150;\n @Prop() popoverDirection: 'up' \| 'down';\n @Prop({ mutable: true }) popoverAlignment: 'left' \| 'right' = 'right';\n @Prop() optionListLabel: string;\n\n @State() optionCount: number;\n @State() selectedOptionElements: HTMLQ2OptionElement[] = [];\n\n @Element() hostElement: HTMLElement;\n @Event() change: EventEmitter<{ value: string; values: IOptionValue[]; active: boolean }>;\n scheduledAfterRender: (() => void)[] = [];\n primaryBtn: HTMLButtonElement;\n primaryBtnWrapper: HTMLElement;\n optionList: HTMLQ2OptionListElement;\n mutationObserver: MutationObserver;\n popoverElement: HTMLQ2PopoverElement;\n\n /// LifeCycle Hooks ///\n componentWillLoad() {\n const observer = new MutationObserver(this.determineOptionCount);\n observer.observe(this.hostElement, { childList: true, attributes: true });\n this.mutationObserver = observer;\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n this.syncValueProperties();\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n disconnectedCallback() {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n\n /// Getters ///\n get buttonContent() {\n const { label, selectedOptions, selectedOptionElements, optionCount } = this;\n\n if (!optionCount \|\| selectedOptionElements.length === 0) return label;\n else if (selectedOptionElements.length === 1) return selectedOptionElements[0].display;\n\n return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });\n }\n\n get truncatedButtonContent() {\n const { maxLength, buttonContent } = this;\n if (maxLength)\n return buttonContent.length > maxLength ? `${buttonContent.substring(0, maxLength)}…` : buttonContent;\n else return buttonContent;\n }\n\n /// Helpers ///\n syncValueProperties = () => {\n const { value, selectedOptions } = this;\n if (!!selectedOptions?.length) this.selectedOptionsChanged(selectedOptions);\n else if (value) this.valueChanged(value);\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 updateSelectedOptionElements = async () => {\n const { selectedOptions } = this;\n const selectedValues = selectedOptions.map(option => option.value);\n const options = await this.optionList?.getOptions();\n if (this.optionCount) this.active = !!selectedValues.length;\n this.selectedOptionElements = options?.filter(option => selectedValues.includes(option.value)) \|\| [];\n };\n\n determineOptionCount = () => {\n const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n this.optionCount = numberOfOptions;\n };\n\n async executeActionSheet(event: MouseEvent \| KeyboardEvent) {\n const result = await showActionSheetList(this, event);\n this.handleSelectionChanges(result);\n }\n\n async handleSelectionChanges(changeDetails: { value?: string; values?: IOptionValue[] }) {\n const { multiple } = this;\n const { value = '', values = [] } = changeDetails;\n const isActive = multiple ? !!values.length : !!value;\n if (!this.hostElement.onchange) {\n if (multiple) {\n this.selectedOptions = values;\n this.value = undefined;\n } else {\n const selectedOption = await this.getOption(value);\n this.selectedOptions = selectedOption\n ? [{ value: selectedOption.value, display: selectedOption.display }]\n : undefined;\n this.value = selectedOption.value \|\| undefined;\n }\n }\n\n this.change.emit({\n value,\n values,\n active: isActive,\n });\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 /// Watchers ///\n @Watch('value')\n async valueChanged(newValue) {\n const { multiple, selectedOptions } = this;\n const firstValue = selectedOptions?.[0]?.value ?? null;\n if (multiple) return;\n if (newValue === firstValue) this.updateSelectedOptionElements();\n else {\n const selectedOption = await this.getOption(newValue);\n const { value, display } = selectedOption \|\| { value: newValue, display: null };\n this.selectedOptions = [{ value, display }];\n }\n }\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 /// Listeners ///\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 @Listen('displayChanged')\n handleSelectedDisplay() {\n if (this.multiple) return;\n this.updateSelectedOptionElements();\n }\n /// Event Handlers ///\n\n handleClick = async (event: MouseEvent) => {\n event.stopPropagation();\n if (this.disabled) return;\n if (this.optionCount) {\n if (shouldShowActionSheet(this)) {\n this.executeActionSheet(event);\n } else {\n await this.popoverElement.toggle();\n }\n } else {\n const { value, label } = this;\n const isActive = (this.active = !this.active);\n const values = isActive ? [{ value, display: label }] : [];\n this.selectedOptions = values;\n this.change.emit({\n value,\n values,\n active: isActive,\n });\n }\n };\n\n handleKeydown = async (event: KeyboardEvent) => {\n const isTabMetaOrCtrl = event.metaKey \|\| event.ctrlKey \|\| event.key === 'Tab';\n if (!this.optionCount \|\| this.disabled \|\| isTabMetaOrCtrl) return;\n\n event.preventDefault();\n if (shouldShowActionSheet(this, event)) {\n this.executeActionSheet(event);\n } else {\n this.optionList.handleExternalKeydown(event);\n }\n };\n\n handleButtonFocusout = async (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n if (relatedTarget?.tagName === 'Q2-OPTION' ?? false) return;\n this.open = false;\n };\n\n handleChange = event => {\n event.stopPropagation();\n if (!this.optionCount) return;\n this.handleSelectionChanges(event.detail);\n };\n\n 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 /// DOM ///\n generateIcon() {\n const { optionCount, active } = this;\n const isButton = optionCount && active;\n const TagName = isButton ? 'button' : 'div';\n const iconName = isButton \|\| !optionCount ? 'close' : 'chevron-down';\n\n return (\n <TagName\n class=\"btn-close\"\n onClick={isButton && this.clearSelectedOptions}\n disabled={isButton && this.disabled}\n aria-label={isButton && loc('tecton.element.pill.clearSelection')}\n type={isButton && 'button'}\n >\n <q2-icon type={iconName}></q2-icon>\n </TagName>\n );\n }\n\n generateHiddenElement() {\n return (\n <div\n id=\"option-description\"\n class=\"sr\"\n aria-hidden=\"true\"\n >\n {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n </div>\n );\n }\n\n 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 ref={el => (this.primaryBtn = el)}\n onClick={this.handleClick}\n onKeyDown={this.handleKeydown}\n onFocusout={this.handleButtonFocusout}\n disabled={this.disabled}\n aria-roledescription={!optionCount && 'filter'}\n aria-controls={optionCount && 'option-list'}\n aria-expanded={(optionCount && `${!!open}`) \|\| undefined}\n aria-label={this.maxLength && this.buttonContent}\n aria-describedby={(optionCount && 'option-description') \|\| undefined}\n >\n {this.truncatedButtonContent}\n {!optionCount && active && <span class=\"sr\">({loc('tecton.element.pill.active')})</span>}\n </button>\n </div>\n {this.generateIcon()}\n {this.generateHiddenElement()}\n </div>\n {this.optionCount && (\n <q2-popover\n ref={el => (this.popoverElement = el)}\n controlElement={this.primaryBtn}\n open={this.open}\n minHeight={this.popoverMinHeight}\n direction={this.popoverDirection}\n align={this.popoverAlignment}\n >\n <q2-option-list\n role=\"menu\"\n ref={el => (this.optionList = el)}\n id=\"option-list\"\n onChange={this.handleChange}\n multiple={this.multiple}\n selectedOptions={this.selectedOptions}\n onReady={() => this.updateSelectedOptionElements()}\n label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n >\n <slot />\n </q2-option-list>\n </q2-popover>\n )}\n </click-elsewhere>\n );\n }\n}\n"]}

package/dist/collection/components/q2-pill/styles.css CHANGED Viewed

@@ -85,7 +85,7 @@ q2-popover,
   --comp-pill-btn-border-width: var(--tct-pill-btn-border-width, var(--t-pill-btn-border-width, 2px));
   --comp-close-size: 0px;
   --comp-btn-background: var(--tct-pill-btn-background, var(--t-pill-btn-background, var(--t-base, #ffffff)));
-  --compt-hover-btn-background: var(--tct-pill-hover-btn-background, var(--t-pill-hover-btn-background, var(--t-gray-13, #e6e6e6)));
+  --comp-hover-btn-background: var(--tct-pill-hover-btn-background, var(--t-pill-hover-btn-background, var(--t-gray-13, #e6e6e6)));
   --comp-btn-padding: var(--tct-pill-btn-padding-inline, var(--t-pill-btn-padding-inline, var(--app-scale-3x, 15px)));
   --comp-btn-color: var(--tct-pill-btn-color, var(--t-pill-btn-color, var(--t-gray-3, #262626)));
   --comp-active-btn-color: var(--comp-btn-background);
@@ -102,24 +102,24 @@ q2-popover,
   --comp-btn-color: var(--tct-pill-active-btn-color, var(--t-pill-active-btn-color, var(--t-base, #ffffff)));
 }
 :host([theme=primary]) .btn-wrapper {
-  --comp-active-btn-background: var(--t-primary-l5, #61c4ff);
+  --comp-active-btn-background: var(--tct-pill-primary-color, var(--t-primary-l5, #61c4ff));
   --comp-active-btn-color: var(--t-primary-text, #ffffff);
   --comp-active-btn-border-color: var(--t-primary-l5, #61c4ff);
-  --comp-hover-active-btn-background: var(--t-primary-l3, #21acff);
+  --comp-hover-active-btn-background: var(--tct-pill-hover-primary-color, var(--t-primary-l3, #21acff));
   --comp-hover-active-btn-border-color: var(--t-primary-l3, #21acff);
 }
 :host([theme=secondary]) .btn-wrapper {
-  --comp-active-btn-background: var(--t-secondary-l5, #d9e1e6);
+  --comp-active-btn-background: var(--tct-pill-secondary-color, var(--t-secondary-l5, #d9e1e6));
   --comp-active-btn-color: var(--t-secondary-text, #141414);
   --comp-active-btn-border-color: var(--t-secondary-l5, #d9e1e6);
-  --comp-hover-active-btn-background: var(--t-secondary-l3, #c9d5db);
+  --comp-hover-active-btn-background: var(--tct-pill-hover-secondary-color, var(--t-secondary-l3, #c9d5db));
   --comp-hover-active-btn-border-color: var(--t-secondary-l3, #c9d5db);
 }
 :host([theme=tertiary]) .btn-wrapper {
-  --comp-active-btn-background: var(--t-tertiary-l5, #f4fafe);
+  --comp-active-btn-background: var(--tct-pill-tertiary-color, var(--t-tertiary-l5, #f4fafe));
   --comp-active-btn-color: var(--t-tertiary-text, #141414);
   --comp-active-btn-border-color: var(--t-tertiary-l5, #f4fafe);
-  --comp-hover-active-btn-background: var(--t-tertiary-l3, #eff8fd);
+  --comp-hover-active-btn-background: var(--tct-pill-hover-tertiary-color, var(--t-tertiary-l3, #eff8fd));
   --comp-hover-active-btn-border-color: var(--t-tertiary-l3, #eff8fd);
 }

package/dist/collection/components/q2-popover/styles.css CHANGED Viewed

@@ -126,14 +126,13 @@ button {
   text-align: end;
   left: unset;
 }
-.container :host([open]) {
-  display: block;
+:host([open]) .container {
+  visibility: visible;
 }
 :host([open]) .container.show {
   height: auto;
   overflow: auto;
   opacity: 1;
-  visibility: visible;
 }
 .container.up {
   bottom: var(--comp-pop-offset);

package/dist/collection/components/q2-radio/index.js CHANGED Viewed

@@ -19,6 +19,7 @@ export class Q2Radio {
     this.value = undefined;
     this.disabled = false;
     this.checked = false;
+    this.tabIndex = 0;
     this.name = undefined;
     this.groupDisabled = false;
     this.groupReadonly = false;
@@ -160,6 +161,24 @@ export class Q2Radio {
         "reflect": true,
         "defaultValue": "false"
       },
+      "tabIndex": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "tab-index",
+        "reflect": false,
+        "defaultValue": "0"
+      },
       "name": {
         "type": "string",
         "mutable": false,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/q2-radio/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAsB,MAAM,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AACpH,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAO5E,MAAM,OAAO,OAAO;;~~IA+BhB~~,QAAG,GAAW,SAAS,UAAU,EAAE,EAAE,CAAC;IAEtC,aAAQ,GAAY,KAAK,CAAC;IA6C1B,gBAAW,GAAG,CAAC,KAAY,EAAE,EAAE;MAC3B,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,IAAI,CAAC,aAAa,EAAE;QACpB,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,OAAO,KAAK,CAAC;OAChB;MAED,IAAI,KAAK,CAAC,MAAM,YAAY,gBAAgB,EAAE;QAC1C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;OACvC;IACL,CAAC,CAAC;;;;~~oBApF2C~~,KAAK;mBACN,KAAK;;~~yBAUE~~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","sourcesContent":["import { Component, Prop, h, Element, ComponentInterface, Listen, Watch, Event, EventEmitter } from '@stencil/core';\nimport { createGuid, handleAriaLabel, loc, overrideFocus } from 'src/utils';\n\n@Component({\n tag: 'q2-radio',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Radio implements ComponentInterface {\n @Prop({ reflect: true, mutable: true }) label: string;\n @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n @Prop({ reflect: true }) value: string;\n @Prop({ reflect: true }) disabled: boolean = false;\n @Prop({ reflect: true }) checked: boolean = false;\n /*\n Used by q2-radio-group to apply a name to all options in the group\n * @private\n /\n @Prop({ reflect: true }) name: string;\n /\n Used by q2-radio-group to disable all options in the group\n * @private\n /\n @Prop({ reflect: false }) groupDisabled: boolean = false;\n /\n Used by q2-radio-group to make all options in the group readonly\n * @private\n /\n @Prop({ reflect: false }) groupReadonly: boolean = false;\n /\n Used by q2-radio-group to make the options display as tiles\n * @private\n /\n @Prop({ reflect: false }) groupTileLayout: boolean = false;\n\n /* @deprecated */\n @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n @Element() hostElement: HTMLElement;\n _id: string = `radio-${createGuid()}`;\n inputField: HTMLInputElement;\n isLoaded: boolean = false;\n\n @Event() change: EventEmitter;\n\n ////////// LIFECYCLE HOOKS ////////\n\n componentWillLoad() {\n handleAriaLabel(this);\n }\n\n componentDidLoad(): void {\n this.isLoaded = true;\n overrideFocus(this.hostElement);\n this.hostElement.click = () => this.inputField.click();\n }\n\n ////////// OBSERVERS //////////\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 /////// HOST ELEMENT EVENTS ///////\n @Listen('click')\n onHostClick(event: Event) {\n if (this.disabled) {\n event.stopImmediatePropagation();\n }\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (event.target === this.hostElement) {\n this.inputField.focus();\n }\n }\n\n inputChange = (event: Event) => {\n event.stopPropagation();\n if (this.groupReadonly) {\n event.preventDefault();\n return false;\n }\n\n if (event.target instanceof HTMLInputElement) {\n this.checked = event.target.checked;\n }\n };\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 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"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/q2-radio/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, ComponentInterface, Listen, Watch, Event, EventEmitter } from '@stencil/core';\nimport { createGuid, handleAriaLabel, loc, overrideFocus } from 'src/utils';\n\n@Component({\n tag: 'q2-radio',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Radio implements ComponentInterface {\n @Prop({ reflect: true, mutable: true }) label: string;\n @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n @Prop({ reflect: true }) value: string;\n @Prop({ reflect: true }) disabled: boolean = false;\n @Prop({ reflect: true }) checked: boolean = false;\n @Prop() tabIndex: number = 0;\n /*\n Used by q2-radio-group to apply a name to all options in the group\n * @private\n /\n @Prop({ reflect: true }) name: string;\n /\n Used by q2-radio-group to disable all options in the group\n * @private\n /\n @Prop({ reflect: false }) groupDisabled: boolean = false;\n /\n Used by q2-radio-group to make all options in the group readonly\n * @private\n /\n @Prop({ reflect: false }) groupReadonly: boolean = false;\n /\n Used by q2-radio-group to make the options display as tiles\n * @private\n /\n @Prop({ reflect: false }) groupTileLayout: boolean = false;\n\n /* @deprecated */\n @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n @Element() hostElement: HTMLElement;\n _id: string = `radio-${createGuid()}`;\n inputField: HTMLInputElement;\n isLoaded: boolean = false;\n\n @Event() change: EventEmitter;\n\n ////////// LIFECYCLE HOOKS ////////\n\n componentWillLoad() {\n handleAriaLabel(this);\n }\n\n componentDidLoad(): void {\n this.isLoaded = true;\n overrideFocus(this.hostElement);\n this.hostElement.click = () => this.inputField.click();\n }\n\n ////////// OBSERVERS //////////\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 /////// HOST ELEMENT EVENTS ///////\n @Listen('click')\n onHostClick(event: Event) {\n if (this.disabled) {\n event.stopImmediatePropagation();\n }\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (event.target === this.hostElement) {\n this.inputField.focus();\n }\n }\n\n inputChange = (event: Event) => {\n event.stopPropagation();\n if (this.groupReadonly) {\n event.preventDefault();\n return false;\n }\n\n if (event.target instanceof HTMLInputElement) {\n this.checked = event.target.checked;\n }\n };\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 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"]}

package/dist/collection/components/q2-radio-group/index.js CHANGED Viewed

@@ -23,6 +23,11 @@ export class Q2RadioGroup {
       if (!this.value && !!firstCheckedRadio) {
         this.value = firstCheckedRadio.value;
       }
+      else if (!this.value && !firstCheckedRadio) {
+        // if no radios are meant to be checked, then assign first radio tabIndex of 0
+        if (this.radioElements.length)
+          this.radioElements[0].tabIndex = 0;
+      }
     };
     this.label = undefined;
     this.value = undefined;
@@ -49,6 +54,7 @@ export class Q2RadioGroup {
     observer.observe(this.hostElement, { childList: true });
     this.mutationObserver = observer;
     overrideFocus(this.hostElement);
+    this.checkedRadioExists();
   }
   /////// OBSERVERS ///////
   valueUpdated(newVal) {
@@ -57,6 +63,10 @@ export class Q2RadioGroup {
       // Removes checked attribute from trailing radios, if multiple individual radio's are intially checked (checked={true}) at componentDidLoad
       if (!radio.checked) {
         radio.removeAttribute('checked');
+        radio.tabIndex = -1;
+      }
+      else if (radio.checked) {
+        radio.tabIndex = 0;
       }
     });
   }
@@ -138,7 +148,7 @@ export class Q2RadioGroup {
     const showLabel = this.label || this.optional || this.readonly;
     const { hasError } = this;
     const showLabelRow = showLabel || hasError;
-    return (h(Fragment, null, showLabelRow && (h("div", { class: "label-row" }, showLabel && h("div", { class: "group-legend" }, this.labelDOM()), hasError && (h("q2-icon", { type: "error", "test-id": "iconError" })))), h("fieldset", { onChange: this.onInnerRadioChange, "aria-required": `${!this.optional}`, "aria-readonly": `${this.readonly}`, "aria-invalid": `${this.hasError}` }, showLabel && h("legend", { class: "sr" }, this.labelDOM()), this.inputDom())));
+    return (h(Fragment, null, showLabelRow && (h("div", { class: "label-row" }, showLabel && h("div", { class: "group-legend" }, this.labelDOM()), hasError && (h("q2-icon", { type: "error", "test-id": "iconError" })))), h("fieldset", { onChange: this.onInnerRadioChange, "aria-readonly": `${this.readonly}`, "aria-invalid": `${this.hasError}` }, showLabel && h("legend", { class: "sr" }, this.labelDOM()), this.inputDom())));
   }
   inputDom() {
     if (this.tileLayout) {

package/dist/collection/components/q2-radio-group/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/q2-radio-group/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,IAAI,EACJ,OAAO,EACP,CAAC,EACD,MAAM,EAEN,KAAK,EAEL,KAAK,EACL,QAAQ,GACX,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAO/E,MAAM,OAAO,YAAY;;IAerB,QAAG,GAAW,eAAe,UAAU,EAAE,EAAE,CAAC;IAO5C,uBAAkB,GAAG,GAAG,EAAE;MACtB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MAC9B,IAAI,CAAC,WAAW,EAAE,CAAC;MACnB,IAAI,CAAC,eAAe,EAAE,CAAC;MACvB,IAAI,CAAC,eAAe,EAAE,CAAC;MACvB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC5C,CAAC,CAAC;IAEF,uBAAkB,GAAG,CAAC,KAAkB,EAAE,EAAE;MACxC,KAAK,CAAC,wBAAwB,EAAE,CAAC;MACjC,IAAI,IAAI,CAAC,QAAQ;QAAE,OAAO;MAE1B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;IACpD,CAAC,CAAC;IAEF,uBAAkB,GAAG,GAAG,EAAE;MACtB,2FAA2F;MAC3F,MAAM,iBAAiB,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,KAAK,IAAI,CAAC,IAAI,SAAS,CAAC;MAEhG,sGAAsG;MACtG,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,iBAAiB,EAAE;QACpC,IAAI,CAAC,KAAK,GAAG,iBAAiB,CAAC,KAAK,CAAC;OACxC;IACL,CAAC,CAAC;;;oBA1C2C,KAAK;;;;;yBAKoB,QAAQ;oBACjC,KAAK;;;EASlD,IAAI,aAAa;IACb,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAyB,CAAC;EAC7F,CAAC;EA2BD,8BAA8B;EAC9B,iBAAiB;IACb,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC1B,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC1B,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;EACrD,CAAC;EAED,gBAAgB;IACZ,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC/D,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IACxD,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;IACjC,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;EACpC,CAAC;EAED,yBAAyB;EAGzB,YAAY,CAAC,MAAc;IACvB,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;MAC/B,KAAK,CAAC,OAAO,GAAG,MAAM,KAAK,KAAK,CAAC,KAAK,CAAC;MACvC,2IAA2I;MAC3I,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE;QAChB,KAAK,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;OACpC;IACL,CAAC,CAAC,CAAC;EACP,CAAC;EAGD,WAAW;IACP,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;MAC/B,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,GAAG,CAAC;IACvC,CAAC,CAAC,CAAC;EACP,CAAC;EAGD,eAAe;IACX,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;MAC/B,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC;IACxC,CAAC,CAAC,CAAC;EACP,CAAC;EAGD,eAAe;IACX,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;IAC/B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC;EAC1E,CAAC;EAGD,0BAA0B,CAAC,UAAmB;IAC1C,IAAI,OAAO,UAAU,KAAK,SAAS;MAAE,OAAO;IAC5C,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;IAC7B,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;EAChC,CAAC;EAGD,iBAAiB,CAAC,UAAmB;IACjC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;MAC/B,KAAK,CAAC,eAAe,GAAG,UAAU,CAAC;IACvC,CAAC,CAAC,CAAC;EACP,CAAC;EAOD,mBAAmB,CAAC,KAAkB;IAClC,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,EAAE;MACnC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE;QAC5B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;OACnC;KACJ;EACL,CAAC;EAGD,aAAa,CAAC,KAAiB;IAC3B,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;MAAE,OAAO;IACzD,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,mBAAmB,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAChH,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;EAClD,CAAC;EAGD,cAAc,CAAC,KAAoB;IAC/B,MAAM,YAAY,GAAI,KAAK,CAAC,MAAsB,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC;IACvF,IAAI,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,CACpC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,KAAK,CAAC,MAAM,IAAK,EAAkB,CAAC,YAAY,CAAC,OAAO,CAAC,KAAK,YAAY,CAC1F,CAAC;IACF,IAAI,IAAI,GAAG,CAAC,CAAC;IACb,QAAQ,KAAK,CAAC,GAAG,EAAE;MACf,KAAK,WAAW,CAAC;MACjB,KAAK,SAAS;QACV,IAAI,GAAG,CAAC,CAAC,CAAC;QACV,MAAM;MAEV,KAAK,YAAY,CAAC;MAClB,KAAK,WAAW;QACZ,IAAI,GAAG,CAAC,CAAC;QACT,MAAM;KACb;IAED,IAAI,KAAK,KAAK,CAAC,CAAC,IAAI,IAAI,KAAK,CAAC,EAAE;MAC5B,OAAO;KACV;IACD,KAAK,IAAI,IAAI,CAAC;IACd,KAAK,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;IACvF,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAChB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;KAChD;IACD,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;EACrE,CAAC;EAED,QAAQ;IACJ,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;IAC3C,IAAI,QAAQ,GAAG,EAAE,CAAC;IAClB,IAAI,QAAQ,EAAE;MACV,QAAQ,GAAG,YAAM,KAAK,EAAC,cAAc,IAAE,GAAG,CAAC,+BAA+B,CAAC,CAAQ,CAAC;KACvF;SAAM,IAAI,QAAQ,EAAE;MACjB,QAAQ,GAAG,YAAM,KAAK,EAAC,cAAc,IAAE,GAAG,CAAC,+BAA+B,CAAC,CAAQ,CAAC;KACvF;IACD,OAAO,CACH,EAAC,QAAQ;MACJ,KAAK,IAAI,GAAG,CAAC,KAAK,CAAC;MACnB,CAAC,CAAC,QAAQ,IAAI,YAAM,KAAK,EAAC,cAAc,IAAE,QAAQ,CAAQ,CACpD,CACd,CAAC;EACN,CAAC;EAED,MAAM;IACF,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC;IAC/D,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;IAC1B,MAAM,YAAY,GAAG,SAAS,IAAI,QAAQ,CAAC;IAC3C,OAAO,CACH,EAAC,QAAQ;MACJ,YAAY,IAAI,CACb,WAAK,KAAK,EAAC,WAAW;QACjB,SAAS,IAAI,WAAK,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,QAAQ,EAAE,CAAO;QAC9D,QAAQ,IAAI,CACT,eACI,IAAI,EAAC,OAAO,aACJ,WAAW,GACZ,CACd,CACC,CACT;MACD,gBACI,QAAQ,EAAE,IAAI,CAAC,kBAAkB,mBAClB,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,mBACnB,GAAG,IAAI,CAAC,QAAQ,EAAE,kBACnB,GAAG,IAAI,CAAC,QAAQ,EAAE;QAE/B,SAAS,IAAI,cAAQ,KAAK,EAAC,IAAI,IAAE,IAAI,CAAC,QAAQ,EAAE,CAAU;QAC1D,IAAI,CAAC,QAAQ,EAAE,CACT,CACJ,CACd,CAAC;EACN,CAAC;EAED,QAAQ;IACJ,IAAI,IAAI,CAAC,UAAU,EAAE;MACjB,MAAM,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC;MAC/B,MAAM,SAAS,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC;MACjG,OAAO,CACH,WAAK,KAAK,EAAE,kBAAkB,SAAS,EAAE;QACrC,WAAK,KAAK,EAAC,mBAAmB;UAC1B,eAAQ,CACN,CACJ,CACT,CAAC;KACL;SAAM;MACH,OAAO,CACH,WAAK,KAAK,EAAC,mBAAmB;QAC1B,eAAQ,CACN,CACT,CAAC;KACL;EACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import {\n Component,\n Prop,\n Element,\n h,\n Listen,\n EventEmitter,\n Event,\n ComponentInterface,\n Watch,\n Fragment,\n} from '@stencil/core';\nimport { createGuid, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n@Component({\n tag: 'q2-radio-group',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2RadioGroup implements ComponentInterface {\n @Prop({ reflect: true }) label: string;\n @Prop({ mutable: true }) value: string;\n @Prop({ reflect: true }) disabled: boolean = false;\n @Prop({ reflect: true }) name: string;\n @Prop({ reflect: true }) optional: boolean;\n @Prop({ reflect: true }) readonly: boolean;\n @Prop({ reflect: true, mutable: true }) tileLayout: boolean;\n @Prop({ reflect: true }) tileAlignment: 'left' \| 'center' \| 'right' = 'center';\n @Prop({ reflect: true }) hasError: boolean = false;\n\n /** @deprecated */\n @Prop({ reflect: true, mutable: true }) tilelayout: boolean;\n\n @Element() hostElement: HTMLElement;\n _id: string = `radio-group-${createGuid()}`;\n mutationObserver: MutationObserver;\n\n get radioElements() {\n return Array.from(this.hostElement.querySelectorAll('q2-radio')) as HTMLQ2RadioElement[];\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 onInnerRadioChange = (event: CustomEvent) => {\n event.stopImmediatePropagation();\n if (this.readonly) return;\n\n this.change.emit({ value: event.detail.value });\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 }\n };\n\n /////// LIFECYCLE HOOK ///////\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 }\n\n /////// OBSERVERS ///////\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 }\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('disabled')\n disabledUpdated() {\n this.radioElements.forEach(radio => {\n radio.groupDisabled = this.disabled;\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 /////// HOST ELEMENT EVENTS ///////\n\n @Event() change: EventEmitter;\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 labelDOM() {\n const { label, optional, readonly } = this;\n let helpText = '';\n if (readonly) {\n helpText = <span class=\"optional-tag\">{loc('tecton.element.input.readonly')}</span>;\n } else if (optional) {\n helpText = <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span>;\n }\n return (\n <Fragment>\n {label && loc(label)}\n {!!helpText && <span class=\"optional-tag\">{helpText}</span>}\n </Fragment>\n );\n }\n\n render() {\n const showLabel = this.label \|\| this.optional \|\| this.readonly;\n const { hasError } = this;\n const showLabelRow = showLabel \|\| hasError;\n return (\n <Fragment>\n {showLabelRow && (\n <div class=\"label-row\">\n {showLabel && <div class=\"group-legend\">{this.labelDOM()}</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-required={`${!this.optional}`}\n aria-readonly={`${this.readonly}`}\n aria-invalid={`${this.hasError}`}\n >\n {showLabel && <legend class=\"sr\">{this.labelDOM()}</legend>}\n {this.inputDom()}\n </fieldset>\n </Fragment>\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"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/q2-radio-group/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n Element,\n h,\n Listen,\n EventEmitter,\n Event,\n ComponentInterface,\n Watch,\n Fragment,\n} from '@stencil/core';\nimport { createGuid, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n@Component({\n tag: 'q2-radio-group',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2RadioGroup implements ComponentInterface {\n @Prop({ reflect: true }) label: string;\n @Prop({ mutable: true }) value: string;\n @Prop({ reflect: true }) disabled: boolean = false;\n @Prop({ reflect: true }) name: string;\n @Prop({ reflect: true }) optional: boolean;\n @Prop({ reflect: true }) readonly: boolean;\n @Prop({ reflect: true, mutable: true }) tileLayout: boolean;\n @Prop({ reflect: true }) tileAlignment: 'left' \| 'center' \| 'right' = 'center';\n @Prop({ reflect: true }) hasError: boolean = false;\n\n /** @deprecated */\n @Prop({ reflect: true, mutable: true }) tilelayout: boolean;\n\n @Element() hostElement: HTMLElement;\n _id: string = `radio-group-${createGuid()}`;\n mutationObserver: MutationObserver;\n\n get radioElements() {\n return Array.from(this.hostElement.querySelectorAll('q2-radio')) as HTMLQ2RadioElement[];\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 onInnerRadioChange = (event: CustomEvent) => {\n event.stopImmediatePropagation();\n if (this.readonly) return;\n\n this.change.emit({ value: event.detail.value });\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 /////// LIFECYCLE HOOK ///////\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 /////// OBSERVERS ///////\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 @Watch('name')\n nameUpdated() {\n this.radioElements.forEach(radio => {\n radio.name = this.name \|\| this._id;\n });\n }\n\n @Watch('disabled')\n disabledUpdated() {\n this.radioElements.forEach(radio => {\n radio.groupDisabled = this.disabled;\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 /////// HOST ELEMENT EVENTS ///////\n\n @Event() change: EventEmitter;\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 labelDOM() {\n const { label, optional, readonly } = this;\n let helpText = '';\n if (readonly) {\n helpText = <span class=\"optional-tag\">{loc('tecton.element.input.readonly')}</span>;\n } else if (optional) {\n helpText = <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span>;\n }\n return (\n <Fragment>\n {label && loc(label)}\n {!!helpText && <span class=\"optional-tag\">{helpText}</span>}\n </Fragment>\n );\n }\n\n render() {\n const showLabel = this.label \|\| this.optional \|\| this.readonly;\n const { hasError } = this;\n const showLabelRow = showLabel \|\| hasError;\n return (\n <Fragment>\n {showLabelRow && (\n <div class=\"label-row\">\n {showLabel && <div class=\"group-legend\">{this.labelDOM()}</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-readonly={`${this.readonly}`}\n aria-invalid={`${this.hasError}`}\n >\n {showLabel && <legend class=\"sr\">{this.labelDOM()}</legend>}\n {this.inputDom()}\n </fieldset>\n </Fragment>\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"]}

package/dist/collection/components/q2-stepper-pane/index.js CHANGED Viewed

@@ -188,7 +188,7 @@ export class Q2StepperPane {
           "references": {
             "IStepperPaneEvent": {
               "location": "local",
-              "path": "/workspace/workspace/tecton-production_release_1.32.x/packages/q2-tecton-elements/src/components/q2-stepper-pane/index.tsx"
+              "path": "/workspace/workspace/_Gitlab_tecton-production_master/packages/q2-tecton-elements/src/components/q2-stepper-pane/index.tsx"
             }
           }
         }
@@ -208,7 +208,7 @@ export class Q2StepperPane {
           "references": {
             "IStepperPaneEvent": {
               "location": "local",
-              "path": "/workspace/workspace/tecton-production_release_1.32.x/packages/q2-tecton-elements/src/components/q2-stepper-pane/index.tsx"
+              "path": "/workspace/workspace/_Gitlab_tecton-production_master/packages/q2-tecton-elements/src/components/q2-stepper-pane/index.tsx"
             }
           }
         }

package/dist/collection/components/q2-tag/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { h, Host, } from '@stencil/core';
+import { h, Host, Fragment, } from '@stencil/core';
 import { isEventFromElement, loc, overrideFocus } from 'src/utils';
 import { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';
 export class Q2Tag {
@@ -6,9 +6,9 @@ export class Q2Tag {
     var _a;
     /// Getters ///
     /// Helpers
-    this.determineHasOptions = () => {
-      const hasOptions = !!this.hostElement.querySelectorAll('q2-option').length;
-      this.hasOptions = hasOptions;
+    this.determineOptionCount = () => {
+      const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;
+      this.optionCount = numberOfOptions;
     };
     /// Event Handlers ///
     this.onClickElsewhere = (event) => {
@@ -23,7 +23,7 @@ export class Q2Tag {
     };
     this.handleChange = event => {
       event.stopPropagation();
-      if (!this.hasOptions)
+      if (!this.optionCount)
         return;
       const { value } = event.detail;
       this.click.emit({ value });
@@ -36,7 +36,7 @@ export class Q2Tag {
         this.click.emit({ value });
       }
       else {
-        this.popoverElement.toggle();
+        await this.popoverElement.toggle();
       }
     };
     this.handleKeydown = async (event) => {
@@ -71,11 +71,12 @@ export class Q2Tag {
     this.popoverMinHeight = 150;
     this.popoverDirection = undefined;
     this.popoverAlignment = 'right';
-    this.hasOptions = undefined;
+    this.optionListLabel = 'options';
+    this.optionCount = undefined;
   }
   /// LifeCycle Hooks ///
   componentWillLoad() {
-    const observer = new MutationObserver(() => this.determineHasOptions());
+    const observer = new MutationObserver(this.determineOptionCount);
     observer.observe(this.hostElement, { childList: true, attributes: true });
     this.mutationObserver = observer;
   }
@@ -90,7 +91,7 @@ export class Q2Tag {
   delegateFocus(event) {
     if (!isEventFromElement(event, this.hostElement))
       return;
-    if (!this.hasOptions)
+    if (!this.optionCount)
       return;
     this.dropdownBtn.focus();
   }
@@ -102,12 +103,15 @@ export class Q2Tag {
     this.optionList.setActiveElement(null);
   }
   /// DOM ///
+  generateHiddenElement() {
+    return (h("div", { id: "option-description", class: "sr", "aria-hidden": "true" }, loc('tecton.element.optionList.optionCount', [this.optionCount])));
+  }
   render() {
-    const { hasOptions, open } = this;
+    const { optionCount, open } = this;
     const wrapperClassNames = ['tag'];
-    if (hasOptions)
+    if (optionCount)
       wrapperClassNames.push('has-options');
-    return (h(Host, { role: "listitem" }, h("click-elsewhere", { onChange: this.onClickElsewhere }, this.hasOptions ? (h("div", { class: "btn-wrapper", onClick: this.handleWrapperClick }, h("button", { class: "tag-wrapper", ref: el => (this.dropdownBtn = el), "test-id": "btn-control", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-haspopup": "true", "aria-expanded": open ? 'true' : 'false' }, h("div", { class: wrapperClassNames.join(' ') }, this.label), h("q2-icon", { type: "options", label: loc('tecton.element.tag.viewOptions') })))) : (h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, h("div", { class: wrapperClassNames.join(' ') }, this.label))), this.hasOptions && (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { id: "option-list", role: "menu", ref: el => (this.optionList = el), onChange: this.handleChange, align: "right", type: "menu", "no-select": true }, h("slot", null)))))));
+    return (h(Host, { role: "listitem" }, h("click-elsewhere", { onChange: this.onClickElsewhere }, this.optionCount ? (h(Fragment, null, h("div", { class: "btn-wrapper", onClick: this.handleWrapperClick }, h("button", { class: "tag-wrapper", ref: el => (this.dropdownBtn = el), "test-id": "btn-control", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-expanded": open ? 'true' : 'false', "aria-describedby": "option-description" }, h("div", { class: wrapperClassNames.join(' ') }, this.label), h("q2-icon", { type: "options" }))), this.generateHiddenElement())) : (h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, h("div", { class: wrapperClassNames.join(' ') }, this.label))), this.optionCount && (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { id: "option-list", role: "menu", ref: el => (this.optionList = el), onChange: this.handleChange, align: "right", type: "menu", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", null)))))));
   }
   static get is() { return "q2-tag"; }
   static get encapsulation() { return "shadow"; }
@@ -244,12 +248,30 @@ export class Q2Tag {
         "attribute": "popover-alignment",
         "reflect": false,
         "defaultValue": "'right'"
+      },
+      "optionListLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "option-list-label",
+        "reflect": false,
+        "defaultValue": "'options'"
       }
     };
   }
   static get states() {
     return {
-      "hasOptions": {}
+      "optionCount": {}
     };
   }
   static get events() {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/q2-tag/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n State,\n Prop,\n h,\n ComponentInterface,\n Host,\n Listen,\n Element,\n EventEmitter,\n Event,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\n\n@Component({\n tag: 'q2-tag',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Tag implements ComponentInterface {\n @Prop() hoist: boolean = !!window.Tecton?.useActionSheets;\n @Prop({ reflect: true, mutable: true }) open: boolean;\n @Prop({ reflect: true }) label: string;\n @Prop({ reflect: true }) theme: 'primary' \| 'secondary' \| 'tertiary';\n @Prop() popoverMinHeight: number = 150;\n @Prop() popoverDirection: 'up' \| 'down';\n @Prop({ mutable: true }) popoverAlignment: 'left' \| 'right' = 'right';\n\n @State() hasOptions: boolean;\n\n @Element() hostElement: HTMLElement;\n @Event() click: EventEmitter<{ value: string }>;\n dropdownBtn: HTMLButtonElement;\n popoverElement: HTMLQ2PopoverElement;\n optionList: HTMLQ2OptionListElement;\n mutationObserver: MutationObserver;\n\n /// LifeCycle Hooks ///\n componentWillLoad() {\n const observer = new MutationObserver(() => this.determineHasOptions());\n observer.observe(this.hostElement, { childList: true, attributes: true });\n this.mutationObserver = observer;\n }\n\n componentDidLoad(): void {\n overrideFocus(this.hostElement);\n }\n\n disconnectedCallback() {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n\n /// Getters ///\n\n /// Helpers\n determineHasOptions = () => {\n const hasOptions = !!this.hostElement.querySelectorAll('q2-option').length;\n this.hasOptions = hasOptions;\n };\n\n /// Listeners ///\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n if (!this.hasOptions) return;\n this.dropdownBtn.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 /// Event Handlers ///\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 handleChange = event => {\n event.stopPropagation();\n if (!this.hasOptions) return;\n const { value } = event.detail;\n\n this.click.emit({ value });\n };\n\n handleClick = async (event: MouseEvent) => {\n event.stopPropagation();\n this.popoverElement.controlElement = this.dropdownBtn;\n if (shouldShowActionSheet(this)) {\n const { value } = await showActionSheetList(this, event);\n this.click.emit({ value });\n } else {\n this.popoverElement.toggle();\n }\n };\n\n handleKeydown = async (event: KeyboardEvent) => {\n const isTabMetaOrCtrl = event.metaKey \|\| event.ctrlKey \|\| event.key === 'Tab';\n if (isTabMetaOrCtrl) return;\n\n event.preventDefault();\n this.popoverElement.controlElement = this.dropdownBtn;\n if (shouldShowActionSheet(this, event)) {\n const { value } = await showActionSheetList(this, event);\n this.click.emit({ value });\n } else {\n this.optionList.handleExternalKeydown(event);\n }\n };\n\n handleButtonFocusout = async (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n if (relatedTarget?.tagName === 'Q2-OPTION' ?? false) return;\n this.open = false;\n };\n\n handleWrapperClick = () => {\n this.dropdownBtn.focus();\n this.dropdownBtn.click();\n };\n\n /// DOM ///\n\n render() {\n const { hasOptions, open } = this;\n const wrapperClassNames = ['tag'];\n if (hasOptions) wrapperClassNames.push('has-options');\n\n return (\n <Host role=\"listitem\">\n <click-elsewhere onChange={this.onClickElsewhere}>\n {this.hasOptions ? (\n <div\n class=\"btn-wrapper\"\n onClick={this.handleWrapperClick}\n >\n <button\n class=\"tag-wrapper\"\n ref={el => (this.dropdownBtn = el)}\n test-id=\"btn-control\"\n onClick={this.handleClick}\n onKeyDown={this.handleKeydown}\n onFocusout={this.handleButtonFocusout}\n aria-controls=\"option-list\"\n aria-haspopup=\"true\"\n aria-expanded={open ? 'true' : 'false'}\n >\n <div class={wrapperClassNames.join(' ')}>{this.label}</div>\n <q2-icon\n type=\"options\"\n label={loc('tecton.element.tag.viewOptions')}\n ></q2-icon>\n </button>\n </div>\n ) : (\n <div\n class=\"tag-wrapper\"\n onClick={e => e.stopPropagation()}\n >\n <div class={wrapperClassNames.join(' ')}>{this.label}</div>\n </div>\n )}\n\n {this.hasOptions && (\n <q2-popover\n ref={el => (this.popoverElement = el)}\n controlElement={this.dropdownBtn}\n open={this.open}\n minHeight={this.popoverMinHeight}\n direction={this.popoverDirection}\n align={this.popoverAlignment}\n >\n <q2-option-list\n id=\"option-list\"\n role=\"menu\"\n ref={el => (this.optionList = el)}\n onChange={this.handleChange}\n align=\"right\"\n type=\"menu\"\n no-select\n >\n <slot />\n </q2-option-list>\n </q2-popover>\n )}\n </click-elsewhere>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/q2-tag/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,KAAK,EACL,IAAI,EACJ,CAAC,EAED,IAAI,EACJ,MAAM,EACN,OAAO,EAEP,KAAK,EACL,QAAQ,GACX,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAOpF,MAAM,OAAO,KAAK;;;IAmCd,eAAe;IAEf,WAAW;IACX,yBAAoB,GAAG,GAAG,EAAE;MACxB,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC;MAC9E,IAAI,CAAC,WAAW,GAAG,eAAe,CAAC;IACvC,CAAC,CAAC;IAiBF,sBAAsB;IACtB,qBAAgB,GAAG,CAAC,KAAkB,EAAE,EAAE;MACtC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAmC,CAAC;MACzD,IAAI,MAAM,CAAC,SAAS,KAAK,iBAAiB,EAAE;QACxC,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;QAChC,IAAI,CAAC,cAAc;UAAE,OAAO;QAC5B,cAAc,CAAC,IAAI,GAAG,KAAK,CAAC;OAC/B;IACL,CAAC,CAAC;IAEF,iBAAY,GAAG,KAAK,CAAC,EAAE;MACnB,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,IAAI,CAAC,WAAW;QAAE,OAAO;MAC9B,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;MAE/B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,gBAAW,GAAG,KAAK,EAAE,KAAiB,EAAE,EAAE;MACtC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,cAAc,CAAC,cAAc,GAAG,IAAI,CAAC,WAAW,CAAC;MACtD,IAAI,qBAAqB,CAAC,IAAI,CAAC,EAAE;QAC7B,MAAM,EAAE,KAAK,EAAE,GAAG,MAAM,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACzD,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;OAC9B;WAAM;QACH,MAAM,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC;OACtC;IACL,CAAC,CAAC;IAEF,kBAAa,GAAG,KAAK,EAAE,KAAoB,EAAE,EAAE;MAC3C,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,CAAC;MAC9E,IAAI,eAAe;QAAE,OAAO;MAE5B,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,IAAI,CAAC,cAAc,CAAC,cAAc,GAAG,IAAI,CAAC,WAAW,CAAC;MACtD,IAAI,qBAAqB,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE;QACpC,MAAM,EAAE,KAAK,EAAE,GAAG,MAAM,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACzD,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;OAC9B;WAAM;QACH,IAAI,CAAC,UAAU,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC;OAChD;IACL,CAAC,CAAC;IAEF,yBAAoB,GAAG,KAAK,EAAE,KAAiB,EAAE,EAAE;;MAC/C,MAAM,aAAa,GAAG,KAAK,CAAC,aAAuC,CAAC;MACpE,IAAI,MAAA,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,OAAO,MAAK,WAAW,mCAAI,KAAK;QAAE,OAAO;MAC5D,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACtB,CAAC,CAAC;IAEF,uBAAkB,GAAG,GAAG,EAAE;MACtB,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;MACzB,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;IAC7B,CAAC,CAAC;iBA9GuB,CAAC,CAAC,CAAA,MAAA,MAAM,CAAC,MAAM,0CAAE,eAAe,CAAA;;;;4BAItB,GAAG;;4BAEwB,OAAO;2BACnC,SAAS;;;EAW3C,uBAAuB;EACvB,iBAAiB;IACb,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;IACjE,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;IAC1E,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;EACrC,CAAC;EAED,gBAAgB;IACZ,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;EACpC,CAAC;EAED,oBAAoB;IAChB,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC;IACnC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;EACjC,CAAC;EAUD,iBAAiB;EAEjB,aAAa,CAAC,KAAiB;IAC3B,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;MAAE,OAAO;IACzD,IAAI,CAAC,IAAI,CAAC,WAAW;MAAE,OAAO;IAC9B,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;EAC7B,CAAC;EAGD,mBAAmB,CAAC,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAkC;IACpE,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI;MAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACzC,IAAI,IAAI;MAAE,OAAO;IACjB,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;EAC3C,CAAC;EAyDD,WAAW;EACX,qBAAqB;IACjB,OAAO,CACH,WACI,EAAE,EAAC,oBAAoB,EACvB,KAAK,EAAC,IAAI,iBACE,MAAM,IAEjB,GAAG,CAAC,uCAAuC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAC/D,CACT,CAAC;EACN,CAAC;EAED,MAAM;IACF,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IACnC,MAAM,iBAAiB,GAAG,CAAC,KAAK,CAAC,CAAC;IAClC,IAAI,WAAW;MAAE,iBAAiB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAEvD,OAAO,CACH,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU;MACjB,uBAAiB,QAAQ,EAAE,IAAI,CAAC,gBAAgB;QAC3C,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAChB,EAAC,QAAQ;UACL,WACI,KAAK,EAAC,aAAa,EACnB,OAAO,EAAE,IAAI,CAAC,kBAAkB;YAEhC,cACI,KAAK,EAAC,aAAa,EACnB,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,aAC1B,aAAa,EACrB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,UAAU,EAAE,IAAI,CAAC,oBAAoB,mBACvB,aAAa,mBACZ,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,sBACrB,oBAAoB;cAErC,WAAK,KAAK,EAAE,iBAAiB,CAAC,IAAI,CAAC,GAAG,CAAC,IAAG,IAAI,CAAC,KAAK,CAAO;cAC3D,eAAS,IAAI,EAAC,SAAS,GAAW,CAC7B,CACP;UACL,IAAI,CAAC,qBAAqB,EAAE,CACtB,CACd,CAAC,CAAC,CAAC,CACA,WACI,KAAK,EAAC,aAAa,EACnB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;UAEjC,WAAK,KAAK,EAAE,iBAAiB,CAAC,IAAI,CAAC,GAAG,CAAC,IAAG,IAAI,CAAC,KAAK,CAAO,CACzD,CACT;QAEA,IAAI,CAAC,WAAW,IAAI,CACjB,kBACI,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,EACrC,cAAc,EAAE,IAAI,CAAC,WAAW,EAChC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,KAAK,EAAE,IAAI,CAAC,gBAAgB;UAE5B,sBACI,EAAE,EAAC,aAAa,EAChB,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,EACjC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,GAAG,CAAC,iCAAiC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;YAGrE,eAAQ,CACK,CACR,CAChB,CACa,CACf,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import {\n Component,\n State,\n Prop,\n h,\n ComponentInterface,\n Host,\n Listen,\n Element,\n EventEmitter,\n Event,\n Fragment,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\n\n@Component({\n tag: 'q2-tag',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Tag implements ComponentInterface {\n @Prop() hoist: boolean = !!window.Tecton?.useActionSheets;\n @Prop({ reflect: true, mutable: true }) open: boolean;\n @Prop({ reflect: true }) label: string;\n @Prop({ reflect: true }) theme: 'primary' \| 'secondary' \| 'tertiary';\n @Prop() popoverMinHeight: number = 150;\n @Prop() popoverDirection: 'up' \| 'down';\n @Prop({ mutable: true }) popoverAlignment: 'left' \| 'right' = 'right';\n @Prop() optionListLabel: string = 'options';\n\n @State() optionCount: number;\n\n @Element() hostElement: HTMLElement;\n @Event() click: EventEmitter<{ value: string }>;\n dropdownBtn: HTMLButtonElement;\n popoverElement: HTMLQ2PopoverElement;\n optionList: HTMLQ2OptionListElement;\n mutationObserver: MutationObserver;\n\n /// LifeCycle Hooks ///\n componentWillLoad() {\n const observer = new MutationObserver(this.determineOptionCount);\n observer.observe(this.hostElement, { childList: true, attributes: true });\n this.mutationObserver = observer;\n }\n\n componentDidLoad(): void {\n overrideFocus(this.hostElement);\n }\n\n disconnectedCallback() {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n\n /// Getters ///\n\n /// Helpers\n determineOptionCount = () => {\n const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n this.optionCount = numberOfOptions;\n };\n\n /// Listeners ///\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n if (!this.optionCount) return;\n this.dropdownBtn.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 /// Event Handlers ///\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 handleChange = event => {\n event.stopPropagation();\n if (!this.optionCount) return;\n const { value } = event.detail;\n\n this.click.emit({ value });\n };\n\n handleClick = async (event: MouseEvent) => {\n event.stopPropagation();\n this.popoverElement.controlElement = this.dropdownBtn;\n if (shouldShowActionSheet(this)) {\n const { value } = await showActionSheetList(this, event);\n this.click.emit({ value });\n } else {\n await this.popoverElement.toggle();\n }\n };\n\n handleKeydown = async (event: KeyboardEvent) => {\n const isTabMetaOrCtrl = event.metaKey \|\| event.ctrlKey \|\| event.key === 'Tab';\n if (isTabMetaOrCtrl) return;\n\n event.preventDefault();\n this.popoverElement.controlElement = this.dropdownBtn;\n if (shouldShowActionSheet(this, event)) {\n const { value } = await showActionSheetList(this, event);\n this.click.emit({ value });\n } else {\n this.optionList.handleExternalKeydown(event);\n }\n };\n\n handleButtonFocusout = async (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n if (relatedTarget?.tagName === 'Q2-OPTION' ?? false) return;\n this.open = false;\n };\n\n handleWrapperClick = () => {\n this.dropdownBtn.focus();\n this.dropdownBtn.click();\n };\n\n /// DOM ///\n generateHiddenElement() {\n return (\n <div\n id=\"option-description\"\n class=\"sr\"\n aria-hidden=\"true\"\n >\n {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n </div>\n );\n }\n\n render() {\n const { optionCount, open } = this;\n const wrapperClassNames = ['tag'];\n if (optionCount) wrapperClassNames.push('has-options');\n\n return (\n <Host role=\"listitem\">\n <click-elsewhere onChange={this.onClickElsewhere}>\n {this.optionCount ? (\n <Fragment>\n <div\n class=\"btn-wrapper\"\n onClick={this.handleWrapperClick}\n >\n <button\n class=\"tag-wrapper\"\n ref={el => (this.dropdownBtn = el)}\n test-id=\"btn-control\"\n onClick={this.handleClick}\n onKeyDown={this.handleKeydown}\n onFocusout={this.handleButtonFocusout}\n aria-controls=\"option-list\"\n aria-expanded={open ? 'true' : 'false'}\n aria-describedby=\"option-description\"\n >\n <div class={wrapperClassNames.join(' ')}>{this.label}</div>\n <q2-icon type=\"options\"></q2-icon>\n </button>\n </div>\n {this.generateHiddenElement()}\n </Fragment>\n ) : (\n <div\n class=\"tag-wrapper\"\n onClick={e => e.stopPropagation()}\n >\n <div class={wrapperClassNames.join(' ')}>{this.label}</div>\n </div>\n )}\n\n {this.optionCount && (\n <q2-popover\n ref={el => (this.popoverElement = el)}\n controlElement={this.dropdownBtn}\n open={this.open}\n minHeight={this.popoverMinHeight}\n direction={this.popoverDirection}\n align={this.popoverAlignment}\n >\n <q2-option-list\n id=\"option-list\"\n role=\"menu\"\n ref={el => (this.optionList = el)}\n onChange={this.handleChange}\n align=\"right\"\n type=\"menu\"\n label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n no-select\n >\n <slot />\n </q2-option-list>\n </q2-popover>\n )}\n </click-elsewhere>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/q2-tag/styles.css CHANGED Viewed

@@ -85,15 +85,15 @@ button {
   position: relative;
 }
 :host([theme=primary]) .tag-wrapper {
-  --comp-tag-background: var(--t-primary-l5, #61c4ff);
+  --comp-tag-background: var(--tct-tag-primary-color, var(--t-primary-l5, #61c4ff));
   --comp-tag-color: var(--t-primary-text, #ffffff);
 }
 :host([theme=secondary]) .tag-wrapper {
-  --comp-tag-background: var(--t-secondary-l5, #d9e1e6);
+  --comp-tag-background: var(--tct-tag-secondary-color, var(--t-secondary-l5, #d9e1e6));
   --comp-tag-color: var(--t-secondary-text, #000000);
 }
 :host([theme=tertiary]) .tag-wrapper {
-  --comp-tag-background: var(--t-tertiary-l5, #f4fafe);
+  --comp-tag-background: var(--tct-tag-tertiary-color, var(--t-tertiary-l5, #f4fafe));
   --comp-tag-color: var(--t-tertiary-text, #000000);
 }

package/dist/components/index10.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { l as loc, h as handleAriaLabel } from './index16.js';
 import { s as shapes } from './shapes.js';
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}: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}.flex{display:flex}.flex-center{justify-content:center}.flex-left{justify-content:flex-start}.flex-right{justify-content:flex-end}.flex-v-center{align-items:center}.no-margin{margin:0}:host{display:block}:host([inline]),:host([modifiers*=inline]){display:inline-block}:host([hidden]){display:none}:host(:not([inline]):not([modifiers*=inline])){font-size:var(--tct-loading-spinner-size, var(--t-loading-spinner-size, var(--app-scale-12x, 60px)))}.q2-loading-animation{height:1em;width:1em}.half-circle-spinner,.half-circle-spinner *{box-sizing:border-box}.half-circle-spinner{border-radius:100%;position:relative}.half-circle-spinner .circle{position:absolute;width:100%;height:100%;border-radius:100%;border:0.0833333333em solid transparent}.half-circle-spinner .circle.circle-1{border-top-color:var(--tct-loading-primary-color, var(--t-loading-primary-color, var(--t-primary, #0079c1)));animation:half-circle-spinner-animation 1s infinite}.half-circle-spinner .circle.circle-2{border-bottom-color:var(--tct-loading-secondary-color, var(--t-loading-secondary-color, #9ddd4f));animation:half-circle-spinner-animation 1s infinite alternate}@keyframes half-circle-spinner-animation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.q2-loading-skeleton{position:relative;width:100%;height:100%;overflow:hidden;--comp-loading-skeleton-shimmer-color:var(--tct-loading-skeleton-shimmer-color, var(--t-base, rgba(255, 255, 255, 0.5)));--comp-loading-skeleton-vertical-gap:var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px));--comp-loading-skeleton-horizontal-gap:var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px))}.q2-loading-skeleton-shimmer{position:absolute;width:1rem;height:100%;top:0;left:-100px;animation:skeletonShimmer 3s ease-in-out infinite;background-color:var(--comp-loading-skeleton-shimmer-color);box-shadow:0 0 25px 20px var(--comp-loading-skeleton-shimmer-color);transform:rotate(10deg)}.skeleton-shape.rectangle:not(.no-margin){margin:var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px)) var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px))}.skeleton-shape.circle,.skeleton-shape.rectangle{background:var(--tct-loading-skeleton-element-background, var(--tct-loading-skeleton-element-bg, var(--tct-gray-l3, var(--t-gray-14, #f2f2f2))))}.skeleton-shape.rectangle{min-height:var(--tct-loading-skeleton-rectangle-min-height, 20px)}.skeleton-shape.circle{border-radius:50%;padding-top:100%}.flex .rectangle{flex-grow:1}.skeleton-table-row .rectangle{margin:var(--comp-loading-skeleton-vertical-gap) var(--comp-loading-skeleton-horizontal-gap)}.skeleton-table-row .rectangle:not(:first-child):not(:last-child){flex-grow:2}.skeleton-table-row-border .skeleton-shape{margin:0 var(--comp-loading-skeleton-horizontal-gap)}.form{flex-wrap:wrap}.form .field{margin:var(--comp-loading-skeleton-vertical-gap) 0}.form.columns-1 .field{flex-basis:100%}.form.columns-2 .field{flex-basis:50%}.form.columns-3 .field{flex-basis:33.3333%}.form.columns-4 .field{flex-basis:25%}.form.columns-5 .field{flex-basis:20%}.text .rectangle{margin-bottom:0}.text .header.center{margin:0 auto}.text .header.right{margin-left:auto}.text .header{height:1.5rem}.text .header.smaller{height:1rem}.detailed-item{flex-wrap:wrap}.detailed-item.right{flex-flow:row-reverse}.detailed-item-image{flex:0 0 auto;display:inline-flex}.center .detailed-item-image{flex-basis:100%;display:flex}.detailed-item-image .rectangle{flex-grow:0}.detailed-item-text>div{width:100%}.detailed-item-text{flex:1 1 auto}.detailed-item-text .text{margin-top:0;margin-bottom:0}.label-value{flex-wrap:wrap}.label-value .rectangle{flex-basis:calc(50% - 2 * var(--comp-loading-skeleton-horizontal-gap))}@keyframes skeletonShimmer{0%{left:-100px;opacity:1}70%{opacity:1}100%{left:800px;opacity:0}}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}: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}.flex{display:flex}.flex-center{justify-content:center}.flex-left{justify-content:flex-start}.flex-right{justify-content:flex-end}.flex-v-center{align-items:center}.no-margin{margin:0}:host{display:block}:host([inline]),:host([modifiers*=inline]){display:inline-block}:host([hidden]){display:none}:host(:not([inline]):not([modifiers*=inline])){font-size:var(--tct-loading-spinner-size, var(--t-loading-spinner-size, var(--app-scale-12x, 60px)))}.q2-loading-animation{height:1em;width:1em}.half-circle-spinner,.half-circle-spinner *{box-sizing:border-box}.half-circle-spinner{border-radius:100%;position:relative}.half-circle-spinner .circle{position:absolute;width:100%;height:100%;border-radius:100%;border:0.0833333333em solid transparent}.half-circle-spinner .circle.circle-1{border-top-color:var(--tct-loading-primary-color, var(--t-loading-primary-color, var(--t-primary, #0079c1)));animation:half-circle-spinner-animation 1s infinite}.half-circle-spinner .circle.circle-2{border-bottom-color:var(--tct-loading-secondary-color, var(--t-loading-secondary-color, #9ddd4f));animation:half-circle-spinner-animation 1s infinite alternate}@keyframes half-circle-spinner-animation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.q2-loading-skeleton{position:relative;width:100%;height:100%;overflow:hidden;--comp-loading-skeleton-shimmer-color:var(--tct-loading-skeleton-shimmer-color, var(--t-base, rgba(255, 255, 255, 0.5)));--comp-loading-skeleton-vertical-gap:var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px));--comp-loading-skeleton-horizontal-gap:var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px))}.q2-loading-skeleton-shimmer{position:absolute;width:1rem;height:100%;top:0;left:-100px;animation:skeletonShimmer 3s ease-in-out infinite;background-color:var(--comp-loading-skeleton-shimmer-color);box-shadow:0 0 25px 20px var(--comp-loading-skeleton-shimmer-color);transform:rotate(10deg)}.skeleton-shape.rectangle:not(.no-margin){margin:var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px)) var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px))}.skeleton-shape.circle,.skeleton-shape.rectangle{background:var(--tct-loading-skeleton-element-background, var(--tct-loading-skeleton-element-bg, var(--t-a11y-gray-color-AA, #949494)))}.skeleton-shape.rectangle{min-height:var(--tct-loading-skeleton-rectangle-min-height, 20px)}.skeleton-shape.circle{border-radius:50%;padding-top:100%}.flex .rectangle{flex-grow:1}.skeleton-table-row .rectangle{margin:var(--comp-loading-skeleton-vertical-gap) var(--comp-loading-skeleton-horizontal-gap)}.skeleton-table-row .rectangle:not(:first-child):not(:last-child){flex-grow:2}.skeleton-table-row-border .skeleton-shape{margin:0 var(--comp-loading-skeleton-horizontal-gap)}.form{flex-wrap:wrap}.form .field{margin:var(--comp-loading-skeleton-vertical-gap) 0}.form.columns-1 .field{flex-basis:100%}.form.columns-2 .field{flex-basis:50%}.form.columns-3 .field{flex-basis:33.3333%}.form.columns-4 .field{flex-basis:25%}.form.columns-5 .field{flex-basis:20%}.text .rectangle{margin-bottom:0}.text .header.center{margin:0 auto}.text .header.right{margin-left:auto}.text .header{height:1.5rem}.text .header.smaller{height:1rem}.detailed-item{flex-wrap:wrap}.detailed-item.right{flex-flow:row-reverse}.detailed-item-image{flex:0 0 auto;display:inline-flex}.center .detailed-item-image{flex-basis:100%;display:flex}.detailed-item-image .rectangle{flex-grow:0}.detailed-item-text>div{width:100%}.detailed-item-text{flex:1 1 auto}.detailed-item-text .text{margin-top:0;margin-bottom:0}.label-value{flex-wrap:wrap}.label-value .rectangle{flex-basis:calc(50% - 2 * var(--comp-loading-skeleton-horizontal-gap))}@keyframes skeletonShimmer{0%{left:-100px;opacity:1}70%{opacity:1}100%{left:800px;opacity:0}}";
 const Q2Loading = /*@__PURE__*/ proxyCustomElement(class Q2Loading extends HTMLElement {
   constructor() {