@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
4 lines • 6.03 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import{r as registerInstance,h,H as Host,g as getElement}from"./index-Biu4X4Y_.js";import{b as autoUpdate,a as alignFloatingElements}from"./align-floating-elements-BkpeqvtE.js";import{e as watchString,t as getDocument}from"./common-Dd0zJQbD.js";import{v as validateAlign}from"./align-D-ifSKu8.js";import{v as validateLabel}from"./label-Dnmzb2S_.js";import"./Alert-CTUp0cq0.js";import"./i18n-LBpyQ66X.js";import{K as KolSpanFc}from"./Span-BJ04za7v.js";import{t as tooltipOpened,a as tooltipClosed}from"./tooltip-open-tracking-rBbBgPWP.js";import"./tslib.es6-CxX45GIN.js";import"./clsx-eK3rPvPS.js";import"./component-names-C3fyby67.js";import"./bem-C27SfH6w.js";import"./browser-DiRe0qUf.js";import"./Heading-CNBuBGfU.js";import"./i18n-CfLoIZ8T.js";import"./Icon-BIONJyds.js";import"./reuse-CX4AQDkS.js";import"./markdown-BSkXjaSn.js";import"./InternalUnderlinedBadgeText-CZdqjm5O.js";import"./isObject-DvSELytj.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=class{constructor(t){registerInstance(this,t),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 getElement(this)}static get watchers(){return{_badgeText:["validateBadgeText"],_align:["validateAlign"],_id:["validateId"],_label:["validateLabel"]}}};export{KolTooltipWc as kol_tooltip_wc};