@esri/calcite-components 1.0.0-beta.65 → 1.0.0-beta.69

package/dist/components/calcite-pick-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CalcitePickList extends Components.CalcitePickList, HTMLElement {}
+export const CalcitePickList: {
+  prototype: CalcitePickList;
+  new (): CalcitePickList;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/calcite-pick-list.js

@@ -0,0 +1,196 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
+import { I as ICON_TYPES } from './resources3.js';
+import { m as mutationObserverCallback, d as deselectSiblingItems, s as selectSiblings, h as handleFilter, g as getItemData, k as keyDownHandler, i as initialize, a as initializeObserver, c as cleanUpObserver, r as removeItem, b as calciteListItemChangeHandler, e as calciteListItemValueChangeHandler, f as calciteListFocusOutHandler, j as setUpItems, l as setFocus, L as List } from './shared-list-render.js';
+import { c as createObserver } from './observers.js';
+import { d as defineCustomElement$7 } from './calcite-filter2.js';
+import { d as defineCustomElement$6 } from './calcite-icon2.js';
+import { d as defineCustomElement$5 } from './calcite-input2.js';
+import { d as defineCustomElement$4 } from './calcite-loader2.js';
+import { d as defineCustomElement$3 } from './calcite-progress2.js';
+import { d as defineCustomElement$2 } from './calcite-scrim2.js';
+
+const calcitePickListCss = "@-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:300ms}.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:150ms ease-in-out}:host([hidden]){display:none}:host{-ms-flex-align:stretch;align-items:stretch;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:transparent;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1);line-height:1rem}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host([filter-enabled]) header{background-color:var(--calcite-ui-foreground-1);display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:stretch;align-items:stretch;margin-bottom:0.25rem;-webkit-box-shadow:0 1px 0 var(--calcite-ui-border-3);box-shadow:0 1px 0 var(--calcite-ui-border-3)}:host([filter-enabled]) header.sticky{position:-webkit-sticky;position:sticky;top:0;z-index:1}calcite-filter{margin-bottom:0}:host([loading][disabled]){min-height:2rem}";
+
+let CalcitePickList$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.calciteListChange = createEvent(this, "calciteListChange", 7);
+    // --------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    // --------------------------------------------------------------------------
+    /**
+     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     */
+    this.disabled = false;
+    /**
+     * When true, an input appears at the top of the list that can be used by end users to filter items in the list.
+     */
+    this.filterEnabled = false;
+    /**
+     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     */
+    this.loading = false;
+    /**
+     * Multiple works similar to standard radio buttons and checkboxes.
+     * When true, a user can select multiple items at a time.
+     * When false, only a single item can be selected at a time
+     * and selecting a new item will deselect any other selected items.
+     */
+    this.multiple = false;
+    /**
+     * When true and single-selection is enabled, the selection will change when navigating items via the keyboard.
+     */
+    this.selectionFollowsFocus = false;
+    // --------------------------------------------------------------------------
+    //
+    //  Private Properties
+    //
+    // --------------------------------------------------------------------------
+    this.selectedValues = new Map();
+    this.dataForFilter = [];
+    this.lastSelectedItem = null;
+    this.mutationObserver = createObserver("mutation", mutationObserverCallback.bind(this));
+    this.setFilterEl = (el) => {
+      this.filterEl = el;
+    };
+    this.deselectSiblingItems = deselectSiblingItems.bind(this);
+    this.selectSiblings = selectSiblings.bind(this);
+    this.handleFilter = handleFilter.bind(this);
+    this.getItemData = getItemData.bind(this);
+    this.keyDownHandler = keyDownHandler.bind(this);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    initialize.call(this);
+    initializeObserver.call(this);
+  }
+  disconnectedCallback() {
+    cleanUpObserver.call(this);
+  }
+  calciteListItemRemoveHandler(event) {
+    removeItem.call(this, event);
+  }
+  calciteListItemChangeHandler(event) {
+    calciteListItemChangeHandler.call(this, event);
+  }
+  calciteListItemPropsChangeHandler(event) {
+    event.stopPropagation();
+    this.setUpFilter();
+  }
+  calciteListItemValueChangeHandler(event) {
+    calciteListItemValueChangeHandler.call(this, event);
+  }
+  calciteListFocusOutHandler(event) {
+    calciteListFocusOutHandler.call(this, event);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  setUpItems() {
+    setUpItems.call(this, "calcite-pick-list-item");
+  }
+  setUpFilter() {
+    if (this.filterEnabled) {
+      this.dataForFilter = this.getItemData();
+    }
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  /** Returns the currently selected items */
+  async getSelectedItems() {
+    return this.selectedValues;
+  }
+  /** Sets focus on the component. */
+  async setFocus(focusId) {
+    return setFocus.call(this, focusId);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  getIconType() {
+    return this.multiple ? ICON_TYPES.square : ICON_TYPES.circle;
+  }
+  render() {
+    return h(List, { onKeyDown: this.keyDownHandler, props: this });
+  }
+  get el() { return this; }
+  static get style() { return calcitePickListCss; }
+};
+CalcitePickList$1 = /*@__PURE__*/ proxyCustomElement(CalcitePickList$1, [1, "calcite-pick-list", {
+    "disabled": [516],
+    "filterEnabled": [516, "filter-enabled"],
+    "filterPlaceholder": [513, "filter-placeholder"],
+    "headingLevel": [2, "heading-level"],
+    "loading": [516],
+    "multiple": [516],
+    "selectionFollowsFocus": [4, "selection-follows-focus"],
+    "selectedValues": [32],
+    "dataForFilter": [32],
+    "getSelectedItems": [64],
+    "setFocus": [64]
+  }, [[0, "calciteListItemRemove", "calciteListItemRemoveHandler"], [0, "calciteListItemChange", "calciteListItemChangeHandler"], [0, "calciteListItemPropsChange", "calciteListItemPropsChangeHandler"], [0, "calciteListItemValueChange", "calciteListItemValueChangeHandler"], [0, "focusout", "calciteListFocusOutHandler"]]]);
+function defineCustomElement$1() {
+  const components = ["calcite-pick-list", "calcite-filter", "calcite-icon", "calcite-input", "calcite-loader", "calcite-progress", "calcite-scrim"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-pick-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CalcitePickList$1);
+      }
+      break;
+    case "calcite-filter":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "calcite-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "calcite-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "calcite-loader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "calcite-progress":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "calcite-scrim":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const CalcitePickList = CalcitePickList$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalcitePickList, defineCustomElement };

package/dist/components/calcite-popover-manager.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CalcitePopoverManager extends Components.CalcitePopoverManager, HTMLElement {}
+export const CalcitePopoverManager: {
+  prototype: CalcitePopoverManager;
+  new (): CalcitePopoverManager;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/calcite-popover-manager.js

@@ -0,0 +1,93 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { h, proxyCustomElement } from '@stencil/core/internal/client';
+import { P as POPOVER_REFERENCE } from './resources.js';
+import { q as queryElementRoots, j as queryElementsRoots } from './dom.js';
+
+const calcitePopoverManagerCss = "@-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:300ms}.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:150ms ease-in-out}:host([hidden]){display:none}:host{display:block}";
+
+let CalcitePopoverManager$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    // --------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    // --------------------------------------------------------------------------
+    /**
+     * CSS Selector to match reference elements for popovers. Reference elements will be identified by this selector in order to open their associated popover.
+     * @default `[data-calcite-popover-reference]`
+     */
+    this.selector = `[${POPOVER_REFERENCE}]`;
+    /**
+     * Automatically closes any currently open popovers when clicking outside of a popover.
+     */
+    this.autoClose = false;
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.getRelatedPopover = (element) => {
+      var _a;
+      const { selector, el } = this;
+      const id = (_a = element.closest(selector)) === null || _a === void 0 ? void 0 : _a.getAttribute(POPOVER_REFERENCE);
+      return queryElementRoots(el, `#${id}`);
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    return h("slot", null);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+  closeOpenPopovers(event) {
+    const target = event.target;
+    const { autoClose, el } = this;
+    const popoverSelector = "calcite-popover";
+    const isTargetInsidePopover = target.closest(popoverSelector);
+    const relatedPopover = this.getRelatedPopover(target);
+    if (autoClose && !isTargetInsidePopover) {
+      queryElementsRoots(el, popoverSelector)
+        .filter((popover) => popover.open && popover !== relatedPopover)
+        .forEach((popover) => popover.toggle(false));
+    }
+    if (!el.contains(target) || !relatedPopover) {
+      return;
+    }
+    relatedPopover.toggle();
+  }
+  get el() { return this; }
+  static get style() { return calcitePopoverManagerCss; }
+};
+CalcitePopoverManager$1 = /*@__PURE__*/ proxyCustomElement(CalcitePopoverManager$1, [1, "calcite-popover-manager", {
+    "selector": [1],
+    "autoClose": [516, "auto-close"]
+  }, [[10, "click", "closeOpenPopovers"]]]);
+function defineCustomElement$1() {
+  const components = ["calcite-popover-manager"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-popover-manager":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CalcitePopoverManager$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const CalcitePopoverManager = CalcitePopoverManager$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalcitePopoverManager, defineCustomElement };

package/dist/components/calcite-popover.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CalcitePopover extends Components.CalcitePopover, HTMLElement {}
+export const CalcitePopover: {
+  prototype: CalcitePopover;
+  new (): CalcitePopover;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/calcite-popover.js

@@ -0,0 +1,10 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { C as CalcitePopover$1, d as defineCustomElement$1 } from './calcite-popover2.js';
+
+const CalcitePopover = CalcitePopover$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalcitePopover, defineCustomElement };

package/dist/components/calcite-popover2.js

@@ -0,0 +1,332 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { createEvent, forceUpdate, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { T as TEXT, A as ARIA_EXPANDED, P as POPOVER_REFERENCE, a as ARIA_CONTROLS, C as CSS, H as HEADING_LEVEL } from './resources.js';
+import { d as defaultOffsetDistance, u as updatePopper, c as createPopper, C as CSS$1 } from './popper.js';
+import { g as guid } from './guid.js';
+import { q as queryElementRoots, a as getElementDir, C as CSS_UTILITY } from './dom.js';
+import { C as CalciteHeading } from './CalciteHeading.js';
+import { d as defineCustomElement$3 } from './calcite-action2.js';
+import { d as defineCustomElement$2 } from './calcite-icon2.js';
+import { d as defineCustomElement$1 } from './calcite-loader2.js';
+
+const 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-animation-timing:300ms}.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: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%}";
+
+let CalcitePopover = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.calcitePopoverClose = createEvent(this, "calcitePopoverClose", 7);
+    this.calcitePopoverOpen = createEvent(this, "calcitePopoverOpen", 7);
+    // --------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    // --------------------------------------------------------------------------
+    /**
+     * Display a close button within the Popover.
+     * @deprecated use dismissible instead.
+     */
+    this.closeButton = false;
+    /**
+     * Display a close button within the Popover.
+     */
+    this.dismissible = false;
+    /**
+     * Prevents flipping the popover's placement when it starts to overlap its reference element.
+     */
+    this.disableFlip = false;
+    /**
+     * Removes the caret pointer.
+     */
+    this.disablePointer = false;
+    /**
+     * Offset the position of the popover away from the reference element.
+     * @default 6
+     */
+    this.offsetDistance = defaultOffsetDistance;
+    /**
+     * Offset the position of the popover along the reference element.
+     */
+    this.offsetSkidding = 0;
+    /**
+     * Display and position the component.
+     */
+    this.open = false;
+    /** Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */
+    this.overlayPositioning = "absolute";
+    /**
+     * Determines where the component will be positioned relative to the referenceElement.
+     * @see [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)
+     */
+    this.placement = "auto";
+    /** Text for close button.
+     * @default "Close"
+     */
+    this.intlClose = TEXT.close;
+    this.guid = `calcite-popover-${guid()}`;
+    this.activeTransitionProp = "opacity";
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.setUpReferenceElement = () => {
+      this.removeReferences();
+      this.effectiveReferenceElement = this.getReferenceElement();
+      const { el, referenceElement, effectiveReferenceElement } = this;
+      if (referenceElement && !effectiveReferenceElement) {
+        console.warn(`${el.tagName}: reference-element id "${referenceElement}" was not found.`, {
+          el
+        });
+      }
+      this.addReferences();
+      this.createPopper();
+    };
+    this.getId = () => {
+      return this.el.id || this.guid;
+    };
+    this.setExpandedAttr = () => {
+      const { effectiveReferenceElement, open } = this;
+      if (!effectiveReferenceElement) {
+        return;
+      }
+      effectiveReferenceElement.setAttribute(ARIA_EXPANDED, open.toString());
+    };
+    this.addReferences = () => {
+      const { effectiveReferenceElement } = this;
+      if (!effectiveReferenceElement) {
+        return;
+      }
+      const id = this.getId();
+      effectiveReferenceElement.setAttribute(POPOVER_REFERENCE, id);
+      effectiveReferenceElement.setAttribute(ARIA_CONTROLS, id);
+      this.setExpandedAttr();
+    };
+    this.removeReferences = () => {
+      const { effectiveReferenceElement } = this;
+      if (!effectiveReferenceElement) {
+        return;
+      }
+      effectiveReferenceElement.removeAttribute(POPOVER_REFERENCE);
+      effectiveReferenceElement.removeAttribute(ARIA_CONTROLS);
+      effectiveReferenceElement.removeAttribute(ARIA_EXPANDED);
+    };
+    this.hide = () => {
+      this.open = false;
+    };
+    this.transitionEnd = (event) => {
+      if (event.propertyName === this.activeTransitionProp) {
+        this.open ? this.calcitePopoverOpen.emit() : this.calcitePopoverClose.emit();
+      }
+    };
+  }
+  offsetDistanceOffsetHandler() {
+    this.reposition();
+  }
+  offsetSkiddingHandler() {
+    this.reposition();
+  }
+  openHandler() {
+    this.reposition();
+    this.setExpandedAttr();
+  }
+  placementHandler() {
+    this.reposition();
+  }
+  referenceElementHandler() {
+    this.setUpReferenceElement();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  componentWillLoad() {
+    this.setUpReferenceElement();
+  }
+  componentDidLoad() {
+    this.reposition();
+  }
+  disconnectedCallback() {
+    this.removeReferences();
+    this.destroyPopper();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  /** Updates the position of the component. */
+  async reposition() {
+    const { popper, el, placement } = this;
+    const modifiers = this.getModifiers();
+    popper
+      ? await updatePopper({
+        el,
+        modifiers,
+        placement,
+        popper
+      })
+      : this.createPopper();
+  }
+  /** Sets focus on the component. */
+  async setFocus(focusId) {
+    var _a;
+    const { closeButtonEl } = this;
+    if (focusId === "close-button" && closeButtonEl) {
+      forceUpdate(closeButtonEl);
+      closeButtonEl.setFocus();
+      return;
+    }
+    (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  /** Toggles the popover's open property. */
+  async toggle(value = !this.open) {
+    this.open = value;
+  }
+  getReferenceElement() {
+    const { referenceElement, el } = this;
+    return ((typeof referenceElement === "string"
+      ? queryElementRoots(el, `#${referenceElement}`)
+      : referenceElement) || null);
+  }
+  getModifiers() {
+    const { arrowEl, flipPlacements, disableFlip, disablePointer, offsetDistance, offsetSkidding } = this;
+    const flipModifier = {
+      name: "flip",
+      enabled: !disableFlip
+    };
+    if (flipPlacements) {
+      flipModifier.options = {
+        fallbackPlacements: flipPlacements
+      };
+    }
+    const arrowModifier = {
+      name: "arrow",
+      enabled: !disablePointer
+    };
+    if (arrowEl) {
+      arrowModifier.options = {
+        element: arrowEl
+      };
+    }
+    const offsetModifier = {
+      name: "offset",
+      enabled: true,
+      options: {
+        offset: [offsetSkidding, offsetDistance]
+      }
+    };
+    return [arrowModifier, flipModifier, offsetModifier];
+  }
+  createPopper() {
+    this.destroyPopper();
+    const { el, placement, effectiveReferenceElement: referenceEl, overlayPositioning } = this;
+    const modifiers = this.getModifiers();
+    this.popper = createPopper({
+      el,
+      modifiers,
+      overlayPositioning,
+      placement,
+      referenceEl
+    });
+  }
+  destroyPopper() {
+    const { popper } = this;
+    if (popper) {
+      popper.destroy();
+    }
+    this.popper = null;
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderCloseButton() {
+    const { dismissible, closeButton, intlClose } = this;
+    return dismissible || closeButton ? (h("calcite-action", { class: CSS.closeButton, onClick: this.hide, ref: (closeButtonEl) => (this.closeButtonEl = closeButtonEl), text: intlClose }, h("calcite-icon", { icon: "x", scale: "m" }))) : null;
+  }
+  renderHeader() {
+    const { heading, headingLevel } = this;
+    const headingNode = heading ? (h(CalciteHeading, { class: CSS.heading, level: headingLevel || HEADING_LEVEL }, heading)) : null;
+    return headingNode ? (h("div", { class: CSS.header }, headingNode, this.renderCloseButton())) : null;
+  }
+  render() {
+    const { effectiveReferenceElement, el, heading, label, open, disablePointer } = this;
+    const rtl = getElementDir(el) === "rtl";
+    const displayed = effectiveReferenceElement && open;
+    const hidden = !displayed;
+    const arrowNode = !disablePointer ? (h("div", { class: CSS.arrow, ref: (arrowEl) => (this.arrowEl = arrowEl) })) : null;
+    return (h(Host, { "aria-hidden": hidden.toString(), "aria-label": label, "calcite-hydrated-hidden": hidden, id: this.getId(), role: "dialog" }, h("div", { class: {
+        [CSS_UTILITY.rtl]: rtl,
+        [CSS$1.animation]: true,
+        [CSS$1.animationActive]: displayed
+      }, onTransitionEnd: this.transitionEnd }, arrowNode, h("div", { class: {
+        [CSS.hasHeader]: !!heading,
+        [CSS.container]: true
+      } }, this.renderHeader(), h("div", { class: CSS.content }, h("slot", null)), !heading ? this.renderCloseButton() : null))));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "offsetDistance": ["offsetDistanceOffsetHandler"],
+    "offsetSkidding": ["offsetSkiddingHandler"],
+    "open": ["openHandler"],
+    "placement": ["placementHandler"],
+    "referenceElement": ["referenceElementHandler"]
+  }; }
+  static get style() { return calcitePopoverCss; }
+};
+CalcitePopover = /*@__PURE__*/ proxyCustomElement(CalcitePopover, [1, "calcite-popover", {
+    "closeButton": [516, "close-button"],
+    "dismissible": [516],
+    "disableFlip": [516, "disable-flip"],
+    "disablePointer": [516, "disable-pointer"],
+    "flipPlacements": [16],
+    "heading": [1],
+    "headingLevel": [2, "heading-level"],
+    "label": [1],
+    "offsetDistance": [514, "offset-distance"],
+    "offsetSkidding": [514, "offset-skidding"],
+    "open": [1540],
+    "overlayPositioning": [1, "overlay-positioning"],
+    "placement": [513],
+    "referenceElement": [1, "reference-element"],
+    "intlClose": [1, "intl-close"],
+    "effectiveReferenceElement": [32],
+    "reposition": [64],
+    "setFocus": [64],
+    "toggle": [64]
+  }]);
+function defineCustomElement() {
+  const components = ["calcite-popover", "calcite-action", "calcite-icon", "calcite-loader"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-popover":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CalcitePopover);
+      }
+      break;
+    case "calcite-action":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "calcite-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "calcite-loader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { CalcitePopover as C, defineCustomElement as d };