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

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

/*!
 * KoliBri - The accessible HTML-Standard
 */
import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{a as alignFloatingElements,b as autoUpdate}from"./align-floating-elements.js";import{c as clsx}from"./clsx.js";import{d as KolButtonWcTag}from"./component-names.js";import"./common.js";import{v as validateInline}from"./inline.js";import{a as validateAlignment}from"./align.js";const validatePopoverAlign=(e,o)=>{validateAlignment(e,"_popoverAlign",o)},KolPopoverButton=proxyCustomElement(class extends HTMLElement{constructor(e){super(),!1!==e&&this.__registerHost(),this.on={onClick:this.handleButtonClick.bind(this)},this.state={_label:"",_popoverAlign:"bottom"},this.justClosed=!1,this.popoverOpen=!1,this._disabled=!1,this._hideLabel=!1,this._inline=!1,this._popoverAlign="bottom",this._tooltipAlign="top",this._type="button",this._variant="normal"}async hidePopover(){var e;null===(e=this.refPopover)||void 0===e||e.hidePopover()}async showPopover(){var e;null===(e=this.refPopover)||void 0===e||e.showPopover()}async focus(){var e;return Promise.resolve(null===(e=this.refButton)||void 0===e?void 0:e.focus())}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,o;null===(e=this.refPopover)||void 0===e||e.addEventListener("toggle",this.handleToggle.bind(this)),null===(o=this.refPopover)||void 0===o||o.addEventListener("beforetoggle",this.handleBeforeToggle.bind(this))}disconnectedCallback(){var e,o,t;null===(e=this.refPopover)||void 0===e||e.removeEventListener("toggle",this.handleToggle.bind(this)),null===(o=this.refPopover)||void 0===o||o.removeEventListener("beforetoggle",this.handleBeforeToggle.bind(this)),null===(t=this.cleanupAutoPositioning)||void 0===t||t.call(this)}render(){return h("div",{key:"05eb5491e975895b8f80ebcf9b079efc6a3ad442",class:clsx("kol-popover-button",{"kol-popover-button--open":this.popoverOpen,"kol-popover-button--inline":!0===this.state._inline,"kol-popover-button--standalone":!1===this.state._inline})},h(KolButtonWcTag,{key:"7e53bed4c4d0dbdeaf3cb335d91c44e4ffcbd882",_accessKey:this._accessKey,"_aria-controls":"popover",_ariaDescription:this._ariaDescription,_ariaExpanded:this.popoverOpen,_ariaHasPopup:"dialog",_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,_buttonVariant:this._variant,"data-testid":"popover-button",class:"kol-popover-button__button",ref:e=>this.refButton=e},h("slot",{key:"0d82bdca912994fa708ce548f36fd041ca620bbb",name:"expert",slot:"expert"})),h("div",{key:"aeb5ed2632a1136020e2397bdaacfe5178364608",ref:e=>this.refPopover=e,"data-testid":"popover-content",popover:"auto",id:"popover",class:"kol-popover-button__popover"},h("slot",{key:"a2e4cb60931f24e3f67a0ee39bedc921605ef55f"})))}validateInline(e){validateInline(this,e,{defaultValue:!1})}validatePopoverAlign(e){validatePopoverAlign(this,e)}componentWillLoad(){this.validateInline(this._inline),this.validatePopoverAlign(this._popoverAlign)}static get watchers(){return{_inline:["validateInline"],_popoverAlign:["validatePopoverAlign"]}}},[260,"kol-popover-button-wc",{_accessKey:[1,"_access-key"],_ariaDescription:[1,"_aria-description"],_customClass:[1,"_custom-class"],_disabled:[4],_hideLabel:[4,"_hide-label"],_icons:[1],_id:[1],_inline:[4],_label:[1],_name:[1],_popoverAlign:[1,"_popover-align"],_shortKey:[1,"_short-key"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_type:[1],_value:[8],_variant:[1],state:[32],justClosed:[32],popoverOpen:[32],hidePopover:[64],showPopover:[64],focus:[64]},void 0,{_inline:["validateInline"],_popoverAlign:["validatePopoverAlign"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-popover-button-wc"].forEach(e=>{if("kol-popover-button-wc"===e)customElements.get(e)||customElements.define(e,KolPopoverButton)})}const KolPopoverButtonWc=KolPopoverButton,defineCustomElement=defineCustomElement$1;export{KolPopoverButtonWc,defineCustomElement};