@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
4 lines • 3.85 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import{r as registerInstance,h}from"./index-136f59ac.js";import{a as alignFloatingElements,b as autoUpdate}from"./align-floating-elements-14bb4167.js";import{a as KolButtonWcTag}from"./component-names-799e91e2.js";import"./index-88dea7b1.js";import{a as validateAlignment}from"./align-a05c3d17.js";const validatePopoverAlign=(e,t)=>{validateAlignment(e,"_popoverAlign",t)},KolPopoverButton=class{constructor(e){registerInstance(this,e),this.state={_label:"",_popoverAlign:"bottom"},this.justClosed=!1,this.popoverOpen=!1,this._accessKey=void 0,this._ariaControls=void 0,this._ariaDescription=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._popoverAlign="bottom",this._role=void 0,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal"}async hidePopover(){var e;null===(e=this.refPopover)||void 0===e||e.hidePopover()}handleBeforeToggle(e){"closed"===e.newState?(this.justClosed=!0,setTimeout((()=>{this.justClosed=!1}),10)):this.refPopover&&(this.refPopover.style.visibility="hidden")}alignPopover(){this.refPopover&&this.refButton&&alignFloatingElements({align:this.state._popoverAlign,floatingElement:this.refPopover,referenceElement:this.refButton})}handleToggle(e){this.popoverOpen="open"===e.newState,this.popoverOpen?this.refPopover&&this.refButton&&(this.cleanupAutoPositioning=autoUpdate(this.refButton,this.refPopover,(()=>{this.alignPopover()}))):this.cleanupAutoPositioning&&(this.cleanupAutoPositioning(),this.cleanupAutoPositioning=void 0)}handleButtonClick(){var e;this.justClosed||null===(e=this.refPopover)||void 0===e||e.togglePopover()}componentDidRender(){var e,t;null===(e=this.refPopover)||void 0===e||e.addEventListener("toggle",this.handleToggle.bind(this)),null===(t=this.refPopover)||void 0===t||t.addEventListener("beforetoggle",this.handleBeforeToggle.bind(this))}disconnectedCallback(){var e,t,o;null===(e=this.refPopover)||void 0===e||e.removeEventListener("toggle",this.handleToggle.bind(this)),null===(t=this.refPopover)||void 0===t||t.removeEventListener("beforetoggle",this.handleBeforeToggle.bind(this)),null===(o=this.cleanupAutoPositioning)||void 0===o||o.call(this)}render(){return h("div",{key:"206f8ca65fb9c5809131fa9d08e90cf4afd93d97",class:"kol-popover-button"},h(KolButtonWcTag,{key:"624111c94002f9eb26bdf1989a1a9a66797b841f",_accessKey:this._accessKey,"_aria-controls":"popover",_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaExpanded:this.popoverOpen,_ariaHasPopup:"dialog",_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_id:this._id,_label:this._label,_name:this._name,_on:this._on,_role:this._role,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant,"data-testid":"popover-button",class:"kol-popover-button__button",ref:e=>this.refButton=e,onClick:this.handleButtonClick.bind(this)},h("slot",{key:"c966b32562203c241467a4a2b36fcab3482f58a5",name:"expert",slot:"expert"})),h("div",{key:"b57280767eaf5d08b3b4d6d761b2db64c6db30a0",ref:e=>this.refPopover=e,"data-testid":"popover-content",popover:"auto",id:"popover",class:"kol-popover-button__popover"},h("slot",{key:"6dd81376c1de8e14c7e59d91a8e92009d827a8e1"})))}validatePopoverAlign(e){validatePopoverAlign(this,e)}componentWillLoad(){this.validatePopoverAlign(this._popoverAlign)}static get watchers(){return{_popoverAlign:["validatePopoverAlign"]}}};export{KolPopoverButton as kol_popover_button_wc};