@esri/calcite-components/dist/calcite/p-6cc64016.entry.js

Web Components for Esri's Calcite Design System.

import{r as t,c as e,h as a,H as r,g as i}from"./p-ff68592a.js";import{d as o}from"./p-fbd3d700.js";import{g as s}from"./p-a4e6e35b.js";import{d as n,u as l,c,C as p}from"./p-5ec16bde.js";const f="data-calcite-popover-reference",d=class{constructor(a){t(this,a),this.calcitePopoverClose=e(this,"calcitePopoverClose",7),this.calcitePopoverOpen=e(this,"calcitePopoverOpen",7),this.closeButton=!1,this.disableFlip=!1,this.disablePointer=!1,this.offsetDistance=n,this.offsetSkidding=0,this.open=!1,this.placement="auto",this.intlClose="Close",this._referenceElement=this.getReferenceElement(),this.guid="calcite-popover-"+s(),this.getId=()=>this.el.id||this.guid,this.setExpandedAttr=()=>{const{_referenceElement:t,open:e}=this;t&&t.setAttribute("aria-expanded",e.toString())},this.addReferences=()=>{const{_referenceElement:t}=this;if(!t)return;const e=this.getId();t.setAttribute(f,e),t.setAttribute("aria-controls",e),this.setExpandedAttr()},this.removeReferences=()=>{const{_referenceElement:t}=this;t&&(t.removeAttribute(f),t.removeAttribute("aria-controls"),t.removeAttribute("aria-expanded"))},this.hide=()=>{this.open=!1}}offsetDistanceOffsetHandler(){this.reposition()}offsetSkiddingHandler(){this.reposition()}openHandler(t){this.reposition(),this.setExpandedAttr(),t?this.calcitePopoverOpen.emit():this.calcitePopoverClose.emit()}placementHandler(){this.reposition()}referenceElementHandler(){this.removeReferences(),this._referenceElement=this.getReferenceElement(),this.addReferences(),this.createPopper()}componentDidLoad(){this.createPopper(),this.addReferences()}disconnectedCallback(){this.removeReferences(),this.destroyPopper()}async reposition(){const{popper:t,el:e,placement:a}=this,r=this.getModifiers();t?l({el:e,modifiers:r,placement:a,popper:t}):this.createPopper()}async setFocus(t){var e,a;"close-button"!==t?null===(a=this.el)||void 0===a||a.focus():null===(e=this.closeButtonEl)||void 0===e||e.focus()}async toggle(t=!this.open){this.open=t}getReferenceElement(){const{referenceElement:t}=this;return("string"==typeof t?document.getElementById(t):t)||null}getModifiers(){const{arrowEl:t,flipPlacements:e,disableFlip:a,disablePointer:r,offsetDistance:i,offsetSkidding:o}=this,s={name:"flip",enabled:!a};e&&(s.options={fallbackPlacements:e});const n={name:"arrow",enabled:!r};return t&&(n.options={element:t}),[n,s,{name:"offset",enabled:!0,options:{offset:[o,i]}}]}createPopper(){this.destroyPopper();const{el:t,placement:e,_referenceElement:a}=this,r=this.getModifiers();this.popper=c({el:t,modifiers:r,placement:e,referenceEl:a})}destroyPopper(){const{popper:t}=this;t&&t.destroy(),this.popper=null}renderImage(){return this.el.querySelector("[slot=image]")?a("div",{class:"image-container"},a("slot",{name:"image"})):null}renderCloseButton(){const{closeButton:t,intlClose:e}=this;return t?a("button",{"aria-label":e,class:{"close-button":!0},onClick:this.hide,ref:t=>this.closeButtonEl=t,title:e},a("calcite-icon",{icon:"x",scale:"m"})):null}render(){const{_referenceElement:t,label:e,open:i,disablePointer:o}=this,s=t&&i,n=!s,l=o?null:a("div",{class:"arrow",ref:t=>this.arrowEl=t});return a(r,{"aria-hidden":n.toString(),"aria-label":e,"calcite-hydrated-hidden":n,id:this.getId(),role:"dialog"},a("div",{class:{[p.animation]:!0,[p.animationActive]:s}},l,a("div",{class:"container"},this.renderImage(),a("div",{class:"content"},a("slot",null),this.renderCloseButton()))))}get el(){return i(this)}static get watchers(){return{offsetDistance:["offsetDistanceOffsetHandler"],offsetSkidding:["offsetSkiddingHandler"],open:["openHandler"],placement:["placementHandler"],referenceElement:["referenceElementHandler"]}}};d.style='@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:block;position:absolute;z-index:999;-webkit-transform:scale(0);transform:scale(0)}.calcite-popper-anim{position:relative;z-index:1;-webkit-transition:var(--calcite-popper-transition);transition:var(--calcite-popper-transition);visibility:hidden;-webkit-transition-property:visibility, opacity, -webkit-transform;transition-property:visibility, opacity, -webkit-transform;transition-property:transform, visibility, opacity;transition-property:transform, visibility, opacity, -webkit-transform;opacity:0;-webkit-box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);border-radius:var(--calcite-border-radius)}:host([data-popper-placement^=bottom]) .calcite-popper-anim{-webkit-transform:translateY(-5px);transform:translateY(-5px)}:host([data-popper-placement^=top]) .calcite-popper-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}:host([data-popper-placement^=left]) .calcite-popper-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}:host([data-popper-placement^=right]) .calcite-popper-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}:host([data-popper-placement]) .calcite-popper-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}.arrow,.arrow::before{position:absolute;width:8px;height:8px;z-index:-1}.arrow::before{content:"";-webkit-box-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);box-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);-webkit-transform:rotate(45deg);transform:rotate(45deg);background:var(--calcite-ui-foreground-1)}:host([data-popper-placement^=top]) .arrow{bottom:-4px}:host([data-popper-placement^=bottom]) .arrow{top:-4px}:host([data-popper-placement^=left]) .arrow{right:-4px}:host([data-popper-placement^=right]) .arrow{left:-4px}.container{background:var(--calcite-ui-foreground-1);position:relative;display:-ms-flexbox;display:flex;overflow:hidden;-ms-flex-direction:column nowrap;flex-direction:column nowrap;color:var(--calcite-ui-text-1)}.content{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:start;align-items:flex-start;line-height:24px}.close-button{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out}.close-button:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:-2px}.close-button{display:block;-ms-flex:0 0 auto;flex:0 0 auto;padding:12px;border:none;border-radius:0 var(--calcite-border-radius) 0 0;color:var(--calcite-ui-text-1);cursor:pointer;background:var(--calcite-ui-foreground-1);z-index:1}.close-button:hover{background:var(--calcite-ui-foreground-2)}.close-button:active{background:var(--calcite-ui-foreground-3)}:host-context([dir=rtl]) .close-button{border-radius:var(--calcite-border-radius) 0 0 0}.image-container{overflow:hidden;max-height:200px;margin:5px}slot[name=image]::slotted(img){height:auto;width:100%;max-height:200px;-o-object-position:50% 50%;object-position:50% 50%;-o-object-fit:cover;object-fit:cover}::slotted(calcite-panel),::slotted(calcite-flow){height:100%}';const m=class{constructor(e){t(this,e),this.selector=`[${f}]`,this.getRelatedPopover=t=>o(t.closest(this.selector),f)}render(){return a(r,null)}closeOpenPopovers(t){const e=t.target,{autoClose:a,el:r}=this,i="calcite-popover",o=e.closest(i),s=this.getRelatedPopover(e);a&&!o&&Array.from(document.body.querySelectorAll(i)).filter((t=>t.open&&t!==s)).forEach((t=>t.toggle(!1))),r.contains(e)&&s&&s.toggle()}get el(){return i(this)}};export{d as calcite_popover,m as calcite_popover_manager}