@limetech/lime-elements
Version:
1 lines • 4.54 kB
JavaScript
import{r as e,c as o,h as t,a as r}from"./p-DBTJNfo7.js";import{c as i}from"./p-JbKhhoXs.js";import{E as s}from"./p-rI0IeKpx.js";import{f as a,z as n}from"./p-BqiDn_Sf.js";import"./p-ZcW3uvZL.js";import"./p-Cs5T63LB.js";import"./p-f_1nwOC8.js";import"./p-efBXH4mj.js";import"./p-DtS35Df5.js";import"./p-BJQylLSL.js";function p(e,o){var t;if(e.contains(o)||(null===(t=e.shadowRoot)||void 0===t?void 0:t.contains(o)))return!0;const r=function(e){const o=e.closest(".limel-portal--container");if(o)return o.portalSource;return e.getRootNode().host}(o);return!!r&&p(e,r)}const c=class{constructor(t){e(this,t),this.close=o(this,"close"),this.open=!1,this.shouldRestoreFocusOnClose=!1,this.handleGlobalKeyPress=e=>{e.key===s&&(e.stopPropagation(),e.preventDefault(),this.requestCloseAndRestoreFocus())},this.requestCloseAndRestoreFocus=()=>{this.shouldRestoreFocusOnClose=!0,this.close.emit()},this.setTriggerRef=e=>{this.triggerSlot=e},this.focusTrigger=()=>{var e,o;const t=null===(o=null===(e=this.triggerSlot)||void 0===e?void 0:e.assignedElements())||void 0===o?void 0:o[0];a(t)},this.setTriggerAttributes=e=>{const o={"aria-haspopup":!0,"aria-expanded":this.open,"aria-controls":this.portalId,role:"button"};for(const[t,r]of Object.entries(o))r?e.setAttribute(t,String(r)):e.removeAttribute(t)},this.portalId=i(),this.globalClickListener=this.globalClickListener.bind(this)}watchOpen(){this.setupGlobalHandlers(),!this.open&&this.shouldRestoreFocusOnClose&&(this.shouldRestoreFocusOnClose=!1,setTimeout(this.focusTrigger,0))}componentWillLoad(){this.setupGlobalHandlers()}componentDidRender(){this.triggerSlot&&this.triggerSlot.assignedElements().forEach(this.setTriggerAttributes)}setupGlobalHandlers(){this.open?(document.addEventListener("click",this.globalClickListener,{capture:!0}),document.addEventListener("keydown",this.handleGlobalKeyPress)):(document.removeEventListener("click",this.globalClickListener),document.removeEventListener("keydown",this.handleGlobalKeyPress))}render(){const e=this.getCssProperties(),o=getComputedStyle(this.host).getPropertyValue("--popover-z-index");return t("div",{key:"53e64435fa661015fbbf2e449890864c8008c329",class:"trigger-anchor"},t("slot",{key:"85336e8f76377921850ffc7704c7588707c45066",name:"trigger",ref:this.setTriggerRef}),t("limel-portal",{key:"a40bfde87375a494ac5404911b4b1f058a55becf",visible:this.open,containerId:this.portalId,containerStyle:{"z-index":o},openDirection:this.openDirection},t("limel-popover-surface",{key:"396e369ae3e61a79bfd2f520e05187a6ff85f834",contentCollection:this.host.children,style:e})))}globalClickListener(e){const o=p(this.host,e.target);this.open&&!o&&(e.stopPropagation(),e.preventDefault(),this.close.emit())}getCssProperties(){const e=["--popover-surface-width","--popover-body-background-color","--popover-border-radius","--popover-box-shadow"],o=getComputedStyle(this.host),t=e.map((e=>o.getPropertyValue(e)));return n(e,t)}get host(){return r(this)}static get watchers(){return{open:[{watchOpen:0}]}}};c.style=".trigger-anchor{display:inline-block;position:relative}";const l=class{constructor(o){e(this,o)}componentDidLoad(){this.appendElement()}render(){return t("div",{key:"72e73b254be6cebbd27332329b10a58210ae0352",class:"limel-popover-surface",tabindex:"0"})}appendElement(){const e=this.host.shadowRoot.querySelector(".limel-popover-surface"),o=[...this.contentCollection];for(const t of o)"trigger"!==t.slot&&e.append(t)}get host(){return r(this)}};l.style='@charset "UTF-8";:host(limel-popover-surface){isolation:isolate;position:relative;display:flex;width:var(--popover-surface-width, auto);max-height:inherit;max-width:calc(100vw - 2rem);margin:0 0.25rem}.limel-popover-surface{flex:1;min-width:0;min-height:0;border-radius:var(--popover-border-radius, 0.75rem);box-shadow:var(--popover-box-shadow, var(--shadow-depth-16));backdrop-filter:blur(0.3125rem);-webkit-backdrop-filter:blur(0.3125rem)}.limel-popover-surface:after{transition:opacity 0.4s ease;pointer-events:none;content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;opacity:0.95;border-radius:var(--popover-border-radius, 0.75rem);background-color:var(--popover-body-background-color, var(--lime-elevated-surface-background-color))}.limel-popover-surface:focus{outline:none}.limel-popover-surface:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.limel-popover-surface:focus:after,.limel-popover-surface:focus-within:after{opacity:1}.limel-popover-surface>*{box-sizing:border-box}';export{c as limel_popover,l as limel_popover_surface}