q2-tecton-elements 1.67.2 → 1.68.0

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

@@ -1 +1 @@
-{"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":";;;;AAAA,MAAMA,IAAe;;MCSRC,IAAS;EADtB,WAAAC,CAAAC;;;QAIIC,KAAiBC,oBAAG;;;;;eA+BpBD,KAASE,YAAY;8IA2BrBF,KAAQG,WAAsD;AAqMjE;;;EAhMG,oBAAAC;IACIJ,KAAKK;;EAGT,gBAAAC;IACIC,EAAcP,KAAKQ;IACnBR,KAAKS;IACL,IAAIT,KAAKU,YAAYV,KAAKW;;;;EAO9B,mBAAAC;IACIZ,KAAKa;;EAIT,YAAAC,CAAaC;IACT,KAAKC,EAAmBD,GAAOf,KAAKQ,cAAc;IAClD,KAAKR,KAAKE,WAAW;IACrBF,KAAKiB,eAAeC;;EAIxB,eAAAC;IACI,IAAInB,KAAKoB,iBAAiB;IAC1B,IAAIpB,KAAKqB,eAAe,qBAAqBrB,KAAKqB,aAAa,8BAC1DrB,KAAKqB,aAAa;;;EAK3B,sBAAAC,CAAuBP;IACnB,KAAK,EAAC,OAAO,WAAUQ,SAASR,EAAMS,MAAM;IAC5C,KAAKxB,KAAKoB,iBAAiB;IAC3B,IAAIpB,KAAKyB,gBAAgBzB,KAAK0B,0BAA0B;IACxD1B,KAAK2B;;EAIT,iBAAAC;IACI5B,KAAK0B,0BAA0B;;EAKnC,eAAAG;IACI7B,KAAKW;;;;EAOT,YAAAmB;IACI9B,KAAKS;;;;EAMT,mBAAIW;IACA,IAAIpB,KAAKU,YAAY,OAAO;IAC5B,OAAOV,KAAKQ,YAAYuB,QAAQ,6BAA6B/B,KAAK0B;;EAGtE,UAAAf;IACI,OAAQqB,MAAMC,GAAUC,OAAOC,GAAWC,OAAOC,KAAcrC,KAAKQ,YAAY8B;IAChF,KAAKL,MAAaI,GAAW;IAE7B,OAAMD,OAAEA,GAAKG,aAAEA,GAAWC,cAAEA,KAAiBC,OAAOC,iBAAiB1C,KAAKiB,gBAAgB;IAE1F,MAAM0B,IACFC,OAAOR,EAAMS,QAAQ,SAAS,OAC9BD,OAAOL,EAAYM,QAAQ,SAAS,OACpCD,OAAOJ,EAAaK,QAAQ,SAAS;IACzC,MAAMC,IAAc,EAAC,MAAM,MAAM,MAAM,OAAMvB,SAASvB,KAAKG,YAAY,IAAI;IAE3E,MAAM4C,IAAed,IAAWI,IAAY;IAC5C,MAAMW,IAAgBP,OAAOQ,aAAad,KAAaE,IAAY;IAEnE,IAAI,EAAC,MAAM,OAAMd,SAASvB,KAAKG,WAAW;MACtC,IAAIwC,IAAeK,GAAe;QAC9BhD,KAAKiB,eAAeiC,MAAMC,YACtB,2BACA,IAAIC,KAAKC,MAAMV,IAAeK,IAAgBF;;WAGnD,IAAI,EAAC,MAAM,OAAMvB,SAASvB,KAAKG,WAAW;MAC7C,IAAIwC,IAAeI,GAAc;QAC7B/C,KAAKiB,eAAeiC,MAAMC,YACtB,2BACA,GAAGC,KAAKC,MAAMV,IAAeI,IAAeD;;WAGjD,IAAI,EAAC,KAAK,MAAKvB,SAASvB,KAAKG,WAAW;MAC3C,IAAIwC,IAAe,IAAII,GAAc;QACjC/C,KAAKiB,eAAeiC,MAAMC,YACtB,2BACA,GAAGC,KAAKC,MAAMV,IAAe,IAAII,IAAeD;aAEjD,IAAIH,IAAe,IAAIK,GAAe;QACzChD,KAAKiB,eAAeiC,MAAMC,YACtB,2BACA,IAAIC,KAAKC,MAAMV,IAAe,IAAIK,IAAgBF;aAEnD;QACH9C,KAAKiB,eAAeiC,MAAMC,YAAY,2BAA2B;;;;EAK7E,mBAAAG;IACItD,KAAKC,oBAAoBD,KAAKC,oBAAoB;IAClD,OAAMoB,YAAEA,GAAUpB,mBAAEA,KAAsBD;;;;QAK1C,IAAIqB,MAAe,2BAA4BA,MAAe,uBAAuBpB,MAAsB,GAAI;MAC3GD,KAAKqB,aAAa;MAClBrB,KAAKC,oBAAoB;;;EAIjC,eAAAY;IACI,KAAKb,KAAKoB,iBAAiB;IAC3B,MAAMmC,MAAoBvD,KAAKwD,wBAAwBC,SAASC;IAChE1D,KAAKqB,aAAakC,IAAkB,uBAAuB;IAC3D,IAAIA,GAAiB;;EAGzB,sBAAAlD;IACI,MAAMsD,IAAWC,MAAMC,KAAK7D,KAAKQ,YAAYmD;IAC7C,KAAK,MAAMG,KAASH,GAAU;MAC1B,IAAI,cAAcG,GAAO;QACpBA,EAA6CC,WAAWC;;;;EAKrE,uBAAAR,CAAwBS;IACpB,KAAKA,GAAS;IACd,IAAIA,EAAQC,YAAYD,IAAUjE,KAAKwD,wBAAwBS,EAAQC,WAAWR;IAClF,QAAOO,MAAO,QAAPA,WAAA,aAAAA,EAASlC,QAAQ,qBAAoBkC,IAAU;;EAG1D,WAAAtC;IACI,IAAI3B,KAAKqB,eAAe,qBAAqBrB,KAAKqB,aAAa,8BAC1DrB,KAAKqB,aAAa;;EAG3B,gBAAAZ;IACI,IAAIT,KAAKE,WAAW;IACpB,MAAMyD,IAAWC,MAAMC,KAAK7D,KAAKQ,YAAYmD;IAC7C,KAAK,MAAMG,KAASH,GAAU;MAC1B,IAAI,cAAcG,GAAO;QACpBA,EAA6CC,WAAW/D,KAAKmE,SAASH;;;;;;EAQnF,MAAAI;IACI,OAAM/C,YAAEA,KAAerB;IACvB,MAAMqE,IAAU,EAAC;IACjB,IAAIhD,GAAYgD,EAAQC,KAAKjD;IAC7B,IAAIrB,KAAK0B,yBAAyB2C,EAAQC,KAAK;IAE/C,OAAOtE,KAAKmE,QACRI,EACI;MAAAC,UAAUxE,KAAKE,YAAY,IAAI8D;MAC/BS,KAAKC,KAAO1E,KAAKiB,iBAAiByD;MAClCC,OAAON,EAAQO,KAAK;MAAI,cACZ5E,KAAKE,YAAYF,KAAKmE,QAAQH;MAC9B,cAAAhE,KAAKmE;MACjBU,gBAAgB,MAAM7E,KAAKsD;MAC3BwB,MAAM9E,KAAKE,YAAY,YAAY8D;MAAS,WACpC;OAERO,EAAA;MAAMQ,cAAc,MAAM/E,KAAKS;UAGnC8D,EAAM;MAAAQ,cAAc,MAAM/E,KAAKS","ignoreList":[]}
+{"version":3,"names":["q2TooltipCss","Q2Tooltip","constructor","hostRef","this","animationEndCount","cachedTooltipHeight","focusable","position","disconnectedCallback","clearTooltipOnChildren","componentDidLoad","overrideFocus","hostElement","propagateTooltip","persistent","adjustSide","documentPointerHandler","event","focusClass","isEventInsideTooltip","_a","composedPath","call","includes","target","Node","contains","persistOnHoverDismissed","hideTooltip","focusCaptureHandler","checkFocusClass","focusHandler","isEventFromElement","tooltipElement","focus","focusOutHandler","shouldBeVisible","keyDownDocumentHandler","key","persistOnHover","mouseEnterHandler","handleMouseOver","labelChanged","matches","left","hostLeft","right","hostRight","width","hostWidth","top","hostTop","bottom","hostBottom","getBoundingClientRect","constrainingContainer","findConstrainingContainer","containerRect","paddingLeft","paddingRight","window","getComputedStyle","tooltipWidth","Number","replace","extraMargin","distanceLeft","distanceRight","distanceTop","distanceBottom","tooltipHeight","calculateTooltipHeight","style","setProperty","Math","round","animationEndHandler","styles","computedHeight","height","paddingTop","paddingBottom","fontSize","lineHeightStr","lineHeight","contentWidth","whiteSpace","multiline","text","label","avgCharWidth","charsPerLine","floor","estimatedLines","max","ceil","length","totalHeight","error","console","warn","fallbackHeight","isKeyboardFocus","findFocusVisibleElement","document","activeElement","children","Array","from","child","_tooltip","undefined","element","parentElement","body","overflow","overflowX","overflowY","tagName","classList","documentElement","shadowRoot","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@import './variables';\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:hover:focus-within {\n        &:before,\n        &:after {\n            animation-name: tooltippedFade;\n            animation-direction: normal;\n            animation-delay: 0ms;\n        }\n    }\n    :host([persist-on-hover]:not([persist-on-hover='false'])) &.has-generic-focus:focus-within {\n        &:before,\n        &:after {\n            animation-name: tooltippedFade;\n            animation-direction: normal;\n            animation-delay: 0ms;\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    &.dismissed {\n        &:before,\n        &:after {\n            visibility: hidden;\n            opacity: 0;\n            animation-name: none;\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    cachedTooltipHeight: number | null = null;\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('click', { target: 'document' })\n    @Listen('touchstart', { target: 'document' })\n    documentPointerHandler(event: Event) {\n        if (!this.focusClass || this.persistent) return;\n        const isEventInsideTooltip =\n            event.composedPath?.().includes(this.hostElement) ||\n            (event.target instanceof Node && this.hostElement.contains(event.target));\n        if (isEventInsideTooltip) {\n            this.persistOnHoverDismissed = false;\n            return;\n        }\n        this.persistOnHoverDismissed = true;\n        this.hideTooltip();\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    // 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('click')\n    handleMouseOver() {\n        this.adjustSide();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('label')\n    labelChanged() {\n        this.propagateTooltip();\n        this.cachedTooltipHeight = null; // Invalidate cache\n        if (this.shouldBeVisible || this.persistent) {\n            this.adjustSide();\n        }\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 {\n            left: hostLeft,\n            right: hostRight,\n            width: hostWidth,\n            top: hostTop,\n            bottom: hostBottom,\n        } = this.hostElement.getBoundingClientRect();\n        if (!hostLeft || !hostWidth) return;\n\n        // Find the constraining container (modal, dialog, or any overflow:hidden ancestor)\n        const constrainingContainer = this.findConstrainingContainer();\n        const containerRect = constrainingContainer.getBoundingClientRect();\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        // Calculate available space relative to constraining container\n        const distanceLeft = hostLeft - containerRect.left + hostWidth / 2;\n        const distanceRight = containerRect.right - hostRight + hostWidth / 2;\n        const distanceTop = hostTop - containerRect.top;\n        const distanceBottom = containerRect.bottom - hostBottom;\n\n        // Calculate tooltip height dynamically\n        const tooltipHeight = this.calculateTooltipHeight();\n\n        // Check if we need to flip vertical position\n        if (['n', 'ne', 'nw'].includes(this.position) && distanceTop < tooltipHeight) {\n            // Not enough space above, try flipping to bottom\n            if (distanceBottom >= tooltipHeight) {\n                this.position = this.position.replace('n', 's') as any;\n            }\n        } else if (['s', 'se', 'sw'].includes(this.position) && distanceBottom < tooltipHeight) {\n            // Not enough space below, try flipping to top\n            if (distanceTop >= tooltipHeight) {\n                this.position = this.position.replace('s', 'n') as any;\n            }\n        }\n\n        // Adjust horizontal positioning\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        // Handle east/west positioning\n        if (this.position === 'e' && tooltipWidth > distanceRight) {\n            // Not enough space on right, flip to left\n            if (distanceLeft >= tooltipWidth) {\n                this.position = 'w';\n            }\n        } else if (this.position === 'w' && tooltipWidth > distanceLeft) {\n            // Not enough space on left, flip to right\n            if (distanceRight >= tooltipWidth) {\n                this.position = 'e';\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    calculateTooltipHeight(): number {\n        if (this.cachedTooltipHeight !== null) {\n            return this.cachedTooltipHeight;\n        }\n\n        try {\n            const styles = window.getComputedStyle(this.tooltipElement, '::after');\n\n            // Try to get computed height first\n            const computedHeight = styles.height;\n            if (computedHeight && computedHeight !== 'auto' && computedHeight !== '0px') {\n                const height = Number(computedHeight.replace(/px/g, ''));\n                const paddingTop = Number(styles.paddingTop.replace(/px/g, ''));\n                const paddingBottom = Number(styles.paddingBottom.replace(/px/g, ''));\n                this.cachedTooltipHeight = height + paddingTop + paddingBottom;\n                return this.cachedTooltipHeight;\n            }\n\n            // Fallback: Calculate based on text and wrapping\n            const width = Number(styles.width.replace(/px/g, ''));\n            const paddingLeft = Number(styles.paddingLeft.replace(/px/g, ''));\n            const paddingRight = Number(styles.paddingRight.replace(/px/g, ''));\n            const paddingTop = Number(styles.paddingTop.replace(/px/g, ''));\n            const paddingBottom = Number(styles.paddingBottom.replace(/px/g, ''));\n\n            const fontSize = Number(styles.fontSize.replace(/px/g, ''));\n            const lineHeightStr = styles.lineHeight;\n            const lineHeight = lineHeightStr === 'normal' ? fontSize * 1.5 : Number(lineHeightStr.replace(/px/g, ''));\n\n            const contentWidth = width - paddingLeft - paddingRight;\n            const whiteSpace = styles.whiteSpace;\n\n            // Single-line tooltip (white-space: pre)\n            if (whiteSpace === 'pre' || !this.multiline) {\n                return lineHeight + paddingTop + paddingBottom;\n            }\n\n            // Multi-line tooltip: estimate line count\n            const text = this.label || '';\n            const avgCharWidth = fontSize * 0.5; // Approximation for character width\n            const charsPerLine = Math.floor(contentWidth / avgCharWidth);\n            const estimatedLines = Math.max(1, Math.ceil(text.length / charsPerLine));\n\n            const totalHeight = estimatedLines * lineHeight + paddingTop + paddingBottom;\n\n            // Add some buffer for safety (10px)\n            this.cachedTooltipHeight = Math.ceil(totalHeight) + 10;\n            return this.cachedTooltipHeight;\n        } catch (error) {\n            console.warn('Failed to calculate tooltip height, using fallback', error);\n            // Fallback based on multiline mode\n            const fallbackHeight = this.multiline ? 80 : 50;\n            this.cachedTooltipHeight = fallbackHeight;\n            return fallbackHeight;\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    findConstrainingContainer(): Element {\n        let element: Element = this.hostElement.parentElement;\n\n        while (element && element !== document.body) {\n            const style = window.getComputedStyle(element);\n            const overflow = style.overflow + style.overflowX + style.overflowY;\n\n            // Check if this element constrains overflow\n            if (overflow.includes('hidden') || overflow.includes('auto') || overflow.includes('scroll')) {\n                return element;\n            }\n\n            // Check for q2-modal interior element\n            if (element.tagName === 'DIALOG' || element.classList.contains('interior')) {\n                return element;\n            }\n\n            element = element.parentElement;\n        }\n\n        // If no constraining container found, use the viewport\n        return document.documentElement;\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":[]}