@nasa-terra/components 0.0.29 → 0.0.30

package/dist/chunks/chunk.F7GS6U3O.js

@@ -0,0 +1,21 @@
+import {
+  TerraDatePicker
+} from "./chunk.DJICCDFZ.js";
+
+// src/react/date-picker/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "terra-date-picker";
+TerraDatePicker.define("terra-date-picker");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraDatePicker,
+  react: React,
+  events: {},
+  displayName: "TerraDatePicker"
+});
+var date_picker_default = reactWrapper;
+
+export {
+  date_picker_default
+};

package/dist/chunks/{chunk.QJGNTLKC.js → chunk.FAIVIYKA.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.N7J6PIAG.js";
 import {
   TerraMap
-} from "./chunk.LVFOF3IN.js";
+} from "./chunk.NE2F3K3V.js";
 import {
   StringifyBoundingBox,
   parseBoundingBox
@@ -11,7 +11,7 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.AKIZ4D6W.js";
+} from "./chunk.BCU2ZKJ4.js";
 import {
   __decorateClass
 } from "./chunk.TVFCHGU3.js";

package/{cdn/chunks/chunk.VJY3BVCV.js → dist/chunks/chunk.H6K7DI54.js}

@@ -1,6 +1,6 @@
 import {
   TerraChip
-} from "./chunk.3BDUSUJJ.js";
+} from "./chunk.BVCKNDN2.js";
 
 // src/components/chip/chip.ts
 var chip_default = TerraChip;

package/dist/chunks/{chunk.QK5OWFVO.js → chunk.HJGC45MW.js}

@@ -50,6 +50,39 @@ var variable_combobox_styles_default = css`
         flex-wrap: wrap;
     }
 
+    .tag-container {
+        block-size: var(--terra-block-size, 2.25rem);
+        position: absolute;
+        top: 2.25rem;
+        display: flex;
+        flex-wrap: wrap;
+        align-content: center;
+        padding-inline-start: 0.5rem;
+    }
+
+    .tag {
+        --terra-button-height-small: 1.25rem;
+        --terra-spacing-small: 0.5rem;
+    }
+
+    .tag:hover .tag-icon,
+    .tag:active .tag-icon,
+    .tag:focus .tag-icon {
+        transform: scale(1.125);
+        color: var(--terra-color-nasa-red-shade);
+        transition:
+            transform 0.2s ease-out,
+            color 0.2s ease-out;
+    }
+
+    .tag-icon {
+        font-size: 1.25em;
+    }
+
+    .tag-icon::part(svg) {
+        stroke-width: 2;
+    }
+
     .combobox {
         block-size: var(--terra-block-size, 2.25rem);
         flex: 1 1 auto;
@@ -57,6 +90,7 @@ var variable_combobox_styles_default = css`
         transition:
             background-color 0.2s ease,
             border-color 0.2s ease;
+        max-inline-size: 100%;
     }
 
     .combobox::placeholder {
@@ -174,10 +208,6 @@ var variable_combobox_styles_default = css`
         padding-block: 1rem 0.5rem;
     }
 
-    .listbox-option-group:has(.clear-button) {
-        text-align: center;
-    }
-
     .group-title {
         font-family: var(--terra-font-family--inter);
         font-weight: 700;

package/dist/chunks/{chunk.IXA4S7MC.js → chunk.HRODIECS.js}

@@ -1,6 +1,6 @@
 import {
   TerraPlot
-} from "./chunk.TGFRBJQ2.js";
+} from "./chunk.TOKOGZDW.js";
 
 // src/components/plot/plot.ts
 var plot_default = TerraPlot;

package/dist/chunks/{chunk.HC2GJY4W.js → chunk.IPMALKFU.js}

@@ -1,6 +1,6 @@
 import {
   TerraSpatialPicker
-} from "./chunk.QJGNTLKC.js";
+} from "./chunk.FAIVIYKA.js";
 
 // src/react/spatial-picker/index.ts
 import * as React from "react";

package/dist/chunks/{chunk.2VI37SGK.js → chunk.JPTE36KF.js}

@@ -1,10 +1,10 @@
 import {
   dialog_styles_default
-} from "./chunk.CCDDGUFW.js";
+} from "./chunk.67EX34DL.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.AKIZ4D6W.js";
+} from "./chunk.BCU2ZKJ4.js";
 import {
   __decorateClass,
   __privateAdd,
@@ -19,36 +19,29 @@ var TerraDialog = class extends TerraElement {
   constructor() {
     super(...arguments);
     __privateAdd(this, _handleBackdropClick);
-    this.width = "500px";
-    this.open = false;
+    this.width = "fit-content";
     this.clickOutsideToClose = true;
     this.showBackdrop = true;
   }
   toggle() {
-    this.open ? this.hide() : this.show();
+    this.dialogEl.open ? this.hide("toggle") : this.show();
   }
   show() {
-    this.open = true;
+    this.dialogEl.showModal();
     this.emit("terra-dialog-show");
   }
-  hide() {
-    this.open = false;
+  hide(reason) {
+    this.dialogEl.close(reason);
     this.emit("terra-dialog-hide");
   }
   render() {
     return html`
-            <div
-                class="dialog-backdrop ${this.showBackdrop ? "visible" : ""} ${this.open ? "active" : ""} ${this.clickOutsideToClose ? "clickable" : ""}"
-                part="backdrop"
-                @click=${__privateMethod(this, _handleBackdropClick, handleBackdropClick_fn)}
-            ></div>
-
             <dialog
-                part="dialog"
-                ?open=${this.open}
+                @click=${__privateMethod(this, _handleBackdropClick, handleBackdropClick_fn)}
+                aria-modal="true"
                 id=${this.id}
+                part="dialog"
                 role="dialog"
-                aria-modal="true"
                 style="width: ${this.width}"
             >
                 <slot></slot>
@@ -57,9 +50,12 @@ var TerraDialog = class extends TerraElement {
   }
 };
 _handleBackdropClick = new WeakSet();
-handleBackdropClick_fn = function() {
+handleBackdropClick_fn = function(event) {
   if (this.clickOutsideToClose) {
-    this.hide();
+    const target = event.target;
+    if (target.nodeName === "DIALOG") {
+      this.hide("backdrop");
+    }
   }
 };
 TerraDialog.styles = [component_styles_default, dialog_styles_default];
@@ -72,9 +68,6 @@ __decorateClass([
 __decorateClass([
   property({ reflect: true })
 ], TerraDialog.prototype, "width", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], TerraDialog.prototype, "open", 2);
 __decorateClass([
   property({ attribute: "click-outside-to-close", type: Boolean, reflect: true })
 ], TerraDialog.prototype, "clickOutsideToClose", 2);

package/dist/chunks/{chunk.TRYPXGEF.js → chunk.KAU6YSSX.js}

@@ -1,18 +1,18 @@
-import {
-  icon_styles_default
-} from "./chunk.7VUSSQRI.js";
 import {
   getIconLibrary,
   unwatchIcon,
   watchIcon
-} from "./chunk.MDRUDBRH.js";
+} from "./chunk.7DOMZGX7.js";
+import {
+  icon_styles_default
+} from "./chunk.7VUSSQRI.js";
 import {
   watch
 } from "./chunk.SK7IZCKP.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.AKIZ4D6W.js";
+} from "./chunk.BCU2ZKJ4.js";
 import {
   __decorateClass,
   __privateAdd,

package/dist/chunks/{chunk.6MWZMGHC.js → chunk.KF6GNNY4.js}

@@ -1,6 +1,6 @@
 import {
   TerraDateRangeSlider
-} from "./chunk.ZJX62EXO.js";
+} from "./chunk.LDXAXITL.js";
 
 // src/react/date-range-slider/index.ts
 import * as React from "react";

package/{cdn/chunks/chunk.JPORUQZG.js → dist/chunks/chunk.KY7CFQ2L.js}

@@ -1,6 +1,6 @@
 import {
   TerraMap
-} from "./chunk.ZM74J5O7.js";
+} from "./chunk.NE2F3K3V.js";
 
 // src/react/map/index.ts
 import * as React from "react";

package/dist/chunks/{chunk.A5MHK2RE.js → chunk.KZQGAFNS.js}

@@ -1,6 +1,6 @@
 import {
   TerraChip
-} from "./chunk.BOJX33N7.js";
+} from "./chunk.BVCKNDN2.js";
 
 // src/react/chip/index.ts
 import * as React from "react";

package/dist/chunks/{chunk.ZJX62EXO.js → chunk.LDXAXITL.js}

@@ -1,19 +1,19 @@
 import {
   isValidDate
 } from "./chunk.OIDMX5LU.js";
-import {
-  date_range_slider_styles_default
-} from "./chunk.62YHGVQN.js";
 import {
   mergeTooltips
 } from "./chunk.KW4TJM4C.js";
+import {
+  date_range_slider_styles_default
+} from "./chunk.62YHGVQN.js";
 import {
   watch
 } from "./chunk.SK7IZCKP.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.AKIZ4D6W.js";
+} from "./chunk.BCU2ZKJ4.js";
 import {
   __decorateClass
 } from "./chunk.TVFCHGU3.js";

package/dist/chunks/{chunk.GRG5Z2VH.js → chunk.MY3D3SMW.js}

@@ -1,6 +1,6 @@
 import {
   TerraButton
-} from "./chunk.Z3BPGAEC.js";
+} from "./chunk.TOSECFXS.js";
 
 // src/components/button/button.ts
 var button_default = TerraButton;

package/dist/chunks/{chunk.LVFOF3IN.js → chunk.NE2F3K3V.js}

@@ -1,6 +1,3 @@
-import {
-  map_styles_default
-} from "./chunk.GR7XHOA3.js";
 import {
   leaflet_draw_styles_default
 } from "./chunk.AAWOHDFX.js";
@@ -13,13 +10,16 @@ import {
 import {
   MapController
 } from "./chunk.SBTMIM4P.js";
+import {
+  map_styles_default
+} from "./chunk.GR7XHOA3.js";
 import {
   watch
 } from "./chunk.SK7IZCKP.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.AKIZ4D6W.js";
+} from "./chunk.BCU2ZKJ4.js";
 import {
   __decorateClass,
   __privateAdd,

package/{cdn/chunks/chunk.4XCAK3VQ.js → dist/chunks/chunk.NQ2Y66ML.js}

@@ -1,6 +1,6 @@
 import {
   TerraCombobox
-} from "./chunk.HLLY7QKL.js";
+} from "./chunk.6P4UBSKH.js";
 
 // src/react/combobox/index.ts
 import * as React from "react";

package/dist/chunks/{chunk.NW3BG32V.js → chunk.NRFKLACI.js}

@@ -1,33 +1,35 @@
 import {
   FetchController
-} from "./chunk.UCFFAP7X.js";
+} from "./chunk.YY2NUPBF.js";
 import {
+  variable_combobox_styles_default
+} from "./chunk.HJGC45MW.js";
+import {
+  adaptValueToVariableMetadata,
   clearSelection,
   groupDocsByCollection,
   removeEmptyCollections,
   renderSearchResult,
   walkToOption
-} from "./chunk.RV2KFFXW.js";
-import {
-  variable_combobox_styles_default
-} from "./chunk.QK5OWFVO.js";
+} from "./chunk.5LMWCV76.js";
 import {
   icon_default
-} from "./chunk.5VZI3AW6.js";
+} from "./chunk.BXMFNRIQ.js";
 import {
   button_default
-} from "./chunk.GRG5Z2VH.js";
+} from "./chunk.MY3D3SMW.js";
 import {
   watch
 } from "./chunk.SK7IZCKP.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.AKIZ4D6W.js";
+} from "./chunk.BCU2ZKJ4.js";
 import {
   __decorateClass,
   __privateAdd,
   __privateGet,
+  __privateMethod,
   __privateSet,
   __spreadProps,
   __spreadValues
@@ -40,22 +42,27 @@ import { property, state } from "lit/decorators.js";
 import { cache } from "lit/directives/cache.js";
 import { map } from "lit/directives/map.js";
 import { ref } from "lit/directives/ref.js";
-var _combobox, _fetchController, _searchableList, _listbox, _searchEngine, _walker, _dispatchChange, _handleButtonClick, _handleComboboxChange, _handleOptionClick, _handleKeydown, _manageListboxVisibility, _selectOption;
+var _combobox, _fetchController, _searchableList, _listbox, _searchEngine, _walker, _tagContainer, _dispatchChange, _handleButtonClick, _handleComboboxChange, _handleOptionClick, _handleKeydown, _manageListboxVisibility, _selectOption, _renderTags, renderTags_fn;
 var _TerraVariableCombobox = class _TerraVariableCombobox extends TerraElement {
   constructor() {
     super(...arguments);
+    __privateAdd(this, _renderTags);
     __privateAdd(this, _combobox, null);
     __privateAdd(this, _fetchController, void 0);
     __privateAdd(this, _searchableList, []);
     __privateAdd(this, _listbox, null);
     __privateAdd(this, _searchEngine, null);
     __privateAdd(this, _walker, null);
+    __privateAdd(this, _tagContainer, null);
     this.label = "Search for Variables";
     this.hideHelp = false;
     this.hideLabel = false;
+    this.useTags = false;
     this.isExpanded = false;
     this.query = _TerraVariableCombobox.initialQuery;
     this.searchResults = [];
+    this.tags = [];
+    this.tagContainerWidth = 0;
     __privateAdd(this, _dispatchChange, (stringifiedData) => {
       this.emit("terra-combobox-change", { detail: JSON.parse(stringifiedData) });
     });
@@ -151,7 +158,7 @@ var _TerraVariableCombobox = class _TerraVariableCombobox extends TerraElement {
       }
     });
     __privateAdd(this, _selectOption, (option) => {
-      const { longName, eventDetail } = option.dataset;
+      const { longName, eventDetail, name } = option.dataset;
       this.query = `${longName}`;
       __privateGet(this, _dispatchChange).call(this, eventDetail);
       this.isExpanded = false;
@@ -159,22 +166,32 @@ var _TerraVariableCombobox = class _TerraVariableCombobox extends TerraElement {
         __privateGet(this, _combobox),
         __privateGet(this, _listbox)
       );
+      if (this.useTags) {
+        this.tags = [`${name}`];
+        __privateGet(this, _combobox).value = _TerraVariableCombobox.initialQuery;
+        this.query = _TerraVariableCombobox.initialQuery;
+      }
     });
   }
-  async valueChanged() {
-    var _a;
+  async valueChanged(oldValue, newValue) {
+    var _a, _b;
+    if (oldValue === newValue) {
+      return;
+    }
     await __privateGet(this, _fetchController).taskComplete;
-    const selectedVariable = (_a = __privateGet(this, _fetchController).value) == null ? void 0 : _a.find((variable) => {
-      const lastUnderscoreIndex = this.value.lastIndexOf("_");
-      const collection = this.value.substring(0, lastUnderscoreIndex);
-      const variableName = this.value.substring(lastUnderscoreIndex + 1);
-      const modifiedCollection = collection.replace(/_v(?=[^_]*$)/, "_");
-      const fixedValue = `${modifiedCollection}_${variableName}`;
-      return variable.entryId === fixedValue;
+    const compatibleValue = adaptValueToVariableMetadata(this.value);
+    const selectedVariable = (_a = __privateGet(this, _fetchController).value) == null ? void 0 : _a.find((metadata) => {
+      return compatibleValue === metadata.entryId;
     });
     if (selectedVariable) {
       this.query = selectedVariable.longName;
+      this.searchResults = (_b = __privateGet(this, _searchEngine)) == null ? void 0 : _b.search(this.query).map(({ item }) => item);
       __privateGet(this, _dispatchChange).call(this, selectedVariable.eventDetail);
+      if (this.useTags) {
+        this.tags = [`${selectedVariable.name}`];
+        __privateGet(this, _combobox).value = _TerraVariableCombobox.initialQuery;
+        this.query = _TerraVariableCombobox.initialQuery;
+      }
     }
   }
   connectedCallback() {
@@ -196,13 +213,28 @@ var _TerraVariableCombobox = class _TerraVariableCombobox extends TerraElement {
     this.isExpanded = !this.isExpanded;
   }
   render() {
-    var _a, _b, _c;
-    const searchHasNoMatches = ((_a = this.searchResults) == null ? void 0 : _a.length) === 0 && ((_b = __privateGet(this, _searchableList)) == null ? void 0 : _b.length) !== 0 && this.query !== _TerraVariableCombobox.initialQuery;
+    var _a;
     return html`<search part="base" title="Search through the list.">
             <label for="combobox" class=${this.hideLabel ? "sr-only" : "input-label"}
                 >${this.label}</label
             >
             <div class="search-input-group">
+                ${this.useTags ? html`<div
+                          ${ref((el) => {
+      var _a2;
+      if (el) {
+        (_a2 = __privateGet(this, _tagContainer)) != null ? _a2 : __privateSet(this, _tagContainer, el);
+        this.tagContainerWidth = el.getBoundingClientRect().width;
+      }
+    })}
+                          class="tag-container"
+                          id="tag-container"
+                      >
+                          ${map(
+      this.tags,
+      (value, index) => __privateMethod(this, _renderTags, renderTags_fn).call(this, value, index)
+    )}
+                      </div>` : nothing}
                 <input
                     ${ref((el) => {
       var _a2;
@@ -210,6 +242,7 @@ var _TerraVariableCombobox = class _TerraVariableCombobox extends TerraElement {
         (_a2 = __privateGet(this, _combobox)) != null ? _a2 : __privateSet(this, _combobox, el);
       }
     })}
+                    autocomplete="off"
                     aria-autocomplete="list"
                     aria-controls="listbox"
                     aria-haspopup="list"
@@ -219,8 +252,10 @@ var _TerraVariableCombobox = class _TerraVariableCombobox extends TerraElement {
                     part="combobox"
                     role="combobox"
                     type="text"
-                    .placeholder=${(_c = this.placeholder) != null ? _c : `${this.label}\u2026`}
-                    .value=${this.query}
+                    style=${this.useTags ? `padding-inline-start: calc(${this.tagContainerWidth}px + 0.25rem);` : nothing}
+                    aria-describedby=${this.useTags ? "tag-container" : nothing}
+                    placeholder=${this.useTags ? nothing : (_a = this.placeholder) != null ? _a : `${this.label}\u2026`}
+                    .value=${this.useTags ? _TerraVariableCombobox.initialQuery : this.query}
                     @input=${__privateGet(this, _handleComboboxChange)}
                     @keydown=${__privateGet(this, _handleKeydown)}
                 />
@@ -294,18 +329,6 @@ var _TerraVariableCombobox = class _TerraVariableCombobox extends TerraElement {
                 role="listbox"
                 class="search-results"
             >
-                ${searchHasNoMatches ? html`<li
-                          class="listbox-option-group"
-                          data-tree-walker="filter_skip"
-                      >
-                          <terra-button
-                              @click=${() => this.query = _TerraVariableCombobox.initialQuery}
-                              class="clear-button"
-                              data-tree-walker="filter_skip"
-                          >
-                              clear search
-                          </terra-button>
-                      </li>` : nothing}
                 ${__privateGet(this, _fetchController).render({
       initial: () => html`<li class="updating">Updating List of Variables</li>`,
       pending: () => html`<li class="updating">Updating List of Variables</li>`,
@@ -352,6 +375,7 @@ _searchableList = new WeakMap();
 _listbox = new WeakMap();
 _searchEngine = new WeakMap();
 _walker = new WeakMap();
+_tagContainer = new WeakMap();
 _dispatchChange = new WeakMap();
 _handleButtonClick = new WeakMap();
 _handleComboboxChange = new WeakMap();
@@ -359,6 +383,34 @@ _handleOptionClick = new WeakMap();
 _handleKeydown = new WeakMap();
 _manageListboxVisibility = new WeakMap();
 _selectOption = new WeakMap();
+_renderTags = new WeakSet();
+renderTags_fn = function(tag, _index) {
+  return html`
+            <terra-button
+                size="small"
+                variant="default"
+                outline
+                class="tag"
+                aria-label=${`Clear tag ${tag}`}
+                @click=${() => {
+    this.tags = [];
+    this.clear();
+    setTimeout(() => {
+      var _a;
+      this.tagContainerWidth = (_a = __privateGet(this, _tagContainer)) == null ? void 0 : _a.getBoundingClientRect().width;
+    }, 100);
+  }}
+            >
+                ${tag}
+                <terra-icon
+                    class="tag-icon"
+                    slot="suffix"
+                    name="outline-x-circle"
+                    library="heroicons"
+                ></terra-icon>
+            </terra-button>
+        `;
+};
 _TerraVariableCombobox.dependencies = {
   "terra-button": button_default,
   "terra-icon": icon_default
@@ -376,11 +428,14 @@ __decorateClass([
   property()
 ], _TerraVariableCombobox.prototype, "placeholder", 2);
 __decorateClass([
-  property({ attribute: "hide-help", type: Boolean })
+  property({ attribute: "hide-help", type: Boolean, reflect: true })
 ], _TerraVariableCombobox.prototype, "hideHelp", 2);
 __decorateClass([
-  property({ attribute: "hide-label", type: Boolean })
+  property({ attribute: "hide-label", type: Boolean, reflect: true })
 ], _TerraVariableCombobox.prototype, "hideLabel", 2);
+__decorateClass([
+  property({ attribute: "use-tags", type: Boolean, reflect: true })
+], _TerraVariableCombobox.prototype, "useTags", 2);
 __decorateClass([
   property()
 ], _TerraVariableCombobox.prototype, "value", 2);
@@ -396,6 +451,12 @@ __decorateClass([
 __decorateClass([
   state()
 ], _TerraVariableCombobox.prototype, "searchResults", 2);
+__decorateClass([
+  state()
+], _TerraVariableCombobox.prototype, "tags", 2);
+__decorateClass([
+  state()
+], _TerraVariableCombobox.prototype, "tagContainerWidth", 2);
 __decorateClass([
   watch("value")
 ], _TerraVariableCombobox.prototype, "valueChanged", 1);

package/dist/chunks/{chunk.3R7FYOEC.js → chunk.NY3FWCB4.js}

@@ -1,6 +1,6 @@
 import {
   TerraSkeleton
-} from "./chunk.2OY33DUQ.js";
+} from "./chunk.3K3BQXON.js";
 
 // src/react/skeleton/index.ts
 import * as React from "react";

package/dist/chunks/{chunk.AZFDLGZH.js → chunk.P4V6NTUB.js}

@@ -1,6 +1,6 @@
 import {
   TerraDialog
-} from "./chunk.2VI37SGK.js";
+} from "./chunk.JPTE36KF.js";
 
 // src/components/dialog/dialog.ts
 var dialog_default = TerraDialog;