@substrate-system/tool-tip 0.0.1 → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -6
- package/dist/index.cjs +2 -4
- package/dist/index.cjs.map +2 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -4
- package/dist/index.js.map +2 -2
- package/dist/index.min.js +2 -2
- package/dist/index.min.js.map +4 -4
- package/dist/meta.json +11 -5
- package/package.json +4 -2
package/README.md
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
# tool-tip
|
|
2
|
-
](https://github.com/substrate-system/tool-tip/actions/workflows/nodejs.yml)
|
|
3
3
|
[](README.md)
|
|
4
4
|
[](README.md)
|
|
5
5
|
[](https://packagephobia.com/result?p=@bicycle-codes/keys)
|
|
6
|
-
[](package.json)
|
|
6
|
+
[](https://esm.sh/@substrate-system/tool-tip/es2022/tool-tip.mjs)
|
|
8
7
|
[](https://semver.org/)
|
|
9
8
|
[](./CHANGELOG.md)
|
|
10
9
|
[](LICENSE)
|
|
@@ -73,16 +72,21 @@ import '@substrate-system/tool-tip/min/css'
|
|
|
73
72
|
This calls the global function `customElements.define`. Just import, then use
|
|
74
73
|
the tag in your HTML.
|
|
75
74
|
|
|
75
|
+
The target, or the element with the tooltip, should be the child of a
|
|
76
|
+
`tool-tip` element.
|
|
77
|
+
|
|
76
78
|
### JS
|
|
79
|
+
|
|
77
80
|
```js
|
|
78
81
|
import '@substrate-system/tool-tip'
|
|
79
82
|
```
|
|
80
83
|
|
|
81
84
|
### HTML
|
|
82
85
|
```html
|
|
83
|
-
<
|
|
84
|
-
|
|
85
|
-
</
|
|
86
|
+
<tool-tip content="This is a tooltip">
|
|
87
|
+
<!-- put the target as a child of tool-tip -->
|
|
88
|
+
<button>Hover me</button>
|
|
89
|
+
</tool-tip>
|
|
86
90
|
```
|
|
87
91
|
|
|
88
92
|
### pre-built
|
package/dist/index.cjs
CHANGED
|
@@ -22,6 +22,7 @@ __export(index_exports, {
|
|
|
22
22
|
ToolTip: () => ToolTip
|
|
23
23
|
});
|
|
24
24
|
module.exports = __toCommonJS(index_exports);
|
|
25
|
+
var import_util = require("@substrate-system/web-component/util");
|
|
25
26
|
class ToolTip extends HTMLElement {
|
|
26
27
|
static {
|
|
27
28
|
__name(this, "ToolTip");
|
|
@@ -185,7 +186,6 @@ class ToolTip extends HTMLElement {
|
|
|
185
186
|
if (!this.target) return;
|
|
186
187
|
this.target.removeEventListener("mouseenter", this.handleMouseEnter);
|
|
187
188
|
this.target.removeEventListener("mouseleave", this.handleMouseLeave);
|
|
188
|
-
this.target.removeEventListener("focus", this.handleFocus);
|
|
189
189
|
this.target.removeEventListener("blur", this.handleBlur);
|
|
190
190
|
this.target.removeEventListener("click", this.handleClick);
|
|
191
191
|
this.target.removeEventListener("keydown", this.handleKeyDown);
|
|
@@ -401,7 +401,5 @@ class ToolTip extends HTMLElement {
|
|
|
401
401
|
this.open = false;
|
|
402
402
|
}
|
|
403
403
|
}
|
|
404
|
-
|
|
405
|
-
customElements.define("tool-tip", ToolTip);
|
|
406
|
-
}
|
|
404
|
+
(0, import_util.define)("tool-tip", ToolTip);
|
|
407
405
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/index.ts"],
|
|
4
|
-
"sourcesContent": ["// for document.querySelector\ndeclare global {\n interface HTMLElementTagNameMap {\n 'tool-tip':ToolTip\n }\n}\n\nexport type Placement =\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'left'\n | 'left-start'\n | 'left-end'\n\nexport type Trigger = 'hover'|'focus'|'click'|'manual'\n\nexport class ToolTip extends HTMLElement {\n static observedAttributes = ['content', 'placement', 'disabled',\n 'open', 'distance', 'skidding']\n\n private popup:HTMLDivElement|null = null\n private arrow:HTMLDivElement|null = null\n private target:HTMLElement|null = null\n\n private _open = false\n private _disabled = false\n\n get content ():string {\n return this.getAttribute('content') || ''\n }\n\n set content (value:string) {\n this.setAttribute('content', value)\n }\n\n get placement ():Placement {\n return (this.getAttribute('placement') as Placement) || 'top'\n }\n\n set placement (value:Placement) {\n this.setAttribute('placement', value)\n }\n\n get trigger ():Trigger[] {\n const attr = this.getAttribute('trigger') || 'hover focus'\n return attr.split(' ').filter(Boolean) as Trigger[]\n }\n\n set trigger (value:Trigger[]|string) {\n if (Array.isArray(value)) {\n this.setAttribute('trigger', value.join(' '))\n } else {\n this.setAttribute('trigger', value)\n }\n }\n\n get disabled (): boolean {\n return this._disabled\n }\n\n set disabled (value: boolean) {\n this._disabled = value\n if (value) {\n this.setAttribute('disabled', '')\n } else {\n this.removeAttribute('disabled')\n }\n }\n\n get open (): boolean {\n return this._open\n }\n\n set open (value: boolean) {\n if (this._disabled) return\n const wasOpen = this._open\n this._open = value\n\n if (value && !wasOpen) {\n this.showTooltip()\n } else if (!value && wasOpen) {\n this.hideTooltip()\n }\n }\n\n get distance (): number {\n return parseInt(this.getAttribute('distance') || '8', 10)\n }\n\n set distance (value: number) {\n this.setAttribute('distance', String(value))\n }\n\n get skidding (): number {\n return parseInt(this.getAttribute('skidding') || '0', 10)\n }\n\n set skidding (value: number) {\n this.setAttribute('skidding', String(value))\n }\n\n get hoist (): boolean {\n return this.hasAttribute('hoist')\n }\n\n set hoist (value: boolean) {\n if (value) {\n this.setAttribute('hoist', '')\n } else {\n this.removeAttribute('hoist')\n }\n }\n\n connectedCallback () {\n // Use display: contents so the tooltip doesn't affect layout\n this.style.display = 'contents'\n\n // Find the target element (first child element)\n this.target = this.firstElementChild as HTMLElement\n\n if (!this.target) {\n console.warn('tool-tip: No target element found. ' +\n 'Add a child element.')\n return\n }\n\n // Create the popup element\n this.createPopup()\n\n // Bind event handlers\n this.bindEvents()\n\n // Check if open attribute is set\n if (this.hasAttribute('open')) {\n this._open = true\n this.showTooltip()\n }\n }\n\n disconnectedCallback () {\n this.unbindEvents()\n this.popup?.remove()\n }\n\n attributeChangedCallback (\n name:string,\n _oldValue:string|null,\n newValue:string|null\n ) {\n if (name === 'content' && this.popup) {\n const body = this.popup.querySelector('.body')\n if (body) {\n body.textContent = newValue || ''\n }\n }\n\n if (name === 'placement' && this._open) {\n this.positionPopup()\n }\n\n if (name === 'disabled') {\n this._disabled = newValue !== null\n if (this._disabled && this._open) {\n this.hide()\n }\n }\n\n if (name === 'open') {\n this.open = newValue !== null\n }\n\n if ((name === 'distance' || name === 'skidding') && this._open) {\n this.positionPopup()\n }\n }\n\n private createPopup () {\n this.popup = document.createElement('div')\n this.popup.className = 'popup'\n this.popup.setAttribute('role', 'tooltip')\n this.popup.setAttribute('aria-hidden', 'true')\n this.popup.innerHTML = `\n <div class=\"body\">${this.content}</div>\n <div class=\"arrow\"></div>\n `\n\n this.arrow = this.popup.querySelector('.arrow')\n\n // Append to body if hoisted, otherwise to this element's parent\n if (this.hoist) {\n document.body.appendChild(this.popup)\n } else {\n this.appendChild(this.popup)\n }\n }\n\n private bindEvents () {\n if (!this.target) return\n\n const triggers = this.trigger\n\n if (triggers.includes('hover')) {\n this.target.addEventListener('mouseenter', this.handleMouseEnter)\n this.target.addEventListener('mouseleave', this.handleMouseLeave)\n }\n\n if (triggers.includes('focus')) {\n this.target.addEventListener('focus', this.handleFocus)\n this.target.addEventListener('blur', this.handleBlur)\n }\n\n if (triggers.includes('click')) {\n this.target.addEventListener('click', this.handleClick)\n }\n\n // Add keyboard support\n this.target.addEventListener('keydown', this.handleKeyDown)\n }\n\n private unbindEvents () {\n if (!this.target) return\n\n this.target.removeEventListener('mouseenter', this.handleMouseEnter)\n this.target.removeEventListener('mouseleave', this.handleMouseLeave)\n this.target.removeEventListener('focus', this.handleFocus)\n this.target.removeEventListener('blur', this.handleBlur)\n this.target.removeEventListener('click', this.handleClick)\n this.target.removeEventListener('keydown', this.handleKeyDown)\n }\n\n private handleMouseEnter = () => {\n this.show()\n }\n\n private handleMouseLeave = () => {\n this.hide()\n }\n\n private handleFocus = () => {\n this.show()\n }\n\n private handleBlur = () => {\n this.hide()\n }\n\n private handleClick = () => {\n if (this._open) {\n this.hide()\n } else {\n this.show()\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // Close tooltip on Escape\n if (event.key === 'Escape' && this._open) {\n this.hide()\n }\n }\n\n private showTooltip () {\n if (!this.popup || this._disabled) return\n\n // Emit show event\n const showEvent = new CustomEvent('tool-tip-show', {\n bubbles: true,\n cancelable: true,\n })\n if (!this.dispatchEvent(showEvent)) return\n\n this.popup.classList.add('visible')\n this.popup.setAttribute('aria-hidden', 'false')\n\n // Position the popup\n this.positionPopup()\n\n // Emit after-show event\n this.dispatchEvent(new CustomEvent('tool-tip-after-show', {\n bubbles: true\n }))\n }\n\n private hideTooltip () {\n if (!this.popup) return\n\n // Emit hide event\n const hideEvent = new CustomEvent('tool-tip-hide', {\n bubbles: true,\n cancelable: true,\n })\n if (!this.dispatchEvent(hideEvent)) return\n\n this.popup.classList.remove('visible')\n this.popup.setAttribute('aria-hidden', 'true')\n\n // Emit after-hide event\n this.dispatchEvent(new CustomEvent('tool-tip-after-hide', {\n bubbles: true\n }))\n }\n\n private positionPopup () {\n if (!this.popup || !this.target) return\n\n const targetRect = this.target.getBoundingClientRect()\n const popupRect = this.popup.getBoundingClientRect()\n const arrowSize = 8\n\n let top = 0\n let left = 0\n let arrowTop = ''\n let arrowLeft = ''\n let arrowTransform = ''\n\n const distance = this.distance\n const skidding = this.skidding\n const placement = this.getOptimalPlacement(targetRect, popupRect)\n\n // Set data attribute for CSS styling\n this.popup.dataset.placement = placement\n\n switch (placement) {\n case 'top':\n top = targetRect.top - popupRect.height - distance - arrowSize\n left = targetRect.left + (targetRect.width / 2) -\n (popupRect.width / 2) + skidding\n arrowTop = '100%'\n arrowLeft = '50%'\n arrowTransform = 'translateX(-50%)'\n break\n case 'top-start':\n top = targetRect.top - popupRect.height - distance - arrowSize\n left = targetRect.left + skidding\n arrowTop = '100%'\n arrowLeft = `${Math.min(24, popupRect.width / 2)}px`\n arrowTransform = 'translateX(-50%)'\n break\n case 'top-end':\n top = targetRect.top - popupRect.height - distance - arrowSize\n left = targetRect.right - popupRect.width + skidding\n arrowTop = '100%'\n arrowLeft = `calc(100% - ${Math.min(24, popupRect.width / 2)}px)`\n arrowTransform = 'translateX(-50%)'\n break\n case 'bottom':\n top = targetRect.bottom + distance + arrowSize\n left = targetRect.left + (targetRect.width / 2) -\n (popupRect.width / 2) + skidding\n arrowTop = '0'\n arrowLeft = '50%'\n arrowTransform = 'translateX(-50%) translateY(-100%)'\n break\n case 'bottom-start':\n top = targetRect.bottom + distance + arrowSize\n left = targetRect.left + skidding\n arrowTop = '0'\n arrowLeft = `${Math.min(24, popupRect.width / 2)}px`\n arrowTransform = 'translateX(-50%) translateY(-100%)'\n break\n case 'bottom-end':\n top = targetRect.bottom + distance + arrowSize\n left = targetRect.right - popupRect.width + skidding\n arrowTop = '0'\n arrowLeft = `calc(100% - ${Math.min(24, popupRect.width / 2)}px)`\n arrowTransform = 'translateX(-50%) translateY(-100%)'\n break\n case 'left':\n top = targetRect.top + (targetRect.height / 2) -\n (popupRect.height / 2) + skidding\n left = targetRect.left - popupRect.width - distance - arrowSize\n arrowTop = '50%'\n arrowLeft = '100%'\n arrowTransform = 'translateY(-50%)'\n break\n case 'left-start':\n top = targetRect.top + skidding\n left = targetRect.left - popupRect.width - distance - arrowSize\n arrowTop = `${Math.min(16, popupRect.height / 2)}px`\n arrowLeft = '100%'\n arrowTransform = 'translateY(-50%)'\n break\n case 'left-end':\n top = targetRect.bottom - popupRect.height + skidding\n left = targetRect.left - popupRect.width - distance - arrowSize\n arrowTop = `calc(100% - ${Math.min(16, popupRect.height / 2)}px)`\n arrowLeft = '100%'\n arrowTransform = 'translateY(-50%)'\n break\n case 'right':\n top = targetRect.top + (targetRect.height / 2) -\n (popupRect.height / 2) + skidding\n left = targetRect.right + distance + arrowSize\n arrowTop = '50%'\n arrowLeft = '0'\n arrowTransform = 'translateY(-50%) translateX(-100%)'\n break\n case 'right-start':\n top = targetRect.top + skidding\n left = targetRect.right + distance + arrowSize\n arrowTop = `${Math.min(16, popupRect.height / 2)}px`\n arrowLeft = '0'\n arrowTransform = 'translateY(-50%) translateX(-100%)'\n break\n case 'right-end':\n top = targetRect.bottom - popupRect.height + skidding\n left = targetRect.right + distance + arrowSize\n arrowTop = `calc(100% - ${Math.min(16, popupRect.height / 2)}px)`\n arrowLeft = '0'\n arrowTransform = 'translateY(-50%) translateX(-100%)'\n break\n }\n\n // Adjust for scroll position\n if (this.hoist) {\n top += window.scrollY\n left += window.scrollX\n }\n\n // Apply position\n this.popup.style.top = `${top}px`\n this.popup.style.left = `${left}px`\n\n // Position the arrow\n if (this.arrow) {\n this.arrow.style.top = arrowTop\n this.arrow.style.left = arrowLeft\n this.arrow.style.transform = arrowTransform\n }\n }\n\n private getOptimalPlacement (targetRect:DOMRect, popupRect:DOMRect):Placement {\n const placement = this.placement\n const viewportWidth = window.innerWidth\n const viewportHeight = window.innerHeight\n const distance = this.distance\n const arrowSize = 8\n\n // Check if the preferred placement fits\n const fits = {\n top: targetRect.top - popupRect.height - distance - arrowSize > 0,\n bottom: (targetRect.bottom + popupRect.height + distance +\n arrowSize < viewportHeight),\n left: targetRect.left - popupRect.width - distance - arrowSize > 0,\n right: (targetRect.right + popupRect.width + distance +\n arrowSize < viewportWidth),\n }\n\n // Get the base direction from the placement\n const baseDirection = placement.split('-')[0] as 'top'|\n 'bottom'|\n 'left'|\n 'right'\n\n // If preferred placement fits, use it\n if (fits[baseDirection]) {\n return placement\n }\n\n // Find the best alternative\n const opposites: Record<string, string> = {\n top: 'bottom',\n bottom: 'top',\n left: 'right',\n right: 'left',\n }\n\n const opposite = opposites[baseDirection] as\n 'top'|'bottom'|'left'|'right'\n if (fits[opposite]) {\n // Return the opposite with the same alignment\n const alignment = (placement.includes('-') ?\n placement.split('-')[1] :\n '')\n return (alignment ?\n `${opposite}-${alignment}` :\n opposite) as Placement\n }\n\n // Fall back to a direction that fits\n for (const dir of ['top', 'bottom', 'left', 'right'] as const) {\n if (fits[dir]) {\n return dir\n }\n }\n\n // If nothing fits, return original placement\n return placement\n }\n\n /**\n * Programmatically show the tooltip\n */\n show () {\n if (this._disabled) return\n this.open = true\n }\n\n /**\n * Programmatically hide the tooltip\n */\n hide () {\n this.open = false\n }\n}\n\nif ('customElements' in window) {\n customElements.define('tool-tip', ToolTip)\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { define } from '@substrate-system/web-component/util'\n\n// for document.querySelector\ndeclare global {\n interface HTMLElementTagNameMap {\n 'tool-tip':ToolTip\n }\n}\n\nexport type Placement =\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'left'\n | 'left-start'\n | 'left-end'\n\nexport type Trigger = 'hover'|'focus'|'click'|'manual'\n\nexport class ToolTip extends HTMLElement {\n static observedAttributes = ['content', 'placement', 'disabled',\n 'open', 'distance', 'skidding']\n\n private popup:HTMLDivElement|null = null\n private arrow:HTMLDivElement|null = null\n private target:HTMLElement|null = null\n\n private _open = false\n private _disabled = false\n\n get content ():string {\n return this.getAttribute('content') || ''\n }\n\n set content (value:string) {\n this.setAttribute('content', value)\n }\n\n get placement ():Placement {\n return (this.getAttribute('placement') as Placement) || 'top'\n }\n\n set placement (value:Placement) {\n this.setAttribute('placement', value)\n }\n\n get trigger ():Trigger[] {\n const attr = this.getAttribute('trigger') || 'hover focus'\n return attr.split(' ').filter(Boolean) as Trigger[]\n }\n\n set trigger (value:Trigger[]|string) {\n if (Array.isArray(value)) {\n this.setAttribute('trigger', value.join(' '))\n } else {\n this.setAttribute('trigger', value)\n }\n }\n\n get disabled (): boolean {\n return this._disabled\n }\n\n set disabled (value: boolean) {\n this._disabled = value\n if (value) {\n this.setAttribute('disabled', '')\n } else {\n this.removeAttribute('disabled')\n }\n }\n\n get open ():boolean {\n return this._open\n }\n\n set open (value:boolean) {\n if (this._disabled) return\n const wasOpen = this._open\n this._open = value\n\n if (value && !wasOpen) {\n this.showTooltip()\n } else if (!value && wasOpen) {\n this.hideTooltip()\n }\n }\n\n get distance ():number {\n return parseInt(this.getAttribute('distance') || '8', 10)\n }\n\n set distance (value:number) {\n this.setAttribute('distance', String(value))\n }\n\n get skidding ():number {\n return parseInt(this.getAttribute('skidding') || '0', 10)\n }\n\n set skidding (value:number) {\n this.setAttribute('skidding', String(value))\n }\n\n get hoist ():boolean {\n return this.hasAttribute('hoist')\n }\n\n set hoist (value:boolean) {\n if (value) {\n this.setAttribute('hoist', '')\n } else {\n this.removeAttribute('hoist')\n }\n }\n\n connectedCallback () {\n // Use display: contents so the tooltip doesn't affect layout\n this.style.display = 'contents'\n\n // Find the target element (first child element)\n this.target = this.firstElementChild as HTMLElement\n\n if (!this.target) {\n console.warn('tool-tip: No target element found. ' +\n 'Add a child element.')\n return\n }\n\n // Create the popup element\n this.createPopup()\n\n // Bind event handlers\n this.bindEvents()\n\n // Check if open attribute is set\n if (this.hasAttribute('open')) {\n this._open = true\n this.showTooltip()\n }\n }\n\n disconnectedCallback () {\n this.unbindEvents()\n this.popup?.remove()\n }\n\n attributeChangedCallback (\n name:string,\n _oldValue:string|null,\n newValue:string|null\n ) {\n if (name === 'content' && this.popup) {\n const body = this.popup.querySelector('.body')\n if (body) {\n body.textContent = newValue || ''\n }\n }\n\n if (name === 'placement' && this._open) {\n this.positionPopup()\n }\n\n if (name === 'disabled') {\n this._disabled = newValue !== null\n if (this._disabled && this._open) {\n this.hide()\n }\n }\n\n if (name === 'open') {\n this.open = newValue !== null\n }\n\n if ((name === 'distance' || name === 'skidding') && this._open) {\n this.positionPopup()\n }\n }\n\n private createPopup () {\n this.popup = document.createElement('div')\n this.popup.className = 'popup'\n this.popup.setAttribute('role', 'tooltip')\n this.popup.setAttribute('aria-hidden', 'true')\n this.popup.innerHTML = `\n <div class=\"body\">${this.content}</div>\n <div class=\"arrow\"></div>\n `\n\n this.arrow = this.popup.querySelector('.arrow')\n\n // Append to body if hoisted, otherwise to this element's parent\n if (this.hoist) {\n document.body.appendChild(this.popup)\n } else {\n this.appendChild(this.popup)\n }\n }\n\n private bindEvents () {\n if (!this.target) return\n\n const triggers = this.trigger\n\n if (triggers.includes('hover')) {\n this.target.addEventListener('mouseenter', this.handleMouseEnter)\n this.target.addEventListener('mouseleave', this.handleMouseLeave)\n }\n\n if (triggers.includes('focus')) {\n this.target.addEventListener('focus', this.handleFocus)\n this.target.addEventListener('blur', this.handleBlur)\n }\n\n if (triggers.includes('click')) {\n this.target.addEventListener('click', this.handleClick)\n }\n\n // Add keyboard support\n this.target.addEventListener('keydown', this.handleKeyDown)\n }\n\n private unbindEvents () {\n if (!this.target) return\n\n this.target.removeEventListener('mouseenter', this.handleMouseEnter)\n this.target.removeEventListener('mouseleave', this.handleMouseLeave)\n this.target.removeEventListener('blur', this.handleBlur)\n this.target.removeEventListener('click', this.handleClick)\n this.target.removeEventListener('keydown', this.handleKeyDown)\n }\n\n private handleMouseEnter = () => {\n this.show()\n }\n\n private handleMouseLeave = () => {\n this.hide()\n }\n\n private handleFocus = () => {\n this.show()\n }\n\n private handleBlur = () => {\n this.hide()\n }\n\n private handleClick = () => {\n if (this._open) {\n this.hide()\n } else {\n this.show()\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // Close tooltip on Escape\n if (event.key === 'Escape' && this._open) {\n this.hide()\n }\n }\n\n private showTooltip () {\n if (!this.popup || this._disabled) return\n\n // Emit show event\n const showEvent = new CustomEvent('tool-tip-show', {\n bubbles: true,\n cancelable: true,\n })\n if (!this.dispatchEvent(showEvent)) return\n\n this.popup.classList.add('visible')\n this.popup.setAttribute('aria-hidden', 'false')\n\n // Position the popup\n this.positionPopup()\n\n // Emit after-show event\n this.dispatchEvent(new CustomEvent('tool-tip-after-show', {\n bubbles: true\n }))\n }\n\n private hideTooltip () {\n if (!this.popup) return\n\n // Emit hide event\n const hideEvent = new CustomEvent('tool-tip-hide', {\n bubbles: true,\n cancelable: true,\n })\n if (!this.dispatchEvent(hideEvent)) return\n\n this.popup.classList.remove('visible')\n this.popup.setAttribute('aria-hidden', 'true')\n\n // Emit after-hide event\n this.dispatchEvent(new CustomEvent('tool-tip-after-hide', {\n bubbles: true\n }))\n }\n\n private positionPopup () {\n if (!this.popup || !this.target) return\n\n const targetRect = this.target.getBoundingClientRect()\n const popupRect = this.popup.getBoundingClientRect()\n const arrowSize = 8\n\n let top = 0\n let left = 0\n let arrowTop = ''\n let arrowLeft = ''\n let arrowTransform = ''\n\n const distance = this.distance\n const skidding = this.skidding\n const placement = this.getOptimalPlacement(targetRect, popupRect)\n\n // Set data attribute for CSS styling\n this.popup.dataset.placement = placement\n\n switch (placement) {\n case 'top':\n top = targetRect.top - popupRect.height - distance - arrowSize\n left = targetRect.left + (targetRect.width / 2) -\n (popupRect.width / 2) + skidding\n arrowTop = '100%'\n arrowLeft = '50%'\n arrowTransform = 'translateX(-50%)'\n break\n case 'top-start':\n top = targetRect.top - popupRect.height - distance - arrowSize\n left = targetRect.left + skidding\n arrowTop = '100%'\n arrowLeft = `${Math.min(24, popupRect.width / 2)}px`\n arrowTransform = 'translateX(-50%)'\n break\n case 'top-end':\n top = targetRect.top - popupRect.height - distance - arrowSize\n left = targetRect.right - popupRect.width + skidding\n arrowTop = '100%'\n arrowLeft = `calc(100% - ${Math.min(24, popupRect.width / 2)}px)`\n arrowTransform = 'translateX(-50%)'\n break\n case 'bottom':\n top = targetRect.bottom + distance + arrowSize\n left = targetRect.left + (targetRect.width / 2) -\n (popupRect.width / 2) + skidding\n arrowTop = '0'\n arrowLeft = '50%'\n arrowTransform = 'translateX(-50%) translateY(-100%)'\n break\n case 'bottom-start':\n top = targetRect.bottom + distance + arrowSize\n left = targetRect.left + skidding\n arrowTop = '0'\n arrowLeft = `${Math.min(24, popupRect.width / 2)}px`\n arrowTransform = 'translateX(-50%) translateY(-100%)'\n break\n case 'bottom-end':\n top = targetRect.bottom + distance + arrowSize\n left = targetRect.right - popupRect.width + skidding\n arrowTop = '0'\n arrowLeft = `calc(100% - ${Math.min(24, popupRect.width / 2)}px)`\n arrowTransform = 'translateX(-50%) translateY(-100%)'\n break\n case 'left':\n top = targetRect.top + (targetRect.height / 2) -\n (popupRect.height / 2) + skidding\n left = targetRect.left - popupRect.width - distance - arrowSize\n arrowTop = '50%'\n arrowLeft = '100%'\n arrowTransform = 'translateY(-50%)'\n break\n case 'left-start':\n top = targetRect.top + skidding\n left = targetRect.left - popupRect.width - distance - arrowSize\n arrowTop = `${Math.min(16, popupRect.height / 2)}px`\n arrowLeft = '100%'\n arrowTransform = 'translateY(-50%)'\n break\n case 'left-end':\n top = targetRect.bottom - popupRect.height + skidding\n left = targetRect.left - popupRect.width - distance - arrowSize\n arrowTop = `calc(100% - ${Math.min(16, popupRect.height / 2)}px)`\n arrowLeft = '100%'\n arrowTransform = 'translateY(-50%)'\n break\n case 'right':\n top = targetRect.top + (targetRect.height / 2) -\n (popupRect.height / 2) + skidding\n left = targetRect.right + distance + arrowSize\n arrowTop = '50%'\n arrowLeft = '0'\n arrowTransform = 'translateY(-50%) translateX(-100%)'\n break\n case 'right-start':\n top = targetRect.top + skidding\n left = targetRect.right + distance + arrowSize\n arrowTop = `${Math.min(16, popupRect.height / 2)}px`\n arrowLeft = '0'\n arrowTransform = 'translateY(-50%) translateX(-100%)'\n break\n case 'right-end':\n top = targetRect.bottom - popupRect.height + skidding\n left = targetRect.right + distance + arrowSize\n arrowTop = `calc(100% - ${Math.min(16, popupRect.height / 2)}px)`\n arrowLeft = '0'\n arrowTransform = 'translateY(-50%) translateX(-100%)'\n break\n }\n\n // Adjust for scroll position\n if (this.hoist) {\n top += window.scrollY\n left += window.scrollX\n }\n\n // Apply position\n this.popup.style.top = `${top}px`\n this.popup.style.left = `${left}px`\n\n // Position the arrow\n if (this.arrow) {\n this.arrow.style.top = arrowTop\n this.arrow.style.left = arrowLeft\n this.arrow.style.transform = arrowTransform\n }\n }\n\n private getOptimalPlacement (targetRect:DOMRect, popupRect:DOMRect):Placement {\n const placement = this.placement\n const viewportWidth = window.innerWidth\n const viewportHeight = window.innerHeight\n const distance = this.distance\n const arrowSize = 8\n\n // Check if the preferred placement fits\n const fits = {\n top: targetRect.top - popupRect.height - distance - arrowSize > 0,\n bottom: (targetRect.bottom + popupRect.height + distance +\n arrowSize < viewportHeight),\n left: targetRect.left - popupRect.width - distance - arrowSize > 0,\n right: (targetRect.right + popupRect.width + distance +\n arrowSize < viewportWidth),\n }\n\n // Get the base direction from the placement\n const baseDirection = placement.split('-')[0] as 'top'|\n 'bottom'|\n 'left'|\n 'right'\n\n // If preferred placement fits, use it\n if (fits[baseDirection]) {\n return placement\n }\n\n // Find the best alternative\n const opposites: Record<string, string> = {\n top: 'bottom',\n bottom: 'top',\n left: 'right',\n right: 'left',\n }\n\n const opposite = opposites[baseDirection] as\n 'top'|'bottom'|'left'|'right'\n if (fits[opposite]) {\n // Return the opposite with the same alignment\n const alignment = (placement.includes('-') ?\n placement.split('-')[1] :\n '')\n return (alignment ?\n `${opposite}-${alignment}` :\n opposite) as Placement\n }\n\n // Fall back to a direction that fits\n for (const dir of ['top', 'bottom', 'left', 'right'] as const) {\n if (fits[dir]) {\n return dir\n }\n }\n\n // If nothing fits, return original placement\n return placement\n }\n\n /**\n * Programmatically show the tooltip\n */\n show () {\n if (this._disabled) return\n this.open = true\n }\n\n /**\n * Programmatically hide the tooltip\n */\n hide () {\n this.open = false\n }\n}\n\ndefine('tool-tip', ToolTip)\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAuB;AAyBhB,MAAM,gBAAgB,YAAY;AAAA,EAzBzC,OAyByC;AAAA;AAAA;AAAA,EACrC,OAAO,qBAAqB;AAAA,IAAC;AAAA,IAAW;AAAA,IAAa;AAAA,IACjD;AAAA,IAAQ;AAAA,IAAY;AAAA,EAAU;AAAA,EAE1B,QAA4B;AAAA,EAC5B,QAA4B;AAAA,EAC5B,SAA0B;AAAA,EAE1B,QAAQ;AAAA,EACR,YAAY;AAAA,EAEpB,IAAI,UAAkB;AAClB,WAAO,KAAK,aAAa,SAAS,KAAK;AAAA,EAC3C;AAAA,EAEA,IAAI,QAAS,OAAc;AACvB,SAAK,aAAa,WAAW,KAAK;AAAA,EACtC;AAAA,EAEA,IAAI,YAAuB;AACvB,WAAQ,KAAK,aAAa,WAAW,KAAmB;AAAA,EAC5D;AAAA,EAEA,IAAI,UAAW,OAAiB;AAC5B,SAAK,aAAa,aAAa,KAAK;AAAA,EACxC;AAAA,EAEA,IAAI,UAAqB;AACrB,UAAM,OAAO,KAAK,aAAa,SAAS,KAAK;AAC7C,WAAO,KAAK,MAAM,GAAG,EAAE,OAAO,OAAO;AAAA,EACzC;AAAA,EAEA,IAAI,QAAS,OAAwB;AACjC,QAAI,MAAM,QAAQ,KAAK,GAAG;AACtB,WAAK,aAAa,WAAW,MAAM,KAAK,GAAG,CAAC;AAAA,IAChD,OAAO;AACH,WAAK,aAAa,WAAW,KAAK;AAAA,IACtC;AAAA,EACJ;AAAA,EAEA,IAAI,WAAqB;AACrB,WAAO,KAAK;AAAA,EAChB;AAAA,EAEA,IAAI,SAAU,OAAgB;AAC1B,SAAK,YAAY;AACjB,QAAI,OAAO;AACP,WAAK,aAAa,YAAY,EAAE;AAAA,IACpC,OAAO;AACH,WAAK,gBAAgB,UAAU;AAAA,IACnC;AAAA,EACJ;AAAA,EAEA,IAAI,OAAgB;AAChB,WAAO,KAAK;AAAA,EAChB;AAAA,EAEA,IAAI,KAAM,OAAe;AACrB,QAAI,KAAK,UAAW;AACpB,UAAM,UAAU,KAAK;AACrB,SAAK,QAAQ;AAEb,QAAI,SAAS,CAAC,SAAS;AACnB,WAAK,YAAY;AAAA,IACrB,WAAW,CAAC,SAAS,SAAS;AAC1B,WAAK,YAAY;AAAA,IACrB;AAAA,EACJ;AAAA,EAEA,IAAI,WAAmB;AACnB,WAAO,SAAS,KAAK,aAAa,UAAU,KAAK,KAAK,EAAE;AAAA,EAC5D;AAAA,EAEA,IAAI,SAAU,OAAc;AACxB,SAAK,aAAa,YAAY,OAAO,KAAK,CAAC;AAAA,EAC/C;AAAA,EAEA,IAAI,WAAmB;AACnB,WAAO,SAAS,KAAK,aAAa,UAAU,KAAK,KAAK,EAAE;AAAA,EAC5D;AAAA,EAEA,IAAI,SAAU,OAAc;AACxB,SAAK,aAAa,YAAY,OAAO,KAAK,CAAC;AAAA,EAC/C;AAAA,EAEA,IAAI,QAAiB;AACjB,WAAO,KAAK,aAAa,OAAO;AAAA,EACpC;AAAA,EAEA,IAAI,MAAO,OAAe;AACtB,QAAI,OAAO;AACP,WAAK,aAAa,SAAS,EAAE;AAAA,IACjC,OAAO;AACH,WAAK,gBAAgB,OAAO;AAAA,IAChC;AAAA,EACJ;AAAA,EAEA,oBAAqB;AAEjB,SAAK,MAAM,UAAU;AAGrB,SAAK,SAAS,KAAK;AAEnB,QAAI,CAAC,KAAK,QAAQ;AACd,cAAQ,KAAK,yDACa;AAC1B;AAAA,IACJ;AAGA,SAAK,YAAY;AAGjB,SAAK,WAAW;AAGhB,QAAI,KAAK,aAAa,MAAM,GAAG;AAC3B,WAAK,QAAQ;AACb,WAAK,YAAY;AAAA,IACrB;AAAA,EACJ;AAAA,EAEA,uBAAwB;AACpB,SAAK,aAAa;AAClB,SAAK,OAAO,OAAO;AAAA,EACvB;AAAA,EAEA,yBACI,MACA,WACA,UACF;AACE,QAAI,SAAS,aAAa,KAAK,OAAO;AAClC,YAAM,OAAO,KAAK,MAAM,cAAc,OAAO;AAC7C,UAAI,MAAM;AACN,aAAK,cAAc,YAAY;AAAA,MACnC;AAAA,IACJ;AAEA,QAAI,SAAS,eAAe,KAAK,OAAO;AACpC,WAAK,cAAc;AAAA,IACvB;AAEA,QAAI,SAAS,YAAY;AACrB,WAAK,YAAY,aAAa;AAC9B,UAAI,KAAK,aAAa,KAAK,OAAO;AAC9B,aAAK,KAAK;AAAA,MACd;AAAA,IACJ;AAEA,QAAI,SAAS,QAAQ;AACjB,WAAK,OAAO,aAAa;AAAA,IAC7B;AAEA,SAAK,SAAS,cAAc,SAAS,eAAe,KAAK,OAAO;AAC5D,WAAK,cAAc;AAAA,IACvB;AAAA,EACJ;AAAA,EAEQ,cAAe;AACnB,SAAK,QAAQ,SAAS,cAAc,KAAK;AACzC,SAAK,MAAM,YAAY;AACvB,SAAK,MAAM,aAAa,QAAQ,SAAS;AACzC,SAAK,MAAM,aAAa,eAAe,MAAM;AAC7C,SAAK,MAAM,YAAY;AAAA,gCACC,KAAK,OAAO;AAAA;AAAA;AAIpC,SAAK,QAAQ,KAAK,MAAM,cAAc,QAAQ;AAG9C,QAAI,KAAK,OAAO;AACZ,eAAS,KAAK,YAAY,KAAK,KAAK;AAAA,IACxC,OAAO;AACH,WAAK,YAAY,KAAK,KAAK;AAAA,IAC/B;AAAA,EACJ;AAAA,EAEQ,aAAc;AAClB,QAAI,CAAC,KAAK,OAAQ;AAElB,UAAM,WAAW,KAAK;AAEtB,QAAI,SAAS,SAAS,OAAO,GAAG;AAC5B,WAAK,OAAO,iBAAiB,cAAc,KAAK,gBAAgB;AAChE,WAAK,OAAO,iBAAiB,cAAc,KAAK,gBAAgB;AAAA,IACpE;AAEA,QAAI,SAAS,SAAS,OAAO,GAAG;AAC5B,WAAK,OAAO,iBAAiB,SAAS,KAAK,WAAW;AACtD,WAAK,OAAO,iBAAiB,QAAQ,KAAK,UAAU;AAAA,IACxD;AAEA,QAAI,SAAS,SAAS,OAAO,GAAG;AAC5B,WAAK,OAAO,iBAAiB,SAAS,KAAK,WAAW;AAAA,IAC1D;AAGA,SAAK,OAAO,iBAAiB,WAAW,KAAK,aAAa;AAAA,EAC9D;AAAA,EAEQ,eAAgB;AACpB,QAAI,CAAC,KAAK,OAAQ;AAElB,SAAK,OAAO,oBAAoB,cAAc,KAAK,gBAAgB;AACnE,SAAK,OAAO,oBAAoB,cAAc,KAAK,gBAAgB;AACnE,SAAK,OAAO,oBAAoB,QAAQ,KAAK,UAAU;AACvD,SAAK,OAAO,oBAAoB,SAAS,KAAK,WAAW;AACzD,SAAK,OAAO,oBAAoB,WAAW,KAAK,aAAa;AAAA,EACjE;AAAA,EAEQ,mBAAmB,6BAAM;AAC7B,SAAK,KAAK;AAAA,EACd,GAF2B;AAAA,EAInB,mBAAmB,6BAAM;AAC7B,SAAK,KAAK;AAAA,EACd,GAF2B;AAAA,EAInB,cAAc,6BAAM;AACxB,SAAK,KAAK;AAAA,EACd,GAFsB;AAAA,EAId,aAAa,6BAAM;AACvB,SAAK,KAAK;AAAA,EACd,GAFqB;AAAA,EAIb,cAAc,6BAAM;AACxB,QAAI,KAAK,OAAO;AACZ,WAAK,KAAK;AAAA,IACd,OAAO;AACH,WAAK,KAAK;AAAA,IACd;AAAA,EACJ,GANsB;AAAA,EAQd,gBAAgB,wBAAC,UAAyB;AAE9C,QAAI,MAAM,QAAQ,YAAY,KAAK,OAAO;AACtC,WAAK,KAAK;AAAA,IACd;AAAA,EACJ,GALwB;AAAA,EAOhB,cAAe;AACnB,QAAI,CAAC,KAAK,SAAS,KAAK,UAAW;AAGnC,UAAM,YAAY,IAAI,YAAY,iBAAiB;AAAA,MAC/C,SAAS;AAAA,MACT,YAAY;AAAA,IAChB,CAAC;AACD,QAAI,CAAC,KAAK,cAAc,SAAS,EAAG;AAEpC,SAAK,MAAM,UAAU,IAAI,SAAS;AAClC,SAAK,MAAM,aAAa,eAAe,OAAO;AAG9C,SAAK,cAAc;AAGnB,SAAK,cAAc,IAAI,YAAY,uBAAuB;AAAA,MACtD,SAAS;AAAA,IACb,CAAC,CAAC;AAAA,EACN;AAAA,EAEQ,cAAe;AACnB,QAAI,CAAC,KAAK,MAAO;AAGjB,UAAM,YAAY,IAAI,YAAY,iBAAiB;AAAA,MAC/C,SAAS;AAAA,MACT,YAAY;AAAA,IAChB,CAAC;AACD,QAAI,CAAC,KAAK,cAAc,SAAS,EAAG;AAEpC,SAAK,MAAM,UAAU,OAAO,SAAS;AACrC,SAAK,MAAM,aAAa,eAAe,MAAM;AAG7C,SAAK,cAAc,IAAI,YAAY,uBAAuB;AAAA,MACtD,SAAS;AAAA,IACb,CAAC,CAAC;AAAA,EACN;AAAA,EAEQ,gBAAiB;AACrB,QAAI,CAAC,KAAK,SAAS,CAAC,KAAK,OAAQ;AAEjC,UAAM,aAAa,KAAK,OAAO,sBAAsB;AACrD,UAAM,YAAY,KAAK,MAAM,sBAAsB;AACnD,UAAM,YAAY;AAElB,QAAI,MAAM;AACV,QAAI,OAAO;AACX,QAAI,WAAW;AACf,QAAI,YAAY;AAChB,QAAI,iBAAiB;AAErB,UAAM,WAAW,KAAK;AACtB,UAAM,WAAW,KAAK;AACtB,UAAM,YAAY,KAAK,oBAAoB,YAAY,SAAS;AAGhE,SAAK,MAAM,QAAQ,YAAY;AAE/B,YAAQ,WAAW;AAAA,MACf,KAAK;AACD,cAAM,WAAW,MAAM,UAAU,SAAS,WAAW;AACrD,eAAO,WAAW,OAAQ,WAAW,QAAQ,IACxC,UAAU,QAAQ,IAAK;AAC5B,mBAAW;AACX,oBAAY;AACZ,yBAAiB;AACjB;AAAA,MACJ,KAAK;AACD,cAAM,WAAW,MAAM,UAAU,SAAS,WAAW;AACrD,eAAO,WAAW,OAAO;AACzB,mBAAW;AACX,oBAAY,GAAG,KAAK,IAAI,IAAI,UAAU,QAAQ,CAAC,CAAC;AAChD,yBAAiB;AACjB;AAAA,MACJ,KAAK;AACD,cAAM,WAAW,MAAM,UAAU,SAAS,WAAW;AACrD,eAAO,WAAW,QAAQ,UAAU,QAAQ;AAC5C,mBAAW;AACX,oBAAY,eAAe,KAAK,IAAI,IAAI,UAAU,QAAQ,CAAC,CAAC;AAC5D,yBAAiB;AACjB;AAAA,MACJ,KAAK;AACD,cAAM,WAAW,SAAS,WAAW;AACrC,eAAO,WAAW,OAAQ,WAAW,QAAQ,IACxC,UAAU,QAAQ,IAAK;AAC5B,mBAAW;AACX,oBAAY;AACZ,yBAAiB;AACjB;AAAA,MACJ,KAAK;AACD,cAAM,WAAW,SAAS,WAAW;AACrC,eAAO,WAAW,OAAO;AACzB,mBAAW;AACX,oBAAY,GAAG,KAAK,IAAI,IAAI,UAAU,QAAQ,CAAC,CAAC;AAChD,yBAAiB;AACjB;AAAA,MACJ,KAAK;AACD,cAAM,WAAW,SAAS,WAAW;AACrC,eAAO,WAAW,QAAQ,UAAU,QAAQ;AAC5C,mBAAW;AACX,oBAAY,eAAe,KAAK,IAAI,IAAI,UAAU,QAAQ,CAAC,CAAC;AAC5D,yBAAiB;AACjB;AAAA,MACJ,KAAK;AACD,cAAM,WAAW,MAAO,WAAW,SAAS,IACvC,UAAU,SAAS,IAAK;AAC7B,eAAO,WAAW,OAAO,UAAU,QAAQ,WAAW;AACtD,mBAAW;AACX,oBAAY;AACZ,yBAAiB;AACjB;AAAA,MACJ,KAAK;AACD,cAAM,WAAW,MAAM;AACvB,eAAO,WAAW,OAAO,UAAU,QAAQ,WAAW;AACtD,mBAAW,GAAG,KAAK,IAAI,IAAI,UAAU,SAAS,CAAC,CAAC;AAChD,oBAAY;AACZ,yBAAiB;AACjB;AAAA,MACJ,KAAK;AACD,cAAM,WAAW,SAAS,UAAU,SAAS;AAC7C,eAAO,WAAW,OAAO,UAAU,QAAQ,WAAW;AACtD,mBAAW,eAAe,KAAK,IAAI,IAAI,UAAU,SAAS,CAAC,CAAC;AAC5D,oBAAY;AACZ,yBAAiB;AACjB;AAAA,MACJ,KAAK;AACD,cAAM,WAAW,MAAO,WAAW,SAAS,IACvC,UAAU,SAAS,IAAK;AAC7B,eAAO,WAAW,QAAQ,WAAW;AACrC,mBAAW;AACX,oBAAY;AACZ,yBAAiB;AACjB;AAAA,MACJ,KAAK;AACD,cAAM,WAAW,MAAM;AACvB,eAAO,WAAW,QAAQ,WAAW;AACrC,mBAAW,GAAG,KAAK,IAAI,IAAI,UAAU,SAAS,CAAC,CAAC;AAChD,oBAAY;AACZ,yBAAiB;AACjB;AAAA,MACJ,KAAK;AACD,cAAM,WAAW,SAAS,UAAU,SAAS;AAC7C,eAAO,WAAW,QAAQ,WAAW;AACrC,mBAAW,eAAe,KAAK,IAAI,IAAI,UAAU,SAAS,CAAC,CAAC;AAC5D,oBAAY;AACZ,yBAAiB;AACjB;AAAA,IACR;AAGA,QAAI,KAAK,OAAO;AACZ,aAAO,OAAO;AACd,cAAQ,OAAO;AAAA,IACnB;AAGA,SAAK,MAAM,MAAM,MAAM,GAAG,GAAG;AAC7B,SAAK,MAAM,MAAM,OAAO,GAAG,IAAI;AAG/B,QAAI,KAAK,OAAO;AACZ,WAAK,MAAM,MAAM,MAAM;AACvB,WAAK,MAAM,MAAM,OAAO;AACxB,WAAK,MAAM,MAAM,YAAY;AAAA,IACjC;AAAA,EACJ;AAAA,EAEQ,oBAAqB,YAAoB,WAA6B;AAC1E,UAAM,YAAY,KAAK;AACvB,UAAM,gBAAgB,OAAO;AAC7B,UAAM,iBAAiB,OAAO;AAC9B,UAAM,WAAW,KAAK;AACtB,UAAM,YAAY;AAGlB,UAAM,OAAO;AAAA,MACT,KAAK,WAAW,MAAM,UAAU,SAAS,WAAW,YAAY;AAAA,MAChE,QAAS,WAAW,SAAS,UAAU,SAAS,WAC5C,YAAY;AAAA,MAChB,MAAM,WAAW,OAAO,UAAU,QAAQ,WAAW,YAAY;AAAA,MACjE,OAAQ,WAAW,QAAQ,UAAU,QAAQ,WACzC,YAAY;AAAA,IACpB;AAGA,UAAM,gBAAgB,UAAU,MAAM,GAAG,EAAE,CAAC;AAM5C,QAAI,KAAK,aAAa,GAAG;AACrB,aAAO;AAAA,IACX;AAGA,UAAM,YAAoC;AAAA,MACtC,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAEA,UAAM,WAAW,UAAU,aAAa;AAExC,QAAI,KAAK,QAAQ,GAAG;AAEhB,YAAM,YAAa,UAAU,SAAS,GAAG,IACrC,UAAU,MAAM,GAAG,EAAE,CAAC,IACtB;AACJ,aAAQ,YACJ,GAAG,QAAQ,IAAI,SAAS,KACxB;AAAA,IACR;AAGA,eAAW,OAAO,CAAC,OAAO,UAAU,QAAQ,OAAO,GAAY;AAC3D,UAAI,KAAK,GAAG,GAAG;AACX,eAAO;AAAA,MACX;AAAA,IACJ;AAGA,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,OAAQ;AACJ,QAAI,KAAK,UAAW;AACpB,SAAK,OAAO;AAAA,EAChB;AAAA;AAAA;AAAA;AAAA,EAKA,OAAQ;AACJ,SAAK,OAAO;AAAA,EAChB;AACJ;AAAA,IAEA,oBAAO,YAAY,OAAO;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,UAAU,EAAC,OAAO,CAAA;KACrB;CACJ;AAED,MAAM,MAAM,SAAS,GACf,KAAK,GACL,WAAW,GACX,SAAS,GACT,OAAO,GACP,aAAa,GACb,WAAW,GACX,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,MAAM,GACN,YAAY,GACZ,UAAU,CAAA;AAEhB,MAAM,MAAM,OAAO,GAAG,OAAO,GAAC,OAAO,GAAC,OAAO,GAAC,QAAQ,CAAA;AAEtD,qBAAa,OAAQ,SAAQ,WAAW;IACpC,MAAM,CAAC,kBAAkB,WACU;IAEnC,OAAO,CAAC,KAAK,CAA2B;IACxC,OAAO,CAAC,KAAK,CAA2B;IACxC,OAAO,CAAC,MAAM,CAAwB;IAEtC,OAAO,CAAC,KAAK,CAAQ;IACrB,OAAO,CAAC,SAAS,CAAQ;IAEzB,IAAI,OAAO,IAAI,MAAM,CAEpB;IAED,IAAI,OAAO,CAAE,KAAK,EAAC,MAAM,EAExB;IAED,IAAI,SAAS,IAAI,SAAS,CAEzB;IAED,IAAI,SAAS,CAAE,KAAK,EAAC,SAAS,EAE7B;IAED,IAAI,OAAO,IAAI,OAAO,EAAE,CAGvB;IAED,IAAI,OAAO,CAAE,KAAK,EAAC,OAAO,EAAE,GAAC,MAAM,EAMlC;IAED,IAAI,QAAQ,IAAK,OAAO,CAEvB;IAED,IAAI,QAAQ,CAAE,KAAK,EAAE,OAAO,EAO3B;IAED,IAAI,IAAI,IAAI,OAAO,CAElB;IAED,IAAI,IAAI,CAAE,KAAK,EAAC,OAAO,EAUtB;IAED,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,IAAI,QAAQ,CAAE,KAAK,EAAC,MAAM,EAEzB;IAED,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,IAAI,QAAQ,CAAE,KAAK,EAAC,MAAM,EAEzB;IAED,IAAI,KAAK,IAAI,OAAO,CAEnB;IAED,IAAI,KAAK,CAAE,KAAK,EAAC,OAAO,EAMvB;IAED,iBAAiB;IA0BjB,oBAAoB;IAKpB,wBAAwB,CACpB,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,MAAM,GAAC,IAAI,EACrB,QAAQ,EAAC,MAAM,GAAC,IAAI;IA6BxB,OAAO,CAAC,WAAW;IAoBnB,OAAO,CAAC,UAAU;IAuBlB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,gBAAgB,CAEvB;IAED,OAAO,CAAC,gBAAgB,CAEvB;IAED,OAAO,CAAC,WAAW,CAElB;IAED,OAAO,CAAC,UAAU,CAEjB;IAED,OAAO,CAAC,WAAW,CAMlB;IAED,OAAO,CAAC,aAAa,CAKpB;IAED,OAAO,CAAC,WAAW;IAsBnB,OAAO,CAAC,WAAW;IAmBnB,OAAO,CAAC,aAAa;IAiIrB,OAAO,CAAC,mBAAmB;IA2D3B;;OAEG;IACH,IAAI;IAKJ;;OAEG;IACH,IAAI;CAGP"}
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
2
|
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
+
import { define } from "@substrate-system/web-component/util";
|
|
3
4
|
class ToolTip extends HTMLElement {
|
|
4
5
|
static {
|
|
5
6
|
__name(this, "ToolTip");
|
|
@@ -163,7 +164,6 @@ class ToolTip extends HTMLElement {
|
|
|
163
164
|
if (!this.target) return;
|
|
164
165
|
this.target.removeEventListener("mouseenter", this.handleMouseEnter);
|
|
165
166
|
this.target.removeEventListener("mouseleave", this.handleMouseLeave);
|
|
166
|
-
this.target.removeEventListener("focus", this.handleFocus);
|
|
167
167
|
this.target.removeEventListener("blur", this.handleBlur);
|
|
168
168
|
this.target.removeEventListener("click", this.handleClick);
|
|
169
169
|
this.target.removeEventListener("keydown", this.handleKeyDown);
|
|
@@ -379,9 +379,7 @@ class ToolTip extends HTMLElement {
|
|
|
379
379
|
this.open = false;
|
|
380
380
|
}
|
|
381
381
|
}
|
|
382
|
-
|
|
383
|
-
customElements.define("tool-tip", ToolTip);
|
|
384
|
-
}
|
|
382
|
+
define("tool-tip", ToolTip);
|
|
385
383
|
export {
|
|
386
384
|
ToolTip
|
|
387
385
|
};
|
package/dist/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/index.ts"],
|
|
4
|
-
"sourcesContent": ["// for document.querySelector\ndeclare global {\n interface HTMLElementTagNameMap {\n 'tool-tip':ToolTip\n }\n}\n\nexport type Placement =\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'left'\n | 'left-start'\n | 'left-end'\n\nexport type Trigger = 'hover'|'focus'|'click'|'manual'\n\nexport class ToolTip extends HTMLElement {\n static observedAttributes = ['content', 'placement', 'disabled',\n 'open', 'distance', 'skidding']\n\n private popup:HTMLDivElement|null = null\n private arrow:HTMLDivElement|null = null\n private target:HTMLElement|null = null\n\n private _open = false\n private _disabled = false\n\n get content ():string {\n return this.getAttribute('content') || ''\n }\n\n set content (value:string) {\n this.setAttribute('content', value)\n }\n\n get placement ():Placement {\n return (this.getAttribute('placement') as Placement) || 'top'\n }\n\n set placement (value:Placement) {\n this.setAttribute('placement', value)\n }\n\n get trigger ():Trigger[] {\n const attr = this.getAttribute('trigger') || 'hover focus'\n return attr.split(' ').filter(Boolean) as Trigger[]\n }\n\n set trigger (value:Trigger[]|string) {\n if (Array.isArray(value)) {\n this.setAttribute('trigger', value.join(' '))\n } else {\n this.setAttribute('trigger', value)\n }\n }\n\n get disabled (): boolean {\n return this._disabled\n }\n\n set disabled (value: boolean) {\n this._disabled = value\n if (value) {\n this.setAttribute('disabled', '')\n } else {\n this.removeAttribute('disabled')\n }\n }\n\n get open (): boolean {\n return this._open\n }\n\n set open (value: boolean) {\n if (this._disabled) return\n const wasOpen = this._open\n this._open = value\n\n if (value && !wasOpen) {\n this.showTooltip()\n } else if (!value && wasOpen) {\n this.hideTooltip()\n }\n }\n\n get distance (): number {\n return parseInt(this.getAttribute('distance') || '8', 10)\n }\n\n set distance (value: number) {\n this.setAttribute('distance', String(value))\n }\n\n get skidding (): number {\n return parseInt(this.getAttribute('skidding') || '0', 10)\n }\n\n set skidding (value: number) {\n this.setAttribute('skidding', String(value))\n }\n\n get hoist (): boolean {\n return this.hasAttribute('hoist')\n }\n\n set hoist (value: boolean) {\n if (value) {\n this.setAttribute('hoist', '')\n } else {\n this.removeAttribute('hoist')\n }\n }\n\n connectedCallback () {\n // Use display: contents so the tooltip doesn't affect layout\n this.style.display = 'contents'\n\n // Find the target element (first child element)\n this.target = this.firstElementChild as HTMLElement\n\n if (!this.target) {\n console.warn('tool-tip: No target element found. ' +\n 'Add a child element.')\n return\n }\n\n // Create the popup element\n this.createPopup()\n\n // Bind event handlers\n this.bindEvents()\n\n // Check if open attribute is set\n if (this.hasAttribute('open')) {\n this._open = true\n this.showTooltip()\n }\n }\n\n disconnectedCallback () {\n this.unbindEvents()\n this.popup?.remove()\n }\n\n attributeChangedCallback (\n name:string,\n _oldValue:string|null,\n newValue:string|null\n ) {\n if (name === 'content' && this.popup) {\n const body = this.popup.querySelector('.body')\n if (body) {\n body.textContent = newValue || ''\n }\n }\n\n if (name === 'placement' && this._open) {\n this.positionPopup()\n }\n\n if (name === 'disabled') {\n this._disabled = newValue !== null\n if (this._disabled && this._open) {\n this.hide()\n }\n }\n\n if (name === 'open') {\n this.open = newValue !== null\n }\n\n if ((name === 'distance' || name === 'skidding') && this._open) {\n this.positionPopup()\n }\n }\n\n private createPopup () {\n this.popup = document.createElement('div')\n this.popup.className = 'popup'\n this.popup.setAttribute('role', 'tooltip')\n this.popup.setAttribute('aria-hidden', 'true')\n this.popup.innerHTML = `\n <div class=\"body\">${this.content}</div>\n <div class=\"arrow\"></div>\n `\n\n this.arrow = this.popup.querySelector('.arrow')\n\n // Append to body if hoisted, otherwise to this element's parent\n if (this.hoist) {\n document.body.appendChild(this.popup)\n } else {\n this.appendChild(this.popup)\n }\n }\n\n private bindEvents () {\n if (!this.target) return\n\n const triggers = this.trigger\n\n if (triggers.includes('hover')) {\n this.target.addEventListener('mouseenter', this.handleMouseEnter)\n this.target.addEventListener('mouseleave', this.handleMouseLeave)\n }\n\n if (triggers.includes('focus')) {\n this.target.addEventListener('focus', this.handleFocus)\n this.target.addEventListener('blur', this.handleBlur)\n }\n\n if (triggers.includes('click')) {\n this.target.addEventListener('click', this.handleClick)\n }\n\n // Add keyboard support\n this.target.addEventListener('keydown', this.handleKeyDown)\n }\n\n private unbindEvents () {\n if (!this.target) return\n\n this.target.removeEventListener('mouseenter', this.handleMouseEnter)\n this.target.removeEventListener('mouseleave', this.handleMouseLeave)\n this.target.removeEventListener('focus', this.handleFocus)\n this.target.removeEventListener('blur', this.handleBlur)\n this.target.removeEventListener('click', this.handleClick)\n this.target.removeEventListener('keydown', this.handleKeyDown)\n }\n\n private handleMouseEnter = () => {\n this.show()\n }\n\n private handleMouseLeave = () => {\n this.hide()\n }\n\n private handleFocus = () => {\n this.show()\n }\n\n private handleBlur = () => {\n this.hide()\n }\n\n private handleClick = () => {\n if (this._open) {\n this.hide()\n } else {\n this.show()\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // Close tooltip on Escape\n if (event.key === 'Escape' && this._open) {\n this.hide()\n }\n }\n\n private showTooltip () {\n if (!this.popup || this._disabled) return\n\n // Emit show event\n const showEvent = new CustomEvent('tool-tip-show', {\n bubbles: true,\n cancelable: true,\n })\n if (!this.dispatchEvent(showEvent)) return\n\n this.popup.classList.add('visible')\n this.popup.setAttribute('aria-hidden', 'false')\n\n // Position the popup\n this.positionPopup()\n\n // Emit after-show event\n this.dispatchEvent(new CustomEvent('tool-tip-after-show', {\n bubbles: true\n }))\n }\n\n private hideTooltip () {\n if (!this.popup) return\n\n // Emit hide event\n const hideEvent = new CustomEvent('tool-tip-hide', {\n bubbles: true,\n cancelable: true,\n })\n if (!this.dispatchEvent(hideEvent)) return\n\n this.popup.classList.remove('visible')\n this.popup.setAttribute('aria-hidden', 'true')\n\n // Emit after-hide event\n this.dispatchEvent(new CustomEvent('tool-tip-after-hide', {\n bubbles: true\n }))\n }\n\n private positionPopup () {\n if (!this.popup || !this.target) return\n\n const targetRect = this.target.getBoundingClientRect()\n const popupRect = this.popup.getBoundingClientRect()\n const arrowSize = 8\n\n let top = 0\n let left = 0\n let arrowTop = ''\n let arrowLeft = ''\n let arrowTransform = ''\n\n const distance = this.distance\n const skidding = this.skidding\n const placement = this.getOptimalPlacement(targetRect, popupRect)\n\n // Set data attribute for CSS styling\n this.popup.dataset.placement = placement\n\n switch (placement) {\n case 'top':\n top = targetRect.top - popupRect.height - distance - arrowSize\n left = targetRect.left + (targetRect.width / 2) -\n (popupRect.width / 2) + skidding\n arrowTop = '100%'\n arrowLeft = '50%'\n arrowTransform = 'translateX(-50%)'\n break\n case 'top-start':\n top = targetRect.top - popupRect.height - distance - arrowSize\n left = targetRect.left + skidding\n arrowTop = '100%'\n arrowLeft = `${Math.min(24, popupRect.width / 2)}px`\n arrowTransform = 'translateX(-50%)'\n break\n case 'top-end':\n top = targetRect.top - popupRect.height - distance - arrowSize\n left = targetRect.right - popupRect.width + skidding\n arrowTop = '100%'\n arrowLeft = `calc(100% - ${Math.min(24, popupRect.width / 2)}px)`\n arrowTransform = 'translateX(-50%)'\n break\n case 'bottom':\n top = targetRect.bottom + distance + arrowSize\n left = targetRect.left + (targetRect.width / 2) -\n (popupRect.width / 2) + skidding\n arrowTop = '0'\n arrowLeft = '50%'\n arrowTransform = 'translateX(-50%) translateY(-100%)'\n break\n case 'bottom-start':\n top = targetRect.bottom + distance + arrowSize\n left = targetRect.left + skidding\n arrowTop = '0'\n arrowLeft = `${Math.min(24, popupRect.width / 2)}px`\n arrowTransform = 'translateX(-50%) translateY(-100%)'\n break\n case 'bottom-end':\n top = targetRect.bottom + distance + arrowSize\n left = targetRect.right - popupRect.width + skidding\n arrowTop = '0'\n arrowLeft = `calc(100% - ${Math.min(24, popupRect.width / 2)}px)`\n arrowTransform = 'translateX(-50%) translateY(-100%)'\n break\n case 'left':\n top = targetRect.top + (targetRect.height / 2) -\n (popupRect.height / 2) + skidding\n left = targetRect.left - popupRect.width - distance - arrowSize\n arrowTop = '50%'\n arrowLeft = '100%'\n arrowTransform = 'translateY(-50%)'\n break\n case 'left-start':\n top = targetRect.top + skidding\n left = targetRect.left - popupRect.width - distance - arrowSize\n arrowTop = `${Math.min(16, popupRect.height / 2)}px`\n arrowLeft = '100%'\n arrowTransform = 'translateY(-50%)'\n break\n case 'left-end':\n top = targetRect.bottom - popupRect.height + skidding\n left = targetRect.left - popupRect.width - distance - arrowSize\n arrowTop = `calc(100% - ${Math.min(16, popupRect.height / 2)}px)`\n arrowLeft = '100%'\n arrowTransform = 'translateY(-50%)'\n break\n case 'right':\n top = targetRect.top + (targetRect.height / 2) -\n (popupRect.height / 2) + skidding\n left = targetRect.right + distance + arrowSize\n arrowTop = '50%'\n arrowLeft = '0'\n arrowTransform = 'translateY(-50%) translateX(-100%)'\n break\n case 'right-start':\n top = targetRect.top + skidding\n left = targetRect.right + distance + arrowSize\n arrowTop = `${Math.min(16, popupRect.height / 2)}px`\n arrowLeft = '0'\n arrowTransform = 'translateY(-50%) translateX(-100%)'\n break\n case 'right-end':\n top = targetRect.bottom - popupRect.height + skidding\n left = targetRect.right + distance + arrowSize\n arrowTop = `calc(100% - ${Math.min(16, popupRect.height / 2)}px)`\n arrowLeft = '0'\n arrowTransform = 'translateY(-50%) translateX(-100%)'\n break\n }\n\n // Adjust for scroll position\n if (this.hoist) {\n top += window.scrollY\n left += window.scrollX\n }\n\n // Apply position\n this.popup.style.top = `${top}px`\n this.popup.style.left = `${left}px`\n\n // Position the arrow\n if (this.arrow) {\n this.arrow.style.top = arrowTop\n this.arrow.style.left = arrowLeft\n this.arrow.style.transform = arrowTransform\n }\n }\n\n private getOptimalPlacement (targetRect:DOMRect, popupRect:DOMRect):Placement {\n const placement = this.placement\n const viewportWidth = window.innerWidth\n const viewportHeight = window.innerHeight\n const distance = this.distance\n const arrowSize = 8\n\n // Check if the preferred placement fits\n const fits = {\n top: targetRect.top - popupRect.height - distance - arrowSize > 0,\n bottom: (targetRect.bottom + popupRect.height + distance +\n arrowSize < viewportHeight),\n left: targetRect.left - popupRect.width - distance - arrowSize > 0,\n right: (targetRect.right + popupRect.width + distance +\n arrowSize < viewportWidth),\n }\n\n // Get the base direction from the placement\n const baseDirection = placement.split('-')[0] as 'top'|\n 'bottom'|\n 'left'|\n 'right'\n\n // If preferred placement fits, use it\n if (fits[baseDirection]) {\n return placement\n }\n\n // Find the best alternative\n const opposites: Record<string, string> = {\n top: 'bottom',\n bottom: 'top',\n left: 'right',\n right: 'left',\n }\n\n const opposite = opposites[baseDirection] as\n 'top'|'bottom'|'left'|'right'\n if (fits[opposite]) {\n // Return the opposite with the same alignment\n const alignment = (placement.includes('-') ?\n placement.split('-')[1] :\n '')\n return (alignment ?\n `${opposite}-${alignment}` :\n opposite) as Placement\n }\n\n // Fall back to a direction that fits\n for (const dir of ['top', 'bottom', 'left', 'right'] as const) {\n if (fits[dir]) {\n return dir\n }\n }\n\n // If nothing fits, return original placement\n return placement\n }\n\n /**\n * Programmatically show the tooltip\n */\n show () {\n if (this._disabled) return\n this.open = true\n }\n\n /**\n * Programmatically hide the tooltip\n */\n hide () {\n this.open = false\n }\n}\n\nif ('customElements' in window) {\n customElements.define('tool-tip', ToolTip)\n}\n"],
|
|
5
|
-
"mappings": ";;
|
|
4
|
+
"sourcesContent": ["import { define } from '@substrate-system/web-component/util'\n\n// for document.querySelector\ndeclare global {\n interface HTMLElementTagNameMap {\n 'tool-tip':ToolTip\n }\n}\n\nexport type Placement =\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'left'\n | 'left-start'\n | 'left-end'\n\nexport type Trigger = 'hover'|'focus'|'click'|'manual'\n\nexport class ToolTip extends HTMLElement {\n static observedAttributes = ['content', 'placement', 'disabled',\n 'open', 'distance', 'skidding']\n\n private popup:HTMLDivElement|null = null\n private arrow:HTMLDivElement|null = null\n private target:HTMLElement|null = null\n\n private _open = false\n private _disabled = false\n\n get content ():string {\n return this.getAttribute('content') || ''\n }\n\n set content (value:string) {\n this.setAttribute('content', value)\n }\n\n get placement ():Placement {\n return (this.getAttribute('placement') as Placement) || 'top'\n }\n\n set placement (value:Placement) {\n this.setAttribute('placement', value)\n }\n\n get trigger ():Trigger[] {\n const attr = this.getAttribute('trigger') || 'hover focus'\n return attr.split(' ').filter(Boolean) as Trigger[]\n }\n\n set trigger (value:Trigger[]|string) {\n if (Array.isArray(value)) {\n this.setAttribute('trigger', value.join(' '))\n } else {\n this.setAttribute('trigger', value)\n }\n }\n\n get disabled (): boolean {\n return this._disabled\n }\n\n set disabled (value: boolean) {\n this._disabled = value\n if (value) {\n this.setAttribute('disabled', '')\n } else {\n this.removeAttribute('disabled')\n }\n }\n\n get open ():boolean {\n return this._open\n }\n\n set open (value:boolean) {\n if (this._disabled) return\n const wasOpen = this._open\n this._open = value\n\n if (value && !wasOpen) {\n this.showTooltip()\n } else if (!value && wasOpen) {\n this.hideTooltip()\n }\n }\n\n get distance ():number {\n return parseInt(this.getAttribute('distance') || '8', 10)\n }\n\n set distance (value:number) {\n this.setAttribute('distance', String(value))\n }\n\n get skidding ():number {\n return parseInt(this.getAttribute('skidding') || '0', 10)\n }\n\n set skidding (value:number) {\n this.setAttribute('skidding', String(value))\n }\n\n get hoist ():boolean {\n return this.hasAttribute('hoist')\n }\n\n set hoist (value:boolean) {\n if (value) {\n this.setAttribute('hoist', '')\n } else {\n this.removeAttribute('hoist')\n }\n }\n\n connectedCallback () {\n // Use display: contents so the tooltip doesn't affect layout\n this.style.display = 'contents'\n\n // Find the target element (first child element)\n this.target = this.firstElementChild as HTMLElement\n\n if (!this.target) {\n console.warn('tool-tip: No target element found. ' +\n 'Add a child element.')\n return\n }\n\n // Create the popup element\n this.createPopup()\n\n // Bind event handlers\n this.bindEvents()\n\n // Check if open attribute is set\n if (this.hasAttribute('open')) {\n this._open = true\n this.showTooltip()\n }\n }\n\n disconnectedCallback () {\n this.unbindEvents()\n this.popup?.remove()\n }\n\n attributeChangedCallback (\n name:string,\n _oldValue:string|null,\n newValue:string|null\n ) {\n if (name === 'content' && this.popup) {\n const body = this.popup.querySelector('.body')\n if (body) {\n body.textContent = newValue || ''\n }\n }\n\n if (name === 'placement' && this._open) {\n this.positionPopup()\n }\n\n if (name === 'disabled') {\n this._disabled = newValue !== null\n if (this._disabled && this._open) {\n this.hide()\n }\n }\n\n if (name === 'open') {\n this.open = newValue !== null\n }\n\n if ((name === 'distance' || name === 'skidding') && this._open) {\n this.positionPopup()\n }\n }\n\n private createPopup () {\n this.popup = document.createElement('div')\n this.popup.className = 'popup'\n this.popup.setAttribute('role', 'tooltip')\n this.popup.setAttribute('aria-hidden', 'true')\n this.popup.innerHTML = `\n <div class=\"body\">${this.content}</div>\n <div class=\"arrow\"></div>\n `\n\n this.arrow = this.popup.querySelector('.arrow')\n\n // Append to body if hoisted, otherwise to this element's parent\n if (this.hoist) {\n document.body.appendChild(this.popup)\n } else {\n this.appendChild(this.popup)\n }\n }\n\n private bindEvents () {\n if (!this.target) return\n\n const triggers = this.trigger\n\n if (triggers.includes('hover')) {\n this.target.addEventListener('mouseenter', this.handleMouseEnter)\n this.target.addEventListener('mouseleave', this.handleMouseLeave)\n }\n\n if (triggers.includes('focus')) {\n this.target.addEventListener('focus', this.handleFocus)\n this.target.addEventListener('blur', this.handleBlur)\n }\n\n if (triggers.includes('click')) {\n this.target.addEventListener('click', this.handleClick)\n }\n\n // Add keyboard support\n this.target.addEventListener('keydown', this.handleKeyDown)\n }\n\n private unbindEvents () {\n if (!this.target) return\n\n this.target.removeEventListener('mouseenter', this.handleMouseEnter)\n this.target.removeEventListener('mouseleave', this.handleMouseLeave)\n this.target.removeEventListener('blur', this.handleBlur)\n this.target.removeEventListener('click', this.handleClick)\n this.target.removeEventListener('keydown', this.handleKeyDown)\n }\n\n private handleMouseEnter = () => {\n this.show()\n }\n\n private handleMouseLeave = () => {\n this.hide()\n }\n\n private handleFocus = () => {\n this.show()\n }\n\n private handleBlur = () => {\n this.hide()\n }\n\n private handleClick = () => {\n if (this._open) {\n this.hide()\n } else {\n this.show()\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // Close tooltip on Escape\n if (event.key === 'Escape' && this._open) {\n this.hide()\n }\n }\n\n private showTooltip () {\n if (!this.popup || this._disabled) return\n\n // Emit show event\n const showEvent = new CustomEvent('tool-tip-show', {\n bubbles: true,\n cancelable: true,\n })\n if (!this.dispatchEvent(showEvent)) return\n\n this.popup.classList.add('visible')\n this.popup.setAttribute('aria-hidden', 'false')\n\n // Position the popup\n this.positionPopup()\n\n // Emit after-show event\n this.dispatchEvent(new CustomEvent('tool-tip-after-show', {\n bubbles: true\n }))\n }\n\n private hideTooltip () {\n if (!this.popup) return\n\n // Emit hide event\n const hideEvent = new CustomEvent('tool-tip-hide', {\n bubbles: true,\n cancelable: true,\n })\n if (!this.dispatchEvent(hideEvent)) return\n\n this.popup.classList.remove('visible')\n this.popup.setAttribute('aria-hidden', 'true')\n\n // Emit after-hide event\n this.dispatchEvent(new CustomEvent('tool-tip-after-hide', {\n bubbles: true\n }))\n }\n\n private positionPopup () {\n if (!this.popup || !this.target) return\n\n const targetRect = this.target.getBoundingClientRect()\n const popupRect = this.popup.getBoundingClientRect()\n const arrowSize = 8\n\n let top = 0\n let left = 0\n let arrowTop = ''\n let arrowLeft = ''\n let arrowTransform = ''\n\n const distance = this.distance\n const skidding = this.skidding\n const placement = this.getOptimalPlacement(targetRect, popupRect)\n\n // Set data attribute for CSS styling\n this.popup.dataset.placement = placement\n\n switch (placement) {\n case 'top':\n top = targetRect.top - popupRect.height - distance - arrowSize\n left = targetRect.left + (targetRect.width / 2) -\n (popupRect.width / 2) + skidding\n arrowTop = '100%'\n arrowLeft = '50%'\n arrowTransform = 'translateX(-50%)'\n break\n case 'top-start':\n top = targetRect.top - popupRect.height - distance - arrowSize\n left = targetRect.left + skidding\n arrowTop = '100%'\n arrowLeft = `${Math.min(24, popupRect.width / 2)}px`\n arrowTransform = 'translateX(-50%)'\n break\n case 'top-end':\n top = targetRect.top - popupRect.height - distance - arrowSize\n left = targetRect.right - popupRect.width + skidding\n arrowTop = '100%'\n arrowLeft = `calc(100% - ${Math.min(24, popupRect.width / 2)}px)`\n arrowTransform = 'translateX(-50%)'\n break\n case 'bottom':\n top = targetRect.bottom + distance + arrowSize\n left = targetRect.left + (targetRect.width / 2) -\n (popupRect.width / 2) + skidding\n arrowTop = '0'\n arrowLeft = '50%'\n arrowTransform = 'translateX(-50%) translateY(-100%)'\n break\n case 'bottom-start':\n top = targetRect.bottom + distance + arrowSize\n left = targetRect.left + skidding\n arrowTop = '0'\n arrowLeft = `${Math.min(24, popupRect.width / 2)}px`\n arrowTransform = 'translateX(-50%) translateY(-100%)'\n break\n case 'bottom-end':\n top = targetRect.bottom + distance + arrowSize\n left = targetRect.right - popupRect.width + skidding\n arrowTop = '0'\n arrowLeft = `calc(100% - ${Math.min(24, popupRect.width / 2)}px)`\n arrowTransform = 'translateX(-50%) translateY(-100%)'\n break\n case 'left':\n top = targetRect.top + (targetRect.height / 2) -\n (popupRect.height / 2) + skidding\n left = targetRect.left - popupRect.width - distance - arrowSize\n arrowTop = '50%'\n arrowLeft = '100%'\n arrowTransform = 'translateY(-50%)'\n break\n case 'left-start':\n top = targetRect.top + skidding\n left = targetRect.left - popupRect.width - distance - arrowSize\n arrowTop = `${Math.min(16, popupRect.height / 2)}px`\n arrowLeft = '100%'\n arrowTransform = 'translateY(-50%)'\n break\n case 'left-end':\n top = targetRect.bottom - popupRect.height + skidding\n left = targetRect.left - popupRect.width - distance - arrowSize\n arrowTop = `calc(100% - ${Math.min(16, popupRect.height / 2)}px)`\n arrowLeft = '100%'\n arrowTransform = 'translateY(-50%)'\n break\n case 'right':\n top = targetRect.top + (targetRect.height / 2) -\n (popupRect.height / 2) + skidding\n left = targetRect.right + distance + arrowSize\n arrowTop = '50%'\n arrowLeft = '0'\n arrowTransform = 'translateY(-50%) translateX(-100%)'\n break\n case 'right-start':\n top = targetRect.top + skidding\n left = targetRect.right + distance + arrowSize\n arrowTop = `${Math.min(16, popupRect.height / 2)}px`\n arrowLeft = '0'\n arrowTransform = 'translateY(-50%) translateX(-100%)'\n break\n case 'right-end':\n top = targetRect.bottom - popupRect.height + skidding\n left = targetRect.right + distance + arrowSize\n arrowTop = `calc(100% - ${Math.min(16, popupRect.height / 2)}px)`\n arrowLeft = '0'\n arrowTransform = 'translateY(-50%) translateX(-100%)'\n break\n }\n\n // Adjust for scroll position\n if (this.hoist) {\n top += window.scrollY\n left += window.scrollX\n }\n\n // Apply position\n this.popup.style.top = `${top}px`\n this.popup.style.left = `${left}px`\n\n // Position the arrow\n if (this.arrow) {\n this.arrow.style.top = arrowTop\n this.arrow.style.left = arrowLeft\n this.arrow.style.transform = arrowTransform\n }\n }\n\n private getOptimalPlacement (targetRect:DOMRect, popupRect:DOMRect):Placement {\n const placement = this.placement\n const viewportWidth = window.innerWidth\n const viewportHeight = window.innerHeight\n const distance = this.distance\n const arrowSize = 8\n\n // Check if the preferred placement fits\n const fits = {\n top: targetRect.top - popupRect.height - distance - arrowSize > 0,\n bottom: (targetRect.bottom + popupRect.height + distance +\n arrowSize < viewportHeight),\n left: targetRect.left - popupRect.width - distance - arrowSize > 0,\n right: (targetRect.right + popupRect.width + distance +\n arrowSize < viewportWidth),\n }\n\n // Get the base direction from the placement\n const baseDirection = placement.split('-')[0] as 'top'|\n 'bottom'|\n 'left'|\n 'right'\n\n // If preferred placement fits, use it\n if (fits[baseDirection]) {\n return placement\n }\n\n // Find the best alternative\n const opposites: Record<string, string> = {\n top: 'bottom',\n bottom: 'top',\n left: 'right',\n right: 'left',\n }\n\n const opposite = opposites[baseDirection] as\n 'top'|'bottom'|'left'|'right'\n if (fits[opposite]) {\n // Return the opposite with the same alignment\n const alignment = (placement.includes('-') ?\n placement.split('-')[1] :\n '')\n return (alignment ?\n `${opposite}-${alignment}` :\n opposite) as Placement\n }\n\n // Fall back to a direction that fits\n for (const dir of ['top', 'bottom', 'left', 'right'] as const) {\n if (fits[dir]) {\n return dir\n }\n }\n\n // If nothing fits, return original placement\n return placement\n }\n\n /**\n * Programmatically show the tooltip\n */\n show () {\n if (this._disabled) return\n this.open = true\n }\n\n /**\n * Programmatically hide the tooltip\n */\n hide () {\n this.open = false\n }\n}\n\ndefine('tool-tip', ToolTip)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/index.min.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
var
|
|
1
|
+
var w=Object.defineProperty;var l=(p,t)=>w(p,"name",{value:t,configurable:!0});var E=Object.defineProperty,y=l((p,t)=>E(p,"name",{value:t,configurable:!0}),"__name");function f(p){return Object.keys(p).reduce((t,e)=>{let i=p[e];return i?typeof i=="boolean"?i?(t+` ${e}`).trim():t:Array.isArray(i)?t+` ${e}="${i.join(" ")}"`:(t+` ${e}="${i}"`).trim():t},"")}l(f,"toAttributes");y(f,"toAttributes");var k=Object.defineProperty,m=l((p,t)=>k(p,"name",{value:t,configurable:!0}),"__name");function v(p){return document.createElement(p).constructor!==window.HTMLElement}l(v,"isRegistered");m(v,"isRegistered");function b(p,t){window&&"customElements"in window&&(v(p)||window.customElements.define(p,t))}l(b,"define");m(b,"define");var T=document.querySelector.bind(document),P=document.querySelectorAll.bind(document);var g=class extends HTMLElement{static{l(this,"ToolTip")}static observedAttributes=["content","placement","disabled","open","distance","skidding"];popup=null;arrow=null;target=null;_open=!1;_disabled=!1;get content(){return this.getAttribute("content")||""}set content(t){this.setAttribute("content",t)}get placement(){return this.getAttribute("placement")||"top"}set placement(t){this.setAttribute("placement",t)}get trigger(){return(this.getAttribute("trigger")||"hover focus").split(" ").filter(Boolean)}set trigger(t){Array.isArray(t)?this.setAttribute("trigger",t.join(" ")):this.setAttribute("trigger",t)}get disabled(){return this._disabled}set disabled(t){this._disabled=t,t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get open(){return this._open}set open(t){if(this._disabled)return;let e=this._open;this._open=t,t&&!e?this.showTooltip():!t&&e&&this.hideTooltip()}get distance(){return parseInt(this.getAttribute("distance")||"8",10)}set distance(t){this.setAttribute("distance",String(t))}get skidding(){return parseInt(this.getAttribute("skidding")||"0",10)}set skidding(t){this.setAttribute("skidding",String(t))}get hoist(){return this.hasAttribute("hoist")}set hoist(t){t?this.setAttribute("hoist",""):this.removeAttribute("hoist")}connectedCallback(){if(this.style.display="contents",this.target=this.firstElementChild,!this.target){console.warn("tool-tip: No target element found. Add a child element.");return}this.createPopup(),this.bindEvents(),this.hasAttribute("open")&&(this._open=!0,this.showTooltip())}disconnectedCallback(){this.unbindEvents(),this.popup?.remove()}attributeChangedCallback(t,e,i){if(t==="content"&&this.popup){let s=this.popup.querySelector(".body");s&&(s.textContent=i||"")}t==="placement"&&this._open&&this.positionPopup(),t==="disabled"&&(this._disabled=i!==null,this._disabled&&this._open&&this.hide()),t==="open"&&(this.open=i!==null),(t==="distance"||t==="skidding")&&this._open&&this.positionPopup()}createPopup(){this.popup=document.createElement("div"),this.popup.className="popup",this.popup.setAttribute("role","tooltip"),this.popup.setAttribute("aria-hidden","true"),this.popup.innerHTML=`
|
|
2
2
|
<div class="body">${this.content}</div>
|
|
3
3
|
<div class="arrow"></div>
|
|
4
|
-
`,this.arrow=this.popup.querySelector(".arrow"),this.hoist?document.body.appendChild(this.popup):this.appendChild(this.popup)}bindEvents(){if(!this.target)return;let t=this.trigger;t.includes("hover")&&(this.target.addEventListener("mouseenter",this.handleMouseEnter),this.target.addEventListener("mouseleave",this.handleMouseLeave)),t.includes("focus")&&(this.target.addEventListener("focus",this.handleFocus),this.target.addEventListener("blur",this.handleBlur)),t.includes("click")&&this.target.addEventListener("click",this.handleClick),this.target.addEventListener("keydown",this.handleKeyDown)}unbindEvents(){this.target&&(this.target.removeEventListener("mouseenter",this.handleMouseEnter),this.target.removeEventListener("mouseleave",this.handleMouseLeave),this.target.removeEventListener("
|
|
4
|
+
`,this.arrow=this.popup.querySelector(".arrow"),this.hoist?document.body.appendChild(this.popup):this.appendChild(this.popup)}bindEvents(){if(!this.target)return;let t=this.trigger;t.includes("hover")&&(this.target.addEventListener("mouseenter",this.handleMouseEnter),this.target.addEventListener("mouseleave",this.handleMouseLeave)),t.includes("focus")&&(this.target.addEventListener("focus",this.handleFocus),this.target.addEventListener("blur",this.handleBlur)),t.includes("click")&&this.target.addEventListener("click",this.handleClick),this.target.addEventListener("keydown",this.handleKeyDown)}unbindEvents(){this.target&&(this.target.removeEventListener("mouseenter",this.handleMouseEnter),this.target.removeEventListener("mouseleave",this.handleMouseLeave),this.target.removeEventListener("blur",this.handleBlur),this.target.removeEventListener("click",this.handleClick),this.target.removeEventListener("keydown",this.handleKeyDown))}handleMouseEnter=l(()=>{this.show()},"handleMouseEnter");handleMouseLeave=l(()=>{this.hide()},"handleMouseLeave");handleFocus=l(()=>{this.show()},"handleFocus");handleBlur=l(()=>{this.hide()},"handleBlur");handleClick=l(()=>{this._open?this.hide():this.show()},"handleClick");handleKeyDown=l(t=>{t.key==="Escape"&&this._open&&this.hide()},"handleKeyDown");showTooltip(){if(!this.popup||this._disabled)return;let t=new CustomEvent("tool-tip-show",{bubbles:!0,cancelable:!0});this.dispatchEvent(t)&&(this.popup.classList.add("visible"),this.popup.setAttribute("aria-hidden","false"),this.positionPopup(),this.dispatchEvent(new CustomEvent("tool-tip-after-show",{bubbles:!0})))}hideTooltip(){if(!this.popup)return;let t=new CustomEvent("tool-tip-hide",{bubbles:!0,cancelable:!0});this.dispatchEvent(t)&&(this.popup.classList.remove("visible"),this.popup.setAttribute("aria-hidden","true"),this.dispatchEvent(new CustomEvent("tool-tip-after-hide",{bubbles:!0})))}positionPopup(){if(!this.popup||!this.target)return;let t=this.target.getBoundingClientRect(),e=this.popup.getBoundingClientRect(),i=8,s=0,a=0,r="",n="",o="",h=this.distance,d=this.skidding,u=this.getOptimalPlacement(t,e);switch(this.popup.dataset.placement=u,u){case"top":s=t.top-e.height-h-i,a=t.left+t.width/2-e.width/2+d,r="100%",n="50%",o="translateX(-50%)";break;case"top-start":s=t.top-e.height-h-i,a=t.left+d,r="100%",n=`${Math.min(24,e.width/2)}px`,o="translateX(-50%)";break;case"top-end":s=t.top-e.height-h-i,a=t.right-e.width+d,r="100%",n=`calc(100% - ${Math.min(24,e.width/2)}px)`,o="translateX(-50%)";break;case"bottom":s=t.bottom+h+i,a=t.left+t.width/2-e.width/2+d,r="0",n="50%",o="translateX(-50%) translateY(-100%)";break;case"bottom-start":s=t.bottom+h+i,a=t.left+d,r="0",n=`${Math.min(24,e.width/2)}px`,o="translateX(-50%) translateY(-100%)";break;case"bottom-end":s=t.bottom+h+i,a=t.right-e.width+d,r="0",n=`calc(100% - ${Math.min(24,e.width/2)}px)`,o="translateX(-50%) translateY(-100%)";break;case"left":s=t.top+t.height/2-e.height/2+d,a=t.left-e.width-h-i,r="50%",n="100%",o="translateY(-50%)";break;case"left-start":s=t.top+d,a=t.left-e.width-h-i,r=`${Math.min(16,e.height/2)}px`,n="100%",o="translateY(-50%)";break;case"left-end":s=t.bottom-e.height+d,a=t.left-e.width-h-i,r=`calc(100% - ${Math.min(16,e.height/2)}px)`,n="100%",o="translateY(-50%)";break;case"right":s=t.top+t.height/2-e.height/2+d,a=t.right+h+i,r="50%",n="0",o="translateY(-50%) translateX(-100%)";break;case"right-start":s=t.top+d,a=t.right+h+i,r=`${Math.min(16,e.height/2)}px`,n="0",o="translateY(-50%) translateX(-100%)";break;case"right-end":s=t.bottom-e.height+d,a=t.right+h+i,r=`calc(100% - ${Math.min(16,e.height/2)}px)`,n="0",o="translateY(-50%) translateX(-100%)";break}this.hoist&&(s+=window.scrollY,a+=window.scrollX),this.popup.style.top=`${s}px`,this.popup.style.left=`${a}px`,this.arrow&&(this.arrow.style.top=r,this.arrow.style.left=n,this.arrow.style.transform=o)}getOptimalPlacement(t,e){let i=this.placement,s=window.innerWidth,a=window.innerHeight,r=this.distance,n=8,o={top:t.top-e.height-r-n>0,bottom:t.bottom+e.height+r+n<a,left:t.left-e.width-r-n>0,right:t.right+e.width+r+n<s},h=i.split("-")[0];if(o[h])return i;let u={top:"bottom",bottom:"top",left:"right",right:"left"}[h];if(o[u]){let c=i.includes("-")?i.split("-")[1]:"";return c?`${u}-${c}`:u}for(let c of["top","bottom","left","right"])if(o[c])return c;return i}show(){this._disabled||(this.open=!0)}hide(){this.open=!1}};b("tool-tip",g);export{g as ToolTip};
|
|
5
5
|
//# sourceMappingURL=index.min.js.map
|
package/dist/index.min.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../src/index.ts"],
|
|
4
|
-
"sourcesContent": ["// for document.querySelector\ndeclare global {\n interface HTMLElementTagNameMap {\n 'tool-tip':ToolTip\n }\n}\n\nexport type Placement =\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'left'\n | 'left-start'\n | 'left-end'\n\nexport type Trigger = 'hover'|'focus'|'click'|'manual'\n\nexport class ToolTip extends HTMLElement {\n static observedAttributes = ['content', 'placement', 'disabled',\n 'open', 'distance', 'skidding']\n\n private popup:HTMLDivElement|null = null\n private arrow:HTMLDivElement|null = null\n private target:HTMLElement|null = null\n\n private _open = false\n private _disabled = false\n\n get content ():string {\n return this.getAttribute('content') || ''\n }\n\n set content (value:string) {\n this.setAttribute('content', value)\n }\n\n get placement ():Placement {\n return (this.getAttribute('placement') as Placement) || 'top'\n }\n\n set placement (value:Placement) {\n this.setAttribute('placement', value)\n }\n\n get trigger ():Trigger[] {\n const attr = this.getAttribute('trigger') || 'hover focus'\n return attr.split(' ').filter(Boolean) as Trigger[]\n }\n\n set trigger (value:Trigger[]|string) {\n if (Array.isArray(value)) {\n this.setAttribute('trigger', value.join(' '))\n } else {\n this.setAttribute('trigger', value)\n }\n }\n\n get disabled (): boolean {\n return this._disabled\n }\n\n set disabled (value: boolean) {\n this._disabled = value\n if (value) {\n this.setAttribute('disabled', '')\n } else {\n this.removeAttribute('disabled')\n }\n }\n\n get open (): boolean {\n return this._open\n }\n\n set open (value: boolean) {\n if (this._disabled) return\n const wasOpen = this._open\n this._open = value\n\n if (value && !wasOpen) {\n this.showTooltip()\n } else if (!value && wasOpen) {\n this.hideTooltip()\n }\n }\n\n get distance (): number {\n return parseInt(this.getAttribute('distance') || '8', 10)\n }\n\n set distance (value: number) {\n this.setAttribute('distance', String(value))\n }\n\n get skidding (): number {\n return parseInt(this.getAttribute('skidding') || '0', 10)\n }\n\n set skidding (value: number) {\n this.setAttribute('skidding', String(value))\n }\n\n get hoist (): boolean {\n return this.hasAttribute('hoist')\n }\n\n set hoist (value: boolean) {\n if (value) {\n this.setAttribute('hoist', '')\n } else {\n this.removeAttribute('hoist')\n }\n }\n\n connectedCallback () {\n // Use display: contents so the tooltip doesn't affect layout\n this.style.display = 'contents'\n\n // Find the target element (first child element)\n this.target = this.firstElementChild as HTMLElement\n\n if (!this.target) {\n console.warn('tool-tip: No target element found. ' +\n 'Add a child element.')\n return\n }\n\n // Create the popup element\n this.createPopup()\n\n // Bind event handlers\n this.bindEvents()\n\n // Check if open attribute is set\n if (this.hasAttribute('open')) {\n this._open = true\n this.showTooltip()\n }\n }\n\n disconnectedCallback () {\n this.unbindEvents()\n this.popup?.remove()\n }\n\n attributeChangedCallback (\n name:string,\n _oldValue:string|null,\n newValue:string|null\n ) {\n if (name === 'content' && this.popup) {\n const body = this.popup.querySelector('.body')\n if (body) {\n body.textContent = newValue || ''\n }\n }\n\n if (name === 'placement' && this._open) {\n this.positionPopup()\n }\n\n if (name === 'disabled') {\n this._disabled = newValue !== null\n if (this._disabled && this._open) {\n this.hide()\n }\n }\n\n if (name === 'open') {\n this.open = newValue !== null\n }\n\n if ((name === 'distance' || name === 'skidding') && this._open) {\n this.positionPopup()\n }\n }\n\n private createPopup () {\n this.popup = document.createElement('div')\n this.popup.className = 'popup'\n this.popup.setAttribute('role', 'tooltip')\n this.popup.setAttribute('aria-hidden', 'true')\n this.popup.innerHTML = `\n <div class=\"body\">${this.content}</div>\n <div class=\"arrow\"></div>\n `\n\n this.arrow = this.popup.querySelector('.arrow')\n\n // Append to body if hoisted, otherwise to this element's parent\n if (this.hoist) {\n document.body.appendChild(this.popup)\n } else {\n this.appendChild(this.popup)\n }\n }\n\n private bindEvents () {\n if (!this.target) return\n\n const triggers = this.trigger\n\n if (triggers.includes('hover')) {\n this.target.addEventListener('mouseenter', this.handleMouseEnter)\n this.target.addEventListener('mouseleave', this.handleMouseLeave)\n }\n\n if (triggers.includes('focus')) {\n this.target.addEventListener('focus', this.handleFocus)\n this.target.addEventListener('blur', this.handleBlur)\n }\n\n if (triggers.includes('click')) {\n this.target.addEventListener('click', this.handleClick)\n }\n\n // Add keyboard support\n this.target.addEventListener('keydown', this.handleKeyDown)\n }\n\n private unbindEvents () {\n if (!this.target) return\n\n this.target.removeEventListener('mouseenter', this.handleMouseEnter)\n this.target.removeEventListener('mouseleave', this.handleMouseLeave)\n this.target.removeEventListener('focus', this.handleFocus)\n this.target.removeEventListener('blur', this.handleBlur)\n this.target.removeEventListener('click', this.handleClick)\n this.target.removeEventListener('keydown', this.handleKeyDown)\n }\n\n private handleMouseEnter = () => {\n this.show()\n }\n\n private handleMouseLeave = () => {\n this.hide()\n }\n\n private handleFocus = () => {\n this.show()\n }\n\n private handleBlur = () => {\n this.hide()\n }\n\n private handleClick = () => {\n if (this._open) {\n this.hide()\n } else {\n this.show()\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // Close tooltip on Escape\n if (event.key === 'Escape' && this._open) {\n this.hide()\n }\n }\n\n private showTooltip () {\n if (!this.popup || this._disabled) return\n\n // Emit show event\n const showEvent = new CustomEvent('tool-tip-show', {\n bubbles: true,\n cancelable: true,\n })\n if (!this.dispatchEvent(showEvent)) return\n\n this.popup.classList.add('visible')\n this.popup.setAttribute('aria-hidden', 'false')\n\n // Position the popup\n this.positionPopup()\n\n // Emit after-show event\n this.dispatchEvent(new CustomEvent('tool-tip-after-show', {\n bubbles: true\n }))\n }\n\n private hideTooltip () {\n if (!this.popup) return\n\n // Emit hide event\n const hideEvent = new CustomEvent('tool-tip-hide', {\n bubbles: true,\n cancelable: true,\n })\n if (!this.dispatchEvent(hideEvent)) return\n\n this.popup.classList.remove('visible')\n this.popup.setAttribute('aria-hidden', 'true')\n\n // Emit after-hide event\n this.dispatchEvent(new CustomEvent('tool-tip-after-hide', {\n bubbles: true\n }))\n }\n\n private positionPopup () {\n if (!this.popup || !this.target) return\n\n const targetRect = this.target.getBoundingClientRect()\n const popupRect = this.popup.getBoundingClientRect()\n const arrowSize = 8\n\n let top = 0\n let left = 0\n let arrowTop = ''\n let arrowLeft = ''\n let arrowTransform = ''\n\n const distance = this.distance\n const skidding = this.skidding\n const placement = this.getOptimalPlacement(targetRect, popupRect)\n\n // Set data attribute for CSS styling\n this.popup.dataset.placement = placement\n\n switch (placement) {\n case 'top':\n top = targetRect.top - popupRect.height - distance - arrowSize\n left = targetRect.left + (targetRect.width / 2) -\n (popupRect.width / 2) + skidding\n arrowTop = '100%'\n arrowLeft = '50%'\n arrowTransform = 'translateX(-50%)'\n break\n case 'top-start':\n top = targetRect.top - popupRect.height - distance - arrowSize\n left = targetRect.left + skidding\n arrowTop = '100%'\n arrowLeft = `${Math.min(24, popupRect.width / 2)}px`\n arrowTransform = 'translateX(-50%)'\n break\n case 'top-end':\n top = targetRect.top - popupRect.height - distance - arrowSize\n left = targetRect.right - popupRect.width + skidding\n arrowTop = '100%'\n arrowLeft = `calc(100% - ${Math.min(24, popupRect.width / 2)}px)`\n arrowTransform = 'translateX(-50%)'\n break\n case 'bottom':\n top = targetRect.bottom + distance + arrowSize\n left = targetRect.left + (targetRect.width / 2) -\n (popupRect.width / 2) + skidding\n arrowTop = '0'\n arrowLeft = '50%'\n arrowTransform = 'translateX(-50%) translateY(-100%)'\n break\n case 'bottom-start':\n top = targetRect.bottom + distance + arrowSize\n left = targetRect.left + skidding\n arrowTop = '0'\n arrowLeft = `${Math.min(24, popupRect.width / 2)}px`\n arrowTransform = 'translateX(-50%) translateY(-100%)'\n break\n case 'bottom-end':\n top = targetRect.bottom + distance + arrowSize\n left = targetRect.right - popupRect.width + skidding\n arrowTop = '0'\n arrowLeft = `calc(100% - ${Math.min(24, popupRect.width / 2)}px)`\n arrowTransform = 'translateX(-50%) translateY(-100%)'\n break\n case 'left':\n top = targetRect.top + (targetRect.height / 2) -\n (popupRect.height / 2) + skidding\n left = targetRect.left - popupRect.width - distance - arrowSize\n arrowTop = '50%'\n arrowLeft = '100%'\n arrowTransform = 'translateY(-50%)'\n break\n case 'left-start':\n top = targetRect.top + skidding\n left = targetRect.left - popupRect.width - distance - arrowSize\n arrowTop = `${Math.min(16, popupRect.height / 2)}px`\n arrowLeft = '100%'\n arrowTransform = 'translateY(-50%)'\n break\n case 'left-end':\n top = targetRect.bottom - popupRect.height + skidding\n left = targetRect.left - popupRect.width - distance - arrowSize\n arrowTop = `calc(100% - ${Math.min(16, popupRect.height / 2)}px)`\n arrowLeft = '100%'\n arrowTransform = 'translateY(-50%)'\n break\n case 'right':\n top = targetRect.top + (targetRect.height / 2) -\n (popupRect.height / 2) + skidding\n left = targetRect.right + distance + arrowSize\n arrowTop = '50%'\n arrowLeft = '0'\n arrowTransform = 'translateY(-50%) translateX(-100%)'\n break\n case 'right-start':\n top = targetRect.top + skidding\n left = targetRect.right + distance + arrowSize\n arrowTop = `${Math.min(16, popupRect.height / 2)}px`\n arrowLeft = '0'\n arrowTransform = 'translateY(-50%) translateX(-100%)'\n break\n case 'right-end':\n top = targetRect.bottom - popupRect.height + skidding\n left = targetRect.right + distance + arrowSize\n arrowTop = `calc(100% - ${Math.min(16, popupRect.height / 2)}px)`\n arrowLeft = '0'\n arrowTransform = 'translateY(-50%) translateX(-100%)'\n break\n }\n\n // Adjust for scroll position\n if (this.hoist) {\n top += window.scrollY\n left += window.scrollX\n }\n\n // Apply position\n this.popup.style.top = `${top}px`\n this.popup.style.left = `${left}px`\n\n // Position the arrow\n if (this.arrow) {\n this.arrow.style.top = arrowTop\n this.arrow.style.left = arrowLeft\n this.arrow.style.transform = arrowTransform\n }\n }\n\n private getOptimalPlacement (targetRect:DOMRect, popupRect:DOMRect):Placement {\n const placement = this.placement\n const viewportWidth = window.innerWidth\n const viewportHeight = window.innerHeight\n const distance = this.distance\n const arrowSize = 8\n\n // Check if the preferred placement fits\n const fits = {\n top: targetRect.top - popupRect.height - distance - arrowSize > 0,\n bottom: (targetRect.bottom + popupRect.height + distance +\n arrowSize < viewportHeight),\n left: targetRect.left - popupRect.width - distance - arrowSize > 0,\n right: (targetRect.right + popupRect.width + distance +\n arrowSize < viewportWidth),\n }\n\n // Get the base direction from the placement\n const baseDirection = placement.split('-')[0] as 'top'|\n 'bottom'|\n 'left'|\n 'right'\n\n // If preferred placement fits, use it\n if (fits[baseDirection]) {\n return placement\n }\n\n // Find the best alternative\n const opposites: Record<string, string> = {\n top: 'bottom',\n bottom: 'top',\n left: 'right',\n right: 'left',\n }\n\n const opposite = opposites[baseDirection] as\n 'top'|'bottom'|'left'|'right'\n if (fits[opposite]) {\n // Return the opposite with the same alignment\n const alignment = (placement.includes('-') ?\n placement.split('-')[1] :\n '')\n return (alignment ?\n `${opposite}-${alignment}` :\n opposite) as Placement\n }\n\n // Fall back to a direction that fits\n for (const dir of ['top', 'bottom', 'left', 'right'] as const) {\n if (fits[dir]) {\n return dir\n }\n }\n\n // If nothing fits, return original placement\n return placement\n }\n\n /**\n * Programmatically show the tooltip\n */\n show () {\n if (this._disabled) return\n this.open = true\n }\n\n /**\n * Programmatically hide the tooltip\n */\n hide () {\n this.open = false\n }\n}\n\nif ('customElements' in window) {\n customElements.define('tool-tip', ToolTip)\n}\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["ToolTip", "__name", "value", "wasOpen", "name", "_oldValue", "newValue", "body", "triggers", "event", "showEvent", "hideEvent", "targetRect", "popupRect", "arrowSize", "top", "left", "arrowTop", "arrowLeft", "arrowTransform", "distance", "skidding", "placement", "viewportWidth", "viewportHeight", "fits", "baseDirection", "opposite", "alignment", "dir"]
|
|
3
|
+
"sources": ["../node_modules/@substrate-system/web-component/src/attributes.ts", "../node_modules/@substrate-system/web-component/src/util.ts", "../src/index.ts"],
|
|
4
|
+
"sourcesContent": ["export type Attrs = Record<string, undefined|null|string|number|boolean|(string|number)[]>\n\n/**\n * Transform an object into an HTML attributes string. The object should be\n * like `{ attributeName: value }`.\n *\n * @param attrs An object for the attributes.\n * @returns {string} A string suitable for use as HTML attributes.\n */\nexport function toAttributes (attrs:Attrs):string {\n return Object.keys(attrs).reduce((acc, k) => {\n const value = attrs[k]\n if (!value) return acc\n\n if (typeof value === 'boolean') {\n if (value) return (acc + ` ${k}`).trim()\n return acc\n }\n\n if (Array.isArray(value)) {\n return (acc + ` ${k}=\"${value.join(' ')}\"`)\n }\n\n return (acc + ` ${k}=\"${value}\"`).trim()\n }, '')\n}\n", "export { toAttributes } from './attributes.js'\n\n/**\n * Check if the given tag name has been registered.\n *\n * @see {@link https://stackoverflow.com/a/28210364 stackoverflow}\n * @param {string} elName The custom element tag name.\n * @returns {boolean} True if the given name has been registered already.\n */\nexport function isRegistered (elName:string):boolean {\n return document.createElement(elName).constructor !== window.HTMLElement\n}\n\nexport function define (name:string, element:CustomElementConstructor) {\n if (!window) return\n if (!('customElements' in window)) return\n\n if (!isRegistered(name)) {\n window.customElements.define(name, element)\n }\n}\n\nexport const qs = document.querySelector.bind(document)\nexport const qsa = document.querySelectorAll.bind(document)\n", "import { define } from '@substrate-system/web-component/util'\n\n// for document.querySelector\ndeclare global {\n interface HTMLElementTagNameMap {\n 'tool-tip':ToolTip\n }\n}\n\nexport type Placement =\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'left'\n | 'left-start'\n | 'left-end'\n\nexport type Trigger = 'hover'|'focus'|'click'|'manual'\n\nexport class ToolTip extends HTMLElement {\n static observedAttributes = ['content', 'placement', 'disabled',\n 'open', 'distance', 'skidding']\n\n private popup:HTMLDivElement|null = null\n private arrow:HTMLDivElement|null = null\n private target:HTMLElement|null = null\n\n private _open = false\n private _disabled = false\n\n get content ():string {\n return this.getAttribute('content') || ''\n }\n\n set content (value:string) {\n this.setAttribute('content', value)\n }\n\n get placement ():Placement {\n return (this.getAttribute('placement') as Placement) || 'top'\n }\n\n set placement (value:Placement) {\n this.setAttribute('placement', value)\n }\n\n get trigger ():Trigger[] {\n const attr = this.getAttribute('trigger') || 'hover focus'\n return attr.split(' ').filter(Boolean) as Trigger[]\n }\n\n set trigger (value:Trigger[]|string) {\n if (Array.isArray(value)) {\n this.setAttribute('trigger', value.join(' '))\n } else {\n this.setAttribute('trigger', value)\n }\n }\n\n get disabled (): boolean {\n return this._disabled\n }\n\n set disabled (value: boolean) {\n this._disabled = value\n if (value) {\n this.setAttribute('disabled', '')\n } else {\n this.removeAttribute('disabled')\n }\n }\n\n get open ():boolean {\n return this._open\n }\n\n set open (value:boolean) {\n if (this._disabled) return\n const wasOpen = this._open\n this._open = value\n\n if (value && !wasOpen) {\n this.showTooltip()\n } else if (!value && wasOpen) {\n this.hideTooltip()\n }\n }\n\n get distance ():number {\n return parseInt(this.getAttribute('distance') || '8', 10)\n }\n\n set distance (value:number) {\n this.setAttribute('distance', String(value))\n }\n\n get skidding ():number {\n return parseInt(this.getAttribute('skidding') || '0', 10)\n }\n\n set skidding (value:number) {\n this.setAttribute('skidding', String(value))\n }\n\n get hoist ():boolean {\n return this.hasAttribute('hoist')\n }\n\n set hoist (value:boolean) {\n if (value) {\n this.setAttribute('hoist', '')\n } else {\n this.removeAttribute('hoist')\n }\n }\n\n connectedCallback () {\n // Use display: contents so the tooltip doesn't affect layout\n this.style.display = 'contents'\n\n // Find the target element (first child element)\n this.target = this.firstElementChild as HTMLElement\n\n if (!this.target) {\n console.warn('tool-tip: No target element found. ' +\n 'Add a child element.')\n return\n }\n\n // Create the popup element\n this.createPopup()\n\n // Bind event handlers\n this.bindEvents()\n\n // Check if open attribute is set\n if (this.hasAttribute('open')) {\n this._open = true\n this.showTooltip()\n }\n }\n\n disconnectedCallback () {\n this.unbindEvents()\n this.popup?.remove()\n }\n\n attributeChangedCallback (\n name:string,\n _oldValue:string|null,\n newValue:string|null\n ) {\n if (name === 'content' && this.popup) {\n const body = this.popup.querySelector('.body')\n if (body) {\n body.textContent = newValue || ''\n }\n }\n\n if (name === 'placement' && this._open) {\n this.positionPopup()\n }\n\n if (name === 'disabled') {\n this._disabled = newValue !== null\n if (this._disabled && this._open) {\n this.hide()\n }\n }\n\n if (name === 'open') {\n this.open = newValue !== null\n }\n\n if ((name === 'distance' || name === 'skidding') && this._open) {\n this.positionPopup()\n }\n }\n\n private createPopup () {\n this.popup = document.createElement('div')\n this.popup.className = 'popup'\n this.popup.setAttribute('role', 'tooltip')\n this.popup.setAttribute('aria-hidden', 'true')\n this.popup.innerHTML = `\n <div class=\"body\">${this.content}</div>\n <div class=\"arrow\"></div>\n `\n\n this.arrow = this.popup.querySelector('.arrow')\n\n // Append to body if hoisted, otherwise to this element's parent\n if (this.hoist) {\n document.body.appendChild(this.popup)\n } else {\n this.appendChild(this.popup)\n }\n }\n\n private bindEvents () {\n if (!this.target) return\n\n const triggers = this.trigger\n\n if (triggers.includes('hover')) {\n this.target.addEventListener('mouseenter', this.handleMouseEnter)\n this.target.addEventListener('mouseleave', this.handleMouseLeave)\n }\n\n if (triggers.includes('focus')) {\n this.target.addEventListener('focus', this.handleFocus)\n this.target.addEventListener('blur', this.handleBlur)\n }\n\n if (triggers.includes('click')) {\n this.target.addEventListener('click', this.handleClick)\n }\n\n // Add keyboard support\n this.target.addEventListener('keydown', this.handleKeyDown)\n }\n\n private unbindEvents () {\n if (!this.target) return\n\n this.target.removeEventListener('mouseenter', this.handleMouseEnter)\n this.target.removeEventListener('mouseleave', this.handleMouseLeave)\n this.target.removeEventListener('blur', this.handleBlur)\n this.target.removeEventListener('click', this.handleClick)\n this.target.removeEventListener('keydown', this.handleKeyDown)\n }\n\n private handleMouseEnter = () => {\n this.show()\n }\n\n private handleMouseLeave = () => {\n this.hide()\n }\n\n private handleFocus = () => {\n this.show()\n }\n\n private handleBlur = () => {\n this.hide()\n }\n\n private handleClick = () => {\n if (this._open) {\n this.hide()\n } else {\n this.show()\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // Close tooltip on Escape\n if (event.key === 'Escape' && this._open) {\n this.hide()\n }\n }\n\n private showTooltip () {\n if (!this.popup || this._disabled) return\n\n // Emit show event\n const showEvent = new CustomEvent('tool-tip-show', {\n bubbles: true,\n cancelable: true,\n })\n if (!this.dispatchEvent(showEvent)) return\n\n this.popup.classList.add('visible')\n this.popup.setAttribute('aria-hidden', 'false')\n\n // Position the popup\n this.positionPopup()\n\n // Emit after-show event\n this.dispatchEvent(new CustomEvent('tool-tip-after-show', {\n bubbles: true\n }))\n }\n\n private hideTooltip () {\n if (!this.popup) return\n\n // Emit hide event\n const hideEvent = new CustomEvent('tool-tip-hide', {\n bubbles: true,\n cancelable: true,\n })\n if (!this.dispatchEvent(hideEvent)) return\n\n this.popup.classList.remove('visible')\n this.popup.setAttribute('aria-hidden', 'true')\n\n // Emit after-hide event\n this.dispatchEvent(new CustomEvent('tool-tip-after-hide', {\n bubbles: true\n }))\n }\n\n private positionPopup () {\n if (!this.popup || !this.target) return\n\n const targetRect = this.target.getBoundingClientRect()\n const popupRect = this.popup.getBoundingClientRect()\n const arrowSize = 8\n\n let top = 0\n let left = 0\n let arrowTop = ''\n let arrowLeft = ''\n let arrowTransform = ''\n\n const distance = this.distance\n const skidding = this.skidding\n const placement = this.getOptimalPlacement(targetRect, popupRect)\n\n // Set data attribute for CSS styling\n this.popup.dataset.placement = placement\n\n switch (placement) {\n case 'top':\n top = targetRect.top - popupRect.height - distance - arrowSize\n left = targetRect.left + (targetRect.width / 2) -\n (popupRect.width / 2) + skidding\n arrowTop = '100%'\n arrowLeft = '50%'\n arrowTransform = 'translateX(-50%)'\n break\n case 'top-start':\n top = targetRect.top - popupRect.height - distance - arrowSize\n left = targetRect.left + skidding\n arrowTop = '100%'\n arrowLeft = `${Math.min(24, popupRect.width / 2)}px`\n arrowTransform = 'translateX(-50%)'\n break\n case 'top-end':\n top = targetRect.top - popupRect.height - distance - arrowSize\n left = targetRect.right - popupRect.width + skidding\n arrowTop = '100%'\n arrowLeft = `calc(100% - ${Math.min(24, popupRect.width / 2)}px)`\n arrowTransform = 'translateX(-50%)'\n break\n case 'bottom':\n top = targetRect.bottom + distance + arrowSize\n left = targetRect.left + (targetRect.width / 2) -\n (popupRect.width / 2) + skidding\n arrowTop = '0'\n arrowLeft = '50%'\n arrowTransform = 'translateX(-50%) translateY(-100%)'\n break\n case 'bottom-start':\n top = targetRect.bottom + distance + arrowSize\n left = targetRect.left + skidding\n arrowTop = '0'\n arrowLeft = `${Math.min(24, popupRect.width / 2)}px`\n arrowTransform = 'translateX(-50%) translateY(-100%)'\n break\n case 'bottom-end':\n top = targetRect.bottom + distance + arrowSize\n left = targetRect.right - popupRect.width + skidding\n arrowTop = '0'\n arrowLeft = `calc(100% - ${Math.min(24, popupRect.width / 2)}px)`\n arrowTransform = 'translateX(-50%) translateY(-100%)'\n break\n case 'left':\n top = targetRect.top + (targetRect.height / 2) -\n (popupRect.height / 2) + skidding\n left = targetRect.left - popupRect.width - distance - arrowSize\n arrowTop = '50%'\n arrowLeft = '100%'\n arrowTransform = 'translateY(-50%)'\n break\n case 'left-start':\n top = targetRect.top + skidding\n left = targetRect.left - popupRect.width - distance - arrowSize\n arrowTop = `${Math.min(16, popupRect.height / 2)}px`\n arrowLeft = '100%'\n arrowTransform = 'translateY(-50%)'\n break\n case 'left-end':\n top = targetRect.bottom - popupRect.height + skidding\n left = targetRect.left - popupRect.width - distance - arrowSize\n arrowTop = `calc(100% - ${Math.min(16, popupRect.height / 2)}px)`\n arrowLeft = '100%'\n arrowTransform = 'translateY(-50%)'\n break\n case 'right':\n top = targetRect.top + (targetRect.height / 2) -\n (popupRect.height / 2) + skidding\n left = targetRect.right + distance + arrowSize\n arrowTop = '50%'\n arrowLeft = '0'\n arrowTransform = 'translateY(-50%) translateX(-100%)'\n break\n case 'right-start':\n top = targetRect.top + skidding\n left = targetRect.right + distance + arrowSize\n arrowTop = `${Math.min(16, popupRect.height / 2)}px`\n arrowLeft = '0'\n arrowTransform = 'translateY(-50%) translateX(-100%)'\n break\n case 'right-end':\n top = targetRect.bottom - popupRect.height + skidding\n left = targetRect.right + distance + arrowSize\n arrowTop = `calc(100% - ${Math.min(16, popupRect.height / 2)}px)`\n arrowLeft = '0'\n arrowTransform = 'translateY(-50%) translateX(-100%)'\n break\n }\n\n // Adjust for scroll position\n if (this.hoist) {\n top += window.scrollY\n left += window.scrollX\n }\n\n // Apply position\n this.popup.style.top = `${top}px`\n this.popup.style.left = `${left}px`\n\n // Position the arrow\n if (this.arrow) {\n this.arrow.style.top = arrowTop\n this.arrow.style.left = arrowLeft\n this.arrow.style.transform = arrowTransform\n }\n }\n\n private getOptimalPlacement (targetRect:DOMRect, popupRect:DOMRect):Placement {\n const placement = this.placement\n const viewportWidth = window.innerWidth\n const viewportHeight = window.innerHeight\n const distance = this.distance\n const arrowSize = 8\n\n // Check if the preferred placement fits\n const fits = {\n top: targetRect.top - popupRect.height - distance - arrowSize > 0,\n bottom: (targetRect.bottom + popupRect.height + distance +\n arrowSize < viewportHeight),\n left: targetRect.left - popupRect.width - distance - arrowSize > 0,\n right: (targetRect.right + popupRect.width + distance +\n arrowSize < viewportWidth),\n }\n\n // Get the base direction from the placement\n const baseDirection = placement.split('-')[0] as 'top'|\n 'bottom'|\n 'left'|\n 'right'\n\n // If preferred placement fits, use it\n if (fits[baseDirection]) {\n return placement\n }\n\n // Find the best alternative\n const opposites: Record<string, string> = {\n top: 'bottom',\n bottom: 'top',\n left: 'right',\n right: 'left',\n }\n\n const opposite = opposites[baseDirection] as\n 'top'|'bottom'|'left'|'right'\n if (fits[opposite]) {\n // Return the opposite with the same alignment\n const alignment = (placement.includes('-') ?\n placement.split('-')[1] :\n '')\n return (alignment ?\n `${opposite}-${alignment}` :\n opposite) as Placement\n }\n\n // Fall back to a direction that fits\n for (const dir of ['top', 'bottom', 'left', 'right'] as const) {\n if (fits[dir]) {\n return dir\n }\n }\n\n // If nothing fits, return original placement\n return placement\n }\n\n /**\n * Programmatically show the tooltip\n */\n show () {\n if (this._disabled) return\n this.open = true\n }\n\n /**\n * Programmatically hide the tooltip\n */\n hide () {\n this.open = false\n }\n}\n\ndefine('tool-tip', ToolTip)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["toAttributes", "attrs", "acc", "k", "value", "__name", "isRegistered", "elName", "__name", "define", "name", "element", "qs", "qsa", "ToolTip", "__name", "value", "wasOpen", "name", "_oldValue", "newValue", "body", "triggers", "event", "showEvent", "hideEvent", "targetRect", "popupRect", "arrowSize", "top", "left", "arrowTop", "arrowLeft", "arrowTransform", "distance", "skidding", "placement", "viewportWidth", "viewportHeight", "fits", "baseDirection", "opposite", "alignment", "dir", "define"]
|
|
7
7
|
}
|
package/dist/meta.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"inputs": {
|
|
3
3
|
"src/index.ts": {
|
|
4
|
-
"bytes":
|
|
4
|
+
"bytes": 15584,
|
|
5
5
|
"imports": [],
|
|
6
6
|
"format": "esm"
|
|
7
7
|
}
|
|
@@ -11,20 +11,26 @@
|
|
|
11
11
|
"imports": [],
|
|
12
12
|
"exports": [],
|
|
13
13
|
"inputs": {},
|
|
14
|
-
"bytes":
|
|
14
|
+
"bytes": 24057
|
|
15
15
|
},
|
|
16
16
|
"dist/index.js": {
|
|
17
|
-
"imports": [
|
|
17
|
+
"imports": [
|
|
18
|
+
{
|
|
19
|
+
"path": "@substrate-system/web-component/util",
|
|
20
|
+
"kind": "import-statement",
|
|
21
|
+
"external": true
|
|
22
|
+
}
|
|
23
|
+
],
|
|
18
24
|
"exports": [
|
|
19
25
|
"ToolTip"
|
|
20
26
|
],
|
|
21
27
|
"entryPoint": "src/index.ts",
|
|
22
28
|
"inputs": {
|
|
23
29
|
"src/index.ts": {
|
|
24
|
-
"bytesInOutput":
|
|
30
|
+
"bytesInOutput": 11973
|
|
25
31
|
}
|
|
26
32
|
},
|
|
27
|
-
"bytes":
|
|
33
|
+
"bytes": 12158
|
|
28
34
|
}
|
|
29
35
|
}
|
|
30
36
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@substrate-system/tool-tip",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.2",
|
|
4
4
|
"description": "Tooltips for when you hover",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
@@ -46,7 +46,9 @@
|
|
|
46
46
|
"postversion": "git push --follow-tags && npm publish",
|
|
47
47
|
"prepublishOnly": "npm run build"
|
|
48
48
|
},
|
|
49
|
-
"dependencies": {
|
|
49
|
+
"dependencies": {
|
|
50
|
+
"@substrate-system/web-component": "^0.0.40"
|
|
51
|
+
},
|
|
50
52
|
"devDependencies": {
|
|
51
53
|
"@substrate-system/debug": "^0.9.32",
|
|
52
54
|
"@substrate-system/dom": "^0.1.13",
|