{"version":3,"sources":["src/components/ads-tooltip/components/ads-tooltip-content.tsx","src/components/ads-tooltip/ads-tooltip.types.ts","node_modules/@fortawesome/pro-solid-svg-icons/faCircleQuestion.js","node_modules/@fortawesome/pro-solid-svg-icons/faQuestionCircle.js","src/components/ads-tooltip/components/ads-tooltip-trigger.tsx","src/components/ads-tooltip/ads-tooltip.scss?tag=ads-tooltip&encapsulation=shadow","src/components/ads-tooltip/ads-tooltip.tsx"],"names":["AdsTooltipContent","content","isActive","id","position","width","clickHandler","evt","stopPropagation","h","style","isNullOrUndefined","class","aria-live","onClick","AdsTooltipErrors","Object","defineProperty","exports","value","prefix","iconName","height","aliases","unicode","svgPathData","definition","icon","faCircleQuestion","ligatures","source","faQuestionCircle","AdsTooltipTrigger","tooltipIsActive","describedById","label","mouseEventCallback","mouseEventOnHover","classes","push","attributes","aria-describedby","aria-label","aria-controls","role","onMouseEnter","onMouseLeave","assign","join","generateSVGImage","data","adsTooltipCss","AdsTooltip","[object Object]","hostRef","this","contentId","generateId","isOpenInternal","contentWidth","srLabel","Dictionary","get","Positions","RIGHT","openOnHover","triggerPadding","getTriggerEl","customTriggerEl","el","shadowRoot","querySelector","addInteractionEventsToEl","addEventListener","toggleTooltip","handleFocusOutEvent","cursor","removeInteractionEventsToEl","removeEventListener","removeProperty","addHoverEventToElement","removeHoverEventToElement","addAccessibilityEventsToEl","setAttribute","getAttribute","removeAccessibilityEventsToEl","removeAttribute","preventDefault","type","toLowerCase","onOpenChange","closeTooltip","newOpenState","openChange","emit","newValue","openChangeHandler","isOpen","getPosition","values","toString","includes","positionTooltip","getContentPosition","setProperty","setFocusOnArea","isRTL","getIsElementRTL","trigger","triggerBounds","getBoundingClientRect","contentBounds","tooltipBounds","parentElement","moveContentBoxByX","moveContentBoxByY","pointerSize","pointerDistanceIn","triggerSizeX","triggerSizeY","contentSizeX","contentSizeY","triggerOriginX","x","triggerOriginY","y","tooltipOriginsX","tooltipOriginsY","TOP","BOTTOM","LEFT","Number","identifier","component","handleBodyClick","bind","handleKeyUpEvent","registerComponent","showErrorMessage","INVALID_POSITION","newEl","oldEl","target","contains","code","focus","relatedTarget","Pipeline.addComponent","ro","ResizeObserver","clearTimeout","timeout","setTimeout","observe","document","body","disconnect","Pipeline.removeComponent","isNullOrUndefinedOrEmpty","text","name"],"mappings":"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","sourcesContent":["import { FunctionalComponent, VNode, h } from '@stencil/core';\nimport { Position } from '../../core/types/globalTypes';\nimport { isNullOrUndefined } from 'utils/collection';\n\ninterface AdsTooltipContentProps {\n content: string | HTMLSlotElement;\n isActive: boolean;\n id: string;\n position: Position;\n width: string;\n}\n\nexport const AdsTooltipContent: FunctionalComponent = ({ content, isActive, id, position, width }) => {\n const clickHandler = function (evt: Event): void {\n evt.stopPropagation();\n };\n\n return isActive\n ? ((\n \n {content}\n \n ) as VNode)\n : null;\n};\n","export enum AdsTooltipErrors {\n INVALID_POSITION = 'Invalid position',\n}\n\n/**\n * An interface for the custom `openChange` event for the tooltip\n * @docs\n */\nexport interface OpenChangeEvent {\n evt?: Event;\n newValue: boolean;\n}\n\nexport type OpenChangeHandler = (evt: OpenChangeEvent) => void;\n","'use strict';\nObject.defineProperty(exports, '__esModule', { value: true });\nvar prefix = 'fas';\nvar iconName = 'circle-question';\nvar width = 512;\nvar height = 512;\nvar aliases = [62108,\"question-circle\"];\nvar unicode = 'f059';\nvar svgPathData = 'M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM169.8 165.3c7.9-22.3 29.1-37.3 52.8-37.3h58.3c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24V250.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1H222.6c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32z';\n\nexports.definition = {\n prefix: prefix,\n iconName: iconName,\n icon: [\n width,\n height,\n aliases,\n unicode,\n svgPathData\n ]};\n\nexports.faCircleQuestion = exports.definition;\nexports.prefix = prefix;\nexports.iconName = iconName;\nexports.width = width;\nexports.height = height;\nexports.ligatures = aliases;\nexports.unicode = unicode;\nexports.svgPathData = svgPathData;\nexports.aliases = aliases;","'use strict';\nObject.defineProperty(exports, '__esModule', { value: true });\nvar source = require('./faCircleQuestion');\nexports.definition = {\n prefix: source.prefix,\n iconName: source.iconName,\n icon: [\n source.width,\n source.height,\n source.aliases,\n source.unicode,\n source.svgPathData\n ]};\n\nexports.faQuestionCircle = exports.definition;\nexports.prefix = source.prefix;\nexports.iconName = source.iconName;\nexports.width = source.width;\nexports.height = source.height;\nexports.ligatures = source.aliases;\nexports.unicode = source.unicode;\nexports.svgPathData = source.svgPathData;\nexports.aliases = source.aliases;","import { FunctionalComponent, VNode, h } from '@stencil/core';\nimport { height, svgPathData, width } from '@fortawesome/pro-solid-svg-icons/faQuestionCircle';\n\nimport { generateSVGImage } from 'utils/imageHelper';\n\ninterface AdsTooltipTriggerProps {\n tooltipIsActive: boolean;\n describedById: string;\n label: string;\n mouseEventCallback: (evt: MouseEvent) => void;\n mouseEventOnHover?: boolean;\n}\n\nexport const AdsTooltipTrigger: FunctionalComponent = ({\n tooltipIsActive,\n describedById,\n label,\n mouseEventCallback,\n mouseEventOnHover = false,\n}) => {\n const classes = ['c-tooltip__trigger'];\n if (tooltipIsActive) {\n classes.push('is-active');\n }\n\n const attributes = {\n 'aria-describedby': describedById,\n 'aria-label': label,\n 'aria-controls': describedById,\n role: 'tooltip',\n onMouseEnter: mouseEventOnHover ? mouseEventCallback : null,\n onMouseLeave: mouseEventOnHover ? mouseEventCallback : null,\n };\n\n return (\n \n ) as VNode;\n};\n","@import 'core';\n\n/**\n * @prop --ads-tooltip-content-background-color: The content background color for ads-tooltip\n * @prop --ads-tooltip-content-border-color: The content border color for ads-tooltip\n * @prop --ads-tooltip-content-color: The content font color for ads-tooltip\n *\n * @prop --ads-tooltip-trigger-background-color: The trigger background color for ads-tooltip\n * @prop --ads-tooltip-trigger-color: The trigger color for ads-tooltip\n * @prop --ads-tooltip-trigger-color-active: The trigger color for ads-tooltip on active\n * @prop --ads-tooltip-trigger-color-hover: The trigger color for ads-tooltip on hover\n */\n\n// Trigger\n$trigger-size: 12px;\n$trigger-padding: 2px;\n$trigger-render-size: $trigger-size + ($trigger-padding * 2);\n\n// Content\n$content-border-width: 1px;\n$content-pointer-size: 3px;\n$content-pointer-distance-in: 10px;\n\n/**\n * Mixin to place the content box pointer\n */\n@mixin pointer-placement(\n $border-width: 0 0 $content-border-width $content-border-width,\n $bottom: auto,\n $left: -$content-pointer-size,\n $right: auto,\n $top: $content-pointer-distance-in,\n $transform: rotate(45deg)\n) {\n border-width: $border-width;\n bottom: $bottom;\n left: $left;\n right: $right;\n top: $top;\n transform: $transform;\n}\n\n::slotted([slot='content']) {\n display: block !important;\n width: 100%;\n}\n\n:host {\n box-sizing: border-box;\n display: inline-block;\n\n * {\n box-sizing: inherit;\n }\n}\n\n:host([theme='default']) {\n @include ads-vars-component-tooltip-default;\n}\n\n:host([theme='dark']) {\n @include ads-vars-component-tooltip-dark;\n}\n\n:host([dir='ltr']) {\n @include ads-vars-component-tooltip-ltr;\n}\n\n:host([dir='rtl']) {\n @include ads-vars-component-tooltip-rtl;\n}\n\n.c-tooltip {\n display: inline-flex !important;\n height: inherit;\n width: inherit;\n\n &__trigger {\n @include ads-tooltip-trigger;\n align-items: center;\n appearance: none;\n -moz-appearance: none;\n -webkit-appearance: none;\n border: 0;\n cursor: pointer;\n display: inline-flex;\n font-size: 14px;\n height: inherit;\n justify-content: center;\n padding: 0;\n width: inherit;\n z-index: $layer-1;\n }\n\n &__content {\n @include ads-tooltip-content;\n border-radius: 5px;\n border-style: solid;\n border-width: 1px;\n display: flex;\n font-family: var(--ads-font-family);\n font-size: 12px;\n font-weight: 400;\n max-width: 200px;\n overflow-wrap: break-word;\n padding: 10px;\n position: absolute;\n text-align: var(--ads-tooltip-content-text-align, $ads-tooltip-content-text-align-ltr);\n z-index: $layer-3;\n\n &::before {\n border-style: solid;\n border-width: $content-border-width;\n content: '';\n height: $content-pointer-size;\n position: absolute;\n width: $content-pointer-size;\n }\n\n &.has-no-max-width {\n max-width: initial;\n }\n\n &.is-top::before {\n @include pointer-placement(0 $content-border-width $content-border-width 0, -$content-pointer-size, $content-pointer-distance-in, auto, auto);\n }\n\n &.is-right::before {\n @include pointer-placement;\n }\n\n &.is-bottom::before {\n @include pointer-placement($content-border-width 0 0 $content-border-width, auto, $content-pointer-distance-in, auto, -$content-pointer-size);\n }\n\n &.is-left::before {\n @include pointer-placement($content-border-width $content-border-width 0 0, auto, auto, -$content-pointer-size, $content-pointer-distance-in);\n }\n }\n}\n","import * as Pipeline from '../core/utils/pipeline';\nimport { AdsTooltipContent } from './components/ads-tooltip-content';\nimport { AdsTooltipErrors, OpenChangeEvent, OpenChangeHandler } from './ads-tooltip.types';\nimport { AdsTooltipTrigger } from './components/ads-tooltip-trigger';\nimport { BaseComponent } from '../core/interfaces/BaseComponent';\nimport { Component, Element, Event, EventEmitter, Listen, Prop, State, VNode, Watch, h } from '@stencil/core';\nimport { Dictionary } from '../core/classes/Dictionary';\nimport { Position, Positions } from '../core/types/globalTypes';\nimport { ResizeObserver } from '@juggle/resize-observer';\nimport { Theme } from '../core/types/globalTypes';\nimport { generateId, showErrorMessage } from '../core/utils/components';\nimport { getIsElementRTL, isNullOrUndefined, isNullOrUndefinedOrEmpty, setFocusOnArea } from 'utils/index';\n\n/**\n * Tooltips provide additional contextual information upon hover or focus of the question mark element. As default this will have ARIA label of \"More information\" but we recommend that you change the ARIA label attribute to be sufficiently descriptive to differentiate each tooltip on the page. For example \"More information about CPUs\"\n * @tag ``\n * @slot content - Content rendered as rich text inside the component\n * @example \n */\n@Component({\n tag: 'ads-tooltip',\n styleUrl: 'ads-tooltip.scss',\n shadow: true,\n})\nexport class AdsTooltip implements BaseComponent {\n /**\n * @hidden\n */\n public component: string;\n\n private timeout: NodeJS.Timeout;\n\n private ro: ResizeObserver;\n\n private contentId = generateId('ads:tooltip:content:');\n\n /**\n * @hidden\n */\n static AdsTooltip: any;\n\n constructor() {\n this.el.setAttribute('id', this.identifier || generateId('ads-tooltip'));\n this.component = 'ads-tooltip';\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n this.handleBodyClick = this.handleBodyClick.bind(this);\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n this.handleKeyUpEvent = this.handleKeyUpEvent.bind(this);\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n this.handleFocusOutEvent = this.handleFocusOutEvent.bind(this);\n Dictionary.registerComponent(this);\n }\n\n @Element() private el: HTMLAdsTooltipElement;\n\n /**\n * The internal state of the modal. Dictated by the prop if one is provided\n * @hidden\n */\n @State() isOpenInternal = false;\n\n /**\n * The unique identifier (optional)\n */\n @Prop({ attribute: 'id' }) identifier?: string;\n\n /**\n * The width the content box should take (optional)\n * @default \"100%\"\n */\n @Prop({ reflect: true }) contentWidth = '100%';\n\n /**\n * Defines whether or not the tooltip is open (optional)\n */\n @Prop({ reflect: true }) isOpen?: boolean;\n\n /**\n * The theme for this component instance (optional)\n * Values: \"default\", \"dark\"\n */\n @Prop({ reflect: true }) theme?: Theme;\n\n /**\n * Text to display as the aria-label (optional)\n * @default \"More information\"\n */\n @Prop({ reflect: true }) srLabel = Dictionary.get('More information', 'MORE_INFORMATION');\n\n /**\n * The position of the content box of the tooltip.\n * It can be one of 'top', 'left', and 'bottom'\n * @default \"right\"\n */\n @Prop({ reflect: true }) position: Position = Positions.RIGHT;\n\n /**\n * The text to be placed within the content box,\n * but any children placed within the tooltip tag will take precedence (optional)\n */\n @Prop({ reflect: true }) text?: string;\n\n /**\n * An element that will be used as a trigger for the tooltip\n * If not specified, the default trigger will be used\n */\n @Prop() customTriggerEl?: HTMLElement;\n\n /**\n * If true, the tooltip will also appear on trigger hover\n * @default false\n */\n @Prop() openOnHover = false;\n\n /**\n * The padding to be used between the trigger and the tooltip popup\n * @default 10\n */\n @Prop({ reflect: true }) triggerPadding = 10;\n\n /**\n * Callback function for the open state of the tooltip\n */\n @Prop() openChangeHandler?: OpenChangeHandler;\n\n /**\n * Emits 'openChange' custom event.
\n * Usage: `document.querySelector('ads-tooltip').addEventListener('openChange', function(evt) {});`\n * @event\n */\n @Event() openChange: EventEmitter;\n\n /**\n * Handle identifier property changes\n * @param {string} newValue The new value for \"identifier\"\n * @hidden\n */\n @Watch('identifier')\n handleIdentifierChange(newValue: string): void {\n this.el.setAttribute('id', newValue || generateId('ads-tooltip'));\n }\n\n /**\n * watch for changes on the prop\n * @param {boolean} newValue new isOpen value\n * @hidden\n */\n @Watch('isOpen')\n onIsOpenChanged(newValue: boolean): void {\n if (newValue === true || newValue === false) {\n this.isOpenInternal = newValue;\n }\n }\n\n /**\n * watch for changes on the prop\n * @param {Position} newValue the new position\n * @hidden\n */\n @Watch('position')\n onPositionChanged(newValue: Position): void {\n if (!Object.values(Positions).toString().includes(newValue)) {\n showErrorMessage(AdsTooltipErrors.INVALID_POSITION, this.el);\n }\n }\n\n /**\n * Watch for changes on custom trigger El. Add/remove event listener for \"click\"\n * @param {HTMLElement} newEl The new trigger element\n * @param {HTMLElement} oldEl The old trigger element\n * @hidden\n */\n @Watch('customTriggerEl')\n onCustomTriggerElChanged(newEl: HTMLElement, oldEl: HTMLElement): void {\n if (!isNullOrUndefined(newEl)) {\n this.addInteractionEventsToEl(newEl);\n this.addAccessibilityEventsToEl(newEl);\n if (this.openOnHover) {\n this.addHoverEventToElement(newEl);\n }\n }\n if (!isNullOrUndefined(oldEl)) {\n this.removeInteractionEventsToEl(oldEl);\n this.removeAccessibilityEventsToEl(oldEl);\n this.removeHoverEventToElement(oldEl);\n }\n }\n\n /**\n * Watch for changes in openOnHover and add/remove event listeners\n * @param {boolean} newValue The new value\n * @hidden\n */\n @Watch('openOnHover')\n onOpenOnHoverChange(newValue: boolean): void {\n if (!isNullOrUndefined(this.customTriggerEl)) {\n if (newValue) {\n this.addHoverEventToElement(this.customTriggerEl);\n } else {\n this.removeHoverEventToElement(this.customTriggerEl);\n }\n }\n }\n\n /**\n * Listen to global click events\n * @param {Event} evt The click event\n * @hidden\n */\n @Listen('click', { target: 'window' })\n handleBodyClick(evt: MouseEvent): void {\n if (this.isOpenInternal) {\n if (evt.target === this.el) {\n evt.stopPropagation();\n }\n if (this.el !== evt.target && !this.el.shadowRoot.contains(evt.target as Node) && !this.el.contains(evt.target as Node)) {\n this.closeTooltip();\n }\n }\n }\n\n /**\n * Listen to global keyUp events\n * @param {Event} evt The keyUp event\n * @hidden\n */\n @Listen('keyup', { capture: true, target: 'window' })\n handleKeyUpEvent(evt: KeyboardEvent): void {\n if (this.isOpenInternal) {\n switch (evt.code.toLowerCase()) {\n case 'escape': {\n this.closeTooltip();\n // Set focus to tooltip trigger\n const trigger: HTMLElement = this.getTriggerEl();\n if (!isNullOrUndefined(trigger)) {\n trigger.focus();\n }\n break;\n }\n default:\n break;\n }\n }\n }\n\n /**\n * Listen to global focusout events\n * @param {Event} evt The focusout event\n * @hidden\n */\n @Listen('focusout', { capture: true })\n handleFocusOutEvent(evt: FocusEvent): void {\n if (this.isOpenInternal) {\n if (evt.target === this.el) {\n evt.stopPropagation();\n }\n if (\n !isNullOrUndefined(evt.relatedTarget) &&\n evt.relatedTarget !== this.el &&\n !this.el.shadowRoot.contains(evt.relatedTarget as Node) &&\n !this.el.contains(evt.relatedTarget as Node) &&\n evt.relatedTarget !== this.customTriggerEl\n ) {\n this.closeTooltip();\n }\n }\n }\n\n /**\n * Returns the current trigger element\n * @returns {HTMLElement} The current custom trigger element\n */\n private getTriggerEl = (): HTMLElement => this.customTriggerEl || this.el.shadowRoot.querySelector('.c-tooltip__trigger');\n\n /**\n * Add click and focusout event listeners to element\n * @param {HTMLElement} el The html element\n */\n private addInteractionEventsToEl = (el: HTMLElement): void => {\n el.addEventListener('click', this.toggleTooltip);\n el.addEventListener('focusout', this.handleFocusOutEvent);\n el.style.cursor = 'pointer';\n };\n\n /**\n * Remove click and focusout event listeners to element\n * @param {HTMLElement} el The html element\n */\n private removeInteractionEventsToEl = (el: HTMLElement): void => {\n el.removeEventListener('click', this.toggleTooltip);\n el.removeEventListener('focusout', this.handleFocusOutEvent);\n el.style.removeProperty('cursor');\n };\n\n /**\n * Add mouseenter and mouseleave event listeners to element\n * @param {HTMLElement} el The html element\n */\n private addHoverEventToElement = (el: HTMLElement): void => {\n el.addEventListener('mouseenter', this.toggleTooltip);\n el.addEventListener('mouseleave', this.toggleTooltip);\n };\n\n /**\n * Remove mouseenter and mouseleave event listeners from element\n * @param {HTMLElement} el The html element\n */\n private removeHoverEventToElement = (el: HTMLElement): void => {\n el.removeEventListener('mouseenter', this.toggleTooltip);\n el.removeEventListener('mouseleave', this.toggleTooltip);\n };\n\n /**\n * Add aria attributes for screen readers\n * @param {HTMLElement} el The html element\n */\n private addAccessibilityEventsToEl = (el: HTMLElement): void => {\n el.setAttribute('aria-describedby', this.el.getAttribute('id'));\n el.setAttribute('aria-controls', this.el.getAttribute('id'));\n };\n\n /**\n * Remove aria attributes for screen readers\n * @param {HTMLElement} el The html element\n */\n private removeAccessibilityEventsToEl = (el: HTMLElement): void => {\n el.removeAttribute('aria-describedby');\n el.removeAttribute('aria-controls');\n };\n\n /**\n * Open or close the tooltip content-box\n * @param {Event} evt The triggering event\n */\n private toggleTooltip = (evt: MouseEvent) => {\n evt.preventDefault();\n evt.stopPropagation();\n switch (evt.type.toLowerCase()) {\n case 'mouseenter':\n if (!this.isOpenInternal) {\n this.onOpenChange(!this.isOpenInternal, evt);\n }\n break;\n case 'mouseleave':\n if (this.isOpenInternal) {\n this.onOpenChange(!this.isOpenInternal, evt);\n }\n break;\n default:\n this.onOpenChange(!this.isOpenInternal, evt);\n break;\n }\n };\n\n private closeTooltip = (): void => {\n this.onOpenChange(false, null);\n };\n\n private onOpenChange = (newOpenState: boolean, evt?: Event): void => {\n this.openChange.emit({ newValue: newOpenState, evt });\n if (!isNullOrUndefined(this.openChangeHandler)) {\n this.openChangeHandler({ newValue: newOpenState, evt });\n }\n if (this.isOpen !== true && this.isOpen !== false) {\n this.isOpenInternal = newOpenState;\n }\n };\n\n private getPosition = (): Position => {\n return Object.values(Positions).toString().includes(this.position) ? this.position : Positions.RIGHT;\n };\n\n private positionTooltip = () => {\n if (this.isOpenInternal) {\n // position the content after rendering it.\n const content: HTMLElement = this.el.shadowRoot.querySelector('.c-tooltip__content');\n const position = this.getContentPosition(content, this.getPosition());\n content.style.setProperty('transform', `translate(${position[0]}px, ${position[1]}px)`);\n setFocusOnArea(content);\n }\n };\n\n /**\n * Get the coordinates to move an element with a given height and width\n * @param {HTMLElement} content The content element\n * @param {Position} position The position option for the tooltip\n * @return {number[]} The coordinates of where the tooltip content should be placed\n */\n private getContentPosition = (content: HTMLElement, position: Position): number[] => {\n // Check whether the component should render in RTL mode\n const isRTL = getIsElementRTL(this.el);\n\n const trigger = this.getTriggerEl();\n const triggerBounds = trigger.getBoundingClientRect();\n const contentBounds = content.getBoundingClientRect();\n const tooltipBounds = content.parentElement.getBoundingClientRect();\n let moveContentBoxByX = 0;\n let moveContentBoxByY = 0;\n const pointerSize = 3; // from css\n const pointerDistanceIn = 10; // from css\n const triggerSizeX = triggerBounds.width;\n const triggerSizeY = triggerBounds.height;\n const contentSizeX = contentBounds.width;\n const contentSizeY = contentBounds.height;\n const triggerOriginX = triggerBounds.x;\n const triggerOriginY = triggerBounds.y;\n const tooltipOriginsX = tooltipBounds.x;\n const tooltipOriginsY = tooltipBounds.y;\n\n switch (position) {\n case Positions.TOP:\n moveContentBoxByX = triggerSizeX / 2 - (pointerDistanceIn + pointerSize);\n moveContentBoxByY = -(contentSizeY + this.triggerPadding + pointerSize);\n break;\n case Positions.RIGHT:\n default:\n moveContentBoxByX = triggerSizeX + this.triggerPadding + pointerSize;\n moveContentBoxByY = triggerSizeY / 2 - (pointerDistanceIn + pointerSize);\n break;\n case Positions.BOTTOM:\n moveContentBoxByX = triggerSizeX / 2 - (pointerDistanceIn + pointerSize);\n moveContentBoxByY = triggerSizeY + this.triggerPadding + pointerSize;\n break;\n case Positions.LEFT:\n moveContentBoxByX = -(contentSizeX + this.triggerPadding + pointerSize);\n moveContentBoxByY = triggerSizeY / 2 - (pointerDistanceIn + pointerSize);\n break;\n }\n\n // Basically we align the origins of the content and the trigger (so top left corners have the same exact position), and then we move it according to position\n return [\n triggerOriginX -\n tooltipOriginsX +\n moveContentBoxByX +\n contentSizeX * Number(isRTL) -\n triggerSizeX * Number(isRTL && trigger !== this.customTriggerEl),\n triggerOriginY - tooltipOriginsY + moveContentBoxByY,\n ];\n };\n\n protected componentWillLoad(): void {\n if (this.isOpen === true || this.isOpen === false) {\n this.isOpenInternal = this.isOpen;\n }\n if (!isNullOrUndefined(this.customTriggerEl)) {\n this.addInteractionEventsToEl(this.customTriggerEl);\n this.addAccessibilityEventsToEl(this.customTriggerEl);\n if (this.openOnHover) {\n this.addHoverEventToElement(this.customTriggerEl);\n }\n }\n }\n\n protected componentDidLoad(): void {\n Pipeline.addComponent(this.el);\n this.ro = new ResizeObserver(() => {\n clearTimeout(this.timeout);\n this.timeout = setTimeout(() => {\n this.positionTooltip();\n }, 200);\n });\n this.ro.observe(document.body);\n }\n\n protected disconnectedCallback(): void {\n if (!isNullOrUndefined(this.customTriggerEl)) {\n this.removeInteractionEventsToEl(this.customTriggerEl);\n this.removeAccessibilityEventsToEl(this.customTriggerEl);\n this.removeHoverEventToElement(this.customTriggerEl);\n }\n\n this.ro.disconnect();\n Pipeline.removeComponent(this.el);\n }\n\n protected componentDidRender(): void {\n this.positionTooltip();\n }\n\n protected render(): VNode {\n return (\n
\n {isNullOrUndefined(this.customTriggerEl) ? (\n \n ) : null}\n ) as HTMLSlotElement)}\n isActive={this.isOpenInternal}\n id={this.contentId}\n position={this.getPosition()}\n width={this.contentWidth}\n />\n
\n ) as VNode;\n }\n}\n"]}