@esri/solutions-components 0.6.1 → 0.6.3

package/dist/components/popover.js

@@ -4,9 +4,9 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { f as filterComputedPlacements, c as connectFloatingUI, b as defaultOffsetDistance, u as updateAfterClose, a as disconnectFloatingUI, r as reposition, F as FloatingCSS } from './floating-ui.js';
-import { c as connectFocusTrap, d as deactivateFocusTrap, a as activateFocusTrap, u as updateFocusTrapElements } from './focusTrapComponent.js';
-import { i as isPrimaryPointerButton, t as toAriaBoolean, l as focusFirstTabbable, q as queryElementRoots } from './dom.js';
+import { f as filterComputedPlacements, c as connectFloatingUI, b as defaultOffsetDistance, a as disconnectFloatingUI, r as reposition, F as FloatingCSS } from './floating-ui.js';
+import { d as deactivateFocusTrap, a as activateFocusTrap, c as connectFocusTrap, u as updateFocusTrapElements } from './focusTrapComponent.js';
+import { i as isPrimaryPointerButton, t as toAriaBoolean, k as focusFirstTabbable, q as queryElementRoots } from './dom.js';
 import { g as guid } from './guid.js';
 import { c as connectOpenCloseComponent, d as disconnectOpenCloseComponent } from './openCloseComponent.js';
 import { H as Heading } from './Heading.js';
@@ -14,6 +14,8 @@ import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n.js';
 import { i as isActivationKey } from './key.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentLoaded } from './loadable.js';
+import { c as createObserver } from './observers.js';
+import { F as FloatingArrow } from './FloatingArrow.js';
 import { d as defineCustomElement$3 } from './action.js';
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './loader.js';
@@ -21,11 +23,10 @@ import { d as defineCustomElement$1 } from './loader.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.2.0
+ * v1.4.3
  */
 const CSS = {
   container: "container",
-  arrow: "arrow",
   imageContainer: "image-container",
   closeButtonContainer: "close-button-container",
   closeButton: "close-button",
@@ -42,7 +43,7 @@ const ARIA_EXPANDED = "aria-expanded";
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.2.0
+ * v1.4.3
  */
 class PopoverManager {
   constructor() {
@@ -123,7 +124,7 @@ class PopoverManager {
   }
 }
 
-const popoverCss = "@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-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-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:600}:host([hidden]){display:none}:host{--calcite-floating-ui-z-index:var(--calcite-popover-z-index, 900);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:1;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}.arrow,.arrow::before{position:absolute;inline-size:8px;block-size: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);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);transform:rotate(45deg);background:var(--calcite-ui-foreground-1)}:host([data-placement^=top]) .arrow{inset-block-end:-4px}:host([data-placement^=bottom]) .arrow{inset-block-start:-4px}:host([data-placement^=right]) .arrow,:host([data-placement^=left]) .arrow{direction:ltr;text-align:start}:host([data-placement^=left]) .arrow{inset-inline-end:-4px}:host([data-placement^=right]) .arrow{inset-inline-start:-4px}: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;background-color:var(--calcite-ui-foreground-1);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;background-color:var(--calcite-ui-foreground-1);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%}";
+const popoverCss = "@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%}";
 
 const manager = new PopoverManager();
 const Popover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -135,6 +136,12 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.calcitePopoverClose = createEvent(this, "calcitePopoverClose", 6);
     this.calcitePopoverBeforeOpen = createEvent(this, "calcitePopoverBeforeOpen", 6);
     this.calcitePopoverOpen = createEvent(this, "calcitePopoverOpen", 6);
+    // --------------------------------------------------------------------------
+    //
+    //  Private Properties
+    //
+    // --------------------------------------------------------------------------
+    this.mutationObserver = createObserver("mutation", () => this.updateFocusTrapElements());
     this.guid = `calcite-popover-${guid()}`;
     this.openTransitionProp = "opacity";
     this.hasLoaded = false;
@@ -146,8 +153,6 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.setTransitionEl = (el) => {
       this.transitionEl = el;
       connectOpenCloseComponent(this);
-      this.focusTrapEl = el;
-      connectFocusTrap(this);
     };
     this.setFilteredPlacements = () => {
       const { el, flipPlacements } = this;
@@ -229,6 +234,7 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.scale = "m";
     this.triggerDisabled = false;
     this.effectiveLocale = "";
+    this.floatingLayout = "vertical";
     this.effectiveReferenceElement = undefined;
     this.defaultMessages = undefined;
   }
@@ -255,9 +261,6 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (value) {
       this.reposition(true);
     }
-    else {
-      updateAfterClose(this.el);
-    }
     this.setExpandedAttr();
   }
   overlayPositioningHandler() {
@@ -284,6 +287,7 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     connectMessages(this);
     connectOpenCloseComponent(this);
     this.setUpReferenceElement(this.hasLoaded);
+    connectFocusTrap(this);
   }
   async componentWillLoad() {
     await setUpMessages(this);
@@ -326,7 +330,6 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       flipPlacements: filteredFlipPlacements,
       offsetDistance,
       offsetSkidding,
-      includeArrow: !this.pointerDisabled,
       arrowEl,
       type: "popover"
     }, delayed);
@@ -337,7 +340,7 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   async setFocus() {
     await componentLoaded(this);
     forceUpdate(this.el);
-    focusFirstTabbable(this.focusTrapEl);
+    focusFirstTabbable(this.el);
   }
   /**
    * Updates the element(s) that are used within the focus-trap of the component.
@@ -372,7 +375,7 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   // --------------------------------------------------------------------------
   renderCloseButton() {
     const { messages, closable } = this;
-    return closable ? (h("div", { class: CSS.closeButtonContainer, key: CSS.closeButtonContainer }, h("calcite-action", { class: CSS.closeButton, onClick: this.hide, scale: this.scale, text: messages.close,
+    return closable ? (h("div", { class: CSS.closeButtonContainer, key: CSS.closeButtonContainer }, h("calcite-action", { appearance: "transparent", class: CSS.closeButton, onClick: this.hide, scale: this.scale, text: messages.close,
       // eslint-disable-next-line react/jsx-sort-props
       ref: (closeButtonEl) => (this.closeButtonEl = closeButtonEl) }, h("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : this.scale })))) : null;
   }
@@ -382,10 +385,10 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return headingNode ? (h("div", { class: CSS.header, key: CSS.header }, headingNode, this.renderCloseButton())) : null;
   }
   render() {
-    const { effectiveReferenceElement, heading, label, open, pointerDisabled } = this;
+    const { effectiveReferenceElement, heading, label, open, pointerDisabled, floatingLayout } = this;
     const displayed = effectiveReferenceElement && open;
     const hidden = !displayed;
-    const arrowNode = !pointerDisabled ? (h("div", { class: CSS.arrow,
+    const arrowNode = !pointerDisabled ? (h(FloatingArrow, { floatingLayout: floatingLayout, key: "floating-arrow",
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.storeArrowEl })) : null;
     return (h(Host, { "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "aria-live": "polite", "calcite-hydrated-hidden": hidden, id: this.getId(), role: "dialog" }, h("div", { class: {
@@ -434,6 +437,7 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "scale": [513],
     "triggerDisabled": [516, "trigger-disabled"],
     "effectiveLocale": [32],
+    "floatingLayout": [32],
     "effectiveReferenceElement": [32],
     "defaultMessages": [32],
     "reposition": [64],

package/dist/components/progress.js

@@ -5,7 +5,7 @@
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const progressCss = "@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-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-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:600}:host([hidden]){display:none}@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-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-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:host{position:relative;display:block;inline-size:100%}.track,.bar{position:absolute;inset-block-start:0px;block-size:2px}.track{z-index:1;inline-size:100%;overflow:hidden;background:var(--calcite-ui-border-3)}.bar{z-index:1;background-color:var(--calcite-ui-brand)}@media (forced-colors: active){.track{background-color:highlightText}.bar{background-color:linkText}}.indeterminate{inline-size:20%;animation:looping-progress-bar-ani calc(var(--calcite-internal-animation-timing-medium) / var(--calcite-internal-duration-factor) * 11 / var(--calcite-internal-duration-factor)) linear infinite}.reversed{animation-direction:reverse}.text{padding-inline:0px;padding-block:1rem 0px;text-align:center;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-2)}@keyframes looping-progress-bar-ani{0%{transform:translate3d(-100%, 0, 0)}50%{inline-size:40%}100%{transform:translate3d(600%, 0, 0)}}";
+const progressCss = "@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}@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}}:host{position:relative;display:block;inline-size:100%}.track,.bar{position:absolute;inset-block-start:0px;block-size:2px}.track{z-index:var(--calcite-app-z-index);inline-size:100%;overflow:hidden;background:var(--calcite-ui-border-3)}.bar{z-index:var(--calcite-app-z-index);background-color:var(--calcite-ui-brand)}@media (forced-colors: active){.track{background-color:highlightText}.bar{background-color:linkText}}.indeterminate{inline-size:20%;animation:looping-progress-bar-ani calc(var(--calcite-internal-animation-timing-medium) / var(--calcite-internal-duration-factor) * 11 / var(--calcite-internal-duration-factor)) linear infinite}.reversed{animation-direction:reverse}.text{padding-inline:0px;padding-block:1rem 0px;text-align:center;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-2)}@keyframes looping-progress-bar-ani{0%{transform:translate3d(-100%, 0, 0)}50%{inline-size:40%}100%{transform:translate3d(600%, 0, 0)}}";
 
 const Progress = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/pt-br.js

@@ -0,0 +1,45 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { d as dayjs } from './calcite-input-time-picker.js';
+
+// Portuguese (Brazil) [pt-br]
+var locale = {
+  name: 'pt-br',
+  weekdays: 'domingo_segunda-feira_terça-feira_quarta-feira_quinta-feira_sexta-feira_sábado'.split('_'),
+  weekdaysShort: 'dom_seg_ter_qua_qui_sex_sáb'.split('_'),
+  weekdaysMin: 'Do_2ª_3ª_4ª_5ª_6ª_Sá'.split('_'),
+  months: 'janeiro_fevereiro_março_abril_maio_junho_julho_agosto_setembro_outubro_novembro_dezembro'.split('_'),
+  monthsShort: 'jan_fev_mar_abr_mai_jun_jul_ago_set_out_nov_dez'.split('_'),
+  ordinal: function ordinal(n) {
+    return n + "\xBA";
+  },
+  formats: {
+    LT: 'HH:mm',
+    LTS: 'HH:mm:ss',
+    L: 'DD/MM/YYYY',
+    LL: 'D [de] MMMM [de] YYYY',
+    LLL: 'D [de] MMMM [de] YYYY [às] HH:mm',
+    LLLL: 'dddd, D [de] MMMM [de] YYYY [às] HH:mm'
+  },
+  relativeTime: {
+    future: 'em %s',
+    past: 'há %s',
+    s: 'poucos segundos',
+    m: 'um minuto',
+    mm: '%d minutos',
+    h: 'uma hora',
+    hh: '%d horas',
+    d: 'um dia',
+    dd: '%d dias',
+    M: 'um mês',
+    MM: '%d meses',
+    y: 'um ano',
+    yy: '%d anos'
+  }
+};
+dayjs.locale(locale, null, true);
+
+export default locale;

package/dist/components/pt.js

@@ -0,0 +1,47 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { d as dayjs } from './calcite-input-time-picker.js';
+
+// Portuguese [pt]
+var locale = {
+  name: 'pt',
+  weekdays: 'domingo_segunda-feira_terça-feira_quarta-feira_quinta-feira_sexta-feira_sábado'.split('_'),
+  weekdaysShort: 'dom_seg_ter_qua_qui_sex_sab'.split('_'),
+  weekdaysMin: 'Do_2ª_3ª_4ª_5ª_6ª_Sa'.split('_'),
+  months: 'janeiro_fevereiro_março_abril_maio_junho_julho_agosto_setembro_outubro_novembro_dezembro'.split('_'),
+  monthsShort: 'jan_fev_mar_abr_mai_jun_jul_ago_set_out_nov_dez'.split('_'),
+  ordinal: function ordinal(n) {
+    return n + "\xBA";
+  },
+  weekStart: 1,
+  yearStart: 4,
+  formats: {
+    LT: 'HH:mm',
+    LTS: 'HH:mm:ss',
+    L: 'DD/MM/YYYY',
+    LL: 'D [de] MMMM [de] YYYY',
+    LLL: 'D [de] MMMM [de] YYYY [às] HH:mm',
+    LLLL: 'dddd, D [de] MMMM [de] YYYY [às] HH:mm'
+  },
+  relativeTime: {
+    future: 'em %s',
+    past: 'há %s',
+    s: 'alguns segundos',
+    m: 'um minuto',
+    mm: '%d minutos',
+    h: 'uma hora',
+    hh: '%d horas',
+    d: 'um dia',
+    dd: '%d dias',
+    M: 'um mês',
+    MM: '%d meses',
+    y: 'um ano',
+    yy: '%d anos'
+  }
+};
+dayjs.locale(locale, null, true);
+
+export default locale;

package/dist/components/public-notification.js

@@ -6,20 +6,23 @@
 import { proxyCustomElement, HTMLElement, createEvent, getAssetPath, h, Host } from '@stencil/core/internal/client';
 import { a as EExportType, b as EPageType, c as EWorkflowType } from './interfaces.js';
 import { l as loadModules } from './loadModules.js';
-import { g as goToSelection, h as highlightFeatures, d as defineCustomElement$5 } from './map-layer-picker2.js';
+import { g as goToSelection, h as highlightFeatures } from './mapViewUtils.js';
 import { s as state } from './publicNotificationStore.js';
 import { g as getLocaleComponentStrings } from './locale.js';
 import { c as consolidateLabels, r as removeDuplicateLabels } from './downloadUtils.js';
-import { d as defineCustomElement$D } from './buffer-tools2.js';
-import { d as defineCustomElement$C } from './action.js';
-import { d as defineCustomElement$B } from './action-bar.js';
-import { d as defineCustomElement$A } from './action-group.js';
-import { d as defineCustomElement$z } from './action-menu.js';
-import { d as defineCustomElement$y } from './button.js';
-import { d as defineCustomElement$x } from './checkbox.js';
-import { d as defineCustomElement$w } from './chip.js';
-import { d as defineCustomElement$v } from './combobox.js';
-import { d as defineCustomElement$u } from './combobox-item.js';
+import { d as defineCustomElement$G } from './buffer-tools2.js';
+import { d as defineCustomElement$F } from './action.js';
+import { d as defineCustomElement$E } from './action-bar.js';
+import { d as defineCustomElement$D } from './action-group.js';
+import { d as defineCustomElement$C } from './action-menu.js';
+import { d as defineCustomElement$B } from './button.js';
+import { d as defineCustomElement$A } from './checkbox.js';
+import { d as defineCustomElement$z } from './chip.js';
+import { d as defineCustomElement$y } from './combobox.js';
+import { d as defineCustomElement$x } from './combobox-item.js';
+import { d as defineCustomElement$w } from './dropdown.js';
+import { d as defineCustomElement$v } from './dropdown-group.js';
+import { d as defineCustomElement$u } from './dropdown-item.js';
 import { d as defineCustomElement$t } from './filter.js';
 import { d as defineCustomElement$s } from './graph.js';
 import { d as defineCustomElement$r } from './icon.js';
@@ -44,6 +47,7 @@ import { d as defineCustomElement$9 } from './slider.js';
 import { d as defineCustomElement$8 } from './switch.js';
 import { d as defineCustomElement$7 } from './tooltip.js';
 import { d as defineCustomElement$6 } from './map-draw-tools2.js';
+import { d as defineCustomElement$5 } from './map-layer-picker2.js';
 import { d as defineCustomElement$4 } from './map-select-tools2.js';
 import { d as defineCustomElement$3 } from './pdf-download2.js';
 import { d as defineCustomElement$2 } from './refine-selection2.js';
@@ -59,6 +63,10 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
      * string: The url to the onboarding image
      */
     this._onboardingImageUrl = "";
+    /**
+     * Text to be used as title on PDF pages
+     */
+    this._titleValue = undefined;
     /**
      * number: The number of selected features
      */
@@ -69,6 +77,8 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
     this.customLabelEnabled = undefined;
     this.defaultBufferDistance = undefined;
     this.defaultBufferUnit = undefined;
+    this.defaultExportTitle = "";
+    this.defaultNumLabelsPerPage = undefined;
     this.featureEffect = undefined;
     this.featureHighlightEnabled = undefined;
     this.mapView = undefined;
@@ -537,7 +547,8 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
   _getExportOptions() {
     const displayClass = this._exportType === EExportType.PDF ? "display-block" : "display-none";
     const titleOptionsClass = this._addTitle ? "display-block" : "display-none";
-    return (h("div", { class: displayClass }, this._getLabel(this._translations.pdfOptions, true), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0" }, this._translations.selectPDFLabelOption)), h("div", { class: "padding-sides-1" }, h("pdf-download", { disabled: !this._downloadActive, ref: (el) => { this._downloadTools = el; } })), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addTitle, onCalciteCheckboxChange: () => this._addTitle = !this._addTitle }), this._translations.addTitle)), h("div", { class: titleOptionsClass }, this._getLabel(this._translations.title, true, ""), h("calcite-input-text", { class: "padding-sides-1", placeholder: this._translations.titlePlaceholder, ref: (el) => { this._title = el; } })), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addMap, onCalciteCheckboxChange: () => this._addMap = !this._addMap }), this._translations.includeMap))));
+    const title = this._titleValue !== undefined ? this._titleValue : this.defaultExportTitle ? this.defaultExportTitle : "";
+    return (h("div", { class: displayClass }, this._getLabel(this._translations.pdfOptions, true), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0" }, this._translations.selectPDFLabelOption)), h("div", { class: "padding-sides-1" }, h("pdf-download", { defaultNumLabelsPerPage: this.defaultNumLabelsPerPage, disabled: !this._downloadActive, ref: (el) => { this._downloadTools = el; } })), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addTitle, onCalciteCheckboxChange: () => this._addTitle = !this._addTitle }), this._translations.addTitle)), h("div", { class: titleOptionsClass }, this._getLabel(this._translations.title, true, ""), h("calcite-input-text", { class: "padding-sides-1", onCalciteInputTextInput: () => this._changeTitle(), placeholder: this._translations.titlePlaceholder, ref: (el) => { this._titleElement = el; }, value: title })), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addMap, onCalciteCheckboxChange: () => this._addMap = !this._addMap }), this._translations.includeMap))));
   }
   /**
    * Render the refine page
@@ -565,6 +576,12 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
   _getPageNavButtons(topLabel, topDisabled, topFunc, bottomLabel, bottomDisabled, bottomFunc) {
     return (h("div", { class: "padding-bottom-1" }, h("div", { class: "display-flex padding-top-sides-1" }, h("calcite-button", { disabled: topDisabled, onClick: topFunc, width: "full" }, h("span", { class: "font-weight-500" }, topLabel))), h("div", { class: "display-flex padding-top-1-2 padding-sides-1" }, h("calcite-button", { appearance: "outline", disabled: bottomDisabled, onClick: bottomFunc, width: "full" }, h("span", { class: "font-weight-500" }, bottomLabel)))));
   }
+  /**
+   * Store the user defined title value
+   */
+  _changeTitle() {
+    this._titleValue = this._titleElement.value;
+  }
   /**
    * Create an informational notice
    *
@@ -647,7 +664,7 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
       }
       this._fetchingData = true;
       // Create the labels for each selection set
-      await this._downloadTools.downloadPDF(exportInfos, this._removeDuplicates.checked, this._addTitle ? this._title.value : "", initialImageDataUrl);
+      await this._downloadTools.downloadPDF(exportInfos, this._removeDuplicates.checked, this._addTitle ? this._titleElement.value : "", initialImageDataUrl);
       this._fetchingData = false;
     }
     if (this._exportType === EExportType.CSV) {
@@ -881,6 +898,8 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
     "customLabelEnabled": [4, "custom-label-enabled"],
     "defaultBufferDistance": [2, "default-buffer-distance"],
     "defaultBufferUnit": [1, "default-buffer-unit"],
+    "defaultExportTitle": [1, "default-export-title"],
+    "defaultNumLabelsPerPage": [8, "default-num-labels-per-page"],
     "featureEffect": [16],
     "featureHighlightEnabled": [4, "feature-highlight-enabled"],
     "mapView": [16],
@@ -908,7 +927,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["public-notification", "buffer-tools", "calcite-action", "calcite-action-bar", "calcite-action-group", "calcite-action-menu", "calcite-button", "calcite-checkbox", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-filter", "calcite-graph", "calcite-icon", "calcite-input", "calcite-input-message", "calcite-input-text", "calcite-label", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-notice", "calcite-option", "calcite-panel", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-segmented-control", "calcite-segmented-control-item", "calcite-select", "calcite-shell", "calcite-slider", "calcite-switch", "calcite-tooltip", "map-draw-tools", "map-layer-picker", "map-select-tools", "pdf-download", "refine-selection"];
+  const components = ["public-notification", "buffer-tools", "calcite-action", "calcite-action-bar", "calcite-action-group", "calcite-action-menu", "calcite-button", "calcite-checkbox", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-dropdown", "calcite-dropdown-group", "calcite-dropdown-item", "calcite-filter", "calcite-graph", "calcite-icon", "calcite-input", "calcite-input-message", "calcite-input-text", "calcite-label", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-notice", "calcite-option", "calcite-panel", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-segmented-control", "calcite-segmented-control-item", "calcite-select", "calcite-shell", "calcite-slider", "calcite-switch", "calcite-tooltip", "map-draw-tools", "map-layer-picker", "map-select-tools", "pdf-download", "refine-selection"];
   components.forEach(tagName => { switch (tagName) {
     case "public-notification":
       if (!customElements.get(tagName)) {
@@ -917,50 +936,65 @@ function defineCustomElement$1() {
       break;
     case "buffer-tools":
       if (!customElements.get(tagName)) {
-        defineCustomElement$D();
+        defineCustomElement$G();
       }
       break;
     case "calcite-action":
       if (!customElements.get(tagName)) {
-        defineCustomElement$C();
+        defineCustomElement$F();
       }
       break;
     case "calcite-action-bar":
       if (!customElements.get(tagName)) {
-        defineCustomElement$B();
+        defineCustomElement$E();
       }
       break;
     case "calcite-action-group":
       if (!customElements.get(tagName)) {
-        defineCustomElement$A();
+        defineCustomElement$D();
       }
       break;
     case "calcite-action-menu":
       if (!customElements.get(tagName)) {
-        defineCustomElement$z();
+        defineCustomElement$C();
       }
       break;
     case "calcite-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$y();
+        defineCustomElement$B();
       }
       break;
     case "calcite-checkbox":
       if (!customElements.get(tagName)) {
-        defineCustomElement$x();
+        defineCustomElement$A();
       }
       break;
     case "calcite-chip":
       if (!customElements.get(tagName)) {
-        defineCustomElement$w();
+        defineCustomElement$z();
       }
       break;
     case "calcite-combobox":
       if (!customElements.get(tagName)) {
-        defineCustomElement$v();
+        defineCustomElement$y();
       }
       break;
     case "calcite-combobox-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$x();
+      }
+      break;
+    case "calcite-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$w();
+      }
+      break;
+    case "calcite-dropdown-group":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$v();
+      }
+      break;
+    case "calcite-dropdown-item":
       if (!customElements.get(tagName)) {
         defineCustomElement$u();
       }

package/dist/components/publicNotificationStore.js

@@ -3,7 +3,7 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { c as createStore } from './index2.js';
+import { c as createStore } from './index3.js';
 
 /** @license
  * Copyright 2022 Esri

package/dist/components/queryUtils.js

@@ -19,26 +19,16 @@
  * limitations under the License.
  */
 /**
- * Query the layer for all features
+ * Query the layer for all IDs
  *
- * @param start zero-based index indicating where to begin retrieving features
  * @param layer the layer to retrieve features from
- * @param graphics stores the features
  *
  * @returns Promise with the featureSet from the layer that match the provided ids
  */
-async function queryAllFeatures(start, layer, graphics) {
-  const num = layer.capabilities.query.maxRecordCount;
+async function queryAllIds(layer) {
   const query = layer.createQuery();
-  query.start = start;
-  query.num = num;
-  // TODO think through this once I'm back on crowdsource...seems like we may want an arg to control this
-  query.where = layer.definitionExpression || "1=1";
-  const result = await layer.queryFeatures(query);
-  graphics = graphics.concat(result.features);
-  return result.exceededTransferLimit ?
-    queryAllFeatures(start += num, layer, graphics) :
-    Promise.resolve(graphics);
+  query.where = "1=1";
+  return await layer.queryObjectIds(query);
 }
 /**
  * Query the layer for OIDs based on any user drawn geometries or buffers
@@ -65,20 +55,26 @@ async function queryObjectIds(geometries, layer) {
  *
  * @param ids array of ObjectIDs to be used to query for features in a layer
  * @param layer the layer to retrieve features from
+ * @param graphics the result graphics array
  *
  * @returns Promise with the featureSet from the layer that match the provided ids
  */
-async function queryFeaturesByID(ids, layer, start, graphics) {
+async function queryFeaturesByID(ids, layer, graphics, returnGeometry, outSpatialReference) {
   const num = layer.capabilities.query.maxRecordCount;
+  const start = 0;
   const q = layer.createQuery();
   q.start = start;
   q.num = num;
+  q.returnGeometry = returnGeometry;
   q.objectIds = ids.slice(start, num);
+  if (outSpatialReference) {
+    q.outSpatialReference = outSpatialReference;
+  }
   const result = await layer.queryFeatures(q);
   graphics = graphics.concat(result.features);
   const remainingIds = ids.slice(num, ids.length);
   return remainingIds.length > 0 ?
-    queryFeaturesByID(remainingIds, layer, start += num, graphics) :
+    queryFeaturesByID(remainingIds, layer, graphics, returnGeometry, outSpatialReference) :
     Promise.resolve(graphics);
 }
 /**
@@ -160,4 +156,4 @@ async function _intersectQuery(geometry, layer) {
   return layer.queryObjectIds(q);
 }
 
-export { queryExtent as a, queryObjectIds as b, queryFeaturesByGeometry as c, queryFeaturesByID as d, getQueryGeoms as g, queryAllFeatures as q };
+export { queryAllIds as a, queryObjectIds as b, queryFeaturesByGeometry as c, queryExtent as d, getQueryGeoms as g, queryFeaturesByID as q };