@esri/solutions-components 0.6.2 → 0.6.3

package/dist/components/list-item2.js

@@ -4,8 +4,8 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { e as slotChangeHasAssignedElement, c as getElementDir, t as toAriaBoolean } from './dom.js';
-import { u as updateHostInteraction } from './interactive.js';
+import { j as slotChangeHasAssignedElement, c as getElementDir, t as toAriaBoolean } from './dom.js';
+import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive.js';
 import { a as getListItemChildren, u as updateListItemChildren, g as getDepth, C as CSS, I as ICONS, S as SLOTS } from './utils3.js';
 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';
@@ -14,7 +14,7 @@ import { d as defineCustomElement$3 } from './action.js';
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './loader.js';
 
-const listItemCss = "@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([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;flex-direction:column;--calcite-list-item-icon-color:var(--calcite-ui-brand);--calcite-list-item-spacing-indent:1rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.container{box-sizing:border-box;display:flex;flex:1 1 0%;background-color:var(--calcite-ui-foreground-1);font-family:var(--calcite-sans-family);-webkit-padding-start:calc(var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier));padding-inline-start:calc(var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier))}.container *{box-sizing:border-box}.container:hover{cursor:pointer;background-color:var(--calcite-ui-foreground-2)}.container--border-selected{-webkit-border-start:4px solid var(--calcite-ui-brand);border-inline-start:4px solid var(--calcite-ui-brand)}.container--border-unselected{-webkit-border-start:4px solid transparent;border-inline-start:4px solid transparent}.nested-container{display:flex;flex-direction:column;background-color:var(--calcite-ui-foreground-1)}.nested-container--hidden{display:none}.content-container{display:flex;flex:1 1 auto;align-items:stretch;padding:0px;font-family:var(--calcite-sans-family);font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-2)}tr,td{outline-color:transparent}tr:focus,td:focus{z-index:var(--calcite-app-z-index-sticky);outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand))}.content,.custom-content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;padding-inline:0.75rem;padding-block:0.5rem;font-size:var(--calcite-font-size--2);line-height:1.375}.label,.description{font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);font-weight:var(--calcite-font-weight-normal);word-wrap:break-word;word-break:break-word}.label:only-child,.description:only-child{margin:0px;padding-block:0.25rem}.label{color:var(--calcite-ui-text-1)}.description{-webkit-margin-before:0.125rem;margin-block-start:0.125rem;color:var(--calcite-ui-text-3)}.content-start{justify-content:flex-start}.content-end{justify-content:flex-end}.content-start,.content-end{flex:1 1 auto}.content-container--has-center-content .content-start,.content-container--has-center-content .content-end{flex:0 1 auto}.selection-container{display:flex;padding-inline:0.75rem;color:var(--calcite-list-item-icon-color)}.actions-start,.actions-end,.content-start,.content-end,.selection-container,.open-container{display:flex;align-items:center}.open-container,.selection-container{cursor:pointer}.content-start ::slotted(calcite-icon),.content-end ::slotted(calcite-icon){margin-inline:0.75rem;align-self:center}.actions-start ::slotted(calcite-action),.actions-end ::slotted(calcite-action){align-self:stretch;color:inherit}::slotted(calcite-list-item){border-width:0px;border-block-start-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}[hidden]{display:none}";
+const listItemCss = "@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([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;flex-direction:column;--calcite-list-item-icon-color:var(--calcite-ui-brand);--calcite-list-item-spacing-indent:1rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.container{box-sizing:border-box;display:flex;flex:1 1 0%;background-color:var(--calcite-ui-foreground-1);font-family:var(--calcite-sans-family);-webkit-padding-start:calc(var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier));padding-inline-start:calc(var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier))}.container *{box-sizing:border-box}.container:hover{cursor:pointer;background-color:var(--calcite-ui-foreground-2)}.container--border-selected{-webkit-border-start:4px solid var(--calcite-ui-brand);border-inline-start:4px solid var(--calcite-ui-brand)}.container--border-unselected{-webkit-border-start:4px solid transparent;border-inline-start:4px solid transparent}.nested-container{display:flex;flex-direction:column;background-color:var(--calcite-ui-foreground-1)}.nested-container--hidden{display:none}.content-container{display:flex;flex:1 1 auto;align-items:stretch;padding:0px;font-family:var(--calcite-sans-family);font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-2)}tr,td{outline-color:transparent}tr:focus,td:focus{z-index:var(--calcite-app-z-index-sticky);outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}.content,.custom-content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;padding-inline:0.75rem;padding-block:0.5rem;font-size:var(--calcite-font-size--2);line-height:1.375}.label,.description{font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);font-weight:var(--calcite-font-weight-normal);word-wrap:break-word;word-break:break-word}.label:only-child,.description:only-child{margin:0px;padding-block:0.25rem}.label{color:var(--calcite-ui-text-1)}.description{-webkit-margin-before:0.125rem;margin-block-start:0.125rem;color:var(--calcite-ui-text-3)}.content-start{justify-content:flex-start}.content-end{justify-content:flex-end}.content-start,.content-end{flex:1 1 auto}.content-container--has-center-content .content-start,.content-container--has-center-content .content-end{flex:0 1 auto}.selection-container{display:flex;padding-inline:0.75rem;color:var(--calcite-list-item-icon-color)}.actions-start,.actions-end,.content-start,.content-end,.selection-container,.open-container{display:flex;align-items:center}.open-container,.selection-container{cursor:pointer}.content-start ::slotted(calcite-icon),.content-end ::slotted(calcite-icon){margin-inline:0.75rem;align-self:center}.actions-start ::slotted(calcite-action),.actions-end ::slotted(calcite-action){align-self:stretch;color:inherit}::slotted(calcite-list-item){border-width:0px;border-block-start-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}[hidden]{display:none}";
 
 const focusMap = new Map();
 const listSelector = "calcite-list";
@@ -191,10 +191,8 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.focusCell(null, false);
     }
   }
-  handleSelectedChange(value) {
-    if (value) {
-      this.calciteInternalListItemSelect.emit();
-    }
+  handleSelectedChange() {
+    this.calciteInternalListItemSelect.emit();
   }
   onMessagesChange() {
     /* wired up by t9n util */
@@ -203,6 +201,7 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     updateMessages(this, this.effectiveLocale);
   }
   connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
     const { el } = this;
@@ -222,6 +221,7 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     updateHostInteraction(this, "managed");
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLocalized(this);
     disconnectMessages(this);
   }

package/dist/components/list.js

@@ -5,7 +5,7 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { t as toAriaBoolean } from './dom.js';
-import { u as updateHostInteraction } from './interactive.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive.js';
 import { c as createObserver } from './observers.js';
 import { u as updateListItemChildren, a as getListItemChildren, M as MAX_COLUMNS } from './utils3.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentLoaded } from './loadable.js';
@@ -20,7 +20,7 @@ import { d as debounce } from './debounce.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.4.2
+ * v1.4.3
  */
 const CSS = {
   container: "container",
@@ -31,7 +31,7 @@ const CSS = {
 };
 const debounceTimeout = 0;
 
-const listCss = "@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([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.container{position:relative}.table-container{position:relative;z-index:var(--calcite-app-z-index);box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;background-color:transparent}.table-container *{box-sizing:border-box}.table{inline-size:100%}::slotted(calcite-list-item){-webkit-margin-after:1px;margin-block-end:1px;--tw-shadow:0 1px 0 var(--calcite-ui-border-3);--tw-shadow-colored:0 1px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}::slotted(calcite-list-item:last-child){--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.sticky-pos{position:sticky;inset-block-start:0px;z-index:var(--calcite-app-z-index-sticky)}calcite-filter{-webkit-margin-after:1px;margin-block-end:1px}";
+const listCss = "@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([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.container{position:relative}.table-container{position:relative;z-index:var(--calcite-app-z-index);box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;background-color:transparent}.table-container *{box-sizing:border-box}.table{inline-size:100%;border-collapse:collapse}::slotted(calcite-list-item){-webkit-margin-after:1px;margin-block-end:1px;--tw-shadow:0 1px 0 var(--calcite-ui-border-3);--tw-shadow-colored:0 1px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}::slotted(calcite-list-item:last-child){--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.sticky-pos{position:sticky;inset-block-start:0px;z-index:var(--calcite-app-z-index-sticky)}.sticky-pos th{padding:0px}calcite-filter{-webkit-margin-after:1px;margin-block-end:1px}";
 
 const listItemSelector = "calcite-list-item";
 const parentSelector = "calcite-list-item-group, calcite-list-item";
@@ -210,11 +210,9 @@ const List = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   handleCalciteInternalListItemSelect(event) {
     const target = event.target;
     const { listItems, selectionMode } = this;
-    listItems.forEach((listItem) => {
-      if (selectionMode === "single" || selectionMode === "single-persist") {
-        listItem.selected = listItem === target;
-      }
-    });
+    if (target.selected && (selectionMode === "single" || selectionMode === "single-persist")) {
+      listItems.forEach((listItem) => (listItem.selected = listItem === target));
+    }
     this.updateSelectedItems();
   }
   handleCalciteListItemClose() {
@@ -229,10 +227,12 @@ const List = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     var _a;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
     this.updateListItems();
+    connectInteractive(this);
   }
   disconnectedCallback() {
     var _a;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    disconnectInteractive(this);
   }
   componentWillLoad() {
     setUpLoadableComponent(this);

package/dist/components/loadable.js

@@ -6,7 +6,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.2
+ * v1.4.3
  */
 const resolveMap = new WeakMap();
 const promiseMap = new WeakMap();

package/dist/components/locale2.js

@@ -3,14 +3,14 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { w as containsCrossShadowBoundary, l as closestElementCrossShadowBoundary } from './dom.js';
+import { w as containsCrossShadowBoundary, e as closestElementCrossShadowBoundary } from './dom.js';
 import { n as numberKeys } from './key.js';
 import { c as createObserver } from './observers.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.4.2
+ * v1.4.3
  */
 const unnecessaryDecimal = new RegExp(`\\${"."}(0+)?$`);
 const trailingZeros = new RegExp("0+$");
@@ -183,7 +183,7 @@ function stringContainsNumbers(string) {
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.2
+ * v1.4.3
  */
 const defaultLocale = "en";
 const t9nLocales = [
@@ -492,7 +492,10 @@ class NumberStringFormat {
       }).format(9876543210)
     ].reverse();
     const index = new Map(this._digits.map((d, i) => [d, i]));
-    const parts = new Intl.NumberFormat(this._numberFormatOptions.locale).formatToParts(-12345678.9);
+    // numberingSystem is parsed to return consistent decimal separator across browsers.
+    const parts = new Intl.NumberFormat(this._numberFormatOptions.locale, {
+      numberingSystem: this._numberFormatOptions.numberingSystem
+    }).formatToParts(-12345678.9);
     this._actualGroup = parts.find((d) => d.type === "group").value;
     // change whitespace group characters that don't render correctly
     this._group = this._actualGroup.trim().length === 0 ? " " : this._actualGroup;

package/dist/components/map-card2.js

@@ -6,28 +6,29 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { l as loadModules } from './loadModules.js';
 import { g as getLocaleComponentStrings } from './locale.js';
-import { d as EExpandType } from './interfaces.js';
-import { d as defineCustomElement$d } from './action.js';
-import { d as defineCustomElement$c } from './action-bar.js';
-import { d as defineCustomElement$b } from './action-group.js';
-import { d as defineCustomElement$a } from './action-menu.js';
-import { d as defineCustomElement$9 } from './block.js';
-import { d as defineCustomElement$8 } from './handle.js';
-import { d as defineCustomElement$7 } from './icon.js';
+import { d as defineCustomElement$g } from './action.js';
+import { d as defineCustomElement$f } from './action-bar.js';
+import { d as defineCustomElement$e } from './action-group.js';
+import { d as defineCustomElement$d } from './action-menu.js';
+import { d as defineCustomElement$c } from './button.js';
+import { d as defineCustomElement$b } from './filter.js';
+import { d as defineCustomElement$a } from './icon.js';
+import { d as defineCustomElement$9 } from './input.js';
+import { d as defineCustomElement$8 } from './list.js';
+import { d as defineCustomElement$7 } from './list-item2.js';
 import { d as defineCustomElement$6 } from './loader.js';
-import { d as defineCustomElement$5 } from './pick-list.js';
-import { d as defineCustomElement$4 } from './pick-list-item.js';
-import { d as defineCustomElement$3 } from './popover.js';
-import { d as defineCustomElement$2 } from './scrim.js';
-import { d as defineCustomElement$1 } from './tooltip.js';
+import { d as defineCustomElement$5 } from './popover.js';
+import { d as defineCustomElement$4 } from './progress.js';
+import { d as defineCustomElement$3 } from './scrim.js';
+import { d as defineCustomElement$2 } from './tooltip.js';
+import { d as defineCustomElement$1 } from './map-tools2.js';
 
-const mapCardCss = ":host{display:block;--calcite-label-margin-bottom:0;--calcite-block-padding:0}.action-bar-size{height:3.5rem;width:100%}.action-center{-webkit-box-align:center;-webkit-align-items:center;-ms-grid-row-align:center;align-items:center;align-content:center;justify-content:center}.border-bottom-1{border-width:0px;border-bottom-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}.width-1-7{width:14.28%}.width-1-6{width:16.66%}.width-full{width:100%}.height-full{height:100%}.display-flex{display:flex}.display-grid{display:inline-grid}.block-button{border-bottom:0}.block-button:hover{background-color:var(--calcite-ui-foreground-2)}.block-button:active{background-color:var(--calcite-ui-foreground-3)}.map-list{position:absolute;inset:3.5rem 0 0 0;display:flex;flex-direction:column;overflow:hidden;animation:calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;background-color:var(--calcite-scrim-background);z-index:1;width:100%;height:-moz-fit-content;height:fit-content}.map-height{height:calc(100% - 58px)}.display-none{display:none}.esri-zoom{display:none !important}";
+const mapCardCss = ":host{display:block;--calcite-label-margin-bottom:0;--calcite-block-padding:0}.action-bar-size{height:51px;width:100%}.action-center{-webkit-box-align:center;-webkit-align-items:center;-ms-grid-row-align:center;align-items:center;align-content:center;justify-content:center}.border-bottom-1{border-width:0px;border-bottom-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}.width-1-7{width:14.28%}.width-1-6{width:16.66%}.width-full{width:100%}.height-full{height:100%}.display-flex{display:flex}.display-grid{display:inline-grid}.block-button{border-bottom:0}.block-button:hover{background-color:var(--calcite-ui-foreground-2)}.block-button:active{background-color:var(--calcite-ui-foreground-3)}.map-list{position:absolute;display:flex;flex-direction:column;overflow:hidden;animation:calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;background-color:var(--calcite-scrim-background);z-index:1;width:100%;height:-moz-fit-content;height:fit-content}.map-height{height:calc(100% - 58px)}.display-none{display:none}.esri-zoom{display:none !important}.map-tools{position:absolute;top:40px;right:0px;padding:1rem}";
 
 const MapCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.expandMap = createEvent(this, "expandMap", 7);
     this.mapChanged = createEvent(this, "mapChanged", 7);
     /**
      * string: the id of map currently displayed
@@ -37,7 +38,7 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.mapView = undefined;
     this._mapListExpanded = false;
     this._translations = undefined;
-    this._webMapId = "";
+    this._webMapInfo = undefined;
   }
   //--------------------------------------------------------------------------
   //
@@ -45,9 +46,9 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   //
   //--------------------------------------------------------------------------
   /**
-   * Called each time the _webMapId prop is changed.
+   * Called each time the _webMapInfo prop is changed.
    */
-  _webMapIdWatchHandler(v, oldV) {
+  _webMapInfoWatchHandler(v, oldV) {
     if (v && JSON.stringify(v) !== JSON.stringify(oldV)) {
       this._loadMap(v);
     }
@@ -57,7 +58,7 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    */
   mapInfosWatchHandler(v, oldV) {
     if (v && JSON.stringify(v) !== JSON.stringify(oldV)) {
-      this._loadMap(v[0].id);
+      this._loadMap(v[0]);
     }
   }
   //--------------------------------------------------------------------------
@@ -77,13 +78,13 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    */
   componentDidRender() {
     // the container node for the map view needs to exist before the view is created
-    this._loadMap(this._webMapId);
+    this._loadMap(this._webMapInfo);
   }
   /**
    * Renders the component.
    */
   render() {
-    return (h(Host, null, this._getToolbar(), this._getMapNameList(this._mapListExpanded), h("div", { class: "map-height", ref: (el) => (this._mapDiv = el) })));
+    return (h(Host, null, this._getToolbar(), this._getMapNameList(this._mapListExpanded), h("div", { class: "map-height", ref: (el) => (this._mapDiv = el) }), h("map-tools", { class: "map-tools" })));
   }
   //--------------------------------------------------------------------------
   //
@@ -113,21 +114,22 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @protected
    */
   _getToolbar() {
-    return (h("div", { class: "display-flex" }, h("calcite-action-bar", { class: "border-bottom-1 action-bar-size", "expand-disabled": true, layout: "horizontal", slot: "header" }, this._getMapPicker(), this._getActionGroup("home", false, this._translations.home, () => this._goHome()), this._getActionGroup("list", false, this._translations.list, () => this._showList()), this._getActionGroup("magnifying-glass-plus", false, this._translations.search, () => this._search()), this._getActionGroup("plus", false, this._translations.zoomIn, () => this._zoomIn()), this._getActionGroup("minus", false, this._translations.zoomOut, () => this._zoomOut()), this._getActionGroup("expand", false, this._translations.expand, () => this._expand()))));
+    return (h("div", { class: "display-flex" }, h("calcite-action-bar", { class: "border-bottom-1 action-bar-size", "expand-disabled": true, layout: "horizontal", slot: "header" }, this._getMapPicker())));
   }
   /**
-   * Load the webmap for the provided id
+   * Load the webmap for the provided webMapInfo
    *
-   * @param id the webmap id to load
+   * @param webMapInfo the webmap id and name to load
    *
    * @returns void
    *
    * @protected
    */
-  _loadMap(id) {
+  _loadMap(webMapInfo) {
+    const id = webMapInfo === null || webMapInfo === void 0 ? void 0 : webMapInfo.id;
     // on the first render use the first child of the provided mapInfos
-    if (id === "" && this.mapInfos.length > 0) {
-      id = this.mapInfos[0].id;
+    if ((id === "" || !id) && this.mapInfos.length > 0) {
+      this._webMapInfo = this.mapInfos[0];
     }
     if (this._loadedId !== id) {
       const webMap = new this.WebMap({
@@ -143,21 +145,6 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.mapChanged.emit(this.mapView);
     }
   }
-  /**
-   * Get a calcite action group for the current action
-   *
-   * @param icon the icon to display for the current action
-   * @param disabled should the action be disabled
-   * @param tip information tip to display helpful details to end user
-   * @param func the associated onClick function to execute
-   *
-   * @returns the dom node for the action group
-   *
-   * @protected
-   */
-  _getActionGroup(icon, disabled, tip, func) {
-    return (h("calcite-action-group", { class: "action-center width-1-6", layout: "horizontal" }, h("calcite-action", { alignment: "center", class: "width-full height-full", compact: false, disabled: disabled, icon: icon, id: icon, onClick: func, text: "" }, h("calcite-icon", { icon: "cheveron-up", scale: "s", slot: "icon" })), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": icon }, h("span", null, tip))));
-  }
   /**
    * Get a calcite action group for the map list
    * Actions do not support multiple icons so this uses a block
@@ -167,8 +154,9 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @protected
    */
   _getMapPicker() {
+    var _a;
     const mapListIcon = this._mapListExpanded ? "chevron-up" : "chevron-down";
-    return (h("calcite-action-group", { class: "action-center width-1-6", layout: "horizontal" }, h("calcite-block", { class: "action-center block-button width-full height-full display-grid", heading: '', onClick: () => this._chooseMap() }, h("calcite-icon", { icon: "map", scale: "s", slot: "icon" }), h("calcite-icon", { icon: mapListIcon, scale: "s", slot: "icon" }), h("calcite-tooltip", { label: "", placement: "bottom" }, h("span", null, this._translations.mapName)))));
+    return (h("calcite-button", { alignment: "icon-end-space-between", appearance: "solid", class: "width-full height-full", iconEnd: mapListIcon, kind: "neutral", onClick: () => this._chooseMap(), width: "full" }, (_a = this._webMapInfo) === null || _a === void 0 ? void 0 : _a.name));
   }
   /**
    * Get a pick list for all maps in mapInfos
@@ -181,22 +169,22 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    */
   _getMapNameList(show) {
     const listClass = show ? "map-list" : "display-none";
-    return (h("div", { class: listClass }, h("calcite-pick-list", { id: "mapList" }, this.mapInfos.map(mapInfo => {
-      return (h("calcite-pick-list-item", { label: mapInfo.name, onClick: () => this._webMapSelected(mapInfo.id), selected: mapInfo.id === this._loadedId, value: mapInfo.id }));
+    return (h("div", { class: listClass }, h("calcite-list", { id: "mapList" }, this.mapInfos.map(mapInfo => {
+      return (h("calcite-list-item", { label: mapInfo.name, onClick: () => this._webMapSelected(mapInfo), selected: mapInfo.id === this._loadedId, value: mapInfo.id }));
     }))));
   }
   /**
    * Fired when the user clicks on the map list
    *
-   * @param id the web map id selected from the list
+   * @param webMapInfo the web map id and name selected from the list
    *
    * @returns void
    *
    * @protected
    */
-  _webMapSelected(id) {
+  _webMapSelected(webMapInfo) {
     this._mapListExpanded = false;
-    this._webMapId = id;
+    this._webMapInfo = webMapInfo;
   }
   /**
    * Toggles the open/close state of the map list
@@ -208,36 +196,6 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   _chooseMap() {
     this._mapListExpanded = !this._mapListExpanded;
   }
-  // Need to discuss this with the team
-  _goHome() {
-    alert("go home");
-  }
-  // need to discuss this with the team
-  _showList() {
-    alert("show list");
-  }
-  // Need to discuss this with the team
-  _search() {
-    alert("search");
-  }
-  // Need to explore map fixed zoom in considerations
-  _zoomIn() {
-    alert("zoom in");
-  }
-  // Need to explore map fixed zoom out considerations
-  _zoomOut() {
-    alert("zoom out");
-  }
-  /**
-   * Emit the expand map event
-   *
-   * @returns void
-   *
-   * @protected
-   */
-  _expand() {
-    this.expandMap.emit(EExpandType.EXPAND);
-  }
   /**
    * Fetches the component's translations
    *
@@ -250,7 +208,7 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   get el() { return this; }
   static get watchers() { return {
-    "_webMapId": ["_webMapIdWatchHandler"],
+    "_webMapInfo": ["_webMapInfoWatchHandler"],
     "mapInfos": ["mapInfosWatchHandler"]
   }; }
   static get style() { return mapCardCss; }
@@ -259,13 +217,13 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "mapView": [16],
     "_mapListExpanded": [32],
     "_translations": [32],
-    "_webMapId": [32]
+    "_webMapInfo": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["map-card", "calcite-action", "calcite-action-bar", "calcite-action-group", "calcite-action-menu", "calcite-block", "calcite-handle", "calcite-icon", "calcite-loader", "calcite-pick-list", "calcite-pick-list-item", "calcite-popover", "calcite-scrim", "calcite-tooltip"];
+  const components = ["map-card", "calcite-action", "calcite-action-bar", "calcite-action-group", "calcite-action-menu", "calcite-button", "calcite-filter", "calcite-icon", "calcite-input", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-tooltip", "map-tools"];
   components.forEach(tagName => { switch (tagName) {
     case "map-card":
       if (!customElements.get(tagName)) {
@@ -274,35 +232,50 @@ function defineCustomElement() {
       break;
     case "calcite-action":
       if (!customElements.get(tagName)) {
-        defineCustomElement$d();
+        defineCustomElement$g();
       }
       break;
     case "calcite-action-bar":
       if (!customElements.get(tagName)) {
-        defineCustomElement$c();
+        defineCustomElement$f();
       }
       break;
     case "calcite-action-group":
       if (!customElements.get(tagName)) {
-        defineCustomElement$b();
+        defineCustomElement$e();
       }
       break;
     case "calcite-action-menu":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
+      }
+      break;
+    case "calcite-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "calcite-filter":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "calcite-icon":
       if (!customElements.get(tagName)) {
         defineCustomElement$a();
       }
       break;
-    case "calcite-block":
+    case "calcite-input":
       if (!customElements.get(tagName)) {
         defineCustomElement$9();
       }
       break;
-    case "calcite-handle":
+    case "calcite-list":
       if (!customElements.get(tagName)) {
         defineCustomElement$8();
       }
       break;
-    case "calcite-icon":
+    case "calcite-list-item":
       if (!customElements.get(tagName)) {
         defineCustomElement$7();
       }
@@ -312,27 +285,27 @@ function defineCustomElement() {
         defineCustomElement$6();
       }
       break;
-    case "calcite-pick-list":
+    case "calcite-popover":
       if (!customElements.get(tagName)) {
         defineCustomElement$5();
       }
       break;
-    case "calcite-pick-list-item":
+    case "calcite-progress":
       if (!customElements.get(tagName)) {
         defineCustomElement$4();
       }
       break;
-    case "calcite-popover":
+    case "calcite-scrim":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }
       break;
-    case "calcite-scrim":
+    case "calcite-tooltip":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }
       break;
-    case "calcite-tooltip":
+    case "map-tools":
       if (!customElements.get(tagName)) {
         defineCustomElement$1();
       }

package/dist/components/map-draw-tools2.js

@@ -4,7 +4,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { e as EDrawMode } from './interfaces.js';
+import { d as EDrawMode } from './interfaces.js';
 import { l as loadModules } from './loadModules.js';
 import { s as state } from './publicNotificationStore.js';
 import { g as getLocaleComponentStrings } from './locale.js';