@tet/tet-components 1.4.87-testing → 1.4.88-staging

package/dist/tet-components/p-253cb3d0.entry.js

@@ -0,0 +1 @@
+import{r as t,g as o,h as i,H as e}from"./p-5abb3bea.js";import{T as n}from"./p-45f4f129.js";const s=class{constructor(o){t(this,o),this.theme="classic",this.targetElementSelector=void 0,this.hoverElement=void 0,this.doNotShowOnHover=!1,this.position=n.BOTTOM,this.positionState=n.BOTTOM,this.showTooltip=!1}targetElement;tooltipPointer;margin=8;tooltipTimeThreshold=.25;tooltipStartTime;tooltipEndTime;resizeObserver;displayTimeout;showHandler=this.show.bind(this);hideHandler=this.hide.bind(this);get element(){return o(this)}handleTouchmove(){this.hideQuick()}handleWheel(){this.hideQuick()}onKeydown(t){"Escape"===t.code&&this.hideQuick()}handleResize(){this.positionState=this.position}handlePositionChange(t){this.positionState=t}hideQuick=()=>{this.showTooltip&&(this.tooltipStartTime=Date.now(),this.hide())};onShowTooltipChange(t){t?this.element.classList.remove("hidden","hidden-quick"):this.element.classList.add(this.tooltipEndTime/1e3-this.tooltipStartTime/1e3>this.tooltipTimeThreshold?"hidden":"hidden-quick")}async componentWillLoad(){this.targetElement=this.targetElementSelector?document.querySelector(this.targetElementSelector):this.hoverElement?this.hoverElement:this.element.parentElement,this.targetElement&&(this.doNotShowOnHover||(this.targetElement.addEventListener("mouseenter",this.showHandler),this.targetElement.addEventListener("mouseleave",this.hideHandler)),this.targetElement.addEventListener("focusin",this.showHandler),this.targetElement.addEventListener("focusout",this.hideHandler),this.resizeObserver=new ResizeObserver((()=>{this.targetElement?.offsetHeight||(this.element.classList.remove("hidden"),this.element.classList.add("hidden-quick"))})),this.resizeObserver.observe(this.targetElement),this.positionState=this.position,this.element.style.display="none")}componentDidLoad(){const t=this.element,o=!this.doNotShowOnHover,i=this.targetElement;this.displayTimeout=setTimeout((()=>{this.displayTimeout=void 0,t.isConnected&&(t.style.display="inline-block",o&&i?.matches(":hover")&&this.show().then())}),100)}disconnectedCallback(){this.displayTimeout&&(clearTimeout(this.displayTimeout),this.displayTimeout=void 0),this.targetElement&&(this.doNotShowOnHover||(this.targetElement.removeEventListener("mouseenter",this.showHandler),this.targetElement.removeEventListener("mouseleave",this.hideHandler)),this.targetElement.removeEventListener("focusin",this.showHandler),this.targetElement.removeEventListener("focusout",this.hideHandler),this.resizeObserver?.disconnect())}async show(){this.tooltipStartTime=Date.now(),this.showTooltip=!0,this.positionTooltip()}async hide(){this.tooltipEndTime=Date.now(),this.showTooltip=!1}async toggle(){this.showTooltip?await this.hide():await this.show()}positionTooltip=()=>{const t=this.targetElement.getBoundingClientRect();if([n.LEFT,n.RIGHT].includes(this.positionState)){const o=window.innerWidth>t.right+this.margin+this.element.offsetWidth;this.element.offsetWidth+this.margin<t.left||o||(this.positionState=n.BOTTOM)}const o=this.positionTooltipVertically(t),i=this.positionTooltipHorizontally(t);this.element.style.margin=`${this.margin}px`;const e=this.getTooltipPosition(o||i);this.positionTooltipPointer(e)};getTooltipPosition(t){switch(this.positionState){case n.TOP:return t?n.BOTTOM:n.TOP;case n.BOTTOM:return t?n.TOP:n.BOTTOM;case n.LEFT:return t?n.RIGHT:n.LEFT;case n.RIGHT:return t?n.LEFT:n.RIGHT}}positionTooltipVertically(t){let o=!1;switch(this.positionState){case n.BOTTOM:t.bottom+this.element.offsetHeight+this.margin>window.innerHeight?(this.element.style.top=null,this.element.style.bottom=window.innerHeight-t.top+"px",o=!0):(this.element.style.top=`${t.bottom}px`,this.element.style.bottom=null);break;case n.TOP:t.top-this.element.offsetHeight<0?(this.element.style.top=`${t.bottom}px`,this.element.style.bottom=null,o=!0):(this.element.style.top=null,this.element.style.bottom=window.innerHeight-t.top+"px");break;default:const i=t.top+t.height/2-(this.element.offsetHeight/2+this.margin);i<0?(this.element.style.top="0",this.element.style.bottom=null):i+this.element.offsetHeight+this.margin>window.innerHeight?(this.element.style.top=null,this.element.style.bottom="0"):(this.element.style.top=`${i}px`,this.element.style.bottom=null)}return o}positionTooltipHorizontally(t){let o=!1;switch(this.positionState){case n.LEFT:this.element.offsetWidth+this.margin>t.left?(this.element.style.left=`${t.right}px`,this.element.style.right=null,o=!0):(this.element.style.left=null,this.element.style.right=window.innerWidth-t.left+"px");break;case n.RIGHT:window.innerWidth<t.right+this.margin+this.element.offsetWidth?(this.element.style.left=null,this.element.style.right=window.innerWidth-t.left+"px",o=!0):(this.element.style.left=`${t.right}px`,this.element.style.right=null);break;default:const i=t.left+t.width/2-(this.element.offsetWidth/2-this.margin);i<0?(this.element.style.left="0",this.element.style.right=null):i+this.element.offsetWidth+this.margin>window.innerWidth?(this.element.style.left=null,this.element.style.right="0"):(this.element.style.left=`${i}px`,this.element.style.right=null)}return o}positionTooltipPointer=t=>{const o=this.targetElement.getBoundingClientRect(),i=this.element.getBoundingClientRect();if([n.TOP,n.BOTTOM].includes(t)){const e=Math.min(o.right,i.left+this.element.offsetWidth),s=Math.max(o.left,i.left);this.tooltipPointer.style.left=(e+s)/2-i.left-this.tooltipPointer.offsetWidth/2+"px",t===n.BOTTOM&&(this.tooltipPointer.style.top="-6px",this.tooltipPointer.style.bottom=null,this.tooltipPointer.style.transform="rotate(0deg)"),t===n.TOP&&(this.tooltipPointer.style.top=null,this.tooltipPointer.style.bottom="-6px",this.tooltipPointer.style.transform="rotate(180deg)")}if([n.LEFT,n.RIGHT].includes(t)){const e=Math.min(o.bottom,i.top+this.element.offsetHeight),s=Math.max(o.top,i.top);this.tooltipPointer.style.top=(e+s)/2-i.top-this.tooltipPointer.offsetHeight/2+"px",t===n.RIGHT&&(this.tooltipPointer.style.left="-12px",this.tooltipPointer.style.right=null,this.tooltipPointer.style.transform="rotate(270deg)"),t===n.LEFT&&(this.tooltipPointer.style.left=null,this.tooltipPointer.style.right="-12px",this.tooltipPointer.style.transform="rotate(90deg)")}};renderTooltip=()=>i("div",{class:{tooltip:!0,[`${this.theme}`]:!0},role:"tooltip","aria-hidden":this.showTooltip?"false":"true","aria-live":this.showTooltip?"polite":void 0},i("div",{class:"tooltip-pointer",ref:t=>this.tooltipPointer=t}),i("slot",null));render(){return i(e,{key:"6a38faff0a98a733caf205fca433df05b925452c",class:{visible:this.showTooltip}},this.renderTooltip())}static get watchers(){return{position:["handlePositionChange"],showTooltip:["onShowTooltipChange"]}}};s.style=':host{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit;padding:0;margin:0}:host{--color-gray-light:#cdd2de;--color-ta070:#f5f6f8;--color-ta080:#e6e8ee;--color-ta100:#cdd2de;--color-ta200:#9ba5be;--color-ta300:#69789c;--color-ta500:#1e356a;--color-ta600:#051d59;--color-tc090:#d6e6fd;--color-tc100:#d1dffe;--color-tc300:#75a1fb;--color-tc500:#1a70f6;--color-tc600:#0060f5;--color-td500:#00F1F2;--color-td600:#01cbe0;--color-tf600:#f53b2a;--color-tg300:#2b3036;--color-tg400:#1d2128;--color-tg500:#12171e;--color-tg600:#01050c;--color-th500:#f5f5f5;--color-ti500:#869198;--color-ti600:#aeb7bc;--text-font:Gilroy, serif;--text-color-darker:var(--color-ta600);--text-color-dark:var(--color-ta500);--text-color-dark-theme:var(--color-th500);--icons-font:Tet Icons, serif}.icon.tet-search{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-search::before{content:"\\e86e"}.icon.tet-close-circled{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-close-circled::before{content:"\\e85a"}.icon.tet-close{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-close::before{content:"\\e85b"}.icon.tet-check-circled{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-check-circled::before{content:"\\e86c"}.icon.tet-check{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-check::before{content:"\\e855"}.icon.tet-chevron-up{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-chevron-up::before{content:"\\e859"}.icon.tet-chevron-down{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-chevron-down::before{content:"\\e856"}.icon.tet-clipboard{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-clipboard::before{content:"\\e86a"}.icon.tet-info{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-info::before{content:"\\e81d"}.icon.tet-done{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-done::before{content:"\\e867"}@font-face{font-family:"Gilroy";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff")}@font-face{font-family:"Gilroy";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff")}@font-face{font-family:"Gilroy";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/Gilroy-W05-Semibold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Semibold.woff") format("woff")}@font-face{font-family:"Gilroy";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/Gilroy-W05-Bold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Bold.woff") format("woff")}@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/Inter-Regular.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Regular.woff?v=3.19") format("woff")}@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/Inter-Medium.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Medium.woff?v=3.19") format("woff")}@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/Inter-SemiBold.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-SemiBold.woff?v=3.19") format("woff")}@font-face{font-family:"Gilroy";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff")}@font-face{font-family:"Gilroy";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff")}@font-face{font-family:"Gilroy";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/Gilroy-W05-Semibold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Semibold.woff") format("woff")}@font-face{font-family:"Gilroy";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/Gilroy-W05-Bold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Bold.woff") format("woff")}@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/Inter-Regular.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Regular.woff?v=3.19") format("woff")}@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/Inter-Medium.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Medium.woff?v=3.19") format("woff")}@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/Inter-SemiBold.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-SemiBold.woff?v=3.19") format("woff")}:host{--font-family-fallback:Gilroy, Arial, sans-serif;--font-family-headline:Gilroy;--font-family-content:Inter, var(--font-family-fallback);font-family:var(--font-family-content)}:host{--tooltip-background-color:var(--tc-tooltip-layer-secondary);--tooltip-text-color:var(--tc-tooltip-text-inverse-primary);--tooltip-padding:1em;--tooltip-display-speed:.2s;--tooltip-delay-show:0s;--tooltip-delay-hide:.25s;--tooltip-max-width:18.75rem;--tooltip-border-radius:0.3125rem;--tooltip-font-weight:400;position:fixed;display:inline-block;width:max-content;max-width:min(var(--tooltip-max-width), 100%);z-index:100;pointer-events:none;opacity:0}:host(.hidden){visibility:hidden;opacity:0;transition:visibility 0s var(--tooltip-display-speed), opacity var(--tooltip-display-speed) linear}:host(.hidden-quick){opacity:0;visibility:hidden;transform:scale(0)}:host(.visible){visibility:visible;opacity:1;transition:visibility 0s var(--tooltip-display-speed), opacity var(--tooltip-display-speed) linear;transition-delay:var(--tooltip-delay-show)}.light-inverse{--tooltip-background-color:var(--tc-tooltip-layer-primary);--tooltip-text-color:var(--tc-tooltip-text-primary)}.dark{--tooltip-background-color:var(--tc-tooltip-layer-primary-dark);--tooltip-text-color:var(--tc-tooltip-text-primary-dark)}.dark-inverse{--tooltip-background-color:var(--tc-tooltip-layer-secondary-dark);--tooltip-text-color:var(--tc-tooltip-text-inverse-primary-dark)}.tooltip{position:relative;background:var(--tooltip-background-color);color:var(--tooltip-text-color);border-radius:var(--tooltip-border-radius);padding:var(--tooltip-padding);font-family:var(--font-family-content);font-weight:var(--tooltip-font-weight);font-size:0.875rem;white-space:normal;line-height:1.5em}.tooltip-pointer{position:absolute;width:0;height:0;border-left:0.5rem solid transparent;border-right:0.5rem solid transparent;border-bottom:0.5rem solid var(--tooltip-background-color)}@keyframes fadeIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;visibility:visible;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1;visibility:visible;transform:scale(1)}100%{opacity:0;visibility:hidden;transform:scale(0)}}';export{s as tet_tooltip}