@public-ui/components/dist/components/kol-popover-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{a as alignFloatingElements}from"./align-floating-elements.js";import{w as watchValidator}from"./prop.validators.js";import{v as validateShow}from"./show.js";import{g as getDocument}from"./dev.utils.js";import{a as validateAlign}from"./align.js";const validatePopoverCallbacks=(e,t)=>{watchValidator(e,"_on",(e=>"object"==typeof e&&null!==e),new Set(["PopoverCallbacksPropType {Events.onClose}"]),t)},KolPopover=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.hidePopoverByEscape=e=>{"Escape"===e.key&&this.hidePopover(e)},this.hidePopoverByClickOutside=e=>{this.host&&!this.host.contains(e.target)&&this.hidePopover(e)},this.catchHostAndTriggerElement=e=>{e&&(this.host=e,this.triggerElement=e.previousElementSibling)},this.catchPopoverElement=e=>{this.popoverElement=e},this.catchArrowElement=e=>{this.arrowElement=e},this._align="top",this._on=void 0,this._show=!1,this.state={_align:"top",_on:{},_show:!1,_visible:!1}}async showPopover(){this.addListenersToBody(),this.triggerElement&&this.popoverElement&&(await alignFloatingElements({align:this._align,referenceElement:this.triggerElement,arrowElement:this.arrowElement,floatingElement:this.popoverElement}),this.state=Object.assign(Object.assign({},this.state),{_visible:!0}))}hidePopover(e){var t,o,i;this.state=Object.assign(Object.assign({},this.state),{_visible:!1}),this._show=!1,null===(t=this.triggerElement)||void 0===t||t.focus(),this.removeListenersToBody(),null===(i=null===(o=this.state._on)||void 0===o?void 0:o.onClose)||void 0===i||i.call(o,e)}addListenersToBody(){var e;const t=getDocument().body;t.addEventListener("keyup",this.hidePopoverByEscape),t.addEventListener("click",this.hidePopoverByClickOutside),null===(e=document.scrollingElement)||void 0===e||e.addEventListener("scroll",(()=>{this.showPopover()}),{passive:!0})}removeListenersToBody(){var e;const t=getDocument().body;t.removeEventListener("keyup",this.hidePopoverByEscape),t.removeEventListener("click",this.hidePopoverByClickOutside),null===(e=document.scrollingElement)||void 0===e||e.removeEventListener("scroll",(()=>{this.showPopover()}))}render(){return h(Host,{key:"bbde2554587c05790d6d369bea98302967e5a65e",ref:this.catchHostAndTriggerElement,class:"kol-popover"},h("div",{key:"a398217c3b11d0a5e7c5b5175b2107b85c61b7fc",class:{popover:!0,show:this.state._visible},ref:this.catchPopoverElement,hidden:!this.state._show},h("div",{key:"85e4736b72df4491f16b87e55e40cf1d88537eae",class:`arrow ${this.state._align}`,ref:this.catchArrowElement}),h("slot",{key:"3af2ff3203688dbbb0421a6b87c6b3e471a00ee9"})))}validateAlign(e){validateAlign(this,e)}validateOn(e){validatePopoverCallbacks(this,e)}validateShow(e){validateShow(this,e),e&&this.showPopover()}componentWillLoad(){this.validateAlign(this._align),this.validateShow(this._show)}static get watchers(){return{_align:["validateAlign"],_on:["validateOn"],_show:["validateShow"]}}},[4,"kol-popover-wc",{_align:[1],_on:[16],_show:[1540],state:[32]},void 0,{_align:["validateAlign"],_on:["validateOn"],_show:["validateShow"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-popover-wc"].forEach((e=>{if("kol-popover-wc"===e)customElements.get(e)||customElements.define(e,KolPopover)}))}const KolPopoverWc=KolPopover,defineCustomElement=defineCustomElement$1;export{KolPopoverWc,defineCustomElement};