npm - @esri/solutions-components - Versions diffs - 0.6.5 → 0.6.6 - Mend

@esri/solutions-components 0.6.5 → 0.6.6

Files changed (1236) hide show

package/dist/components/combobox.js CHANGED Viewed

@@ -11,10 +11,10 @@ import { s as submitForm, c as connectForm, a as afterConnectDefaultValueSet, d
 import { g as guid } from './guid.js';
 import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive.js';
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label.js';
-import { c as componentLoaded, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
-import { c as connectLocalized, a as disconnectLocalized } from './locale2.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { c as createObserver } from './observers.js';
-import { c as connectOpenCloseComponent, d as disconnectOpenCloseComponent } from './openCloseComponent.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 { C as ComboboxChildSelector, g as getItemAncestors, a as getItemChildren, h as hasActiveChildren, b as ComboboxItem, c as ComboboxItemGroup, d as CSS$1 } from './utils2.js';
 import { d as defineCustomElement$2 } from './chip.js';
@@ -23,19 +23,19 @@ 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.3
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.6.0
  */
 const CSS = {
-  button: "x-button"
+  button: "x-button",
 };
-function XButton({ disabled, key, label, onClick, ref, scale }) {
+function XButton({ disabled, key, label, onClick, ref, scale, }) {
   return (h("button", { "aria-label": label, class: CSS.button, disabled: disabled, key: key, onClick: onClick, tabIndex: -1, type: "button",
     // eslint-disable-next-line react/jsx-sort-props
     ref: ref }, h("calcite-icon", { icon: "x", scale: scale === "l" ? "m" : "s" })));
 }
-const comboboxCss = "@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{position:relative;display:block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}: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-ui-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-ui-foreground-2)}.x-button:active,.x-button:hover{color:var(--calcite-ui-text-1);background-color:var(--calcite-ui-foreground-3)}.x-button:active{border-style:solid;border-color:var(--calcite-ui-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:1.5rem}:host([scale=s]) .x-button{margin-inline-end: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:2rem}: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:2.75rem}:host([scale=l]) .x-button{margin-inline-end:1rem}.wrapper{display:flex;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-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-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          )}.wrapper--single{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l);cursor:pointer;flex-wrap:nowrap}.grid-input{display:flex;flex-grow:1;flex-wrap:wrap;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0px}.input{flex-grow:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-style:none;background-color:transparent;padding:0px;font-family:inherit;color:var(--calcite-ui-text-1);font-size:inherit;block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height);min-inline-size:120px;margin-block-end:var(--calcite-combobox-item-spacing-unit-s)}.input:focus{outline:2px solid transparent;outline-offset:2px}.input--transparent{opacity:0}.input--single{margin-block:0px;padding:0px}.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}.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;inline-size:1rem;cursor:pointer;align-items:center}.icon-end{flex:none}.floating-ui-container{--calcite-floating-ui-z-index:var(--calcite-app-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-app-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-ui-foreground-1);inline-size:var(--calcite-dropdown-width)}.list{margin:0px;display:block;padding:0px}.list--hide{block-size:0px;overflow:hidden}.chip{margin-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);margin-inline:0 var(--calcite-combobox-item-spacing-unit-s);max-inline-size:100%}.chip--active{background-color:var(--calcite-ui-foreground-3)}.item{display:block}::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}";
+const comboboxCss = ":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{position:relative;display:block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}: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-ui-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-ui-foreground-2)}.x-button:active,.x-button:hover{color:var(--calcite-ui-text-1);background-color:var(--calcite-ui-foreground-3)}.x-button:active{border-style:solid;border-color:var(--calcite-ui-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:1.5rem}:host([scale=s]) .x-button{margin-inline-end: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:2rem}: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:2.75rem}:host([scale=l]) .x-button{margin-inline-end:1rem}.wrapper{display:flex;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-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-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          )}.wrapper--single{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l);cursor:pointer;flex-wrap:nowrap}.grid-input{display:flex;flex-grow:1;flex-wrap:wrap;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0px}.input{flex-grow:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-style:none;background-color:transparent;padding:0px;font-family:inherit;color:var(--calcite-ui-text-1);font-size:inherit;block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height);min-inline-size:120px;margin-block-end:var(--calcite-combobox-item-spacing-unit-s)}.input:focus{outline:2px solid transparent;outline-offset:2px}.input--transparent{opacity:0}.input--single{margin-block:0px;padding:0px}.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}.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;inline-size:1rem;cursor:pointer;align-items:center}.icon-end{flex:none}.floating-ui-container{--calcite-floating-ui-z-index:var(--calcite-app-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-app-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-ui-foreground-1);inline-size:var(--calcite-dropdown-width)}.list{margin:0px;display:block;padding:0px}.list--hide{block-size:0px;overflow:hidden}.chip{margin-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);margin-inline:0 var(--calcite-combobox-item-spacing-unit-s);max-inline-size:100%}.chip--active{background-color:var(--calcite-ui-foreground-3)}.item{display:block}::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 isGroup = (el) => el.tagName === ComboboxItemGroup;
 const itemUidPrefix = "combobox-item-";
@@ -129,9 +129,11 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
           break;
         case " ":
           if (!this.textInput.value) {
+            if (!this.open) {
+              this.open = true;
+              this.shiftActiveItemIndex(1);
+            }
             event.preventDefault();
-            this.open = true;
-            this.shiftActiveItemIndex(1);
           }
           break;
         case "Home":
@@ -263,7 +265,6 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
       this.resizeObserver.observe(el);
       this.listContainerEl = el;
       this.transitionEl = el;
-      connectOpenCloseComponent(this);
     };
     this.setReferenceEl = (el) => {
       this.referenceEl = el;
@@ -302,7 +303,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
             item.ancestors.forEach((ancestor) => (ancestor.hidden = false));
           }
         });
-        this.filteredItems = this.getfilteredItems();
+        this.filteredItems = this.getFilteredItems();
         this.calciteComboboxFilterChange.emit();
       }, 100);
     })();
@@ -315,11 +316,20 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
       this.groupItems = this.getGroupItems();
       this.data = this.getData();
       this.selectedItems = this.getSelectedItems();
-      this.filteredItems = this.getfilteredItems();
+      this.filteredItems = this.getFilteredItems();
       this.needsIcon = this.getNeedsIcon();
       if (!this.allowCustomValues) {
         this.setMaxScrollerHeight();
       }
+      this.groupItems.forEach((groupItem, index, items) => {
+        if (index === 0) {
+          groupItem.afterEmptyGroup = false;
+        }
+        const nextGroupItem = items[index + 1];
+        if (nextGroupItem) {
+          nextGroupItem.afterEmptyGroup = groupItem.children.length === 0;
+        }
+      });
     };
     this.scrollToActiveItem = () => {
       const activeItem = this.filteredItems[this.activeItemIndex];
@@ -377,6 +387,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
     this.defaultMessages = undefined;
   }
   openHandler() {
+    onToggleOpenCloseComponent(this);
     if (this.disabled) {
       this.open = false;
       return;
@@ -459,13 +470,13 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
       overlayPositioning,
       placement,
       flipPlacements: filteredFlipPlacements,
-      type: "menu"
+      type: "menu",
     }, delayed);
   }
   /** Sets focus on the component. */
   async setFocus() {
     var _a;
-    await componentLoaded(this);
+    await componentFocusable(this);
     (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus();
     this.activeChipIndex = -1;
     this.activeItemIndex = -1;
@@ -486,11 +497,11 @@ 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 });
     connectLabel(this);
     connectForm(this);
-    connectOpenCloseComponent(this);
     this.setFilteredPlacements();
     this.reposition(true);
     if (this.open) {
       this.openHandler();
+      onToggleOpenCloseComponent(this);
     }
   }
   async componentWillLoad() {
@@ -518,7 +529,6 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
     disconnectLabel(this);
     disconnectForm(this);
     disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
-    disconnectOpenCloseComponent(this);
     disconnectLocalized(this);
     disconnectMessages(this);
   }
@@ -653,7 +663,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
       });
     }
   }
-  getfilteredItems() {
+  getFilteredItems() {
     return this.items.filter((item) => !item.hidden);
   }
   getSelectedItems() {
@@ -677,7 +687,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
     return this.items.map((item) => ({
       filterDisabled: item.filterDisabled,
       value: item.value,
-      label: item.textLabel
+      label: item.textLabel,
     }));
   }
   getNeedsIcon() {
@@ -797,7 +807,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
     return this.selectedItems.map((item, i) => {
       const chipClasses = {
         chip: true,
-        "chip--active": activeChipIndex === i
+        "chip--active": activeChipIndex === i,
       };
       const ancestors = [...getItemAncestors(item)].reverse();
       const pathLabel = [...ancestors, item].map((el) => el.textLabel);
@@ -812,16 +822,16 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
     const showLabel = !open && single && !!selectedItem;
     return (h("span", { class: {
         "input-wrap": true,
-        "input-wrap--single": single
+        "input-wrap--single": single,
       } }, showLabel && (h("span", { class: {
         label: true,
-        "label--icon": !!(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon)
+        "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,
         "input--single": true,
         "input--transparent": this.activeChipIndex > -1,
         "input--hidden": showLabel,
-        "input--icon": !!this.placeholderIcon
+        "input--icon": !!this.placeholderIcon,
       }, disabled: disabled, id: `${inputUidPrefix}${guid}`, key: "input", onBlur: this.comboboxBlurHandler, onFocus: this.comboboxFocusHandler, onInput: this.inputHandler, placeholder: placeholder, type: "text",
       // eslint-disable-next-line react/jsx-sort-props
       ref: (el) => (this.textInput = el) })));
@@ -834,11 +844,11 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
     const classes = {
       [CSS$1.listContainer]: true,
       [FloatingCSS.animation]: true,
-      [FloatingCSS.animationActive]: open
+      [FloatingCSS.animationActive]: open,
     };
     return (h("div", { "aria-hidden": "true", class: {
         "floating-ui-container": true,
-        "floating-ui-container--active": open
+        "floating-ui-container--active": open,
       },
       // eslint-disable-next-line react/jsx-sort-props
       ref: setFloatingEl }, h("div", { class: classes,
@@ -867,7 +877,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
     return (h(Host, { onClick: this.comboboxFocusHandler }, 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: {
         wrapper: true,
         "wrapper--single": single || !this.selectedItems.length,
-        "wrapper--active": open
+        "wrapper--active": open,
       }, onClick: this.clickHandler, onKeyDown: this.keyDownHandler, role: "combobox",
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.setReferenceEl }, h("div", { class: "grid-input" }, this.renderIconStart(), !single && this.renderChips(), 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 })));

package/dist/components/conditionalSlot.js CHANGED Viewed

@@ -8,8 +8,8 @@ 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.3
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.6.0
  */
 const observed = new Set();
 let mutationObserver;

package/dist/components/crowdsource-manager.js CHANGED Viewed

@@ -6,33 +6,35 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { g as getLocaleComponentStrings } from './locale.js';
 import { a as ELayoutMode } from './interfaces.js';
-import { d as defineCustomElement$C } from './action.js';
-import { d as defineCustomElement$B } from './action-bar.js';
-import { d as defineCustomElement$A } from './action-group.js';
-import { d as defineCustomElement$z } from './action-menu.js';
-import { d as defineCustomElement$y } from './alert.js';
-import { d as defineCustomElement$x } from './button.js';
-import { d as defineCustomElement$w } from './chip.js';
-import { d as defineCustomElement$v } from './combobox.js';
-import { d as defineCustomElement$u } from './combobox-item.js';
-import { d as defineCustomElement$t } from './dropdown.js';
-import { d as defineCustomElement$s } from './dropdown-group.js';
-import { d as defineCustomElement$r } from './dropdown-item.js';
-import { d as defineCustomElement$q } from './filter2.js';
-import { d as defineCustomElement$p } from './icon.js';
-import { d as defineCustomElement$o } from './input.js';
-import { d as defineCustomElement$n } from './link.js';
-import { d as defineCustomElement$m } from './list.js';
-import { d as defineCustomElement$l } from './list-item2.js';
-import { d as defineCustomElement$k } from './loader.js';
-import { d as defineCustomElement$j } from './notice.js';
-import { d as defineCustomElement$i } from './option.js';
-import { d as defineCustomElement$h } from './panel.js';
-import { d as defineCustomElement$g } from './popover.js';
-import { d as defineCustomElement$f } from './progress.js';
-import { d as defineCustomElement$e } from './scrim.js';
-import { d as defineCustomElement$d } from './select.js';
-import { d as defineCustomElement$c } from './shell.js';
+import { d as defineCustomElement$E } from './action.js';
+import { d as defineCustomElement$D } from './action-bar.js';
+import { d as defineCustomElement$C } from './action-group.js';
+import { d as defineCustomElement$B } from './action-menu.js';
+import { d as defineCustomElement$A } from './alert.js';
+import { d as defineCustomElement$z } from './button.js';
+import { d as defineCustomElement$y } from './chip.js';
+import { d as defineCustomElement$x } from './combobox.js';
+import { d as defineCustomElement$w } from './combobox-item.js';
+import { d as defineCustomElement$v } from './dropdown.js';
+import { d as defineCustomElement$u } from './dropdown-group.js';
+import { d as defineCustomElement$t } from './dropdown-item.js';
+import { d as defineCustomElement$s } from './filter2.js';
+import { d as defineCustomElement$r } from './handle.js';
+import { d as defineCustomElement$q } from './icon.js';
+import { d as defineCustomElement$p } from './input.js';
+import { d as defineCustomElement$o } from './link.js';
+import { d as defineCustomElement$n } from './list.js';
+import { d as defineCustomElement$m } from './list-item2.js';
+import { d as defineCustomElement$l } from './loader.js';
+import { d as defineCustomElement$k } from './notice.js';
+import { d as defineCustomElement$j } from './option.js';
+import { d as defineCustomElement$i } from './panel.js';
+import { d as defineCustomElement$h } from './popover.js';
+import { d as defineCustomElement$g } from './progress.js';
+import { d as defineCustomElement$f } from './scrim.js';
+import { d as defineCustomElement$e } from './select.js';
+import { d as defineCustomElement$d } from './shell.js';
+import { d as defineCustomElement$c } from './stack.js';
 import { d as defineCustomElement$b } from './tooltip.js';
 import { d as defineCustomElement$a } from './card-manager2.js';
 import { d as defineCustomElement$9 } from './edit-card2.js';
@@ -44,13 +46,14 @@ import { d as defineCustomElement$4 } from './map-layer-picker2.js';
 import { d as defineCustomElement$3 } from './map-picker2.js';
 import { d as defineCustomElement$2 } from './map-tools2.js';
-const crowdsourceManagerCss = ":host{display:block;--calcite-label-margin-bottom:0px}.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-ui-border-3)}.position-relative{position:relative}.height-50{height:50%}.adjusted-height-50{height:calc(50% - 0.5rem)}.adjusted-height-100{height:calc(100% - 1rem)}.display-none{display:none}.height-53{height:53px}.position-absolute-53{position:absolute;top:53px}.display-grid{display:grid}";
+const crowdsourceManagerCss = ":host{display:block;--calcite-label-margin-bottom:0px}.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-ui-border-3)}.border-bottom{border-bottom:1px solid var(--calcite-ui-border-3)}.position-relative{position:relative}.height-50{height:50%}.adjusted-height-50{height:calc(50% - 0.5rem)}.adjusted-height-100{height:calc(100% - 1rem)}.display-none{display:none}.height-53{height:53px}.position-absolute-53{position:absolute;top:53px}.display-grid{display:grid}";
 const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceManager extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.classicGrid = false;
+    this.hideHeader = true;
     this.hideMap = false;
     this.mapInfos = [];
     this.zoomAndScrollToSelected = false;
@@ -109,7 +112,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
    * Renders the component.
    */
   render() {
-    return (h(Host, null, h("calcite-shell", null, h("calcite-panel", { class: "width-full height-full", heading: this._translations.header }, h("layout-manager", { slot: "header-actions-end" }), this._getBody(this._layoutMode, this._panelOpen, this.hideMap)))));
+    return (h(Host, null, h("calcite-shell", null, h("calcite-panel", { class: "width-full height-full", heading: this.hideHeader ? undefined : this._translations.header }, this.hideHeader ? undefined : (h("layout-manager", { slot: "header-actions-end" })), this._getBody(this._layoutMode, this._panelOpen, this.hideMap)))));
   }
   //--------------------------------------------------------------------------
   //
@@ -210,10 +213,10 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
   _getBody(layoutMode, panelOpen, hideMap) {
     const contentClass = this.classicGrid && layoutMode === ELayoutMode.GRID && panelOpen ? "display-grid" :
       layoutMode === ELayoutMode.HORIZONTAL ? "" : "display-flex";
-    return this.classicGrid ? (h("calcite-panel", { class: "width-full height-full" }, h("div", { class: `width-full height-full ${contentClass}` }, this._getTable(layoutMode, panelOpen), this._getMap(layoutMode, panelOpen, hideMap)))) : (h("calcite-panel", { class: "width-full height-full" }, h("div", { class: `width-full height-full ${contentClass}` }, this._getMap(layoutMode, panelOpen, hideMap), this._getTable(layoutMode, panelOpen))));
+    return this.classicGrid ? (h("calcite-panel", { class: "width-full height-full" }, h("div", { class: `width-full height-full ${contentClass}` }, this._getTable(layoutMode, panelOpen), this._getMapAndCard(layoutMode, panelOpen, hideMap)))) : (h("calcite-panel", { class: "width-full height-full" }, h("div", { class: `width-full height-full ${contentClass}` }, this._getMapAndCard(layoutMode, panelOpen, hideMap), this._getTable(layoutMode, panelOpen))));
   }
   /**
-   * Get the map node based for the current layout
+   * Get the map and card nodes based for the current layout options
    *
    * @param layoutMode ELayoutMode the current layout mode
    * @param panelOpen boolean indicates if all panels are open
@@ -222,17 +225,40 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
    * @returns the map node
    * @protected
    */
-  _getMap(layoutMode, panelOpen, hideMap) {
+  _getMapAndCard(layoutMode, panelOpen, hideMap) {
+    const mapSizeClass = this._getMapSizeClass(layoutMode, panelOpen);
+    return this.classicGrid ? (h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getCardNode(layoutMode, hideMap), this._getMapNode(layoutMode, hideMap))) : (h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getMapNode(layoutMode, hideMap), this._getCardNode(layoutMode, hideMap)));
+  }
+  /**
+   * Get the map node based for the current layout options
+   *
+   * @param layoutMode ELayoutMode the current layout mode
+   * @param hideMap when true no map is displayed
+   *
+   * @returns the map node
+   * @protected
+   */
+  _getMapNode(layoutMode, hideMap) {
     const mapDisplayClass = this.classicGrid && layoutMode === ELayoutMode.GRID ? "display-flex height-full width-1-2" :
       layoutMode === ELayoutMode.GRID && !hideMap ? "" : "display-none";
+    const mapContainerClass = this.classicGrid && layoutMode === ELayoutMode.GRID ? "width-full" : "adjusted-height-50";
+    return (h("div", { class: `${mapContainerClass} overflow-hidden ${mapDisplayClass}` }, h("map-card", { class: "width-full", mapInfos: this.mapInfos })));
+  }
+  /**
+   * Get the card node based for the current layout options
+   *
+   * @param layoutMode ELayoutMode the current layout mode
+   * @param hideMap when true no map is displayed
+   *
+   * @returns the map node
+   * @protected
+   */
+  _getCardNode(layoutMode, hideMap) {
     const cardManagerHeight = this.classicGrid && layoutMode === ELayoutMode.GRID ? "" :
       layoutMode === ELayoutMode.GRID && !hideMap ? "adjusted-height-50" : "adjusted-height-100";
-    //
-    const mapSizeClass = this._getMapSizeClass(layoutMode, panelOpen);
-    const mapContainerClass = this.classicGrid && layoutMode === ELayoutMode.GRID ? "width-full" : "adjusted-height-50";
     const cardManagerContainer = this.classicGrid && layoutMode === ELayoutMode.GRID ?
       "width-full adjusted-height-100" : "width-50 height-full";
-    return (h("div", { class: `${mapSizeClass} overflow-hidden` }, h("div", { class: `${mapContainerClass} overflow-hidden ${mapDisplayClass}` }, h("map-card", { class: "width-full", mapInfos: this.mapInfos })), h("div", { class: `padding-1-2 ${cardManagerContainer}` }, h("card-manager", { class: `${cardManagerHeight} width-full`, mapView: this === null || this === void 0 ? void 0 : this._mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))));
+    return (h("div", { class: `padding-1-2 ${cardManagerContainer}` }, h("card-manager", { class: `${cardManagerHeight} width-full`, mapView: this === null || this === void 0 ? void 0 : this._mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected })));
   }
   /**
    * Get the table node based for the current layout
@@ -252,7 +278,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     const toggleSlot = this.classicGrid && layoutMode !== ELayoutMode.VERTICAL ? "footer" :
       this.classicGrid && layoutMode === ELayoutMode.VERTICAL ? "panel-end" :
         layoutMode === ELayoutMode.HORIZONTAL ? "header" : "panel-start";
-    return (h("calcite-shell", { class: tableSizeClass }, h("calcite-action-bar", { class: "border", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, h("span", null, tooltip))), h("div", { class: "width-full height-full position-relative" }, h("layer-table", { mapView: this === null || this === void 0 ? void 0 : this._mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))));
+    return (h("calcite-shell", { class: tableSizeClass + " border-bottom" }, h("calcite-action-bar", { class: "border", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, h("span", null, tooltip))), h("div", { class: "width-full height-full position-relative" }, h("layer-table", { mapView: this === null || this === void 0 ? void 0 : this._mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))));
   }
   /**
    * Open/Close the appropriate panel.
@@ -278,6 +304,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
   static get style() { return crowdsourceManagerCss; }
 }, [0, "crowdsource-manager", {
     "classicGrid": [4, "classic-grid"],
+    "hideHeader": [4, "hide-header"],
     "hideMap": [4, "hide-map"],
     "mapInfos": [16],
     "zoomAndScrollToSelected": [4, "zoom-and-scroll-to-selected"],
@@ -290,7 +317,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["crowdsource-manager", "calcite-action", "calcite-action-bar", "calcite-action-group", "calcite-action-menu", "calcite-alert", "calcite-button", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-dropdown", "calcite-dropdown-group", "calcite-dropdown-item", "calcite-filter", "calcite-icon", "calcite-input", "calcite-link", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-notice", "calcite-option", "calcite-panel", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-select", "calcite-shell", "calcite-tooltip", "card-manager", "edit-card", "info-card", "layer-table", "layout-manager", "map-card", "map-layer-picker", "map-picker", "map-tools"];
+  const components = ["crowdsource-manager", "calcite-action", "calcite-action-bar", "calcite-action-group", "calcite-action-menu", "calcite-alert", "calcite-button", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-dropdown", "calcite-dropdown-group", "calcite-dropdown-item", "calcite-filter", "calcite-handle", "calcite-icon", "calcite-input", "calcite-link", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-notice", "calcite-option", "calcite-panel", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-select", "calcite-shell", "calcite-stack", "calcite-tooltip", "card-manager", "edit-card", "info-card", "layer-table", "layout-manager", "map-card", "map-layer-picker", "map-picker", "map-tools"];
   components.forEach(tagName => { switch (tagName) {
     case "crowdsource-manager":
       if (!customElements.get(tagName)) {
@@ -299,135 +326,145 @@ function defineCustomElement$1() {
       break;
     case "calcite-action":
       if (!customElements.get(tagName)) {
-        defineCustomElement$C();
+        defineCustomElement$E();
       }
       break;
     case "calcite-action-bar":
       if (!customElements.get(tagName)) {
-        defineCustomElement$B();
+        defineCustomElement$D();
       }
       break;
     case "calcite-action-group":
       if (!customElements.get(tagName)) {
-        defineCustomElement$A();
+        defineCustomElement$C();
       }
       break;
     case "calcite-action-menu":
       if (!customElements.get(tagName)) {
-        defineCustomElement$z();
+        defineCustomElement$B();
       }
       break;
     case "calcite-alert":
       if (!customElements.get(tagName)) {
-        defineCustomElement$y();
+        defineCustomElement$A();
       }
       break;
     case "calcite-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$x();
+        defineCustomElement$z();
       }
       break;
     case "calcite-chip":
       if (!customElements.get(tagName)) {
-        defineCustomElement$w();
+        defineCustomElement$y();
       }
       break;
     case "calcite-combobox":
       if (!customElements.get(tagName)) {
-        defineCustomElement$v();
+        defineCustomElement$x();
       }
       break;
     case "calcite-combobox-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$u();
+        defineCustomElement$w();
       }
       break;
     case "calcite-dropdown":
       if (!customElements.get(tagName)) {
-        defineCustomElement$t();
+        defineCustomElement$v();
       }
       break;
     case "calcite-dropdown-group":
       if (!customElements.get(tagName)) {
-        defineCustomElement$s();
+        defineCustomElement$u();
       }
       break;
     case "calcite-dropdown-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$r();
+        defineCustomElement$t();
       }
       break;
     case "calcite-filter":
       if (!customElements.get(tagName)) {
-        defineCustomElement$q();
+        defineCustomElement$s();
+      }
+      break;
+    case "calcite-handle":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$r();
       }
       break;
     case "calcite-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$p();
+        defineCustomElement$q();
       }
       break;
     case "calcite-input":
       if (!customElements.get(tagName)) {
-        defineCustomElement$o();
+        defineCustomElement$p();
       }
       break;
     case "calcite-link":
       if (!customElements.get(tagName)) {
-        defineCustomElement$n();
+        defineCustomElement$o();
       }
       break;
     case "calcite-list":
       if (!customElements.get(tagName)) {
-        defineCustomElement$m();
+        defineCustomElement$n();
       }
       break;
     case "calcite-list-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$l();
+        defineCustomElement$m();
       }
       break;
     case "calcite-loader":
       if (!customElements.get(tagName)) {
-        defineCustomElement$k();
+        defineCustomElement$l();
       }
       break;
     case "calcite-notice":
       if (!customElements.get(tagName)) {
-        defineCustomElement$j();
+        defineCustomElement$k();
       }
       break;
     case "calcite-option":
       if (!customElements.get(tagName)) {
-        defineCustomElement$i();
+        defineCustomElement$j();
       }
       break;
     case "calcite-panel":
       if (!customElements.get(tagName)) {
-        defineCustomElement$h();
+        defineCustomElement$i();
       }
       break;
     case "calcite-popover":
       if (!customElements.get(tagName)) {
-        defineCustomElement$g();
+        defineCustomElement$h();
       }
       break;
     case "calcite-progress":
       if (!customElements.get(tagName)) {
-        defineCustomElement$f();
+        defineCustomElement$g();
       }
       break;
     case "calcite-scrim":
       if (!customElements.get(tagName)) {
-        defineCustomElement$e();
+        defineCustomElement$f();
       }
       break;
     case "calcite-select":
       if (!customElements.get(tagName)) {
-        defineCustomElement$d();
+        defineCustomElement$e();
       }
       break;
     case "calcite-shell":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
+      }
+      break;
+    case "calcite-stack":
       if (!customElements.get(tagName)) {
         defineCustomElement$c();
       }