@esri/calcite-components 1.5.0-next.24 → 1.5.0-next.26

package/dist/calcite/p-fc375950.entry.js

@@ -1,6 +0,0 @@
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.24
- */
-import{r as e,c as t,f as i,h as a,H as s,a as n}from"./p-66f963d8.js";import{f as o,c as r,b as c,a as l,r as d,F as h}from"./p-33d3951b.js";import{d as f,a as p,c as m,u}from"./p-845e22bd.js";import{i as g,t as v,f as b,q as y}from"./p-d53003a8.js";import{g as w}from"./p-7e1a260c.js";import{c as x,d as k}from"./p-0733d654.js";import{H as D}from"./p-ec4420a6.js";import{c as z,d as E}from"./p-eb5e451b.js";import{u as H,c as j,s as P,d as _}from"./p-e9018d11.js";import{i as C}from"./p-c84c235c.js";import{s as L,a as F,c as O}from"./p-341c750e.js";import{c as R}from"./p-c51d32ca.js";import{F as A}from"./p-6a8e16a4.js";import"./p-005ec02d.js";import"./p-d8d7030c.js";const B="close-button-container",S="header",T="aria-controls",M="aria-expanded",$=new class{constructor(){this.registeredElements=new Map,this.registeredElementCount=0,this.queryPopover=e=>{const{registeredElements:t}=this,i=e.find((e=>t.has(e)));return t.get(i)},this.togglePopovers=e=>{const t=e.composedPath(),i=this.queryPopover(t);i&&!i.triggerDisabled&&(i.open=!i.open),Array.from(this.registeredElements.values()).filter((e=>e!==i&&e.autoClose&&e.open&&!t.includes(e))).forEach((e=>e.open=!1))},this.keyHandler=e=>{e.defaultPrevented||("Escape"===e.key?this.closeAllPopovers():C(e.key)&&this.togglePopovers(e))},this.clickHandler=e=>{g(e)&&this.togglePopovers(e)}}registerElement(e,t){this.registeredElementCount++,this.registeredElements.set(e,t),1===this.registeredElementCount&&this.addListeners()}unregisterElement(e){this.registeredElements.delete(e)&&this.registeredElementCount--,0===this.registeredElementCount&&this.removeListeners()}closeAllPopovers(){Array.from(this.registeredElements.values()).forEach((e=>e.open=!1))}addListeners(){document.addEventListener("pointerdown",this.clickHandler,{capture:!0}),document.addEventListener("keydown",this.keyHandler,{capture:!0})}removeListeners(){document.removeEventListener("pointerdown",this.clickHandler,{capture:!0}),document.removeEventListener("keydown",this.keyHandler,{capture:!0})}},X=class{constructor(i){e(this,i),this.calcitePopoverBeforeClose=t(this,"calcitePopoverBeforeClose",6),this.calcitePopoverClose=t(this,"calcitePopoverClose",6),this.calcitePopoverBeforeOpen=t(this,"calcitePopoverBeforeOpen",6),this.calcitePopoverOpen=t(this,"calcitePopoverOpen",6),this.mutationObserver=R("mutation",(()=>this.updateFocusTrapElements())),this.guid=`calcite-popover-${w()}`,this.openTransitionProp="opacity",this.hasLoaded=!1,this.setTransitionEl=e=>{this.transitionEl=e,x(this)},this.setFilteredPlacements=()=>{const{el:e,flipPlacements:t}=this;this.filteredFlipPlacements=t?o(t,e):null},this.setUpReferenceElement=(e=!0)=>{this.removeReferences(),this.effectiveReferenceElement=this.getReferenceElement(),r(this,this.effectiveReferenceElement,this.el);const{el:t,referenceElement:i,effectiveReferenceElement:a}=this;e&&i&&!a&&console.warn(`${t.tagName}: reference-element id "${i}" was not found.`,{el:t}),this.addReferences()},this.getId=()=>this.el.id||this.guid,this.setExpandedAttr=()=>{const{effectiveReferenceElement:e,open:t}=this;e&&"setAttribute"in e&&e.setAttribute(M,v(t))},this.addReferences=()=>{const{effectiveReferenceElement:e}=this;if(!e)return;const t=this.getId();"setAttribute"in e&&e.setAttribute(T,t),$.registerElement(e,this.el),this.setExpandedAttr()},this.removeReferences=()=>{const{effectiveReferenceElement:e}=this;e&&("removeAttribute"in e&&(e.removeAttribute(T),e.removeAttribute(M)),$.unregisterElement(e))},this.hide=()=>{this.open=!1},this.storeArrowEl=e=>{this.arrowEl=e,this.reposition(!0)},this.autoClose=!1,this.closable=!1,this.flipDisabled=!1,this.focusTrapDisabled=!1,this.pointerDisabled=!1,this.flipPlacements=void 0,this.heading=void 0,this.headingLevel=void 0,this.label=void 0,this.messageOverrides=void 0,this.messages=void 0,this.offsetDistance=c,this.offsetSkidding=0,this.open=!1,this.overlayPositioning="absolute",this.placement="auto",this.referenceElement=void 0,this.scale="m",this.triggerDisabled=!1,this.effectiveLocale="",this.floatingLayout="vertical",this.effectiveReferenceElement=void 0,this.defaultMessages=void 0}handleFocusTrapDisabled(e){this.open&&(e?f(this):p(this))}flipPlacementsHandler(){this.setFilteredPlacements(),this.reposition(!0)}onMessagesChange(){}offsetDistanceOffsetHandler(){this.reposition(!0)}offsetSkiddingHandler(){this.reposition(!0)}openHandler(e){e&&this.reposition(!0),this.setExpandedAttr()}overlayPositioningHandler(){this.reposition(!0)}placementHandler(){this.reposition(!0)}referenceElementHandler(){this.setUpReferenceElement(),this.reposition(!0)}effectiveLocaleChange(){H(this,this.effectiveLocale)}connectedCallback(){this.setFilteredPlacements(),z(this),j(this),x(this),this.setUpReferenceElement(this.hasLoaded),m(this)}async componentWillLoad(){await P(this),L(this)}componentDidLoad(){F(this),this.referenceElement&&!this.effectiveReferenceElement&&this.setUpReferenceElement(),this.reposition(),this.hasLoaded=!0}disconnectedCallback(){this.removeReferences(),E(this),_(this),l(this,this.effectiveReferenceElement,this.el),k(this),f(this)}async reposition(e=!1){const{el:t,effectiveReferenceElement:i,placement:a,overlayPositioning:s,flipDisabled:n,filteredFlipPlacements:o,offsetDistance:r,offsetSkidding:c,arrowEl:l}=this;return d(this,{floatingEl:t,referenceEl:i,overlayPositioning:s,placement:a,flipDisabled:n,flipPlacements:o,offsetDistance:r,offsetSkidding:c,arrowEl:l,type:"popover"},e)}async setFocus(){await O(this),i(this.el),b(this.el)}async updateFocusTrapElements(){u(this)}getReferenceElement(){const{referenceElement:e,el:t}=this;return("string"==typeof e?y(t,{id:e}):e)||null}onBeforeOpen(){this.calcitePopoverBeforeOpen.emit()}onOpen(){this.calcitePopoverOpen.emit(),p(this)}onBeforeClose(){this.calcitePopoverBeforeClose.emit()}onClose(){this.calcitePopoverClose.emit(),f(this)}renderCloseButton(){const{messages:e,closable:t}=this;return t?a("div",{class:B,key:B},a("calcite-action",{appearance:"transparent",class:"close-button",onClick:this.hide,scale:this.scale,text:e.close,ref:e=>this.closeButtonEl=e},a("calcite-icon",{icon:"x",scale:"l"===this.scale?"m":this.scale}))):null}renderHeader(){const{heading:e,headingLevel:t}=this,i=e?a(D,{class:"heading",level:t},e):null;return i?a("div",{class:S,key:S},i,this.renderCloseButton()):null}render(){const{effectiveReferenceElement:e,heading:t,label:i,open:n,pointerDisabled:o,floatingLayout:r}=this,c=e&&n,l=!c,d=o?null:a(A,{floatingLayout:r,key:"floating-arrow",ref:this.storeArrowEl});return a(s,{"aria-hidden":v(l),"aria-label":i,"aria-live":"polite","calcite-hydrated-hidden":l,id:this.getId(),role:"dialog"},a("div",{class:{[h.animation]:!0,[h.animationActive]:c},ref:this.setTransitionEl},d,a("div",{class:{"has-header":!!t,container:!0}},this.renderHeader(),a("div",{class:"content"},a("slot",null)),t?null:this.renderCloseButton())))}static get assetsDirs(){return["assets"]}get el(){return n(this)}static get watchers(){return{focusTrapDisabled:["handleFocusTrapDisabled"],flipPlacements:["flipPlacementsHandler"],messageOverrides:["onMessagesChange"],offsetDistance:["offsetDistanceOffsetHandler"],offsetSkidding:["offsetSkiddingHandler"],open:["openHandler"],overlayPositioning:["overlayPositioningHandler"],placement:["placementHandler"],referenceElement:["referenceElementHandler"],effectiveLocale:["effectiveLocaleChange"]}}};X.style="@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity: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;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}:host{--calcite-floating-ui-z-index:var(--calcite-popover-z-index, var(--calcite-app-z-index-popup));display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index)}.calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-app-z-index);border-radius:0.25rem}:host([data-placement^=bottom]) .calcite-floating-ui-anim{transform:translateY(-5px)}:host([data-placement^=top]) .calcite-floating-ui-anim{transform:translateY(5px)}:host([data-placement^=left]) .calcite-floating-ui-anim{transform:translateX(5px)}:host([data-placement^=right]) .calcite-floating-ui-anim{transform:translateX(-5px)}:host([data-placement]) .calcite-floating-ui-anim--active{opacity:1;transform:translate(0)}:host([calcite-hydrated-hidden]){visibility:hidden !important;pointer-events:none}.calcite-floating-ui-arrow{pointer-events:none;position:absolute;z-index:calc(var(--calcite-app-z-index) * -1);fill:var(--calcite-ui-foreground-1)}.calcite-floating-ui-arrow__stroke{stroke:var(--calcite-ui-border-3)}:host([scale=s]) .heading{padding-inline:0.75rem;padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) .heading{padding-inline:1rem;padding-block:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) .heading{padding-inline:1.25rem;padding-block:1rem;font-size:var(--calcite-font-size-1);line-height:1.375}:host{pointer-events:none}:host([open]){pointer-events:initial}.calcite-floating-ui-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:flex;flex:1 1 auto;align-items:stretch;justify-content:flex-start;border-width:0px;border-block-end-width:1px;border-style:solid;border-block-end-color:var(--calcite-ui-border-3)}.heading{margin:0px;display:block;flex:1 1 auto;align-self:center;white-space:normal;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:flex;block-size:100%;flex-direction:row;flex-wrap:nowrap;border-radius:0.25rem;color:var(--calcite-ui-text-1)}.container.has-header{flex-direction:column}.content{display:flex;block-size:100%;inline-size:100%;flex-direction:column;flex-wrap:nowrap;align-self:center;word-wrap:break-word;word-break:break-word}.close-button-container{display:flex;overflow:hidden;flex:0 0 auto;border-start-end-radius:0.25rem;border-end-end-radius:0.25rem}::slotted(calcite-panel),::slotted(calcite-flow){block-size:100%}";export{X as calcite_popover}

package/dist/esm/openCloseComponent-9197c870.js

@@ -1,91 +0,0 @@
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.24
- */
-import { e as readTask } from './index-8caa79cf.js';
-
-const componentToTransitionListeners = new WeakMap();
-function transitionStart(event) {
-  if (event.propertyName === this.openTransitionProp && event.target === this.transitionEl) {
-    this.open ? this.onBeforeOpen() : this.onBeforeClose();
-  }
-}
-function transitionEnd(event) {
-  if (event.propertyName === this.openTransitionProp && event.target === this.transitionEl) {
-    this.open ? this.onOpen() : this.onClose();
-  }
-}
-/**
- * Helper to determine globally set transition duration on the given openTransitionProp, which is imported and set in the @Watch("open").
- * Used to emit (before)open/close events both for when the opacity transition is present and when there is none (transition-duration is set to 0).
- *
- * @param component
- * @param nonOpenCloseComponent
- */
-function onToggleOpenCloseComponent(component, nonOpenCloseComponent = false) {
-  readTask(() => {
-    if (component.transitionEl) {
-      const allTransitionPropsArray = getComputedStyle(component.transitionEl).transition.split(" ");
-      const openTransitionPropIndex = allTransitionPropsArray.findIndex((item) => item === component.openTransitionProp);
-      const transitionDuration = allTransitionPropsArray[openTransitionPropIndex + 1];
-      if (transitionDuration === "0s") {
-        (nonOpenCloseComponent ? component[component.transitionProp] : component.open)
-          ? component.onBeforeOpen()
-          : component.onBeforeClose();
-        (nonOpenCloseComponent ? component[component.transitionProp] : component.open)
-          ? component.onOpen()
-          : component.onClose();
-      }
-      else {
-        component.transitionEl.addEventListener("transitionstart", () => {
-          (nonOpenCloseComponent ? component[component.transitionProp] : component.open)
-            ? component.onBeforeOpen()
-            : component.onBeforeClose();
-        }, { once: true });
-        component.transitionEl.addEventListener("transitionend", () => {
-          (nonOpenCloseComponent ? component[component.transitionProp] : component.open)
-            ? component.onOpen()
-            : component.onClose();
-        }, { once: true });
-      }
-    }
-  });
-}
-/**
- * Helper to keep track of transition listeners on setTransitionEl and connectedCallback on OpenCloseComponent components.
- *
- * For component which do not have open prop, use `onToggleOpenCloseComponent` implementation.
- *
- * @param component
- */
-function connectOpenCloseComponent(component) {
-  disconnectOpenCloseComponent(component);
-  if (component.transitionEl) {
-    const boundOnTransitionStart = transitionStart.bind(component);
-    const boundOnTransitionEnd = transitionEnd.bind(component);
-    componentToTransitionListeners.set(component, [
-      component.transitionEl,
-      boundOnTransitionStart,
-      boundOnTransitionEnd,
-    ]);
-    component.transitionEl.addEventListener("transitionstart", boundOnTransitionStart);
-    component.transitionEl.addEventListener("transitionend", boundOnTransitionEnd);
-  }
-}
-/**
- * Helper to tear down transition listeners on disconnectedCallback on OpenCloseComponent components.
- *
- * @param component
- */
-function disconnectOpenCloseComponent(component) {
-  if (!componentToTransitionListeners.has(component)) {
-    return;
-  }
-  const [transitionEl, start, end] = componentToTransitionListeners.get(component);
-  transitionEl.removeEventListener("transitionstart", start);
-  transitionEl.removeEventListener("transitionend", end);
-  componentToTransitionListeners.delete(component);
-}
-
-export { connectOpenCloseComponent as c, disconnectOpenCloseComponent as d, onToggleOpenCloseComponent as o };