@fluid-topics/ft-tooltip 0.3.34 → 0.3.36
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/build/ft-tooltip.js
CHANGED
|
@@ -34,13 +34,15 @@ export class FtTooltip extends FtLitElement {
|
|
|
34
34
|
@focusin=${this.onHover}
|
|
35
35
|
@focusout=${this.onOut}
|
|
36
36
|
@touchstart=${this.onTouch}>
|
|
37
|
-
<
|
|
37
|
+
<slot></slot>
|
|
38
|
+
<div part="tooltip" role="tooltip" inert
|
|
39
|
+
class="ft-tooltip ft-tooltip--${this.validPosition}"
|
|
40
|
+
?hidden=${!this.visible}>
|
|
38
41
|
<div part="tooltip-content" class="ft-tooltip--content">
|
|
39
42
|
<slot name="text"></slot>
|
|
40
43
|
<ft-typography variant="caption" ?hidden=${!this.text}>${this.text}</ft-typography>
|
|
41
44
|
</div>
|
|
42
45
|
</div>
|
|
43
|
-
<slot></slot>
|
|
44
46
|
</div>
|
|
45
47
|
`;
|
|
46
48
|
}
|
|
@@ -152,12 +152,14 @@ const Z=Symbol.for(""),W=t=>{if((null==t?void 0:t.r)===Z)return null==t?void 0:t
|
|
|
152
152
|
@focusin=${this.onHover}
|
|
153
153
|
@focusout=${this.onOut}
|
|
154
154
|
@touchstart=${this.onTouch}>
|
|
155
|
-
<
|
|
155
|
+
<slot></slot>
|
|
156
|
+
<div part="tooltip" role="tooltip" inert
|
|
157
|
+
class="ft-tooltip ft-tooltip--${this.validPosition}"
|
|
158
|
+
?hidden=${!this.visible}>
|
|
156
159
|
<div part="tooltip-content" class="ft-tooltip--content">
|
|
157
160
|
<slot name="text"></slot>
|
|
158
161
|
<ft-typography variant="caption" ?hidden=${!this.text}>${this.text}</ft-typography>
|
|
159
162
|
</div>
|
|
160
163
|
</div>
|
|
161
|
-
<slot></slot>
|
|
162
164
|
</div>
|
|
163
165
|
`}update(t){t.has("visible")&&!this.visible&&this.resetTooltipContent(),super.update(t)}contentAvailableCallback(t){["visible","text"].some((i=>t.has(i)))&&this.visible&&this.positionTooltip()}show(t){this.visible=!0,null!=t&&this.hideDebounce.run((()=>this.hide()),t)}hide(){this.visible=!1}toggle(){this.visible=!this.visible}get slottedElement(){var t;return(null!==(t=this.slotNodes)&&void 0!==t?t:[]).filter((t=>t.nodeType==Node.ELEMENT_NODE))[0]}resetTooltipContent(){if(this.tooltip&&this.tooltipContent){const t=this.tooltipContent.style;switch(t.transition="none",this.validPosition){case"top":t.top=this.tooltip.clientHeight+"px",t.left="0";break;case"bottom":t.top=-this.tooltip.clientHeight+"px",t.left="0";break;case"left":t.top="0",t.left=this.tooltip.clientWidth+"px";break;case"right":t.top="0",t.left=-this.tooltip.clientWidth+"px"}}}positionTooltip(){this.resetTooltipContent();const t=this.slottedElement;if(this.tooltip&&t){const i=t.getBoundingClientRect(),o=(i.height-this.tooltip.clientHeight)/2,e=(i.width-this.tooltip.clientWidth)/2;let s=0,n=0;switch(this.validPosition){case"top":n=-this.tooltip.clientHeight,s=e;break;case"bottom":n=i.height,s=e;break;case"left":n=o,s=-this.tooltip.clientWidth;break;case"right":n=o,s=i.width}i.left+s+this.tooltip.clientWidth>window.innerWidth&&(s=window.innerWidth-this.tooltip.clientWidth-i.left),i.left+s<0&&(s=0);const r=this.tooltip.style;r.left=s+"px",r.top=n+"px",r.maxWidth=`max(${i.width}px, ${gi.maxWidth})`}this.revealDebouncer.run((()=>{this.tooltipContent&&(this.tooltipContent.style.transition="top var(--ft-transition-duration, 250ms), left var(--ft-transition-duration, 250ms)",this.tooltipContent.style.top="0",this.tooltipContent.style.left="0")}),this.manual?0:this.delay)}onTouch(){this.manual||(this.show(),setTimeout((()=>window.addEventListener("touchstart",(t=>{t.composedPath().includes(this.container)||this.onOut()}),{once:!0})),100))}onHover(){this.manual||this.show()}onOut(){this.manual||(this.revealDebouncer.cancel(),this.hide())}}ui.elementDefinitions={"ft-typography":yi},ui.styles=ci,di([e.property()],ui.prototype,"text",void 0),di([e.property({type:Boolean})],ui.prototype,"manual",void 0),di([e.property({type:Boolean})],ui.prototype,"inline",void 0),di([e.property({type:Number})],ui.prototype,"delay",void 0),di([e.property()],ui.prototype,"position",void 0),di([e.queryAssignedNodes("",!0)],ui.prototype,"slotNodes",void 0),di([e.query(".ft-tooltip--container")],ui.prototype,"container",void 0),di([e.query("slot")],ui.prototype,"target",void 0),di([e.query(".ft-tooltip")],ui.prototype,"tooltip",void 0),di([e.query(".ft-tooltip--content")],ui.prototype,"tooltipContent",void 0),di([e.state()],ui.prototype,"visible",void 0),i.customElement("ft-tooltip")(ui),t.FtTooltip=ui,t.FtTooltipCssVariables=gi,t.styles=ci,Object.defineProperty(t,"t",{value:!0})}({},ftGlobals.wcUtils,ftGlobals.lit,ftGlobals.litDecorators);
|
package/build/ft-tooltip.min.js
CHANGED
|
@@ -242,13 +242,15 @@ const bt=Symbol.for(""),mt=t=>{if((null==t?void 0:t.r)===bt)return null==t?void
|
|
|
242
242
|
@focusin=${this.onHover}
|
|
243
243
|
@focusout=${this.onOut}
|
|
244
244
|
@touchstart=${this.onTouch}>
|
|
245
|
-
<
|
|
245
|
+
<slot></slot>
|
|
246
|
+
<div part="tooltip" role="tooltip" inert
|
|
247
|
+
class="ft-tooltip ft-tooltip--${this.validPosition}"
|
|
248
|
+
?hidden=${!this.visible}>
|
|
246
249
|
<div part="tooltip-content" class="ft-tooltip--content">
|
|
247
250
|
<slot name="text"></slot>
|
|
248
251
|
<ft-typography variant="caption" ?hidden=${!this.text}>${this.text}</ft-typography>
|
|
249
252
|
</div>
|
|
250
253
|
</div>
|
|
251
|
-
<slot></slot>
|
|
252
254
|
</div>
|
|
253
255
|
`}update(t){t.has("visible")&&!this.visible&&this.resetTooltipContent(),super.update(t)}contentAvailableCallback(t){["visible","text"].some((i=>t.has(i)))&&this.visible&&this.positionTooltip()}show(t){this.visible=!0,null!=t&&this.hideDebounce.run((()=>this.hide()),t)}hide(){this.visible=!1}toggle(){this.visible=!this.visible}get slottedElement(){var t;return(null!==(t=this.slotNodes)&&void 0!==t?t:[]).filter((t=>t.nodeType==Node.ELEMENT_NODE))[0]}resetTooltipContent(){if(this.tooltip&&this.tooltipContent){const t=this.tooltipContent.style;switch(t.transition="none",this.validPosition){case"top":t.top=this.tooltip.clientHeight+"px",t.left="0";break;case"bottom":t.top=-this.tooltip.clientHeight+"px",t.left="0";break;case"left":t.top="0",t.left=this.tooltip.clientWidth+"px";break;case"right":t.top="0",t.left=-this.tooltip.clientWidth+"px"}}}positionTooltip(){this.resetTooltipContent();const t=this.slottedElement;if(this.tooltip&&t){const i=t.getBoundingClientRect(),e=(i.height-this.tooltip.clientHeight)/2,o=(i.width-this.tooltip.clientWidth)/2;let n=0,s=0;switch(this.validPosition){case"top":s=-this.tooltip.clientHeight,n=o;break;case"bottom":s=i.height,n=o;break;case"left":s=e,n=-this.tooltip.clientWidth;break;case"right":s=e,n=i.width}i.left+n+this.tooltip.clientWidth>window.innerWidth&&(n=window.innerWidth-this.tooltip.clientWidth-i.left),i.left+n<0&&(n=0);const r=this.tooltip.style;r.left=n+"px",r.top=s+"px",r.maxWidth=`max(${i.width}px, ${Zi.maxWidth})`}this.revealDebouncer.run((()=>{this.tooltipContent&&(this.tooltipContent.style.transition="top var(--ft-transition-duration, 250ms), left var(--ft-transition-duration, 250ms)",this.tooltipContent.style.top="0",this.tooltipContent.style.left="0")}),this.manual?0:this.delay)}onTouch(){this.manual||(this.show(),setTimeout((()=>window.addEventListener("touchstart",(t=>{t.composedPath().includes(this.container)||this.onOut()}),{once:!0})),100))}onHover(){this.manual||this.show()}onOut(){this.manual||(this.revealDebouncer.cancel(),this.hide())}}qi.elementDefinitions={"ft-typography":Ii},qi.styles=Vi,Ji([o()],qi.prototype,"text",void 0),Ji([o({type:Boolean})],qi.prototype,"manual",void 0),Ji([o({type:Boolean})],qi.prototype,"inline",void 0),Ji([o({type:Number})],qi.prototype,"delay",void 0),Ji([o()],qi.prototype,"position",void 0),Ji([
|
|
254
256
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluid-topics/ft-tooltip",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.36",
|
|
4
4
|
"description": "A simple tooltip component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Lit"
|
|
@@ -19,9 +19,9 @@
|
|
|
19
19
|
"url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@fluid-topics/ft-typography": "0.3.
|
|
23
|
-
"@fluid-topics/ft-wc-utils": "0.3.
|
|
22
|
+
"@fluid-topics/ft-typography": "0.3.36",
|
|
23
|
+
"@fluid-topics/ft-wc-utils": "0.3.36",
|
|
24
24
|
"lit": "2.2.8"
|
|
25
25
|
},
|
|
26
|
-
"gitHead": "
|
|
26
|
+
"gitHead": "ea71cf7f6c9b87754b84a9fc6c14947253240fc2"
|
|
27
27
|
}
|