@nasa-terra/components 0.0.7 → 0.0.9

package/cdn/chunks/{chunk.IKYLG6LM.js → chunk.7O6PG7SC.js}

@@ -1,6 +1,6 @@
 import {
   TerraDateRangeSlider
-} from "./chunk.GMWFNQ7Q.js";
+} from "./chunk.BE55UMQU.js";
 
 // src/components/date-range-slider/date-range-slider.ts
 var date_range_slider_default = TerraDateRangeSlider;

package/cdn/chunks/chunk.7QABLDUG.js

@@ -0,0 +1,57 @@
+import {
+  GiovanniRepository
+} from "./chunk.O7AXAEKY.js";
+import {
+  h
+} from "./chunk.UGTZ22DI.js";
+import {
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet
+} from "./chunk.6QUGTGJO.js";
+
+// src/components/browse-variables/browse-variables.controller.ts
+var _host, _task, _catalog, _getCatalogRepository, getCatalogRepository_fn;
+var BrowseVariablesController = class {
+  constructor(host) {
+    __privateAdd(this, _getCatalogRepository);
+    __privateAdd(this, _host, void 0);
+    __privateAdd(this, _task, void 0);
+    __privateAdd(this, _catalog, void 0);
+    __privateSet(this, _host, host);
+    __privateSet(this, _catalog, __privateMethod(this, _getCatalogRepository, getCatalogRepository_fn).call(this));
+    __privateSet(this, _task, new h(host, {
+      task: async (_args, { signal }) => {
+        const searchResponse = await __privateGet(this, _catalog).searchVariablesAndFacets(
+          void 0,
+          void 0,
+          {
+            signal
+          }
+        );
+        this.facetsByCategory = searchResponse.facetsByCategory;
+        this.variables = searchResponse.variables;
+        return searchResponse;
+      },
+      args: () => []
+    }));
+  }
+  render(renderFunctions) {
+    return __privateGet(this, _task).render(renderFunctions);
+  }
+};
+_host = new WeakMap();
+_task = new WeakMap();
+_catalog = new WeakMap();
+_getCatalogRepository = new WeakSet();
+getCatalogRepository_fn = function() {
+  if (__privateGet(this, _host).catalog === "giovanni") {
+    return new GiovanniRepository();
+  }
+  throw new Error(`Invalid catalog: ${__privateGet(this, _host).catalog}`);
+};
+
+export {
+  BrowseVariablesController
+};

package/cdn/chunks/{chunk.WY4A6BXW.js → chunk.A5ZHUUQE.js}

@@ -1,6 +1,6 @@
 import {
   TerraIcon
-} from "./chunk.LO2CROCV.js";
+} from "./chunk.EH7QANZL.js";
 
 // src/react/icon/index.ts
 import * as React from "react";

package/{dist/chunks/chunk.TWKECPWO.js → cdn/chunks/chunk.B35TWPB3.js}

@@ -1,6 +1,6 @@
 import {
   TerraCombobox
-} from "./chunk.C5OZDL3F.js";
+} from "./chunk.SIGRYKYI.js";
 
 // src/components/combobox/combobox.ts
 var combobox_default = TerraCombobox;

package/cdn/chunks/{chunk.GMWFNQ7Q.js → chunk.BE55UMQU.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.BPNFS4ED.js";
 import {
   date_range_slider_styles_default
-} from "./chunk.4GVU47B6.js";
+} from "./chunk.WTMN7OUL.js";
 import {
   mergeTooltips
 } from "./chunk.KW4TJM4C.js";
@@ -16,7 +16,7 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.THBBULDA.js";
+} from "./chunk.XTN2KUNR.js";
 import {
   e,
   n
@@ -1893,6 +1893,7 @@ var TerraDateRangeSlider = class extends TerraElement {
         min: minDate.getTime(),
         max: maxDate.getTime()
       },
+      behaviour: "drag",
       step: this._getStep(),
       start: [startDate.getTime(), endDate.getTime()],
       // defaults to either the given start/end dates or the full date range (min/max date)

package/cdn/chunks/chunk.BJDFUSWQ.js

@@ -0,0 +1,226 @@
+import {
+  i
+} from "./chunk.PH7RLQK2.js";
+
+// src/components/giovanni-search/giovanni-search.styles.ts
+var giovanni_search_styles_default = i`
+    :host {
+        --label-height: 1.8125rem;
+        --host-height: 5.8125rem;
+
+        block-size: var(--terra-block-size, 2.1875rem);
+        box-sizing: border-box;
+        color: #1b1b1b; /* HDS uses this color for body text but does not have a defined color in the HDS palette */
+        contain: layout size style;
+        contain-intrinsic-size: var(--terra-inline-size, 100%)
+            calc(33vh + var(--terra-block-size, 2.1875rem));
+        display: block;
+        font-family: var(--terra-font-family--public-sans);
+        height: var(--terra-block-size, var(--host-height));
+        inline-size: var(--terra-inline-size, 100%);
+        position: relative;
+        z-index: 10;
+    }
+
+    :host([hide-label]) {
+        height: calc(
+            var(--terra-block-size, var(--host-height)) - var(--label-height)
+        );
+    }
+
+    * {
+        box-sizing: inherit;
+    }
+
+    .search-input-group {
+        block-size: 100%;
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    .combobox {
+        block-size: var(--terra-block-size, 2.25rem);
+        flex: 1 1 auto;
+        padding-inline: 0.5rem;
+        transition:
+            background-color 0.2s ease,
+            border-color 0.2s ease;
+    }
+
+    .combobox::placeholder {
+        color: var(--terra-color-carbon-60);
+    }
+
+    .combobox:focus {
+        border-color: var(--terra-color-carbon-40);
+        outline: 0;
+    }
+
+    .search-input-group:has(.combobox:not(:focus)) + .search-results[open] {
+        border-color: var(--terra-color-carbon-30);
+    }
+
+    .search-input-button {
+        margin-block: 0;
+        margin-inline: 0;
+        outline: 0;
+        position: absolute;
+        right: 0;
+        transition:
+            background-color 0.2s ease,
+            border-color 0.2s ease;
+        z-index: 2;
+    }
+
+    .search-button::part(base) {
+        border-color: transparent;
+    }
+
+    .search-button::part(base):hover {
+        background-color: transparent;
+        border-color: var(--terra-color-nasa-blue-shade);
+        color: var(--terra-button-outline-text-color);
+    }
+
+    .button-icon {
+        height: 1rem;
+        width: 1rem;
+    }
+
+    .spinner {
+        transform-origin: center;
+        animation: spin 2s linear infinite;
+    }
+
+    .spinner circle {
+        stroke-linecap: round;
+        animation: vary-stroke 1.5s ease-in-out infinite;
+    }
+
+    .external-link {
+        fill: currentColor;
+        vertical-align: middle;
+    }
+
+    .search-results {
+        background-color: var(--terra-color-spacesuit-white);
+        block-size: calc(33vh - var(--terra-block-size, 2.1875rem));
+        border-block-end: 2px solid transparent;
+        border-inline: 2px solid transparent;
+        contain: strict;
+        contain-intrinsic-size: var(--terra-inline-size, 100%)
+            calc(33vh - var(--terra-block-size, 2.1875rem));
+        content-visibility: hidden;
+        left: 0;
+        margin-block: 0;
+        margin-inline: 0;
+        max-height: 0;
+        opacity: 0;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        padding-block: 0.5rem;
+        padding-inline: 0rem;
+        position: absolute;
+        right: 0;
+        visibility: hidden;
+        transition:
+            background-color 0.2s ease,
+            border-color 0.2s ease;
+    }
+
+    .search-results[open] {
+        border-color: var(--terra-color-carbon-40);
+        content-visibility: auto;
+        max-height: calc(33vh - var(--terra-block-size, 2.1875rem));
+        opacity: 1;
+        visibility: visible;
+    }
+
+    .search-results .updating {
+        font-size: var(--terra-font-size-x-large);
+        padding-block: 4rem;
+        text-align: center;
+    }
+
+    .search-results .error {
+        color: var(--terra-color-nasa-red);
+        font-family: var(--terra-font-family--dm-mono);
+        padding-block: 2rem;
+    }
+
+    .listbox-option-group {
+        padding-inline: 0.5rem;
+        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;
+        margin-block: 0;
+    }
+
+    .listbox-option {
+        cursor: pointer;
+        list-style: none;
+        padding-inline: 0.5rem;
+        transition: background-color 0.1s ease-in-out;
+    }
+
+    .listbox-option[aria-selected='true'] {
+        animation: traverse 0.2s ease-in-out forwards;
+        background-color: var(--terra-color-nasa-blue-shade);
+        color: var(--terra-color-spacesuit-white);
+    }
+
+    @media (prefers-reduced-motion) {
+        .button-icon {
+            transition: rotate 0s ease;
+        }
+
+        .search-results {
+            scroll-behavior: auto;
+        }
+    }
+
+    @keyframes traverse {
+        from {
+            filter: brightness(0.8);
+            opacity: 0.8;
+        }
+
+        to {
+            filter: brightness(1);
+            opacity: 1;
+        }
+    }
+
+    @keyframes spin {
+        to {
+            transform: rotate(1turn);
+        }
+    }
+
+    @keyframes vary-stroke {
+        0% {
+            stroke-dasharray: 0 150;
+            stroke-dashoffset: 0;
+        }
+        47.5% {
+            stroke-dasharray: 42 150;
+            stroke-dashoffset: -16;
+        }
+        95%,
+        100% {
+            stroke-dasharray: 42 150;
+            stroke-dashoffset: -59;
+        }
+    }
+`;
+
+export {
+  giovanni_search_styles_default
+};

package/cdn/chunks/{chunk.URIOYHEA.js → chunk.BZAX3KPT.js}

@@ -1,13 +1,13 @@
 import {
   plot_styles_default
-} from "./chunk.PTWY7M47.js";
+} from "./chunk.EZSX4R2K.js";
 import {
   watch
 } from "./chunk.IUDWCWFV.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.THBBULDA.js";
+} from "./chunk.XTN2KUNR.js";
 import {
   e,
   n
@@ -18,6 +18,9 @@ import {
 import {
   __commonJS,
   __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateSet,
   __spreadValues,
   __toESM
 } from "./chunk.6QUGTGJO.js";
@@ -88169,33 +88172,31 @@ var require_plotly_min = __commonJS({
 
 // src/components/plot/plot.component.ts
 var import_plotly = __toESM(require_plotly_min(), 1);
+var _resizeObserver;
 var TerraPlot = class extends TerraElement {
   constructor() {
     super(...arguments);
-    this.plotData = [];
+    __privateAdd(this, _resizeObserver, void 0);
     this.layout = {};
-    this.config = {
-      modeBarButtonsToAdd: [
-        {
-          name: "Download Data",
-          title: "Download plot data as a CSV file",
-          icon: import_plotly.Icons.disk,
-          click: () => {
-            this.downloadCSV();
-          }
-        }
-      ]
-    };
+    this.config = {};
     this.data = [];
   }
   handleDataChange() {
     this.updatePlotWithData();
   }
   firstUpdated() {
+    __privateSet(this, _resizeObserver, new ResizeObserver(() => {
+      import_plotly.Plots.resize(this.base);
+    }));
+    __privateGet(this, _resizeObserver).observe(this.base);
     if (this.data.length) {
       this.updatePlotWithData();
     }
   }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    __privateGet(this, _resizeObserver).disconnect();
+  }
   updatePlotWithData() {
     if (!this.base) {
       return;
@@ -88206,45 +88207,21 @@ var TerraPlot = class extends TerraElement {
       __spreadValues({
         title: this.plotTitle
       }, this.layout),
-      this.config
+      __spreadValues({ responsive: true }, this.config)
     );
   }
-  downloadCSV() {
-    let plotData = [];
-    this.data.forEach((plot, index) => {
-      plotData[index] = plot;
-    });
-    const csvData = plotData.map((trace) => {
-      return trace.x.map((x2, i) => {
-        return {
-          x: x2,
-          y: trace.y[i]
-        };
-      });
-    }).flat();
-    const csv = this.convertToCSV(csvData);
-    const blob = new Blob([csv], { type: "text/csv" });
-    const url = window.URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.setAttribute("href", url);
-    a.setAttribute("download", "chart_data.csv");
-    a.style.display = "none";
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-  }
-  convertToCSV(data) {
-    const header = Object.keys(data[0]).join(",") + "\n";
-    const rows = data.map((obj) => Object.values(obj).join(",")).join("\n");
-    return header + rows;
-  }
   render() {
     return x`<div part="base"></div>`;
   }
+  updated() {
+    var _a, _b;
+    (_b = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".gtitle")) == null ? void 0 : _b.part.add("plot-title");
+  }
 };
+_resizeObserver = new WeakMap();
 TerraPlot.styles = [component_styles_default, plot_styles_default];
 __decorateClass([
-  e('[part~="base"]')
+  e('[part="base"]')
 ], TerraPlot.prototype, "base", 2);
 __decorateClass([
   n()
@@ -88263,6 +88240,7 @@ __decorateClass([
 ], TerraPlot.prototype, "handleDataChange", 1);
 
 export {
+  require_plotly_min,
   TerraPlot
 };
 /*! Bundled license information:

package/cdn/chunks/chunk.CNP3J6CH.js

@@ -0,0 +1,128 @@
+import {
+  i
+} from "./chunk.PH7RLQK2.js";
+
+// src/components/time-series/time-series.styles.ts
+var time_series_styles_default = i`
+    :host {
+        display: grid;
+        gap: 1.5rem 0.75rem;
+        grid-template-rows: auto;
+        grid-template-columns: 1fr 1fr;
+    }
+
+    terra-variable-combobox {
+        grid-column: 1 / 2;
+    }
+
+    terra-spatial-picker {
+        grid-column: 2 / 3;
+    }
+
+    .plot-container {
+        grid-column: 1 / 3;
+    }
+
+    .spacer {
+        padding-block: 1.375rem;
+    }
+
+    header {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+    }
+
+    .title {
+        margin: 0;
+        font-size: 1.25rem;
+    }
+
+    .toggles {
+        display: flex;
+        justify-content: space-between;
+        gap: 0 1em;
+    }
+
+    .toggle {
+        position: relative;
+    }
+
+    .toggle[aria-expanded='true']::after {
+        background-color: var(--terra-color-nasa-blue);
+        block-size: 0.125em;
+        border-radius: 0.25em;
+        bottom: -0.5em;
+        content: ' ';
+        inline-size: 100%;
+        left: 0;
+        position: absolute;
+    }
+
+    menu {
+        margin: 0;
+        max-height: 0;
+        overscroll-behavior: contain;
+        padding-block: 0.25em;
+        padding-inline: 0.5em;
+        transition: max-height 0.1s ease-in;
+    }
+
+    menu[data-expanded='true'] {
+        margin-block: 0.75em;
+        max-height: 85dvh;
+        overflow-y: auto;
+    }
+
+    menu [role='menuitem'] {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0em 1em;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    [role='menuitem'] p {
+        flex: 1 0 100%;
+    }
+
+    menu dt {
+        font-weight: var(--terra-font-weight-semibold);
+    }
+
+    menu dd {
+        font-style: italic;
+    }
+
+    terra-date-range-slider {
+        grid-column: 1 / 3;
+        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;
+    }
+
+    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);
+
+        @starting-style {
+            opacity: 0;
+        }
+    }
+`;
+
+export {
+  time_series_styles_default
+};

package/cdn/chunks/chunk.CRDWIXR6.js

@@ -0,0 +1,25 @@
+import {
+  TerraGiovanniSearch
+} from "./chunk.Z3LHAJIV.js";
+
+// src/react/giovanni-search/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "terra-giovanni-search";
+TerraGiovanniSearch.define("terra-giovanni-search");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraGiovanniSearch,
+  react: React,
+  events: {
+    onTerraGiovanniSearchChange: "terra-giovanni-search-change",
+    onTerraSearch: "terra-search"
+  },
+  displayName: "TerraGiovanniSearch"
+});
+var giovanni_search_default = reactWrapper;
+
+export {
+  giovanni_search_default
+};

package/cdn/chunks/{chunk.CGUXXQTT.js → chunk.CST5GL5A.js}

@@ -1,6 +1,6 @@
 import {
   TerraLoader
-} from "./chunk.FDOXEWGR.js";
+} from "./chunk.ETRGUHQA.js";
 
 // src/components/loader/loader.ts
 var loader_default = TerraLoader;

package/cdn/chunks/{chunk.LO2CROCV.js → chunk.EH7QANZL.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.THBBULDA.js";
+} from "./chunk.XTN2KUNR.js";
 import {
   n,
   r