UNPKG

@public-ui/components

Version:

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

4 lines 4.15 kB
/*! * KoliBri - The accessible HTML-Standard */ "use strict";var index=require("./index-C4Loo2IH.js"),alignFloatingElements=require("./align-floating-elements-Bxx5nIn-.js"),clsx=require("./clsx-CkZlkaek.js"),componentNames=require("./component-names-CuI-0Pbo.js");require("./common-Cd2qH809.js");var inline=require("./inline-CGvu_CRs.js"),align=require("./align-CGG5V8xM.js");const validatePopoverAlign=(e,t)=>{align.validateAlignment(e,"_popoverAlign",t)},KolPopoverButton=class{constructor(e){index.registerInstance(this,e),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 kolFocus(){var e;await(null===(e=this.refButton)||void 0===e?void 0:e.kolFocus())}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.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=alignFloatingElements.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 index.h("div",{key:"874282cd81b305d92a155d8c848a5004e128db80",class:clsx.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})},index.h(componentNames.KolButtonWcTag,{key:"ae45f6997d3dac685229bfec19111fe3f63df687",_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,_inline:this._inline,_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,_buttonVariant:this._variant,"data-testid":"popover-button",class:"kol-popover-button__button",ref:e=>this.refButton=e,onClick:this.handleButtonClick.bind(this)},index.h("slot",{key:"5fdf299465dc56f94bfb739a6d66b03353687e1f",name:"expert",slot:"expert"})),index.h("div",{key:"f3e492c4f3a403b36b8e073599377c56823d0d7b",ref:e=>this.refPopover=e,"data-testid":"popover-content",popover:"auto",id:"popover",class:"kol-popover-button__popover"},index.h("slot",{key:"26ce33d67f396c08acdbc3782e4395344b37da8f"})))}validateInline(e){inline.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"]}}};exports.kol_popover_button_wc=KolPopoverButton;