@fluid-topics/ft-tooltip 0.1.17 → 0.1.18
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.d.ts +2 -2
- package/build/ft-tooltip.inline-styles.js +250 -0
- package/build/ft-tooltip.js +38 -44
- package/build/ft-tooltip.light.js +48 -48
- package/build/ft-tooltip.min.js +102 -88
- package/build/index.d.ts +2 -0
- package/build/index.js +5 -0
- package/build/inline-styles.d.ts +2 -0
- package/build/inline-styles.js +4 -0
- package/package.json +6 -6
|
@@ -10,7 +10,7 @@ var s;const n=globalThis.trustedTypes,r=n?n.createPolicy("lit-html",{createHTML:
|
|
|
10
10
|
* Copyright 2020 Google LLC
|
|
11
11
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
12
12
|
*/
|
|
13
|
-
const R=t=>({_$litStatic$:t}),Z=new Map,W=(t=>(i,...o)=>{var e;const s=o.length;let n,r;const h=[],l=[];let p,a=0,f=!1;for(;a<s;){for(p=i[a];a<s&&void 0!==(r=o[a],n=null===(e=r)||void 0===e?void 0:e._$litStatic$);)p+=n+i[++a],f=!0;l.push(r),h.push(p),a++}if(a===s&&h.push(i[s]),f){const t=h.join("$$lit$$");void 0===(i=Z.get(t))&&(h.raw=h,Z.set(t,i=h)),o=l}return t(i,...o)})(m);var B,G=function(t,i,o,e){for(var s,n=arguments.length,r=n<3?i:null===e?e=Object.getOwnPropertyDescriptor(i,o):e,h=t.length-1;h>=0;h--)(s=t[h])&&(r=(n<3?s(r):n>3?s(i,o,r):s(i,o))||r);return n>3&&r&&Object.defineProperty(i,o,r),r};!function(t){t.title="title",t.title_dense="title-dense",t.subtitle1="subtitle1",t.subtitle2="subtitle2",t.body1="body1",t.body2="body2",t.caption="caption",t.breadcrumb="breadcrumb",t.overline="overline",t.button="button"}(B||(B={}));const H=
|
|
13
|
+
const R=t=>({_$litStatic$:t}),Z=new Map,W=(t=>(i,...o)=>{var e;const s=o.length;let n,r;const h=[],l=[];let p,a=0,f=!1;for(;a<s;){for(p=i[a];a<s&&void 0!==(r=o[a],n=null===(e=r)||void 0===e?void 0:e._$litStatic$);)p+=n+i[++a],f=!0;l.push(r),h.push(p),a++}if(a===s&&h.push(i[s]),f){const t=h.join("$$lit$$");void 0===(i=Z.get(t))&&(h.raw=h,Z.set(t,i=h)),o=l}return t(i,...o)})(m);var B,G=function(t,i,o,e){for(var s,n=arguments.length,r=n<3?i:null===e?e=Object.getOwnPropertyDescriptor(i,o):e,h=t.length-1;h>=0;h--)(s=t[h])&&(r=(n<3?s(r):n>3?s(i,o,r):s(i,o))||r);return n>3&&r&&Object.defineProperty(i,o,r),r};!function(t){t.title="title",t.title_dense="title-dense",t.subtitle1="subtitle1",t.subtitle2="subtitle2",t.body1="body1",t.body2="body2",t.caption="caption",t.breadcrumb="breadcrumb",t.overline="overline",t.button="button"}(B||(B={}));const H=i.FtCssVariable.extend("--ft-typography-font-family",i.designSystemVariables.titleFont),L=i.FtCssVariable.extend("--ft-typography-font-family",i.designSystemVariables.contentFont),K={fontFamily:L,fontSize:i.FtCssVariable.create("--ft-typography-font-size","SIZE","16px"),fontWeight:i.FtCssVariable.create("--ft-typography-font-weight","UNKNOWN","normal"),letterSpacing:i.FtCssVariable.create("--ft-typography-letter-spacing","SIZE","0.496px"),lineHeight:i.FtCssVariable.create("--ft-typography-line-height","SIZE","24px"),textTransform:i.FtCssVariable.create("--ft-typography-text-transform","UNKNOWN","inherit")},D=i.FtCssVariable.extend("--ft-typography-title-font-family",H),q=i.FtCssVariable.extend("--ft-typography-title-font-size",K.fontSize,"20px"),J=i.FtCssVariable.extend("--ft-typography-title-font-weight",K.fontWeight,"normal"),P=i.FtCssVariable.extend("--ft-typography-title-letter-spacing",K.letterSpacing,"0.15px"),Q=i.FtCssVariable.extend("--ft-typography-title-line-height",K.lineHeight,"24px"),V=i.FtCssVariable.extend("--ft-typography-title-text-transform",K.textTransform,"inherit"),X=i.FtCssVariable.extend("--ft-typography-title-dense-font-family",H),Y=i.FtCssVariable.extend("--ft-typography-title-dense-font-size",K.fontSize,"14px"),tt=i.FtCssVariable.extend("--ft-typography-title-dense-font-weight",K.fontWeight,"normal"),it=i.FtCssVariable.extend("--ft-typography-title-dense-letter-spacing",K.letterSpacing,"0.105px"),ot=i.FtCssVariable.extend("--ft-typography-title-dense-line-height",K.lineHeight,"24px"),et=i.FtCssVariable.extend("--ft-typography-title-dense-text-transform",K.textTransform,"inherit"),st=i.FtCssVariable.extend("--ft-typography-subtitle1-font-family",L),nt=i.FtCssVariable.extend("--ft-typography-subtitle1-font-size",K.fontSize,"16px"),rt=i.FtCssVariable.extend("--ft-typography-subtitle1-font-weight",K.fontWeight,"600"),ht=i.FtCssVariable.extend("--ft-typography-subtitle1-letter-spacing",K.letterSpacing,"0.144px"),lt=i.FtCssVariable.extend("--ft-typography-subtitle1-line-height",K.lineHeight,"24px"),pt=i.FtCssVariable.extend("--ft-typography-subtitle1-text-transform",K.textTransform,"inherit"),at=i.FtCssVariable.extend("--ft-typography-subtitle2-font-family",L),ft=i.FtCssVariable.extend("--ft-typography-subtitle2-font-size",K.fontSize,"14px"),yt=i.FtCssVariable.extend("--ft-typography-subtitle2-font-weight",K.fontWeight,"normal"),gt=i.FtCssVariable.extend("--ft-typography-subtitle2-letter-spacing",K.letterSpacing,"0.098px"),ct=i.FtCssVariable.extend("--ft-typography-subtitle2-line-height",K.lineHeight,"24px"),dt=i.FtCssVariable.extend("--ft-typography-subtitle2-text-transform",K.textTransform,"inherit"),ut=i.FtCssVariable.extend("--ft-typography-body1-font-family",L),vt=i.FtCssVariable.extend("--ft-typography-body1-font-size",K.fontSize,"16px"),$t=i.FtCssVariable.extend("--ft-typography-body1-font-weight",K.fontWeight,"normal"),bt=i.FtCssVariable.extend("--ft-typography-body1-letter-spacing",K.letterSpacing,"0.496px"),xt=i.FtCssVariable.extend("--ft-typography-body1-line-height",K.lineHeight,"24px"),mt=i.FtCssVariable.extend("--ft-typography-body1-text-transform",K.textTransform,"inherit"),wt=i.FtCssVariable.extend("--ft-typography-body2-font-family",L),zt=i.FtCssVariable.extend("--ft-typography-body2-font-size",K.fontSize,"14px"),kt=i.FtCssVariable.extend("--ft-typography-body2-font-weight",K.fontWeight,"normal"),At=i.FtCssVariable.extend("--ft-typography-body2-letter-spacing",K.letterSpacing,"0.252px"),_t=i.FtCssVariable.extend("--ft-typography-body2-line-height",K.lineHeight,"20px"),Nt=i.FtCssVariable.extend("--ft-typography-body2-text-transform",K.textTransform,"inherit"),St=i.FtCssVariable.extend("--ft-typography-caption-font-family",L),Tt=i.FtCssVariable.extend("--ft-typography-caption-font-size",K.fontSize,"12px"),Ot=i.FtCssVariable.extend("--ft-typography-caption-font-weight",K.fontWeight,"normal"),Et=i.FtCssVariable.extend("--ft-typography-caption-letter-spacing",K.letterSpacing,"0.396px"),Ct=i.FtCssVariable.extend("--ft-typography-caption-line-height",K.lineHeight,"16px"),It=i.FtCssVariable.extend("--ft-typography-caption-text-transform",K.textTransform,"inherit"),Mt=i.FtCssVariable.extend("--ft-typography-breadcrumb-font-family",L),Ft=i.FtCssVariable.extend("--ft-typography-breadcrumb-font-size",K.fontSize,"10px"),Ut=i.FtCssVariable.extend("--ft-typography-breadcrumb-font-weight",K.fontWeight,"normal"),jt=i.FtCssVariable.extend("--ft-typography-breadcrumb-letter-spacing",K.letterSpacing,"0.33px"),Rt=i.FtCssVariable.extend("--ft-typography-breadcrumb-line-height",K.lineHeight,"16px"),Zt=i.FtCssVariable.extend("--ft-typography-breadcrumb-text-transform",K.textTransform,"inherit"),Wt=i.FtCssVariable.extend("--ft-typography-overline-font-family",L),Bt=i.FtCssVariable.extend("--ft-typography-overline-font-size",K.fontSize,"10px"),Gt=i.FtCssVariable.extend("--ft-typography-overline-font-weight",K.fontWeight,"normal"),Ht=i.FtCssVariable.extend("--ft-typography-overline-letter-spacing",K.letterSpacing,"1.5px"),Lt=i.FtCssVariable.extend("--ft-typography-overline-line-height",K.lineHeight,"16px"),Kt=i.FtCssVariable.extend("--ft-typography-overline-text-transform",K.textTransform,"uppercase"),Dt=i.FtCssVariable.extend("--ft-typography-button-font-family",L),qt=i.FtCssVariable.extend("--ft-typography-button-font-size",K.fontSize,"14px"),Jt=i.FtCssVariable.extend("--ft-typography-button-font-weight",K.fontWeight,"600"),Pt=i.FtCssVariable.extend("--ft-typography-button-letter-spacing",K.letterSpacing,"1.246px"),Qt=i.FtCssVariable.extend("--ft-typography-button-line-height",K.lineHeight,"16px"),Vt=i.FtCssVariable.extend("--ft-typography-button-text-transform",K.textTransform,"uppercase"),Xt=o.css`
|
|
14
14
|
.ft-typography--title {
|
|
15
15
|
font-family: ${D};
|
|
16
16
|
font-size: ${q};
|
|
@@ -19,7 +19,7 @@ const R=t=>({_$litStatic$:t}),Z=new Map,W=(t=>(i,...o)=>{var e;const s=o.length;
|
|
|
19
19
|
line-height: ${Q};
|
|
20
20
|
text-transform: ${V};
|
|
21
21
|
}
|
|
22
|
-
`,Yt=
|
|
22
|
+
`,Yt=o.css`
|
|
23
23
|
.ft-typography--title-dense {
|
|
24
24
|
font-family: ${X};
|
|
25
25
|
font-size: ${Y};
|
|
@@ -28,7 +28,7 @@ const R=t=>({_$litStatic$:t}),Z=new Map,W=(t=>(i,...o)=>{var e;const s=o.length;
|
|
|
28
28
|
line-height: ${ot};
|
|
29
29
|
text-transform: ${et};
|
|
30
30
|
}
|
|
31
|
-
`,ti=
|
|
31
|
+
`,ti=o.css`
|
|
32
32
|
.ft-typography--subtitle1 {
|
|
33
33
|
font-family: ${st};
|
|
34
34
|
font-size: ${nt};
|
|
@@ -37,7 +37,7 @@ const R=t=>({_$litStatic$:t}),Z=new Map,W=(t=>(i,...o)=>{var e;const s=o.length;
|
|
|
37
37
|
line-height: ${lt};
|
|
38
38
|
text-transform: ${pt};
|
|
39
39
|
}
|
|
40
|
-
`,ii=
|
|
40
|
+
`,ii=o.css`
|
|
41
41
|
.ft-typography--subtitle2 {
|
|
42
42
|
font-family: ${at};
|
|
43
43
|
font-size: ${ft};
|
|
@@ -47,7 +47,7 @@ const R=t=>({_$litStatic$:t}),Z=new Map,W=(t=>(i,...o)=>{var e;const s=o.length;
|
|
|
47
47
|
text-transform: ${dt};
|
|
48
48
|
}
|
|
49
49
|
|
|
50
|
-
`,oi=
|
|
50
|
+
`,oi=o.css`
|
|
51
51
|
.ft-typography--body1 {
|
|
52
52
|
font-family: ${ut};
|
|
53
53
|
font-size: ${vt};
|
|
@@ -56,7 +56,7 @@ const R=t=>({_$litStatic$:t}),Z=new Map,W=(t=>(i,...o)=>{var e;const s=o.length;
|
|
|
56
56
|
line-height: ${xt};
|
|
57
57
|
text-transform: ${mt};
|
|
58
58
|
}
|
|
59
|
-
`,ei=
|
|
59
|
+
`,ei=o.css`
|
|
60
60
|
.ft-typography--body2 {
|
|
61
61
|
font-family: ${wt};
|
|
62
62
|
font-size: ${zt};
|
|
@@ -65,7 +65,7 @@ const R=t=>({_$litStatic$:t}),Z=new Map,W=(t=>(i,...o)=>{var e;const s=o.length;
|
|
|
65
65
|
line-height: ${_t};
|
|
66
66
|
text-transform: ${Nt};
|
|
67
67
|
}
|
|
68
|
-
`,si=
|
|
68
|
+
`,si=o.css`
|
|
69
69
|
.ft-typography--caption {
|
|
70
70
|
font-family: ${St};
|
|
71
71
|
font-size: ${Tt};
|
|
@@ -74,7 +74,7 @@ const R=t=>({_$litStatic$:t}),Z=new Map,W=(t=>(i,...o)=>{var e;const s=o.length;
|
|
|
74
74
|
line-height: ${Ct};
|
|
75
75
|
text-transform: ${It};
|
|
76
76
|
}
|
|
77
|
-
`,ni=
|
|
77
|
+
`,ni=o.css`
|
|
78
78
|
.ft-typography--breadcrumb {
|
|
79
79
|
font-family: ${Mt};
|
|
80
80
|
font-size: ${Ft};
|
|
@@ -83,7 +83,7 @@ const R=t=>({_$litStatic$:t}),Z=new Map,W=(t=>(i,...o)=>{var e;const s=o.length;
|
|
|
83
83
|
line-height: ${Rt};
|
|
84
84
|
text-transform: ${Zt};
|
|
85
85
|
}
|
|
86
|
-
`,ri=
|
|
86
|
+
`,ri=o.css`
|
|
87
87
|
.ft-typography--overline {
|
|
88
88
|
font-family: ${Wt};
|
|
89
89
|
font-size: ${Bt};
|
|
@@ -92,7 +92,7 @@ const R=t=>({_$litStatic$:t}),Z=new Map,W=(t=>(i,...o)=>{var e;const s=o.length;
|
|
|
92
92
|
line-height: ${Lt};
|
|
93
93
|
text-transform: ${Kt};
|
|
94
94
|
}
|
|
95
|
-
`,hi=
|
|
95
|
+
`,hi=o.css`
|
|
96
96
|
.ft-typography--button {
|
|
97
97
|
font-family: ${Dt};
|
|
98
98
|
font-size: ${qt};
|
|
@@ -101,50 +101,18 @@ const R=t=>({_$litStatic$:t}),Z=new Map,W=(t=>(i,...o)=>{var e;const s=o.length;
|
|
|
101
101
|
line-height: ${Qt};
|
|
102
102
|
text-transform: ${Vt};
|
|
103
103
|
}
|
|
104
|
-
`;
|
|
105
|
-
.ft-typography {
|
|
106
|
-
vertical-align: inherit;
|
|
107
|
-
}
|
|
108
|
-
`]}getTemplate(){return this.element?W`
|
|
104
|
+
`;class li extends i.FtLitElement{constructor(){super(...arguments),this.variant=B.body1}render(){return this.element?W`
|
|
109
105
|
<${R(this.element)}
|
|
110
106
|
class="ft-typography ft-typography--${this.variant}">
|
|
111
107
|
<slot></slot>
|
|
112
108
|
</${R(this.element)}>
|
|
113
109
|
`:W`
|
|
114
110
|
<slot class="ft-typography ft-typography--${this.variant}"></slot>
|
|
115
|
-
`}}
|
|
116
|
-
.ft-
|
|
117
|
-
|
|
118
|
-
position: relative;
|
|
111
|
+
`}}li.styles=[Xt,Yt,ti,ii,oi,ei,si,ni,ri,hi,o.css`
|
|
112
|
+
.ft-typography {
|
|
113
|
+
vertical-align: inherit;
|
|
119
114
|
}
|
|
120
|
-
|
|
121
|
-
.ft-tooltip--inline {
|
|
122
|
-
display: inline-block;
|
|
123
|
-
max-width: 100%;
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
.ft-tooltip {
|
|
127
|
-
position: absolute;
|
|
128
|
-
box-sizing: border-box;
|
|
129
|
-
overflow: hidden;
|
|
130
|
-
width: max-content;
|
|
131
|
-
max-width: 150px;
|
|
132
|
-
text-align: center;
|
|
133
|
-
padding: ${ai.distance};
|
|
134
|
-
z-index: ${ai.zIndex};
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
.ft-tooltip--content {
|
|
138
|
-
padding: 4px 8px;
|
|
139
|
-
border-radius: ${ai.borderRadiusS};
|
|
140
|
-
background-color: ${ai.backgroundColor};
|
|
141
|
-
color: ${ai.color};
|
|
142
|
-
top: -500px;
|
|
143
|
-
left: -500px;
|
|
144
|
-
position: relative;
|
|
145
|
-
word-break: break-word;
|
|
146
|
-
}
|
|
147
|
-
`}getTemplate(){return i.html`
|
|
115
|
+
`],G([e.property()],li.prototype,"element",void 0),G([e.property()],li.prototype,"variant",void 0),i.customElement("ft-typography")(li);var pi=function(t,i,o,e){for(var s,n=arguments.length,r=n<3?i:null===e?e=Object.getOwnPropertyDescriptor(i,o):e,h=t.length-1;h>=0;h--)(s=t[h])&&(r=(n<3?s(r):n>3?s(i,o,r):s(i,o))||r);return n>3&&r&&Object.defineProperty(i,o,r),r};const ai={distance:i.FtCssVariable.create("--ft-tooltip-distance","SIZE","4px"),color:i.FtCssVariable.create("--ft-tooltip-color","COLOR","#FFFFFF"),backgroundColor:i.FtCssVariable.create("--ft-tooltip-background-color","COLOR","#666666"),zIndex:i.FtCssVariable.create("--ft-tooltip-z-index","NUMBER","1"),borderRadiusS:i.FtCssVariable.external(i.designSystemVariables.borderRadiusS,"Design system")};class fi extends i.FtLitElement{constructor(){super(...arguments),this.text="",this.manual=!1,this.inline=!1,this.delay=500,this.position="bottom",this.visible=!1,this.hideDebounce=new i.Debouncer,this.revealDebouncer=new i.Debouncer}render(){return o.html`
|
|
148
116
|
<div part="container"
|
|
149
117
|
class="ft-tooltip--container ${this.inline?"ft-tooltip--inline":""}"
|
|
150
118
|
@mouseenter=${this.onHover}
|
|
@@ -159,4 +127,36 @@ const R=t=>({_$litStatic$:t}),Z=new Map,W=(t=>(i,...o)=>{var e;const s=o.length;
|
|
|
159
127
|
</div>
|
|
160
128
|
<slot></slot>
|
|
161
129
|
</div>
|
|
162
|
-
`}update(t){t.has("visible")&&!this.visible&&this.resetTooltipContent(),super.update(t)}contentAvailableCallback(t){t.has("visible")&&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.position){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,s=this.tooltip.style;switch(this.position){case"top":s.top=-this.tooltip.clientHeight+"px",s.left=e+"px";break;case"bottom":s.top=i.height+"px",s.left=e+"px";break;case"left":s.top=o+"px",s.left=-this.tooltip.clientWidth+"px";break;case"right":s.top=o+"px",s.left=i.width+"px"}s.maxWidth=Math.max(i.width,150)+"px"}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())}}
|
|
130
|
+
`}update(t){t.has("visible")&&!this.visible&&this.resetTooltipContent(),super.update(t)}contentAvailableCallback(t){t.has("visible")&&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.position){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,s=this.tooltip.style;switch(this.position){case"top":s.top=-this.tooltip.clientHeight+"px",s.left=e+"px";break;case"bottom":s.top=i.height+"px",s.left=e+"px";break;case"left":s.top=o+"px",s.left=-this.tooltip.clientWidth+"px";break;case"right":s.top=o+"px",s.left=i.width+"px"}s.maxWidth=Math.max(i.width,150)+"px"}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())}}fi.elementDefinitions={"ft-typography":li},fi.styles=o.css`
|
|
131
|
+
.ft-tooltip--container {
|
|
132
|
+
display: block;
|
|
133
|
+
position: relative;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.ft-tooltip--inline {
|
|
137
|
+
display: inline-block;
|
|
138
|
+
max-width: 100%;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.ft-tooltip {
|
|
142
|
+
position: absolute;
|
|
143
|
+
box-sizing: border-box;
|
|
144
|
+
overflow: hidden;
|
|
145
|
+
width: max-content;
|
|
146
|
+
max-width: 150px;
|
|
147
|
+
text-align: center;
|
|
148
|
+
padding: ${ai.distance};
|
|
149
|
+
z-index: ${ai.zIndex};
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.ft-tooltip--content {
|
|
153
|
+
padding: 4px 8px;
|
|
154
|
+
border-radius: ${ai.borderRadiusS};
|
|
155
|
+
background-color: ${ai.backgroundColor};
|
|
156
|
+
color: ${ai.color};
|
|
157
|
+
top: -500px;
|
|
158
|
+
left: -500px;
|
|
159
|
+
position: relative;
|
|
160
|
+
word-break: break-word;
|
|
161
|
+
}
|
|
162
|
+
`,pi([e.property()],fi.prototype,"text",void 0),pi([e.property({type:Boolean})],fi.prototype,"manual",void 0),pi([e.property({type:Boolean})],fi.prototype,"inline",void 0),pi([e.property({type:Number})],fi.prototype,"delay",void 0),pi([e.property()],fi.prototype,"position",void 0),pi([e.queryAssignedNodes("",!0)],fi.prototype,"slotNodes",void 0),pi([e.query(".ft-tooltip--container")],fi.prototype,"container",void 0),pi([e.query("slot")],fi.prototype,"target",void 0),pi([e.query(".ft-tooltip")],fi.prototype,"tooltip",void 0),pi([e.query(".ft-tooltip--content")],fi.prototype,"tooltipContent",void 0),pi([e.state()],fi.prototype,"visible",void 0),i.customElement("ft-tooltip")(fi),t.FtTooltip=fi,t.FtTooltipCssVariables=ai,Object.defineProperty(t,"t",{value:!0})}({},ftGlobals.wcUtils,ftGlobals.lit,ftGlobals.litDecorators);
|