@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
4 lines • 6.1 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
"use strict";var index=require("./index-C3uXtd6W.js"),alignFloatingElements=require("./align-floating-elements-DhQa2Mpw.js"),common=require("./common-1pTy2kta.js"),align=require("./align-CZMTZlEl.js"),label=require("./label-6ELpV3zN.js");require("./Alert-CpYj4v7g.js"),require("./i18n-D4Klw_bZ.js");var Span=require("./Span-CnRW44mB.js"),tooltipOpenTracking=require("./tooltip-open-tracking-Ba0udJRU.js");require("./tslib.es6-7DbU_BSw.js"),require("./clsx-CkZlkaek.js"),require("./component-names-Bu9hV7OT.js"),require("./bem-DQRepkGo.js"),require("./browser-XJa5sCFp.js"),require("./Heading-CFrR8SYV.js"),require("./i18n-yHKQt1gl.js"),require("./Icon-XibHb7vP.js"),require("./reuse-Cs36Ddzu.js"),require("./markdown-3A2I0-h0.js"),require("./InternalUnderlinedBadgeText-B9ixH4sJ.js"),require("./isObject-DMA85Fq4.js");const validateBadgeText=(e,t)=>{common.watchString(e,"_badgeText",t)},validateId=(e,t)=>{common.watchString(e,"_id",t)},VISIBLE_OVERLAYS=new Set;function showOverlay(e){VISIBLE_OVERLAYS.forEach(e=>{e.style.setProperty("z-index","999")}),VISIBLE_OVERLAYS.add(e),e.style.setProperty("z-index","1000")}function hideOverlay(e){if(VISIBLE_OVERLAYS.delete(e),VISIBLE_OVERLAYS.size>0){const e=Array.from(VISIBLE_OVERLAYS).pop();e&&e.style.setProperty("z-index","1000")}}const KolTooltipWc=class{constructor(e){index.registerInstance(this,e),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),tooltipOpenTracking.tooltipOpened(),this.tooltipElement.classList.remove("hide"),this.tooltipElement.classList.add("show"),this.tooltipElement.style.setProperty("display","block"),common.getDocument().addEventListener("keyup",this.hideTooltipByEscape,{once:!0});const e=this.previousSibling,t=this.tooltipElement;this.cleanupAutoPositioning=alignFloatingElements.autoUpdate(e,t,()=>{this.alignTooltip()})}},this.hideTooltipByEscape=e=>{"Escape"===e.key&&this.hideTooltip()},this.handleMouseEnter=()=>{const e=this.isNewVisit();this.hasMouseIn=!0,e&&(this.isHiddenForCurrentVisit=!1),this.showOrHideTooltip()},this.handleMouseleave=e=>{var t,i;this.hasMouseIn=null!==(i=null===(t=this.tooltipElement)||void 0===t?void 0:t.contains(e.relatedTarget))&&void 0!==i&&i,this.resetHideFlag(),this.showOrHideTooltip()},this.handleFocusIn=()=>{const e=this.isNewVisit();this.hasFocusIn=!0,e&&(this.isHiddenForCurrentVisit=!1),this.showOrHideTooltip()},this.handleFocusout=()=>{this.hasFocusIn=!1,this.resetHideFlag(),this.showOrHideTooltip()},this.addListeners=e=>{e.addEventListener("mouseenter",this.handleMouseEnter),e.addEventListener("mouseleave",this.handleMouseleave),e.addEventListener("focusin",this.handleFocusIn),e.addEventListener("focusout",this.handleFocusout)},this.removeListeners=e=>{e.removeEventListener("mouseenter",this.handleMouseEnter),e.removeEventListener("mouseleave",this.handleMouseleave),e.removeEventListener("focusin",this.handleFocusIn),e.removeEventListener("focusout",this.handleFocusout)},this.resyncListeners=(e,t,i=!1)=>{e&&this.removeListeners(e),t&&(i&&(this.previousSibling=t),this.addListeners(t))},this.catchTooltipElement=e=>{this.tooltipElement=e},this.catchArrowElement=e=>{this.arrowElement=e},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.alignFloatingElements({align:this._align,referenceElement:this.previousSibling,arrowElement:this.arrowElement,floatingElement:this.tooltipElement})}async hideTooltip(){this.isHiddenForCurrentVisit=!0,this.tooltipElement&&(hideOverlay(this.tooltipElement),tooltipOpenTracking.tooltipClosed(),this.tooltipElement.classList.remove("show"),this.tooltipElement.classList.add("hide"),this.cleanupAutoPositioning&&(this.cleanupAutoPositioning(),this.cleanupAutoPositioning=void 0)),common.getDocument().removeEventListener("keyup",this.hideTooltipByEscape)}render(){return index.h(index.Host,{key:"efee2bbf85c5acdd5a489a249bd7bcf7b2cd3dc2",class:"kol-tooltip"},""!==this.state._label&&index.h("div",{key:"99955951f3dd9d2c04e330be7f783ff9ebb7250f",class:"kol-tooltip__floating",ref:this.catchTooltipElement},index.h("div",{key:"b023b51d943b2ffe5cb0773edb26a3c94e60829f",class:"kol-tooltip__arrow",ref:this.catchArrowElement}),index.h(Span.KolSpanFc,{key:"ca17df24e680c94f6c1859104937c390f401e81c",class:"kol-tooltip__content",id:this.state._id,badgeText:this._badgeText,label:this.state._label})))}validateBadgeText(e){validateBadgeText(this,e)}validateAlign(e){align.validateAlign(this,e)}validateId(e){validateId(this,e)}validateLabel(e){label.validateLabel(this,e,{required:!0})}componentWillLoad(){this.validateBadgeText(this._badgeText),this.validateAlign(this._align),this.validateId(this._id),this.validateLabel(this._label)}handleEventListeners(){var e,t;const i=null!==(t=null===(e=this.host)||void 0===e?void 0:e.previousElementSibling)&&void 0!==t?t:null;this.resyncListeners(this.previousSibling,i,!0),this.resyncListeners(this.tooltipElement,this.tooltipElement)}connectedCallback(){var e,t;this.previousSibling=null!==(t=null===(e=this.host)||void 0===e?void 0:e.previousElementSibling)&&void 0!==t?t: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 index.getElement(this)}static get watchers(){return{_badgeText:["validateBadgeText"],_align:["validateAlign"],_id:["validateId"],_label:["validateLabel"]}}};exports.kol_tooltip_wc=KolTooltipWc;