@fluid-topics/ft-tooltip 1.0.51 → 1.0.52

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.
@@ -12,7 +12,6 @@ export const FtTooltipCssVariables = {
12
12
  export const styles = css `
13
13
  .ft-tooltip--container {
14
14
  display: block;
15
- position: relative;
16
15
  }
17
16
 
18
17
  .ft-tooltip--inline {
@@ -36,8 +35,6 @@ export const styles = css `
36
35
  border-radius: ${FtTooltipCssVariables.borderRadiusS};
37
36
  background-color: ${FtTooltipCssVariables.backgroundColor};
38
37
  color: ${FtTooltipCssVariables.color};
39
- top: -500px;
40
- left: -500px;
41
38
  position: relative;
42
39
  word-break: break-word;
43
40
  }
@@ -11,7 +11,6 @@ export declare class FtTooltip extends FtLitElement implements FtTooltipProperti
11
11
  position: Position;
12
12
  private slotNodes?;
13
13
  private container?;
14
- private target?;
15
14
  private tooltip?;
16
15
  private tooltipContent?;
17
16
  private visible;
@@ -31,4 +30,5 @@ export declare class FtTooltip extends FtLitElement implements FtTooltipProperti
31
30
  private onTouch;
32
31
  private onHover;
33
32
  private onOut;
33
+ private limitValueBetween;
34
34
  }
@@ -102,39 +102,34 @@ class FtTooltip extends FtLitElement {
102
102
  this.resetTooltipContent();
103
103
  const target = this.slottedElement;
104
104
  if (this.tooltip && target) {
105
- const box = target.getBoundingClientRect();
106
- const verticalCenter = (box.height - this.tooltip.clientHeight) / 2;
107
- const horizontalCenter = (box.width - this.tooltip.clientWidth) / 2;
105
+ const tooltipWidth = this.tooltip.offsetWidth;
106
+ const tooltipHeight = this.tooltip.offsetHeight;
107
+ const verticalCenter = (target.offsetHeight - tooltipHeight) / 2;
108
+ const horizontalCenter = (target.offsetWidth - tooltipWidth) / 2;
108
109
  let left = 0;
109
110
  let top = 0;
110
111
  switch (this.validPosition) {
111
112
  case "top":
112
- top = (-this.tooltip.clientHeight);
113
- left = horizontalCenter;
113
+ top = target.offsetTop - tooltipHeight;
114
+ left = target.offsetLeft + horizontalCenter;
114
115
  break;
115
116
  case "bottom":
116
- top = box.height;
117
- left = horizontalCenter;
117
+ top = target.offsetTop + target.offsetHeight;
118
+ left = target.offsetLeft + horizontalCenter;
118
119
  break;
119
120
  case "left":
120
- top = verticalCenter;
121
- left = (-this.tooltip.clientWidth);
121
+ top = target.offsetTop + verticalCenter;
122
+ left = target.offsetLeft - tooltipWidth;
122
123
  break;
123
124
  case "right":
124
- top = verticalCenter;
125
- left = box.width;
125
+ top = target.offsetTop + verticalCenter;
126
+ left = target.offsetLeft + target.offsetWidth;
126
127
  break;
127
128
  }
128
- if (box.left + left + this.tooltip.clientWidth > window.innerWidth) {
129
- left = window.innerWidth - this.tooltip.clientWidth - box.left;
130
- }
131
- if (box.left + left < 0) {
132
- left = -box.left + 4;
133
- }
134
129
  const style = this.tooltip.style;
135
- style.left = left + "px";
136
- style.top = top + "px";
137
- style.maxWidth = `max(${box.width}px, ${FtTooltipCssVariables.maxWidth})`;
130
+ style.left = this.limitValueBetween(left, 0, window.innerWidth - tooltipWidth) + "px";
131
+ style.top = this.limitValueBetween(top, 0, window.innerHeight - tooltipHeight) + "px";
132
+ style.maxWidth = `max(${target.offsetWidth}px, ${FtTooltipCssVariables.maxWidth})`;
138
133
  }
139
134
  this.revealDebouncer.run(() => {
140
135
  if (this.tooltipContent) {
@@ -166,6 +161,9 @@ class FtTooltip extends FtLitElement {
166
161
  this.hide();
167
162
  }
168
163
  }
164
+ limitValueBetween(value, min, max) {
165
+ return Math.max(min, Math.min(value, max));
166
+ }
169
167
  }
170
168
  FtTooltip.elementDefinitions = {
171
169
  "ft-typography": FtTypography,
@@ -192,9 +190,6 @@ __decorate([
192
190
  __decorate([
193
191
  query(".ft-tooltip--container")
194
192
  ], FtTooltip.prototype, "container", void 0);
195
- __decorate([
196
- query("slot")
197
- ], FtTooltip.prototype, "target", void 0);
198
193
  __decorate([
199
194
  query(".ft-tooltip")
200
195
  ], FtTooltip.prototype, "tooltip", void 0);
@@ -4,16 +4,16 @@
4
4
  * Copyright 2017 Google LLC
5
5
  * SPDX-License-Identifier: BSD-3-Clause
6
6
  */
7
- var s;const n=window,r=n.trustedTypes,h=r?r.createPolicy("lit-html",{createHTML:t=>t}):void 0,l="$lit$",a=`lit$${(Math.random()+"").slice(9)}$`,p="?"+a,f=`<${p}>`,y=document,g=()=>y.createComment(""),c=t=>null===t||"object"!=typeof t&&"function"!=typeof t,d=Array.isArray,u="[ \t\n\f\r]",v=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,$=/-->/g,b=/>/g,m=RegExp(`>|${u}(?:([^\\s"'>=/]+)(${u}*=${u}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),x=/'/g,w=/"/g,z=/^(?:script|style|textarea|title)$/i,k=(t=>(i,...o)=>({_$litType$:t,strings:i,values:o}))(1),A=Symbol.for("lit-noChange"),N=Symbol.for("lit-nothing"),_=new WeakMap,S=y.createTreeWalker(y,129,null,!1),E=(t,i)=>{const o=t.length-1,e=[];let s,n=2===i?"<svg>":"",r=v;for(let i=0;i<o;i++){const o=t[i];let h,p,y=-1,g=0;for(;g<o.length&&(r.lastIndex=g,p=r.exec(o),null!==p);)g=r.lastIndex,r===v?"!--"===p[1]?r=$:void 0!==p[1]?r=b:void 0!==p[2]?(z.test(p[2])&&(s=RegExp("</"+p[2],"g")),r=m):void 0!==p[3]&&(r=m):r===m?">"===p[0]?(r=null!=s?s:v,y=-1):void 0===p[1]?y=-2:(y=r.lastIndex-p[2].length,h=p[1],r=void 0===p[3]?m:'"'===p[3]?w:x):r===w||r===x?r=m:r===$||r===b?r=v:(r=m,s=void 0);const c=r===m&&t[i+1].startsWith("/>")?" ":"";n+=r===v?o+f:y>=0?(e.push(h),o.slice(0,y)+l+o.slice(y)+a+c):o+a+(-2===y?(e.push(void 0),i):c)}const p=n+(t[o]||"<?>")+(2===i?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return[void 0!==h?h.createHTML(p):p,e]};class O{constructor({strings:t,_$litType$:i},o){let e;this.parts=[];let s=0,n=0;const h=t.length-1,f=this.parts,[y,c]=E(t,i);if(this.el=O.createElement(y,o),S.currentNode=this.el.content,2===i){const t=this.el.content,i=t.firstChild;i.remove(),t.append(...i.childNodes)}for(;null!==(e=S.nextNode())&&f.length<h;){if(1===e.nodeType){if(e.hasAttributes()){const t=[];for(const i of e.getAttributeNames())if(i.endsWith(l)||i.startsWith(a)){const o=c[n++];if(t.push(i),void 0!==o){const t=e.getAttribute(o.toLowerCase()+l).split(a),i=/([.?@])?(.*)/.exec(o);f.push({type:1,index:s,name:i[2],strings:t,ctor:"."===i[1]?R:"?"===i[1]?F:"@"===i[1]?M:j})}else f.push({type:6,index:s})}for(const i of t)e.removeAttribute(i)}if(z.test(e.tagName)){const t=e.textContent.split(a),i=t.length-1;if(i>0){e.textContent=r?r.emptyScript:"";for(let o=0;o<i;o++)e.append(t[o],g()),S.nextNode(),f.push({type:2,index:++s});e.append(t[i],g())}}}else if(8===e.nodeType)if(e.data===p)f.push({type:2,index:s});else{let t=-1;for(;-1!==(t=e.data.indexOf(a,t+1));)f.push({type:7,index:s}),t+=a.length-1}s++}}static createElement(t,i){const o=y.createElement("template");return o.innerHTML=t,o}}function T(t,i,o=t,e){var s,n,r,h;if(i===A)return i;let l=void 0!==e?null===(s=o._$Co)||void 0===s?void 0:s[e]:o._$Cl;const a=c(i)?void 0:i._$litDirective$;return(null==l?void 0:l.constructor)!==a&&(null===(n=null==l?void 0:l._$AO)||void 0===n||n.call(l,!1),void 0===a?l=void 0:(l=new a(t),l._$AT(t,o,e)),void 0!==e?(null!==(r=(h=o)._$Co)&&void 0!==r?r:h._$Co=[])[e]=l:o._$Cl=l),void 0!==l&&(i=T(t,l._$AS(t,i.values),l,e)),i}class C{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){var i;const{el:{content:o},parts:e}=this._$AD,s=(null!==(i=null==t?void 0:t.creationScope)&&void 0!==i?i:y).importNode(o,!0);S.currentNode=s;let n=S.nextNode(),r=0,h=0,l=e[0];for(;void 0!==l;){if(r===l.index){let i;2===l.type?i=new I(n,n.nextSibling,this,t):1===l.type?i=new l.ctor(n,l.name,l.strings,this,t):6===l.type&&(i=new Z(n,this,t)),this._$AV.push(i),l=e[++h]}r!==(null==l?void 0:l.index)&&(n=S.nextNode(),r++)}return s}v(t){let i=0;for(const o of this._$AV)void 0!==o&&(void 0!==o.strings?(o._$AI(t,o,i),i+=o.strings.length-2):o._$AI(t[i])),i++}}class I{constructor(t,i,o,e){var s;this.type=2,this._$AH=N,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=o,this.options=e,this._$Cp=null===(s=null==e?void 0:e.isConnected)||void 0===s||s}get _$AU(){var t,i;return null!==(i=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==i?i:this._$Cp}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===(null==t?void 0:t.nodeType)&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=T(this,t,i),c(t)?t===N||null==t||""===t?(this._$AH!==N&&this._$AR(),this._$AH=N):t!==this._$AH&&t!==A&&this._(t):void 0!==t._$litType$?this.g(t):void 0!==t.nodeType?this.$(t):(t=>d(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]))(t)?this.T(t):this._(t)}k(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}$(t){this._$AH!==t&&(this._$AR(),this._$AH=this.k(t))}_(t){this._$AH!==N&&c(this._$AH)?this._$AA.nextSibling.data=t:this.$(y.createTextNode(t)),this._$AH=t}g(t){var i;const{values:o,_$litType$:e}=t,s="number"==typeof e?this._$AC(t):(void 0===e.el&&(e.el=O.createElement(e.h,this.options)),e);if((null===(i=this._$AH)||void 0===i?void 0:i._$AD)===s)this._$AH.v(o);else{const t=new C(s,this),i=t.u(this.options);t.v(o),this.$(i),this._$AH=t}}_$AC(t){let i=_.get(t.strings);return void 0===i&&_.set(t.strings,i=new O(t)),i}T(t){d(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let o,e=0;for(const s of t)e===i.length?i.push(o=new I(this.k(g()),this.k(g()),this,this.options)):o=i[e],o._$AI(s),e++;e<i.length&&(this._$AR(o&&o._$AB.nextSibling,e),i.length=e)}_$AR(t=this._$AA.nextSibling,i){var o;for(null===(o=this._$AP)||void 0===o||o.call(this,!1,!0,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i}}setConnected(t){var i;void 0===this._$AM&&(this._$Cp=t,null===(i=this._$AP)||void 0===i||i.call(this,t))}}class j{constructor(t,i,o,e,s){this.type=1,this._$AH=N,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=s,o.length>2||""!==o[0]||""!==o[1]?(this._$AH=Array(o.length-1).fill(new String),this.strings=o):this._$AH=N}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,i=this,o,e){const s=this.strings;let n=!1;if(void 0===s)t=T(this,t,i,0),n=!c(t)||t!==this._$AH&&t!==A,n&&(this._$AH=t);else{const e=t;let r,h;for(t=s[0],r=0;r<s.length-1;r++)h=T(this,e[o+r],i,r),h===A&&(h=this._$AH[r]),n||(n=!c(h)||h!==this._$AH[r]),h===N?t=N:t!==N&&(t+=(null!=h?h:"")+s[r+1]),this._$AH[r]=h}n&&!e&&this.j(t)}j(t){t===N?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class R extends j{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===N?void 0:t}}const U=r?r.emptyScript:"";class F extends j{constructor(){super(...arguments),this.type=4}j(t){t&&t!==N?this.element.setAttribute(this.name,U):this.element.removeAttribute(this.name)}}class M extends j{constructor(t,i,o,e,s){super(t,i,o,e,s),this.type=5}_$AI(t,i=this){var o;if((t=null!==(o=T(this,t,i,0))&&void 0!==o?o:N)===A)return;const e=this._$AH,s=t===N&&e!==N||t.capture!==e.capture||t.once!==e.once||t.passive!==e.passive,n=t!==N&&(e===N||s);s&&this.element.removeEventListener(this.name,this,e),n&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var i,o;"function"==typeof this._$AH?this._$AH.call(null!==(o=null===(i=this.options)||void 0===i?void 0:i.host)&&void 0!==o?o:this.element,t):this._$AH.handleEvent(t)}}class Z{constructor(t,i,o){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=o}get _$AU(){return this._$AM._$AU}_$AI(t){T(this,t)}}const W=n.litHtmlPolyfillSupport;null==W||W(O,I),(null!==(s=n.litHtmlVersions)&&void 0!==s?s:n.litHtmlVersions=[]).push("2.7.3");
7
+ var s;const n=window,r=n.trustedTypes,h=r?r.createPolicy("lit-html",{createHTML:t=>t}):void 0,l="$lit$",a=`lit$${(Math.random()+"").slice(9)}$`,p="?"+a,f=`<${p}>`,y=document,g=()=>y.createComment(""),c=t=>null===t||"object"!=typeof t&&"function"!=typeof t,d=Array.isArray,u="[ \t\n\f\r]",v=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,$=/-->/g,b=/>/g,m=RegExp(`>|${u}(?:([^\\s"'>=/]+)(${u}*=${u}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),x=/'/g,w=/"/g,z=/^(?:script|style|textarea|title)$/i,k=(t=>(i,...o)=>({_$litType$:t,strings:i,values:o}))(1),A=Symbol.for("lit-noChange"),N=Symbol.for("lit-nothing"),_=new WeakMap,S=y.createTreeWalker(y,129,null,!1),E=(t,i)=>{const o=t.length-1,e=[];let s,n=2===i?"<svg>":"",r=v;for(let i=0;i<o;i++){const o=t[i];let h,p,y=-1,g=0;for(;g<o.length&&(r.lastIndex=g,p=r.exec(o),null!==p);)g=r.lastIndex,r===v?"!--"===p[1]?r=$:void 0!==p[1]?r=b:void 0!==p[2]?(z.test(p[2])&&(s=RegExp("</"+p[2],"g")),r=m):void 0!==p[3]&&(r=m):r===m?">"===p[0]?(r=null!=s?s:v,y=-1):void 0===p[1]?y=-2:(y=r.lastIndex-p[2].length,h=p[1],r=void 0===p[3]?m:'"'===p[3]?w:x):r===w||r===x?r=m:r===$||r===b?r=v:(r=m,s=void 0);const c=r===m&&t[i+1].startsWith("/>")?" ":"";n+=r===v?o+f:y>=0?(e.push(h),o.slice(0,y)+l+o.slice(y)+a+c):o+a+(-2===y?(e.push(void 0),i):c)}const p=n+(t[o]||"<?>")+(2===i?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return[void 0!==h?h.createHTML(p):p,e]};class O{constructor({strings:t,_$litType$:i},o){let e;this.parts=[];let s=0,n=0;const h=t.length-1,f=this.parts,[y,c]=E(t,i);if(this.el=O.createElement(y,o),S.currentNode=this.el.content,2===i){const t=this.el.content,i=t.firstChild;i.remove(),t.append(...i.childNodes)}for(;null!==(e=S.nextNode())&&f.length<h;){if(1===e.nodeType){if(e.hasAttributes()){const t=[];for(const i of e.getAttributeNames())if(i.endsWith(l)||i.startsWith(a)){const o=c[n++];if(t.push(i),void 0!==o){const t=e.getAttribute(o.toLowerCase()+l).split(a),i=/([.?@])?(.*)/.exec(o);f.push({type:1,index:s,name:i[2],strings:t,ctor:"."===i[1]?M:"?"===i[1]?U:"@"===i[1]?F:j})}else f.push({type:6,index:s})}for(const i of t)e.removeAttribute(i)}if(z.test(e.tagName)){const t=e.textContent.split(a),i=t.length-1;if(i>0){e.textContent=r?r.emptyScript:"";for(let o=0;o<i;o++)e.append(t[o],g()),S.nextNode(),f.push({type:2,index:++s});e.append(t[i],g())}}}else if(8===e.nodeType)if(e.data===p)f.push({type:2,index:s});else{let t=-1;for(;-1!==(t=e.data.indexOf(a,t+1));)f.push({type:7,index:s}),t+=a.length-1}s++}}static createElement(t,i){const o=y.createElement("template");return o.innerHTML=t,o}}function T(t,i,o=t,e){var s,n,r,h;if(i===A)return i;let l=void 0!==e?null===(s=o._$Co)||void 0===s?void 0:s[e]:o._$Cl;const a=c(i)?void 0:i._$litDirective$;return(null==l?void 0:l.constructor)!==a&&(null===(n=null==l?void 0:l._$AO)||void 0===n||n.call(l,!1),void 0===a?l=void 0:(l=new a(t),l._$AT(t,o,e)),void 0!==e?(null!==(r=(h=o)._$Co)&&void 0!==r?r:h._$Co=[])[e]=l:o._$Cl=l),void 0!==l&&(i=T(t,l._$AS(t,i.values),l,e)),i}class C{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){var i;const{el:{content:o},parts:e}=this._$AD,s=(null!==(i=null==t?void 0:t.creationScope)&&void 0!==i?i:y).importNode(o,!0);S.currentNode=s;let n=S.nextNode(),r=0,h=0,l=e[0];for(;void 0!==l;){if(r===l.index){let i;2===l.type?i=new I(n,n.nextSibling,this,t):1===l.type?i=new l.ctor(n,l.name,l.strings,this,t):6===l.type&&(i=new Z(n,this,t)),this._$AV.push(i),l=e[++h]}r!==(null==l?void 0:l.index)&&(n=S.nextNode(),r++)}return s}v(t){let i=0;for(const o of this._$AV)void 0!==o&&(void 0!==o.strings?(o._$AI(t,o,i),i+=o.strings.length-2):o._$AI(t[i])),i++}}class I{constructor(t,i,o,e){var s;this.type=2,this._$AH=N,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=o,this.options=e,this._$Cp=null===(s=null==e?void 0:e.isConnected)||void 0===s||s}get _$AU(){var t,i;return null!==(i=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==i?i:this._$Cp}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===(null==t?void 0:t.nodeType)&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=T(this,t,i),c(t)?t===N||null==t||""===t?(this._$AH!==N&&this._$AR(),this._$AH=N):t!==this._$AH&&t!==A&&this._(t):void 0!==t._$litType$?this.g(t):void 0!==t.nodeType?this.$(t):(t=>d(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]))(t)?this.T(t):this._(t)}k(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}$(t){this._$AH!==t&&(this._$AR(),this._$AH=this.k(t))}_(t){this._$AH!==N&&c(this._$AH)?this._$AA.nextSibling.data=t:this.$(y.createTextNode(t)),this._$AH=t}g(t){var i;const{values:o,_$litType$:e}=t,s="number"==typeof e?this._$AC(t):(void 0===e.el&&(e.el=O.createElement(e.h,this.options)),e);if((null===(i=this._$AH)||void 0===i?void 0:i._$AD)===s)this._$AH.v(o);else{const t=new C(s,this),i=t.u(this.options);t.v(o),this.$(i),this._$AH=t}}_$AC(t){let i=_.get(t.strings);return void 0===i&&_.set(t.strings,i=new O(t)),i}T(t){d(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let o,e=0;for(const s of t)e===i.length?i.push(o=new I(this.k(g()),this.k(g()),this,this.options)):o=i[e],o._$AI(s),e++;e<i.length&&(this._$AR(o&&o._$AB.nextSibling,e),i.length=e)}_$AR(t=this._$AA.nextSibling,i){var o;for(null===(o=this._$AP)||void 0===o||o.call(this,!1,!0,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i}}setConnected(t){var i;void 0===this._$AM&&(this._$Cp=t,null===(i=this._$AP)||void 0===i||i.call(this,t))}}class j{constructor(t,i,o,e,s){this.type=1,this._$AH=N,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=s,o.length>2||""!==o[0]||""!==o[1]?(this._$AH=Array(o.length-1).fill(new String),this.strings=o):this._$AH=N}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,i=this,o,e){const s=this.strings;let n=!1;if(void 0===s)t=T(this,t,i,0),n=!c(t)||t!==this._$AH&&t!==A,n&&(this._$AH=t);else{const e=t;let r,h;for(t=s[0],r=0;r<s.length-1;r++)h=T(this,e[o+r],i,r),h===A&&(h=this._$AH[r]),n||(n=!c(h)||h!==this._$AH[r]),h===N?t=N:t!==N&&(t+=(null!=h?h:"")+s[r+1]),this._$AH[r]=h}n&&!e&&this.j(t)}j(t){t===N?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class M extends j{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===N?void 0:t}}const R=r?r.emptyScript:"";class U extends j{constructor(){super(...arguments),this.type=4}j(t){t&&t!==N?this.element.setAttribute(this.name,R):this.element.removeAttribute(this.name)}}class F extends j{constructor(t,i,o,e,s){super(t,i,o,e,s),this.type=5}_$AI(t,i=this){var o;if((t=null!==(o=T(this,t,i,0))&&void 0!==o?o:N)===A)return;const e=this._$AH,s=t===N&&e!==N||t.capture!==e.capture||t.once!==e.once||t.passive!==e.passive,n=t!==N&&(e===N||s);s&&this.element.removeEventListener(this.name,this,e),n&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var i,o;"function"==typeof this._$AH?this._$AH.call(null!==(o=null===(i=this.options)||void 0===i?void 0:i.host)&&void 0!==o?o:this.element,t):this._$AH.handleEvent(t)}}class Z{constructor(t,i,o){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=o}get _$AU(){return this._$AM._$AU}_$AI(t){T(this,t)}}const B=n.litHtmlPolyfillSupport;null==B||B(O,I),(null!==(s=n.litHtmlVersions)&&void 0!==s?s:n.litHtmlVersions=[]).push("2.7.3");
8
8
  /**
9
9
  * @license
10
10
  * Copyright 2020 Google LLC
11
11
  * SPDX-License-Identifier: BSD-3-Clause
12
12
  */
13
- const B=Symbol.for(""),G=t=>{if((null==t?void 0:t.r)===B)return null==t?void 0:t._$litStatic$},H=t=>({_$litStatic$:t,r:B}),L=new Map,K=(t=>(i,...o)=>{const e=o.length;let s,n;const r=[],h=[];let l,a=0,p=!1;for(;a<e;){for(l=i[a];a<e&&void 0!==(n=o[a],s=G(n));)l+=s+i[++a],p=!0;a!==e&&h.push(n),r.push(l),a++}if(a===e&&r.push(i[e]),p){const t=r.join("$$lit$$");void 0===(i=L.get(t))&&(r.raw=r,L.set(t,i=r)),o=h}return t(i,...o)})(k);var D;!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"}(D||(D={}));const P=i.FtCssVariableFactory.extend("--ft-typography-font-family",i.designSystemVariables.titleFont),q=i.FtCssVariableFactory.extend("--ft-typography-font-family",i.designSystemVariables.contentFont),J={fontFamily:q,fontSize:i.FtCssVariableFactory.create("--ft-typography-font-size","SIZE","16px"),fontWeight:i.FtCssVariableFactory.create("--ft-typography-font-weight","UNKNOWN","normal"),letterSpacing:i.FtCssVariableFactory.create("--ft-typography-letter-spacing","SIZE","0.496px"),lineHeight:i.FtCssVariableFactory.create("--ft-typography-line-height","NUMBER","1.5"),textTransform:i.FtCssVariableFactory.create("--ft-typography-text-transform","UNKNOWN","inherit")},Q=i.FtCssVariableFactory.extend("--ft-typography-title-font-family",P),V=i.FtCssVariableFactory.extend("--ft-typography-title-font-size",J.fontSize,"20px"),X=i.FtCssVariableFactory.extend("--ft-typography-title-font-weight",J.fontWeight,"normal"),Y=i.FtCssVariableFactory.extend("--ft-typography-title-letter-spacing",J.letterSpacing,"0.15px"),tt=i.FtCssVariableFactory.extend("--ft-typography-title-line-height",J.lineHeight,"1.2"),it=i.FtCssVariableFactory.extend("--ft-typography-title-text-transform",J.textTransform,"inherit"),ot=i.FtCssVariableFactory.extend("--ft-typography-title-dense-font-family",P),et=i.FtCssVariableFactory.extend("--ft-typography-title-dense-font-size",J.fontSize,"14px"),st=i.FtCssVariableFactory.extend("--ft-typography-title-dense-font-weight",J.fontWeight,"normal"),nt=i.FtCssVariableFactory.extend("--ft-typography-title-dense-letter-spacing",J.letterSpacing,"0.105px"),rt=i.FtCssVariableFactory.extend("--ft-typography-title-dense-line-height",J.lineHeight,"1.7"),ht=i.FtCssVariableFactory.extend("--ft-typography-title-dense-text-transform",J.textTransform,"inherit"),lt=i.FtCssVariableFactory.extend("--ft-typography-subtitle1-font-family",q),at=i.FtCssVariableFactory.extend("--ft-typography-subtitle1-font-size",J.fontSize,"16px"),pt=i.FtCssVariableFactory.extend("--ft-typography-subtitle1-font-weight",J.fontWeight,"600"),ft=i.FtCssVariableFactory.extend("--ft-typography-subtitle1-letter-spacing",J.letterSpacing,"0.144px"),yt=i.FtCssVariableFactory.extend("--ft-typography-subtitle1-line-height",J.lineHeight,"1.5"),gt=i.FtCssVariableFactory.extend("--ft-typography-subtitle1-text-transform",J.textTransform,"inherit"),ct=i.FtCssVariableFactory.extend("--ft-typography-subtitle2-font-family",q),dt=i.FtCssVariableFactory.extend("--ft-typography-subtitle2-font-size",J.fontSize,"14px"),ut=i.FtCssVariableFactory.extend("--ft-typography-subtitle2-font-weight",J.fontWeight,"normal"),vt=i.FtCssVariableFactory.extend("--ft-typography-subtitle2-letter-spacing",J.letterSpacing,"0.098px"),$t=i.FtCssVariableFactory.extend("--ft-typography-subtitle2-line-height",J.lineHeight,"1.7"),bt=i.FtCssVariableFactory.extend("--ft-typography-subtitle2-text-transform",J.textTransform,"inherit"),mt=i.FtCssVariableFactory.extend("--ft-typography-body1-font-family",q),xt=i.FtCssVariableFactory.extend("--ft-typography-body1-font-size",J.fontSize,"16px"),wt=i.FtCssVariableFactory.extend("--ft-typography-body1-font-weight",J.fontWeight,"normal"),zt=i.FtCssVariableFactory.extend("--ft-typography-body1-letter-spacing",J.letterSpacing,"0.496px"),kt=i.FtCssVariableFactory.extend("--ft-typography-body1-line-height",J.lineHeight,"1.5"),At=i.FtCssVariableFactory.extend("--ft-typography-body1-text-transform",J.textTransform,"inherit"),Nt=i.FtCssVariableFactory.extend("--ft-typography-body2-font-family",q),_t=i.FtCssVariableFactory.extend("--ft-typography-body2-font-size",J.fontSize,"14px"),St=i.FtCssVariableFactory.extend("--ft-typography-body2-font-weight",J.fontWeight,"normal"),Et=i.FtCssVariableFactory.extend("--ft-typography-body2-letter-spacing",J.letterSpacing,"0.252px"),Ot=i.FtCssVariableFactory.extend("--ft-typography-body2-line-height",J.lineHeight,"1.4"),Tt=i.FtCssVariableFactory.extend("--ft-typography-body2-text-transform",J.textTransform,"inherit"),Ct=i.FtCssVariableFactory.extend("--ft-typography-caption-font-family",q),It=i.FtCssVariableFactory.extend("--ft-typography-caption-font-size",J.fontSize,"12px"),jt=i.FtCssVariableFactory.extend("--ft-typography-caption-font-weight",J.fontWeight,"normal"),Rt=i.FtCssVariableFactory.extend("--ft-typography-caption-letter-spacing",J.letterSpacing,"0.396px"),Ut=i.FtCssVariableFactory.extend("--ft-typography-caption-line-height",J.lineHeight,"1.33"),Ft=i.FtCssVariableFactory.extend("--ft-typography-caption-text-transform",J.textTransform,"inherit"),Mt=i.FtCssVariableFactory.extend("--ft-typography-breadcrumb-font-family",q),Zt=i.FtCssVariableFactory.extend("--ft-typography-breadcrumb-font-size",J.fontSize,"10px"),Wt=i.FtCssVariableFactory.extend("--ft-typography-breadcrumb-font-weight",J.fontWeight,"normal"),Bt=i.FtCssVariableFactory.extend("--ft-typography-breadcrumb-letter-spacing",J.letterSpacing,"0.33px"),Gt=i.FtCssVariableFactory.extend("--ft-typography-breadcrumb-line-height",J.lineHeight,"1.6"),Ht=i.FtCssVariableFactory.extend("--ft-typography-breadcrumb-text-transform",J.textTransform,"inherit"),Lt=i.FtCssVariableFactory.extend("--ft-typography-overline-font-family",q),Kt=i.FtCssVariableFactory.extend("--ft-typography-overline-font-size",J.fontSize,"10px"),Dt=i.FtCssVariableFactory.extend("--ft-typography-overline-font-weight",J.fontWeight,"normal"),Pt=i.FtCssVariableFactory.extend("--ft-typography-overline-letter-spacing",J.letterSpacing,"1.5px"),qt=i.FtCssVariableFactory.extend("--ft-typography-overline-line-height",J.lineHeight,"1.6"),Jt=i.FtCssVariableFactory.extend("--ft-typography-overline-text-transform",J.textTransform,"uppercase"),Qt=i.FtCssVariableFactory.extend("--ft-typography-button-font-family",q),Vt=i.FtCssVariableFactory.extend("--ft-typography-button-font-size",J.fontSize,"14px"),Xt=i.FtCssVariableFactory.extend("--ft-typography-button-font-weight",J.fontWeight,"600"),Yt=i.FtCssVariableFactory.extend("--ft-typography-button-letter-spacing",J.letterSpacing,"1.246px"),ti=i.FtCssVariableFactory.extend("--ft-typography-button-line-height",J.lineHeight,"1.15"),ii=i.FtCssVariableFactory.extend("--ft-typography-button-text-transform",J.textTransform,"uppercase"),oi=o.css`
13
+ const W=Symbol.for(""),G=t=>{if((null==t?void 0:t.r)===W)return null==t?void 0:t._$litStatic$},H=t=>({_$litStatic$:t,r:W}),L=new Map,K=(t=>(i,...o)=>{const e=o.length;let s,n;const r=[],h=[];let l,a=0,p=!1;for(;a<e;){for(l=i[a];a<e&&void 0!==(n=o[a],s=G(n));)l+=s+i[++a],p=!0;a!==e&&h.push(n),r.push(l),a++}if(a===e&&r.push(i[e]),p){const t=r.join("$$lit$$");void 0===(i=L.get(t))&&(r.raw=r,L.set(t,i=r)),o=h}return t(i,...o)})(k);var D;!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"}(D||(D={}));const P=i.FtCssVariableFactory.extend("--ft-typography-font-family",i.designSystemVariables.titleFont),V=i.FtCssVariableFactory.extend("--ft-typography-font-family",i.designSystemVariables.contentFont),q={fontFamily:V,fontSize:i.FtCssVariableFactory.create("--ft-typography-font-size","SIZE","16px"),fontWeight:i.FtCssVariableFactory.create("--ft-typography-font-weight","UNKNOWN","normal"),letterSpacing:i.FtCssVariableFactory.create("--ft-typography-letter-spacing","SIZE","0.496px"),lineHeight:i.FtCssVariableFactory.create("--ft-typography-line-height","NUMBER","1.5"),textTransform:i.FtCssVariableFactory.create("--ft-typography-text-transform","UNKNOWN","inherit")},J=i.FtCssVariableFactory.extend("--ft-typography-title-font-family",P),Q=i.FtCssVariableFactory.extend("--ft-typography-title-font-size",q.fontSize,"20px"),X=i.FtCssVariableFactory.extend("--ft-typography-title-font-weight",q.fontWeight,"normal"),Y=i.FtCssVariableFactory.extend("--ft-typography-title-letter-spacing",q.letterSpacing,"0.15px"),tt=i.FtCssVariableFactory.extend("--ft-typography-title-line-height",q.lineHeight,"1.2"),it=i.FtCssVariableFactory.extend("--ft-typography-title-text-transform",q.textTransform,"inherit"),ot=i.FtCssVariableFactory.extend("--ft-typography-title-dense-font-family",P),et=i.FtCssVariableFactory.extend("--ft-typography-title-dense-font-size",q.fontSize,"14px"),st=i.FtCssVariableFactory.extend("--ft-typography-title-dense-font-weight",q.fontWeight,"normal"),nt=i.FtCssVariableFactory.extend("--ft-typography-title-dense-letter-spacing",q.letterSpacing,"0.105px"),rt=i.FtCssVariableFactory.extend("--ft-typography-title-dense-line-height",q.lineHeight,"1.7"),ht=i.FtCssVariableFactory.extend("--ft-typography-title-dense-text-transform",q.textTransform,"inherit"),lt=i.FtCssVariableFactory.extend("--ft-typography-subtitle1-font-family",V),at=i.FtCssVariableFactory.extend("--ft-typography-subtitle1-font-size",q.fontSize,"16px"),pt=i.FtCssVariableFactory.extend("--ft-typography-subtitle1-font-weight",q.fontWeight,"600"),ft=i.FtCssVariableFactory.extend("--ft-typography-subtitle1-letter-spacing",q.letterSpacing,"0.144px"),yt=i.FtCssVariableFactory.extend("--ft-typography-subtitle1-line-height",q.lineHeight,"1.5"),gt=i.FtCssVariableFactory.extend("--ft-typography-subtitle1-text-transform",q.textTransform,"inherit"),ct=i.FtCssVariableFactory.extend("--ft-typography-subtitle2-font-family",V),dt=i.FtCssVariableFactory.extend("--ft-typography-subtitle2-font-size",q.fontSize,"14px"),ut=i.FtCssVariableFactory.extend("--ft-typography-subtitle2-font-weight",q.fontWeight,"normal"),vt=i.FtCssVariableFactory.extend("--ft-typography-subtitle2-letter-spacing",q.letterSpacing,"0.098px"),$t=i.FtCssVariableFactory.extend("--ft-typography-subtitle2-line-height",q.lineHeight,"1.7"),bt=i.FtCssVariableFactory.extend("--ft-typography-subtitle2-text-transform",q.textTransform,"inherit"),mt=i.FtCssVariableFactory.extend("--ft-typography-body1-font-family",V),xt=i.FtCssVariableFactory.extend("--ft-typography-body1-font-size",q.fontSize,"16px"),wt=i.FtCssVariableFactory.extend("--ft-typography-body1-font-weight",q.fontWeight,"normal"),zt=i.FtCssVariableFactory.extend("--ft-typography-body1-letter-spacing",q.letterSpacing,"0.496px"),kt=i.FtCssVariableFactory.extend("--ft-typography-body1-line-height",q.lineHeight,"1.5"),At=i.FtCssVariableFactory.extend("--ft-typography-body1-text-transform",q.textTransform,"inherit"),Nt=i.FtCssVariableFactory.extend("--ft-typography-body2-font-family",V),_t=i.FtCssVariableFactory.extend("--ft-typography-body2-font-size",q.fontSize,"14px"),St=i.FtCssVariableFactory.extend("--ft-typography-body2-font-weight",q.fontWeight,"normal"),Et=i.FtCssVariableFactory.extend("--ft-typography-body2-letter-spacing",q.letterSpacing,"0.252px"),Ot=i.FtCssVariableFactory.extend("--ft-typography-body2-line-height",q.lineHeight,"1.4"),Tt=i.FtCssVariableFactory.extend("--ft-typography-body2-text-transform",q.textTransform,"inherit"),Ct=i.FtCssVariableFactory.extend("--ft-typography-caption-font-family",V),It=i.FtCssVariableFactory.extend("--ft-typography-caption-font-size",q.fontSize,"12px"),jt=i.FtCssVariableFactory.extend("--ft-typography-caption-font-weight",q.fontWeight,"normal"),Mt=i.FtCssVariableFactory.extend("--ft-typography-caption-letter-spacing",q.letterSpacing,"0.396px"),Rt=i.FtCssVariableFactory.extend("--ft-typography-caption-line-height",q.lineHeight,"1.33"),Ut=i.FtCssVariableFactory.extend("--ft-typography-caption-text-transform",q.textTransform,"inherit"),Ft=i.FtCssVariableFactory.extend("--ft-typography-breadcrumb-font-family",V),Zt=i.FtCssVariableFactory.extend("--ft-typography-breadcrumb-font-size",q.fontSize,"10px"),Bt=i.FtCssVariableFactory.extend("--ft-typography-breadcrumb-font-weight",q.fontWeight,"normal"),Wt=i.FtCssVariableFactory.extend("--ft-typography-breadcrumb-letter-spacing",q.letterSpacing,"0.33px"),Gt=i.FtCssVariableFactory.extend("--ft-typography-breadcrumb-line-height",q.lineHeight,"1.6"),Ht=i.FtCssVariableFactory.extend("--ft-typography-breadcrumb-text-transform",q.textTransform,"inherit"),Lt=i.FtCssVariableFactory.extend("--ft-typography-overline-font-family",V),Kt=i.FtCssVariableFactory.extend("--ft-typography-overline-font-size",q.fontSize,"10px"),Dt=i.FtCssVariableFactory.extend("--ft-typography-overline-font-weight",q.fontWeight,"normal"),Pt=i.FtCssVariableFactory.extend("--ft-typography-overline-letter-spacing",q.letterSpacing,"1.5px"),Vt=i.FtCssVariableFactory.extend("--ft-typography-overline-line-height",q.lineHeight,"1.6"),qt=i.FtCssVariableFactory.extend("--ft-typography-overline-text-transform",q.textTransform,"uppercase"),Jt=i.FtCssVariableFactory.extend("--ft-typography-button-font-family",V),Qt=i.FtCssVariableFactory.extend("--ft-typography-button-font-size",q.fontSize,"14px"),Xt=i.FtCssVariableFactory.extend("--ft-typography-button-font-weight",q.fontWeight,"600"),Yt=i.FtCssVariableFactory.extend("--ft-typography-button-letter-spacing",q.letterSpacing,"1.246px"),ti=i.FtCssVariableFactory.extend("--ft-typography-button-line-height",q.lineHeight,"1.15"),ii=i.FtCssVariableFactory.extend("--ft-typography-button-text-transform",q.textTransform,"uppercase"),oi=o.css`
14
14
  .ft-typography--title {
15
- font-family: ${Q};
16
- font-size: ${V};
15
+ font-family: ${J};
16
+ font-size: ${Q};
17
17
  font-weight: ${X};
18
18
  letter-spacing: ${Y};
19
19
  line-height: ${tt};
@@ -70,16 +70,16 @@ const B=Symbol.for(""),G=t=>{if((null==t?void 0:t.r)===B)return null==t?void 0:t
70
70
  font-family: ${Ct};
71
71
  font-size: ${It};
72
72
  font-weight: ${jt};
73
- letter-spacing: ${Rt};
74
- line-height: ${Ut};
75
- text-transform: ${Ft};
73
+ letter-spacing: ${Mt};
74
+ line-height: ${Rt};
75
+ text-transform: ${Ut};
76
76
  }
77
77
  `,ai=o.css`
78
78
  .ft-typography--breadcrumb {
79
- font-family: ${Mt};
79
+ font-family: ${Ft};
80
80
  font-size: ${Zt};
81
- font-weight: ${Wt};
82
- letter-spacing: ${Bt};
81
+ font-weight: ${Bt};
82
+ letter-spacing: ${Wt};
83
83
  line-height: ${Gt};
84
84
  text-transform: ${Ht};
85
85
  }
@@ -89,13 +89,13 @@ const B=Symbol.for(""),G=t=>{if((null==t?void 0:t.r)===B)return null==t?void 0:t
89
89
  font-size: ${Kt};
90
90
  font-weight: ${Dt};
91
91
  letter-spacing: ${Pt};
92
- line-height: ${qt};
93
- text-transform: ${Jt};
92
+ line-height: ${Vt};
93
+ text-transform: ${qt};
94
94
  }
95
95
  `,fi=o.css`
96
96
  .ft-typography--button {
97
- font-family: ${Qt};
98
- font-size: ${Vt};
97
+ font-family: ${Jt};
98
+ font-size: ${Qt};
99
99
  font-weight: ${Xt};
100
100
  letter-spacing: ${Yt};
101
101
  line-height: ${ti};
@@ -115,7 +115,6 @@ const B=Symbol.for(""),G=t=>{if((null==t?void 0:t.r)===B)return null==t?void 0:t
115
115
  `}}ci.styles=[oi,ei,si,ni,ri,hi,li,ai,pi,fi,yi],gi([e.property()],ci.prototype,"element",void 0),gi([e.property()],ci.prototype,"variant",void 0),i.customElement("ft-typography")(ci);const di={distance:i.FtCssVariableFactory.create("--ft-tooltip-distance","SIZE","4px"),color:i.FtCssVariableFactory.create("--ft-tooltip-color","COLOR","#FFFFFF"),backgroundColor:i.FtCssVariableFactory.create("--ft-tooltip-background-color","COLOR","#666666"),zIndex:i.FtCssVariableFactory.create("--ft-tooltip-z-index","NUMBER","1"),borderRadiusS:i.FtCssVariableFactory.external(i.designSystemVariables.borderRadiusS,"Design system"),maxWidth:i.FtCssVariableFactory.create("--ft-tooltip-max-width","SIZE","150px")},ui=o.css`
116
116
  .ft-tooltip--container {
117
117
  display: block;
118
- position: relative;
119
118
  }
120
119
 
121
120
  .ft-tooltip--inline {
@@ -139,8 +138,6 @@ const B=Symbol.for(""),G=t=>{if((null==t?void 0:t.r)===B)return null==t?void 0:t
139
138
  border-radius: ${di.borderRadiusS};
140
139
  background-color: ${di.backgroundColor};
141
140
  color: ${di.color};
142
- top: -500px;
143
- left: -500px;
144
141
  position: relative;
145
142
  word-break: break-word;
146
143
  }
@@ -162,4 +159,4 @@ const B=Symbol.for(""),G=t=>{if((null==t?void 0:t.r)===B)return null==t?void 0:t
162
159
  </div>
163
160
  </div>
164
161
  </div>
165
- `}update(t){t.has("visible")&&!this.visible&&this.resetTooltipContent(),super.update(t)}contentAvailableCallback(t){super.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=4-i.left);const r=this.tooltip.style;r.left=s+"px",r.top=n+"px",r.maxWidth=`max(${i.width}px, ${di.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())}}$i.elementDefinitions={"ft-typography":ci},$i.styles=ui,vi([e.property()],$i.prototype,"text",void 0),vi([e.property({type:Boolean})],$i.prototype,"manual",void 0),vi([e.property({type:Boolean})],$i.prototype,"inline",void 0),vi([e.property({type:Number})],$i.prototype,"delay",void 0),vi([e.property()],$i.prototype,"position",void 0),vi([e.queryAssignedNodes("",!0)],$i.prototype,"slotNodes",void 0),vi([e.query(".ft-tooltip--container")],$i.prototype,"container",void 0),vi([e.query("slot")],$i.prototype,"target",void 0),vi([e.query(".ft-tooltip")],$i.prototype,"tooltip",void 0),vi([e.query(".ft-tooltip--content")],$i.prototype,"tooltipContent",void 0),vi([e.state()],$i.prototype,"visible",void 0),i.customElement("ft-tooltip")($i),t.FtTooltip=$i,t.FtTooltipCssVariables=di,t.styles=ui}({},ftGlobals.wcUtils,ftGlobals.lit,ftGlobals.litDecorators);
162
+ `}update(t){t.has("visible")&&!this.visible&&this.resetTooltipContent(),super.update(t)}contentAvailableCallback(t){super.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=this.tooltip.offsetWidth,o=this.tooltip.offsetHeight,e=(t.offsetHeight-o)/2,s=(t.offsetWidth-i)/2;let n=0,r=0;switch(this.validPosition){case"top":r=t.offsetTop-o,n=t.offsetLeft+s;break;case"bottom":r=t.offsetTop+t.offsetHeight,n=t.offsetLeft+s;break;case"left":r=t.offsetTop+e,n=t.offsetLeft-i;break;case"right":r=t.offsetTop+e,n=t.offsetLeft+t.offsetWidth}const h=this.tooltip.style;h.left=this.limitValueBetween(n,0,window.innerWidth-i)+"px",h.top=this.limitValueBetween(r,0,window.innerHeight-o)+"px",h.maxWidth=`max(${t.offsetWidth}px, ${di.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())}limitValueBetween(t,i,o){return Math.max(i,Math.min(t,o))}}$i.elementDefinitions={"ft-typography":ci},$i.styles=ui,vi([e.property()],$i.prototype,"text",void 0),vi([e.property({type:Boolean})],$i.prototype,"manual",void 0),vi([e.property({type:Boolean})],$i.prototype,"inline",void 0),vi([e.property({type:Number})],$i.prototype,"delay",void 0),vi([e.property()],$i.prototype,"position",void 0),vi([e.queryAssignedNodes("",!0)],$i.prototype,"slotNodes",void 0),vi([e.query(".ft-tooltip--container")],$i.prototype,"container",void 0),vi([e.query(".ft-tooltip")],$i.prototype,"tooltip",void 0),vi([e.query(".ft-tooltip--content")],$i.prototype,"tooltipContent",void 0),vi([e.state()],$i.prototype,"visible",void 0),i.customElement("ft-tooltip")($i),t.FtTooltip=$i,t.FtTooltipCssVariables=di,t.styles=ui}({},ftGlobals.wcUtils,ftGlobals.lit,ftGlobals.litDecorators);
@@ -206,7 +206,6 @@ const Ct=Symbol.for(""),Et=t=>{if((null==t?void 0:t.r)===Ct)return null==t?void
206
206
  `}}Yi.styles=[Wi,Di,Hi,Ki,Ii,Zi,Vi,Ji,qi,Xi,Gi],Qi([o()],Yi.prototype,"element",void 0),Qi([o()],Yi.prototype,"variant",void 0),h("ft-typography")(Yi);const te={distance:yt.create("--ft-tooltip-distance","SIZE","4px"),color:yt.create("--ft-tooltip-color","COLOR","#FFFFFF"),backgroundColor:yt.create("--ft-tooltip-background-color","COLOR","#666666"),zIndex:yt.create("--ft-tooltip-z-index","NUMBER","1"),borderRadiusS:yt.external(vt.borderRadiusS,"Design system"),maxWidth:yt.create("--ft-tooltip-max-width","SIZE","150px")},ie=v`
207
207
  .ft-tooltip--container {
208
208
  display: block;
209
- position: relative;
210
209
  }
211
210
 
212
211
  .ft-tooltip--inline {
@@ -230,8 +229,6 @@ const Ct=Symbol.for(""),Et=t=>{if((null==t?void 0:t.r)===Ct)return null==t?void
230
229
  border-radius: ${te.borderRadiusS};
231
230
  background-color: ${te.backgroundColor};
232
231
  color: ${te.color};
233
- top: -500px;
234
- left: -500px;
235
232
  position: relative;
236
233
  word-break: break-word;
237
234
  }
@@ -253,10 +250,10 @@ const Ct=Symbol.for(""),Et=t=>{if((null==t?void 0:t.r)===Ct)return null==t?void
253
250
  </div>
254
251
  </div>
255
252
  </div>
256
- `}update(t){t.has("visible")&&!this.visible&&this.resetTooltipContent(),super.update(t)}contentAvailableCallback(t){super.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,r=0;switch(this.validPosition){case"top":r=-this.tooltip.clientHeight,n=o;break;case"bottom":r=i.height,n=o;break;case"left":r=e,n=-this.tooltip.clientWidth;break;case"right":r=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=4-i.left);const s=this.tooltip.style;s.left=n+"px",s.top=r+"px",s.maxWidth=`max(${i.width}px, ${te.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())}}oe.elementDefinitions={"ft-typography":Yi},oe.styles=ie,ee([o()],oe.prototype,"text",void 0),ee([o({type:Boolean})],oe.prototype,"manual",void 0),ee([o({type:Boolean})],oe.prototype,"inline",void 0),ee([o({type:Number})],oe.prototype,"delay",void 0),ee([o()],oe.prototype,"position",void 0),ee([
253
+ `}update(t){t.has("visible")&&!this.visible&&this.resetTooltipContent(),super.update(t)}contentAvailableCallback(t){super.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=this.tooltip.offsetWidth,e=this.tooltip.offsetHeight,o=(t.offsetHeight-e)/2,n=(t.offsetWidth-i)/2;let r=0,s=0;switch(this.validPosition){case"top":s=t.offsetTop-e,r=t.offsetLeft+n;break;case"bottom":s=t.offsetTop+t.offsetHeight,r=t.offsetLeft+n;break;case"left":s=t.offsetTop+o,r=t.offsetLeft-i;break;case"right":s=t.offsetTop+o,r=t.offsetLeft+t.offsetWidth}const a=this.tooltip.style;a.left=this.limitValueBetween(r,0,window.innerWidth-i)+"px",a.top=this.limitValueBetween(s,0,window.innerHeight-e)+"px",a.maxWidth=`max(${t.offsetWidth}px, ${te.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())}limitValueBetween(t,i,e){return Math.max(i,Math.min(t,e))}}oe.elementDefinitions={"ft-typography":Yi},oe.styles=ie,ee([o()],oe.prototype,"text",void 0),ee([o({type:Boolean})],oe.prototype,"manual",void 0),ee([o({type:Boolean})],oe.prototype,"inline",void 0),ee([o({type:Number})],oe.prototype,"delay",void 0),ee([o()],oe.prototype,"position",void 0),ee([
257
254
  /**
258
255
  * @license
259
256
  * Copyright 2017 Google LLC
260
257
  * SPDX-License-Identifier: BSD-3-Clause
261
258
  */
262
- function(t,i,e){let o,r=t;return"object"==typeof t?(r=t.slot,o=t):o={flatten:i},e?function(t){const{slot:i,selector:e}=null!=t?t:{};return n({descriptor:o=>({get(){var o;const n="slot"+(i?`[name=${i}]`:":not([name])"),r=null===(o=this.renderRoot)||void 0===o?void 0:o.querySelector(n),s=null!=r?a(r,t):[];return e?s.filter((t=>t.matches(e))):s},enumerable:!0,configurable:!0})})}({slot:r,flatten:i,selector:e}):n({descriptor:t=>({get(){var t,i;const e="slot"+(r?`[name=${r}]`:":not([name])"),n=null===(t=this.renderRoot)||void 0===t?void 0:t.querySelector(e);return null!==(i=null==n?void 0:n.assignedNodes(o))&&void 0!==i?i:[]},enumerable:!0,configurable:!0})})}("",!0)],oe.prototype,"slotNodes",void 0),ee([r(".ft-tooltip--container")],oe.prototype,"container",void 0),ee([r("slot")],oe.prototype,"target",void 0),ee([r(".ft-tooltip")],oe.prototype,"tooltip",void 0),ee([r(".ft-tooltip--content")],oe.prototype,"tooltipContent",void 0),ee([function(t){return o({...t,state:!0})}()],oe.prototype,"visible",void 0),h("ft-tooltip")(oe),t.FtTooltip=oe,t.FtTooltipCssVariables=te,t.styles=ie}({});
259
+ function(t,i,e){let o,r=t;return"object"==typeof t?(r=t.slot,o=t):o={flatten:i},e?function(t){const{slot:i,selector:e}=null!=t?t:{};return n({descriptor:o=>({get(){var o;const n="slot"+(i?`[name=${i}]`:":not([name])"),r=null===(o=this.renderRoot)||void 0===o?void 0:o.querySelector(n),s=null!=r?a(r,t):[];return e?s.filter((t=>t.matches(e))):s},enumerable:!0,configurable:!0})})}({slot:r,flatten:i,selector:e}):n({descriptor:t=>({get(){var t,i;const e="slot"+(r?`[name=${r}]`:":not([name])"),n=null===(t=this.renderRoot)||void 0===t?void 0:t.querySelector(e);return null!==(i=null==n?void 0:n.assignedNodes(o))&&void 0!==i?i:[]},enumerable:!0,configurable:!0})})}("",!0)],oe.prototype,"slotNodes",void 0),ee([r(".ft-tooltip--container")],oe.prototype,"container",void 0),ee([r(".ft-tooltip")],oe.prototype,"tooltip",void 0),ee([r(".ft-tooltip--content")],oe.prototype,"tooltipContent",void 0),ee([function(t){return o({...t,state:!0})}()],oe.prototype,"visible",void 0),h("ft-tooltip")(oe),t.FtTooltip=oe,t.FtTooltipCssVariables=te,t.styles=ie}({});
@@ -1,8 +1,8 @@
1
1
  export type Position = "top" | "bottom" | "left" | "right";
2
2
  export interface FtTooltipProperties {
3
- text: string;
4
- inline: boolean;
5
- manual: boolean;
6
- delay: number;
7
- position: Position;
3
+ text?: string;
4
+ inline?: boolean;
5
+ manual?: boolean;
6
+ delay?: number;
7
+ position?: Position;
8
8
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluid-topics/ft-tooltip",
3
- "version": "1.0.51",
3
+ "version": "1.0.52",
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": "1.0.51",
23
- "@fluid-topics/ft-wc-utils": "1.0.51",
22
+ "@fluid-topics/ft-typography": "1.0.52",
23
+ "@fluid-topics/ft-wc-utils": "1.0.52",
24
24
  "lit": "2.7.2"
25
25
  },
26
- "gitHead": "ea2d0683e542dd824889f183d48d0ed68fca794a"
26
+ "gitHead": "e5ca580eaeb1a17693fa8f2cf59fbdca412bf7d0"
27
27
  }