q2-tecton-elements 1.66.1 → 1.67.0

package/dist/q2-tecton-elements/q2-tooltip.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-tooltip.entry.esm.js","sources":["src/components/q2-tooltip/q2-tooltip.scss?tag=q2-tooltip&encapsulation=shadow","src/components/q2-tooltip/q2-tooltip.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(\n            --tct-tooltip-background,\n            var-prefixer(tooltip-background-color),\n            --t-top-a3,\n            #0d0d0dd9\n        )};\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        :host([immediate]:not([immediate='false'])) & {\n            --comp-delay: 0s;\n        }\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        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, 4px);\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        transition-property: visibility, opacity;\n    }\n\n    :host([block]) & {\n        display: block;\n    }\n\n    :host([persist-on-hover]:not([persist-on-hover='false'])) & {\n        &:before,\n        &:after {\n            pointer-events: auto;\n        }\n    }\n\n    // When to show the tooltip\n    &:not(.dismissed):hover,\n    &:not(.dismissed).has-keyboard-focus:focus-within,\n    :host([persistent]:not([persistent='false'])) &:not(.dismissed) {\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            margin-right: var(--comp-body-offset);\n            transform: #{translateX(#{var-list(--comp-offset-translate, 0)})};\n        }\n    }\n\n    :host([position='sw']) &,\n    :host([position='nw']) & {\n        &:after {\n            margin-right: var(--comp-body-offset);\n            margin-left: var(--comp-body-offset);\n            right: 50%;\n            transform: #{translateX(#{var-list(--comp-offset-translate, 0)})};\n        }\n    }\n\n    // Centered\n    :host([position='s']) &,\n    :host([position='n']) & {\n        &:after {\n            transform: #{translateX(calc(50% + #{var-list(--comp-offset-translate, 0)}))};\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/**\n * @name Tooltip\n * @category Feedback\n * @summary Use for brief hints or explanations shown on hover or focus.\n */\n@Component({ tag: 'q2-tooltip', shadow: true, styleUrl: 'q2-tooltip.scss' })\nexport class Q2Tooltip implements ComponentInterface {\n    // #region Own Properties\n\n    animationEndCount = 0;\n    tooltipElement: HTMLDivElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    focusClass: 'has-keyboard-focus' | 'has-generic-focus' | 'has-generic-focus-out';\n\n    @State()\n    persistOnHoverDismissed: boolean;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Displays the element as a block, making it take up the full width of its container. */\n    @Prop({ reflect: true })\n    block: boolean;\n\n    /**\n     * Makes the component focusable, thereby putting it in the tab order of the keyboard.\n     * @warning\n     * This is only meant to be used when the `q2-tooltip` is wrapped around an element that is not focusable (e.g., icons, static text, badges, etc.).\n     */\n    @Prop({ reflect: true })\n    focusable: boolean = false;\n\n    /** Whether to show the tooltip immediately upon hover. */\n    @Prop({ reflect: true })\n    immediate: boolean;\n\n    /** text that is displayed when the tooltip is activated. */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** Enables the use of multi-line tooltips with a default `max-width` of `200px`. */\n    @Prop({ reflect: true })\n    multiline: boolean;\n\n    /** Displays the tooltip persistently. */\n    @Prop({ reflect: true })\n    persistent: boolean;\n\n    /**\n     * Allows the tooltip bubble itself to be hovered.\n     * When enabled, the tooltip remains visible while moving between the trigger and the tooltip bubble.\n     */\n    @Prop({ reflect: true })\n    persistOnHover: boolean;\n\n    /** The position of the tooltip based on [cardinal and intercardinal directions](https://en.wikipedia.org/wiki/Cardinal_direction). */\n    @Prop({ reflect: true })\n    position: 'n' | 's' | 'e' | 'w' | 'nw' | 'ne' | 'sw' | 'se' = 'n';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        if (this.persistent) this.adjustSide();\n    }\n\n    // #endregion\n    // #region Listeners\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    // Escape must be handled on `document` so it still dismisses when the tooltip is visible by hover only and focus is not inside the tooltip host.\n    @Listen('keydown', { target: 'document' })\n    keyDownDocumentHandler(event: KeyboardEvent) {\n        if (!['Esc', 'Escape'].includes(event.key)) return;\n        if (!this.shouldBeVisible) return;\n        if (this.persistOnHover) this.persistOnHoverDismissed = true;\n        this.hideTooltip();\n    }\n\n    @Listen('mouseenter')\n    mouseEnterHandler() {\n        this.persistOnHoverDismissed = false;\n    }\n\n    @Listen('mouseover')\n    @Listen('mouseclick')\n    handleMouseOver() {\n        this.adjustSide();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get shouldBeVisible() {\n        if (this.persistent) return true;\n        return this.hostElement.matches(':hover, :focus-within') && !this.persistOnHoverDismissed;\n    }\n\n    adjustSide() {\n        const { left: hostLeft, right: hostRight, width: hostWidth } = this.hostElement.getBoundingClientRect();\n        if (!hostLeft || !hostWidth) return;\n\n        const { width, paddingLeft, paddingRight } = window.getComputedStyle(this.tooltipElement, '::after');\n\n        const tooltipWidth =\n            Number(width.replace(/[px]/g, '')) +\n            Number(paddingLeft.replace(/[px]/g, '')) +\n            Number(paddingRight.replace(/[px]/g, ''));\n        const extraMargin = ['se', 'sw', 'ne', 'nw'].includes(this.position) ? 0 : 15;\n\n        const distanceLeft = hostLeft + hostWidth / 2;\n        const distanceRight = window.innerWidth - hostRight + +hostWidth / 2;\n\n        if (['ne', 'se'].includes(this.position)) {\n            if (tooltipWidth > distanceRight) {\n                this.tooltipElement.style.setProperty(\n                    '--comp-offset-translate',\n                    `-${Math.round(tooltipWidth - distanceRight + extraMargin)}px`\n                );\n            }\n        } else if (['nw', 'sw'].includes(this.position)) {\n            if (tooltipWidth > distanceLeft) {\n                this.tooltipElement.style.setProperty(\n                    '--comp-offset-translate',\n                    `${Math.round(tooltipWidth - distanceLeft + extraMargin)}px`\n                );\n            }\n        } else if (['n', 's'].includes(this.position)) {\n            if (tooltipWidth / 2 > distanceLeft) {\n                this.tooltipElement.style.setProperty(\n                    '--comp-offset-translate',\n                    `${Math.round(tooltipWidth / 2 - distanceLeft + extraMargin)}px`\n                );\n            } else if (tooltipWidth / 2 > distanceRight) {\n                this.tooltipElement.style.setProperty(\n                    '--comp-offset-translate',\n                    `-${Math.round(tooltipWidth / 2 - distanceRight + extraMargin)}px`\n                );\n            } else {\n                this.tooltipElement.style.setProperty('--comp-offset-translate', `0px`);\n            }\n        }\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    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    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    hideTooltip() {\n        if (this.focusClass === 'has-generic-focus') this.focusClass = 'has-generic-focus-out';\n        else this.focusClass = null;\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { focusClass } = this;\n        const classes = ['tooltip'];\n        if (focusClass) classes.push(focusClass);\n        if (this.persistOnHoverDismissed) classes.push('dismissed');\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    // #endregion\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"q2-tooltip.entry.esm.js","sources":["src/components/q2-tooltip/q2-tooltip.scss?tag=q2-tooltip&encapsulation=shadow","src/components/q2-tooltip/q2-tooltip.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(\n            --tct-tooltip-background,\n            var-prefixer(tooltip-background-color),\n            --t-top-a3,\n            #0d0d0dd9\n        )};\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        :host([immediate]:not([immediate='false'])) & {\n            --comp-delay: 0s;\n        }\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        word-wrap: break-word;\n        white-space: pre;\n        pointer-events: none;\n        content: attr(data-label);\n        background: var(--comp-background);\n        border-radius: var-list(var-prefixer(tooltip-border-radius), --app-border-radius-1, 4px);\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        transition-property: visibility, opacity;\n    }\n\n    :host([block]) & {\n        display: block;\n    }\n\n    :host([persist-on-hover]:not([persist-on-hover='false'])) & {\n        &:before,\n        &:after {\n            pointer-events: auto;\n        }\n    }\n\n    // When to show the tooltip\n    &:not(.dismissed):hover,\n    &:not(.dismissed).has-keyboard-focus:focus-within,\n    :host([persistent]:not([persistent='false'])) &:not(.dismissed) {\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            margin-right: var(--comp-body-offset);\n            transform: #{translateX(#{var-list(--comp-offset-translate, 0)})};\n        }\n    }\n\n    :host([position='sw']) &,\n    :host([position='nw']) & {\n        &:after {\n            margin-right: var(--comp-body-offset);\n            margin-left: var(--comp-body-offset);\n            right: 50%;\n            transform: #{translateX(#{var-list(--comp-offset-translate, 0)})};\n        }\n    }\n\n    // Centered\n    :host([position='s']) &,\n    :host([position='n']) & {\n        &:after {\n            transform: #{translateX(calc(50% + #{var-list(--comp-offset-translate, 0)}))};\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, Watch } from '@stencil/core';\nimport { isEventFromElement, overrideFocus } from 'src/utils';\n\n/**\n * @name Tooltip\n * @category Feedback\n * @summary Use for brief hints or explanations shown on hover or focus.\n */\n@Component({ tag: 'q2-tooltip', shadow: true, styleUrl: 'q2-tooltip.scss' })\nexport class Q2Tooltip implements ComponentInterface {\n    // #region Own Properties\n\n    animationEndCount = 0;\n    tooltipElement: HTMLDivElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    focusClass: 'has-keyboard-focus' | 'has-generic-focus' | 'has-generic-focus-out';\n\n    @State()\n    persistOnHoverDismissed: boolean;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Displays the element as a block, making it take up the full width of its container. */\n    @Prop({ reflect: true })\n    block: boolean;\n\n    /**\n     * Makes the component focusable, thereby putting it in the tab order of the keyboard.\n     * @warning\n     * This is only meant to be used when the `q2-tooltip` is wrapped around an element that is not focusable (e.g., icons, static text, badges, etc.).\n     */\n    @Prop({ reflect: true })\n    focusable: boolean = false;\n\n    /** Whether to show the tooltip immediately upon hover. */\n    @Prop({ reflect: true })\n    immediate: boolean;\n\n    /** text that is displayed when the tooltip is activated. */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** Enables the use of multi-line tooltips with a default `max-width` of `200px`. */\n    @Prop({ reflect: true })\n    multiline: boolean;\n\n    /** Displays the tooltip persistently. */\n    @Prop({ reflect: true })\n    persistent: boolean;\n\n    /**\n     * Allows the tooltip bubble itself to be hovered.\n     * When enabled, the tooltip remains visible while moving between the trigger and the tooltip bubble.\n     */\n    @Prop({ reflect: true })\n    persistOnHover: boolean;\n\n    /** The position of the tooltip based on [cardinal and intercardinal directions](https://en.wikipedia.org/wiki/Cardinal_direction). */\n    @Prop({ reflect: true })\n    position: 'n' | 's' | 'e' | 'w' | 'nw' | 'ne' | 'sw' | 'se' = 'n';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback(): void {\n        this.clearTooltipOnChildren();\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        this.propagateTooltip();\n        if (this.persistent) this.adjustSide();\n    }\n\n    // #endregion\n    // #region Listeners\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    // Escape must be handled on `document` so it still dismisses when the tooltip is visible by hover only and focus is not inside the tooltip host.\n    @Listen('keydown', { target: 'document' })\n    keyDownDocumentHandler(event: KeyboardEvent) {\n        if (!['Esc', 'Escape'].includes(event.key)) return;\n        if (!this.shouldBeVisible) return;\n        if (this.persistOnHover) this.persistOnHoverDismissed = true;\n        this.hideTooltip();\n    }\n\n    @Listen('mouseenter')\n    mouseEnterHandler() {\n        this.persistOnHoverDismissed = false;\n    }\n\n    @Listen('mouseover')\n    @Listen('mouseclick')\n    handleMouseOver() {\n        this.adjustSide();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('label')\n    labelChanged() {\n        this.propagateTooltip();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get shouldBeVisible() {\n        if (this.persistent) return true;\n        return this.hostElement.matches(':hover, :focus-within') && !this.persistOnHoverDismissed;\n    }\n\n    adjustSide() {\n        const { left: hostLeft, right: hostRight, width: hostWidth } = this.hostElement.getBoundingClientRect();\n        if (!hostLeft || !hostWidth) return;\n\n        const { width, paddingLeft, paddingRight } = window.getComputedStyle(this.tooltipElement, '::after');\n\n        const tooltipWidth =\n            Number(width.replace(/[px]/g, '')) +\n            Number(paddingLeft.replace(/[px]/g, '')) +\n            Number(paddingRight.replace(/[px]/g, ''));\n        const extraMargin = ['se', 'sw', 'ne', 'nw'].includes(this.position) ? 0 : 15;\n\n        const distanceLeft = hostLeft + hostWidth / 2;\n        const distanceRight = window.innerWidth - hostRight + +hostWidth / 2;\n\n        if (['ne', 'se'].includes(this.position)) {\n            if (tooltipWidth > distanceRight) {\n                this.tooltipElement.style.setProperty(\n                    '--comp-offset-translate',\n                    `-${Math.round(tooltipWidth - distanceRight + extraMargin)}px`\n                );\n            }\n        } else if (['nw', 'sw'].includes(this.position)) {\n            if (tooltipWidth > distanceLeft) {\n                this.tooltipElement.style.setProperty(\n                    '--comp-offset-translate',\n                    `${Math.round(tooltipWidth - distanceLeft + extraMargin)}px`\n                );\n            }\n        } else if (['n', 's'].includes(this.position)) {\n            if (tooltipWidth / 2 > distanceLeft) {\n                this.tooltipElement.style.setProperty(\n                    '--comp-offset-translate',\n                    `${Math.round(tooltipWidth / 2 - distanceLeft + extraMargin)}px`\n                );\n            } else if (tooltipWidth / 2 > distanceRight) {\n                this.tooltipElement.style.setProperty(\n                    '--comp-offset-translate',\n                    `-${Math.round(tooltipWidth / 2 - distanceRight + extraMargin)}px`\n                );\n            } else {\n                this.tooltipElement.style.setProperty('--comp-offset-translate', `0px`);\n            }\n        }\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    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    clearTooltipOnChildren() {\n        const children = Array.from(this.hostElement.children);\n        for (const child of children) {\n            if ('_tooltip' in child) {\n                (child as HTMLElement & { _tooltip: string })._tooltip = undefined;\n            }\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    hideTooltip() {\n        if (this.focusClass === 'has-generic-focus') this.focusClass = 'has-generic-focus-out';\n        else this.focusClass = null;\n    }\n\n    propagateTooltip() {\n        if (this.focusable) return;\n        const children = Array.from(this.hostElement.children);\n        for (const child of children) {\n            if ('_tooltip' in child) {\n                (child as HTMLElement & { _tooltip: string })._tooltip = this.label || undefined;\n            }\n        }\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { focusClass } = this;\n        const classes = ['tooltip'];\n        if (focusClass) classes.push(focusClass);\n        if (this.persistOnHoverDismissed) classes.push('dismissed');\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.focusable ? this.label : undefined}\n                data-label={this.label}\n                onAnimationEnd={() => this.animationEndHandler()}\n                role={this.focusable ? 'tooltip' : undefined}\n                test-id=\"tooltipContainer\"\n            >\n                <slot onSlotchange={() => this.propagateTooltip()} />\n            </div>\n        ) : (\n            <slot onSlotchange={() => this.propagateTooltip()} />\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":"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"}

package/dist/q2-tecton-elements/q2-tooltip.entry.js

@@ -1,8 +1,8 @@
 import { r as t, h as o, g as i } from "./index-CGkHOjh1.js";
 
-import { o as e, i as s } from "./index-B4WYBDS9.js";
+import { o as e, i as s } from "./index-C4PILj1_.js";
 
-const r = '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-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.8509803922)))));--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))}:host([immediate]:not([immediate=false])) .tooltip:hover{--comp-delay:0s}.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;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, 4px)))}.tooltip:before,.tooltip:after{display:inline-block;visibility:hidden;opacity:0;transition:all var(--comp-duration) ease-in-out var(--comp-delay);transition-property:visibility, opacity}:host([block]) .tooltip{display:block}:host([persist-on-hover]:not([persist-on-hover=false])) .tooltip:before,:host([persist-on-hover]:not([persist-on-hover=false])) .tooltip:after{pointer-events:auto}.tooltip:not(.dismissed):hover:before,.tooltip:not(.dismissed):hover:after,.tooltip:not(.dismissed).has-keyboard-focus:focus-within:before,.tooltip:not(.dismissed).has-keyboard-focus:focus-within:after,:host([persistent]:not([persistent=false])) .tooltip:not(.dismissed):before,:host([persistent]:not([persistent=false])) .tooltip:not(.dismissed):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);margin-right:var(--comp-body-offset);transform:translateX(var(--comp-offset-translate, 0))}:host([position=sw]) .tooltip:after,:host([position=nw]) .tooltip:after{margin-right:var(--comp-body-offset);margin-left:var(--comp-body-offset);right:50%;transform:translateX(var(--comp-offset-translate, 0))}:host([position=s]) .tooltip:after,:host([position=n]) .tooltip:after{transform:translateX(calc(50% + var(--comp-offset-translate, 0)))}: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 r = '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-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.8509803922)))));--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))}:host([immediate]:not([immediate=false])) .tooltip:hover{--comp-delay:0s}.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;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(data-label);background:var(--comp-background);border-radius:var(--tct-tooltip-border-radius, var(--t-tooltip-border-radius, var(--app-border-radius-1, 4px)))}.tooltip:before,.tooltip:after{display:inline-block;visibility:hidden;opacity:0;transition:all var(--comp-duration) ease-in-out var(--comp-delay);transition-property:visibility, opacity}:host([block]) .tooltip{display:block}:host([persist-on-hover]:not([persist-on-hover=false])) .tooltip:before,:host([persist-on-hover]:not([persist-on-hover=false])) .tooltip:after{pointer-events:auto}.tooltip:not(.dismissed):hover:before,.tooltip:not(.dismissed):hover:after,.tooltip:not(.dismissed).has-keyboard-focus:focus-within:before,.tooltip:not(.dismissed).has-keyboard-focus:focus-within:after,:host([persistent]:not([persistent=false])) .tooltip:not(.dismissed):before,:host([persistent]:not([persistent=false])) .tooltip:not(.dismissed):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);margin-right:var(--comp-body-offset);transform:translateX(var(--comp-offset-translate, 0))}:host([position=sw]) .tooltip:after,:host([position=nw]) .tooltip:after{margin-right:var(--comp-body-offset);margin-left:var(--comp-body-offset);right:50%;transform:translateX(var(--comp-offset-translate, 0))}:host([position=s]) .tooltip:after,:host([position=n]) .tooltip:after{transform:translateX(calc(50% + var(--comp-offset-translate, 0)))}: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 a = class {
   constructor(o) {
@@ -18,8 +18,12 @@ const a = class {
   }
   // #endregion
   // #region Component Lifecycle Events
+  disconnectedCallback() {
+    this.clearTooltipOnChildren();
+  }
   componentDidLoad() {
     e(this.hostElement);
+    this.propagateTooltip();
     if (this.persistent) this.adjustSide();
   }
   // #endregion
@@ -50,6 +54,11 @@ const a = class {
     this.adjustSide();
   }
   // #endregion
+  // #region Watchers
+  labelChanged() {
+    this.propagateTooltip();
+  }
+  // #endregion
   // #region Local Methods
   get shouldBeVisible() {
     if (this.persistent) return true;
@@ -98,6 +107,14 @@ const a = class {
     this.focusClass = t ? "has-keyboard-focus" : "has-generic-focus";
     if (t) return;
   }
+  clearTooltipOnChildren() {
+    const t = Array.from(this.hostElement.children);
+    for (const o of t) {
+      if ("_tooltip" in o) {
+        o._tooltip = undefined;
+      }
+    }
+  }
   findFocusVisibleElement(t) {
     if (!t) return;
     if (t.shadowRoot) t = this.findFocusVisibleElement(t.shadowRoot.activeElement);
@@ -106,6 +123,15 @@ const a = class {
   hideTooltip() {
     if (this.focusClass === "has-generic-focus") this.focusClass = "has-generic-focus-out"; else this.focusClass = null;
   }
+  propagateTooltip() {
+    if (this.focusable) return;
+    const t = Array.from(this.hostElement.children);
+    for (const o of t) {
+      if ("_tooltip" in o) {
+        o._tooltip = this.label || undefined;
+      }
+    }
+  }
   // #endregion
   // #region Render Methods
   render() {
@@ -117,15 +143,25 @@ const a = class {
       tabindex: this.focusable ? 0 : undefined,
       ref: t => this.tooltipElement = t,
       class: i.join(" "),
-      "aria-label": this.label,
+      "aria-label": this.focusable ? this.label : undefined,
+      "data-label": this.label,
       onAnimationEnd: () => this.animationEndHandler(),
-      role: "tooltip",
+      role: this.focusable ? "tooltip" : undefined,
       "test-id": "tooltipContainer"
-    }, o("slot", null)) : o("slot", null);
+    }, o("slot", {
+      onSlotchange: () => this.propagateTooltip()
+    })) : o("slot", {
+      onSlotchange: () => this.propagateTooltip()
+    });
   }
   get hostElement() {
     return i(this);
   }
+  static get watchers() {
+    return {
+      label: [ "labelChanged" ]
+    };
+  }
 };
 
 a.style = r;

package/dist/q2-tecton-elements/q2-tooltip.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2TooltipCss","Q2Tooltip","constructor","hostRef","this","animationEndCount","focusable","position","componentDidLoad","overrideFocus","hostElement","persistent","adjustSide","focusCaptureHandler","checkFocusClass","focusHandler","event","isEventFromElement","tooltipElement","focus","focusOutHandler","shouldBeVisible","focusClass","keyDownDocumentHandler","includes","key","persistOnHover","persistOnHoverDismissed","hideTooltip","mouseEnterHandler","handleMouseOver","matches","left","hostLeft","right","hostRight","width","hostWidth","getBoundingClientRect","paddingLeft","paddingRight","window","getComputedStyle","tooltipWidth","Number","replace","extraMargin","distanceLeft","distanceRight","innerWidth","style","setProperty","Math","round","animationEndHandler","isKeyboardFocus","findFocusVisibleElement","document","activeElement","element","shadowRoot","render","classes","push","label","h","tabindex","undefined","ref","el","class","join","onAnimationEnd","role"],"sources":["src/components/q2-tooltip/q2-tooltip.scss?tag=q2-tooltip&encapsulation=shadow","src/components/q2-tooltip/q2-tooltip.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(\n            --tct-tooltip-background,\n            var-prefixer(tooltip-background-color),\n            --t-top-a3,\n            #0d0d0dd9\n        )};\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        :host([immediate]:not([immediate='false'])) & {\n            --comp-delay: 0s;\n        }\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        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, 4px);\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        transition-property: visibility, opacity;\n    }\n\n    :host([block]) & {\n        display: block;\n    }\n\n    :host([persist-on-hover]:not([persist-on-hover='false'])) & {\n        &:before,\n        &:after {\n            pointer-events: auto;\n        }\n    }\n\n    // When to show the tooltip\n    &:not(.dismissed):hover,\n    &:not(.dismissed).has-keyboard-focus:focus-within,\n    :host([persistent]:not([persistent='false'])) &:not(.dismissed) {\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            margin-right: var(--comp-body-offset);\n            transform: #{translateX(#{var-list(--comp-offset-translate, 0)})};\n        }\n    }\n\n    :host([position='sw']) &,\n    :host([position='nw']) & {\n        &:after {\n            margin-right: var(--comp-body-offset);\n            margin-left: var(--comp-body-offset);\n            right: 50%;\n            transform: #{translateX(#{var-list(--comp-offset-translate, 0)})};\n        }\n    }\n\n    // Centered\n    :host([position='s']) &,\n    :host([position='n']) & {\n        &:after {\n            transform: #{translateX(calc(50% + #{var-list(--comp-offset-translate, 0)}))};\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/**\n * @name Tooltip\n * @category Feedback\n * @summary Use for brief hints or explanations shown on hover or focus.\n */\n@Component({ tag: 'q2-tooltip', shadow: true, styleUrl: 'q2-tooltip.scss' })\nexport class Q2Tooltip implements ComponentInterface {\n    // #region Own Properties\n\n    animationEndCount = 0;\n    tooltipElement: HTMLDivElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    focusClass: 'has-keyboard-focus' | 'has-generic-focus' | 'has-generic-focus-out';\n\n    @State()\n    persistOnHoverDismissed: boolean;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Displays the element as a block, making it take up the full width of its container. */\n    @Prop({ reflect: true })\n    block: boolean;\n\n    /**\n     * Makes the component focusable, thereby putting it in the tab order of the keyboard.\n     * @warning\n     * This is only meant to be used when the `q2-tooltip` is wrapped around an element that is not focusable (e.g., icons, static text, badges, etc.).\n     */\n    @Prop({ reflect: true })\n    focusable: boolean = false;\n\n    /** Whether to show the tooltip immediately upon hover. */\n    @Prop({ reflect: true })\n    immediate: boolean;\n\n    /** text that is displayed when the tooltip is activated. */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** Enables the use of multi-line tooltips with a default `max-width` of `200px`. */\n    @Prop({ reflect: true })\n    multiline: boolean;\n\n    /** Displays the tooltip persistently. */\n    @Prop({ reflect: true })\n    persistent: boolean;\n\n    /**\n     * Allows the tooltip bubble itself to be hovered.\n     * When enabled, the tooltip remains visible while moving between the trigger and the tooltip bubble.\n     */\n    @Prop({ reflect: true })\n    persistOnHover: boolean;\n\n    /** The position of the tooltip based on [cardinal and intercardinal directions](https://en.wikipedia.org/wiki/Cardinal_direction). */\n    @Prop({ reflect: true })\n    position: 'n' | 's' | 'e' | 'w' | 'nw' | 'ne' | 'sw' | 'se' = 'n';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        if (this.persistent) this.adjustSide();\n    }\n\n    // #endregion\n    // #region Listeners\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    // Escape must be handled on `document` so it still dismisses when the tooltip is visible by hover only and focus is not inside the tooltip host.\n    @Listen('keydown', { target: 'document' })\n    keyDownDocumentHandler(event: KeyboardEvent) {\n        if (!['Esc', 'Escape'].includes(event.key)) return;\n        if (!this.shouldBeVisible) return;\n        if (this.persistOnHover) this.persistOnHoverDismissed = true;\n        this.hideTooltip();\n    }\n\n    @Listen('mouseenter')\n    mouseEnterHandler() {\n        this.persistOnHoverDismissed = false;\n    }\n\n    @Listen('mouseover')\n    @Listen('mouseclick')\n    handleMouseOver() {\n        this.adjustSide();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get shouldBeVisible() {\n        if (this.persistent) return true;\n        return this.hostElement.matches(':hover, :focus-within') && !this.persistOnHoverDismissed;\n    }\n\n    adjustSide() {\n        const { left: hostLeft, right: hostRight, width: hostWidth } = this.hostElement.getBoundingClientRect();\n        if (!hostLeft || !hostWidth) return;\n\n        const { width, paddingLeft, paddingRight } = window.getComputedStyle(this.tooltipElement, '::after');\n\n        const tooltipWidth =\n            Number(width.replace(/[px]/g, '')) +\n            Number(paddingLeft.replace(/[px]/g, '')) +\n            Number(paddingRight.replace(/[px]/g, ''));\n        const extraMargin = ['se', 'sw', 'ne', 'nw'].includes(this.position) ? 0 : 15;\n\n        const distanceLeft = hostLeft + hostWidth / 2;\n        const distanceRight = window.innerWidth - hostRight + +hostWidth / 2;\n\n        if (['ne', 'se'].includes(this.position)) {\n            if (tooltipWidth > distanceRight) {\n                this.tooltipElement.style.setProperty(\n                    '--comp-offset-translate',\n                    `-${Math.round(tooltipWidth - distanceRight + extraMargin)}px`\n                );\n            }\n        } else if (['nw', 'sw'].includes(this.position)) {\n            if (tooltipWidth > distanceLeft) {\n                this.tooltipElement.style.setProperty(\n                    '--comp-offset-translate',\n                    `${Math.round(tooltipWidth - distanceLeft + extraMargin)}px`\n                );\n            }\n        } else if (['n', 's'].includes(this.position)) {\n            if (tooltipWidth / 2 > distanceLeft) {\n                this.tooltipElement.style.setProperty(\n                    '--comp-offset-translate',\n                    `${Math.round(tooltipWidth / 2 - distanceLeft + extraMargin)}px`\n                );\n            } else if (tooltipWidth / 2 > distanceRight) {\n                this.tooltipElement.style.setProperty(\n                    '--comp-offset-translate',\n                    `-${Math.round(tooltipWidth / 2 - distanceRight + extraMargin)}px`\n                );\n            } else {\n                this.tooltipElement.style.setProperty('--comp-offset-translate', `0px`);\n            }\n        }\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    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    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    hideTooltip() {\n        if (this.focusClass === 'has-generic-focus') this.focusClass = 'has-generic-focus-out';\n        else this.focusClass = null;\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { focusClass } = this;\n        const classes = ['tooltip'];\n        if (focusClass) classes.push(focusClass);\n        if (this.persistOnHoverDismissed) classes.push('dismissed');\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    // #endregion\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["q2TooltipCss","Q2Tooltip","constructor","hostRef","this","animationEndCount","focusable","position","disconnectedCallback","clearTooltipOnChildren","componentDidLoad","overrideFocus","hostElement","propagateTooltip","persistent","adjustSide","focusCaptureHandler","checkFocusClass","focusHandler","event","isEventFromElement","tooltipElement","focus","focusOutHandler","shouldBeVisible","focusClass","keyDownDocumentHandler","includes","key","persistOnHover","persistOnHoverDismissed","hideTooltip","mouseEnterHandler","handleMouseOver","labelChanged","matches","left","hostLeft","right","hostRight","width","hostWidth","getBoundingClientRect","paddingLeft","paddingRight","window","getComputedStyle","tooltipWidth","Number","replace","extraMargin","distanceLeft","distanceRight","innerWidth","style","setProperty","Math","round","animationEndHandler","isKeyboardFocus","findFocusVisibleElement","document","activeElement","children","Array","from","child","_tooltip","undefined","element","shadowRoot","label","render","classes","push","h","tabindex","ref","el","class","join","onAnimationEnd","role","onSlotchange"],"sources":["src/components/q2-tooltip/q2-tooltip.scss?tag=q2-tooltip&encapsulation=shadow","src/components/q2-tooltip/q2-tooltip.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(\n            --tct-tooltip-background,\n            var-prefixer(tooltip-background-color),\n            --t-top-a3,\n            #0d0d0dd9\n        )};\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        :host([immediate]:not([immediate='false'])) & {\n            --comp-delay: 0s;\n        }\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        word-wrap: break-word;\n        white-space: pre;\n        pointer-events: none;\n        content: attr(data-label);\n        background: var(--comp-background);\n        border-radius: var-list(var-prefixer(tooltip-border-radius), --app-border-radius-1, 4px);\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        transition-property: visibility, opacity;\n    }\n\n    :host([block]) & {\n        display: block;\n    }\n\n    :host([persist-on-hover]:not([persist-on-hover='false'])) & {\n        &:before,\n        &:after {\n            pointer-events: auto;\n        }\n    }\n\n    // When to show the tooltip\n    &:not(.dismissed):hover,\n    &:not(.dismissed).has-keyboard-focus:focus-within,\n    :host([persistent]:not([persistent='false'])) &:not(.dismissed) {\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            margin-right: var(--comp-body-offset);\n            transform: #{translateX(#{var-list(--comp-offset-translate, 0)})};\n        }\n    }\n\n    :host([position='sw']) &,\n    :host([position='nw']) & {\n        &:after {\n            margin-right: var(--comp-body-offset);\n            margin-left: var(--comp-body-offset);\n            right: 50%;\n            transform: #{translateX(#{var-list(--comp-offset-translate, 0)})};\n        }\n    }\n\n    // Centered\n    :host([position='s']) &,\n    :host([position='n']) & {\n        &:after {\n            transform: #{translateX(calc(50% + #{var-list(--comp-offset-translate, 0)}))};\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, Watch } from '@stencil/core';\nimport { isEventFromElement, overrideFocus } from 'src/utils';\n\n/**\n * @name Tooltip\n * @category Feedback\n * @summary Use for brief hints or explanations shown on hover or focus.\n */\n@Component({ tag: 'q2-tooltip', shadow: true, styleUrl: 'q2-tooltip.scss' })\nexport class Q2Tooltip implements ComponentInterface {\n    // #region Own Properties\n\n    animationEndCount = 0;\n    tooltipElement: HTMLDivElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    focusClass: 'has-keyboard-focus' | 'has-generic-focus' | 'has-generic-focus-out';\n\n    @State()\n    persistOnHoverDismissed: boolean;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Displays the element as a block, making it take up the full width of its container. */\n    @Prop({ reflect: true })\n    block: boolean;\n\n    /**\n     * Makes the component focusable, thereby putting it in the tab order of the keyboard.\n     * @warning\n     * This is only meant to be used when the `q2-tooltip` is wrapped around an element that is not focusable (e.g., icons, static text, badges, etc.).\n     */\n    @Prop({ reflect: true })\n    focusable: boolean = false;\n\n    /** Whether to show the tooltip immediately upon hover. */\n    @Prop({ reflect: true })\n    immediate: boolean;\n\n    /** text that is displayed when the tooltip is activated. */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** Enables the use of multi-line tooltips with a default `max-width` of `200px`. */\n    @Prop({ reflect: true })\n    multiline: boolean;\n\n    /** Displays the tooltip persistently. */\n    @Prop({ reflect: true })\n    persistent: boolean;\n\n    /**\n     * Allows the tooltip bubble itself to be hovered.\n     * When enabled, the tooltip remains visible while moving between the trigger and the tooltip bubble.\n     */\n    @Prop({ reflect: true })\n    persistOnHover: boolean;\n\n    /** The position of the tooltip based on [cardinal and intercardinal directions](https://en.wikipedia.org/wiki/Cardinal_direction). */\n    @Prop({ reflect: true })\n    position: 'n' | 's' | 'e' | 'w' | 'nw' | 'ne' | 'sw' | 'se' = 'n';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback(): void {\n        this.clearTooltipOnChildren();\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        this.propagateTooltip();\n        if (this.persistent) this.adjustSide();\n    }\n\n    // #endregion\n    // #region Listeners\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    // Escape must be handled on `document` so it still dismisses when the tooltip is visible by hover only and focus is not inside the tooltip host.\n    @Listen('keydown', { target: 'document' })\n    keyDownDocumentHandler(event: KeyboardEvent) {\n        if (!['Esc', 'Escape'].includes(event.key)) return;\n        if (!this.shouldBeVisible) return;\n        if (this.persistOnHover) this.persistOnHoverDismissed = true;\n        this.hideTooltip();\n    }\n\n    @Listen('mouseenter')\n    mouseEnterHandler() {\n        this.persistOnHoverDismissed = false;\n    }\n\n    @Listen('mouseover')\n    @Listen('mouseclick')\n    handleMouseOver() {\n        this.adjustSide();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('label')\n    labelChanged() {\n        this.propagateTooltip();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get shouldBeVisible() {\n        if (this.persistent) return true;\n        return this.hostElement.matches(':hover, :focus-within') && !this.persistOnHoverDismissed;\n    }\n\n    adjustSide() {\n        const { left: hostLeft, right: hostRight, width: hostWidth } = this.hostElement.getBoundingClientRect();\n        if (!hostLeft || !hostWidth) return;\n\n        const { width, paddingLeft, paddingRight } = window.getComputedStyle(this.tooltipElement, '::after');\n\n        const tooltipWidth =\n            Number(width.replace(/[px]/g, '')) +\n            Number(paddingLeft.replace(/[px]/g, '')) +\n            Number(paddingRight.replace(/[px]/g, ''));\n        const extraMargin = ['se', 'sw', 'ne', 'nw'].includes(this.position) ? 0 : 15;\n\n        const distanceLeft = hostLeft + hostWidth / 2;\n        const distanceRight = window.innerWidth - hostRight + +hostWidth / 2;\n\n        if (['ne', 'se'].includes(this.position)) {\n            if (tooltipWidth > distanceRight) {\n                this.tooltipElement.style.setProperty(\n                    '--comp-offset-translate',\n                    `-${Math.round(tooltipWidth - distanceRight + extraMargin)}px`\n                );\n            }\n        } else if (['nw', 'sw'].includes(this.position)) {\n            if (tooltipWidth > distanceLeft) {\n                this.tooltipElement.style.setProperty(\n                    '--comp-offset-translate',\n                    `${Math.round(tooltipWidth - distanceLeft + extraMargin)}px`\n                );\n            }\n        } else if (['n', 's'].includes(this.position)) {\n            if (tooltipWidth / 2 > distanceLeft) {\n                this.tooltipElement.style.setProperty(\n                    '--comp-offset-translate',\n                    `${Math.round(tooltipWidth / 2 - distanceLeft + extraMargin)}px`\n                );\n            } else if (tooltipWidth / 2 > distanceRight) {\n                this.tooltipElement.style.setProperty(\n                    '--comp-offset-translate',\n                    `-${Math.round(tooltipWidth / 2 - distanceRight + extraMargin)}px`\n                );\n            } else {\n                this.tooltipElement.style.setProperty('--comp-offset-translate', `0px`);\n            }\n        }\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    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    clearTooltipOnChildren() {\n        const children = Array.from(this.hostElement.children);\n        for (const child of children) {\n            if ('_tooltip' in child) {\n                (child as HTMLElement & { _tooltip: string })._tooltip = undefined;\n            }\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    hideTooltip() {\n        if (this.focusClass === 'has-generic-focus') this.focusClass = 'has-generic-focus-out';\n        else this.focusClass = null;\n    }\n\n    propagateTooltip() {\n        if (this.focusable) return;\n        const children = Array.from(this.hostElement.children);\n        for (const child of children) {\n            if ('_tooltip' in child) {\n                (child as HTMLElement & { _tooltip: string })._tooltip = this.label || undefined;\n            }\n        }\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { focusClass } = this;\n        const classes = ['tooltip'];\n        if (focusClass) classes.push(focusClass);\n        if (this.persistOnHoverDismissed) classes.push('dismissed');\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.focusable ? this.label : undefined}\n                data-label={this.label}\n                onAnimationEnd={() => this.animationEndHandler()}\n                role={this.focusable ? 'tooltip' : undefined}\n                test-id=\"tooltipContainer\"\n            >\n                <slot onSlotchange={() => this.propagateTooltip()} />\n            </div>\n        ) : (\n            <slot onSlotchange={() => this.propagateTooltip()} />\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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","ignoreList":[]}