@public-ui/components/dist/components/kol-tooltip-wc.js

Contains all web components that belong to KoliBri - The accessible HTML-Standard.

/*!
 * KoliBri - The accessible HTML-Standard
 */
import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{b as autoUpdate,a as alignFloatingElements}from"./align-floating-elements.js";import{h as watchString,D as getDocument}from"./common.js";import{v as validateAlign}from"./align.js";import{v as validateLabel}from"./label.js";import"./Alert.js";import"./i18n.js";import{K as KolSpanFc}from"./Span.js";import{t as tooltipOpened,a as tooltipClosed}from"./tooltip-open-tracking.js";const validateBadgeText=(t,e)=>{watchString(t,"_badgeText",e)},validateId=(t,e)=>{watchString(t,"_id",e)},VISIBLE_OVERLAYS=new Set;function showOverlay(t){VISIBLE_OVERLAYS.forEach(t=>{t.style.setProperty("z-index","999")}),VISIBLE_OVERLAYS.add(t),t.style.setProperty("z-index","1000")}function hideOverlay(t){if(VISIBLE_OVERLAYS.delete(t),VISIBLE_OVERLAYS.size>0){const t=Array.from(VISIBLE_OVERLAYS).pop();t&&t.style.setProperty("z-index","1000")}}const KolTooltipWc$1=proxyCustomElement(class extends HTMLElement{constructor(t){super(),!1!==t&&this.__registerHost(),this.hasFocusIn=!1,this.hasMouseIn=!1,this.isHiddenForCurrentVisit=!1,this.resetHideFlag=()=>{this.isNewVisit()&&(this.isHiddenForCurrentVisit=!1)},this.showTooltip=()=>{if(!this.isHiddenForCurrentVisit&&this.previousSibling&&this.tooltipElement){showOverlay(this.tooltipElement),tooltipOpened(),this.tooltipElement.classList.remove("hide"),this.tooltipElement.classList.add("show"),this.tooltipElement.style.setProperty("display","block"),getDocument().addEventListener("keyup",this.hideTooltipByEscape,{once:!0});const t=this.previousSibling,e=this.tooltipElement;this.cleanupAutoPositioning=autoUpdate(t,e,()=>{this.alignTooltip()})}},this.hideTooltipByEscape=t=>{"Escape"===t.key&&this.hideTooltip()},this.handleMouseEnter=()=>{const t=this.isNewVisit();this.hasMouseIn=!0,t&&(this.isHiddenForCurrentVisit=!1),this.showOrHideTooltip()},this.handleMouseleave=t=>{var e,i;this.hasMouseIn=null!==(i=null===(e=this.tooltipElement)||void 0===e?void 0:e.contains(t.relatedTarget))&&void 0!==i&&i,this.resetHideFlag(),this.showOrHideTooltip()},this.handleFocusIn=()=>{const t=this.isNewVisit();this.hasFocusIn=!0,t&&(this.isHiddenForCurrentVisit=!1),this.showOrHideTooltip()},this.handleFocusout=()=>{this.hasFocusIn=!1,this.resetHideFlag(),this.showOrHideTooltip()},this.addListeners=t=>{t.addEventListener("mouseenter",this.handleMouseEnter),t.addEventListener("mouseleave",this.handleMouseleave),t.addEventListener("focusin",this.handleFocusIn),t.addEventListener("focusout",this.handleFocusout)},this.removeListeners=t=>{t.removeEventListener("mouseenter",this.handleMouseEnter),t.removeEventListener("mouseleave",this.handleMouseleave),t.removeEventListener("focusin",this.handleFocusIn),t.removeEventListener("focusout",this.handleFocusout)},this.resyncListeners=(t,e,i=!1)=>{t&&this.removeListeners(t),e&&(i&&(this.previousSibling=e),this.addListeners(e))},this.catchTooltipElement=t=>{this.tooltipElement=t},this.catchArrowElement=t=>{this.arrowElement=t},this._align="top",this.state={_align:"top",_label:""},this.showOrHideTooltip=()=>{clearTimeout(this.overFocusTimeout),this.overFocusTimeout=setTimeout(()=>{this.hasMouseIn||this.hasFocusIn?this.showTooltip():this.hideTooltip()},300)}}isNewVisit(){return!this.hasMouseIn&&!this.hasFocusIn}async alignTooltip(){this.tooltipElement&&this.previousSibling&&await alignFloatingElements({align:this._align,referenceElement:this.previousSibling,arrowElement:this.arrowElement,floatingElement:this.tooltipElement})}async hideTooltip(){this.isHiddenForCurrentVisit=!0,this.tooltipElement&&(hideOverlay(this.tooltipElement),tooltipClosed(),this.tooltipElement.classList.remove("show"),this.tooltipElement.classList.add("hide"),this.cleanupAutoPositioning&&(this.cleanupAutoPositioning(),this.cleanupAutoPositioning=void 0)),getDocument().removeEventListener("keyup",this.hideTooltipByEscape)}render(){return h(Host,{key:"a2f5eaf3bdde31f05706c525fb3382d04449877d",class:"kol-tooltip"},""!==this.state._label&&h("div",{key:"d29670e80057f25e00c3826a093d5baef0106ce6",class:"kol-tooltip__floating",ref:this.catchTooltipElement},h("div",{key:"5ea823469aa2fcb1c3dbf56b628445814f4fc8d0",class:"kol-tooltip__arrow",ref:this.catchArrowElement}),h(KolSpanFc,{key:"49c40bebd3067ede516b5f7edc9749f52a08cf80",class:"kol-tooltip__content",id:this.state._id,badgeText:this._badgeText,label:this.state._label})))}validateBadgeText(t){validateBadgeText(this,t)}validateAlign(t){validateAlign(this,t)}validateId(t){validateId(this,t)}validateLabel(t){validateLabel(this,t,{required:!0})}componentWillLoad(){this.validateBadgeText(this._badgeText),this.validateAlign(this._align),this.validateId(this._id),this.validateLabel(this._label)}handleEventListeners(){var t,e;const i=null!==(e=null===(t=this.host)||void 0===t?void 0:t.previousElementSibling)&&void 0!==e?e:null;this.resyncListeners(this.previousSibling,i,!0),this.resyncListeners(this.tooltipElement,this.tooltipElement)}connectedCallback(){var t,e;this.previousSibling=null!==(e=null===(t=this.host)||void 0===t?void 0:t.previousElementSibling)&&void 0!==e?e:null}componentDidRender(){this.handleEventListeners()}disconnectedCallback(){this.previousSibling&&(this.removeListeners(this.previousSibling),this.previousSibling=void 0),this.tooltipElement&&this.removeListeners(this.tooltipElement),this.cleanupAutoPositioning&&this.cleanupAutoPositioning()}get host(){return this}static get watchers(){return{_badgeText:["validateBadgeText"],_align:["validateAlign"],_id:["validateId"],_label:["validateLabel"]}}},[256,"kol-tooltip-wc",{_badgeText:[1,"_badge-text"],_align:[1],_id:[1],_label:[1],state:[32],hideTooltip:[64]},void 0,{_badgeText:["validateBadgeText"],_align:["validateAlign"],_id:["validateId"],_label:["validateLabel"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-tooltip-wc"].forEach(t=>{if("kol-tooltip-wc"===t)customElements.get(t)||customElements.define(t,KolTooltipWc$1)})}const KolTooltipWc=KolTooltipWc$1,defineCustomElement=defineCustomElement$1;export{KolTooltipWc,defineCustomElement};