@nasa-terra/components 0.0.29 → 0.0.30

package/dist/chunks/{chunk.ICYAVVW4.js → chunk.2QTJHB7F.js}

@@ -1,6 +1,6 @@
 import {
   TerraButton
-} from "./chunk.Z3BPGAEC.js";
+} from "./chunk.TOSECFXS.js";
 
 // src/react/button/index.ts
 import * as React from "react";

package/dist/chunks/{chunk.IYY536HH.js → chunk.2RGRL45T.js}

@@ -1,6 +1,6 @@
 import {
   TerraBrowseVariables
-} from "./chunk.JXNFBM4G.js";
+} from "./chunk.3J5TZOPP.js";
 
 // src/components/browse-variables/browse-variables.ts
 var browse_variables_default = TerraBrowseVariables;

package/dist/chunks/{chunk.WXWUMSQ6.js → chunk.2WHOFNO7.js}

@@ -1,6 +1,6 @@
 import {
   TerraVariableCombobox
-} from "./chunk.NW3BG32V.js";
+} from "./chunk.NRFKLACI.js";
 
 // src/components/variable-combobox/variable-combobox.ts
 var variable_combobox_default = TerraVariableCombobox;

package/dist/chunks/{chunk.W7JRXR2Y.js → chunk.2YRBHDWM.js}

@@ -6,7 +6,7 @@ var plot_styles_default = css`
     }
 
     :host::part(base) {
-        aspect-ratio: 4 / 3;
+        aspect-ratio: 16 / 9;
     }
 
     /**

package/dist/chunks/{chunk.OIO4HWK3.js → chunk.3IIDXU4S.js}

@@ -1,6 +1,6 @@
 import {
   TerraLogin
-} from "./chunk.G7L4LFF2.js";
+} from "./chunk.E5OMSMPR.js";
 
 // src/components/login/login.ts
 var login_default = TerraLogin;

package/dist/chunks/{chunk.JXNFBM4G.js → chunk.3J5TZOPP.js}

@@ -1,34 +1,34 @@
+import {
+  TerraVariableKeywordSearch
+} from "./chunk.RFLNQ553.js";
 import {
   TerraSkeleton
-} from "./chunk.2OY33DUQ.js";
+} from "./chunk.3K3BQXON.js";
 import {
   getRandomIntInclusive
 } from "./chunk.7PAVW6KC.js";
 import {
   TerraLoader
-} from "./chunk.SBA3WOAN.js";
-import {
-  TerraGiovanniSearch
-} from "./chunk.VTKHAV5B.js";
+} from "./chunk.3JQPZWUE.js";
 import {
   TerraIcon
-} from "./chunk.TRYPXGEF.js";
+} from "./chunk.KAU6YSSX.js";
+import {
+  BrowseVariablesController
+} from "./chunk.Z2ELMSYN.js";
+import {
+  browse_variables_styles_default
+} from "./chunk.DNBZHQCS.js";
 import {
   TerraButton
-} from "./chunk.Z3BPGAEC.js";
+} from "./chunk.TOSECFXS.js";
 import {
   watch
 } from "./chunk.SK7IZCKP.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.AKIZ4D6W.js";
-import {
-  BrowseVariablesController
-} from "./chunk.Z2ELMSYN.js";
-import {
-  browse_variables_styles_default
-} from "./chunk.DNBZHQCS.js";
+} from "./chunk.BCU2ZKJ4.js";
 import {
   __decorateClass,
   __objRest,
@@ -116,9 +116,9 @@ var TerraBrowseVariables = class extends TerraElement {
                               </terra-button>
                           ` : nothing}
 
-                    <terra-giovanni-search
+                    <terra-variable-keyword-search
                         @terra-search=${this.handleSearch}
-                    ></terra-giovanni-search>
+                    ></terra-variable-keyword-search>
                 </header>
 
                 ${this.showVariablesBrowse ? __privateMethod(this, _renderVariablesBrowse, renderVariablesBrowse_fn).call(this) : __privateMethod(this, _renderCategorySelect, renderCategorySelect_fn).call(this)}
@@ -459,7 +459,7 @@ renderVariablesBrowse_fn = function() {
 };
 TerraBrowseVariables.styles = [component_styles_default, browse_variables_styles_default];
 TerraBrowseVariables.dependencies = {
-  "terra-giovanni-search": TerraGiovanniSearch,
+  "terra-variable-keyword-search": TerraVariableKeywordSearch,
   "terra-button": TerraButton,
   "terra-skeleton": TerraSkeleton,
   "terra-icon": TerraIcon,

package/dist/chunks/{chunk.SBA3WOAN.js → chunk.3JQPZWUE.js}

@@ -4,7 +4,7 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.AKIZ4D6W.js";
+} from "./chunk.BCU2ZKJ4.js";
 import {
   __decorateClass
 } from "./chunk.TVFCHGU3.js";

package/dist/chunks/{chunk.2OY33DUQ.js → chunk.3K3BQXON.js}

@@ -7,7 +7,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.4XVD3JO6.js → dist/chunks/chunk.3SSCVJFM.js}

@@ -1,6 +1,6 @@
 import {
   TerraLogin
-} from "./chunk.CMTARP4Z.js";
+} from "./chunk.E5OMSMPR.js";
 
 // src/react/login/index.ts
 import * as React from "react";

package/dist/chunks/{chunk.GHDRVO5M.js → chunk.5EHGVGXV.js}

@@ -28,6 +28,9 @@ var time_series_styles_default = css`
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
+        position: relative;
+        z-index: 10;
+        padding-bottom: 10px;
     }
 
     .title {
@@ -57,31 +60,34 @@ var time_series_styles_default = css`
     }
 
     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 {
@@ -90,6 +96,7 @@ var time_series_styles_default = css`
 
     menu dd {
         font-style: italic;
+        text-wrap: balance;
     }
 
     terra-date-range-slider {
@@ -97,26 +104,59 @@ var time_series_styles_default = css`
         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.RV2KFFXW.js → chunk.5LMWCV76.js}

@@ -1,5 +1,4 @@
 import {
-  __objRest,
   __spreadProps,
   __spreadValues
 } from "./chunk.TVFCHGU3.js";
@@ -22,6 +21,7 @@ function renderSearchResult(listItem, index) {
                             id="listbox-option-${index}.${subIndex}"
                             role="option"
                             class="listbox-option"
+                            data-name=${variable.name}
                             data-long-name=${variable.longName}
                             data-event-detail=${variable.eventDetail}
                         >
@@ -39,7 +39,7 @@ function removeEmptyCollections(docs) {
   });
   return nonEmptyCollections;
 }
-function groupDocsByCollection(docs) {
+function groupDocsByCollection(docs = []) {
   const groupedDocs = {};
   for (const doc of docs) {
     const key = `${doc.collectionShortName}_${doc.collectionVersion}`;
@@ -64,11 +64,11 @@ function cherryPickDocInfo(docs) {
       longName: doc["Variable.LongName"],
       name: doc["Variable.Name"],
       standardName: doc["Variable.StandardName"],
-      units: doc["Variable.Units"]
+      units: doc["Variable.Units"],
+      timeInterval: doc["Collection.TimeInterval"]
     };
-    const _a = renderableData, { collectionLongName } = _a, eventDetails = __objRest(_a, ["collectionLongName"]);
     return __spreadProps(__spreadValues({}, renderableData), {
-      eventDetail: JSON.stringify(__spreadProps(__spreadValues({}, eventDetails), {
+      eventDetail: JSON.stringify(__spreadProps(__spreadValues({}, renderableData), {
         datasetLandingPage: doc["Collection.DescriptionUrl"],
         variableLandingPage: doc["Variable.DescriptionUrl"]
       }))
@@ -105,6 +105,13 @@ function walkToLast(walker) {
   walker.parentNode();
   walker.lastChild();
 }
+function adaptValueToVariableMetadata(value) {
+  const lastUnderscoreIndex = value.lastIndexOf("_");
+  const collection = value.substring(0, lastUnderscoreIndex);
+  const variableName = value.substring(lastUnderscoreIndex + 1);
+  const modifiedCollection = collection.replace(/_v(?=[^_]*$)/, "_");
+  return `${modifiedCollection}_${variableName}`;
+}
 
 export {
   renderSearchResult,
@@ -112,5 +119,6 @@ export {
   groupDocsByCollection,
   cherryPickDocInfo,
   clearSelection,
-  walkToOption
+  walkToOption,
+  adaptValueToVariableMetadata
 };

package/dist/chunks/{chunk.CCDDGUFW.js → chunk.67EX34DL.js}

@@ -8,36 +8,10 @@ var dialog_styles_default = css`
         display: block;
     }
 
-    .dialog-backdrop {
-        pointer-events: none;
-        position: fixed;
-        top: 0;
-        left: -9999;
-        right: auto;
-        bottom: auto;
-        width: 0;
-        height: 0;
-        z-index: calc(var(--terra-dialog-z-index) - 1);
-        /* TODO: fade in the backdrop */
-    }
-
-    .dialog-backdrop.visible {
+    ::backdrop {
         background-color: var(--terra-dialog-backdrop-color);
     }
 
-    .dialog-backdrop.clickable {
-        pointer-events: auto;
-    }
-
-    .dialog-backdrop.active {
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        width: auto;
-        height: auto;
-    }
-
     dialog[open] {
         display: flex;
         align-items: center;

package/dist/chunks/{chunk.X2NOCGLF.js → chunk.6P4UBSKH.js}

@@ -1,17 +1,17 @@
+import {
+  combobox_styles_default
+} from "./chunk.7WL3WWGJ.js";
 import {
   clearSelection,
   walkToOption
 } from "./chunk.LMGJJIIS.js";
-import {
-  combobox_styles_default
-} from "./chunk.7WL3WWGJ.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.A3JXDHJG.js

@@ -0,0 +1,11 @@
+import {
+  TerraVariableKeywordSearch
+} from "./chunk.RFLNQ553.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/dist/chunks/{chunk.KJQZP5RO.js → chunk.AUB6SKUI.js}

@@ -1,6 +1,6 @@
-// src/components/giovanni-search/giovanni-search.styles.ts
+// src/components/variable-keyword-search/variable-keyword-search.styles.ts
 import { css } from "lit";
-var giovanni_search_styles_default = css`
+var variable_keyword_search_styles_default = css`
     :host {
         --label-height: 1.8125rem;
 
@@ -218,5 +218,5 @@ var giovanni_search_styles_default = css`
 `;
 
 export {
-  giovanni_search_styles_default
+  variable_keyword_search_styles_default
 };

package/dist/chunks/{chunk.AKIZ4D6W.js → chunk.BCU2ZKJ4.js}

@@ -360,7 +360,7 @@ var TerraElement = class extends LitElement {
 };
 /* eslint-disable */
 // @ts-expect-error This is auto-injected at build time.
-TerraElement.version = "0.0.29";
+TerraElement.version = "0.0.30";
 TerraElement.dependencies = {};
 __decorateClass([
   property()

package/dist/chunks/{chunk.BOJX33N7.js → chunk.BVCKNDN2.js}

@@ -4,7 +4,7 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.AKIZ4D6W.js";
+} from "./chunk.BCU2ZKJ4.js";
 import {
   __decorateClass,
   __privateAdd,

package/{cdn/chunks/chunk.3T5XKTPL.js → dist/chunks/chunk.BXMFNRIQ.js}

@@ -1,6 +1,6 @@
 import {
   TerraIcon
-} from "./chunk.CGMA5YPP.js";
+} from "./chunk.KAU6YSSX.js";
 
 // src/components/icon/icon.ts
 var icon_default = TerraIcon;

package/dist/chunks/{chunk.ZCPWIACO.js → chunk.CY76LRGV.js}

@@ -1,6 +1,6 @@
 import {
   TerraBrowseVariables
-} from "./chunk.JXNFBM4G.js";
+} from "./chunk.3J5TZOPP.js";
 
 // src/react/browse-variables/index.ts
 import * as React from "react";

package/dist/chunks/chunk.DJICCDFZ.js

@@ -0,0 +1,130 @@
+import {
+  date_picker_styles_default
+} from "./chunk.W5W4VEOX.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.BCU2ZKJ4.js";
+import {
+  __decorateClass
+} from "./chunk.TVFCHGU3.js";
+
+// src/components/date-picker/date-picker.component.ts
+import { property, query } from "lit/decorators.js";
+import { html } from "lit";
+import "lit-flatpickr";
+var TerraDatePicker = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.range = false;
+    this.allowInput = false;
+    this.altFormat = "F j, Y";
+    this.altInput = false;
+    this.altInputClass = "";
+    this.dateFormat = "Y-m-d";
+    this.enableTime = false;
+    this.time24hr = false;
+    this.weekNumbers = false;
+    this.static = false;
+    this.position = "auto";
+    this.theme = "light";
+    this.showMonths = 1;
+  }
+  firstUpdated() {
+    this.flatpickrElement.addEventListener("change", this.handleChange.bind(this));
+  }
+  handleChange(e) {
+    var _a, _b, _c;
+    const selectedDates = e.detail.selectedDates;
+    if (this.range) {
+      this.startDate = (_a = selectedDates[0]) == null ? void 0 : _a.toISOString().split("T")[0];
+      this.endDate = (_b = selectedDates[1]) == null ? void 0 : _b.toISOString().split("T")[0];
+    } else {
+      this.startDate = (_c = selectedDates[0]) == null ? void 0 : _c.toISOString().split("T")[0];
+    }
+  }
+  render() {
+    return html`
+            <lit-flatpickr
+                .mode=${this.range ? "range" : "single"}
+                .minDate=${this.minDate}
+                .maxDate=${this.maxDate}
+                .defaultDate=${this.range ? [this.startDate, this.endDate].filter(Boolean) : this.startDate}
+                .allowInput=${this.allowInput}
+                .altFormat=${this.altFormat}
+                .altInput=${this.altInput}
+                .altInputClass=${this.altInputClass}
+                .dateFormat=${this.dateFormat}
+                .enableTime=${this.enableTime}
+                .time24hr=${this.time24hr}
+                .weekNumbers=${this.weekNumbers}
+                .static=${this.static}
+                .position=${this.position}
+                .theme=${this.theme}
+                .showMonths=${this.showMonths}
+            ></lit-flatpickr>
+        `;
+  }
+};
+TerraDatePicker.styles = [component_styles_default, date_picker_styles_default];
+__decorateClass([
+  property()
+], TerraDatePicker.prototype, "id", 2);
+__decorateClass([
+  property({ type: Boolean })
+], TerraDatePicker.prototype, "range", 2);
+__decorateClass([
+  property({ attribute: "min-date" })
+], TerraDatePicker.prototype, "minDate", 2);
+__decorateClass([
+  property({ attribute: "max-date" })
+], TerraDatePicker.prototype, "maxDate", 2);
+__decorateClass([
+  property({ attribute: "start-date" })
+], TerraDatePicker.prototype, "startDate", 2);
+__decorateClass([
+  property({ attribute: "end-date" })
+], TerraDatePicker.prototype, "endDate", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "allow-input" })
+], TerraDatePicker.prototype, "allowInput", 2);
+__decorateClass([
+  property({ attribute: "alt-format" })
+], TerraDatePicker.prototype, "altFormat", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "alt-input" })
+], TerraDatePicker.prototype, "altInput", 2);
+__decorateClass([
+  property({ attribute: "alt-input-class" })
+], TerraDatePicker.prototype, "altInputClass", 2);
+__decorateClass([
+  property({ attribute: "date-format" })
+], TerraDatePicker.prototype, "dateFormat", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "enable-time" })
+], TerraDatePicker.prototype, "enableTime", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "time-24hr" })
+], TerraDatePicker.prototype, "time24hr", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "week-numbers" })
+], TerraDatePicker.prototype, "weekNumbers", 2);
+__decorateClass([
+  property({ type: Boolean })
+], TerraDatePicker.prototype, "static", 2);
+__decorateClass([
+  property()
+], TerraDatePicker.prototype, "position", 2);
+__decorateClass([
+  property()
+], TerraDatePicker.prototype, "theme", 2);
+__decorateClass([
+  property({ type: Number, attribute: "show-months" })
+], TerraDatePicker.prototype, "showMonths", 2);
+__decorateClass([
+  query("lit-flatpickr")
+], TerraDatePicker.prototype, "flatpickrElement", 2);
+
+export {
+  TerraDatePicker
+};

package/dist/chunks/chunk.DP5CSX6S.js

@@ -0,0 +1,25 @@
+import {
+  TerraVariableKeywordSearch
+} from "./chunk.RFLNQ553.js";
+
+// src/react/variable-keyword-search/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "terra-variable-keyword-search";
+TerraVariableKeywordSearch.define("terra-variable-keyword-search");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraVariableKeywordSearch,
+  react: React,
+  events: {
+    onTerraVariableKeywordSearchChange: "terra-variable-keyword-search-change",
+    onTerraSearch: "terra-search"
+  },
+  displayName: "TerraVariableKeywordSearch"
+});
+var variable_keyword_search_default = reactWrapper;
+
+export {
+  variable_keyword_search_default
+};

package/dist/chunks/{chunk.EGZMQ7T7.js → chunk.DW23TAF4.js}

@@ -1,4 +1,4 @@
-// src/components/giovanni-search/lib.ts
+// src/components/variable-keyword-search/lib.ts
 import { html } from "lit";
 var whenIdle = "requestIdleCallback" in window ? requestIdleCallback : requestAnimationFrame;
 function renderSearchResult(listItem) {

package/dist/chunks/{chunk.G7L4LFF2.js → chunk.E5OMSMPR.js}

@@ -1,19 +1,19 @@
 import {
   loader_default
-} from "./chunk.4KUKUFDS.js";
+} from "./chunk.YFE22UAS.js";
 import {
   login_styles_default
 } from "./chunk.UIYPAVP3.js";
 import {
   icon_default
-} from "./chunk.5VZI3AW6.js";
+} from "./chunk.BXMFNRIQ.js";
 import {
   button_default
-} from "./chunk.GRG5Z2VH.js";
+} from "./chunk.MY3D3SMW.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.AKIZ4D6W.js";
+} from "./chunk.BCU2ZKJ4.js";
 import {
   __privateAdd,
   __privateGet,

package/dist/chunks/{chunk.KLX4FSH3.js → chunk.ED4EXVSJ.js}

@@ -1,6 +1,6 @@
 import {
   TerraDialog
-} from "./chunk.2VI37SGK.js";
+} from "./chunk.JPTE36KF.js";
 
 // src/react/dialog/index.ts
 import * as React from "react";

package/{cdn/chunks/chunk.OHPQWGRL.js → dist/chunks/chunk.F5UDJENT.js}

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