@travelopia/web-components 0.8.0 → 0.9.0

package/dist/declarations.d.ts

@@ -1335,3 +1335,95 @@ export class TPToggleAttributeElement extends HTMLElement {
     getAncestorContext(): Document | HTMLElement;
 }
 
+/**
+ * TP Tooltip Arrow.
+ */
+export class TPTooltipArrow extends HTMLElement {
+}
+
+/**
+ * TP Tooltip Trigger.
+ */
+export class TPTooltipTrigger extends HTMLElement {
+    /**
+     * Constructor.
+     */
+    constructor();
+    /**
+     * Toggle the tooltip.
+     */
+    toggleTooltip(): void;
+    /**
+     * Show the tooltip.
+     */
+    showTooltip(): void;
+    /**
+     * Hide the tooltip.
+     */
+    hideTooltip(): void;
+    /**
+     * Get the content of the tooltip.
+     *
+     * @return {Node|null} The content of the tooltip.
+     */
+    getContent(): Node | null;
+    /**
+     * Handles the scroll outside of the tooltip.
+     *
+     * @param { Event } evt The event object.
+     */
+    handleWindowScroll(evt: Event): void;
+}
+
+/**
+ * Internal dependencies.
+ */
+import { TPTooltipTrigger } from './tp-tooltip-trigger';
+/**
+ * TP Tooltip.
+ */
+export class TPTooltip extends HTMLElement {
+    /**
+     * Properties.
+     */
+    protected trigger: TPTooltipTrigger | null;
+    /**
+     * Constructor.
+     */
+    constructor();
+    /**
+     * Get offset.
+     */
+    get offset(): number;
+    /**
+     * Set offset.
+     */
+    set offset(offset: number);
+    /**
+     * Make this tooltip a popover, if it isn't already.
+     */
+    makePopover(): void;
+    /**
+     * Set the trigger.
+     *
+     * @param {HTMLElement} trigger The trigger node.
+     */
+    setTrigger(trigger: TPTooltipTrigger): void;
+    /**
+     * Set the content for our tooltip.
+     */
+    setContent(): void;
+    /**
+     * Set the position of the tooltip.
+     */
+    setPosition(): void;
+    /**
+     * Show the tooltip.
+     */
+    show(): void;
+    /**
+     * Hide the tooltip.
+     */
+    hide(): void;
+}
+

package/dist/tooltip/index.js

@@ -1,2 +1,2 @@
-(()=>{"use strict";class t extends HTMLElement{constructor(){super(),this.trigger=null,this.makePopover()}makePopover(){this.getAttribute("popover")||this.setAttribute("popover","popover")}setTrigger(t){this.trigger=t}setContent(){var t,e,i;const o=null!==(e=null===(t=this.trigger)||void 0===t?void 0:t.getContent())&&void 0!==e?e:null;o&&(null===(i=this.querySelector("slot"))||void 0===i||i.replaceChildren(o))}setPosition(){if(!this.trigger)return;const{height:t,width:e}=this.getBoundingClientRect(),{x:i,y:o,width:s,height:r}=this.trigger.getBoundingClientRect();let n=0;const l=this.querySelector("tp-tooltop-arrow");l&&({height:n}=l.getBoundingClientRect()),o>t+this.trigger.offset+n?(this.style.top=o-t-this.trigger.offset-n/2+"px",null==l||l.setAttribute("position","bottom")):(this.style.top=`${o+r+this.trigger.offset+n/2}px`,null==l||l.setAttribute("position","top")),i+s/2>e/2&&(this.style.left=i+s/2-e/2+"px")}show(){this.setContent(),this.setPosition(),this.setAttribute("show","yes")}hide(){this.removeAttribute("show")}}class e extends HTMLElement{constructor(){super(),this.addEventListener("mouseenter",this.showTooltip.bind(this)),this.addEventListener("mouseleave",this.hideTooltip.bind(this))}get offset(){var t;return parseInt(null!==(t=this.getAttribute("offset"))&&void 0!==t?t:"0")}set offset(t){t?this.setAttribute("offset",t.toString()):this.removeAttribute("offset")}showTooltip(){var t;const e=null!==(t=this.getAttribute("tooltip"))&&void 0!==t?t:"";if(""===e)return;const i=document.querySelector(`#${e}`);null==i||i.setTrigger(this),null==i||i.show()}hideTooltip(){var t;const e=null!==(t=this.getAttribute("tooltip"))&&void 0!==t?t:"";if(""===e)return;const i=document.querySelector(`#${e}`);null==i||i.hide()}getContent(){const t=this.querySelector("template");return t?t.content.cloneNode(!0):null}}class i extends HTMLElement{}customElements.define("tp-tooltip",t),customElements.define("tp-tooltip-trigger",e),customElements.define("tp-tooltip-arrow",i)})();
+(()=>{"use strict";class t extends HTMLElement{constructor(){super(),this.trigger=null,this.makePopover()}get offset(){var t;return parseInt(null!==(t=this.getAttribute("offset"))&&void 0!==t?t:"0")}set offset(t){t?this.setAttribute("offset",t.toString()):this.removeAttribute("offset")}makePopover(){this.getAttribute("popover")||this.setAttribute("popover","")}setTrigger(t){this.trigger=t}setContent(){var t,e,i;const o=null!==(e=null===(t=this.trigger)||void 0===t?void 0:t.getContent())&&void 0!==e?e:null;o&&(null===(i=this.querySelector("slot"))||void 0===i||i.replaceChildren(o))}setPosition(){if(!this.trigger)return;const{height:t,width:e}=this.getBoundingClientRect(),{x:i,y:o,width:s,height:n}=this.trigger.getBoundingClientRect(),r=i+s/2;let l=0;const h=this.querySelector("tp-tooltip-arrow");h&&({height:l}=h.getBoundingClientRect()),o>t+this.offset+l?(this.style.marginTop=o-t-this.offset-l/2+"px",null==h||h.setAttribute("position","bottom")):(this.style.marginTop=`${o+n+this.offset+l/2}px`,null==h||h.setAttribute("position","top")),r<e/2?this.style.marginLeft="0px":window.innerWidth-r<e/2?this.style.marginLeft=window.innerWidth-e+"px":this.style.marginLeft=i+s/2-e/2+"px";const{left:u}=this.getBoundingClientRect(),d=(r-u)/e*100;h&&(h.style.left=`${d}%`)}show(){this.setContent(),this.showPopover(),this.setPosition(),this.setAttribute("show","yes"),this.dispatchEvent(new CustomEvent("show"))}hide(){this.hidePopover(),this.removeAttribute("show"),this.dispatchEvent(new CustomEvent("hide"))}}class e extends HTMLElement{constructor(){super(),navigator.maxTouchPoints>0?this.addEventListener("click",this.toggleTooltip.bind(this)):(this.addEventListener("mouseenter",this.showTooltip.bind(this)),this.addEventListener("mouseleave",this.hideTooltip.bind(this))),window.addEventListener("scroll",this.handleWindowScroll.bind(this),!0)}toggleTooltip(){var t;const e=null!==(t=this.getAttribute("tooltip"))&&void 0!==t?t:"";if(""===e)return;const i=document.querySelector(`#${e}`);"yes"===(null==i?void 0:i.getAttribute("show"))?null==i||i.hide():(null==i||i.setTrigger(this),null==i||i.show())}showTooltip(){var t;const e=null!==(t=this.getAttribute("tooltip"))&&void 0!==t?t:"";if(""===e)return;const i=document.querySelector(`#${e}`);null==i||i.setTrigger(this),null==i||i.show()}hideTooltip(){var t;const e=null!==(t=this.getAttribute("tooltip"))&&void 0!==t?t:"";if(""===e)return;const i=document.querySelector(`#${e}`);null==i||i.hide()}getContent(){const t=this.querySelector("template");return t?t.content.cloneNode(!0):null}handleWindowScroll(t){var e;const i=null!==(e=this.getAttribute("tooltip"))&&void 0!==e?e:"",o=document.querySelector(`#${i}`);t.target!==o&&this.hideTooltip()}}class i extends HTMLElement{}customElements.define("tp-tooltip",t),customElements.define("tp-tooltip-trigger",e),customElements.define("tp-tooltip-arrow",i)})();
 //# sourceMappingURL=index.js.map

package/dist/tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"dist/tooltip/index.js","mappings":"mBASO,MAAMA,UAAkBC,YAS9B,WAAAC,GAECC,QAPS,KAAAC,QAAmC,KAU5CC,KAAKC,aACN,CAKA,WAAAA,GAEQD,KAAKE,aAAc,YACzBF,KAAKG,aAAc,UAAW,UAEhC,CAOA,UAAAC,CAAYL,GAEXC,KAAKD,QAAUA,CAChB,CAKA,UAAAM,G,UAEC,MAAMC,EAAiD,QAA1B,EAAY,QAAZ,EAAAN,KAAKD,eAAO,eAAEQ,oBAAY,QAAI,KAGtDD,IAEwB,QAA5B,EAAAN,KAAKQ,cAAe,eAAQ,SAAEC,gBAAiBH,GAEjD,CAKA,WAAAI,GAEC,IAAOV,KAAKD,QAEX,OAID,MAAQY,OAAQC,EAAeC,MAAOC,GAAiBd,KAAKe,yBAGpDC,EAAGC,EAAqBC,EAAGC,EAAoBN,MAAOO,EAAcT,OAAQU,GAAkBrB,KAAKD,QAAQgB,wBAGnH,IAAIO,EAAsB,EAC1B,MAAMC,EAA+BvB,KAAKQ,cAAe,oBAGpDe,KACAZ,OAAQW,GAAgBC,EAAMR,yBAI9BI,EAAqBP,EAAgBZ,KAAKD,QAAQyB,OAASF,GAE/DtB,KAAKyB,MAAMC,IAAUP,EAAqBP,EAAgBZ,KAAKD,QAAQyB,OAAWF,EAAc,EAA/E,KAGjBC,SAAAA,EAAOpB,aAAc,WAAY,YAGjCH,KAAKyB,MAAMC,IAAM,GAAIP,EAAqBE,EAAgBrB,KAAKD,QAAQyB,OAAWF,EAAc,MAGhGC,SAAAA,EAAOpB,aAAc,WAAY,QAI7Bc,EAAwBG,EAAe,EAAQN,EAAe,IAClEd,KAAKyB,MAAME,KAAWV,EAAwBG,EAAe,EAAQN,EAAe,EAAlE,KAEpB,CAKA,IAAAc,GAEC5B,KAAKK,aACLL,KAAKU,cACLV,KAAKG,aAAc,OAAQ,MAC5B,CAKA,IAAA0B,GAEC7B,KAAK8B,gBAAiB,OACvB,EClHM,MAAMC,UAAyBnC,YAIrC,WAAAC,GAECC,QAGAE,KAAKgC,iBAAkB,aAAchC,KAAKiC,YAAYC,KAAMlC,OAC5DA,KAAKgC,iBAAkB,aAAchC,KAAKmC,YAAYD,KAAMlC,MAC7D,CAKA,UAAIwB,G,MAEH,OAAOY,SAAuC,QAA7B,EAAApC,KAAKE,aAAc,iBAAU,QAAI,IACnD,CAKA,UAAIsB,CAAQA,GAEJA,EAGNxB,KAAKG,aAAc,SAAUqB,EAAOa,YAFpCrC,KAAK8B,gBAAiB,SAIxB,CAKA,WAAAG,G,MAEC,MAAMK,EAAkD,QAA9B,EAAAtC,KAAKE,aAAc,kBAAW,QAAI,GAG5D,GAAK,KAAOoC,EAEX,OAID,MAAMC,EAA4BC,SAAShC,cAAe,IAAK8B,KAC/DC,SAAAA,EAASnC,WAAYJ,MACrBuC,SAAAA,EAASX,MACV,CAKA,WAAAO,G,MAEC,MAAMG,EAAkD,QAA9B,EAAAtC,KAAKE,aAAc,kBAAW,QAAI,GAG5D,GAAK,KAAOoC,EAEX,OAID,MAAMC,EAA4BC,SAAShC,cAAe,IAAK8B,KAC/DC,SAAAA,EAASV,MACV,CAOA,UAAAtB,GAEC,MAAMkC,EAAuCzC,KAAKQ,cAAe,YAGjE,OAAKiC,EAEGA,EAASnC,QAAQoC,WAAW,GAI7B,IACR,EC5FM,MAAMC,UAAuB/C,aCYpCgD,eAAeC,OAAQ,aAAclD,GACrCiD,eAAeC,OAAQ,qBAAsBd,GAC7Ca,eAAeC,OAAQ,mBAAoBF,E","sources":["webpack://@travelopia/web-components/./src/tooltip/tp-tooltip.ts","webpack://@travelopia/web-components/./src/tooltip/tp-tooltip-trigger.ts","webpack://@travelopia/web-components/./src/tooltip/tp-tooltip-arrow.ts","webpack://@travelopia/web-components/./src/tooltip/index.ts"],"sourcesContent":["/**\n * Internal dependencies.\n */\nimport { TPTooltipTrigger } from './tp-tooltip-trigger';\nimport { TPTooltipArrow } from './tp-tooltip-arrow';\n\n/**\n * TP Tooltip.\n */\nexport class TPTooltip extends HTMLElement {\n\t/**\n\t * Properties.\n\t */\n\tprotected trigger: TPTooltipTrigger | null = null;\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Call parent's constructor.\n\t\tsuper();\n\n\t\t// Make the tooltip a popover.\n\t\tthis.makePopover();\n\t}\n\n\t/**\n\t * Make this tooltip a popover, if it isn't already.\n\t */\n\tmakePopover(): void {\n\t\t// Check if this isn't already a popover.\n\t\tif ( ! this.getAttribute( 'popover' ) ) {\n\t\t\tthis.setAttribute( 'popover', 'popover' );\n\t\t}\n\t}\n\n\t/**\n\t * Set the trigger.\n\t *\n\t * @param {HTMLElement} trigger The trigger node.\n\t */\n\tsetTrigger( trigger: TPTooltipTrigger ): void {\n\t\t// Set the trigger.\n\t\tthis.trigger = trigger;\n\t}\n\n\t/**\n\t * Set the content for our tooltip.\n\t */\n\tsetContent(): void {\n\t\t// Get content.\n\t\tconst content: Node | null = this.trigger?.getContent() ?? null;\n\n\t\t// Check if we have content.\n\t\tif ( content ) {\n\t\t\t// Yes, replace slot's children with new content.\n\t\t\tthis.querySelector( 'slot' )?.replaceChildren( content );\n\t\t}\n\t}\n\n\t/**\n\t * Set the position of the tooltip.\n\t */\n\tsetPosition(): void {\n\t\t// Do we have a trigger?\n\t\tif ( ! this.trigger ) {\n\t\t\t// We don't, bail!\n\t\t\treturn;\n\t\t}\n\n\t\t// Get width and height of this tooltip.\n\t\tconst { height: tooltipHeight, width: tooltipWidth } = this.getBoundingClientRect();\n\n\t\t// Get position and coordinates of the trigger.\n\t\tconst { x: triggerLeftPosition, y: triggerTopPosition, width: triggerWidth, height: triggerHeight } = this.trigger.getBoundingClientRect();\n\n\t\t// Get arrow dimensions.\n\t\tlet arrowHeight: number = 0;\n\t\tconst arrow: TPTooltipArrow | null = this.querySelector( 'tp-tooltop-arrow' );\n\n\t\t// Check if we have an arrow.\n\t\tif ( arrow ) {\n\t\t\t( { height: arrowHeight } = arrow.getBoundingClientRect() );\n\t\t}\n\n\t\t// Determine the vertical position of this tooltip.\n\t\tif ( triggerTopPosition > tooltipHeight + this.trigger.offset + arrowHeight ) {\n\t\t\t// There is enough space on top of trigger element, so place popover above the trigger element.\n\t\t\tthis.style.top = `${ triggerTopPosition - tooltipHeight - this.trigger.offset - ( arrowHeight / 2 ) }px`;\n\n\t\t\t// Set arrow placement on bottom of popover\n\t\t\tarrow?.setAttribute( 'position', 'bottom' );\n\t\t} else {\n\t\t\t// There is not enough space on top of trigger element, so place popover below the trigger element.\n\t\t\tthis.style.top = `${ triggerTopPosition + triggerHeight + this.trigger.offset + ( arrowHeight / 2 ) }px`;\n\n\t\t\t// Set arrow placement on top of popover\n\t\t\tarrow?.setAttribute( 'position', 'top' );\n\t\t}\n\n\t\t// Determine the horizontal position of this tooltip.\n\t\tif ( triggerLeftPosition + ( triggerWidth / 2 ) > ( tooltipWidth / 2 ) ) {\n\t\t\tthis.style.left = `${ triggerLeftPosition + ( triggerWidth / 2 ) - ( tooltipWidth / 2 ) }px`;\n\t\t}\n\t}\n\n\t/**\n\t * Show the tooltip.\n\t */\n\tshow(): void {\n\t\t// Position tooltip and show it.\n\t\tthis.setContent();\n\t\tthis.setPosition();\n\t\tthis.setAttribute( 'show', 'yes' );\n\t}\n\n\t/**\n\t * Hide the tooltip.\n\t */\n\thide(): void {\n\t\t// Hide the attribute.\n\t\tthis.removeAttribute( 'show' );\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPTooltip } from './tp-tooltip';\n\n/**\n * TP Tooltip Trigger.\n */\nexport class TPTooltipTrigger extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Call parent's constructor.\n\t\tsuper();\n\n\t\t// Events.\n\t\tthis.addEventListener( 'mouseenter', this.showTooltip.bind( this ) );\n\t\tthis.addEventListener( 'mouseleave', this.hideTooltip.bind( this ) );\n\t}\n\n\t/**\n\t * Get offset.\n\t */\n\tget offset(): number {\n\t\t// Get the offset.\n\t\treturn parseInt( this.getAttribute( 'offset' ) ?? '0' );\n\t}\n\n\t/**\n\t * Set offset.\n\t */\n\tset offset( offset: number ) {\n\t\t// Set or remove offset.\n\t\tif ( ! offset ) {\n\t\t\tthis.removeAttribute( 'offset' );\n\t\t} else {\n\t\t\tthis.setAttribute( 'offset', offset.toString() );\n\t\t}\n\t}\n\n\t/**\n\t * Show the tooltip.\n\t */\n\tshowTooltip(): void {\n\t\t// Get the tooltip.\n\t\tconst tooltipId: string = this.getAttribute( 'tooltip' ) ?? '';\n\n\t\t// Check if we have a tooltip.\n\t\tif ( '' === tooltipId ) {\n\t\t\t// We don't, bail.\n\t\t\treturn;\n\t\t}\n\n\t\t// Find and show the tooltip with its content.\n\t\tconst tooltip: TPTooltip | null = document.querySelector( `#${ tooltipId }` );\n\t\ttooltip?.setTrigger( this );\n\t\ttooltip?.show();\n\t}\n\n\t/**\n\t * Hide the tooltip.\n\t */\n\thideTooltip(): void {\n\t\t// Get the tooltip.\n\t\tconst tooltipId: string = this.getAttribute( 'tooltip' ) ?? '';\n\n\t\t// Check if we have a tooltip.\n\t\tif ( '' === tooltipId ) {\n\t\t\t// We don't, bail.\n\t\t\treturn;\n\t\t}\n\n\t\t// Find and hide the tooltip.\n\t\tconst tooltip: TPTooltip | null = document.querySelector( `#${ tooltipId }` );\n\t\ttooltip?.hide();\n\t}\n\n\t/**\n\t * Get the content of the tooltip.\n\t *\n\t * @return {Node|null} The content of the tooltip.\n\t */\n\tgetContent(): Node | null {\n\t\t// Find template for content.\n\t\tconst template: HTMLTemplateElement | null = this.querySelector( 'template' );\n\n\t\t// Check if we found a template.\n\t\tif ( template ) {\n\t\t\t// We did, return its content.\n\t\t\treturn template.content.cloneNode( true );\n\t\t}\n\n\t\t// No template found, return null.\n\t\treturn null;\n\t}\n}\n","/**\n * TP Tooltip Arrow.\n */\nexport class TPTooltipArrow extends HTMLElement {\n}\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Components.\n */\nimport { TPTooltip } from './tp-tooltip';\nimport { TPTooltipTrigger } from './tp-tooltip-trigger';\nimport { TPTooltipArrow } from './tp-tooltip-arrow';\n\n/**\n * Register Components.\n */\ncustomElements.define( 'tp-tooltip', TPTooltip );\ncustomElements.define( 'tp-tooltip-trigger', TPTooltipTrigger );\ncustomElements.define( 'tp-tooltip-arrow', TPTooltipArrow );\n"],"names":["TPTooltip","HTMLElement","constructor","super","trigger","this","makePopover","getAttribute","setAttribute","setTrigger","setContent","content","getContent","querySelector","replaceChildren","setPosition","height","tooltipHeight","width","tooltipWidth","getBoundingClientRect","x","triggerLeftPosition","y","triggerTopPosition","triggerWidth","triggerHeight","arrowHeight","arrow","offset","style","top","left","show","hide","removeAttribute","TPTooltipTrigger","addEventListener","showTooltip","bind","hideTooltip","parseInt","toString","tooltipId","tooltip","document","template","cloneNode","TPTooltipArrow","customElements","define"],"sourceRoot":""}
+{"version":3,"file":"dist/tooltip/index.js","mappings":"mBASO,MAAMA,UAAkBC,YAS9B,WAAAC,GAECC,QAPS,KAAAC,QAAmC,KAU5CC,KAAKC,aACN,CAKA,UAAIC,G,MAEH,OAAOC,SAAuC,QAA7B,EAAAH,KAAKI,aAAc,iBAAU,QAAI,IACnD,CAKA,UAAIF,CAAQA,GAEJA,EAGNF,KAAKK,aAAc,SAAUH,EAAOI,YAFpCN,KAAKO,gBAAiB,SAIxB,CAKA,WAAAN,GAEQD,KAAKI,aAAc,YACzBJ,KAAKK,aAAc,UAAW,GAEhC,CAOA,UAAAG,CAAYT,GAEXC,KAAKD,QAAUA,CAChB,CAKA,UAAAU,G,UAEC,MAAMC,EAAiD,QAA1B,EAAY,QAAZ,EAAAV,KAAKD,eAAO,eAAEY,oBAAY,QAAI,KAGtDD,IAEwB,QAA5B,EAAAV,KAAKY,cAAe,eAAQ,SAAEC,gBAAiBH,GAEjD,CAKA,WAAAI,GAEC,IAAOd,KAAKD,QAEX,OAID,MAAQgB,OAAQC,EAAeC,MAAOC,GAAiBlB,KAAKmB,yBAGpDC,EAAGC,EAAqBC,EAAGC,EAAoBN,MAAOO,EAAcT,OAAQU,GAAkBzB,KAAKD,QAAQoB,wBAG7GO,EAAwBL,EAAwBG,EAAe,EAGrE,IAAIG,EAAsB,EAC1B,MAAMC,EAA+B5B,KAAKY,cAAe,oBAGpDgB,KACAb,OAAQY,GAAgBC,EAAMT,yBAI9BI,EAAqBP,EAAgBhB,KAAKE,OAASyB,GAEvD3B,KAAK6B,MAAMC,UAAgBP,EAAqBP,EAAgBhB,KAAKE,OAAWyB,EAAc,EAAvE,KAGvBC,SAAAA,EAAOvB,aAAc,WAAY,YAGjCL,KAAK6B,MAAMC,UAAY,GAAIP,EAAqBE,EAAgBzB,KAAKE,OAAWyB,EAAc,MAG9FC,SAAAA,EAAOvB,aAAc,WAAY,QAI7BqB,EAA0BR,EAAe,EAE7ClB,KAAK6B,MAAME,WAAa,MACbC,OAAOC,WAAaP,EAA0BR,EAAe,EAExElB,KAAK6B,MAAME,WAAiBC,OAAOC,WAAaf,EAAxB,KAGxBlB,KAAK6B,MAAME,WAAiBV,EAAwBG,EAAe,EAAQN,EAAe,EAAlE,KAIzB,MAAQgB,KAAMC,GAAwBnC,KAAKmB,wBAGrCiB,GAAoBV,EAAwBS,GAAwBjB,EAAiB,IAGtFU,IACJA,EAAMC,MAAMK,KAAO,GAAIE,KAEzB,CAKA,IAAAC,GAECrC,KAAKS,aAGLT,KAAKsC,cACLtC,KAAKc,cACLd,KAAKK,aAAc,OAAQ,OAG3BL,KAAKuC,cAAe,IAAIC,YAAa,QACtC,CAKA,IAAAC,GAECzC,KAAK0C,cACL1C,KAAKO,gBAAiB,QAGtBP,KAAKuC,cAAe,IAAIC,YAAa,QACtC,ECrKM,MAAMG,UAAyB/C,YAIrC,WAAAC,GAECC,QAGK8C,UAAUC,eAAiB,EAE/B7C,KAAK8C,iBAAkB,QAAS9C,KAAK+C,cAAcC,KAAMhD,QAGzDA,KAAK8C,iBAAkB,aAAc9C,KAAKiD,YAAYD,KAAMhD,OAC5DA,KAAK8C,iBAAkB,aAAc9C,KAAKkD,YAAYF,KAAMhD,QAI7DgC,OAAOc,iBAAkB,SAAU9C,KAAKmD,mBAAmBH,KAAMhD,OAAQ,EAC1E,CAKA,aAAA+C,G,MAEC,MAAMK,EAAkD,QAA9B,EAAApD,KAAKI,aAAc,kBAAW,QAAI,GAG5D,GAAK,KAAOgD,EAEX,OAID,MAAMC,EAA4BC,SAAS1C,cAAe,IAAKwC,KAG1D,SAAUC,aAAO,EAAPA,EAASjD,aAAc,SAErCiD,SAAAA,EAASZ,QAGTY,SAAAA,EAAS7C,WAAYR,MACrBqD,SAAAA,EAAShB,OAEX,CAKA,WAAAY,G,MAEC,MAAMG,EAAkD,QAA9B,EAAApD,KAAKI,aAAc,kBAAW,QAAI,GAG5D,GAAK,KAAOgD,EAEX,OAID,MAAMC,EAA4BC,SAAS1C,cAAe,IAAKwC,KAC/DC,SAAAA,EAAS7C,WAAYR,MACrBqD,SAAAA,EAAShB,MACV,CAKA,WAAAa,G,MAEC,MAAME,EAAkD,QAA9B,EAAApD,KAAKI,aAAc,kBAAW,QAAI,GAG5D,GAAK,KAAOgD,EAEX,OAID,MAAMC,EAA4BC,SAAS1C,cAAe,IAAKwC,KAC/DC,SAAAA,EAASZ,MACV,CAOA,UAAA9B,GAEC,MAAM4C,EAAuCvD,KAAKY,cAAe,YAGjE,OAAK2C,EAEGA,EAAS7C,QAAQ8C,WAAW,GAI7B,IACR,CAOA,kBAAAL,CAAoBM,G,MAEnB,MAAML,EAAkD,QAA9B,EAAApD,KAAKI,aAAc,kBAAW,QAAI,GACtDiD,EAA4BC,SAAS1C,cAAe,IAAKwC,KAG1DK,EAAIC,SAAWL,GAMpBrD,KAAKkD,aACN,EChIM,MAAMS,UAAuB/D,aCYpCgE,eAAeC,OAAQ,aAAclE,GACrCiE,eAAeC,OAAQ,qBAAsBlB,GAC7CiB,eAAeC,OAAQ,mBAAoBF,E","sources":["webpack://@travelopia/web-components/./src/tooltip/tp-tooltip.ts","webpack://@travelopia/web-components/./src/tooltip/tp-tooltip-trigger.ts","webpack://@travelopia/web-components/./src/tooltip/tp-tooltip-arrow.ts","webpack://@travelopia/web-components/./src/tooltip/index.ts"],"sourcesContent":["/**\n * Internal dependencies.\n */\nimport { TPTooltipTrigger } from './tp-tooltip-trigger';\nimport { TPTooltipArrow } from './tp-tooltip-arrow';\n\n/**\n * TP Tooltip.\n */\nexport class TPTooltip extends HTMLElement {\n\t/**\n\t * Properties.\n\t */\n\tprotected trigger: TPTooltipTrigger | null = null;\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Call parent's constructor.\n\t\tsuper();\n\n\t\t// Make the tooltip a popover.\n\t\tthis.makePopover();\n\t}\n\n\t/**\n\t * Get offset.\n\t */\n\tget offset(): number {\n\t\t// Get the offset.\n\t\treturn parseInt( this.getAttribute( 'offset' ) ?? '0' );\n\t}\n\n\t/**\n\t * Set offset.\n\t */\n\tset offset( offset: number ) {\n\t\t// Set or remove offset.\n\t\tif ( ! offset ) {\n\t\t\tthis.removeAttribute( 'offset' );\n\t\t} else {\n\t\t\tthis.setAttribute( 'offset', offset.toString() );\n\t\t}\n\t}\n\n\t/**\n\t * Make this tooltip a popover, if it isn't already.\n\t */\n\tmakePopover(): void {\n\t\t// Check if this isn't already a popover.\n\t\tif ( ! this.getAttribute( 'popover' ) ) {\n\t\t\tthis.setAttribute( 'popover', '' );\n\t\t}\n\t}\n\n\t/**\n\t * Set the trigger.\n\t *\n\t * @param {HTMLElement} trigger The trigger node.\n\t */\n\tsetTrigger( trigger: TPTooltipTrigger ): void {\n\t\t// Set the trigger.\n\t\tthis.trigger = trigger;\n\t}\n\n\t/**\n\t * Set the content for our tooltip.\n\t */\n\tsetContent(): void {\n\t\t// Get content.\n\t\tconst content: Node | null = this.trigger?.getContent() ?? null;\n\n\t\t// Check if we have content.\n\t\tif ( content ) {\n\t\t\t// Yes, replace slot's children with new content.\n\t\t\tthis.querySelector( 'slot' )?.replaceChildren( content );\n\t\t}\n\t}\n\n\t/**\n\t * Set the position of the tooltip.\n\t */\n\tsetPosition(): void {\n\t\t// Do we have a trigger?\n\t\tif ( ! this.trigger ) {\n\t\t\t// We don't, bail!\n\t\t\treturn;\n\t\t}\n\n\t\t// Get width and height of this tooltip.\n\t\tconst { height: tooltipHeight, width: tooltipWidth } = this.getBoundingClientRect();\n\n\t\t// Get position and coordinates of the trigger.\n\t\tconst { x: triggerLeftPosition, y: triggerTopPosition, width: triggerWidth, height: triggerHeight } = this.trigger.getBoundingClientRect();\n\n\t\t// Trigger center from left edge of screen.\n\t\tconst triggerCenterPosition = triggerLeftPosition + ( triggerWidth / 2 );\n\n\t\t// Get arrow dimensions.\n\t\tlet arrowHeight: number = 0;\n\t\tconst arrow: TPTooltipArrow | null = this.querySelector( 'tp-tooltip-arrow' );\n\n\t\t// Check if we have an arrow.\n\t\tif ( arrow ) {\n\t\t\t( { height: arrowHeight } = arrow.getBoundingClientRect() );\n\t\t}\n\n\t\t// Determine the vertical position of this tooltip.\n\t\tif ( triggerTopPosition > tooltipHeight + this.offset + arrowHeight ) {\n\t\t\t// There is enough space on top of trigger element, so place popover above the trigger element.\n\t\t\tthis.style.marginTop = `${ triggerTopPosition - tooltipHeight - this.offset - ( arrowHeight / 2 ) }px`;\n\n\t\t\t// Set arrow placement on bottom of popover\n\t\t\tarrow?.setAttribute( 'position', 'bottom' );\n\t\t} else {\n\t\t\t// There is not enough space on top of trigger element, so place popover below the trigger element.\n\t\t\tthis.style.marginTop = `${ triggerTopPosition + triggerHeight + this.offset + ( arrowHeight / 2 ) }px`;\n\n\t\t\t// Set arrow placement on top of popover\n\t\t\tarrow?.setAttribute( 'position', 'top' );\n\t\t}\n\n\t\t// Determine the horizontal position of this tooltip.\n\t\tif ( triggerCenterPosition < ( tooltipWidth / 2 ) ) {\n\t\t\t// There is not enough space on left of trigger element, so place popover at the left edge of the screen.\n\t\t\tthis.style.marginLeft = '0px';\n\t\t} else if ( window.innerWidth - triggerCenterPosition < ( tooltipWidth / 2 ) ) {\n\t\t\t// There is not enough space on right of trigger element, so place popover at the right edge of the screen.\n\t\t\tthis.style.marginLeft = `${ window.innerWidth - tooltipWidth }px`;\n\t\t} else {\n\t\t\t// There is enough space on both sides of trigger element, so place popover at the center of the trigger element.\n\t\t\tthis.style.marginLeft = `${ triggerLeftPosition + ( triggerWidth / 2 ) - ( tooltipWidth / 2 ) }px`;\n\t\t}\n\n\t\t// Get left position of the tooltip.\n\t\tconst { left: tooltipLeftPosition } = this.getBoundingClientRect();\n\n\t\t// Percentage the arrow should be moved from left edge of the tooltip.\n\t\tconst arrowPosition = ( ( triggerCenterPosition - tooltipLeftPosition ) / tooltipWidth ) * 100;\n\n\t\t// Set the arrow position.\n\t\tif ( arrow ) {\n\t\t\tarrow.style.left = `${ arrowPosition }%`;\n\t\t}\n\t}\n\n\t/**\n\t * Show the tooltip.\n\t */\n\tshow(): void {\n\t\t// Position tooltip and show it.\n\t\tthis.setContent();\n\n\t\t// Show the tooltip.\n\t\tthis.showPopover();\n\t\tthis.setPosition();\n\t\tthis.setAttribute( 'show', 'yes' );\n\n\t\t// Trigger event.\n\t\tthis.dispatchEvent( new CustomEvent( 'show' ) );\n\t}\n\n\t/**\n\t * Hide the tooltip.\n\t */\n\thide(): void {\n\t\t// Hide the tooltip.\n\t\tthis.hidePopover();\n\t\tthis.removeAttribute( 'show' );\n\n\t\t// Trigger event.\n\t\tthis.dispatchEvent( new CustomEvent( 'hide' ) );\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPTooltip } from './tp-tooltip';\n\n/**\n * TP Tooltip Trigger.\n */\nexport class TPTooltipTrigger extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Call parent's constructor.\n\t\tsuper();\n\n\t\t// Check if touch device.\n\t\tif ( navigator.maxTouchPoints > 0 ) {\n\t\t\t// Yes it is, toggle tooltip on click.\n\t\t\tthis.addEventListener( 'click', this.toggleTooltip.bind( this ) );\n\t\t} else {\n\t\t\t// Else add event listeners for mouse.\n\t\t\tthis.addEventListener( 'mouseenter', this.showTooltip.bind( this ) );\n\t\t\tthis.addEventListener( 'mouseleave', this.hideTooltip.bind( this ) );\n\t\t}\n\n\t\t// On window scroll, hide tooltip.\n\t\twindow.addEventListener( 'scroll', this.handleWindowScroll.bind( this ), true );\n\t}\n\n\t/**\n\t * Toggle the tooltip.\n\t */\n\ttoggleTooltip(): void {\n\t\t// Get the tooltip.\n\t\tconst tooltipId: string = this.getAttribute( 'tooltip' ) ?? '';\n\n\t\t// Check if we have a tooltip.\n\t\tif ( '' === tooltipId ) {\n\t\t\t// We don't, bail.\n\t\t\treturn;\n\t\t}\n\n\t\t// Find the tooltip.\n\t\tconst tooltip: TPTooltip | null = document.querySelector( `#${ tooltipId }` );\n\n\t\t// Check if the tooltip is already shown.\n\t\tif ( 'yes' === tooltip?.getAttribute( 'show' ) ) {\n\t\t\t// It is, hide it.\n\t\t\ttooltip?.hide();\n\t\t} else {\n\t\t\t// It isn't, show it.\n\t\t\ttooltip?.setTrigger( this );\n\t\t\ttooltip?.show();\n\t\t}\n\t}\n\n\t/**\n\t * Show the tooltip.\n\t */\n\tshowTooltip(): void {\n\t\t// Get the tooltip.\n\t\tconst tooltipId: string = this.getAttribute( 'tooltip' ) ?? '';\n\n\t\t// Check if we have a tooltip.\n\t\tif ( '' === tooltipId ) {\n\t\t\t// We don't, bail.\n\t\t\treturn;\n\t\t}\n\n\t\t// Find and show the tooltip with its content.\n\t\tconst tooltip: TPTooltip | null = document.querySelector( `#${ tooltipId }` );\n\t\ttooltip?.setTrigger( this );\n\t\ttooltip?.show();\n\t}\n\n\t/**\n\t * Hide the tooltip.\n\t */\n\thideTooltip(): void {\n\t\t// Get the tooltip.\n\t\tconst tooltipId: string = this.getAttribute( 'tooltip' ) ?? '';\n\n\t\t// Check if we have a tooltip.\n\t\tif ( '' === tooltipId ) {\n\t\t\t// We don't, bail.\n\t\t\treturn;\n\t\t}\n\n\t\t// Find and hide the tooltip.\n\t\tconst tooltip: TPTooltip | null = document.querySelector( `#${ tooltipId }` );\n\t\ttooltip?.hide();\n\t}\n\n\t/**\n\t * Get the content of the tooltip.\n\t *\n\t * @return {Node|null} The content of the tooltip.\n\t */\n\tgetContent(): Node | null {\n\t\t// Find template for content.\n\t\tconst template: HTMLTemplateElement | null = this.querySelector( 'template' );\n\n\t\t// Check if we found a template.\n\t\tif ( template ) {\n\t\t\t// We did, return its content.\n\t\t\treturn template.content.cloneNode( true );\n\t\t}\n\n\t\t// No template found, return null.\n\t\treturn null;\n\t}\n\n\t/**\n\t * Handles the scroll outside of the tooltip.\n\t *\n\t * @param { Event } evt The event object.\n\t */\n\thandleWindowScroll( evt: Event ) {\n\t\t// Get the tooltip.\n\t\tconst tooltipId: string = this.getAttribute( 'tooltip' ) ?? '';\n\t\tconst tooltip: TPTooltip | null = document.querySelector( `#${ tooltipId }` );\n\n\t\t// If the content was the original target.\n\t\tif ( evt.target === tooltip ) {\n\t\t\t// Do nothing.\n\t\t\treturn;\n\t\t}\n\n\t\t// Hide the popover\n\t\tthis.hideTooltip();\n\t}\n}\n","/**\n * TP Tooltip Arrow.\n */\nexport class TPTooltipArrow extends HTMLElement {\n}\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Components.\n */\nimport { TPTooltip } from './tp-tooltip';\nimport { TPTooltipTrigger } from './tp-tooltip-trigger';\nimport { TPTooltipArrow } from './tp-tooltip-arrow';\n\n/**\n * Register Components.\n */\ncustomElements.define( 'tp-tooltip', TPTooltip );\ncustomElements.define( 'tp-tooltip-trigger', TPTooltipTrigger );\ncustomElements.define( 'tp-tooltip-arrow', TPTooltipArrow );\n"],"names":["TPTooltip","HTMLElement","constructor","super","trigger","this","makePopover","offset","parseInt","getAttribute","setAttribute","toString","removeAttribute","setTrigger","setContent","content","getContent","querySelector","replaceChildren","setPosition","height","tooltipHeight","width","tooltipWidth","getBoundingClientRect","x","triggerLeftPosition","y","triggerTopPosition","triggerWidth","triggerHeight","triggerCenterPosition","arrowHeight","arrow","style","marginTop","marginLeft","window","innerWidth","left","tooltipLeftPosition","arrowPosition","show","showPopover","dispatchEvent","CustomEvent","hide","hidePopover","TPTooltipTrigger","navigator","maxTouchPoints","addEventListener","toggleTooltip","bind","showTooltip","hideTooltip","handleWindowScroll","tooltipId","tooltip","document","template","cloneNode","evt","target","TPTooltipArrow","customElements","define"],"sourceRoot":""}

package/dist/tooltip/style.css

@@ -1 +1 @@
-tp-tooltip{display:none}tp-tooltip[popover]{margin:0}tp-tooltip[show]{display:block}
+tp-tooltip{border:1px solid #000}tp-tooltip[popover]{overflow:visible;margin:0;padding:0}tp-tooltip tp-tooltip-content{position:relative;display:block;z-index:10}tp-tooltip tp-tooltip-arrow{position:absolute;display:block;z-index:5;border:1px solid #000;width:15px;height:15px;background-color:#fff}tp-tooltip tp-tooltip-arrow[position=top]{top:-1px;transform:translateY(-50%) translateX(-50%) rotate(45deg);border-right:none;border-bottom:none}tp-tooltip tp-tooltip-arrow[position=bottom]{bottom:-1px;transform:translateY(50%) translateX(-50%) rotate(45deg);border-left:none;border-top:none}

package/package.json

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