@nasa-terra/components 0.0.7 → 0.0.10

package/cdn/chunks/chunk.PROUWLVJ.js

@@ -0,0 +1,11 @@
+import {
+  TerraBrowseVariables
+} from "./chunk.PS4NQOAX.js";
+
+// src/components/browse-variables/browse-variables.ts
+var browse_variables_default = TerraBrowseVariables;
+TerraBrowseVariables.define("terra-browse-variables");
+
+export {
+  browse_variables_default
+};

package/cdn/chunks/chunk.PS4NQOAX.js

@@ -0,0 +1,198 @@
+import {
+  BrowseVariablesController
+} from "./chunk.7QABLDUG.js";
+import {
+  browse_variables_styles_default
+} from "./chunk.TNP7NVU5.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.LVWJBUI5.js";
+import {
+  n,
+  r
+} from "./chunk.K4EJQG4O.js";
+import {
+  x
+} from "./chunk.PQFHJHNO.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod
+} from "./chunk.6QUGTGJO.js";
+
+// src/components/browse-variables/browse-variables.component.ts
+var _controller, _renderCategorySelect, renderCategorySelect_fn, _renderFacet, renderFacet_fn, _renderVariablesBrowse, renderVariablesBrowse_fn;
+var TerraBrowseVariables = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _renderCategorySelect);
+    __privateAdd(this, _renderFacet);
+    __privateAdd(this, _renderVariablesBrowse);
+    this.catalog = "giovanni";
+    this.selectedFacetFields = [];
+    __privateAdd(this, _controller, new BrowseVariablesController(this));
+    this.handleFacetSelect = (event) => {
+      const target = event.target;
+      if (!target.dataset.facet) {
+        return;
+      }
+      this.selectedFacetFields.push({
+        facet: target.dataset.facet,
+        field: target.innerText.trim()
+      });
+    };
+  }
+  render() {
+    return this.selectedFacetFields.length ? __privateMethod(this, _renderVariablesBrowse, renderVariablesBrowse_fn).call(this) : __privateMethod(this, _renderCategorySelect, renderCategorySelect_fn).call(this);
+  }
+};
+_controller = new WeakMap();
+_renderCategorySelect = new WeakSet();
+renderCategorySelect_fn = function() {
+  var _a, _b, _c, _d, _e, _f;
+  return x`<div class="initial-browse-container">
+            <div class="column">
+                <h2>Research Areas</h2>
+                <ul role="list">
+                    ${(_b = (_a = __privateGet(this, _controller).facetsByCategory) == null ? void 0 : _a.disciplines) == null ? void 0 : _b.map(
+    (field) => x`<li
+                                role="button"
+                                tabindex="0"
+                                aria-selected="false"
+                                data-facet="disciplines"
+                                @click=${this.handleFacetSelect}
+                            >
+                                ${field.name}
+                            </li>`
+  )}
+                </ul>
+            </div>
+
+            <div class="column">
+                <h2>Measurements</h2>
+                <ul role="list">
+                    ${(_d = (_c = __privateGet(this, _controller).facetsByCategory) == null ? void 0 : _c.measurements) == null ? void 0 : _d.map(
+    (field) => x`<li
+                                role="button"
+                                tabindex="0"
+                                aria-selected="false"
+                                data-facet="measurements"
+                                @click=${this.handleFacetSelect}
+                            >
+                                ${field.name}
+                            </li>`
+  )}
+                </ul>
+            </div>
+
+            <div class="column">
+                <h2>Sources</h2>
+                <ul role="list">
+                    ${(_f = (_e = __privateGet(this, _controller).facetsByCategory) == null ? void 0 : _e.platformInstruments) == null ? void 0 : _f.map(
+    (field) => x`<li
+                                role="button"
+                                tabindex="0"
+                                aria-selected="false"
+                                data-facet="platformInstruments"
+                                @click=${this.handleFacetSelect}
+                            >
+                                ${field.name}
+                            </li>`
+  )}
+                </ul>
+            </div>
+        </div>`;
+};
+_renderFacet = new WeakSet();
+renderFacet_fn = function(title, fields, open) {
+  return x`<details ?open=${open}>
+            <summary>${title}</summary>
+
+            ${(fields != null ? fields : []).map(
+    (field) => x`
+                    <div>
+                        <label
+                            ><input type="checkbox" /> ${field.name}
+                            (${field.count})</label
+                        >
+                    </div>
+                `
+  )}
+        </details>`;
+};
+_renderVariablesBrowse = new WeakSet();
+renderVariablesBrowse_fn = function() {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+  return x`<div class="variables-container">
+            <aside class="sidebar">
+                <h2>Filter</h2>
+
+                ${__privateMethod(this, _renderFacet, renderFacet_fn).call(this, "Observations", (_a = __privateGet(this, _controller).facetsByCategory) == null ? void 0 : _a.observations, true)}
+                ${__privateMethod(this, _renderFacet, renderFacet_fn).call(this, "Disciplines", (_b = __privateGet(this, _controller).facetsByCategory) == null ? void 0 : _b.disciplines)}
+                ${__privateMethod(this, _renderFacet, renderFacet_fn).call(this, "Measurements", (_c = __privateGet(this, _controller).facetsByCategory) == null ? void 0 : _c.measurements)}
+                ${__privateMethod(this, _renderFacet, renderFacet_fn).call(this, "Platform / Instrument", (_d = __privateGet(this, _controller).facetsByCategory) == null ? void 0 : _d.platformInstruments)}
+                ${__privateMethod(this, _renderFacet, renderFacet_fn).call(this, "Spatial Resolutions", (_e = __privateGet(this, _controller).facetsByCategory) == null ? void 0 : _e.spatialResolutions)}
+                ${__privateMethod(this, _renderFacet, renderFacet_fn).call(this, "Temporal Resolutions", (_f = __privateGet(this, _controller).facetsByCategory) == null ? void 0 : _f.temporalResolutions)}
+                ${__privateMethod(this, _renderFacet, renderFacet_fn).call(this, "Wavelengths", (_g = __privateGet(this, _controller).facetsByCategory) == null ? void 0 : _g.wavelengths)}
+                ${__privateMethod(this, _renderFacet, renderFacet_fn).call(this, "Depths", (_h = __privateGet(this, _controller).facetsByCategory) == null ? void 0 : _h.depths)}
+                ${__privateMethod(this, _renderFacet, renderFacet_fn).call(this, "Special Features", (_i = __privateGet(this, _controller).facetsByCategory) == null ? void 0 : _i.specialFeatures)}
+                ${__privateMethod(this, _renderFacet, renderFacet_fn).call(this, "Portal", (_j = __privateGet(this, _controller).facetsByCategory) == null ? void 0 : _j.portals)}
+            </aside>
+
+            <main class="content">
+                <section class="group">
+                    <h3>Category</h3>
+
+                    <ul class="variable-list">
+                        ${(_k = __privateGet(this, _controller).variables) == null ? void 0 : _k.map(
+    (variable) => x`
+                                <li tabindex="0" aria-selected="false">
+                                    <input type="checkbox" />
+                                    <strong>${variable.dataFieldLongName}</strong>
+                                    <span class="meta"
+                                        >MERRA-2 • ${variable.dataProductTimeInterval}
+                                        • kg-m2</span
+                                    >
+                                    <div class="details-panel">
+                                        <h4>
+                                            Science Name:
+                                            ${variable.dataFieldLongName}
+                                        </h4>
+                                        <p>
+                                            <strong>Spatial Resolution:</strong>
+                                            ${variable.dataProductSpatialResolution}
+                                        </p>
+                                        <p>
+                                            <strong>Temporal Coverage:</strong>
+                                            ${variable.dataProductBeginDateTime} -
+                                            ${variable.dataProductEndDateTime}
+                                        </p>
+                                        <p>
+                                            <strong>Region Coverage:</strong> Global
+                                        </p>
+                                        <p><strong>Dataset:</strong> MERRA-2</p>
+                                    </div>
+                                </li>
+                            `
+  )}
+                    </ul>
+                </section>
+            </main>
+        </div>`;
+};
+TerraBrowseVariables.styles = [component_styles_default, browse_variables_styles_default];
+__decorateClass([
+  n()
+], TerraBrowseVariables.prototype, "searchQuery", 2);
+__decorateClass([
+  n()
+], TerraBrowseVariables.prototype, "catalog", 2);
+__decorateClass([
+  r()
+], TerraBrowseVariables.prototype, "selectedFacetFields", 2);
+
+export {
+  TerraBrowseVariables
+};

package/cdn/chunks/chunk.Q4J4A5QN.js

@@ -0,0 +1,11 @@
+import {
+  TerraGiovanniSearch
+} from "./chunk.UTSV66LS.js";
+
+// src/components/giovanni-search/giovanni-search.ts
+var giovanni_search_default = TerraGiovanniSearch;
+TerraGiovanniSearch.define("terra-giovanni-search");
+
+export {
+  giovanni_search_default
+};

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

@@ -5,42 +5,18 @@ import {
 // src/components/variable-combobox/variable-combobox.styles.ts
 var variable_combobox_styles_default = i`
     :host {
-        --color-blue--400: #007acc;
-        --color-blue--500: #1c67e3;
-        --color-blue--600: #0b3d91;
-
-        --color-red--400: #f64137;
-        --color-red--500: #b60109;
-
-        --color-neutral--000: #ffffff;
-        --color-neutral--100: #f7f7f7;
-        --color-neutral--200: #d1d1d1;
-        --color-neutral--300: #b9b9bb;
-        --color-neutral--400: #959599;
-        --color-neutral--500: #767676;
-        --color-neutral--600: #58585b;
-        --color-neutral--700: #2e2e32;
-        --color-neutral--800: #1b1b1b;
-
-        --font-family--inter: Inter, sans-serif;
-        --font-family--public-sans: 'Public Sans', sans-serif;
-        --font-family--dm-mono: 'DM Mono', monospace;
-
         --label-height: 1.8125rem;
         --help-height: 1.8125rem;
         --host-height: 5.8125rem;
 
         block-size: var(--terra-block-size, 2.1875rem);
         box-sizing: border-box;
-        color: var(--terra-color-neutral--700, var(--color-neutral--700));
+        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,
-            var(--font-family--public-sans)
-        );
+        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;
@@ -71,12 +47,6 @@ var variable_combobox_styles_default = i`
         box-sizing: inherit;
     }
 
-    .search-input-label {
-        font-family: var(--terra-font-family--inter, var(--font-family--inter));
-        font-weight: 600;
-        line-height: 1.1875rem;
-    }
-
     .search-input-group {
         block-size: 100%;
         display: flex;
@@ -84,16 +54,8 @@ var variable_combobox_styles_default = i`
     }
 
     .combobox {
-        background-color: var(--terra-color-neutral--100, var(--color-neutral--100));
-        block-size: var(--terra-block-size, 2.1875rem);
-        border-block: 2px solid
-            var(--terra-color-neutral--200, var(--color-neutral--200));
-        border-inline-end: 0;
-        border-inline-start: 2px solid
-            var(--terra-color-neutral--200, var(--color-neutral--200));
-        color: currentColor;
+        block-size: var(--terra-block-size, 2.25rem);
         flex: 1 1 auto;
-        font-size: 1rem;
         padding-inline: 0.5rem;
         transition:
             background-color 0.2s ease,
@@ -101,50 +63,25 @@ var variable_combobox_styles_default = i`
     }
 
     .combobox::placeholder {
-        color: var(--terra-color-neutral--600, var(--color-neutral--600));
+        color: var(--terra-color-carbon-60);
     }
 
     .combobox:focus {
-        background-color: var(--terra-color-neutral--000, var(--color-neutral--000));
-        border-color: var(--terra-color-neutral--400, var(--color-neutral--400));
+        border-color: var(--terra-color-carbon-40);
         outline: 0;
     }
 
-    .combobox:focus + .combobox-button {
-        background-color: var(--terra-color-neutral--800, var(--color-neutral--800));
-        border-block-color: var(
-            --terra-color-neutral--400,
-            var(--color-neutral--400)
-        );
-        border-inline-end-color: var(
-            --terra-color-neutral--400,
-            var(--color-neutral--400)
-        );
-    }
-
     .search-input-group:has(.combobox:not(:focus)) + .search-results[open] {
-        border-color: var(--terra-color-neutral--200, var(--color-neutral--200));
+        border-color: var(--terra-color-carbon-30);
     }
 
     .combobox-button {
-        align-items: center;
-        background-color: var(--terra-color-neutral--700, var(--color-neutral--700));
-        block-size: var(--terra-block-size, 2.1875rem);
-        border-block: 2px solid
-            var(--terra-color-neutral--500, var(--color-neutral--500));
-        border-inline-end: 2px solid
-            var(--terra-color-neutral--500, var(--color-neutral--500));
-        border-inline-start: 0;
-        color: var(--terra-color-neutral--000, var(--color-neutral--000));
-        cursor: pointer;
-        display: flex;
-        flex: 0 0 auto;
-        font-size: 1rem;
-        justify-content: center;
+        position: absolute;
+        right: 0;
+        z-index: 2;
         margin-block: 0;
         margin-inline: 0;
         outline: 0;
-        padding-inline: 0.5rem;
         transition:
             background-color 0.2s ease,
             border-color 0.2s ease;
@@ -175,12 +112,13 @@ var variable_combobox_styles_default = i`
     }
 
     .search-help {
-        bottom: 0;
-        color: var(--terra-color-neutral--600, var(--color-neutral--600));
+        color: var(--terra-color-carbon-60);
         flex: 1 1 100%;
-        font-size: 0.875rem;
+        font-size: var(--terra-font-size-small);
+        line-height: var(--terra-line-height-normal);
         margin-block: 0;
         position: absolute;
+        bottom: -10px;
     }
 
     .external-link {
@@ -189,7 +127,7 @@ var variable_combobox_styles_default = i`
     }
 
     .search-results {
-        background-color: var(--terra-color-neutral--000, var(--color-neutral--000));
+        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;
@@ -215,7 +153,7 @@ var variable_combobox_styles_default = i`
     }
 
     .search-results[open] {
-        border-color: var(--terra-color-neutral--400, var(--color-neutral--400));
+        border-color: var(--terra-color-carbon-40);
         content-visibility: auto;
         max-height: calc(33vh - var(--terra-block-size, 2.1875rem));
         opacity: 1;
@@ -223,14 +161,14 @@ var variable_combobox_styles_default = i`
     }
 
     .search-results .updating {
-        font-size: 1.5rem;
+        font-size: var(--terra-font-size-x-large);
         padding-block: 4rem;
         text-align: center;
     }
 
     .search-results .error {
-        color: var(--terra-color-red--500, var(--color-red--500));
-        font-family: var(--terra-font-family--dm-mono, var(--font-family--dm-mono));
+        color: var(--terra-color-nasa-red);
+        font-family: var(--terra-font-family--dm-mono);
         padding-block: 2rem;
     }
 
@@ -244,7 +182,7 @@ var variable_combobox_styles_default = i`
     }
 
     .group-title {
-        font-family: var(--terra-font-family--inter, var(--font-family--inter));
+        font-family: var(--terra-font-family--inter);
         font-weight: 700;
         margin-block: 0;
     }

package/cdn/chunks/chunk.TNP7NVU5.js

@@ -0,0 +1,159 @@
+import {
+  i
+} from "./chunk.PH7RLQK2.js";
+
+// src/components/browse-variables/browse-variables.styles.ts
+var browse_variables_styles_default = i`
+    :host {
+        display: block;
+    }
+
+    .initial-browse-container {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        max-width: 1200px;
+        margin: auto;
+    }
+
+    .column {
+        flex: 1;
+        min-width: 200px;
+        padding: 20px;
+    }
+
+    .column h2 {
+        font-size: 1.2em;
+        margin-bottom: 10px;
+        text-transform: uppercase;
+    }
+
+    ul {
+        list-style: none;
+        padding: 0;
+    }
+
+    li {
+        margin: 5px 0;
+        cursor: pointer;
+    }
+
+    .radio-group {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .radio-group label {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        padding: 5px 0;
+    }
+
+    .radio-group input[type='radio'] {
+        margin-right: 10px;
+    }
+
+    @media (max-width: 768px) {
+        .container {
+            flex-direction: column;
+        }
+        .column {
+            text-align: center;
+        }
+    }
+
+    .variables-container {
+        display: flex;
+        max-width: 1200px;
+        width: 100%;
+    }
+
+    /* Sidebar */
+    .sidebar {
+        width: 250px;
+        flex-shrink: 0;
+        padding: 20px;
+    }
+
+    /* Main Content */
+    .content {
+        flex-grow: 1;
+        padding: 20px;
+    }
+
+    .group h3 {
+        margin-bottom: 5px;
+    }
+
+    /* Variable List */
+    .variable-list {
+        list-style: none;
+        padding: 0;
+    }
+
+    .variable-list li {
+        padding: 10px;
+        border: 1px solid white;
+        margin-bottom: 5px;
+        cursor: pointer;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+    }
+
+    /* Show Details on Hover or Focus */
+    .variable-list li:hover .details-panel,
+    .variable-list li:focus-within .details-panel {
+        display: block;
+    }
+
+    /* Details Panel */
+    .details-panel {
+        display: none;
+        position: absolute;
+        left: 100%;
+        top: 0;
+        width: 250px;
+        background: #fff;
+        padding: 10px;
+        border-radius: 5px;
+        z-index: 200;
+    }
+
+    .details-panel h4 {
+        margin: 0;
+    }
+
+    /* Keyboard Accessibility */
+    .variable-list li:focus {
+        outline: 2px solid white;
+    }
+
+    /* Responsive Layout */
+    @media (max-width: 768px) {
+        .container {
+            flex-direction: column;
+        }
+
+        .sidebar {
+            width: 100%;
+        }
+
+        .details-panel {
+            position: static;
+            width: 100%;
+            display: block;
+            border-top: 1px solid white;
+            margin-top: 5px;
+        }
+
+        .variable-list li:hover .details-panel {
+            display: none; /* Disable hover effect for mobile */
+        }
+    }
+`;
+
+export {
+  browse_variables_styles_default
+};

package/{dist/chunks/chunk.UNE3VYFP.js → cdn/chunks/chunk.TSJ2SKIK.js}

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

package/cdn/chunks/chunk.TZK42POE.js

@@ -0,0 +1,55 @@
+import {
+  i
+} from "./chunk.PH7RLQK2.js";
+
+// src/components/map/map.styles.ts
+var map_styles_default = i`
+    :host {
+        display: block;
+        padding: 16px;
+        background: var(--terra-map-background-color);
+        border: 1px solid var(--terra-map-border-color);
+    }
+
+    .map {
+        aspect-ratio: 4 / 3;
+        border: solid 1px var(--terra-map-border-color);
+    }
+
+    .leaflet-mouse-position-container {
+        color: var(--terra-input-color);
+        padding: 5px;
+        background-color: var(--terra-input-background-color);
+    }
+
+    .leaflet-mouse-position-text {
+        margin: 0;
+        font-weight: 700;
+    }
+
+    .form-control {
+        display: block;
+        width: 100%;
+        height: 36px;
+        padding: 6px 12px;
+        background-image: none;
+        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+        -webkit-transition:
+            border-color ease-in-out 0.15s,
+            box-shadow ease-in-out 0.15s;
+        transition:
+            border-color ease-in-out 0.15s,
+            box-shadow ease-in-out 0.15s;
+    }
+
+    .map__select {
+        width: 100%;
+        box-shadow: none;
+        margin-bottom: 1rem;
+    }
+`;
+
+export {
+  map_styles_default
+};