calcite-popover_2.entry.js 19 KB

123456
  1. var __awaiter=this&&this.__awaiter||function(e,t,a,r){function n(e){return e instanceof a?e:new a((function(t){t(e)}))}return new(a||(a=Promise))((function(a,i){function o(e){try{l(r.next(e))}catch(e){i(e)}}function s(e){try{l(r["throw"](e))}catch(e){i(e)}}function l(e){e.done?a(e.value):n(e.value).then(o,s)}l((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var a={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},r,n,i,o;return o={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function s(e){return function(t){return l([e,t])}}function l(o){if(r)throw new TypeError("Generator is already executing.");while(a)try{if(r=1,n&&(i=o[0]&2?n["return"]:o[0]?n["throw"]||((i=n["return"])&&i.call(n),0):n.next)&&!(i=i.call(n,o[1])).done)return i;if(n=0,i)o=[o[0]&2,i.value];switch(o[0]){case 0:case 1:i=o;break;case 4:a.label++;return{value:o[1],done:false};case 5:a.label++;n=o[1];o=[0];continue;case 7:o=a.ops.pop();a.trys.pop();continue;default:if(!(i=a.trys,i=i.length>0&&i[i.length-1])&&(o[0]===6||o[0]===2)){a=0;continue}if(o[0]===3&&(!i||o[1]>i[0]&&o[1]<i[3])){a.label=o[1];break}if(o[0]===6&&a.label<i[1]){a.label=i[1];i=o;break}if(i&&a.label<i[2]){a.label=i[2];a.ops.push(o);break}if(i[2])a.ops.pop();a.trys.pop();continue}o=t.call(e,a)}catch(e){o=[6,e];n=0}finally{r=i=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};
  2. /*!
  3. * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  4. * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  5. * v1.0.0-beta.82
  6. */import{r as registerInstance,c as createEvent,f as forceUpdate,h,H as Host,g as getElement}from"./index-8ece2564.js";import{a as defaultOffsetDistance,f as filterComputedPlacements,u as updatePopper,c as createPopper,C as CSS$1}from"./popper-0fd1fd89.js";import{g as guid}from"./guid-b4461004.js";import{h as queryElementsRoots,t as toAriaBoolean,q as queryElementRoots}from"./dom-da697a3f.js";import{H as Heading}from"./Heading-8d613e81.js";import{c as createObserver}from"./observers-b198f831.js";var CSS={container:"container",arrow:"arrow",imageContainer:"image-container",closeButtonContainer:"close-button-container",closeButton:"close-button",content:"content",hasHeader:"has-header",header:"header",headerContent:"header-content",heading:"heading"};var TEXT={close:"Close"};var defaultPopoverPlacement="auto";var ARIA_CONTROLS="aria-controls";var ARIA_EXPANDED="aria-expanded";var HEADING_LEVEL=2;var PopoverManager$1=function(){function e(){var e=this;this.registeredElements=new WeakMap;this.registeredElementCount=0;this.queryPopover=function(t){var a=e.registeredElements;var r=t.find((function(e){return a.has(e)}));return a.get(r)};this.clickHandler=function(t){var a=t.composedPath();var r=e.queryPopover(a);if(r){r.toggle();return}queryElementsRoots(t.target,"calcite-popover").filter((function(e){return e.autoClose&&e.open&&!a.includes(e)})).forEach((function(e){return e.toggle(false)}))}}e.prototype.registerElement=function(e,t){this.registeredElementCount++;this.registeredElements.set(e,t);if(this.registeredElementCount===1){this.addListeners()}};e.prototype.unregisterElement=function(e){if(this.registeredElements.delete(e)){this.registeredElementCount--}if(this.registeredElementCount===0){this.removeListeners()}};e.prototype.addListeners=function(){document.addEventListener("pointerdown",this.clickHandler,{capture:true})};e.prototype.removeListeners=function(){document.removeEventListener("pointerdown",this.clickHandler,{capture:true})};return e}();var popoverCss='@-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-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}: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)}:host([data-popper-placement][data-popper-reference-hidden]){pointer-events:none;opacity:0}.arrow,.arrow::before{position:absolute;width:8px;height:8px;z-index:-1}.arrow::before{content:"";--tw-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--tw-shadow-colored:0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);-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{border-radius:0.25rem;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);background-color:var(--calcite-ui-foreground-1)}.arrow::before{outline:1px solid var(--calcite-ui-border-3)}.header{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:start;justify-content:flex-start;border-width:0px;border-bottom-width:1px;border-style:solid;background-color:var(--calcite-ui-foreground-1);border-bottom-color:var(--calcite-ui-border-3)}.heading{margin:0px;display:block;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-item-align:center;align-self:center;white-space:normal;padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);word-wrap:break-word;word-break:break-word}.container{position:relative;display:-ms-flexbox;display:flex;height:100%;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;border-radius:0.25rem;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-1)}.container.has-header{-ms-flex-direction:column;flex-direction:column}.content{display:-ms-flexbox;display:flex;height:100%;width:100%;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-item-align:center;align-self:center;word-wrap:break-word;word-break:break-word}.close-button-container{display:-ms-flexbox;display:flex;overflow:hidden;-ms-flex:0 0 auto;flex:0 0 auto;border-start-end-radius:0.25rem;border-end-end-radius:0.25rem}::slotted(calcite-panel),::slotted(calcite-flow){height:100%}';var manager=new PopoverManager$1;var Popover=function(){function e(e){var t=this;registerInstance(this,e);this.calcitePopoverClose=createEvent(this,"calcitePopoverClose",7);this.calcitePopoverOpen=createEvent(this,"calcitePopoverOpen",7);this.autoClose=false;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=defaultPopoverPlacement;this.intlClose=TEXT.close;this.guid="calcite-popover-".concat(guid());this.activeTransitionProp="opacity";this.setFilteredPlacements=function(){var e=t,a=e.el,r=e.flipPlacements;t.filteredFlipPlacements=r?filterComputedPlacements(r,a):null};this.setUpReferenceElement=function(){t.removeReferences();t.effectiveReferenceElement=t.getReferenceElement();var e=t,a=e.el,r=e.referenceElement,n=e.effectiveReferenceElement;if(r&&!n){console.warn("".concat(a.tagName,': reference-element id "').concat(r,'" was not found.'),{el:a})}t.addReferences();t.createPopper()};this.getId=function(){return t.el.id||t.guid};this.setExpandedAttr=function(){var e=t,a=e.effectiveReferenceElement,r=e.open;if(!a){return}a.setAttribute(ARIA_EXPANDED,toAriaBoolean(r))};this.addReferences=function(){var e=t.effectiveReferenceElement;if(!e){return}var a=t.getId();e.setAttribute(ARIA_CONTROLS,a);manager.registerElement(e,t.el);t.setExpandedAttr()};this.removeReferences=function(){var e=t.effectiveReferenceElement;if(!e){return}e.removeAttribute(ARIA_CONTROLS);e.removeAttribute(ARIA_EXPANDED);manager.unregisterElement(e)};this.hide=function(){t.open=false};this.transitionEnd=function(e){if(e.propertyName===t.activeTransitionProp){t.open?t.calcitePopoverOpen.emit():t.calcitePopoverClose.emit()}}}e.prototype.flipPlacementsHandler=function(){this.setFilteredPlacements()};e.prototype.offsetDistanceOffsetHandler=function(){this.reposition()};e.prototype.offsetSkiddingHandler=function(){this.reposition()};e.prototype.openHandler=function(){this.reposition();this.setExpandedAttr()};e.prototype.placementHandler=function(){this.reposition()};e.prototype.referenceElementHandler=function(){this.setUpReferenceElement()};e.prototype.connectedCallback=function(){this.setFilteredPlacements()};e.prototype.componentWillLoad=function(){this.setUpReferenceElement()};e.prototype.componentDidLoad=function(){this.reposition()};e.prototype.disconnectedCallback=function(){this.removeReferences();this.destroyPopper()};e.prototype.reposition=function(){return __awaiter(this,void 0,void 0,(function(){var e,t,a,r,n,i;return __generator(this,(function(o){switch(o.label){case 0:e=this,t=e.popper,a=e.el,r=e.placement;n=this.getModifiers();if(!t)return[3,2];return[4,updatePopper({el:a,modifiers:n,placement:r,popper:t})];case 1:i=o.sent();return[3,3];case 2:i=this.createPopper();o.label=3;case 3:i;return[2]}}))}))};e.prototype.setFocus=function(e){return __awaiter(this,void 0,void 0,(function(){var t,a;return __generator(this,(function(r){a=this.closeButtonEl;if(e==="close-button"&&a){forceUpdate(a);a.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,a=e.el;return(typeof t==="string"?queryElementRoots(a,{id:t}):t)||null};e.prototype.getModifiers=function(){var e=this,t=e.arrowEl,a=e.disableFlip,r=e.disablePointer,n=e.offsetDistance,i=e.offsetSkidding,o=e.filteredFlipPlacements;var s={name:"flip",enabled:!a};if(o){s.options={fallbackPlacements:o}}var l={name:"arrow",enabled:!r};if(t){l.options={element:t}}var c={name:"offset",enabled:true,options:{offset:[i,n]}};var p={name:"eventListeners",enabled:this.open};return[l,s,c,p]};e.prototype.createPopper=function(){this.destroyPopper();var e=this,t=e.el,a=e.placement,r=e.effectiveReferenceElement,n=e.overlayPositioning;var i=this.getModifiers();this.popper=createPopper({el:t,modifiers:i,overlayPositioning:n,placement:a,referenceEl:r})};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,a=t.dismissible,r=t.closeButton,n=t.intlClose;return a||r?h("div",{class:CSS.closeButtonContainer},h("calcite-action",{class:CSS.closeButton,onClick:this.hide,ref:function(t){return e.closeButtonEl=t},text:n},h("calcite-icon",{icon:"x",scale:"m"}))):null};e.prototype.renderHeader=function(){var e=this,t=e.heading,a=e.headingLevel;var r=t?h(Heading,{class:CSS.heading,level:a||HEADING_LEVEL},t):null;return r?h("div",{class:CSS.header},r,this.renderCloseButton()):null};e.prototype.render=function(){var e,t;var a=this;var r=this,n=r.effectiveReferenceElement,i=r.heading,o=r.label,s=r.open,l=r.disablePointer;var c=n&&s;var p=!c;var f=!l?h("div",{class:CSS.arrow,ref:function(e){return a.arrowEl=e}}):null;return h(Host,{"aria-hidden":toAriaBoolean(p),"aria-label":o,"calcite-hydrated-hidden":p,id:this.getId(),role:"dialog"},h("div",{class:(e={},e[CSS$1.animation]=true,e[CSS$1.animationActive]=c,e),onTransitionEnd:this.transitionEnd},f,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{flipPlacements:["flipPlacementsHandler"],offsetDistance:["offsetDistanceOffsetHandler"],offsetSkidding:["offsetSkiddingHandler"],open:["openHandler"],placement:["placementHandler"],referenceElement:["referenceElementHandler"]}},enumerable:false,configurable:true});return e}();Popover.style=popoverCss;var popoverManagerCss="@-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-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{position:relative;display:block}";var PopoverManager=function(){function e(e){var t=this;registerInstance(this,e);this.mutationObserver=createObserver("mutation",(function(){return t.setAutoClose()}));this.selector="[data-calcite-popover-reference]";this.autoClose=false}e.prototype.autoCloseHandler=function(){this.setAutoClose()};e.prototype.connectedCallback=function(){var e;this.setAutoClose();(e=this.mutationObserver)===null||e===void 0?void 0:e.observe(this.el,{childList:true,subtree:true})};e.prototype.disconnectedCallback=function(){var e;(e=this.mutationObserver)===null||e===void 0?void 0:e.disconnect()};e.prototype.render=function(){return h("slot",null)};e.prototype.setAutoClose=function(){var e=this,t=e.autoClose,a=e.el;a.querySelectorAll("calcite-popover").forEach((function(e){return e.autoClose=t}))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{autoClose:["autoCloseHandler"]}},enumerable:false,configurable:true});return e}();PopoverManager.style=popoverManagerCss;export{Popover as calcite_popover,PopoverManager as calcite_popover_manager};