@public-ui/components/dist/kolibri/kol-popover-button-wc.entry.js

Contains all web components that belong to KoliBri - The accessible HTML-Standard.

/*!
 * KoliBri - The accessible HTML-Standard
 */
import{h as t,r as i,F as s}from"./index-BQlHOxik.js";import{a as e,_ as o}from"./tslib.es6-QNbPBOk5.js";import{b as h}from"./component-names-Dy77vq43.js";import{c as n}from"./clsx-COFh-Vc8.js";import{a,b as l}from"./align-floating-elements-D5XJiLiU.js";import"./common-Cx_AGO_M.js";import{v as r}from"./inline-DnwpECF8.js";import{b as c}from"./align-DxZmRFcp.js";import{c as p}from"./dev.utils-02Sl9bQo.js";import{b as f,e as d,c as v}from"./element-interaction-Bv-mPSBn.js";import"./element-focus-CRwW4N4R.js";const m=(t,i)=>{c(t,"_popoverAlign",i)};const u=i=>{const{align:s="bottom",popoverRef:o,arrowRef:h,class:a}=i,l=e(i,["align","popoverRef","arrowRef","class"]);return t("div",Object.assign({},l,{class:n("kol-popover",a),ref:o,popover:"auto"}),t("div",{class:n("kol-popover__arrow",`kol-popover__arrow--${s}`),ref:h}),t("slot",null))};class _{constructor(){this.show=false;this.align="bottom";this.setPopoverElementRef=t=>{this.popoverElement=t;this.arrowElement=t===null||t===void 0?void 0:t.querySelector(".kol-popover__arrow")};this.setTriggerElement=t=>{this.triggerElement=t};this.setAlign=t=>{this.align=t};this.alignPopover=async()=>{if(!this.popoverElement||!this.triggerElement){return}await a({align:this.align,referenceElement:this.triggerElement,arrowElement:this.arrowElement,floatingElement:this.popoverElement})};this.setupAutoUpdate=()=>{if(!this.popoverElement||!this.triggerElement||this.cleanupAutoUpdate){return}this.cleanupAutoUpdate=l(this.triggerElement,this.popoverElement,(()=>{void this.alignPopover()}))}}setShow(t){this.show=t;if(!this.popoverElement){return}const i=()=>{var t;if(!this.popoverElement){return}const i=this.popoverElement.matches(":popover-open");if(this.show){if(!i){try{this.popoverElement.showPopover();this.setupAutoUpdate();void this.alignPopover()}catch(t){}}}else{if(i){try{this.popoverElement.hidePopover();(t=this.cleanupAutoUpdate)===null||t===void 0?void 0:t.call(this);this.cleanupAutoUpdate=undefined}catch(t){}}}};if(this.popoverElement.isConnected){i()}else{requestAnimationFrame((()=>{i()}))}}destroy(){var t;(t=this.cleanupAutoUpdate)===null||t===void 0?void 0:t.call(this);this.cleanupAutoUpdate=undefined;this.popoverElement=undefined;this.arrowElement=undefined;this.triggerElement=undefined}}const b=class{constructor(t){i(this,t);this.ctaRef=v();this.popoverCtrl=new _;this.popoverId=p("popover");this.setPopoverElementRef=t=>{this.popoverElement=t;this.popoverCtrl.setPopoverElementRef(t)};this.setButtonElementRef=t=>{this.ctaRef(t);if(t){this.popoverCtrl.setTriggerElement(t)}};this.on={onClick:()=>{this.popoverCtrl.setShow(!this.popoverOpen)}};this.state={_label:"",_popoverAlign:"bottom",_inline:false};this.popoverOpen=false;this.handleToggle=t=>{this.popoverOpen=t.newState==="open"};this._disabled=false;this._hideLabel=false;this._inline=false;this._popoverAlign="bottom";this._tooltipAlign="top";this._type="button";this._variant="normal"}async hidePopover(){this.popoverCtrl.setShow(false)}async showPopover(){this.popoverCtrl.setShow(true)}async focus(){}async click(){}render(){return t(s,null,t(h,{key:"f3b3f92128fb4d6c275ea87dacc9626d496f91c1",class:n("kol-popover-button",{"kol-popover-button--open":this.popoverOpen,"kol-popover-button--inline":this.state._inline===true,"kol-popover-button--standalone":this.state._inline===false}),_accessKey:this._accessKey,_ariaControls:this.popoverId,_ariaDescription:this._ariaDescription,_ariaExpanded:this.popoverOpen,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_id:this._id,_inline:this._inline,_label:this._label,_name:this._name,_on:this.on,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant,ref:this.setButtonElementRef},t("slot",{key:"299356030a1b0dfcd250ae79abfa32ac27669a3d",name:"expert",slot:"expert"})),t(u,{key:"34827eb9859dbea0378d1d4f9cbc259a28d152e2",align:this.state._popoverAlign||"bottom",popoverRef:this.setPopoverElementRef,class:"kol-popover-button__popover",id:this.popoverId},t("slot",{key:"98c648d7ce7aa3c9bdf8b7e43703e3b7df4bf8d3"})))}validateInline(t){r(this,t,{defaultValue:false})}validatePopoverAlign(t){m(this,t);if(t){this.popoverCtrl.setAlign(t)}}componentWillLoad(){this.validateInline(this._inline);this.validatePopoverAlign(this._popoverAlign)}componentDidRender(){if(this.popoverElement){this.popoverElement.addEventListener("toggle",this.handleToggle)}if(this.state._popoverAlign){this.popoverCtrl.setAlign(this.state._popoverAlign)}}disconnectedCallback(){if(this.popoverElement){this.popoverElement.removeEventListener("toggle",this.handleToggle)}this.popoverCtrl.destroy();this.popoverElement=undefined}static get watchers(){return{_inline:["validateInline"],_popoverAlign:["validatePopoverAlign"]}}};o([f("ctaRef")],b.prototype,"focus",null);o([d("ctaRef")],b.prototype,"click",null);export{b as kol_popover_button_wc};
//# sourceMappingURL=kol-popover-button-wc.entry.js.map