@nasa-terra/components 0.0.79 → 0.0.80

package/dist/chunks/{chunk.G6VNN7RY.js → chunk.MPNHLZNI.js}

@@ -2,8 +2,25 @@
 import { css } from "lit";
 var time_average_map_styles_default = css`
     :host {
-        display: block;
-        height: 800px;
+        display: grid;
+        grid-template-rows: auto 1fr;
+        grid-template-columns: 1fr;
+    }
+
+    .spacer {
+        padding-block: 1.375rem;
+    }
+
+    .toolbar-container {
+        grid-row: 1;
+    }
+
+    .map-container {
+        grid-row: 2;
+        position: relative;
+        width: 100%;
+        height: 100%;
+        aspect-ratio: 100 / 52;
     }
 
     #map {
@@ -15,7 +32,7 @@ var time_average_map_styles_default = css`
     #settings {
         opacity: 0.75;
         position: absolute;
-        bottom: 150px;
+        bottom: 10px;
         left: 10px;
         background: rgba(255, 255, 255, 0.9);
         padding: 8px 10px;
@@ -27,6 +44,51 @@ var time_average_map_styles_default = css`
         pointer-events: auto;
     }
 
+    dialog {
+        opacity: 1;
+        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;
+    }
+
     label {
         display: flex;
         align-items: center;
@@ -338,6 +400,45 @@ var time_average_map_styles_default = css`
     .ol-overviewmap .ol-viewport:hover {
         cursor: pointer;
     }
+
+    /* Responsive design for smaller screens */
+    @media (max-width: 768px) {
+        :host {
+            gap: 1rem 0.5rem;
+        }
+
+        .map-container {
+            min-height: 300px;
+        }
+
+        #map {
+            min-height: 300px;
+        }
+
+        #settings {
+            bottom: 100px;
+            left: 5px;
+            padding: 6px 8px;
+            font-size: 11px;
+        }
+    }
+
+    @media (max-width: 480px) {
+        .map-container {
+            min-height: 250px;
+        }
+
+        #map {
+            min-height: 250px;
+        }
+
+        #settings {
+            bottom: 80px;
+            left: 5px;
+            padding: 4px 6px;
+            font-size: 10px;
+        }
+    }
 `;
 
 export {

package/dist/chunks/{chunk.7RT5CEB6.js → chunk.N6AUWZHE.js}

@@ -47,12 +47,23 @@ var spatial_picker_styles_default = css`
         width: 1.4rem;
     }
 
-    terra-map:not(.inline) {
+    .spatial-picker__map-container {
         position: absolute;
         top: 100%;
         left: 0;
         width: 100%;
         z-index: 200;
+        margin-top: 8px;
+    }
+
+    .spatial-picker__map-container.flipped {
+        top: auto;
+        bottom: 100%;
+        margin-bottom: 8px;
+    }
+
+    terra-map:not(.inline) {
+        width: 100%;
     }
 
     .button-icon {

package/dist/chunks/{chunk.YKZAA4Y2.js → chunk.NAVFEGCI.js}

@@ -1,6 +1,6 @@
 import {
   TerraPlot
-} from "./chunk.LMEWOXT4.js";
+} from "./chunk.K6Q6J5ND.js";
 
 // src/react/plot/index.ts
 import * as React from "react";

package/dist/chunks/{chunk.FJ3EPSDA.js → chunk.NMXV5B5E.js}

@@ -1,6 +1,6 @@
 import {
   TerraDataRods
-} from "./chunk.HBBZZVOS.js";
+} from "./chunk.EG3G4P7D.js";
 
 // src/react/data-rods/index.ts
 import * as React from "react";

package/dist/chunks/{chunk.6SBABNR5.js → chunk.NN77YVLS.js}

@@ -16,7 +16,7 @@ function getTimeSeriesNotebook(host) {
     {
       id: "2733501b-0de4-4067-8aff-864e1b4c76cb",
       cell_type: "code",
-      source: '%pip install -q "terra_ui_components==0.0.79" "anywidget==0.9.15" "pandas"',
+      source: '%pip install -q "terra_ui_components==0.0.80" "anywidget==0.9.15" "pandas"',
       metadata: {
         trusted: true
       },

package/dist/chunks/{chunk.2QAOBVXJ.js → chunk.O77HLJ5W.js}

@@ -13,7 +13,7 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.PDQEBNF2.js";
+} from "./chunk.F6LR5CPM.js";
 import {
   __decorateClass
 } from "./chunk.TVFCHGU3.js";

package/dist/chunks/{chunk.IQITTKLF.js → chunk.OJTCPR4A.js}

@@ -1,6 +1,6 @@
 import {
   TerraDataSubsetterHistory
-} from "./chunk.5JPMM6UP.js";
+} from "./chunk.H6RXQHL6.js";
 
 // src/components/data-subsetter-history/data-subsetter-history.ts
 var data_subsetter_history_default = TerraDataSubsetterHistory;

package/dist/chunks/{chunk.IG5WQP2M.js → chunk.OKSEWKOZ.js}

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

package/dist/chunks/{chunk.STW4Z4TN.js → chunk.ONMHEEEJ.js}

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

package/dist/chunks/{chunk.JNAS5EXZ.js → chunk.OOKQ7OBO.js}

@@ -3,11 +3,11 @@ import {
 } from "./chunk.XZB6CNAL.js";
 import {
   TerraButton
-} from "./chunk.726LQPRB.js";
+} from "./chunk.RGVP2PGD.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.PDQEBNF2.js";
+} from "./chunk.F6LR5CPM.js";
 import {
   __decorateClass
 } from "./chunk.TVFCHGU3.js";
@@ -20,7 +20,7 @@ var TerraDatePicker = class extends TerraElement {
   constructor() {
     super(...arguments);
     this.range = false;
-    this.allowInput = false;
+    this.allowInput = true;
     this.altFormat = "F j, Y";
     this.altInput = false;
     this.altInputClass = "";

package/dist/chunks/{chunk.BEDYDFXT.js → chunk.PJP62E5Q.js}

@@ -13,6 +13,10 @@ var map_styles_default = css`
         border: solid 1px var(--terra-map-border-color);
     }
 
+    .map.static .leaflet-control-container {
+        display: none;
+    }
+
     .leaflet-mouse-position-container {
         color: var(--terra-input-color);
         padding: 5px;

package/dist/chunks/{chunk.UDBHYT6P.js → chunk.Q5J7IXTH.js}

@@ -1,17 +1,17 @@
 import {
   spatial_picker_styles_default
-} from "./chunk.7RT5CEB6.js";
+} from "./chunk.N6AUWZHE.js";
 import {
   TerraMap
-} from "./chunk.ELVIHFQI.js";
+} from "./chunk.66XZB5EQ.js";
 import {
   StringifyBoundingBox,
   parseBoundingBox
-} from "./chunk.GMJWNAQG.js";
+} from "./chunk.DTN7GDMC.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.PDQEBNF2.js";
+} from "./chunk.F6LR5CPM.js";
 import {
   __decorateClass
 } from "./chunk.TVFCHGU3.js";
@@ -36,6 +36,7 @@ var TerraSpatialPicker = class extends TerraElement {
     this.inline = false;
     this.showMapOnFocus = false;
     this.error = "";
+    this._popoverFlipped = false;
   }
   setValue(value) {
     try {
@@ -56,16 +57,37 @@ var TerraSpatialPicker = class extends TerraElement {
     this._emitMapChange();
     const relatedTarget = e.relatedTarget;
     if (!(relatedTarget == null ? void 0 : relatedTarget.closest("terra-map"))) {
-      this.isExpanded = false;
+      this.close();
     }
   }
   _focus() {
     if (this.showMapOnFocus) {
-      this.isExpanded = true;
+      this.open();
     }
   }
   _click() {
-    this.isExpanded = !this.isExpanded;
+    if (this.isExpanded) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+  /**
+   * The spatial picker will either be positioned above or below the input depending on the space available
+   * @returns
+   */
+  _checkPopoverPosition() {
+    if (this.inline)
+      return;
+    const viewportHeight = window.innerHeight;
+    const pickerRect = this.spatialPicker.getBoundingClientRect();
+    const spaceBelow = viewportHeight - pickerRect.bottom;
+    const spaceAbove = pickerRect.top;
+    if (spaceBelow < 450 && spaceBelow < spaceAbove) {
+      this._popoverFlipped = true;
+    } else {
+      this._popoverFlipped = false;
+    }
   }
   _emitMapChange() {
     var _a;
@@ -99,6 +121,7 @@ var TerraSpatialPicker = class extends TerraElement {
   }
   open() {
     this.isExpanded = true;
+    this._checkPopoverPosition();
   }
   close() {
     this.isExpanded = false;
@@ -128,10 +151,20 @@ var TerraSpatialPicker = class extends TerraElement {
     if (this.initialValue) {
       this.mapValue = this.initialValue === "" ? [] : parseBoundingBox(this.initialValue);
     }
+    window.addEventListener("resize", this._handleResize.bind(this));
     setTimeout(() => {
       this.invalidateSize();
     }, 500);
   }
+  _handleResize() {
+    if (this.isExpanded && !this.inline) {
+      this._checkPopoverPosition();
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener("resize", this._handleResize.bind(this));
+  }
   renderMap() {
     return html`<terra-map
             class="${this.inline ? "inline" : ""}"
@@ -194,6 +227,7 @@ var TerraSpatialPicker = class extends TerraElement {
                 </div>
                 ${this.error ? html`<div class="spatial-picker__error">${this.error}</div>` : nothing}
                 ${expanded ? html`<div
+                          class="spatial-picker__map-container ${this._popoverFlipped ? "flipped" : ""}"
                           style="${this.inline ? "position: static; width: 100%;" : ""}"
                       >
                           ${this.renderMap()}
@@ -261,12 +295,18 @@ __decorateClass([
 __decorateClass([
   state()
 ], TerraSpatialPicker.prototype, "error", 2);
+__decorateClass([
+  state()
+], TerraSpatialPicker.prototype, "_popoverFlipped", 2);
 __decorateClass([
   query(".spatial-picker__input")
 ], TerraSpatialPicker.prototype, "spatialInput", 2);
 __decorateClass([
   query("terra-map")
 ], TerraSpatialPicker.prototype, "map", 2);
+__decorateClass([
+  query(".spatial-picker")
+], TerraSpatialPicker.prototype, "spatialPicker", 2);
 
 export {
   TerraSpatialPicker

package/dist/chunks/{chunk.WVLIAL2U.js → chunk.QYDXQXZU.js}

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

package/dist/chunks/{chunk.CFBVWGGR.js → chunk.RBR7QJIV.js}

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

package/dist/chunks/{chunk.726LQPRB.js → chunk.RGVP2PGD.js}

@@ -14,7 +14,7 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.PDQEBNF2.js";
+} from "./chunk.F6LR5CPM.js";
 import {
   __decorateClass,
   __privateAdd,

package/dist/chunks/{chunk.3L77HLPZ.js → chunk.RHNSVC6G.js}

@@ -64,7 +64,7 @@ selectVariables_fn = async function(searchResponse) {
   const variableEntryIds = __privateGet(this, _host).selectedVariableEntryIds.split(",");
   const variables = searchResponse.variables.filter((variable) => {
     return variableEntryIds.includes(variable.dataFieldId) || variableEntryIds.includes(
-      `${variable.dataProductShortName}_${variable.dataProductVersion}_${variable.dataFieldShortName}`
+      `${variable.dataProductShortName}_${variable.dataProductVersion}_${variable.dataFieldAccessName}`
     );
   });
   const missingVariableIds = variableEntryIds.filter(

package/dist/chunks/{chunk.36BIJ4RM.js → chunk.RKL5NCF4.js}

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

package/dist/chunks/{chunk.YA3XIX6D.js → chunk.RXEFTALO.js}

@@ -1,6 +1,6 @@
 import {
   TerraAlert
-} from "./chunk.BCQN6JPN.js";
+} from "./chunk.ISLJNUUO.js";
 
 // src/react/alert/index.ts
 import * as React from "react";

package/dist/chunks/{chunk.KMP2YL3J.js → chunk.SJ7YHHIO.js}

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

package/dist/chunks/{chunk.PQXCSI54.js → chunk.VGQB5PX6.js}

@@ -1,6 +1,6 @@
 import {
   TerraSpatialPicker
-} from "./chunk.UDBHYT6P.js";
+} from "./chunk.Q5J7IXTH.js";
 
 // src/components/spatial-picker/spatial-picker.ts
 var spatial_picker_default = TerraSpatialPicker;

package/dist/chunks/{chunk.V7TEVJGU.js → chunk.VOR535WK.js}

@@ -1,6 +1,6 @@
 import {
   TerraTimeSeries
-} from "./chunk.P76PWNBR.js";
+} from "./chunk.6CAOH2VO.js";
 
 // src/components/time-series/time-series.ts
 var time_series_default = TerraTimeSeries;

package/dist/chunks/{chunk.6GTVVQL6.js → chunk.VXZGJJHW.js}

@@ -1,6 +1,6 @@
 import {
   TerraTimeAverageMap
-} from "./chunk.D7JTQAIC.js";
+} from "./chunk.CVLSHUIX.js";
 
 // src/components/time-average-map/time-average-map.ts
 var time_average_map_default = TerraTimeAverageMap;

package/dist/chunks/{chunk.TLFU6OKY.js → chunk.W2S55TOA.js}

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

package/dist/chunks/{chunk.NYAHNTHZ.js → chunk.W77TBP74.js}

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

package/dist/chunks/{chunk.GB7VMMBH.js → chunk.WEQYQLHR.js}

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

package/dist/chunks/{chunk.LCJZN2D6.js → chunk.WSICVUAH.js}

@@ -1,6 +1,6 @@
 import {
   TerraDatePicker
-} from "./chunk.JNAS5EXZ.js";
+} from "./chunk.OOKQ7OBO.js";
 
 // src/react/date-picker/index.ts
 import * as React from "react";

package/dist/chunks/{chunk.PI2K4KXN.js → chunk.XOSLEAJU.js}

@@ -16,7 +16,7 @@ function getTimeAveragedMapNotebook(host) {
     {
       id: "2733501b-0de4-4067-8aff-864e1b4c76cb",
       cell_type: "code",
-      source: '%pip install -q "terra_ui_components==0.0.79" "anywidget==0.9.15" "pandas"',
+      source: '%pip install -q "terra_ui_components==0.0.80" "anywidget==0.9.15" "pandas"',
       metadata: {
         trusted: true
       },
@@ -34,8 +34,8 @@ function getTimeAveragedMapNotebook(host) {
       cell_type: "code",
       source: `from terra_ui_components import TerraTimeAverageMap
 map = TerraTimeAverageMap()
-map.collection='${host.catalogVariable.dataFieldId.replace(`_${host.catalogVariable.dataFieldShortName}`, "")}'
-map.variable = '${host.catalogVariable.dataFieldShortName}'
+map.collection='${host.catalogVariable.dataFieldId.replace(`_${host.catalogVariable.dataFieldAccessName}`, "")}'
+map.variable = '${host.catalogVariable.dataFieldAccessName}'
 map.startDate = '${host.startDate}'
 map.endDate = '${host.endDate}'
 map.location = '${host.location}'

package/dist/chunks/{chunk.VB3Q6HJ5.js → chunk.XPINC4UJ.js}

@@ -4,10 +4,10 @@ import {
 } from "./chunk.4MGGBJBD.js";
 import {
   TerraLogin
-} from "./chunk.U3WSNKQU.js";
+} from "./chunk.FPBRF5AJ.js";
 import {
   TerraDatePicker
-} from "./chunk.JNAS5EXZ.js";
+} from "./chunk.OOKQ7OBO.js";
 import {
   DataSubsetterController
 } from "./chunk.QZS6UUDI.js";
@@ -16,16 +16,16 @@ import {
 } from "./chunk.5ASTHFQ2.js";
 import {
   TerraSpatialPicker
-} from "./chunk.UDBHYT6P.js";
+} from "./chunk.Q5J7IXTH.js";
 import {
   AuthController
-} from "./chunk.XYBXGKW4.js";
+} from "./chunk.5ZVZSHM5.js";
 import {
   TerraAccordion
-} from "./chunk.ZRFR24TJ.js";
+} from "./chunk.4MMO34P3.js";
 import {
   TerraIcon
-} from "./chunk.3KPQL5G4.js";
+} from "./chunk.BJH53TIX.js";
 import {
   getBasePath
 } from "./chunk.PBC3S6IG.js";
@@ -35,7 +35,7 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.PDQEBNF2.js";
+} from "./chunk.F6LR5CPM.js";
 import {
   __decorateClass,
   __privateAdd,

package/dist/chunks/{chunk.MF45I5UH.js → chunk.YIWN7HCE.js}

@@ -1,6 +1,6 @@
 import {
   TerraDataSubsetter
-} from "./chunk.VB3Q6HJ5.js";
+} from "./chunk.XPINC4UJ.js";
 
 // src/components/data-subsetter/data-subsetter.ts
 var data_subsetter_default = TerraDataSubsetter;

package/dist/chunks/{chunk.ZUGOXLVC.js → chunk.ZC2QEVTM.js}

@@ -1,6 +1,6 @@
 import {
   TerraVariableKeywordSearch
-} from "./chunk.4BNQLM4V.js";
+} from "./chunk.GR6RKF6C.js";
 
 // src/components/variable-keyword-search/variable-keyword-search.ts
 var variable_keyword_search_default = TerraVariableKeywordSearch;

package/dist/chunks/{chunk.QXPJQYQJ.js → chunk.ZLILHVPF.js}

@@ -1,6 +1,6 @@
 import {
   TerraSkeleton
-} from "./chunk.OHJNBJ5O.js";
+} from "./chunk.I6YFRSN7.js";
 
 // src/components/skeleton/skeleton.ts
 var skeleton_default = TerraSkeleton;

package/dist/chunks/{chunk.I5R7IHPD.js → chunk.ZLZMXN2L.js}

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

package/dist/components/accordion/accordion.component.js

@@ -1,7 +1,7 @@
 import {
   TerraAccordion
-} from "../../chunks/chunk.ZRFR24TJ.js";
-import "../../chunks/chunk.3KPQL5G4.js";
+} from "../../chunks/chunk.4MMO34P3.js";
+import "../../chunks/chunk.BJH53TIX.js";
 import "../../chunks/chunk.CIFC3RF3.js";
 import "../../chunks/chunk.AZXB7ZHM.js";
 import "../../chunks/chunk.7CMA526Q.js";
@@ -9,7 +9,7 @@ import "../../chunks/chunk.KUSRVQBO.js";
 import "../../chunks/chunk.PBC3S6IG.js";
 import "../../chunks/chunk.MQOXBVDK.js";
 import "../../chunks/chunk.DTUHBE3U.js";
-import "../../chunks/chunk.PDQEBNF2.js";
+import "../../chunks/chunk.F6LR5CPM.js";
 import "../../chunks/chunk.V3EFWONT.js";
 import "../../chunks/chunk.LDCRCQNJ.js";
 import "../../chunks/chunk.TVFCHGU3.js";

package/dist/components/accordion/accordion.js

@@ -1,8 +1,8 @@
 import {
   accordion_default
-} from "../../chunks/chunk.EX6W53NJ.js";
-import "../../chunks/chunk.ZRFR24TJ.js";
-import "../../chunks/chunk.3KPQL5G4.js";
+} from "../../chunks/chunk.IFQMQ2MS.js";
+import "../../chunks/chunk.4MMO34P3.js";
+import "../../chunks/chunk.BJH53TIX.js";
 import "../../chunks/chunk.CIFC3RF3.js";
 import "../../chunks/chunk.AZXB7ZHM.js";
 import "../../chunks/chunk.7CMA526Q.js";
@@ -10,7 +10,7 @@ import "../../chunks/chunk.KUSRVQBO.js";
 import "../../chunks/chunk.PBC3S6IG.js";
 import "../../chunks/chunk.MQOXBVDK.js";
 import "../../chunks/chunk.DTUHBE3U.js";
-import "../../chunks/chunk.PDQEBNF2.js";
+import "../../chunks/chunk.F6LR5CPM.js";
 import "../../chunks/chunk.V3EFWONT.js";
 import "../../chunks/chunk.LDCRCQNJ.js";
 import "../../chunks/chunk.TVFCHGU3.js";