@esri/calcite-components/dist/esm-es5/calcite-popover_2.entry.js

Web Components for Esri's Calcite Design System.

var __awaiter=this&&this.__awaiter||function(e,t,r,o){function a(e){return e instanceof r?e:new r((function(t){t(e)}))}return new(r||(r=Promise))((function(r,n){function i(e){try{l(o.next(e))}catch(t){n(t)}}function s(e){try{l(o["throw"](e))}catch(t){n(t)}}function l(e){e.done?r(e.value):a(e.value).then(i,s)}l((o=o.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var r={label:0,sent:function(){if(n[0]&1)throw n[1];return n[1]},trys:[],ops:[]},o,a,n,i;return i={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function s(e){return function(t){return l([e,t])}}function l(i){if(o)throw new TypeError("Generator is already executing.");while(r)try{if(o=1,a&&(n=i[0]&2?a["return"]:i[0]?a["throw"]||((n=a["return"])&&n.call(a),0):a.next)&&!(n=n.call(a,i[1])).done)return n;if(a=0,n)i=[i[0]&2,n.value];switch(i[0]){case 0:case 1:n=i;break;case 4:r.label++;return{value:i[1],done:false};case 5:r.label++;a=i[1];i=[0];continue;case 7:i=r.ops.pop();r.trys.pop();continue;default:if(!(n=r.trys,n=n.length>0&&n[n.length-1])&&(i[0]===6||i[0]===2)){r=0;continue}if(i[0]===3&&(!n||i[1]>n[0]&&i[1]<n[3])){r.label=i[1];break}if(i[0]===6&&r.label<n[1]){r.label=n[1];n=i;break}if(n&&r.label<n[2]){r.label=n[2];r.ops.push(i);break}if(n[2])r.ops.pop();r.trys.pop();continue}i=t.call(e,r)}catch(s){i=[6,s];a=0}finally{o=n=0}if(i[0]&5)throw i[1];return{value:i[0]?i[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,f as forceUpdate,h,H as Host,g as getElement}from"./index-aa8afca4.js";import{d as defaultOffsetDistance,u as updatePopper,c as createPopper,C as CSS$1}from"./popper-d89fb7b0.js";import{g as guid}from"./guid-09142681.js";import{q as queryElementRoots,g as getElementDir,C as CSS_UTILITY,j as queryElementsRoots}from"./dom-466af3c7.js";import{C as CalciteHeading}from"./CalciteHeading-63c82bed.js";var CSS={container:"container",arrow:"arrow",imageContainer:"image-container",closeButton:"close-button",content:"content",hasHeader:"has-header",header:"header",headerContent:"header-content",heading:"heading"};var TEXT={close:"Close"};var POPOVER_REFERENCE="data-calcite-popover-reference";var ARIA_CONTROLS="aria-controls";var ARIA_EXPANDED="aria-expanded";var HEADING_LEVEL=2;var calcitePopoverCss='@-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%}';var CalcitePopover=function(){function e(e){var t=this;registerInstance(this,e);this.calcitePopoverClose=createEvent(this,"calcitePopoverClose",7);this.calcitePopoverOpen=createEvent(this,"calcitePopoverOpen",7);this.closeButton=false;this.dismissible=false;this.disableFlip=false;this.disablePointer=false;this.offsetDistance=defaultOffsetDistance;this.offsetSkidding=0;this.open=false;this.overlayPositioning="absolute";this.placement="auto";this.intlClose=TEXT.close;this._referenceElement=this.getReferenceElement();this.guid="calcite-popover-"+guid();this.getId=function(){return t.el.id||t.guid};this.setExpandedAttr=function(){var e=t,r=e._referenceElement,o=e.open;if(!r){return}r.setAttribute(ARIA_EXPANDED,o.toString())};this.addReferences=function(){var e=t._referenceElement;if(!e){return}var r=t.getId();e.setAttribute(POPOVER_REFERENCE,r);e.setAttribute(ARIA_CONTROLS,r);t.setExpandedAttr()};this.removeReferences=function(){var e=t._referenceElement;if(!e){return}e.removeAttribute(POPOVER_REFERENCE);e.removeAttribute(ARIA_CONTROLS);e.removeAttribute(ARIA_EXPANDED)};this.hide=function(){t.open=false}}e.prototype.offsetDistanceOffsetHandler=function(){this.reposition()};e.prototype.offsetSkiddingHandler=function(){this.reposition()};e.prototype.openHandler=function(e){this.reposition();this.setExpandedAttr();if(e){this.calcitePopoverOpen.emit()}else{this.calcitePopoverClose.emit()}};e.prototype.placementHandler=function(){this.reposition()};e.prototype.referenceElementHandler=function(){this.removeReferences();this._referenceElement=this.getReferenceElement();this.addReferences();this.createPopper()};e.prototype.componentDidLoad=function(){this.createPopper();this.addReferences()};e.prototype.disconnectedCallback=function(){this.removeReferences();this.destroyPopper()};e.prototype.reposition=function(){return __awaiter(this,void 0,void 0,(function(){var e,t,r,o,a;return __generator(this,(function(n){e=this,t=e.popper,r=e.el,o=e.placement;a=this.getModifiers();t?updatePopper({el:r,modifiers:a,placement:o,popper:t}):this.createPopper();return[2]}))}))};e.prototype.setFocus=function(e){return __awaiter(this,void 0,void 0,(function(){var t,r;return __generator(this,(function(o){r=this.closeButtonEl;if(e==="close-button"&&r){forceUpdate(r);r.setFocus();return[2]}(t=this.el)===null||t===void 0?void 0:t.focus();return[2]}))}))};e.prototype.toggle=function(e){if(e===void 0){e=!this.open}return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.open=e;return[2]}))}))};e.prototype.getReferenceElement=function(){var e=this,t=e.referenceElement,r=e.el;return(typeof t==="string"?queryElementRoots(r,"#"+t):t)||null};e.prototype.getModifiers=function(){var e=this,t=e.arrowEl,r=e.flipPlacements,o=e.disableFlip,a=e.disablePointer,n=e.offsetDistance,i=e.offsetSkidding;var s={name:"flip",enabled:!o};if(r){s.options={fallbackPlacements:r}}var l={name:"arrow",enabled:!a};if(t){l.options={element:t}}var c={name:"offset",enabled:true,options:{offset:[i,n]}};return[l,s,c]};e.prototype.createPopper=function(){this.destroyPopper();var e=this,t=e.el,r=e.placement,o=e._referenceElement,a=e.overlayPositioning;var n=this.getModifiers();this.popper=createPopper({el:t,modifiers:n,overlayPositioning:a,placement:r,referenceEl:o})};e.prototype.destroyPopper=function(){var e=this.popper;if(e){e.destroy()}this.popper=null};e.prototype.renderCloseButton=function(){var e=this;var t=this,r=t.dismissible,o=t.closeButton,a=t.intlClose;return r||o?h("calcite-action",{class:CSS.closeButton,onClick:this.hide,ref:function(t){return e.closeButtonEl=t},text:a},h("calcite-icon",{icon:"x",scale:"m"})):null};e.prototype.renderHeader=function(){var e=this,t=e.heading,r=e.headingLevel;var o=t?h(CalciteHeading,{class:CSS.heading,level:r||HEADING_LEVEL},t):null;return o?h("div",{class:CSS.header},o,this.renderCloseButton()):null};e.prototype.render=function(){var e,t;var r=this;var o=this,a=o._referenceElement,n=o.el,i=o.heading,s=o.label,l=o.open,c=o.disablePointer;var p=getElementDir(n)==="rtl";var f=a&&l;var d=!f;var u=!c?h("div",{class:CSS.arrow,ref:function(e){return r.arrowEl=e}}):null;return h(Host,{"aria-hidden":d.toString(),"aria-label":s,"calcite-hydrated-hidden":d,id:this.getId(),role:"dialog"},h("div",{class:(e={},e[CSS_UTILITY.rtl]=p,e[CSS$1.animation]=true,e[CSS$1.animationActive]=f,e)},u,h("div",{class:(t={},t[CSS.hasHeader]=!!i,t[CSS.container]=true,t)},this.renderHeader(),h("div",{class:CSS.content},h("slot",null)),!i?this.renderCloseButton():null)))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{offsetDistance:["offsetDistanceOffsetHandler"],offsetSkidding:["offsetSkiddingHandler"],open:["openHandler"],placement:["placementHandler"],referenceElement:["referenceElementHandler"]}},enumerable:false,configurable:true});return e}();CalcitePopover.style=calcitePopoverCss;var CalcitePopoverManager=function(){function e(e){var t=this;registerInstance(this,e);this.selector="["+POPOVER_REFERENCE+"]";this.getRelatedPopover=function(e){var r;var o=t,a=o.selector,n=o.el;var i=(r=e.closest(a))===null||r===void 0?void 0:r.getAttribute(POPOVER_REFERENCE);return queryElementRoots(n,"#"+i)}}e.prototype.render=function(){return h("slot",null)};e.prototype.closeOpenPopovers=function(e){var t=e.target;var r=this,o=r.autoClose,a=r.el;var n="calcite-popover";var i=t.closest(n);var s=this.getRelatedPopover(t);if(o&&!i){queryElementsRoots(a,n).filter((function(e){return e.open&&e!==s})).forEach((function(e){return e.toggle(false)}))}if(!a.contains(t)||!s){return}s.toggle()};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();export{CalcitePopover as calcite_popover,CalcitePopoverManager as calcite_popover_manager};