@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
4 lines • 5.4 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
"use strict";var index=require("./index-DxCCX-ts.js"),alignFloatingElements=require("./align-floating-elements-DGKVt_WY.js"),common=require("./common-BHv-S8J5.js"),align=require("./align-BqL0hNQJ.js"),label=require("./label-DLgz6vof.js");require("./Alert-BCV1CX_M.js");var Span=require("./Span-C11P7M-4.js");require("./i18n-CR9McMIU.js"),require("./Heading-DNsjTrzP.js"),require("./clsx-CkZlkaek.js"),require("./component-names-D7MwtuB7.js"),require("./bem-Ca_tURco.js"),require("./browser-DgQGXJkX.js"),require("./Icon-CWc4s7a6.js"),require("./markdown-CQWmbUr2.js"),require("./InternalUnderlinedBadgeText-BNtVBme6.js"),require("./isObject-DMA85Fq4.js"),require("./i18n-BLEJ-_9m.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 TOOLTIP_DELAY=300,KolTooltipWc=class{constructor(e){index.registerInstance(this,e),this.showTooltip=()=>{if(this.previousSibling&&this.tooltipElement){showOverlay(this.tooltipElement),this.tooltipElement.style.setProperty("display","block"),common.getDocument().addEventListener("keyup",this.hideTooltipByEscape);const e=this.previousSibling,t=this.tooltipElement;this.cleanupAutoPositioning=alignFloatingElements.autoUpdate(e,t,(()=>{this.alignTooltip()}))}},this.showTooltipWithDelay=()=>{clearTimeout(this.hideTooltipTimeout),clearTimeout(this.showTooltipTimeout),this.showTooltipTimeout=setTimeout((()=>{this.showTooltip()}),300)},this.hideTooltipWithDelay=()=>{clearTimeout(this.hideTooltipTimeout),this.hideTooltipTimeout=setTimeout((()=>{this.hideTooltip()}),300)},this.hideTooltipByEscape=e=>{"Escape"===e.key&&this.hideTooltip()},this.addListeners=e=>{e.addEventListener("mouseenter",this.handleMouseEnter.bind(this)),e.addEventListener("mouseleave",this.handleMouseleave.bind(this)),e.addEventListener("focusin",this.handleFocusIn.bind(this)),e.addEventListener("focusout",this.handleFocusout.bind(this))},this.removeListeners=e=>{e.removeEventListener("mouseenter",this.handleMouseEnter.bind(this)),e.removeEventListener("mouseleave",this.handleMouseleave.bind(this)),e.removeEventListener("focusin",this.handleFocusIn.bind(this)),e.removeEventListener("focusout",this.handleFocusout.bind(this))},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:""}}async alignTooltip(){this.tooltipElement&&this.previousSibling&&await alignFloatingElements.alignFloatingElements({align:this._align,referenceElement:this.previousSibling,arrowElement:this.arrowElement,floatingElement:this.tooltipElement})}async hideTooltip(){clearTimeout(this.showTooltipTimeout),this.tooltipElement&&(hideOverlay(this.tooltipElement),this.tooltipElement.style.setProperty("display","none"),this.tooltipElement.style.setProperty("visibility","hidden"),this.cleanupAutoPositioning&&(this.cleanupAutoPositioning(),this.cleanupAutoPositioning=void 0)),common.getDocument().removeEventListener("keyup",this.hideTooltipByEscape)}handleMouseEnter(){this.showTooltipWithDelay()}handleMouseleave(){this.hideTooltipWithDelay()}handleFocusIn(){this.showTooltipWithDelay()}handleFocusout(){this.hideTooltipWithDelay()}render(){return index.h(index.Host,{key:"60be1bd258bc5ae2b0ecce9374607d11476071b1",class:"kol-tooltip"},""!==this.state._label&&index.h("div",{key:"2af044756ca7d87c5b789181da84556a517c0ee4",class:"kol-tooltip__floating",ref:this.catchTooltipElement},index.h("div",{key:"057fc2de5c87f0f82e9477568992048bf3918e77",class:"kol-tooltip__arrow",ref:this.catchArrowElement}),index.h(Span.KolSpanFc,{key:"1ba456fb877c04c0dc1e93431f90db07f2e90b47",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;this.resyncListeners(this.previousSibling,null===(e=this.host)||void 0===e?void 0:e.previousElementSibling,!0),this.resyncListeners(this.tooltipElement,this.tooltipElement)}connectedCallback(){var e;this.previousSibling=null===(e=this.host)||void 0===e?void 0:e.previousElementSibling}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;