@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
4 lines • 5.49 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index$1=require("./index-a40019ac.js"),alignFloatingElements=require("./align-floating-elements-7e50809a.js"),index=require("./index-94c17ce6.js");require("./i18n-b01aa5d0.js"),require("./bem-85316256.js");const Span=require("./Span-cd26b541.js"),align=require("./align-6dbf7621.js"),label=require("./label-7b22af75.js");require("./i18n-8c288a27.js"),require("./browser-4433089a.js"),require("./tslib.es6-5e301284.js"),require("./clsx-dd4d6dd1.js"),require("./Icon-add098ba.js"),require("./component-names-82c4d68d.js"),require("./markdown-164534bf.js"),require("./InternalUnderlinedBadgeText-63e8b102.js"),require("./isArray-e114fe6e.js"),require("./isObject-6090b636.js");const validateBadgeText=(e,t)=>{index.watchString(e,"_badgeText",t)},validateId=(e,t)=>{index.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$1.registerInstance(this,e),this.showTooltip=()=>{if(this.previousSibling&&this.tooltipElement){showOverlay(this.tooltipElement),this.tooltipElement.style.setProperty("display","block"),index.getDocument().addEventListener("keyup",this.hideTooltipByEscape);const e=this.previousSibling,t=this.tooltipElement;this.cleanupAutoPositioning=alignFloatingElements.autoUpdate(e,t,(()=>{this.alignTooltip()}))}},this.showTooltipWithDelay=()=>{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._badgeText=void 0,this._align="top",this._id=void 0,this._label=void 0,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)),index.getDocument().removeEventListener("keyup",this.hideTooltipByEscape)}handleMouseEnter(){this.showTooltipWithDelay()}handleMouseleave(){this.hideTooltipWithDelay()}handleFocusIn(){this.showTooltipWithDelay()}handleFocusout(){this.hideTooltipWithDelay()}render(){return index$1.h(index$1.Host,{key:"6ad9ed485572637aed6d5cdd5541a08dd4df4370",class:"kol-tooltip"},""!==this.state._label&&index$1.h("div",{key:"b17bbd19a6179aab5d0d1c1a84ae9f0132bae650",class:"kol-tooltip__floating",ref:this.catchTooltipElement},index$1.h("div",{key:"38a52559848377f83753eb0e1d38bb1e0dad93da",class:"kol-tooltip__arrow",ref:this.catchArrowElement}),index$1.h(Span.KolSpanFc,{key:"08d2154602b5d6c27753ad06886b00f951c395c4",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$1.getElement(this)}static get watchers(){return{_badgeText:["validateBadgeText"],_align:["validateAlign"],_id:["validateId"],_label:["validateLabel"]}}};exports.kol_tooltip_wc=KolTooltipWc;