@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
1 lines • 9.29 kB
JavaScript
import{r as e,c as t,f as r,h as a,H as i,g as o}from"./p-c5b7f45e.js";import{d as s,u as n,c as l,C as c}from"./p-87dd2d7d.js";import{g as p}from"./p-a4e6e35b.js";import{q as d,g as f,C as m,j as h}from"./p-6b4b7af1.js";import{C as b}from"./p-62a7ad3b.js";const x="data-calcite-popover-reference",u=class{constructor(r){e(this,r),this.calcitePopoverClose=t(this,"calcitePopoverClose",7),this.calcitePopoverOpen=t(this,"calcitePopoverOpen",7),this.closeButton=!1,this.dismissible=!1,this.disableFlip=!1,this.disablePointer=!1,this.offsetDistance=s,this.offsetSkidding=0,this.open=!1,this.overlayPositioning="absolute",this.placement="auto",this.intlClose="Close",this._referenceElement=this.getReferenceElement(),this.guid=`calcite-popover-${p()}`,this.getId=()=>this.el.id||this.guid,this.setExpandedAttr=()=>{const{_referenceElement:e,open:t}=this;e&&e.setAttribute("aria-expanded",t.toString())},this.addReferences=()=>{const{_referenceElement:e}=this;if(!e)return;const t=this.getId();e.setAttribute(x,t),e.setAttribute("aria-controls",t),this.setExpandedAttr()},this.removeReferences=()=>{const{_referenceElement:e}=this;e&&(e.removeAttribute(x),e.removeAttribute("aria-controls"),e.removeAttribute("aria-expanded"))},this.hide=()=>{this.open=!1}}offsetDistanceOffsetHandler(){this.reposition()}offsetSkiddingHandler(){this.reposition()}openHandler(e){this.reposition(),this.setExpandedAttr(),e?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:e,el:t,placement:r}=this,a=this.getModifiers();e?n({el:t,modifiers:a,placement:r,popper:e}):this.createPopper()}async setFocus(e){var t;const{closeButtonEl:a}=this;if("close-button"===e&&a)return r(a),void a.setFocus();null===(t=this.el)||void 0===t||t.focus()}async toggle(e=!this.open){this.open=e}getReferenceElement(){const{referenceElement:e,el:t}=this;return("string"==typeof e?d(t,`#${e}`):e)||null}getModifiers(){const{arrowEl:e,flipPlacements:t,disableFlip:r,disablePointer:a,offsetDistance:i,offsetSkidding:o}=this,s={name:"flip",enabled:!r};t&&(s.options={fallbackPlacements:t});const n={name:"arrow",enabled:!a};return e&&(n.options={element:e}),[n,s,{name:"offset",enabled:!0,options:{offset:[o,i]}}]}createPopper(){this.destroyPopper();const{el:e,placement:t,_referenceElement:r,overlayPositioning:a}=this,i=this.getModifiers();this.popper=l({el:e,modifiers:i,overlayPositioning:a,placement:t,referenceEl:r})}destroyPopper(){const{popper:e}=this;e&&e.destroy(),this.popper=null}renderCloseButton(){const{dismissible:e,closeButton:t,intlClose:r}=this;return e||t?a("calcite-action",{class:"close-button",onClick:this.hide,ref:e=>this.closeButtonEl=e,text:r},a("calcite-icon",{icon:"x",scale:"m"})):null}renderHeader(){const{heading:e,headingLevel:t}=this,r=e?a(b,{class:"heading",level:t||2},e):null;return r?a("div",{class:"header"},r,this.renderCloseButton()):null}render(){const{_referenceElement:e,el:t,heading:r,label:o,open:s,disablePointer:n}=this,l="rtl"===f(t),p=e&&s,d=!p,h=n?null:a("div",{class:"arrow",ref:e=>this.arrowEl=e});return a(i,{"aria-hidden":d.toString(),"aria-label":o,"calcite-hydrated-hidden":d,id:this.getId(),role:"dialog"},a("div",{class:{[m.rtl]:l,[c.animation]:!0,[c.animationActive]:p}},h,a("div",{class:{"has-header":!!r,container:!0}},this.renderHeader(),a("div",{class:"content"},a("slot",null)),r?null:this.renderCloseButton())))}get el(){return o(this)}static get watchers(){return{offsetDistance:["offsetDistanceOffsetHandler"],offsetSkidding:["offsetSkiddingHandler"],open:["openHandler"],placement:["placementHandler"],referenceElement:["referenceElementHandler"]}}};u.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:900;-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:0.25rem}: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}:host{pointer-events:none}:host([open]){pointer-events:initial}.calcite-popper-anim{background-color:var(--calcite-ui-foreground-1);border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);border-radius:0.25rem}.arrow::before{outline:1px solid var(--calcite-ui-border-3)}.header{border-width:0;border-bottom-width:1px;border-bottom-color:var(--calcite-ui-border-3);border-style:solid;display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-align:stretch;align-items:stretch;background-color:var(--calcite-ui-foreground-1);-ms-flex-pack:start;justify-content:flex-start}.heading{display:block;-ms-flex:1 1 auto;flex:1 1 auto;font-weight:var(--calcite-font-weight-medium);margin:0;padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:0.75rem;-ms-flex-item-align:center;align-self:center;color:var(--calcite-ui-text-1);font-size:var(--calcite-font-size-0);line-height:1.375;white-space:normal;word-wrap:break-word;word-break:break-word}.container{background-color:var(--calcite-ui-foreground-1);position:relative;display:-ms-flexbox;display:flex;overflow:hidden;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-direction:row;flex-direction:row;height:100%;color:var(--calcite-ui-text-1);border-radius:0.25rem}.container.has-header{-ms-flex-direction:column;flex-direction:column}.content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-item-align:center;align-self:center;height:100%}.calcite--rtl .close-button{border-radius:0.25rem 0 0 0.25rem}::slotted(calcite-panel),::slotted(calcite-flow){height:100%}';const w=class{constructor(t){e(this,t),this.selector=`[${x}]`,this.getRelatedPopover=e=>{var t;const{selector:r,el:a}=this,i=null===(t=e.closest(r))||void 0===t?void 0:t.getAttribute(x);return d(a,`#${i}`)}}render(){return a("slot",null)}closeOpenPopovers(e){const t=e.target,{autoClose:r,el:a}=this,i="calcite-popover",o=t.closest(i),s=this.getRelatedPopover(t);r&&!o&&h(a,i).filter((e=>e.open&&e!==s)).forEach((e=>e.toggle(!1))),a.contains(t)&&s&&s.toggle()}get el(){return o(this)}};export{u as calcite_popover,w as calcite_popover_manager}