@travelopia/web-components 0.9.7 → 0.9.8

package/dist/tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"dist/tooltip/index.js","mappings":"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","sources":["webpack://@travelopia/web-components/./src/tooltip/tp-tooltip.ts","webpack://@travelopia/web-components/./src/tooltip/tp-tooltip-trigger.ts","webpack://@travelopia/web-components/./src/tooltip/tp-tooltip-arrow.ts","webpack://@travelopia/web-components/./src/tooltip/index.ts"],"sourcesContent":["/**\n * Internal dependencies.\n */\nimport { TPTooltipTrigger } from './tp-tooltip-trigger';\nimport { TPTooltipArrow } from './tp-tooltip-arrow';\n\n/**\n * TP Tooltip.\n */\nexport class TPTooltip extends HTMLElement {\n\t/**\n\t * Properties.\n\t */\n\tprotected trigger: TPTooltipTrigger | null = null;\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Call parent's constructor.\n\t\tsuper();\n\n\t\t// Make the tooltip a popover.\n\t\tthis.makePopover();\n\t}\n\n\t/**\n\t * Get offset.\n\t */\n\tget offset(): number {\n\t\t// Get the offset.\n\t\treturn parseInt( this.getAttribute( 'offset' ) ?? '0' );\n\t}\n\n\t/**\n\t * Set offset.\n\t */\n\tset offset( offset: number ) {\n\t\t// Set or remove offset.\n\t\tif ( ! offset ) {\n\t\t\tthis.removeAttribute( 'offset' );\n\t\t} else {\n\t\t\tthis.setAttribute( 'offset', offset.toString() );\n\t\t}\n\t}\n\n\t/**\n\t * Make this tooltip a popover, if it isn't already.\n\t */\n\tmakePopover(): void {\n\t\t// Check if this isn't already a popover.\n\t\tif ( ! this.getAttribute( 'popover' ) ) {\n\t\t\tthis.setAttribute( 'popover', '' );\n\t\t}\n\t}\n\n\t/**\n\t * Set the trigger.\n\t *\n\t * @param {HTMLElement} trigger The trigger node.\n\t */\n\tsetTrigger( trigger: TPTooltipTrigger ): void {\n\t\t// Set the trigger.\n\t\tthis.trigger = trigger;\n\t}\n\n\t/**\n\t * Set the content for our tooltip.\n\t */\n\tsetContent(): void {\n\t\t// Get content.\n\t\tconst content: Node | null = this.trigger?.getContent() ?? null;\n\n\t\t// Check if we have content.\n\t\tif ( content ) {\n\t\t\t// Yes, replace slot's children with new content.\n\t\t\tthis.querySelector( 'slot' )?.replaceChildren( content );\n\t\t}\n\t}\n\n\t/**\n\t * Set the position of the tooltip.\n\t */\n\tsetPosition(): void {\n\t\t// Do we have a trigger?\n\t\tif ( ! this.trigger ) {\n\t\t\t// We don't, bail!\n\t\t\treturn;\n\t\t}\n\n\t\t// Get width and height of this tooltip.\n\t\tconst { height: tooltipHeight, width: tooltipWidth } = this.getBoundingClientRect();\n\n\t\t// Get position and coordinates of the trigger.\n\t\tconst { x: triggerLeftPosition, y: triggerTopPosition, width: triggerWidth, height: triggerHeight } = this.trigger.getBoundingClientRect();\n\n\t\t// Trigger center from left edge of screen.\n\t\tconst triggerCenterPosition = triggerLeftPosition + ( triggerWidth / 2 );\n\n\t\t// Get arrow dimensions.\n\t\tlet arrowHeight: number = 0;\n\t\tconst arrow: TPTooltipArrow | null = this.querySelector( 'tp-tooltip-arrow' );\n\n\t\t// Check if we have an arrow.\n\t\tif ( arrow ) {\n\t\t\t( { height: arrowHeight } = arrow.getBoundingClientRect() );\n\t\t}\n\n\t\t// Determine the vertical position of this tooltip.\n\t\tif ( triggerTopPosition > tooltipHeight + this.offset + arrowHeight ) {\n\t\t\t// There is enough space on top of trigger element, so place popover above the trigger element.\n\t\t\tthis.style.marginTop = `${ triggerTopPosition - tooltipHeight - this.offset - ( arrowHeight / 2 ) }px`;\n\n\t\t\t// Set arrow placement on bottom of popover\n\t\t\tarrow?.setAttribute( 'position', 'bottom' );\n\t\t} else {\n\t\t\t// There is not enough space on top of trigger element, so place popover below the trigger element.\n\t\t\tthis.style.marginTop = `${ triggerTopPosition + triggerHeight + this.offset + ( arrowHeight / 2 ) }px`;\n\n\t\t\t// Set arrow placement on top of popover\n\t\t\tarrow?.setAttribute( 'position', 'top' );\n\t\t}\n\n\t\t// Determine the horizontal position of this tooltip.\n\t\tif ( triggerCenterPosition < ( tooltipWidth / 2 ) ) {\n\t\t\t// There is not enough space on left of trigger element, so place popover at the left edge of the screen.\n\t\t\tthis.style.marginLeft = '0px';\n\t\t} else if ( window.innerWidth - triggerCenterPosition < ( tooltipWidth / 2 ) ) {\n\t\t\t// There is not enough space on right of trigger element, so place popover at the right edge of the screen.\n\t\t\tthis.style.marginLeft = `${ window.innerWidth - tooltipWidth }px`;\n\t\t} else {\n\t\t\t// There is enough space on both sides of trigger element, so place popover at the center of the trigger element.\n\t\t\tthis.style.marginLeft = `${ triggerLeftPosition + ( triggerWidth / 2 ) - ( tooltipWidth / 2 ) }px`;\n\t\t}\n\n\t\t// Get left position of the tooltip.\n\t\tconst { left: tooltipLeftPosition } = this.getBoundingClientRect();\n\n\t\t// Percentage the arrow should be moved from left edge of the tooltip.\n\t\tconst arrowPosition = ( ( triggerCenterPosition - tooltipLeftPosition ) / tooltipWidth ) * 100;\n\n\t\t// Set the arrow position.\n\t\tif ( arrow ) {\n\t\t\tarrow.style.left = `${ arrowPosition }%`;\n\t\t}\n\t}\n\n\t/**\n\t * Show the tooltip.\n\t */\n\tshow(): void {\n\t\t// Position tooltip and show it.\n\t\tthis.setContent();\n\n\t\t// Show the tooltip.\n\t\tthis.showPopover();\n\t\tthis.setPosition();\n\t\tthis.setAttribute( 'show', 'yes' );\n\n\t\t// Trigger event.\n\t\tthis.dispatchEvent( new CustomEvent( 'show' ) );\n\t}\n\n\t/**\n\t * Hide the tooltip.\n\t */\n\thide(): void {\n\t\t// Hide the tooltip.\n\t\tthis.hidePopover();\n\t\tthis.removeAttribute( 'show' );\n\n\t\t// Trigger event.\n\t\tthis.dispatchEvent( new CustomEvent( 'hide' ) );\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPTooltip } from './tp-tooltip';\n\n/**\n * TP Tooltip Trigger.\n */\nexport class TPTooltipTrigger extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Call parent's constructor.\n\t\tsuper();\n\n\t\t// Check if touch device.\n\t\tif ( navigator.maxTouchPoints > 0 ) {\n\t\t\t// Yes it is, toggle tooltip on click.\n\t\t\tthis.addEventListener( 'click', this.toggleTooltip.bind( this ) );\n\t\t} else {\n\t\t\t// Else add event listeners for mouse.\n\t\t\tthis.addEventListener( 'mouseenter', this.showTooltip.bind( this ) );\n\t\t\tthis.addEventListener( 'mouseleave', this.hideTooltip.bind( this ) );\n\t\t}\n\n\t\t// On window scroll, hide tooltip.\n\t\twindow.addEventListener( 'scroll', this.handleWindowScroll.bind( this ), true );\n\t}\n\n\t/**\n\t * Toggle the tooltip.\n\t */\n\ttoggleTooltip(): void {\n\t\t// Get the tooltip.\n\t\tconst tooltipId: string = this.getAttribute( 'tooltip' ) ?? '';\n\n\t\t// Check if we have a tooltip.\n\t\tif ( '' === tooltipId ) {\n\t\t\t// We don't, bail.\n\t\t\treturn;\n\t\t}\n\n\t\t// Find the tooltip.\n\t\tconst tooltip: TPTooltip | null = document.querySelector( `#${ tooltipId }` );\n\n\t\t// Check if the tooltip is already shown.\n\t\tif ( 'yes' === tooltip?.getAttribute( 'show' ) ) {\n\t\t\t// It is, hide it.\n\t\t\ttooltip?.hide();\n\t\t} else {\n\t\t\t// It isn't, show it.\n\t\t\ttooltip?.setTrigger( this );\n\t\t\ttooltip?.show();\n\t\t}\n\t}\n\n\t/**\n\t * Show the tooltip.\n\t */\n\tshowTooltip(): void {\n\t\t// Get the tooltip.\n\t\tconst tooltipId: string = this.getAttribute( 'tooltip' ) ?? '';\n\n\t\t// Check if we have a tooltip.\n\t\tif ( '' === tooltipId ) {\n\t\t\t// We don't, bail.\n\t\t\treturn;\n\t\t}\n\n\t\t// Find and show the tooltip with its content.\n\t\tconst tooltip: TPTooltip | null = document.querySelector( `#${ tooltipId }` );\n\t\ttooltip?.setTrigger( this );\n\t\ttooltip?.show();\n\t}\n\n\t/**\n\t * Hide the tooltip.\n\t */\n\thideTooltip(): void {\n\t\t// Get the tooltip.\n\t\tconst tooltipId: string = this.getAttribute( 'tooltip' ) ?? '';\n\n\t\t// Check if we have a tooltip.\n\t\tif ( '' === tooltipId ) {\n\t\t\t// We don't, bail.\n\t\t\treturn;\n\t\t}\n\n\t\t// Find and hide the tooltip.\n\t\tconst tooltip: TPTooltip | null = document.querySelector( `#${ tooltipId }` );\n\t\ttooltip?.hide();\n\t}\n\n\t/**\n\t * Get the content of the tooltip.\n\t *\n\t * @return {Node|null} The content of the tooltip.\n\t */\n\tgetContent(): Node | null {\n\t\t// Find template for content.\n\t\tconst template: HTMLTemplateElement | null = this.querySelector( 'template' );\n\n\t\t// Check if we found a template.\n\t\tif ( template ) {\n\t\t\t// We did, return its content.\n\t\t\treturn template.content.cloneNode( true );\n\t\t}\n\n\t\t// No template found, return null.\n\t\treturn null;\n\t}\n\n\t/**\n\t * Handles the scroll outside of the tooltip.\n\t *\n\t * @param { Event } evt The event object.\n\t */\n\thandleWindowScroll( evt: Event ) {\n\t\t// Get the tooltip.\n\t\tconst tooltipId: string = this.getAttribute( 'tooltip' ) ?? '';\n\t\tconst tooltip: TPTooltip | null = document.querySelector( `#${ tooltipId }` );\n\n\t\t// If the content was the original target.\n\t\tif ( evt.target === tooltip ) {\n\t\t\t// Do nothing.\n\t\t\treturn;\n\t\t}\n\n\t\t// Hide the popover\n\t\tthis.hideTooltip();\n\t}\n}\n","/**\n * TP Tooltip Arrow.\n */\nexport class TPTooltipArrow extends HTMLElement {\n}\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Components.\n */\nimport { TPTooltip } from './tp-tooltip';\nimport { TPTooltipTrigger } from './tp-tooltip-trigger';\nimport { TPTooltipArrow } from './tp-tooltip-arrow';\n\n/**\n * Register Components.\n */\ncustomElements.define( 'tp-tooltip', TPTooltip );\ncustomElements.define( 'tp-tooltip-trigger', TPTooltipTrigger );\ncustomElements.define( 'tp-tooltip-arrow', TPTooltipArrow );\n"],"names":["TPTooltip","HTMLElement","constructor","super","trigger","this","makePopover","offset","parseInt","getAttribute","setAttribute","toString","removeAttribute","setTrigger","setContent","content","getContent","querySelector","replaceChildren","setPosition","height","tooltipHeight","width","tooltipWidth","getBoundingClientRect","x","triggerLeftPosition","y","triggerTopPosition","triggerWidth","triggerHeight","triggerCenterPosition","arrowHeight","arrow","style","marginTop","marginLeft","window","innerWidth","left","tooltipLeftPosition","arrowPosition","show","showPopover","dispatchEvent","CustomEvent","hide","hidePopover","TPTooltipTrigger","navigator","maxTouchPoints","addEventListener","toggleTooltip","bind","showTooltip","hideTooltip","handleWindowScroll","tooltipId","tooltip","document","template","cloneNode","evt","target","TPTooltipArrow","customElements","define"],"sourceRoot":""}
+{"version":3,"file":"dist/tooltip/index.js","mappings":"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","sources":["webpack://@travelopia/web-components/./src/tooltip/tp-tooltip.ts","webpack://@travelopia/web-components/./src/tooltip/tp-tooltip-trigger.ts","webpack://@travelopia/web-components/./src/tooltip/tp-tooltip-arrow.ts","webpack://@travelopia/web-components/./src/tooltip/index.ts"],"sourcesContent":["/**\n * Internal dependencies.\n */\nimport { TPTooltipTrigger } from './tp-tooltip-trigger';\nimport { TPTooltipArrow } from './tp-tooltip-arrow';\n\n/**\n * TP Tooltip.\n */\nexport class TPTooltip extends HTMLElement {\n\t/**\n\t * Properties.\n\t */\n\tprotected trigger: TPTooltipTrigger | null = null;\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Call parent's constructor.\n\t\tsuper();\n\n\t\t// Make the tooltip a popover.\n\t\tthis.makePopover();\n\t}\n\n\t/**\n\t * Connected callback.\n\t */\n\tconnectedCallback(): void {\n\t\t// Set up ARIA attributes.\n\t\tthis.setupAria();\n\t}\n\n\t/**\n\t * Check if ARIA management is enabled.\n\t *\n\t * @return {boolean} Whether ARIA is enabled.\n\t */\n\tisAriaEnabled(): boolean {\n\t\t// Return whether ARIA management is enabled (default: yes).\n\t\treturn 'no' !== this.getAttribute( 'aria' );\n\t}\n\n\t/**\n\t * Set up ARIA attributes.\n\t */\n\tsetupAria(): void {\n\t\t// Check if ARIA is enabled.\n\t\tif ( ! this.isAriaEnabled() ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Auto-generate ID if not present.\n\t\tif ( ! this.id ) {\n\t\t\tthis.id = `tp-tooltip-${ crypto.randomUUID() }`;\n\t\t}\n\n\t\t// Set role=\"tooltip\" if not already set.\n\t\tif ( ! this.hasAttribute( 'role' ) ) {\n\t\t\tthis.setAttribute( 'role', 'tooltip' );\n\t\t}\n\t}\n\n\t/**\n\t * Get offset.\n\t */\n\tget offset(): number {\n\t\t// Get the offset.\n\t\treturn parseInt( this.getAttribute( 'offset' ) ?? '0' );\n\t}\n\n\t/**\n\t * Set offset.\n\t */\n\tset offset( offset: number ) {\n\t\t// Set or remove offset.\n\t\tif ( ! offset ) {\n\t\t\tthis.removeAttribute( 'offset' );\n\t\t} else {\n\t\t\tthis.setAttribute( 'offset', offset.toString() );\n\t\t}\n\t}\n\n\t/**\n\t * Make this tooltip a popover, if it isn't already.\n\t */\n\tmakePopover(): void {\n\t\t// Check if this isn't already a popover.\n\t\tif ( ! this.getAttribute( 'popover' ) ) {\n\t\t\tthis.setAttribute( 'popover', '' );\n\t\t}\n\t}\n\n\t/**\n\t * Set the trigger.\n\t *\n\t * @param {HTMLElement} trigger The trigger node.\n\t */\n\tsetTrigger( trigger: TPTooltipTrigger ): void {\n\t\t// Set the trigger.\n\t\tthis.trigger = trigger;\n\t}\n\n\t/**\n\t * Set the content for our tooltip.\n\t */\n\tsetContent(): void {\n\t\t// Get content.\n\t\tconst content: Node | null = this.trigger?.getContent() ?? null;\n\n\t\t// Check if we have content.\n\t\tif ( content ) {\n\t\t\t// Yes, replace slot's children with new content.\n\t\t\tthis.querySelector( 'slot' )?.replaceChildren( content );\n\t\t}\n\t}\n\n\t/**\n\t * Set the position of the tooltip.\n\t */\n\tsetPosition(): void {\n\t\t// Do we have a trigger?\n\t\tif ( ! this.trigger ) {\n\t\t\t// We don't, bail!\n\t\t\treturn;\n\t\t}\n\n\t\t// Get width and height of this tooltip.\n\t\tconst { height: tooltipHeight, width: tooltipWidth } = this.getBoundingClientRect();\n\n\t\t// Get position and coordinates of the trigger.\n\t\tconst { x: triggerLeftPosition, y: triggerTopPosition, width: triggerWidth, height: triggerHeight } = this.trigger.getBoundingClientRect();\n\n\t\t// Trigger center from left edge of screen.\n\t\tconst triggerCenterPosition = triggerLeftPosition + ( triggerWidth / 2 );\n\n\t\t// Get arrow dimensions.\n\t\tlet arrowHeight: number = 0;\n\t\tconst arrow: TPTooltipArrow | null = this.querySelector( 'tp-tooltip-arrow' );\n\n\t\t// Check if we have an arrow.\n\t\tif ( arrow ) {\n\t\t\t( { height: arrowHeight } = arrow.getBoundingClientRect() );\n\t\t}\n\n\t\t// Determine the vertical position of this tooltip.\n\t\tif ( triggerTopPosition > tooltipHeight + this.offset + arrowHeight ) {\n\t\t\t// There is enough space on top of trigger element, so place popover above the trigger element.\n\t\t\tthis.style.marginTop = `${ triggerTopPosition - tooltipHeight - this.offset - ( arrowHeight / 2 ) }px`;\n\n\t\t\t// Set arrow placement on bottom of popover\n\t\t\tarrow?.setAttribute( 'position', 'bottom' );\n\t\t} else {\n\t\t\t// There is not enough space on top of trigger element, so place popover below the trigger element.\n\t\t\tthis.style.marginTop = `${ triggerTopPosition + triggerHeight + this.offset + ( arrowHeight / 2 ) }px`;\n\n\t\t\t// Set arrow placement on top of popover\n\t\t\tarrow?.setAttribute( 'position', 'top' );\n\t\t}\n\n\t\t// Determine the horizontal position of this tooltip.\n\t\tif ( triggerCenterPosition < ( tooltipWidth / 2 ) ) {\n\t\t\t// There is not enough space on left of trigger element, so place popover at the left edge of the screen.\n\t\t\tthis.style.marginLeft = '0px';\n\t\t} else if ( window.innerWidth - triggerCenterPosition < ( tooltipWidth / 2 ) ) {\n\t\t\t// There is not enough space on right of trigger element, so place popover at the right edge of the screen.\n\t\t\tthis.style.marginLeft = `${ window.innerWidth - tooltipWidth }px`;\n\t\t} else {\n\t\t\t// There is enough space on both sides of trigger element, so place popover at the center of the trigger element.\n\t\t\tthis.style.marginLeft = `${ triggerLeftPosition + ( triggerWidth / 2 ) - ( tooltipWidth / 2 ) }px`;\n\t\t}\n\n\t\t// Get left position of the tooltip.\n\t\tconst { left: tooltipLeftPosition } = this.getBoundingClientRect();\n\n\t\t// Percentage the arrow should be moved from left edge of the tooltip.\n\t\tconst arrowPosition = ( ( triggerCenterPosition - tooltipLeftPosition ) / tooltipWidth ) * 100;\n\n\t\t// Set the arrow position.\n\t\tif ( arrow ) {\n\t\t\tarrow.style.left = `${ arrowPosition }%`;\n\t\t}\n\t}\n\n\t/**\n\t * Show the tooltip.\n\t */\n\tshow(): void {\n\t\t// Position tooltip and show it.\n\t\tthis.setContent();\n\n\t\t// Show the tooltip.\n\t\tthis.showPopover();\n\t\tthis.setPosition();\n\t\tthis.setAttribute( 'show', 'yes' );\n\n\t\t// Trigger event.\n\t\tthis.dispatchEvent( new CustomEvent( 'show' ) );\n\t}\n\n\t/**\n\t * Hide the tooltip.\n\t */\n\thide(): void {\n\t\t// Hide the tooltip.\n\t\tthis.hidePopover();\n\t\tthis.removeAttribute( 'show' );\n\n\t\t// Trigger event.\n\t\tthis.dispatchEvent( new CustomEvent( 'hide' ) );\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPTooltip } from './tp-tooltip';\n\n/**\n * TP Tooltip Trigger.\n */\nexport class TPTooltipTrigger extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Call parent's constructor.\n\t\tsuper();\n\n\t\t// Check if touch device.\n\t\tif ( navigator.maxTouchPoints > 0 ) {\n\t\t\t// Yes it is, toggle tooltip on click.\n\t\t\tthis.addEventListener( 'click', this.toggleTooltip.bind( this ) );\n\t\t} else {\n\t\t\t// Else add event listeners for mouse.\n\t\t\tthis.addEventListener( 'mouseenter', this.showTooltip.bind( this ) );\n\t\t\tthis.addEventListener( 'mouseleave', this.hideTooltip.bind( this ) );\n\t\t}\n\n\t\t// Add focus/blur for keyboard accessibility.\n\t\tthis.addEventListener( 'focusin', this.showTooltip.bind( this ) );\n\t\tthis.addEventListener( 'focusout', this.hideTooltip.bind( this ) );\n\n\t\t// Add Escape key to dismiss.\n\t\tthis.addEventListener( 'keydown', this.handleKeyDown.bind( this ) );\n\n\t\t// On window scroll, hide tooltip.\n\t\twindow.addEventListener( 'scroll', this.handleWindowScroll.bind( this ), true );\n\t}\n\n\t/**\n\t * Connected callback.\n\t */\n\tconnectedCallback(): void {\n\t\t// Set up ARIA attributes.\n\t\tthis.setupAria();\n\t}\n\n\t/**\n\t * Check if ARIA management is enabled.\n\t *\n\t * @return {boolean} Whether ARIA is enabled.\n\t */\n\tisAriaEnabled(): boolean {\n\t\t// Get the tooltip and check its aria attribute.\n\t\tconst tooltip = this.getTooltip();\n\n\t\t// Return whether ARIA management is enabled (default: yes).\n\t\treturn 'no' !== tooltip?.getAttribute( 'aria' );\n\t}\n\n\t/**\n\t * Get the tooltip element.\n\t *\n\t * @return {TPTooltip|null} The tooltip element.\n\t */\n\tgetTooltip(): TPTooltip | null {\n\t\t// Get the tooltip ID from attribute.\n\t\tconst tooltipId: string = this.getAttribute( 'tooltip' ) ?? '';\n\n\t\t// Bail if no tooltip ID.\n\t\tif ( '' === tooltipId ) {\n\t\t\t// Return null.\n\t\t\treturn null;\n\t\t}\n\n\t\t// Return the tooltip element.\n\t\treturn document.querySelector( `#${ tooltipId }` );\n\t}\n\n\t/**\n\t * Get the trigger element (focusable child).\n\t *\n\t * @return {HTMLElement|null} The trigger element.\n\t */\n\tgetTriggerElement(): HTMLElement | null {\n\t\t// Return the first focusable element.\n\t\treturn this.querySelector( 'a, button, [tabindex]' );\n\t}\n\n\t/**\n\t * Set up ARIA attributes.\n\t */\n\tsetupAria(): void {\n\t\t// Check if ARIA is enabled.\n\t\tif ( ! this.isAriaEnabled() ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get tooltip and trigger elements.\n\t\tconst tooltip = this.getTooltip();\n\t\tconst triggerElement = this.getTriggerElement();\n\n\t\t// Set aria-describedby on the trigger element.\n\t\tif ( tooltip && triggerElement && ! triggerElement.hasAttribute( 'aria-describedby' ) ) {\n\t\t\ttriggerElement.setAttribute( 'aria-describedby', tooltip.id );\n\t\t}\n\t}\n\n\t/**\n\t * Handle keydown events.\n\t *\n\t * @param {KeyboardEvent} event The keyboard event.\n\t */\n\thandleKeyDown( event: KeyboardEvent ): void {\n\t\t// Escape key closes the tooltip.\n\t\tif ( 'Escape' === event.key ) {\n\t\t\tthis.hideTooltip();\n\t\t}\n\t}\n\n\t/**\n\t * Toggle the tooltip.\n\t */\n\ttoggleTooltip(): void {\n\t\t// Get the tooltip.\n\t\tconst tooltipId: string = this.getAttribute( 'tooltip' ) ?? '';\n\n\t\t// Check if we have a tooltip.\n\t\tif ( '' === tooltipId ) {\n\t\t\t// We don't, bail.\n\t\t\treturn;\n\t\t}\n\n\t\t// Find the tooltip.\n\t\tconst tooltip: TPTooltip | null = document.querySelector( `#${ tooltipId }` );\n\n\t\t// Check if the tooltip is already shown.\n\t\tif ( 'yes' === tooltip?.getAttribute( 'show' ) ) {\n\t\t\t// It is, hide it.\n\t\t\ttooltip?.hide();\n\t\t} else {\n\t\t\t// It isn't, show it.\n\t\t\ttooltip?.setTrigger( this );\n\t\t\ttooltip?.show();\n\t\t}\n\t}\n\n\t/**\n\t * Show the tooltip.\n\t */\n\tshowTooltip(): void {\n\t\t// Get the tooltip.\n\t\tconst tooltipId: string = this.getAttribute( 'tooltip' ) ?? '';\n\n\t\t// Check if we have a tooltip.\n\t\tif ( '' === tooltipId ) {\n\t\t\t// We don't, bail.\n\t\t\treturn;\n\t\t}\n\n\t\t// Find and show the tooltip with its content.\n\t\tconst tooltip: TPTooltip | null = document.querySelector( `#${ tooltipId }` );\n\t\ttooltip?.setTrigger( this );\n\t\ttooltip?.show();\n\t}\n\n\t/**\n\t * Hide the tooltip.\n\t */\n\thideTooltip(): void {\n\t\t// Get the tooltip.\n\t\tconst tooltipId: string = this.getAttribute( 'tooltip' ) ?? '';\n\n\t\t// Check if we have a tooltip.\n\t\tif ( '' === tooltipId ) {\n\t\t\t// We don't, bail.\n\t\t\treturn;\n\t\t}\n\n\t\t// Find and hide the tooltip.\n\t\tconst tooltip: TPTooltip | null = document.querySelector( `#${ tooltipId }` );\n\t\ttooltip?.hide();\n\t}\n\n\t/**\n\t * Get the content of the tooltip.\n\t *\n\t * @return {Node|null} The content of the tooltip.\n\t */\n\tgetContent(): Node | null {\n\t\t// Find template for content.\n\t\tconst template: HTMLTemplateElement | null = this.querySelector( 'template' );\n\n\t\t// Check if we found a template.\n\t\tif ( template ) {\n\t\t\t// We did, return its content.\n\t\t\treturn template.content.cloneNode( true );\n\t\t}\n\n\t\t// No template found, return null.\n\t\treturn null;\n\t}\n\n\t/**\n\t * Handles the scroll outside of the tooltip.\n\t *\n\t * @param { Event } evt The event object.\n\t */\n\thandleWindowScroll( evt: Event ) {\n\t\t// Get the tooltip.\n\t\tconst tooltipId: string = this.getAttribute( 'tooltip' ) ?? '';\n\t\tconst tooltip: TPTooltip | null = document.querySelector( `#${ tooltipId }` );\n\n\t\t// If the content was the original target.\n\t\tif ( evt.target === tooltip ) {\n\t\t\t// Do nothing.\n\t\t\treturn;\n\t\t}\n\n\t\t// Hide the popover\n\t\tthis.hideTooltip();\n\t}\n}\n","/**\n * TP Tooltip Arrow.\n */\nexport class TPTooltipArrow extends HTMLElement {\n}\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Components.\n */\nimport { TPTooltip } from './tp-tooltip';\nimport { TPTooltipTrigger } from './tp-tooltip-trigger';\nimport { TPTooltipArrow } from './tp-tooltip-arrow';\n\n/**\n * Register Components.\n */\ncustomElements.define( 'tp-tooltip', TPTooltip );\ncustomElements.define( 'tp-tooltip-trigger', TPTooltipTrigger );\ncustomElements.define( 'tp-tooltip-arrow', TPTooltipArrow );\n"],"names":["TPTooltip","HTMLElement","constructor","super","trigger","this","makePopover","connectedCallback","setupAria","isAriaEnabled","getAttribute","id","crypto","randomUUID","hasAttribute","setAttribute","offset","parseInt","toString","removeAttribute","setTrigger","setContent","content","getContent","querySelector","replaceChildren","setPosition","height","tooltipHeight","width","tooltipWidth","getBoundingClientRect","x","triggerLeftPosition","y","triggerTopPosition","triggerWidth","triggerHeight","triggerCenterPosition","arrowHeight","arrow","style","marginTop","marginLeft","window","innerWidth","left","tooltipLeftPosition","arrowPosition","show","showPopover","dispatchEvent","CustomEvent","hide","hidePopover","TPTooltipTrigger","navigator","maxTouchPoints","addEventListener","toggleTooltip","bind","showTooltip","hideTooltip","handleKeyDown","handleWindowScroll","tooltip","getTooltip","tooltipId","document","getTriggerElement","triggerElement","event","key","template","cloneNode","evt","target","TPTooltipArrow","customElements","define"],"sourceRoot":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@travelopia/web-components",
-  "version": "0.9.7",
+  "version": "0.9.8",
   "description": "Accessible web components for the modern web",
   "files": [
     "dist"