@esri/solutions-components 0.8.12 → 0.8.13

package/dist/components/combobox.js

@@ -4,8 +4,9 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
+import { d as calciteSize48 } from './core.js';
 import { f as filter } from './filter.js';
-import { z as getElementWidth, A as getTextWidth, i as isPrimaryPointerButton, t as toAriaBoolean } from './dom.js';
+import { B as getElementWidth, C as getTextWidth, t as toAriaBoolean } from './dom.js';
 import { b as defaultMenuPlacement, f as filterComputedPlacements, c as connectFloatingUI, r as reposition, a as disconnectFloatingUI, F as FloatingCSS } from './floating-ui.js';
 import { s as submitForm, c as connectForm, a as afterConnectDefaultValueSet, d as disconnectForm, H as HiddenFormInputSlot } from './form.js';
 import { g as guid } from './guid.js';
@@ -16,9 +17,9 @@ import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { c as createObserver } from './observers.js';
 import { o as onToggleOpenCloseComponent } from './openCloseComponent.js';
 import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n.js';
-import { i as isSingleLike, h as hasActiveChildren, C as CSS$1, a as ComboboxChildSelector, g as getItemAncestors, b as getItemChildren, c as ComboboxItem, d as ComboboxItemGroup } from './utils2.js';
 import { g as getIconScale } from './component.js';
 import { V as Validation } from './Validation.js';
+import { i as isSingleLike, h as hasActiveChildren, C as CSS$1, a as ComboboxChildSelector, g as getItemAncestors, b as getItemChildren, c as ComboboxItem, d as ComboboxItemGroup } from './utils2.js';
 import { d as defineCustomElement$3 } from './chip.js';
 import { d as defineCustomElement$2 } from './combobox-item.js';
 import { d as defineCustomElement$1 } from './icon.js';
@@ -27,7 +28,7 @@ import { d as debounce } from './debounce.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.4.0
+ * v2.8.2
  */
 const CSS = {
     button: "x-button",
@@ -38,13 +39,8 @@ function XButton({ disabled, key, label, onClick, ref, scale, }) {
         ref: ref }, h("calcite-icon", { icon: "x", scale: getIconScale(scale) })));
 }
 
-/**
- * Do not edit directly
- * Generated on Wed, 17 Jan 2024 17:52:08 GMT
- */
-const calciteSize48 = "48px";
-
-const comboboxCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]) .x-button{inline-size:1rem;block-size:1rem}:host([scale=m]) .x-button{inline-size:1.5rem;block-size:1.5rem}:host([scale=l]) .x-button{inline-size:2rem;block-size:2rem}.x-button{margin:0px;display:flex;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;align-content:center;align-items:center;justify-content:center;align-self:center;border-width:2px;background-color:transparent;color:var(--calcite-color-text-3);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-radius:50%;border-color:transparent;background-color:var(--calcite-color-foreground-2)}.x-button:active,.x-button:hover{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-3)}.x-button:active{border-style:solid;border-color:var(--calcite-color-brand)}.x-button calcite-icon{color:inherit}:host([scale=s]){font-size:var(--calcite-font-size--2);--calcite-combobox-item-spacing-unit-l:0.5rem;--calcite-combobox-item-spacing-unit-s:0.25rem;--calcite-combobox-input-height:1rem;--calcite-internal-combobox-input-margin-block:calc(0.25rem - 1px)}:host([scale=s]) .x-button{margin-inline:0.5rem}:host([scale=m]){font-size:var(--calcite-font-size--1);--calcite-combobox-item-spacing-unit-l:0.75rem;--calcite-combobox-item-spacing-unit-s:0.5rem;--calcite-combobox-input-height:1rem;--calcite-internal-combobox-input-margin-block:calc(0.5rem - 1px)}:host([scale=m]) .x-button{margin-inline-end:0.75rem}:host([scale=l]){font-size:var(--calcite-font-size-0);--calcite-combobox-item-spacing-unit-l:1rem;--calcite-combobox-item-spacing-unit-s:0.75rem;--calcite-combobox-input-height:1.5rem;--calcite-internal-combobox-input-margin-block:calc(0.625rem - 1px)}:host([scale=l]) .x-button{margin-inline-end:1rem}.wrapper{display:flex;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-1);outline-color:transparent;padding-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);padding-inline:var(--calcite-combobox-item-spacing-unit-l)}:host(:focus-within) .wrapper,.wrapper--active{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host([status=invalid]) .wrapper{border-color:var(--calcite-color-status-danger)}:host([status=invalid]:focus-within) .wrapper{outline:2px solid var(--calcite-color-status-danger);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.wrapper--single{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l);cursor:pointer;flex-wrap:nowrap}.grid-input{position:relative;display:flex;flex-grow:1;flex-wrap:wrap;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0px;gap:var(--calcite-combobox-item-spacing-unit-s)}.grid-input.selection-display-fit,.grid-input.selection-display-single{flex-wrap:nowrap;overflow:hidden}.input{flex-grow:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;border-style:none;background-color:transparent;padding:0px;font-family:inherit;color:var(--calcite-color-text-1);font-size:inherit;block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height);inline-size:100%;margin-block-end:var(--calcite-combobox-item-spacing-unit-s);min-inline-size:4.8125rem}.input:focus{outline:2px solid transparent;outline-offset:2px}.input:-moz-placeholder-shown{text-overflow:ellipsis}.input:placeholder-shown{text-overflow:ellipsis}.input--transparent{opacity:0}.input--single{padding:0px;margin-block:var(--calcite-internal-combobox-input-margin-block)}.wrapper--active .input-single{cursor:text}.input--hidden{pointer-events:none;inline-size:0px;min-inline-size:0px;opacity:0}.input--icon{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-s)}:host([scale=m]) .input--icon,:host([scale=l]) .input--icon{padding-inline:0.25rem}.input-wrap{display:flex;flex-grow:1;align-items:center}.input-wrap--single{flex:1 1 0%;overflow:hidden}.label{pointer-events:none;display:flex;max-inline-size:100%;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0px;font-weight:var(--calcite-font-weight-normal);block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height)}.label--icon{padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.icon-end,.icon-start{display:flex;cursor:pointer;align-items:center}.icon-end{flex:none}.floating-ui-container{--calcite-floating-ui-z-index:var(--calcite-z-index-dropdown);display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index);visibility:hidden}.floating-ui-container .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-z-index);border-radius:0.25rem}.floating-ui-container[data-placement^=bottom] .calcite-floating-ui-anim{transform:translateY(-5px)}.floating-ui-container[data-placement^=top] .calcite-floating-ui-anim{transform:translateY(5px)}.floating-ui-container[data-placement^=left] .calcite-floating-ui-anim{transform:translateX(5px)}.floating-ui-container[data-placement^=right] .calcite-floating-ui-anim{transform:translateX(-5px)}.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;transform:translate(0)}.floating-ui-container--active{visibility:visible}@media (forced-colors: active){.wrapper,.floating-ui-container--active{border:1px solid canvasText}}.screen-readers-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.list-container{max-block-size:45vh;overflow-y:auto;background-color:var(--calcite-color-foreground-1);inline-size:var(--calcite-dropdown-width)}.list{margin:0px;display:block;padding:0px}.list--hide{block-size:0px;overflow:hidden}calcite-chip{--calcite-animation-timing:0}.chip{margin-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);max-inline-size:100%}.chip--active{background-color:var(--calcite-color-foreground-3)}.chip--invisible{visibility:hidden;position:absolute}.item{display:block}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:0.5rem}:host([scale=s]) .validation-container{padding-block-start:0.25rem}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}::slotted(calcite-combobox-item-group:not(:first-child)){padding-block-start:var(--calcite-combobox-item-spacing-unit-l)}";
+const comboboxCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]) .x-button{inline-size:1rem;block-size:1rem}:host([scale=m]) .x-button{inline-size:1.5rem;block-size:1.5rem}:host([scale=l]) .x-button{inline-size:2rem;block-size:2rem}.x-button{margin:0px;display:flex;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;align-content:center;align-items:center;justify-content:center;align-self:center;border-width:2px;background-color:transparent;color:var(--calcite-color-text-3);outline-color:transparent;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-radius:50%;border-color:transparent;background-color:var(--calcite-color-foreground-2)}.x-button:active,.x-button:hover{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-3)}.x-button:active{border-style:solid;border-color:var(--calcite-color-brand)}.x-button calcite-icon{color:inherit}:host([scale=s]){font-size:var(--calcite-font-size--2);--calcite-combobox-item-spacing-unit-l:0.5rem;--calcite-combobox-item-spacing-unit-s:0.25rem;--calcite-combobox-input-height:1rem;--calcite-internal-combobox-input-margin-block:calc(0.25rem - 1px)}:host([scale=s]) .x-button{margin-inline:0.5rem}:host([scale=m]){font-size:var(--calcite-font-size--1);--calcite-combobox-item-spacing-unit-l:0.75rem;--calcite-combobox-item-spacing-unit-s:0.5rem;--calcite-combobox-input-height:1rem;--calcite-internal-combobox-input-margin-block:calc(0.5rem - 1px)}:host([scale=m]) .x-button{margin-inline-end:0.75rem}:host([scale=l]){font-size:var(--calcite-font-size-0);--calcite-combobox-item-spacing-unit-l:1rem;--calcite-combobox-item-spacing-unit-s:0.75rem;--calcite-combobox-input-height:1.5rem;--calcite-internal-combobox-input-margin-block:calc(0.625rem - 1px)}:host([scale=l]) .x-button{margin-inline-end:1rem}.wrapper{display:flex;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-1);outline-color:transparent;padding-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.wrapper:hover .icon{color:var(--calcite-color-text-1)}:host(:focus-within) .wrapper,.wrapper--active{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host([read-only]) .wrapper{background-color:var(--calcite-color-background)}:host([read-only]) .label{font-weight:var(--calcite-font-weight-medium)}:host([status=invalid]) .wrapper{border-color:var(--calcite-color-status-danger)}:host([status=invalid]:focus-within) .wrapper{outline:2px solid var(--calcite-color-status-danger);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.wrapper--single{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l);cursor:pointer;flex-wrap:nowrap}.grid-input{position:relative;display:flex;flex-grow:1;flex-wrap:wrap;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0px;gap:var(--calcite-combobox-item-spacing-unit-s);margin-inline-end:var(--calcite-combobox-item-spacing-unit-s)}.grid-input.selection-display-fit,.grid-input.selection-display-single{flex-wrap:nowrap;overflow:hidden}.input{flex-grow:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;overflow:hidden;text-overflow:ellipsis;border-style:none;background-color:transparent;padding:0px;font-family:inherit;color:var(--calcite-color-text-1);font-size:inherit;block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height);inline-size:100%;margin-block-end:var(--calcite-combobox-item-spacing-unit-s);min-inline-size:4.8125rem}.input:focus{outline:2px solid transparent;outline-offset:2px}.input:-moz-placeholder-shown{text-overflow:ellipsis}.input:placeholder-shown{text-overflow:ellipsis}.input--transparent{opacity:0}.input--single{padding:0px;margin-block:var(--calcite-internal-combobox-input-margin-block)}.wrapper--active .input-single{cursor:text}.input--hidden{pointer-events:none;inline-size:0px;min-inline-size:0px;opacity:0}.input--icon{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.input-wrap{display:flex;flex-grow:1;align-items:center}.input-wrap--single{flex:1 1 0%;overflow:hidden}.label{pointer-events:none;max-inline-size:100%;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0px;font-weight:var(--calcite-font-weight-normal);block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height)}.label--icon{padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.icon-end,.icon-start{display:flex;cursor:pointer;align-items:center}.icon-end{flex:none}.icon-end .icon{color:var(--calcite-color-text-3)}.floating-ui-container{--calcite-floating-ui-z-index:var(--calcite-z-index-dropdown);display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index);visibility:hidden}.floating-ui-container .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-z-index);border-radius:0.25rem}.floating-ui-container[data-placement^=bottom] .calcite-floating-ui-anim{transform:translateY(-5px)}.floating-ui-container[data-placement^=top] .calcite-floating-ui-anim{transform:translateY(5px)}.floating-ui-container[data-placement^=left] .calcite-floating-ui-anim{transform:translateX(5px)}.floating-ui-container[data-placement^=right] .calcite-floating-ui-anim{transform:translateX(-5px)}.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;transform:translate(0)}.floating-ui-container--active{visibility:visible}@media (forced-colors: active){.wrapper,.floating-ui-container--active{border:1px solid canvasText}}.screen-readers-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.list-container{max-block-size:45vh;overflow-y:auto;background-color:var(--calcite-color-foreground-1);inline-size:var(--calcite-dropdown-width)}.list{margin:0px;display:block;padding:0px}.list--hide{block-size:0px;overflow:hidden}calcite-chip{--calcite-animation-timing:0}.chip{margin-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);max-inline-size:100%}.chip--active{background-color:var(--calcite-color-foreground-3)}.chip--invisible{visibility:hidden;position:absolute}.item{display:block}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:0.5rem}:host([scale=s]) .validation-container{padding-block-start:0.25rem}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}::slotted(calcite-combobox-item-group:not(:first-child)){padding-block-start:var(--calcite-combobox-item-spacing-unit-l)}";
+const CalciteComboboxStyle0 = comboboxCss;
 
 const isGroup = (el) => el.tagName === ComboboxItemGroup;
 const itemUidPrefix = "combobox-item-";
@@ -90,6 +86,9 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
             this.setFocus();
         };
         this.keyDownHandler = (event) => {
+            if (this.readOnly) {
+                return;
+            }
             const { key } = event;
             switch (key) {
                 case "Tab":
@@ -140,7 +139,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
                     }
                     break;
                 case " ":
-                    if (!this.textInput.value) {
+                    if (!this.textInput.value && !event.defaultPrevented) {
                         if (!this.open) {
                             this.open = true;
                             this.shiftActiveItemIndex(1);
@@ -178,7 +177,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
                     event.preventDefault();
                     break;
                 case "Enter":
-                    if (this.activeItemIndex > -1) {
+                    if (this.open && this.activeItemIndex > -1) {
                         this.toggleSelection(this.filteredItems[this.activeItemIndex]);
                         event.preventDefault();
                     }
@@ -242,6 +241,9 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
             this.calciteComboboxChipClose.emit();
         };
         this.clickHandler = (event) => {
+            if (this.readOnly) {
+                return;
+            }
             const composedPath = event.composedPath();
             if (composedPath.some((node) => node.tagName === "CALCITE-CHIP")) {
                 this.open = false;
@@ -420,6 +422,19 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
         this.maxItems = 0;
         this.validationMessage = undefined;
         this.validationIcon = undefined;
+        this.validity = {
+            valid: false,
+            badInput: false,
+            customError: false,
+            patternMismatch: false,
+            rangeOverflow: false,
+            rangeUnderflow: false,
+            stepMismatch: false,
+            tooLong: false,
+            tooShort: false,
+            typeMismatch: false,
+            valueMissing: false,
+        };
         this.name = undefined;
         this.allowCustomValues = undefined;
         this.overlayPositioning = "absolute";
@@ -433,6 +448,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
         this.messageOverrides = undefined;
         this.selectedItems = [];
         this.filteredItems = [];
+        this.readOnly = false;
         this.items = [];
         this.groupItems = [];
         this.needsIcon = undefined;
@@ -501,7 +517,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
     //
     //--------------------------------------------------------------------------
     documentClickHandler(event) {
-        if (this.disabled || !isPrimaryPointerButton(event)) {
+        if (this.disabled) {
             return;
         }
         const composedPath = event.composedPath();
@@ -575,7 +591,6 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
         (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
         this.updateItems();
         this.setFilteredPlacements();
-        this.reposition(true);
         if (this.open) {
             this.openHandler();
             onToggleOpenCloseComponent(this);
@@ -589,7 +604,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
     }
     componentDidLoad() {
         afterConnectDefaultValueSet(this, this.getValue());
-        this.reposition(true);
+        connectFloatingUI(this, this.referenceEl, this.floatingEl);
         setComponentLoaded(this);
     }
     componentDidRender() {
@@ -919,7 +934,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
     //
     //--------------------------------------------------------------------------
     renderChips() {
-        const { activeChipIndex, scale, selectionMode, messages } = this;
+        const { activeChipIndex, readOnly, scale, selectionMode, messages } = this;
         return this.selectedItems.map((item, i) => {
             const chipClasses = {
                 chip: true,
@@ -928,7 +943,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
             const ancestors = [...getItemAncestors(item)].reverse();
             const pathLabel = [...ancestors, item].map((el) => el.textLabel);
             const label = selectionMode !== "ancestors" ? item.textLabel : pathLabel.join(" / ");
-            return (h("calcite-chip", { class: chipClasses, closable: true, icon: item.icon, iconFlipRtl: item.iconFlipRtl, id: item.guid ? `${chipUidPrefix}${item.guid}` : null, key: item.textLabel, messageOverrides: { dismissLabel: messages.removeTag }, onCalciteChipClose: () => this.calciteChipCloseHandler(item), scale: scale, selected: item.selected, title: label, value: item.value }, label));
+            return (h("calcite-chip", { appearance: readOnly ? "outline" : "solid", class: chipClasses, closable: !readOnly, icon: item.icon, iconFlipRtl: item.iconFlipRtl, id: item.guid ? `${chipUidPrefix}${item.guid}` : null, key: item.textLabel, messageOverrides: { dismissLabel: messages.removeTag }, onCalciteChipClose: () => this.calciteChipCloseHandler(item), scale: scale, selected: item.selected, title: label, value: item.value }, label));
         });
     }
     renderAllSelectedIndicatorChip() {
@@ -1016,6 +1031,15 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
                 [CSS$1.chipInvisible]: chipInvisible,
             }, scale: scale, title: label, value: "" }, label));
     }
+    get showingInlineIcon() {
+        const { placeholderIcon, selectionMode, selectedItems, open } = this;
+        const selectedItem = selectedItems[0];
+        const selectedIcon = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon;
+        const singleSelectionMode = isSingleLike(selectionMode);
+        return !open && selectedItem
+            ? !!selectedIcon && singleSelectionMode
+            : !!placeholderIcon && (!selectedItem || singleSelectionMode);
+    }
     renderInput() {
         const { guid, disabled, placeholder, selectionMode, selectedItems, open } = this;
         const single = isSingleLike(selectionMode);
@@ -1027,13 +1051,13 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
             } }, showLabel && (h("span", { class: {
                 label: true,
                 "label--icon": !!(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon),
-            }, key: "label" }, selectedItem.textLabel)), h("input", { "aria-activedescendant": this.activeDescendant, "aria-autocomplete": "list", "aria-controls": `${listboxUidPrefix}${guid}`, "aria-label": getLabelText(this), class: {
-                input: true,
+            }, key: "label" }, selectedItem.textLabel)), h("input", { "aria-activedescendant": this.activeDescendant, "aria-autocomplete": "list", "aria-controls": `${listboxUidPrefix}${guid}`, "aria-expanded": toAriaBoolean(open), "aria-haspopup": "listbox", "aria-label": getLabelText(this), "aria-owns": `${listboxUidPrefix}${guid}`, class: {
+                [CSS$1.input]: true,
                 "input--single": true,
                 "input--transparent": this.activeChipIndex > -1,
                 "input--hidden": showLabel,
-                "input--icon": !!this.placeholderIcon,
-            }, disabled: disabled, id: `${inputUidPrefix}${guid}`, key: "input", onFocus: this.comboboxFocusHandler, onInput: this.inputHandler, placeholder: placeholder, type: "text",
+                "input--icon": this.showingInlineIcon && !!this.placeholderIcon,
+            }, disabled: disabled, id: `${inputUidPrefix}${guid}`, key: "input", onFocus: this.comboboxFocusHandler, onInput: this.inputHandler, placeholder: placeholder, readOnly: this.readOnly, role: "combobox", type: "text",
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
             ref: (el) => (this.textInput = el) })));
     }
@@ -1056,45 +1080,43 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
             ref: setContainerEl }, h("ul", { class: { list: true, "list--hide": !open } }, h("slot", null)))));
     }
-    renderIconStart() {
-        const { selectedItems, placeholderIcon, selectionMode, placeholderIconFlipRtl } = this;
+    renderSelectedOrPlaceholderIcon() {
+        const { selectedItems, placeholderIcon, placeholderIconFlipRtl } = this;
         const selectedItem = selectedItems[0];
         const selectedIcon = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon;
-        const singleSelectionMode = isSingleLike(selectionMode);
-        const iconAtStart = !this.open && selectedItem
-            ? !!selectedIcon && singleSelectionMode
-            : !!this.placeholderIcon && (!selectedItem || singleSelectionMode);
-        return (iconAtStart && (h("span", { class: "icon-start" }, h("calcite-icon", { class: "selected-icon", flipRtl: this.open && selectedItem ? selectedItem.iconFlipRtl : placeholderIconFlipRtl, icon: !this.open && selectedItem ? selectedIcon : placeholderIcon, scale: getIconScale(this.scale) }))));
+        return (this.showingInlineIcon && (h("span", { class: "icon-start", key: "selected-placeholder-icon" }, h("calcite-icon", { class: "selected-icon", flipRtl: this.open && selectedItem ? selectedItem.iconFlipRtl : placeholderIconFlipRtl, icon: !this.open && selectedItem ? selectedIcon : placeholderIcon, scale: getIconScale(this.scale) }))));
     }
-    renderIconEnd() {
+    renderChevronIcon() {
         const { open } = this;
-        return (h("span", { class: "icon-end" }, h("calcite-icon", { icon: open ? "chevron-up" : "chevron-down", scale: getIconScale(this.scale) })));
+        return (h("span", { class: "icon-end", key: "chevron" }, h("calcite-icon", { class: CSS$1.icon, icon: open ? "chevron-up" : "chevron-down", scale: getIconScale(this.scale) })));
     }
     render() {
         var _a;
-        const { selectionDisplay, guid, label, open } = this;
+        const { selectionDisplay, guid, label, open, readOnly } = this;
         const singleSelectionMode = isSingleLike(this.selectionMode);
         const allSelectionDisplay = selectionDisplay === "all";
         const singleSelectionDisplay = selectionDisplay === "single";
         const fitSelectionDisplay = !singleSelectionMode && selectionDisplay === "fit";
         const isClearable = !this.clearDisabled && ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) > 0;
-        return (h(Host, { onClick: this.comboboxFocusHandler }, h(InteractiveContainer, { disabled: this.disabled }, h("div", { "aria-autocomplete": "list", "aria-controls": `${listboxUidPrefix}${guid}`, "aria-expanded": toAriaBoolean(open), "aria-haspopup": "listbox", "aria-label": getLabelText(this), "aria-live": "polite", "aria-owns": `${listboxUidPrefix}${guid}`, class: {
+        return (h(Host, { key: 'd7bb6fbd99d46d6baacd027bf67d440156aa8235', onClick: this.comboboxFocusHandler }, h(InteractiveContainer, { key: 'f0e960f155ffed736782818874432e49aec7da43', disabled: this.disabled }, h("div", { key: '5b69d59411f589c99d1087ffc9d2f34a02ce4abf', "aria-live": "polite", class: {
                 wrapper: true,
                 "wrapper--single": singleSelectionMode || !this.selectedItems.length,
                 "wrapper--active": open,
-            }, onClick: this.clickHandler, onKeyDown: this.keyDownHandler, role: "combobox",
+            }, onClick: this.clickHandler, onKeyDown: this.keyDownHandler,
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: this.setReferenceEl }, h("div", { class: {
+            ref: this.setReferenceEl }, this.renderSelectedOrPlaceholderIcon(), h("div", { class: {
                 "grid-input": true,
                 [CSS$1.selectionDisplayFit]: fitSelectionDisplay,
                 [CSS$1.selectionDisplaySingle]: singleSelectionDisplay,
-            }, ref: this.setChipContainerEl }, this.renderIconStart(), !singleSelectionMode && !singleSelectionDisplay && this.renderChips(), !singleSelectionMode &&
+            }, key: "grid",
+            // eslint-disable-next-line react/jsx-sort-props -- auto-generated by @esri/calcite-components/enforce-ref-last-prop
+            ref: this.setChipContainerEl }, !singleSelectionMode && !singleSelectionDisplay && this.renderChips(), !singleSelectionMode &&
             !allSelectionDisplay && [
             this.renderSelectedIndicatorChip(),
             this.renderSelectedIndicatorChipCompact(),
             this.renderAllSelectedIndicatorChip(),
             this.renderAllSelectedIndicatorChipCompact(),
-        ], h("label", { class: "screen-readers-only", htmlFor: `${inputUidPrefix}${guid}`, id: `${labelUidPrefix}${guid}` }, label), this.renderInput()), isClearable ? (h(XButton, { disabled: this.disabled, key: "close-button", label: this.messages.clear, scale: this.scale })) : null, this.renderIconEnd()), h("ul", { "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-multiselectable": "true", class: "screen-readers-only", id: `${listboxUidPrefix}${guid}`, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()), this.renderFloatingUIContainer(), h(HiddenFormInputSlot, { component: this }), this.validationMessage ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+        ], h("label", { key: '9b9988f68638cbf4b5379e815dd9ed88b5b83430', class: "screen-readers-only", htmlFor: `${inputUidPrefix}${guid}`, id: `${labelUidPrefix}${guid}` }, label), this.renderInput()), !readOnly && isClearable ? (h(XButton, { disabled: this.disabled, key: "close-button", label: this.messages.clear, scale: this.scale })) : null, !readOnly && this.renderChevronIcon()), h("ul", { key: 'e52aae918a2ad75c1f84e6761d4651a59397e5f7', "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-multiselectable": "true", class: "screen-readers-only", id: `${listboxUidPrefix}${guid}`, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()), this.renderFloatingUIContainer(), h(HiddenFormInputSlot, { key: 'feb9c678d698e149bc58b0aed458dee9d6fb8115', component: this }), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }
@@ -1112,7 +1134,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
         "text": ["textHandler"],
         "effectiveLocale": ["effectiveLocaleChange"]
     }; }
-    static get style() { return comboboxCss; }
+    static get style() { return CalciteComboboxStyle0; }
 }, [1, "calcite-combobox", {
         "clearDisabled": [516, "clear-disabled"],
         "selectionDisplay": [513, "selection-display"],
@@ -1126,6 +1148,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
         "maxItems": [514, "max-items"],
         "validationMessage": [1, "validation-message"],
         "validationIcon": [520, "validation-icon"],
+        "validity": [1040],
         "name": [513],
         "allowCustomValues": [516, "allow-custom-values"],
         "overlayPositioning": [513, "overlay-positioning"],
@@ -1139,6 +1162,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
         "messageOverrides": [1040],
         "selectedItems": [1040],
         "filteredItems": [1040],
+        "readOnly": [516, "read-only"],
         "items": [32],
         "groupItems": [32],
         "needsIcon": [32],
@@ -1153,7 +1177,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
         "defaultMessages": [32],
         "reposition": [64],
         "setFocus": [64]
-    }, [[5, "pointerdown", "documentClickHandler"], [0, "calciteComboboxItemChange", "calciteComboboxItemChangeHandler"]], {
+    }, [[4, "click", "documentClickHandler"], [0, "calciteComboboxItemChange", "calciteComboboxItemChangeHandler"]], {
         "open": ["openHandler"],
         "disabled": ["handleDisabledChange"],
         "maxItems": ["maxItemsHandler"],

package/dist/components/component.js

@@ -6,7 +6,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.4.0
+ * v2.8.2
  */
 function getIconScale(componentScale) {
     return componentScale === "l" ? "m" : "s";

package/dist/components/conditionalSlot.js

@@ -9,9 +9,8 @@ import { c as createObserver } from './observers.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.4.0
+ * v2.8.2
  */
-const observed = new Set();
 let mutationObserver;
 const observerOptions = { childList: true };
 /**
@@ -41,15 +40,7 @@ function connectConditionalSlotComponent(component) {
  * ```
  */
 function disconnectConditionalSlotComponent(component) {
-    observed.delete(component.el);
-    // we explicitly process queued mutations and disconnect and reconnect
-    // the observer until MutationObserver gets an `unobserve` method
-    // see https://github.com/whatwg/dom/issues/126
-    processMutations(mutationObserver.takeRecords());
-    mutationObserver.disconnect();
-    for (const [element] of observed.entries()) {
-        mutationObserver.observe(element, observerOptions);
-    }
+    mutationObserver.unobserve(component.el);
 }
 function processMutations(mutations) {
     mutations.forEach(({ target }) => {

package/dist/components/consent-manager.js

@@ -5,7 +5,7 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getLocaleComponentStrings } from './locale.js';
-import { g as getAugmentedNamespace, c as createCommonjsModule, a as commonjsGlobal, b as commonjsRequire } from './_commonjsHelpers.js';
+import { c as commonjsRequire, a as commonjsGlobal } from './esri-loader.js';
 import { d as defineCustomElement$a } from './action.js';
 import { d as defineCustomElement$9 } from './action-menu.js';
 import { d as defineCustomElement$8 } from './button.js';
@@ -16,16 +16,11 @@ import { d as defineCustomElement$4 } from './panel.js';
 import { d as defineCustomElement$3 } from './popover.js';
 import { d as defineCustomElement$2 } from './scrim.js';
 
-const _nodeResolve_empty = {};
+var sha256$1 = {exports: {}};
 
-const _nodeResolve_empty$1 = /*#__PURE__*/Object.freeze({
-	__proto__: null,
-	'default': _nodeResolve_empty
-});
+var core = {exports: {}};
 
-const require$$0 = /*@__PURE__*/getAugmentedNamespace(_nodeResolve_empty$1);
-
-var core = createCommonjsModule(function (module, exports) {
+(function (module, exports) {
 (function (root, factory) {
 	{
 		// CommonJS
@@ -70,7 +65,7 @@ var core = createCommonjsModule(function (module, exports) {
 	    // Native crypto import via require (NodeJS)
 	    if (!crypto && typeof commonjsRequire === 'function') {
 	        try {
-	            crypto = require$$0;
+	            crypto = require('crypto');
 	        } catch (err) {}
 	    }
 
@@ -825,13 +820,13 @@ var core = createCommonjsModule(function (module, exports) {
 	return CryptoJS;
 
 }));
-});
+}(core));
 
-var sha256 = createCommonjsModule(function (module, exports) {
+(function (module, exports) {
 (function (root, factory) {
 	{
 		// CommonJS
-		module.exports = factory(core);
+		module.exports = factory(core.exports);
 	}
 }(commonjsGlobal, function (CryptoJS) {
 
@@ -1019,20 +1014,26 @@ var sha256 = createCommonjsModule(function (module, exports) {
 	return CryptoJS.SHA256;
 
 }));
-});
+}(sha256$1));
+
+const sha256 = sha256$1.exports;
 
-var encHex = createCommonjsModule(function (module, exports) {
+var encHex = {exports: {}};
+
+(function (module, exports) {
 (function (root, factory) {
 	{
 		// CommonJS
-		module.exports = factory(core);
+		module.exports = factory(core.exports);
 	}
 }(commonjsGlobal, function (CryptoJS) {
 
 	return CryptoJS.enc.Hex;
 
 }));
-});
+}(encHex));
+
+const hex = encHex.exports;
 
 function shouldDisableTracking(options = {}) {
     const { disabled, portal } = options;
@@ -1427,7 +1428,7 @@ class Telemetry {
 function anonymize(user) {
     if (!user)
         return;
-    return sha256(user).toString(encHex);
+    return sha256(user).toString(hex);
 }
 function makeEventPayload(omitComplexData, logger) {
     return function (acc, [key, val]) {
@@ -1635,6 +1636,7 @@ class GoogleAnalytics {
 }
 
 const consentManagerCss = ":host{display:block}.consent-panel{position:fixed;display:block;z-index:5000;bottom:0;left:0;width:100%;height:auto;text-align:center}.cookie-consent-popup-container{position:relative;display:block;bottom:0;left:0;width:100%;margin:0;padding-top:1rem;padding-bottom:1rem;transition:transform 0.5s ease-out 0s;background-color:rgba(51, 51, 51, 0.95);color:#fff}.button-container{position:static;margin-bottom:1rem;display:flex;justify-content:center;flex-wrap:wrap}.padding-end-1{padding-inline-end:1rem}.link-text{--calcite-ui-text-link:var(--calcite-color-text-inverse);--calcite-ui-brand:var(--calcite-color-text-inverse);--calcite-color-text-link:var(--calcite-color-text-inverse);--calcite-color-brand-underline:var(--calcite-color-text-inverse);--calcite-color-brand:var(--calcite-color-text-inverse)}";
+const ConsentManagerStyle0 = consentManagerCss;
 
 const ConsentManager$1 = /*@__PURE__*/ proxyCustomElement(class ConsentManager extends HTMLElement {
     constructor() {
@@ -1779,7 +1781,7 @@ const ConsentManager$1 = /*@__PURE__*/ proxyCustomElement(class ConsentManager e
         this._translations = messages[0];
     }
     get el() { return this; }
-    static get style() { return consentManagerCss; }
+    static get style() { return ConsentManagerStyle0; }
 }, [1, "consent-manager", {
         "firstUseVar": [1, "first-use-var"],
         "measurementIds": [16],

package/dist/components/core.js

@@ -0,0 +1,15 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+/**
+ * Do not edit directly
+ * Generated on Wed, 17 Jan 2024 17:52:08 GMT
+ */
+const calciteSize24 = "24px";
+const calciteSize32 = "32px";
+const calciteSize44 = "44px";
+const calciteSize48 = "48px";
+
+export { calciteSize32 as a, calciteSize44 as b, calciteSize24 as c, calciteSize48 as d };

package/dist/components/create-feature2.js

@@ -8,6 +8,7 @@ import { l as loadModules } from './loadModules.js';
 import { a as getAllLayers, g as getLayerOrTable } from './mapViewUtils.js';
 
 const createFeatureCss = ":host{display:block}.esri-editor__panel-toolbar{display:none !important}.esri-editor__update-actions{display:none !important}.esri-editor__panel-content{padding-block:0px !important}.esri-editor .esri-item-list__group__header{display:none !important}.esri-editor__panel-content__section .esri-widget__heading{display:none !important}.esri-editor .esri-item-list__filter-container--sticky{padding-block:0px !important;padding-inline:10px !important}.search-widget{width:92% !important;margin:5px 0 20px 14px}.display-none{display:none !important}";
+const CreateFeatureStyle0 = createFeatureCss;
 
 const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature extends HTMLElement {
     constructor() {
@@ -83,7 +84,7 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
      */
     render() {
         const showSearchWidget = this.showSearchWidget ? '' : 'display-none';
-        return (h(Fragment, null, h("div", { id: "feature-form" }), h("div", { class: `search-widget ${showSearchWidget}`, id: "search-widget-ref" })));
+        return (h(Fragment, { key: '66e42055c22a93c6d34440b65ac950a388639b9a' }, h("div", { key: 'fc4bf1fc039e4d914e416a394f0671712d116482', id: "feature-form" }), h("div", { key: 'aadd529366b2b85e60fdffc306cf41f37c2a6709', class: `search-widget ${showSearchWidget}`, id: "search-widget-ref" })));
     }
     //--------------------------------------------------------------------------
     //
@@ -130,8 +131,8 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
             layerInfos.push({
                 layer: eachLayer,
                 enabled: (eachLayer === null || eachLayer === void 0 ? void 0 : eachLayer.type) === "feature" && (eachLayer === null || eachLayer === void 0 ? void 0 : eachLayer.id) === this.selectedLayerId,
-                addEnabled: true,
-                updateEnabled: false,
+                addEnabled: true, // default is true, set to false to disable the ability to add a new feature
+                updateEnabled: false, // default is true, set to false to disable the ability to edit an existing feature
                 deleteEnabled: false // default is true, set to false to disable the ability to delete features
             });
         });
@@ -356,7 +357,7 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
     static get watchers() { return {
         "mapView": ["mapViewWatchHandler"]
     }; }
-    static get style() { return createFeatureCss; }
+    static get style() { return CreateFeatureStyle0; }
 }, [0, "create-feature", {
         "mapView": [16],
         "selectedLayerId": [1, "selected-layer-id"],

package/dist/components/crowdsource-manager.js

@@ -66,6 +66,7 @@ import { d as defineCustomElement$3 } from './map-search2.js';
 import { d as defineCustomElement$2 } from './map-tools2.js';
 
 const crowdsourceManagerCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-color-foreground-1)}.padding-1-2{padding:0.5rem}.display-flex{display:flex}.width-full{width:100%}.width-1-2{position:relative;width:50%}.width-1-3{position:relative;width:33.33%}.width-2-3{position:relative;width:66.66%}.width-0{width:0}.height-full{height:100%}.height-1-2{position:relative;height:50%}.height-0{height:0}.toggle-node{width:51px;height:51px}.overflow-hidden{overflow:hidden}.flex-column{flex-direction:column}.border{border:1px solid var(--calcite-color-border-3)}.border-bottom{border-bottom:1px solid var(--calcite-color-border-3)}.border-sides{border-left:1px solid var(--calcite-color-border-3);border-right:1px solid var(--calcite-color-border-3)}.position-relative{position:relative}.height-50{height:50%}.adjusted-height-50{height:calc(50% - 25px)}.adjusted-height-100{height:calc(100% - 50px)}.adjusted-height-100-50{height:calc(100% - 50px)}.display-none{display:none}.height-53{height:53px}.position-absolute-53{position:absolute;top:53px}.display-grid{display:grid}.height-50-px{height:50px}.padding-inline-start-75{padding-inline-start:0.75rem}.align-items-center{align-items:center}.esri-floor-filter__close-levels-button{width:40px !important;height:40px !important}.esri-floor-filter__level-button{width:40px !important;height:40px !important}.esri-floor-filter__browse-button{width:40px !important;height:40px !important}.position-absolute-50{position:absolute;top:50px;bottom:0px;left:0px;right:0px}.position-absolute-0{position:absolute;top:0px;bottom:0px;left:0px;right:0px}.visibility-hidden{visibility:hidden;height:0px}.position-fixed{position:fixed}.border-width-0{border-width:0px}.border-bottom-width-0{border-bottom-width:0px}.floating-container{position:fixed;width:100px;height:10px;bottom:0;right:0;margin:100px 0px}.floating-container .floating-button{box-shadow:0 10px 25px rgb(92 93 94 / 60%);transform:translatey(5px);transition:all 0.3s}";
+const CrowdsourceManagerStyle0 = crowdsourceManagerCss;
 
 const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceManager extends HTMLElement {
     constructor() {
@@ -234,7 +235,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
      * Renders the component.
      */
     render() {
-        return (h(Host, null, h("calcite-shell", { class: "position-relative" }, h("calcite-panel", { class: `width-full height-full border-width-0` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
+        return (h(Host, { key: '528818cf99038897353a4390ccf60ed85b676f2e' }, h("calcite-shell", { key: '0389bc8f242c64983629840301b9da5cdb442673', class: "position-relative" }, h("calcite-panel", { key: 'bd0f33a38c6cc3cbd15e3adcbc76929682f6428e', class: `width-full height-full border-width-0` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
     }
     /**
      * Called after each render
@@ -407,9 +408,9 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         const headerTheme = this.popupHeaderColor ? "" : !this._isMobile ? "calcite-mode-dark" : "calcite-mode-light";
         const containerClass = this._isMobile && this._hideTable ? "position-absolute-0 width-full height-full" : this._isMobile ? "display-none height-0" : "";
         return (h("div", { class: `${headerTheme} ${popupNodeClass} ${containerClass}`, style: {
-                '--calcite-color-foreground-1': this.popupHeaderColor,
-                '--calcite-color-foreground-2': this.popupHeaderHoverColor,
-                '--calcite-color-text-3': this.popupHeaderHoverTextColor,
+                '--calcite-color-foreground-1': this.popupHeaderColor, /* background color to apply to the popup header */
+                '--calcite-color-foreground-2': this.popupHeaderHoverColor, /* color that will be displayed on hover when expanding the popup header */
+                '--calcite-color-text-3': this.popupHeaderHoverTextColor, /* font color that will be displayed on hover when expanding the popup header */
                 '--calcite-color-text-2': this.popupHeaderTextColor, /* font color to apply to the popup header */
             } }, h("calcite-panel", null, !this._isMobile ? (h("div", { class: `display-flex align-items-center ${headerClass}`, slot: "header-content" }, h("calcite-icon", { icon: "information", scale: "s" }), h("div", { class: "padding-inline-start-75" }, this._translations.information))) : undefined, h("calcite-action", { class: headerClass, disabled: this._tableOnly, icon: icon, id: id, onClick: () => this._togglePopup(), slot: "header-actions-end", text: "" }), !this._tableOnly ? h("calcite-tooltip", { class: themeClass, label: "", placement: "bottom", "reference-element": id }, h("span", null, tooltip)) : undefined, this._getCardNode())));
     }
@@ -557,7 +558,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     static get watchers() { return {
         "enableZoom": ["enableZoomWatchHandler"]
     }; }
-    static get style() { return crowdsourceManagerCss; }
+    static get style() { return CrowdsourceManagerStyle0; }
 }, [0, "crowdsource-manager", {
         "appProxies": [8, "app-proxies"],
         "basemapConfig": [16],

package/dist/components/crowdsource-reporter.js

@@ -55,6 +55,7 @@ import { d as defineCustomElement$3 } from './instant-apps-social-share2.js';
 import { d as defineCustomElement$2 } from './layer-list2.js';
 
 const crowdsourceReporterCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-color-foreground-1)}.width-full{width:100% !important}.width-0{width:0}.height-full{height:100% !important}.height-0{height:0}.overflow-hidden{overflow:hidden}.border{border:1px solid var(--calcite-color-border-3)}.notice-msg{padding:10px;width:calc(100% - 20px)}.progress-bar{padding:12px}.footer-top-button{padding-bottom:7px}.footer-button{height:35px}.feature-pagination{align-items:center;margin:5% 124%;display:flex}.pagination-count{width:32px;color:var(--calcite-color-brand);border-bottom:1px solid var(--calcite-color-brand)}.report-submitted-msg{position:absolute;z-index:1000}";
+const CrowdsourceReporterStyle0 = crowdsourceReporterCss;
 
 const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceReporter extends HTMLElement {
     constructor() {
@@ -163,7 +164,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     render() {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h(Host, null, this._reportSubmitted && h("calcite-alert", { "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, h("div", { slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { slot: "title" }, this._translations.error), h("div", { slot: "message" }, this._featureCreationFailedErrorMsg)), h("div", null, h("calcite-shell", { "content-behind": true }, this._getReporter())), this.filterModal()));
+        return (h(Host, { key: '197ae2c1b96231124830a044c5a3642107987c85' }, this._reportSubmitted && h("calcite-alert", { key: '2cbdbc22994787e0ac1c204d5043c6c0409503e8', "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '88ae73773b51678409fa69e68931714b5fdd951a', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: '4b0fa9ae2e597d4a44fe2624debe20b2bbeed037', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: '108c6a3b06c3f9c52ff15e158d20a39422bb2ad8', slot: "title" }, this._translations.error), h("div", { key: 'c0e54e5665480a5cbe9e4f4b8a05e3c56c20d825', slot: "message" }, this._featureCreationFailedErrorMsg)), h("div", { key: 'c3417032902e0fc8a6fc33909b2f2eb71ba72650' }, h("calcite-shell", { key: 'e5ac5faedf24bd22aa62f0d0f5a4925b2c5e06d4', "content-behind": true }, this._getReporter())), this.filterModal()));
     }
     //--------------------------------------------------------------------------
     //
@@ -779,7 +780,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         "isMobile": ["isMobileWatchHandler"],
         "mapView": ["mapViewWatchHandler"]
     }; }
-    static get style() { return crowdsourceReporterCss; }
+    static get style() { return CrowdsourceReporterStyle0; }
 }, [0, "crowdsource-reporter", {
         "description": [1],
         "isMobile": [4, "is-mobile"],

package/dist/components/cs.js

@@ -124,4 +124,4 @@ var locale = {
 };
 dayjs.locale(locale, null, true);
 
-export default locale;
+export { locale as default };

package/dist/components/da.js

@@ -43,4 +43,4 @@ var locale = {
 };
 dayjs.locale(locale, null, true);
 
-export default locale;
+export { locale as default };