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

q2-tecton-elements 1.34.0 → 1.35.1

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

Files changed (304) hide show

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

	@@ -1 +1 @@
1	- {"file":"q2-tag.js","mappings":"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","names":["Q2Tag"],"sources":["./src/components/q2-tag/styles.scss?tag=q2-tag&encapsulation=shadow","./src/components/q2-tag/index.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(tag-margin), --app-scale-2x, 10px);\n}\n\n.tag-wrapper {\n --comp-tag-btn-size: #{var-list(var-prefixer(tag-btn-size), --app-scale-6x)};\n --comp-tag-background: #{var-list(var-prefixer(tag-background), --t-gray-13, #e6e6e6)};\n --comp-tag-color: #{var-list(var-prefixer(tag-color), --t-gray-3, #262626)};\n background: var(--comp-tag-background);\n color: var(--comp-tag-color);\n border-radius: var-list(var-prefixer(tag-border-radius), --app-border-radius-1, 3px);\n position: relative;\n\n :host([theme='primary']) & {\n --comp-tag-background: #{var-list(--tct-tag-primary-color, --t-primary-l5, #61c4ff)};\n --comp-tag-color: #{var-list(--t-primary-text, #ffffff)};\n }\n\n :host([theme='secondary']) & {\n --comp-tag-background: #{var-list(--tct-tag-secondary-color, --t-secondary-l5, #d9e1e6)};\n --comp-tag-color: #{var-list(--t-secondary-text, #000000)};\n }\n\n :host([theme='tertiary']) & {\n --comp-tag-background: #{var-list(--tct-tag-tertiary-color, --t-tertiary-l5, #f4fafe)};\n --comp-tag-color: #{var-list(--t-tertiary-text, #000000)};\n }\n}\n\n.tag {\n display: flex;\n width: max-content;\n height: var-list(var-prefixer(tag-height), --app-scale-6x, 30px);\n line-height: var-list(var-prefixer(tag-height), --app-scale-6x, 30px);\n padding-inline: var-list(var-prefixer(tag-padding-inline), --app-scale-3x, 15px);\n}\n\n.tag.has-options {\n padding-right: 6px;\n}\n\n.btn-wrapper {\n --comp-tag-clickable-size: #{var-list(var-prefixer(tag-clickable-size), 44px)};\n --comp-tag-btn-offset: calc(calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1);\n --comp-tag-background: #{var-list(var-prefixer(tag-background), --t-gray-13, #e6e6e6)};\n height: var(--comp-tag-clickable-size);\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n right: var(--comp-tag-btn-offset);\n top: var(--comp-tag-btn-offset);\n cursor: pointer;\n}\n\nbutton {\n height: var(--comp-tag-btn-size);\n stroke: var(--comp-tag-color);\n --tct-icon-stroke-primary: var(--comp-tag-color);\n cursor: pointer;\n border: 0;\n background: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n padding-right: 6px;\n --tct-icon-size: 18px;\n}\n","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"],"version":3}
1	+ {"file":"q2-tag.js","mappings":"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","names":["Q2Tag"],"sources":["./src/components/q2-tag/styles.scss?tag=q2-tag&encapsulation=shadow","./src/components/q2-tag/index.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(tag-margin), --app-scale-2x, 10px);\n}\n\n.tag-wrapper {\n --comp-tag-btn-size: #{var-list(var-prefixer(tag-btn-size), --app-scale-6x)};\n --comp-tag-background: #{var-list(var-prefixer(tag-background), --t-gray-13, #e6e6e6)};\n --comp-tag-color: #{var-list(var-prefixer(tag-color), --t-gray-3, #262626)};\n background: var(--comp-tag-background);\n color: var(--comp-tag-color);\n border-radius: var-list(var-prefixer(tag-border-radius), --app-border-radius-1, 3px);\n position: relative;\n\n :host([theme='primary']) & {\n --comp-tag-background: #{var-list(--tct-tag-primary-background, --t-primary-l5, #61c4ff)};\n --comp-tag-color: #{var-list(--tct-tag-primary-font-color, --t-primary-text, #ffffff)};\n }\n\n :host([theme='secondary']) & {\n --comp-tag-background: #{var-list(--tct-tag-secondary-background, --t-secondary-l5, #d9e1e6)};\n --comp-tag-color: #{var-list(--tct-tag-secondary-font-color, --t-secondary-text, #000000)};\n }\n\n :host([theme='tertiary']) & {\n --comp-tag-background: #{var-list(--tct-tag-tertiary-background, --t-tertiary-l5, #f4fafe)};\n --comp-tag-color: #{var-list(--tct-tag-tertiary-font-color, --t-tertiary-text, #000000)};\n }\n}\n\n.tag {\n display: flex;\n width: max-content;\n height: var-list(var-prefixer(tag-height), --app-scale-6x, 30px);\n line-height: var-list(var-prefixer(tag-height), --app-scale-6x, 30px);\n padding-inline: var-list(var-prefixer(tag-padding-inline), --app-scale-3x, 15px);\n}\n\n.tag.has-options {\n padding-right: 6px;\n}\n\n.btn-wrapper {\n --comp-tag-clickable-size: #{var-list(var-prefixer(tag-clickable-size), 44px)};\n --comp-tag-btn-offset: calc(calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1);\n --comp-tag-background: #{var-list(var-prefixer(tag-background), --t-gray-13, #e6e6e6)};\n height: var(--comp-tag-clickable-size);\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n right: var(--comp-tag-btn-offset);\n top: var(--comp-tag-btn-offset);\n cursor: pointer;\n}\n\nbutton {\n height: var(--comp-tag-btn-size);\n stroke: var(--comp-tag-color);\n --tct-icon-stroke-primary: var(--comp-tag-color);\n cursor: pointer;\n border: 0;\n background: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n padding-right: 6px;\n --tct-icon-size: 18px;\n}\n","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 type=\"button\"\n role=\"combobox\"\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 > 0 && (\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 ref={el => (this.optionList = el)}\n onChange={this.handleChange}\n type=\"menu\"\n align=\"right\"\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"],"version":3}

package/dist/components/q2-tooltip.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { o as overrideFocus, i as isEventFromElement } from './index16.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}:host{display:inline-block}:host([block]){display:block}.tooltip{--comp-background:var(--tct-tooltip-background-color, var(--t-tooltip-background-color, var(--t-top-a3, rgba(13, 13, 13, 0.85))));--comp-offset-default:calc(var(--app-scale-1x, 5px) * -1);--comp-offset:var(--tct-tooltip-offset, var(--t-tooltip-offset, var(--comp-offset-default)));--comp-position:var(--tct-tooltip-position, var(--t-tooltip-position, var(--app-scale-1x, 5px)));--comp-body-offset-default:calc(var(--app-scale-3x, 15px) * -1);--comp-body-offset:var(--tct-tooltip-body-offset, var(--t-tooltip-body-offset, var(--comp-body-offset-default)));--comp-duration:var(--tct-tooltip-transition-duration, var(--t-tooltip-transition-duration, var(--app-duration-1, 0.2s)));--comp-visible-duration:var(--tct-tooltip-transition-visible-duration, var(--t-tooltip-transition-visible-duration, 2s));--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 0s));display:inline-block;position:relative}.tooltip:hover{--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 1s))}.tooltip:before{position:absolute;z-index:2;width:0;height:0;color:var(--comp-background);pointer-events:none;content:\"\";border:var(--tct-tooltip-arrow-size, var(--t-tooltip-arrow-size, var(--app-scale-1x, 5px))) solid transparent}.tooltip:after{--comp-padding:var(--app-scale-1x, 5px) 8px;position:absolute;z-index:1;padding:var(--tct-tooltip-padding, var(--t-tooltip-padding, var(--comp-padding)));font-weight:var(--tct-tooltip-font-weight, var(--t-tooltip-font-weight, 600));font-size:var(--tct-tooltip-font-size, var(--t-tooltip-font-size, var(--app-font-size-small, 12px)));line-height:1.5;color:var(--tct-tooltip-color, var(--t-tooltip-color, var(--app-white, #ffffff)));text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:var(--comp-background);border-radius:var(--tct-tooltip-border-radius, var(--t-tooltip-border-radius, var(--app-border-radius-1, 3px)))}.tooltip:before,.tooltip:after{display:inline-block;visibility:hidden;opacity:0;transition:all var(--comp-duration) ease-in-out var(--comp-delay)}:host([block]) .tooltip{display:block}.tooltip:hover:before,.tooltip:hover:after,.tooltip.has-keyboard-focus:focus-within:before,.tooltip.has-keyboard-focus:focus-within:after,:host([persistent]) .tooltip:before,:host([persistent]) .tooltip:after{text-decoration:none;visibility:visible;opacity:1}@keyframes tooltippedFade{from{opacity:0}to{opacity:1}}.tooltip.has-generic-focus:focus-within:before,.tooltip.has-generic-focus:focus-within:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade, tooltippedFade;animation-direction:normal, reverse;animation-duration:var(--comp-duration);animation-delay:0ms, calc(var(--comp-visible-duration) + var(--comp-duration))}.tooltip.has-generic-focus-out:before,.tooltip.has-generic-focus-out:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade;animation-direction:reverse;animation-duration:var(--comp-duration)}:host([multiline]) .tooltip:after{width:max-content;max-width:var(--tct-tooltip-max-width, var(--t-tooltip-max-width, 200px));word-break:break-word;word-wrap:normal;white-space:pre-line;border-collapse:separate;text-align:left}:host([position=s]) :host([multiline]) .tooltip:after,:host([position=n]) :host([multiline]) .tooltip:after{right:auto;left:50%;transform:translateX(-50%)}:host([position=w]) :host([multiline]) .tooltip:after,:host([position=e]) :host([multiline]) .tooltip:after{right:100%}:host([multiline]) .tooltip:hover:after,:host([multiline]) .tooltip:active:after,:host([multiline]) .tooltip:focus:after{display:table-cell}:host([multiline]) .tooltip:focus-within:after{display:table-cell}:host([position=s]) .tooltip:after,:host([position=se]) .tooltip:after,:host([position=sw]) .tooltip:after{top:100%;right:50%;margin-top:var(--comp-position)}:host([position=s]) .tooltip:before,:host([position=se]) .tooltip:before,:host([position=sw]) .tooltip:before{top:auto;right:50%;bottom:var(--comp-offset);margin-right:var(--comp-offset);border-bottom-color:var(--comp-background)}:host([position=n]) .tooltip:after,:host([position=ne]) .tooltip:after,:host([position=nw]) .tooltip:after{right:50%;bottom:100%;margin-bottom:var(--comp-position)}:host([position=n]) .tooltip:before,:host([position=ne]) .tooltip:before,:host([position=nw]) .tooltip:before{top:var(--comp-offset);right:50%;bottom:auto;margin-right:var(--comp-offset);border-top-color:var(--comp-background)}:host([position=se]) .tooltip:after,:host([position=ne]) .tooltip:after{right:auto;left:50%;margin-left:var(--comp-body-offset)}:host([position=sw]) .tooltip:after{margin-right:var(--comp-body-offset)}:host([position=nw]) .tooltip:after{margin-right:var(--comp-body-offset)}:host([position=s]) .tooltip:after,:host([position=n]) .tooltip:after{transform:translateX(50%)}:host([position=w]) .tooltip:after{right:100%;bottom:50%;margin-right:var(--comp-position);transform:translateY(50%)}:host([position=w]) .tooltip:before{top:50%;bottom:50%;left:var(--comp-offset);margin-top:var(--comp-offset);border-left-color:var(--comp-background)}:host([position=e]) .tooltip:after{bottom:50%;left:100%;margin-left:var(--comp-position);transform:translateY(50%)}:host([position=e]) .tooltip:before{top:50%;right:var(--comp-offset);bottom:50%;margin-top:var(--comp-offset);border-right-color:var(--comp-background)}";
+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}:host{display:inline-block}:host([block]){display:block}.tooltip{--comp-background:var(--tct-tooltip-background, var(--tct-tooltip-background-color, var(--t-tooltip-background-color, var(--t-top-a3, rgba(13, 13, 13, 0.85)))));--comp-offset-default:calc(var(--app-scale-1x, 5px) * -1);--comp-offset:var(--tct-tooltip-offset, var(--t-tooltip-offset, var(--comp-offset-default)));--comp-position:var(--tct-tooltip-position, var(--t-tooltip-position, var(--app-scale-1x, 5px)));--comp-body-offset-default:calc(var(--app-scale-3x, 15px) * -1);--comp-body-offset:var(--tct-tooltip-body-offset, var(--t-tooltip-body-offset, var(--comp-body-offset-default)));--comp-duration:var(--tct-tooltip-transition-duration, var(--t-tooltip-transition-duration, var(--app-duration-1, 0.2s)));--comp-visible-duration:var(--tct-tooltip-transition-visible-duration, var(--t-tooltip-transition-visible-duration, 2s));--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 0s));display:inline-block;position:relative}.tooltip:hover{--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 1s))}.tooltip:before{position:absolute;z-index:2;width:0;height:0;color:var(--comp-background);pointer-events:none;content:\"\";border:var(--tct-tooltip-arrow-size, var(--t-tooltip-arrow-size, var(--app-scale-1x, 5px))) solid transparent}.tooltip:after{--comp-padding:var(--app-scale-1x, 5px) 8px;position:absolute;z-index:1;padding:var(--tct-tooltip-padding, var(--t-tooltip-padding, var(--comp-padding)));font-weight:var(--tct-tooltip-font-weight, var(--t-tooltip-font-weight, 600));font-size:var(--tct-tooltip-font-size, var(--t-tooltip-font-size, var(--app-font-size-small, 12px)));line-height:1.5;color:var(--tct-tooltip-color, var(--t-tooltip-color, var(--app-white, #ffffff)));text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:var(--comp-background);border-radius:var(--tct-tooltip-border-radius, var(--t-tooltip-border-radius, var(--app-border-radius-1, 3px)))}.tooltip:before,.tooltip:after{display:inline-block;visibility:hidden;opacity:0;transition:all var(--comp-duration) ease-in-out var(--comp-delay)}:host([block]) .tooltip{display:block}.tooltip:hover:before,.tooltip:hover:after,.tooltip.has-keyboard-focus:focus-within:before,.tooltip.has-keyboard-focus:focus-within:after,:host([persistent]) .tooltip:before,:host([persistent]) .tooltip:after{text-decoration:none;visibility:visible;opacity:1}@keyframes tooltippedFade{from{opacity:0}to{opacity:1}}.tooltip.has-generic-focus:focus-within:before,.tooltip.has-generic-focus:focus-within:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade, tooltippedFade;animation-direction:normal, reverse;animation-duration:var(--comp-duration);animation-delay:0ms, calc(var(--comp-visible-duration) + var(--comp-duration))}.tooltip.has-generic-focus-out:before,.tooltip.has-generic-focus-out:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade;animation-direction:reverse;animation-duration:var(--comp-duration)}:host([multiline]) .tooltip:after{width:max-content;max-width:var(--tct-tooltip-max-width, var(--t-tooltip-max-width, 200px));word-break:break-word;word-wrap:normal;white-space:pre-line;border-collapse:separate;text-align:left}:host([position=s]) :host([multiline]) .tooltip:after,:host([position=n]) :host([multiline]) .tooltip:after{right:auto;left:50%;transform:translateX(-50%)}:host([position=w]) :host([multiline]) .tooltip:after,:host([position=e]) :host([multiline]) .tooltip:after{right:100%}:host([multiline]) .tooltip:hover:after,:host([multiline]) .tooltip:active:after,:host([multiline]) .tooltip:focus:after{display:table-cell}:host([multiline]) .tooltip:focus-within:after{display:table-cell}:host([position=s]) .tooltip:after,:host([position=se]) .tooltip:after,:host([position=sw]) .tooltip:after{top:100%;right:50%;margin-top:var(--comp-position)}:host([position=s]) .tooltip:before,:host([position=se]) .tooltip:before,:host([position=sw]) .tooltip:before{top:auto;right:50%;bottom:var(--comp-offset);margin-right:var(--comp-offset);border-bottom-color:var(--comp-background)}:host([position=n]) .tooltip:after,:host([position=ne]) .tooltip:after,:host([position=nw]) .tooltip:after{right:50%;bottom:100%;margin-bottom:var(--comp-position)}:host([position=n]) .tooltip:before,:host([position=ne]) .tooltip:before,:host([position=nw]) .tooltip:before{top:var(--comp-offset);right:50%;bottom:auto;margin-right:var(--comp-offset);border-top-color:var(--comp-background)}:host([position=se]) .tooltip:after,:host([position=ne]) .tooltip:after{right:auto;left:50%;margin-left:var(--comp-body-offset)}:host([position=sw]) .tooltip:after{margin-right:var(--comp-body-offset)}:host([position=nw]) .tooltip:after{margin-right:var(--comp-body-offset)}:host([position=s]) .tooltip:after,:host([position=n]) .tooltip:after{transform:translateX(50%)}:host([position=w]) .tooltip:after{right:100%;bottom:50%;margin-right:var(--comp-position);transform:translateY(50%)}:host([position=w]) .tooltip:before{top:50%;bottom:50%;left:var(--comp-offset);margin-top:var(--comp-offset);border-left-color:var(--comp-background)}:host([position=e]) .tooltip:after{bottom:50%;left:100%;margin-left:var(--comp-position);transform:translateY(50%)}:host([position=e]) .tooltip:before{top:50%;right:var(--comp-offset);bottom:50%;margin-top:var(--comp-offset);border-right-color:var(--comp-background)}";
 const Q2Tooltip$1 = /*@__PURE__*/ proxyCustomElement(class Q2Tooltip extends HTMLElement {
   constructor() {

package/dist/components/q2-tooltip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-tooltip.js","mappings":"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","names":["Q2Tooltip"],"sources":["./src/components/q2-tooltip/styles.scss?tag=q2-tooltip&encapsulation=shadow","./src/components/q2-tooltip/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n}\n\n:host([block]) {\n display: block;\n}\n\n.tooltip {\n --comp-background: #{var-list(var-prefixer(tooltip-background-color), --t-top-a3, rgba(13, 13, 13, 0.85))};\n --comp-offset-default: calc(var(--app-scale-1x, 5px) * -1);\n --comp-offset: #{var-list(var-prefixer(tooltip-offset), --comp-offset-default)};\n --comp-position: #{var-list(var-prefixer(tooltip-position), --app-scale-1x, 5px)};\n --comp-body-offset-default: calc(var(--app-scale-3x, 15px) * -1);\n --comp-body-offset: #{var-list(var-prefixer(tooltip-body-offset), --comp-body-offset-default)};\n --comp-duration: #{var-list(var-prefixer(tooltip-transition-duration), --app-duration-1, 0.2s)};\n --comp-visible-duration: #{var-list(var-prefixer(tooltip-transition-visible-duration), 2s)};\n --comp-delay: #{var-list(var-prefixer(tooltip-transition-delay), 0s)};\n\n display: inline-block;\n position: relative;\n\n &:hover {\n --comp-delay: #{var-list(var-prefixer(tooltip-transition-delay), 1s)};\n }\n\n // Tooltip arrow\n &:before {\n position: absolute;\n z-index: 2;\n width: 0;\n height: 0;\n color: var(--comp-background);\n pointer-events: none;\n content: '';\n border: var-list(var-prefixer(tooltip-arrow-size), --app-scale-1x, 5px) solid transparent;\n }\n\n // Tooltip bubble\n &:after {\n --comp-padding: #{var-list(--app-scale-1x, 5px)} 8px;\n\n position: absolute;\n z-index: 1;\n padding: var-list(var-prefixer(tooltip-padding), --comp-padding);\n font-weight: var-list(var-prefixer(tooltip-font-weight), 600);\n font-size: var-list(var-prefixer(tooltip-font-size), --app-font-size-small, 12px);\n line-height: 1.5;\n color: var-list(var-prefixer(tooltip-color), --app-white, #ffffff);\n text-align: center;\n text-decoration: none;\n text-shadow: none;\n text-transform: none;\n letter-spacing: normal;\n word-wrap: break-word;\n white-space: pre;\n pointer-events: none;\n content: attr(aria-label);\n background: var(--comp-background);\n border-radius: var-list(var-prefixer(tooltip-border-radius), --app-border-radius-1, 3px);\n }\n\n &:before,\n &:after {\n display: inline-block;\n visibility: hidden;\n opacity: 0;\n transition: all var(--comp-duration) ease-in-out var(--comp-delay);\n }\n\n :host([block]) & {\n display: block;\n }\n\n // When to show the tooltip\n &:hover,\n &.has-keyboard-focus:focus-within,\n :host([persistent]) & {\n &:before,\n &:after {\n text-decoration: none;\n visibility: visible;\n opacity: 1;\n }\n }\n\n @keyframes tooltippedFade {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n }\n\n &.has-generic-focus:focus-within {\n &:before,\n &:after {\n visibility: visible;\n opacity: 0;\n transition: none;\n animation-timing-function: ease-in-out;\n animation-fill-mode: forwards;\n animation-name: tooltippedFade, tooltippedFade;\n animation-direction: normal, reverse;\n animation-duration: var(--comp-duration);\n animation-delay: 0ms, calc(var(--comp-visible-duration) + var(--comp-duration));\n }\n }\n &.has-generic-focus-out {\n &:before,\n &:after {\n visibility: visible;\n opacity: 0;\n transition: none;\n animation-timing-function: ease-in-out;\n animation-fill-mode: forwards;\n animation-name: tooltippedFade;\n animation-direction: reverse;\n animation-duration: var(--comp-duration);\n }\n }\n\n :host([multiline]) & {\n &:after {\n width: max-content;\n max-width: var-list(var-prefixer(tooltip-max-width), 200px);\n word-break: break-word;\n word-wrap: normal;\n white-space: pre-line;\n border-collapse: separate;\n text-align: left;\n }\n\n :host([position='s']) &,\n :host([position='n']) & {\n &:after {\n right: auto;\n left: 50%;\n transform: translateX(-50%);\n }\n }\n\n :host([position='w']) &,\n :host([position='e']) & {\n &:after {\n right: 100%;\n }\n }\n\n &:hover,\n &:active,\n &:focus {\n &:after {\n display: table-cell;\n }\n }\n\n &:focus-within {\n &:after {\n display: table-cell;\n }\n }\n }\n\n // Below\n :host([position='s']) &,\n :host([position='se']) &,\n :host([position='sw']) & {\n &:after {\n top: 100%;\n right: 50%;\n margin-top: var(--comp-position);\n }\n\n &:before {\n top: auto;\n right: 50%;\n bottom: var(--comp-offset);\n margin-right: var(--comp-offset);\n border-bottom-color: var(--comp-background);\n }\n }\n\n // Above\n :host([position='n']) &,\n :host([position='ne']) &,\n :host([position='nw']) & {\n &:after {\n right: 50%;\n bottom: 100%;\n margin-bottom: var(--comp-position);\n }\n\n &:before {\n top: var(--comp-offset);\n right: 50%;\n bottom: auto;\n margin-right: var(--comp-offset);\n border-top-color: var(--comp-background);\n }\n }\n\n :host([position='se']) &,\n :host([position='ne']) & {\n &:after {\n right: auto;\n left: 50%;\n margin-left: var(--comp-body-offset);\n }\n }\n\n :host([position='sw']) & {\n &:after {\n margin-right: var(--comp-body-offset);\n }\n }\n\n :host([position='nw']) & {\n &:after {\n margin-right: var(--comp-body-offset);\n }\n }\n\n // Centered\n :host([position='s']) &,\n :host([position='n']) & {\n &:after {\n transform: translateX(50%);\n }\n }\n\n // Left side\n :host([position='w']) & {\n &:after {\n right: 100%;\n bottom: 50%;\n margin-right: var(--comp-position);\n transform: translateY(50%);\n }\n\n &:before {\n top: 50%;\n bottom: 50%;\n left: var(--comp-offset);\n margin-top: var(--comp-offset);\n border-left-color: var(--comp-background);\n }\n }\n\n // Right side\n :host([position='e']) & {\n &:after {\n bottom: 50%;\n left: 100%;\n margin-left: var(--comp-position);\n transform: translateY(50%);\n }\n\n &:before {\n top: 50%;\n right: var(--comp-offset);\n bottom: 50%;\n margin-top: var(--comp-offset);\n border-right-color: var(--comp-background);\n }\n }\n}\n","import { Component, Prop, h, ComponentInterface, Element, Listen, State } from '@stencil/core';\nimport { isEventFromElement, overrideFocus } from 'src/utils';\n\n@Component({\n tag: 'q2-tooltip',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Tooltip implements ComponentInterface {\n @Prop({ reflect: true }) label: string;\n @Prop({ reflect: true }) block: boolean;\n @Prop({ reflect: true }) multiline: boolean;\n @Prop({ reflect: true }) persistent: boolean;\n @Prop({ reflect: true }) immediate: boolean;\n @Prop({ reflect: true }) focusable: boolean = false;\n @Prop({ reflect: true }) position: 'n' \| 's' \| 'e' \| 'w' \| 'nw' \| 'ne' \| 'sw' \| 'se' = 'n';\n\n @Element() hostElement: HTMLElement;\n @State() focusClass: 'has-keyboard-focus' \| 'has-generic-focus' \| 'has-generic-focus-out';\n\n tooltipElement: HTMLDivElement;\n animationEndCount = 0;\n\n /// LifeCycle Hooks ///\n componentDidLoad(): void {\n overrideFocus(this.hostElement);\n }\n\n /// Getters ///\n get shouldBeVisible() {\n if (this.persistent) return true;\n return this.hostElement.matches(':hover, :focus-within');\n }\n\n /// Helpers //\n checkFocusClass() {\n if (!this.shouldBeVisible) return;\n const isKeyboardFocus = !!this.findFocusVisibleElement(document.activeElement);\n this.focusClass = isKeyboardFocus ? 'has-keyboard-focus' : 'has-generic-focus';\n if (isKeyboardFocus) return;\n }\n\n hideTooltip() {\n if (this.focusClass === 'has-generic-focus') this.focusClass = 'has-generic-focus-out';\n else this.focusClass = null;\n }\n\n animationEndHandler() {\n this.animationEndCount = this.animationEndCount + 1;\n const { focusClass, animationEndCount } = this;\n\n // animationEnd is fired once for :before and once for :after pseudo elements\n // there are multiple animations defined for .has-generic-focus\n // so we need to wait for all of them to finish before we can remove the class\n if (focusClass === 'has-generic-focus-out' \|\| (focusClass === 'has-generic-focus' && animationEndCount === 4)) {\n this.focusClass = null;\n this.animationEndCount = 0;\n }\n }\n\n findFocusVisibleElement(element: Element) {\n if (!element) return;\n if (element.shadowRoot) element = this.findFocusVisibleElement(element.shadowRoot.activeElement);\n return element?.matches(':focus-visible') ? element : null;\n }\n\n /// Listeners ///\n @Listen('keyup')\n keyUpHandler(event: KeyboardEvent) {\n switch (event.key) {\n case 'Esc':\n case 'Escape':\n this.hideTooltip();\n break;\n }\n }\n\n @Listen('focus', { capture: true })\n focusCaptureHandler() {\n this.checkFocusClass();\n }\n\n @Listen('focus')\n focusHandler(event) {\n if (!isEventFromElement(event, this.hostElement)) return;\n if (!this.focusable) return;\n this.tooltipElement.focus();\n }\n\n @Listen('focusout')\n focusOutHandler() {\n if (this.shouldBeVisible) return;\n if (this.focusClass === 'has-generic-focus') this.focusClass = 'has-generic-focus-out';\n else this.focusClass = null;\n }\n\n render() {\n const { focusClass } = this;\n const classes = ['tooltip'];\n if (focusClass) classes.push(focusClass);\n\n return this.label ? (\n <div\n tabindex={this.focusable ? 0 : undefined}\n ref={el => (this.tooltipElement = el)}\n class={classes.join(' ')}\n aria-label={this.label}\n onAnimationEnd={() => this.animationEndHandler()}\n role=\"tooltip\"\n test-id=\"tooltipContainer\"\n >\n <slot />\n </div>\n ) : (\n <slot />\n );\n }\n}\n"],"version":3}
1	+ {"file":"q2-tooltip.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,0uMAA0uM;;MCQ/uMA,WAAS;;;;;IAalB,sBAAiB,GAAG,CAAC,CAAC;;;;;;qBAPwB,KAAK;oBACoC,GAAG;;;;EAS1F,gBAAgB;IACZ,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;GACnC;;EAGD,IAAI,eAAe;IACf,IAAI,IAAI,CAAC,UAAU;MAAE,OAAO,IAAI,CAAC;IACjC,OAAO,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,uBAAuB,CAAC,CAAC;GAC5D;;EAGD,eAAe;IACX,IAAI,CAAC,IAAI,CAAC,eAAe;MAAE,OAAO;IAClC,MAAM,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC,uBAAuB,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;IAC/E,IAAI,CAAC,UAAU,GAAG,eAAe,GAAG,oBAAoB,GAAG,mBAAmB,CAAC;IAC/E,IAAI,eAAe;MAAE,OAAO;GAC/B;EAED,WAAW;IACP,IAAI,IAAI,CAAC,UAAU,KAAK,mBAAmB;MAAE,IAAI,CAAC,UAAU,GAAG,uBAAuB,CAAC;;MAClF,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;GAC/B;EAED,mBAAmB;IACf,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC;IACpD,MAAM,EAAE,UAAU,EAAE,iBAAiB,EAAE,GAAG,IAAI,CAAC;;;;IAK/C,IAAI,UAAU,KAAK,uBAAuB,KAAK,UAAU,KAAK,mBAAmB,IAAI,iBAAiB,KAAK,CAAC,CAAC,EAAE;MAC3G,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;MACvB,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC;KAC9B;GACJ;EAED,uBAAuB,CAAC,OAAgB;IACpC,IAAI,CAAC,OAAO;MAAE,OAAO;IACrB,IAAI,OAAO,CAAC,UAAU;MAAE,OAAO,GAAG,IAAI,CAAC,uBAAuB,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IACjG,OAAO,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAC,gBAAgB,CAAC,IAAG,OAAO,GAAG,IAAI,CAAC;GAC9D;;EAID,YAAY,CAAC,KAAoB;IAC7B,QAAQ,KAAK,CAAC,GAAG;MACb,KAAK,KAAK,CAAC;MACX,KAAK,QAAQ;QACT,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,MAAM;KACb;GACJ;EAGD,mBAAmB;IACf,IAAI,CAAC,eAAe,EAAE,CAAC;GAC1B;EAGD,YAAY,CAAC,KAAK;IACd,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;MAAE,OAAO;IACzD,IAAI,CAAC,IAAI,CAAC,SAAS;MAAE,OAAO;IAC5B,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,CAAC;GAC/B;EAGD,eAAe;IACX,IAAI,IAAI,CAAC,eAAe;MAAE,OAAO;IACjC,IAAI,IAAI,CAAC,UAAU,KAAK,mBAAmB;MAAE,IAAI,CAAC,UAAU,GAAG,uBAAuB,CAAC;;MAClF,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;GAC/B;EAED,MAAM;IACF,MAAM,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;IAC5B,MAAM,OAAO,GAAG,CAAC,SAAS,CAAC,CAAC;IAC5B,IAAI,UAAU;MAAE,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAEzC,OAAO,IAAI,CAAC,KAAK,IACb,WACI,QAAQ,EAAE,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,SAAS,EACxC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,EACrC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,gBACZ,IAAI,CAAC,KAAK,EACtB,cAAc,EAAE,MAAM,IAAI,CAAC,mBAAmB,EAAE,EAChD,IAAI,EAAC,SAAS,aACN,kBAAkB,IAE1B,eAAQ,CACN,KAEN,eAAQ,CACX,CAAC;GACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["Q2Tooltip"],"sources":["./src/components/q2-tooltip/styles.scss?tag=q2-tooltip&encapsulation=shadow","./src/components/q2-tooltip/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n}\n\n:host([block]) {\n display: block;\n}\n\n.tooltip {\n --comp-background: #{var-list(--tct-tooltip-background, var-prefixer(tooltip-background-color), --t-top-a3, rgba(13, 13, 13, 0.85))};\n --comp-offset-default: calc(var(--app-scale-1x, 5px) * -1);\n --comp-offset: #{var-list(var-prefixer(tooltip-offset), --comp-offset-default)};\n --comp-position: #{var-list(var-prefixer(tooltip-position), --app-scale-1x, 5px)};\n --comp-body-offset-default: calc(var(--app-scale-3x, 15px) * -1);\n --comp-body-offset: #{var-list(var-prefixer(tooltip-body-offset), --comp-body-offset-default)};\n --comp-duration: #{var-list(var-prefixer(tooltip-transition-duration), --app-duration-1, 0.2s)};\n --comp-visible-duration: #{var-list(var-prefixer(tooltip-transition-visible-duration), 2s)};\n --comp-delay: #{var-list(var-prefixer(tooltip-transition-delay), 0s)};\n\n display: inline-block;\n position: relative;\n\n &:hover {\n --comp-delay: #{var-list(var-prefixer(tooltip-transition-delay), 1s)};\n }\n\n // Tooltip arrow\n &:before {\n position: absolute;\n z-index: 2;\n width: 0;\n height: 0;\n color: var(--comp-background);\n pointer-events: none;\n content: '';\n border: var-list(var-prefixer(tooltip-arrow-size), --app-scale-1x, 5px) solid transparent;\n }\n\n // Tooltip bubble\n &:after {\n --comp-padding: #{var-list(--app-scale-1x, 5px)} 8px;\n\n position: absolute;\n z-index: 1;\n padding: var-list(var-prefixer(tooltip-padding), --comp-padding);\n font-weight: var-list(var-prefixer(tooltip-font-weight), 600);\n font-size: var-list(var-prefixer(tooltip-font-size), --app-font-size-small, 12px);\n line-height: 1.5;\n color: var-list(var-prefixer(tooltip-color), --app-white, #ffffff);\n text-align: center;\n text-decoration: none;\n text-shadow: none;\n text-transform: none;\n letter-spacing: normal;\n word-wrap: break-word;\n white-space: pre;\n pointer-events: none;\n content: attr(aria-label);\n background: var(--comp-background);\n border-radius: var-list(var-prefixer(tooltip-border-radius), --app-border-radius-1, 3px);\n }\n\n &:before,\n &:after {\n display: inline-block;\n visibility: hidden;\n opacity: 0;\n transition: all var(--comp-duration) ease-in-out var(--comp-delay);\n }\n\n :host([block]) & {\n display: block;\n }\n\n // When to show the tooltip\n &:hover,\n &.has-keyboard-focus:focus-within,\n :host([persistent]) & {\n &:before,\n &:after {\n text-decoration: none;\n visibility: visible;\n opacity: 1;\n }\n }\n\n @keyframes tooltippedFade {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n }\n\n &.has-generic-focus:focus-within {\n &:before,\n &:after {\n visibility: visible;\n opacity: 0;\n transition: none;\n animation-timing-function: ease-in-out;\n animation-fill-mode: forwards;\n animation-name: tooltippedFade, tooltippedFade;\n animation-direction: normal, reverse;\n animation-duration: var(--comp-duration);\n animation-delay: 0ms, calc(var(--comp-visible-duration) + var(--comp-duration));\n }\n }\n &.has-generic-focus-out {\n &:before,\n &:after {\n visibility: visible;\n opacity: 0;\n transition: none;\n animation-timing-function: ease-in-out;\n animation-fill-mode: forwards;\n animation-name: tooltippedFade;\n animation-direction: reverse;\n animation-duration: var(--comp-duration);\n }\n }\n\n :host([multiline]) & {\n &:after {\n width: max-content;\n max-width: var-list(var-prefixer(tooltip-max-width), 200px);\n word-break: break-word;\n word-wrap: normal;\n white-space: pre-line;\n border-collapse: separate;\n text-align: left;\n }\n\n :host([position='s']) &,\n :host([position='n']) & {\n &:after {\n right: auto;\n left: 50%;\n transform: translateX(-50%);\n }\n }\n\n :host([position='w']) &,\n :host([position='e']) & {\n &:after {\n right: 100%;\n }\n }\n\n &:hover,\n &:active,\n &:focus {\n &:after {\n display: table-cell;\n }\n }\n\n &:focus-within {\n &:after {\n display: table-cell;\n }\n }\n }\n\n // Below\n :host([position='s']) &,\n :host([position='se']) &,\n :host([position='sw']) & {\n &:after {\n top: 100%;\n right: 50%;\n margin-top: var(--comp-position);\n }\n\n &:before {\n top: auto;\n right: 50%;\n bottom: var(--comp-offset);\n margin-right: var(--comp-offset);\n border-bottom-color: var(--comp-background);\n }\n }\n\n // Above\n :host([position='n']) &,\n :host([position='ne']) &,\n :host([position='nw']) & {\n &:after {\n right: 50%;\n bottom: 100%;\n margin-bottom: var(--comp-position);\n }\n\n &:before {\n top: var(--comp-offset);\n right: 50%;\n bottom: auto;\n margin-right: var(--comp-offset);\n border-top-color: var(--comp-background);\n }\n }\n\n :host([position='se']) &,\n :host([position='ne']) & {\n &:after {\n right: auto;\n left: 50%;\n margin-left: var(--comp-body-offset);\n }\n }\n\n :host([position='sw']) & {\n &:after {\n margin-right: var(--comp-body-offset);\n }\n }\n\n :host([position='nw']) & {\n &:after {\n margin-right: var(--comp-body-offset);\n }\n }\n\n // Centered\n :host([position='s']) &,\n :host([position='n']) & {\n &:after {\n transform: translateX(50%);\n }\n }\n\n // Left side\n :host([position='w']) & {\n &:after {\n right: 100%;\n bottom: 50%;\n margin-right: var(--comp-position);\n transform: translateY(50%);\n }\n\n &:before {\n top: 50%;\n bottom: 50%;\n left: var(--comp-offset);\n margin-top: var(--comp-offset);\n border-left-color: var(--comp-background);\n }\n }\n\n // Right side\n :host([position='e']) & {\n &:after {\n bottom: 50%;\n left: 100%;\n margin-left: var(--comp-position);\n transform: translateY(50%);\n }\n\n &:before {\n top: 50%;\n right: var(--comp-offset);\n bottom: 50%;\n margin-top: var(--comp-offset);\n border-right-color: var(--comp-background);\n }\n }\n}\n","import { Component, Prop, h, ComponentInterface, Element, Listen, State } from '@stencil/core';\nimport { isEventFromElement, overrideFocus } from 'src/utils';\n\n@Component({\n tag: 'q2-tooltip',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Tooltip implements ComponentInterface {\n @Prop({ reflect: true }) label: string;\n @Prop({ reflect: true }) block: boolean;\n @Prop({ reflect: true }) multiline: boolean;\n @Prop({ reflect: true }) persistent: boolean;\n @Prop({ reflect: true }) immediate: boolean;\n @Prop({ reflect: true }) focusable: boolean = false;\n @Prop({ reflect: true }) position: 'n' \| 's' \| 'e' \| 'w' \| 'nw' \| 'ne' \| 'sw' \| 'se' = 'n';\n\n @Element() hostElement: HTMLElement;\n @State() focusClass: 'has-keyboard-focus' \| 'has-generic-focus' \| 'has-generic-focus-out';\n\n tooltipElement: HTMLDivElement;\n animationEndCount = 0;\n\n /// LifeCycle Hooks ///\n componentDidLoad(): void {\n overrideFocus(this.hostElement);\n }\n\n /// Getters ///\n get shouldBeVisible() {\n if (this.persistent) return true;\n return this.hostElement.matches(':hover, :focus-within');\n }\n\n /// Helpers //\n checkFocusClass() {\n if (!this.shouldBeVisible) return;\n const isKeyboardFocus = !!this.findFocusVisibleElement(document.activeElement);\n this.focusClass = isKeyboardFocus ? 'has-keyboard-focus' : 'has-generic-focus';\n if (isKeyboardFocus) return;\n }\n\n hideTooltip() {\n if (this.focusClass === 'has-generic-focus') this.focusClass = 'has-generic-focus-out';\n else this.focusClass = null;\n }\n\n animationEndHandler() {\n this.animationEndCount = this.animationEndCount + 1;\n const { focusClass, animationEndCount } = this;\n\n // animationEnd is fired once for :before and once for :after pseudo elements\n // there are multiple animations defined for .has-generic-focus\n // so we need to wait for all of them to finish before we can remove the class\n if (focusClass === 'has-generic-focus-out' \|\| (focusClass === 'has-generic-focus' && animationEndCount === 4)) {\n this.focusClass = null;\n this.animationEndCount = 0;\n }\n }\n\n findFocusVisibleElement(element: Element) {\n if (!element) return;\n if (element.shadowRoot) element = this.findFocusVisibleElement(element.shadowRoot.activeElement);\n return element?.matches(':focus-visible') ? element : null;\n }\n\n /// Listeners ///\n @Listen('keyup')\n keyUpHandler(event: KeyboardEvent) {\n switch (event.key) {\n case 'Esc':\n case 'Escape':\n this.hideTooltip();\n break;\n }\n }\n\n @Listen('focus', { capture: true })\n focusCaptureHandler() {\n this.checkFocusClass();\n }\n\n @Listen('focus')\n focusHandler(event) {\n if (!isEventFromElement(event, this.hostElement)) return;\n if (!this.focusable) return;\n this.tooltipElement.focus();\n }\n\n @Listen('focusout')\n focusOutHandler() {\n if (this.shouldBeVisible) return;\n if (this.focusClass === 'has-generic-focus') this.focusClass = 'has-generic-focus-out';\n else this.focusClass = null;\n }\n\n render() {\n const { focusClass } = this;\n const classes = ['tooltip'];\n if (focusClass) classes.push(focusClass);\n\n return this.label ? (\n <div\n tabindex={this.focusable ? 0 : undefined}\n ref={el => (this.tooltipElement = el)}\n class={classes.join(' ')}\n aria-label={this.label}\n onAnimationEnd={() => this.animationEndHandler()}\n role=\"tooltip\"\n test-id=\"tooltipContainer\"\n >\n <slot />\n </div>\n ) : (\n <slot />\n );\n }\n}\n"],"version":3}

package/dist/docs.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-12-14T00:02:48",
+  "timestamp": "2024-01-10T18:07:25",
   "compiler": {
     "name": "@stencil/core",
     "version": "3.4.2",
@@ -1142,6 +1142,21 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "hints",
+          "type": "string[]",
+          "mutable": true,
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string[]"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "invalid",
           "type": "boolean",
@@ -3528,6 +3543,22 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "clickable",
+          "type": "boolean",
+          "mutable": true,
+          "attr": "clickable",
+          "reflectToAttr": true,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "density",
           "type": "\"comfortable\" | \"compact\" | \"normal\"",
@@ -3584,6 +3615,22 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "hideClickable",
+          "type": "boolean",
+          "mutable": true,
+          "attr": "hide-clickable",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "loading",
           "type": "boolean",
@@ -3672,6 +3719,15 @@
       ],
       "methods": [],
       "events": [
+        {
+          "event": "click",
+          "detail": "{ row: Q2DataTableSerializedRow; }",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "",
+          "docsTags": []
+        },
         {
           "event": "select",
           "detail": "{ row: Q2DataTableSerializedRow; rows: Q2DataTableSerializedRow[]; allSelected: boolean; }",
@@ -3700,7 +3756,13 @@
           "docsTags": []
         }
       ],
-      "listeners": [],
+      "listeners": [
+        {
+          "event": "click",
+          "capture": false,
+          "passive": false
+        }
+      ],
       "styles": [],
       "slots": [],
       "parts": [],
@@ -6466,28 +6528,6 @@
           "optional": false,
           "required": false
         },
-        {
-          "name": "role",
-          "type": "string",
-          "mutable": false,
-          "attr": "role",
-          "reflectToAttr": true,
-          "docs": "The role of the option list.",
-          "docsTags": [
-            {
-              "name": "type",
-              "text": "{('listbox' | 'menu')}"
-            }
-          ],
-          "default": "'listbox'",
-          "values": [
-            {
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false
-        },
         {
           "name": "selectedOptions",
           "type": "IOptionValue[]",
@@ -6526,8 +6566,14 @@
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
-          "docs": "",
-          "docsTags": [],
+          "docs": "Translates to the role of the option list",
+          "docsTags": [
+            {
+              "name": "type",
+              "text": "{('menu' | 'listbox')}"
+            }
+          ],
+          "default": "'listbox'",
           "values": [
             {
               "value": "listbox",

package/dist/esm/{action-sheet-a9597b32.js → action-sheet-bfcbe154.js} RENAMED Viewed

@@ -6,7 +6,7 @@ const shouldShowActionSheet = (component, event) => {
   const canShowActionSheet = !!((_a = window.TectonElements) === null || _a === void 0 ? void 0 : _a.showActionSheet);
   if (!canShowActionSheet)
     return false;
-  const keysThatTriggerOpen = ['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp', 'Home', 'End'];
+  const keysThatTriggerOpen = ['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp', 'Home', 'End', 'Enter', ' '];
   if (event) {
     const eventIsKeyboardEvent = event instanceof KeyboardEvent;
     const eventIsMouseEvent = event instanceof MouseEvent;
@@ -80,4 +80,4 @@ const showActionSheetList = async (component, event) => {
 export { showActionSheetList as a, shouldShowActionSheet as s };
-//# sourceMappingURL=action-sheet-a9597b32.js.map
+//# sourceMappingURL=action-sheet-bfcbe154.js.map

package/dist/esm/action-sheet-bfcbe154.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"action-sheet-bfcbe154.js","mappings":"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","names":[],"sources":["./src/utils/action-sheet.ts"],"sourcesContent":["import {\n ActionSheetSelectedOption,\n ActionSheetListCloseData,\n ActionSheetListData,\n ActionSheetListOption,\n ActionSheetListOptgroup,\n} from 'q2-tecton-common/lib/utility/action-sheet';\n\ninterface IActionSheetComponent {\n hoist: boolean;\n}\nexport const shouldShowActionSheet = (component: IActionSheetComponent, event?: KeyboardEvent | MouseEvent) => {\n const isDialogSupported = 'open' in document.createElement('dialog');\n if (!isDialogSupported) return false;\n\n const canShowActionSheet = !!window.TectonElements?.showActionSheet;\n if (!canShowActionSheet) return false;\n\n const keysThatTriggerOpen = ['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp', 'Home', 'End', 'Enter', ' '];\n if (event) {\n const eventIsKeyboardEvent = event instanceof KeyboardEvent;\n const eventIsMouseEvent = event instanceof MouseEvent;\n const keyboardEventShouldTriggerOpen = eventIsKeyboardEvent && keysThatTriggerOpen.includes(event.key);\n const mouseEventShouldTriggerOpen = eventIsMouseEvent && event.type === 'click';\n const eventShouldTriggerOpen = mouseEventShouldTriggerOpen || keyboardEventShouldTriggerOpen;\n if (!eventShouldTriggerOpen) return false;\n }\n\n if (component.hoist) return true;\n return false;\n};\n\nconst parseOptions = (options: (HTMLQ2OptgroupElement | HTMLQ2OptionElement)[]): any[] => {\n const defaultOption = {\n disabled: false,\n display: '',\n hidden: false,\n multiline: false,\n value: '',\n innerHTML: '',\n };\n const optionPropsToGet = Object.keys(defaultOption);\n const defaultOptgroup = {\n disabled: false,\n label: '',\n options: [],\n };\n const optgroupPropsToGet = Object.keys(defaultOptgroup);\n return options.map(option => {\n if (option.tagName === 'Q2-OPTGROUP') {\n const optgroup = option as HTMLQ2OptgroupElement;\n return optgroupPropsToGet.reduce<ActionSheetListOptgroup>(\n (acc, prop) => {\n if (prop === 'options') {\n const options = Array.from(option.children).filter(\n child => child.tagName === 'Q2-OPTION' || child.tagName === 'Q2-OPTGROUP'\n ) as HTMLQ2OptgroupElement[];\n\n acc[prop] = parseOptions(options);\n } else {\n acc[prop] = optgroup[prop];\n }\n return acc;\n },\n { ...defaultOptgroup }\n );\n } else if (option.tagName === 'Q2-OPTION') {\n return optionPropsToGet.reduce<ActionSheetListOption>(\n (acc, prop) => {\n acc[prop] = option[prop];\n return acc;\n },\n { ...defaultOption }\n );\n }\n });\n};\n\nexport const buildListData = async (\n component: IActionSheetListComponent,\n event?: MouseEvent | KeyboardEvent\n): Promise<ActionSheetListData> => {\n return {\n appearance: 'list',\n title: component.label || '',\n description: '',\n event,\n listProps: {\n multiple: !!component.optionList.multiple,\n selectedOptions: (component.optionList.selectedOptions as ActionSheetSelectedOption[]) || [],\n noSelect: !!component.optionList.noSelect,\n },\n options: parseOptions(await component.optionList.getContents()),\n };\n};\n\ninterface IActionSheetListComponent {\n optionList: HTMLQ2OptionListElement;\n label: string;\n}\nexport const showActionSheetList = async (\n component: IActionSheetListComponent,\n event?: MouseEvent | KeyboardEvent\n): Promise<ActionSheetListCloseData> => {\n const listData = await buildListData(component, event);\n return window.TectonElements?.showActionSheet(listData);\n};\n"],"version":3}

package/dist/esm/click-elsewhere_2.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, g as getElement, h } from './index-ebc7f269.js';
-import { r as resizeIframe, w as waitForNextPaint } from './index-a8589748.js';
+import { r as resizeIframe, w as waitForNextPaint } from './index-35ff2881.js';
 const ClickElsewhere = class {
   constructor(hostRef) {

package/dist/esm/{index-a8589748.js → index-35ff2881.js} RENAMED Viewed

@@ -535,6 +535,13 @@ function handleAriaLabel(target) {
   const { ariaLabel } = target;
   if (!ariaLabel)
     return;
+  // If empty ariaLabel prop is set to primitive symbol by framework wrapper, set ariaLabel to undefined and return
+  const FW_WRAPPERS_EMPTY_PROP = Symbol().toString();
+  if (ariaLabel === FW_WRAPPERS_EMPTY_PROP) {
+    target.ariaLabel = undefined;
+    return;
+  }
+  // If ariaLabel is set, set hideLabel to true and set label to ariaLabel
   if ('hideLabel' in target)
     target.hideLabel = true;
   target.label = loc(ariaLabel);
@@ -562,7 +569,12 @@ function handleDeprecationWarning(target, deprecatedItemName, deprecatedItemType
     const componentName = target.constructor.name.toLowerCase().slice(2);
     switch (deprecatedItemType) {
       case 'prop':
-        console.warn(`The property ${deprecatedItemName} in q2-${componentName} has been marked for deprecation and will be removed in an upcoming major release.`);
+        if (deprecatedItemName === 'size' && componentName === 'btn') {
+          console.warn(`The property of size in q2-btn should not be typeof number, or typeof string containing a number. This functionality will be deprecated in an upcoming relase. Instead please use typeof string with any of the following values: "small" / "medium" / "large" / "none" `);
+        }
+        else {
+          console.warn(`The property ${deprecatedItemName} in q2-${componentName} has been marked for deprecation and will be removed in an upcoming major release.`);
+        }
         break;
       case 'function':
         console.warn(`The function ${deprecatedItemName} in ${componentName} has been marked for deprecation and will be removed in an upcoming major release.`);
@@ -613,6 +625,6 @@ const handleColor = (target) => {
   }
 };
-export { handleRenamedProp as a, isTouchDevice as b, createGuid as c, isRelatedTargetWithinHost as d, isHostLosingFocus as e, addSmoothScrollPolyfill as f, labelDOM as g, handleAriaLabel as h, isEventFromElement as i, isFirefox as j, isMobile as k, loc as l, messagesDOM as m, nextPaint as n, overrideFocus as o, handleColor as p, resizeIframe as r, setMessageHeight as s, waitForNextPaint as w };
+export { handleRenamedProp as a, isTouchDevice as b, createGuid as c, isRelatedTargetWithinHost as d, isHostLosingFocus as e, addSmoothScrollPolyfill as f, labelDOM as g, handleAriaLabel as h, isEventFromElement as i, isFirefox as j, isMobile as k, loc as l, messagesDOM as m, nextPaint as n, overrideFocus as o, handleDeprecationWarning as p, handleColor as q, resizeIframe as r, setMessageHeight as s, waitForNextPaint as w };
-//# sourceMappingURL=index-a8589748.js.map
+//# sourceMappingURL=index-35ff2881.js.map

package/dist/esm/index-35ff2881.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"index-35ff2881.js","mappings":"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","names":["smoothScroll"],"sources":["../../node_modules/smoothscroll-polyfill/dist/smoothscroll.js","./src/utils/index.tsx"],"sourcesContent":["/* smoothscroll v0.4.4 - 2019 - Dustan Kasten, Jeremias Menichelli - MIT License */\n(function () {\n 'use strict';\n\n // polyfill\n function polyfill() {\n // aliases\n var w = window;\n var d = document;\n\n // return if scroll behavior is supported and polyfill is not forced\n if (\n 'scrollBehavior' in d.documentElement.style &&\n w.__forceSmoothScrollPolyfill__ !== true\n ) {\n return;\n }\n\n // globals\n var Element = w.HTMLElement || w.Element;\n var SCROLL_TIME = 468;\n\n // object gathering original scroll methods\n var original = {\n scroll: w.scroll || w.scrollTo,\n scrollBy: w.scrollBy,\n elementScroll: Element.prototype.scroll || scrollElement,\n scrollIntoView: Element.prototype.scrollIntoView\n };\n\n // define timing method\n var now =\n w.performance && w.performance.now\n ? w.performance.now.bind(w.performance)\n : Date.now;\n\n /**\n * indicates if a the current browser is made by Microsoft\n * @method isMicrosoftBrowser\n * @param {String} userAgent\n * @returns {Boolean}\n */\n function isMicrosoftBrowser(userAgent) {\n var userAgentPatterns = ['MSIE ', 'Trident/', 'Edge/'];\n\n return new RegExp(userAgentPatterns.join('|')).test(userAgent);\n }\n\n /*\n * IE has rounding bug rounding down clientHeight and clientWidth and\n * rounding up scrollHeight and scrollWidth causing false positives\n * on hasScrollableSpace\n */\n var ROUNDING_TOLERANCE = isMicrosoftBrowser(w.navigator.userAgent) ? 1 : 0;\n\n /**\n * changes scroll position inside an element\n * @method scrollElement\n * @param {Number} x\n * @param {Number} y\n * @returns {undefined}\n */\n function scrollElement(x, y) {\n this.scrollLeft = x;\n this.scrollTop = y;\n }\n\n /**\n * returns result of applying ease math function to a number\n * @method ease\n * @param {Number} k\n * @returns {Number}\n */\n function ease(k) {\n return 0.5 * (1 - Math.cos(Math.PI * k));\n }\n\n /**\n * indicates if a smooth behavior should be applied\n * @method shouldBailOut\n * @param {Number|Object} firstArg\n * @returns {Boolean}\n */\n function shouldBailOut(firstArg) {\n if (\n firstArg === null ||\n typeof firstArg !== 'object' ||\n firstArg.behavior === undefined ||\n firstArg.behavior === 'auto' ||\n firstArg.behavior === 'instant'\n ) {\n // first argument is not an object/null\n // or behavior is auto, instant or undefined\n return true;\n }\n\n if (typeof firstArg === 'object' && firstArg.behavior === 'smooth') {\n // first argument is an object and behavior is smooth\n return false;\n }\n\n // throw error when behavior is not supported\n throw new TypeError(\n 'behavior member of ScrollOptions ' +\n firstArg.behavior +\n ' is not a valid value for enumeration ScrollBehavior.'\n );\n }\n\n /**\n * indicates if an element has scrollable space in the provided axis\n * @method hasScrollableSpace\n * @param {Node} el\n * @param {String} axis\n * @returns {Boolean}\n */\n function hasScrollableSpace(el, axis) {\n if (axis === 'Y') {\n return el.clientHeight + ROUNDING_TOLERANCE < el.scrollHeight;\n }\n\n if (axis === 'X') {\n return el.clientWidth + ROUNDING_TOLERANCE < el.scrollWidth;\n }\n }\n\n /**\n * indicates if an element has a scrollable overflow property in the axis\n * @method canOverflow\n * @param {Node} el\n * @param {String} axis\n * @returns {Boolean}\n */\n function canOverflow(el, axis) {\n var overflowValue = w.getComputedStyle(el, null)['overflow' + axis];\n\n return overflowValue === 'auto' || overflowValue === 'scroll';\n }\n\n /**\n * indicates if an element can be scrolled in either axis\n * @method isScrollable\n * @param {Node} el\n * @param {String} axis\n * @returns {Boolean}\n */\n function isScrollable(el) {\n var isScrollableY = hasScrollableSpace(el, 'Y') && canOverflow(el, 'Y');\n var isScrollableX = hasScrollableSpace(el, 'X') && canOverflow(el, 'X');\n\n return isScrollableY || isScrollableX;\n }\n\n /**\n * finds scrollable parent of an element\n * @method findScrollableParent\n * @param {Node} el\n * @returns {Node} el\n */\n function findScrollableParent(el) {\n while (el !== d.body && isScrollable(el) === false) {\n el = el.parentNode || el.host;\n }\n\n return el;\n }\n\n /**\n * self invoked function that, given a context, steps through scrolling\n * @method step\n * @param {Object} context\n * @returns {undefined}\n */\n function step(context) {\n var time = now();\n var value;\n var currentX;\n var currentY;\n var elapsed = (time - context.startTime) / SCROLL_TIME;\n\n // avoid elapsed times higher than one\n elapsed = elapsed > 1 ? 1 : elapsed;\n\n // apply easing to elapsed time\n value = ease(elapsed);\n\n currentX = context.startX + (context.x - context.startX) * value;\n currentY = context.startY + (context.y - context.startY) * value;\n\n context.method.call(context.scrollable, currentX, currentY);\n\n // scroll more if we have not reached our destination\n if (currentX !== context.x || currentY !== context.y) {\n w.requestAnimationFrame(step.bind(w, context));\n }\n }\n\n /**\n * scrolls window or element with a smooth behavior\n * @method smoothScroll\n * @param {Object|Node} el\n * @param {Number} x\n * @param {Number} y\n * @returns {undefined}\n */\n function smoothScroll(el, x, y) {\n var scrollable;\n var startX;\n var startY;\n var method;\n var startTime = now();\n\n // define scroll context\n if (el === d.body) {\n scrollable = w;\n startX = w.scrollX || w.pageXOffset;\n startY = w.scrollY || w.pageYOffset;\n method = original.scroll;\n } else {\n scrollable = el;\n startX = el.scrollLeft;\n startY = el.scrollTop;\n method = scrollElement;\n }\n\n // scroll looping over a frame\n step({\n scrollable: scrollable,\n method: method,\n startTime: startTime,\n startX: startX,\n startY: startY,\n x: x,\n y: y\n });\n }\n\n // ORIGINAL METHODS OVERRIDES\n // w.scroll and w.scrollTo\n w.scroll = w.scrollTo = function() {\n // avoid action when no arguments are passed\n if (arguments[0] === undefined) {\n return;\n }\n\n // avoid smooth behavior if not required\n if (shouldBailOut(arguments[0]) === true) {\n original.scroll.call(\n w,\n arguments[0].left !== undefined\n ? arguments[0].left\n : typeof arguments[0] !== 'object'\n ? arguments[0]\n : w.scrollX || w.pageXOffset,\n // use top prop, second argument if present or fallback to scrollY\n arguments[0].top !== undefined\n ? arguments[0].top\n : arguments[1] !== undefined\n ? arguments[1]\n : w.scrollY || w.pageYOffset\n );\n\n return;\n }\n\n // LET THE SMOOTHNESS BEGIN!\n smoothScroll.call(\n w,\n d.body,\n arguments[0].left !== undefined\n ? ~~arguments[0].left\n : w.scrollX || w.pageXOffset,\n arguments[0].top !== undefined\n ? ~~arguments[0].top\n : w.scrollY || w.pageYOffset\n );\n };\n\n // w.scrollBy\n w.scrollBy = function() {\n // avoid action when no arguments are passed\n if (arguments[0] === undefined) {\n return;\n }\n\n // avoid smooth behavior if not required\n if (shouldBailOut(arguments[0])) {\n original.scrollBy.call(\n w,\n arguments[0].left !== undefined\n ? arguments[0].left\n : typeof arguments[0] !== 'object' ? arguments[0] : 0,\n arguments[0].top !== undefined\n ? arguments[0].top\n : arguments[1] !== undefined ? arguments[1] : 0\n );\n\n return;\n }\n\n // LET THE SMOOTHNESS BEGIN!\n smoothScroll.call(\n w,\n d.body,\n ~~arguments[0].left + (w.scrollX || w.pageXOffset),\n ~~arguments[0].top + (w.scrollY || w.pageYOffset)\n );\n };\n\n // Element.prototype.scroll and Element.prototype.scrollTo\n Element.prototype.scroll = Element.prototype.scrollTo = function() {\n // avoid action when no arguments are passed\n if (arguments[0] === undefined) {\n return;\n }\n\n // avoid smooth behavior if not required\n if (shouldBailOut(arguments[0]) === true) {\n // if one number is passed, throw error to match Firefox implementation\n if (typeof arguments[0] === 'number' && arguments[1] === undefined) {\n throw new SyntaxError('Value could not be converted');\n }\n\n original.elementScroll.call(\n this,\n // use left prop, first number argument or fallback to scrollLeft\n arguments[0].left !== undefined\n ? ~~arguments[0].left\n : typeof arguments[0] !== 'object' ? ~~arguments[0] : this.scrollLeft,\n // use top prop, second argument or fallback to scrollTop\n arguments[0].top !== undefined\n ? ~~arguments[0].top\n : arguments[1] !== undefined ? ~~arguments[1] : this.scrollTop\n );\n\n return;\n }\n\n var left = arguments[0].left;\n var top = arguments[0].top;\n\n // LET THE SMOOTHNESS BEGIN!\n smoothScroll.call(\n this,\n this,\n typeof left === 'undefined' ? this.scrollLeft : ~~left,\n typeof top === 'undefined' ? this.scrollTop : ~~top\n );\n };\n\n // Element.prototype.scrollBy\n Element.prototype.scrollBy = function() {\n // avoid action when no arguments are passed\n if (arguments[0] === undefined) {\n return;\n }\n\n // avoid smooth behavior if not required\n if (shouldBailOut(arguments[0]) === true) {\n original.elementScroll.call(\n this,\n arguments[0].left !== undefined\n ? ~~arguments[0].left + this.scrollLeft\n : ~~arguments[0] + this.scrollLeft,\n arguments[0].top !== undefined\n ? ~~arguments[0].top + this.scrollTop\n : ~~arguments[1] + this.scrollTop\n );\n\n return;\n }\n\n this.scroll({\n left: ~~arguments[0].left + this.scrollLeft,\n top: ~~arguments[0].top + this.scrollTop,\n behavior: arguments[0].behavior\n });\n };\n\n // Element.prototype.scrollIntoView\n Element.prototype.scrollIntoView = function() {\n // avoid smooth behavior if not required\n if (shouldBailOut(arguments[0]) === true) {\n original.scrollIntoView.call(\n this,\n arguments[0] === undefined ? true : arguments[0]\n );\n\n return;\n }\n\n // LET THE SMOOTHNESS BEGIN!\n var scrollableParent = findScrollableParent(this);\n var parentRects = scrollableParent.getBoundingClientRect();\n var clientRects = this.getBoundingClientRect();\n\n if (scrollableParent !== d.body) {\n // reveal element inside parent\n smoothScroll.call(\n this,\n scrollableParent,\n scrollableParent.scrollLeft + clientRects.left - parentRects.left,\n scrollableParent.scrollTop + clientRects.top - parentRects.top\n );\n\n // reveal parent in viewport unless is fixed\n if (w.getComputedStyle(scrollableParent).position !== 'fixed') {\n w.scrollBy({\n left: parentRects.left,\n top: parentRects.top,\n behavior: 'smooth'\n });\n }\n } else {\n // reveal element in viewport\n w.scrollBy({\n left: clientRects.left,\n top: clientRects.top,\n behavior: 'smooth'\n });\n }\n };\n }\n\n if (typeof exports === 'object' && typeof module !== 'undefined') {\n // commonjs\n module.exports = { polyfill: polyfill };\n } else {\n // global\n polyfill();\n }\n\n}());\n","import { h } from '@stencil/core';\nimport { Q2Btn } from 'src/components/q2-btn';\nimport { Q2Calendar } from 'src/components/q2-calendar';\nimport { Q2Carousel } from 'src/components/q2-carousel';\nimport { Q2Checkbox } from 'src/components/q2-checkbox';\nimport { Q2Dropdown } from 'src/components/q2-dropdown';\nimport { Q2DropdownItem } from 'src/components/q2-dropdown-item';\nimport { Q2EditableField } from 'src/components/q2-editable-field';\nimport { Q2Input } from 'src/components/q2-input';\nimport { Q2Loading } from 'src/components/q2-loading';\nimport { Q2Radio } from 'src/components/q2-radio';\nimport { Q2Select } from 'src/components/q2-select';\nimport { FormFieldTypes, IDict } from 'src/util';\nimport smoothScroll from 'smoothscroll-polyfill';\n\nexport function isMobile(): boolean {\n return /Android|webOS|iPhone|iPad|iPod|BlackBerry|Mobile|IEMobile|Windows Phone|Opera Mini/i.test(\n navigator.userAgent\n );\n}\n\nexport function isHostLosingFocus(event: FocusEvent, hostElement: HTMLElement) {\n const type = event.type;\n const focusInTypes = ['focusin', 'focus'];\n const isFocusIn = focusInTypes.includes(type);\n\n // on focusin: `target` is element losing focus, `relatedTarget` is element gaining focus\n // on focusout: `target` is element gaining focus, `relatedTarget` is element losing focus\n const elementGainingFocus = isFocusIn ? event.target : event.relatedTarget;\n\n const isElementNestedInHostElement = (element: HTMLElement) => {\n if (element === hostElement) return true;\n if (element.parentElement) {\n return isElementNestedInHostElement(element.parentElement);\n }\n return false;\n };\n\n if (!(elementGainingFocus instanceof HTMLElement)) return true;\n return !isElementNestedInHostElement(elementGainingFocus);\n}\n\nexport function isRelatedTargetWithinHost(event: FocusEvent, element: HTMLElement) {\n return event.relatedTarget !== element && !element.contains(event.relatedTarget as Node);\n}\n\nexport function isEventFromElement(event: Event, element: HTMLElement): boolean {\n return event.composedPath?.()[0] === element;\n}\n\nexport function overrideFocus(hostElement: HTMLElement) {\n hostElement.focus = () => hostElement?.dispatchEvent(new FocusEvent('focus', { bubbles: false }));\n}\n\nexport function addSmoothScrollPolyfill() {\n if (!isSafari()) return false;\n smoothScroll.polyfill();\n return (window.__forceSmoothScrollPolyfill__ = true);\n}\n\nexport function isFirefox() {\n const userAgent = navigator.userAgent.toLowerCase();\n return userAgent.includes('firefox');\n}\n\nexport function isTouchDevice() {\n return 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n}\n\nexport function isSafari() {\n const userAgent = navigator.userAgent.toLowerCase();\n return userAgent.includes('safari') && !userAgent.includes('chrome');\n}\n\nlet guid: number = 1000;\nexport function createGuid(): number {\n return guid++;\n}\n\nexport function nextPaint(fn: (value?: unknown) => void) {\n requestAnimationFrame(() => {\n requestAnimationFrame(fn);\n });\n}\n\nexport function waitForNextPaint() {\n return new Promise(resolve => nextPaint(resolve));\n}\n\nexport function capitalize(value: string) {\n return `${value.charAt(0).toUpperCase()}${value.slice(1)}`;\n}\n\nexport function pick(props: string[]): (obj: object) => object {\n return obj => {\n return props.reduce((memo, prop) => {\n return {\n ...memo,\n [prop]: obj[prop],\n };\n }, {});\n };\n}\n\nexport function loc(key: string, subs?: IDict<any> | string[]) {\n if (!key) return '';\n if (window.Tecton?.noStrings === true) {\n return key;\n }\n return window?.TectonElements?.loc(key, subs) ?? key;\n}\n\nexport function labelDOM(target: FormFieldTypes) {\n const { label, hideLabel } = target;\n if (!label || hideLabel) return;\n let helpText = '';\n if (target.optional) {\n helpText = <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span>;\n }\n if (target.readonly) {\n helpText = <span class=\"optional-tag\">{loc('tecton.element.input.readonly')}</span>;\n }\n return (\n <label\n htmlFor={target.inputId}\n class={target.readonly ? 'readonly-field' : ''}\n >\n {loc(target.label)}\n {helpText}\n </label>\n );\n}\n\nexport function handleAriaLabel(\n target:\n | Q2Input\n | Q2Select\n | Q2Radio\n | Q2Checkbox\n | Q2EditableField\n | Q2Dropdown\n | Q2DropdownItem\n | Q2Loading\n | Q2Carousel\n | Q2Calendar\n | Q2Btn\n) {\n const { ariaLabel } = target;\n if (!ariaLabel) return;\n\n // If empty ariaLabel prop is set to primitive symbol by framework wrapper, set ariaLabel to undefined and return\n const FW_WRAPPERS_EMPTY_PROP = Symbol().toString();\n if (ariaLabel === FW_WRAPPERS_EMPTY_PROP) {\n target.ariaLabel = undefined;\n return;\n }\n\n // If ariaLabel is set, set hideLabel to true and set label to ariaLabel\n if ('hideLabel' in target) target.hideLabel = true;\n target.label = loc(ariaLabel);\n target.ariaLabel = undefined;\n}\n\n/**\n * Handles when a prop has been renamed on a component without introducing a breaking change.\n */\nexport function handleRenamedProp(target: object, oldProp: string, newProp: string, removeOldProp?: boolean) {\n if (typeof target[oldProp] === 'undefined') return;\n\n // If old prop has value, aka set in component, call handleDeprecationWarning()\n if (target[oldProp]) {\n handleDeprecationWarning(target, oldProp, 'prop');\n }\n\n target[newProp] = target[oldProp];\n\n if (removeOldProp) {\n delete target[oldProp];\n }\n}\n\nexport function handleDeprecationWarning(\n target: object,\n deprecatedItemName: string,\n deprecatedItemType: 'function' | 'prop' | 'method' | 'event'\n) {\n if (window.location.hostname === 'localhost' || window.location.host === 'stack.q2developer.com') {\n if (target[deprecatedItemName] === 'undefined') return;\n\n const componentName = target.constructor.name.toLowerCase().slice(2);\n\n switch (deprecatedItemType) {\n case 'prop':\n if (deprecatedItemName === 'size' && componentName === 'btn') {\n console.warn(\n `The property of size in q2-btn should not be typeof number, or typeof string containing a number. This functionality will be deprecated in an upcoming relase. Instead please use typeof string with any of the following values: \"small\" / \"medium\" / \"large\" / \"none\" `\n );\n } else {\n console.warn(\n `The property ${deprecatedItemName} in q2-${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n );\n }\n break;\n\n case 'function':\n console.warn(\n `The function ${deprecatedItemName} in ${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n );\n break;\n\n case 'method':\n console.warn(\n `The method ${deprecatedItemName} in ${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n );\n break;\n\n case 'event':\n console.warn(\n `The event ${deprecatedItemName} in ${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n );\n break;\n\n default:\n console.error(\n `handleDeprecationWarning --> No type found for desired deprecation: ${deprecatedItemName} in q2-${componentName}: deprecatedItemType = ${deprecatedItemName}`\n );\n }\n }\n}\n\nexport function messagesDOM(target: FormFieldTypes) {\n const type = target.hasError ? 'danger' : 'info';\n\n return (\n <div class=\"messages-container\">\n <q2-message\n appearance=\"minimal\"\n description\n type={type}\n test-id=\"message\"\n >\n <ul id={target.inputDescribedBy}>\n {target.messages.map(message => (\n <li test-id=\"messageListItem\">{loc(message)}</li>\n ))}\n </ul>\n </q2-message>\n </div>\n );\n}\n\nexport function setMessageHeight(target: FormFieldTypes) {\n const messageContainer = (target.hostElement.shadowRoot as ShadowRoot).querySelector<HTMLDivElement>(\n '.messages-container'\n );\n const q2Message = messageContainer.querySelector('q2-message');\n nextPaint(() => {\n const height = target.showMessages && target.hasFocus ? q2Message.getBoundingClientRect().height : 0;\n\n if (messageContainer.style.getPropertyValue('height') === `${height}px`) return;\n\n if (height === 0) {\n q2Message.classList.add('invisible');\n messageContainer.style.removeProperty('height');\n } else {\n q2Message.classList.remove('invisible');\n messageContainer.style.setProperty('height', `${height}px`);\n }\n });\n}\n\nexport const resizeIframe = () => {\n return window.TectonElements?.resizeIframe?.();\n};\n\n// Handling color attribute (deprecated)\nexport const handleColor = (target: Q2Btn) => {\n if (!target.intent && ['primary', 'secondary'].includes(target.color)) {\n target.intent = `workflow-${target.color}` as HTMLQ2BtnElement['intent'];\n target.color = undefined;\n }\n};\n"],"version":3}