@nasa-terra/components 0.0.29 → 0.0.30

package/cdn/chunks/chunk.QKFBOZ3A.js

@@ -0,0 +1,21 @@
+import {
+  TerraDatePicker
+} from "./chunk.UXTJ3UQP.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/cdn/chunks/{chunk.Z2TYLEAP.js → chunk.RE7Y5324.js}

@@ -1,10 +1,10 @@
 import {
   dialog_styles_default
-} from "./chunk.FAICFDGD.js";
+} from "./chunk.JLUCY2KC.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.HSHJMWBR.js";
+} from "./chunk.AX2SA27I.js";
 import {
   e,
   n
@@ -24,36 +24,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 x`
-            <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>
@@ -62,9 +55,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];
@@ -77,9 +73,6 @@ __decorateClass([
 __decorateClass([
   n({ reflect: true })
 ], TerraDialog.prototype, "width", 2);
-__decorateClass([
-  n({ type: Boolean, reflect: true })
-], TerraDialog.prototype, "open", 2);
 __decorateClass([
   n({ attribute: "click-outside-to-close", type: Boolean, reflect: true })
 ], TerraDialog.prototype, "clickOutsideToClose", 2);

package/cdn/chunks/{chunk.SWEK2UAG.js → chunk.RU6G6JLS.js}

@@ -53,6 +53,39 @@ var variable_combobox_styles_default = i`
         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;
@@ -60,6 +93,7 @@ var variable_combobox_styles_default = i`
         transition:
             background-color 0.2s ease,
             border-color 0.2s ease;
+        max-inline-size: 100%;
     }
 
     .combobox::placeholder {
@@ -177,10 +211,6 @@ var variable_combobox_styles_default = i`
         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/cdn/chunks/chunk.SBI2FAOG.js

@@ -0,0 +1,11 @@
+import {
+  TerraVariableKeywordSearch
+} from "./chunk.EFOVA2JJ.js";
+
+// src/components/variable-keyword-search/variable-keyword-search.ts
+var variable_keyword_search_default = TerraVariableKeywordSearch;
+TerraVariableKeywordSearch.define("terra-variable-keyword-search");
+
+export {
+  variable_keyword_search_default
+};

package/cdn/chunks/{chunk.WD2DJJFP.js → chunk.SCFJOPPV.js}

@@ -2,7 +2,7 @@ import {
   x
 } from "./chunk.PQFHJHNO.js";
 
-// src/components/giovanni-search/lib.ts
+// src/components/variable-keyword-search/lib.ts
 var whenIdle = "requestIdleCallback" in window ? requestIdleCallback : requestAnimationFrame;
 function renderSearchResult(listItem) {
   return x`

package/cdn/chunks/{chunk.Y742TAGH.js → chunk.SI3J4IDI.js}

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

package/{dist/chunks/chunk.UCLNYZP4.js → cdn/chunks/chunk.SSOHEVCW.js}

@@ -1,6 +1,6 @@
 import {
   TerraTimeSeries
-} from "./chunk.LIBBEBVE.js";
+} from "./chunk.57KITL7R.js";
 
 // src/react/time-series/index.ts
 import * as React from "react";

package/{dist/chunks/chunk.WZRVDBUQ.js → cdn/chunks/chunk.STX2OFFU.js}

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

package/cdn/chunks/{chunk.CGMA5YPP.js → chunk.SULSGF5G.js}

@@ -1,11 +1,11 @@
-import {
-  icon_styles_default
-} from "./chunk.4XR5KYKG.js";
 import {
   getIconLibrary,
   unwatchIcon,
   watchIcon
-} from "./chunk.MDRUDBRH.js";
+} from "./chunk.7DOMZGX7.js";
+import {
+  icon_styles_default
+} from "./chunk.4XR5KYKG.js";
 import {
   e
 } from "./chunk.6NYH4BZ2.js";
@@ -15,7 +15,7 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.HSHJMWBR.js";
+} from "./chunk.AX2SA27I.js";
 import {
   n,
   r

package/cdn/chunks/{chunk.CNP3J6CH.js → chunk.T6H2MZZI.js}

@@ -31,6 +31,9 @@ var time_series_styles_default = i`
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
+        position: relative;
+        z-index: 10;
+        padding-bottom: 10px;
     }
 
     .title {
@@ -60,31 +63,34 @@ var time_series_styles_default = i`
     }
 
     menu {
-        margin: 0;
-        max-height: 0;
-        overscroll-behavior: contain;
-        padding-block: 0.25em;
-        padding-inline: 0.5em;
-        transition: max-height 0.1s ease-in;
+        all: unset;
+        position: absolute;
+        top: calc(100%);
+        right: 0;
+        z-index: 1000;
+        background: white;
+        border: 1px solid #ccc;
+        border-radius: 0.5em;
+        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
+        width: max-content;
+        min-width: 20ch;
+        padding: 1em;
+        display: none;
     }
 
     menu[data-expanded='true'] {
-        margin-block: 0.75em;
-        max-height: 85dvh;
-        overflow-y: auto;
+        display: block;
     }
 
     menu [role='menuitem'] {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 0em 1em;
+        display: block;
         list-style: none;
         margin: 0;
-        padding: 0;
+        padding: 0.5em 0;
     }
 
     [role='menuitem'] p {
-        flex: 1 0 100%;
+        margin-block: 0.5em;
     }
 
     menu dt {
@@ -93,6 +99,7 @@ var time_series_styles_default = i`
 
     menu dd {
         font-style: italic;
+        text-wrap: balance;
     }
 
     terra-date-range-slider {
@@ -100,26 +107,59 @@ var time_series_styles_default = i`
         padding-block-start: 2rem;
     }
 
-    /* The current Giovanni API doesn't accept bounding box subsetting. */
     terra-spatial-picker::part(leaflet-bbox),
     terra-spatial-picker::part(leaflet-edit) {
         display: none;
     }
 
-    /* Set the plot title to transparent, which makes it not visible on the page but visible on download. */
     terra-plot::part(plot-title) {
         opacity: 0;
+        z-index: 0 !important;
     }
 
     dialog {
         opacity: 1;
-        transition: opacity 0.3s ease-out 0.4s; /* a short delay, to allow local results to be displayed without a loading icon */
-        place-self: center;
-        z-index: var(--terra-z-index-dialog);
+        transition: opacity 0.3s ease-out 0.4s;
 
         @starting-style {
             opacity: 0;
         }
+
+        place-self: center;
+        z-index: var(--terra-z-index-dialog);
+    }
+
+    dialog {
+        width: 450px;
+        max-width: 90vw;
+        padding: 1.5rem;
+        border-radius: 8px;
+        border: 1px solid var(--terra-color-neutral-200, #e5e7eb);
+        box-shadow:
+            0 4px 6px -1px rgba(0, 0, 0, 0.1),
+            0 2px 4px -1px rgba(0, 0, 0, 0.06);
+        background-color: var(--terra-color-neutral-0, #ffffff);
+    }
+
+    dialog h2 {
+        margin-top: 0;
+        color: var(--terra-color-danger-600, #dc2626);
+        font-size: 1.2rem;
+    }
+
+    dialog ul {
+        margin-bottom: 1.5rem;
+    }
+
+    dialog li {
+        margin-bottom: 0.5rem;
+    }
+
+    .dialog-buttons {
+        display: flex;
+        justify-content: flex-end;
+        gap: 1rem;
+        margin-top: 1.5rem;
     }
 `;
 

package/{dist/chunks/chunk.FHPEQ6H6.js → cdn/chunks/chunk.TSLU66AK.js}

@@ -1,6 +1,6 @@
 import {
   TerraVariableCombobox
-} from "./chunk.NW3BG32V.js";
+} from "./chunk.TVLFTKMX.js";
 
 // src/react/variable-combobox/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.BJIWBGKZ.js → chunk.TVLFTKMX.js}

@@ -1,25 +1,23 @@
 import {
   FetchController
-} from "./chunk.KRV3QC6E.js";
+} from "./chunk.2IBDQF7X.js";
 import {
+  variable_combobox_styles_default
+} from "./chunk.RU6G6JLS.js";
+import {
+  adaptValueToVariableMetadata,
   clearSelection,
   groupDocsByCollection,
   removeEmptyCollections,
   renderSearchResult,
   walkToOption
-} from "./chunk.MJY6U2Q2.js";
-import {
-  variable_combobox_styles_default
-} from "./chunk.SWEK2UAG.js";
+} from "./chunk.JXGOY6TG.js";
 import {
   h
 } from "./chunk.QB5SASDL.js";
 import {
   icon_default
-} from "./chunk.3T5XKTPL.js";
-import {
-  button_default
-} from "./chunk.KJJ66WSH.js";
+} from "./chunk.DDGJ6BLG.js";
 import {
   Fuse
 } from "./chunk.U7L2FN7F.js";
@@ -29,13 +27,16 @@ import {
 import {
   n as n2
 } from "./chunk.2XCNCXGV.js";
+import {
+  button_default
+} from "./chunk.X4S4SQKL.js";
 import {
   watch
 } from "./chunk.CBV7M6CJ.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.HSHJMWBR.js";
+} from "./chunk.AX2SA27I.js";
 import {
   n,
   r
@@ -49,28 +50,34 @@ import {
   __decorateClass,
   __privateAdd,
   __privateGet,
+  __privateMethod,
   __privateSet,
   __spreadProps,
   __spreadValues
 } from "./chunk.MR27IH5Z.js";
 
 // src/components/variable-combobox/variable-combobox.component.ts
-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) });
     });
@@ -166,7 +173,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;
@@ -174,22 +181,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() {
@@ -211,13 +228,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 x`<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 ? x`<div
+                          ${n2((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"
+                      >
+                          ${o(
+      this.tags,
+      (value, index) => __privateMethod(this, _renderTags, renderTags_fn).call(this, value, index)
+    )}
+                      </div>` : T}
                 <input
                     ${n2((el) => {
       var _a2;
@@ -225,6 +257,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"
@@ -234,8 +267,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);` : T}
+                    aria-describedby=${this.useTags ? "tag-container" : T}
+                    placeholder=${this.useTags ? T : (_a = this.placeholder) != null ? _a : `${this.label}\u2026`}
+                    .value=${this.useTags ? _TerraVariableCombobox.initialQuery : this.query}
                     @input=${__privateGet(this, _handleComboboxChange)}
                     @keydown=${__privateGet(this, _handleKeydown)}
                 />
@@ -309,18 +344,6 @@ var _TerraVariableCombobox = class _TerraVariableCombobox extends TerraElement {
                 role="listbox"
                 class="search-results"
             >
-                ${searchHasNoMatches ? x`<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>` : T}
                 ${__privateGet(this, _fetchController).render({
       initial: () => x`<li class="updating">Updating List of Variables</li>`,
       pending: () => x`<li class="updating">Updating List of Variables</li>`,
@@ -367,6 +390,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();
@@ -374,6 +398,34 @@ _handleOptionClick = new WeakMap();
 _handleKeydown = new WeakMap();
 _manageListboxVisibility = new WeakMap();
 _selectOption = new WeakMap();
+_renderTags = new WeakSet();
+renderTags_fn = function(tag, _index) {
+  return x`
+            <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
@@ -391,11 +443,14 @@ __decorateClass([
   n()
 ], _TerraVariableCombobox.prototype, "placeholder", 2);
 __decorateClass([
-  n({ attribute: "hide-help", type: Boolean })
+  n({ attribute: "hide-help", type: Boolean, reflect: true })
 ], _TerraVariableCombobox.prototype, "hideHelp", 2);
 __decorateClass([
-  n({ attribute: "hide-label", type: Boolean })
+  n({ attribute: "hide-label", type: Boolean, reflect: true })
 ], _TerraVariableCombobox.prototype, "hideLabel", 2);
+__decorateClass([
+  n({ attribute: "use-tags", type: Boolean, reflect: true })
+], _TerraVariableCombobox.prototype, "useTags", 2);
 __decorateClass([
   n()
 ], _TerraVariableCombobox.prototype, "value", 2);
@@ -411,6 +466,12 @@ __decorateClass([
 __decorateClass([
   r()
 ], _TerraVariableCombobox.prototype, "searchResults", 2);
+__decorateClass([
+  r()
+], _TerraVariableCombobox.prototype, "tags", 2);
+__decorateClass([
+  r()
+], _TerraVariableCombobox.prototype, "tagContainerWidth", 2);
 __decorateClass([
   watch("value")
 ], _TerraVariableCombobox.prototype, "valueChanged", 1);

package/cdn/chunks/{chunk.44NIPIWB.js → chunk.U2IVCX3M.js}

@@ -7,19 +7,19 @@ import {
   o,
   s
 } from "./chunk.GNSDRDLV.js";
-import {
-  button_styles_default
-} from "./chunk.YVG2XG3L.js";
 import {
   watch
 } from "./chunk.CBV7M6CJ.js";
+import {
+  button_styles_default
+} from "./chunk.YVG2XG3L.js";
 import {
   e
 } from "./chunk.YVSJQ4KD.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.HSHJMWBR.js";
+} from "./chunk.AX2SA27I.js";
 import {
   e as e2,
   n as n2,
@@ -315,7 +315,6 @@ var TerraButton = class extends TerraElement {
 _handleDialogStateChange = new WeakSet();
 handleDialogStateChange_fn = function(e3) {
   if (this.forDialog && this.forDialog === e3.target.id) {
-    this.expanded = e3.target.open;
   }
 };
 TerraButton.styles = [component_styles_default, button_styles_default];