@nasa-terra/components 0.0.6 → 0.0.9

package/cdn/chunks/chunk.ETRGUHQA.js

@@ -0,0 +1,128 @@
+import {
+  loader_styles_default
+} from "./chunk.NYEDLELY.js";
+import {
+  e
+} from "./chunk.YVSJQ4KD.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.XTN2KUNR.js";
+import {
+  n,
+  r
+} from "./chunk.K4EJQG4O.js";
+import {
+  T,
+  x
+} from "./chunk.PQFHJHNO.js";
+import {
+  __decorateClass
+} from "./chunk.6QUGTGJO.js";
+
+// src/components/loader/loader.component.ts
+var TerraLoader = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "large";
+    this.percent = "0";
+    this.indeterminate = false;
+    this._currentPercent = 0;
+  }
+  formatPercent(percent) {
+    if (parseInt(percent) > 100) {
+      percent = "100";
+    }
+    return parseInt(percent) > 0 ? percent + "%" : "";
+  }
+  render() {
+    this._currentPercent = parseInt(this.percent);
+    return x`
+            <div
+                class=${e({
+      loader: true,
+      "loader--small": this.variant === "small",
+      "loader--large": this.variant === "large",
+      "loader--orbit": this.variant === "orbit"
+    })}
+                aria-valuenow=${this.formatPercent(this.percent)}
+                role="progressbar"
+                tabindex="-1"
+            >
+                ${this.variant === "large" || this.variant === "orbit" ? x`
+                          <div
+                              class="percent ${this.variant == "orbit" ? "number-14" : "number-11"}"
+                          >
+                              ${this.formatPercent(this.percent)}
+                          </div>
+                      ` : T}
+                ${this.variant === "orbit" ? x`
+                          <svg viewBox="0 0 160 160">
+                              <circle class="planet" />
+
+                              <!-- total length of orbit ellipse = 298.2393493652344 -->
+                              <path
+                                  id="orbit"
+                                  d="M 53.528 96.775 C 73.584 124.975 100.654 140.601 115.393 130.137 C 132.613 117.912 119.246 79.55 105.434 60.525 C 90.233 39.587 60.506 18.543 44.962 30.114 C 29.456 41.657 38.219 75.25 53.528 96.775 Z"
+                              >
+                                  <animate
+                                      attributeName="stroke-dashoffset"
+                                      begin="-0.25s"
+                                      from="300"
+                                      to="0"
+                                      dur="1.5s"
+                                      repeatCount="indefinite"
+                                  />
+                              </path>
+
+                              <circle class="moon">
+                                  <animateMotion
+                                      begin="0s"
+                                      dur="1.5s"
+                                      repeatCount="indefinite"
+                                  >
+                                      <mpath href="#orbit"></mpath>
+                                  </animateMotion>
+                              </circle>
+
+                              <path
+                                  id="mask"
+                                  class="planet"
+                                  d="M 130.176 80.041 C 130.176 41.552 88.321 17.697 55.544 36.652 C 40.081 45.594 30.865 62.428 30.47 80.094 L 130.176 80.041 Z"
+                                  style="transform-box: fill-box; transform-origin: 49.8347% 100.62%;"
+                                  transform="matrix(-0.350367, -0.936613, 0.936613, -0.350367, -0.148117, -0.20884)"
+                              />
+                          </svg>
+                      ` : T}
+                ${this.variant === "small" || this.variant === "large" ? x`
+                          <svg
+                              viewBox=${this.variant == "small" ? "0 0 30 30" : "0 0 52 52"}
+                              aria-hidden="true"
+                              style="--progress: ${this.percent}"
+                              class="circular-progress ${this.indeterminate ? "indeterminate" : ""}"
+                          >
+                              <circle class="bg"></circle>
+                              <circle class="fg"></circle>
+                          </svg>
+                      ` : T}
+            </div>
+        `;
+  }
+};
+TerraLoader.styles = [component_styles_default, loader_styles_default];
+__decorateClass([
+  n({ reflect: true })
+], TerraLoader.prototype, "variant", 2);
+__decorateClass([
+  n({ type: String })
+], TerraLoader.prototype, "percent", 2);
+__decorateClass([
+  n({ type: Boolean })
+], TerraLoader.prototype, "indeterminate", 2);
+__decorateClass([
+  r()
+], TerraLoader.prototype, "_currentPercent", 2);
+
+export {
+  TerraLoader
+};

package/{dist/chunks/chunk.HOM4WTOH.js → cdn/chunks/chunk.EVWEXJVX.js}

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

package/cdn/chunks/{chunk.PTWY7M47.js → chunk.EZSX4R2K.js}

@@ -8,11 +8,15 @@ var plot_styles_default = i`
         display: block;
     }
 
+    :host::part(base) {
+        aspect-ratio: 4 / 3;
+    }
+
     /**
    * !Alert! The rest of this stylesheet is auto-generated!
    * Unfortunately Plotly does not work well with Shadow DOM AND they don't supply a CSS file at all for us to import
    * Because of this, a working solution is to copy their CSS over.
-   * 
+   *
    * Given that they use CSS, you can do npx -y sass ./node_modules/plotly.js/src/css/style.scss > plotly.css
    * to generate the CSS, then copy the contents of plotly.css into this file
    */

package/cdn/chunks/{chunk.42JFVPPT.js → chunk.GCXPHNE2.js}

@@ -1,10 +1,10 @@
+import {
+  cherryPickDocInfo
+} from "./chunk.7JHEI2UU.js";
 import {
   h,
   s
 } from "./chunk.UGTZ22DI.js";
-import {
-  cherryPickDocInfo
-} from "./chunk.5DPGWL3Y.js";
 import {
   __privateAdd,
   __privateGet,

package/cdn/chunks/{chunk.FWJJZ2ZQ.js → chunk.HPHAKMYE.js}

@@ -1,16 +1,16 @@
+import {
+  chip_styles_default
+} from "./chunk.Y4WP4EBM.js";
 import {
   e
 } from "./chunk.YVSJQ4KD.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.H2SFUFU3.js";
+} from "./chunk.XTN2KUNR.js";
 import {
   n
 } from "./chunk.K4EJQG4O.js";
-import {
-  chip_styles_default
-} from "./chunk.YW2OER7Y.js";
 import {
   x
 } from "./chunk.PQFHJHNO.js";
@@ -34,7 +34,6 @@ var TerraChip = class extends TerraElement {
   render() {
     return x`
             <div
-                id="chip"
                 class="${e({
       // Sizes
       "chip--small": this.size === "small",
@@ -69,7 +68,7 @@ var TerraChip = class extends TerraElement {
                     >
                         <path
                             d="M 227 56.036 H 265 V 227.037 H 436 V 265.036 H 265 V 436.036 H 227 V 265.036 H 56 V 227.037 H 227 Z"
-                            style="fill: #909090; paint-order: fill; fill-rule: nonzero; stroke-width: 0px; transform-origin: 246px 246.036px;"
+                            style="paint-order: fill; fill-rule: nonzero; stroke-width: 0px; transform-origin: 246px 246.036px;"
                             transform="matrix(0.707107007504, 0.707107007504, -0.707107007504, 0.707107007504, -9.98393e-7, -0.000026419743)"
                         ></path>
                     </svg>

package/cdn/chunks/{chunk.HUJ7CIC7.js → chunk.KOO6JUIP.js}

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

package/{dist/chunks/chunk.H32ZL2W2.js → cdn/chunks/chunk.KURQ25QR.js}

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

package/cdn/chunks/{chunk.IKBILRIY.js → chunk.NYEDLELY.js}

@@ -17,19 +17,7 @@ var loader_styles_default = i`
         height: var(--size);
     }
 
-    /* Theme modes */
-
-    .loader--dark {
-        color: white;
-        background-color: black;
-    }
-
-    .loader--light {
-        color: black;
-        background-color: white;
-    }
-
-    /* Loader sizes */
+    /* Loader variations */
 
     .loader--large {
         --size: 52px;
@@ -41,6 +29,30 @@ var loader_styles_default = i`
         --stroke-width: 3.5px;
     }
 
+    .loader--orbit {
+        --size: 100px;
+    }
+
+    .planet {
+        fill: var(--terra-color-carbon-20);
+        cx: 80px;
+        cy: 80px;
+        r: 50px;
+    }
+
+    .moon {
+        fill: var(--terra-color-nasa-blue);
+        r: 5.5px;
+    }
+
+    #orbit {
+        /* total length of orbit ellipse = 298.2393493652344 */
+        stroke: var(--terra-color-nasa-blue);
+        stroke-width: 2.5px;
+        stroke-dasharray: 250 48;
+        fill: none;
+    }
+
     svg {
         width: var(--size);
         height: var(--size);
@@ -50,10 +62,8 @@ var loader_styles_default = i`
         display: block;
         width: var(--size);
         position: absolute;
-        top: 17px;
+        top: calc((var(--size) / 2) - 10px);
         padding-left: 4px;
-        font-family: sans-serif;
-        font-size: 11px;
         letter-spacing: 0.1rem;
         text-align: center;
     }
@@ -81,7 +91,7 @@ var loader_styles_default = i`
     }
 
     .circular-progress circle.bg {
-        stroke: #ccc;
+        stroke: var(--terra-color-carbon-20);
     }
 
     .circular-progress circle.fg {
@@ -89,7 +99,7 @@ var loader_styles_default = i`
         transform-origin: var(--half-size) var(--half-size);
         stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
         transition: stroke-dasharray 0.3s linear 0s; /* Defines how --dash value changes to stroke-dasharray are animated */
-        stroke: #1c68e3;
+        stroke: var(--terra-color-nasa-blue);
     }
 
     .circular-progress.indeterminate circle.fg {
@@ -100,6 +110,15 @@ var loader_styles_default = i`
         transform-origin: 50% 50%;
     }
 
+    @keyframes dash {
+        from {
+            stroke-dashoffset: 300;
+        }
+        to {
+            stroke-dashoffset: 0;
+        }
+    }
+
     @keyframes spin {
         from {
             transform: rotate(-90deg);

package/cdn/chunks/chunk.O7AXAEKY.js

@@ -0,0 +1,23 @@
+// src/components/browse-variables/repositories/giovanni.repository.ts
+var GIOVANNI_CATALOG_URL = "https://windmill-load-balancer-641499207.us-east-1.elb.amazonaws.com/api/r/giovanni/catalog";
+var GiovanniRepository = class {
+  async searchVariablesAndFacets(_query, _selectedFacetFields, options) {
+    var _a;
+    const response = await fetch(GIOVANNI_CATALOG_URL, {
+      signal: (_a = options == null ? void 0 : options.signal) != null ? _a : null
+    });
+    if (!response.ok) {
+      console.error(response);
+      throw new Error("Failed to fetch catalog");
+    }
+    const result = await response.json();
+    return {
+      facetsByCategory: result.facets,
+      variables: result.variables
+    };
+  }
+};
+
+export {
+  GiovanniRepository
+};

package/{dist/chunks/chunk.7NBRSNIF.js → cdn/chunks/chunk.P7Q72NIS.js}

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

package/cdn/chunks/{chunk.M77HV6VG.js → chunk.PB3BAC36.js}

@@ -1,9 +1,9 @@
 import {
   spatial_picker_styles_default
-} from "./chunk.UOFDZJYP.js";
+} from "./chunk.5FZY6SGS.js";
 import {
   TerraMap
-} from "./chunk.M5OJ3HWZ.js";
+} from "./chunk.2B3T647S.js";
 import {
   StringifyBoundingBox,
   parseBoundingBox
@@ -11,7 +11,7 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.H2SFUFU3.js";
+} from "./chunk.XTN2KUNR.js";
 import {
   e,
   n,
@@ -111,10 +111,8 @@ var TerraSpatialPicker = class extends TerraElement {
                         aria-expanded=${this.isExpanded}
                         @blur=${this._blur}
                     />
-                    <button
-                        aria-controls="map"
-                        aria-expanded=${this.isExpanded}
-                        aria-label="Spatial picker map"
+                    <terra-button
+                        shape="square-left"
                         class="spatial-picker__input_icon_button"
                         @click=${this._click}
                         type="button"
@@ -133,7 +131,7 @@ var TerraSpatialPicker = class extends TerraElement {
                                 d="M9 6.75V15m6-6v8.25m.503 3.498 4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 0 0-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0Z"
                             />
                         </svg>
-                    </button>
+                    </terra-button>
                 </div>
                 ${this.isExpanded ? this.renderMap() : T}
             </div>

package/cdn/chunks/{chunk.OP466O5Y.js → chunk.QPAB2A53.js}

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

package/{dist/chunks/chunk.NZBZKDMB.js → cdn/chunks/chunk.R4AGAL4B.js}

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

package/cdn/chunks/{chunk.MKZRXFCD.js → chunk.SIGRYKYI.js}

@@ -1,32 +1,32 @@
-import {
-  Fuse
-} from "./chunk.NTNL4P6D.js";
-import {
-  n as n2
-} from "./chunk.2XCNCXGV.js";
 import {
   c
 } from "./chunk.PZRCJWJ4.js";
 import {
   h
 } from "./chunk.QB5SASDL.js";
+import {
+  clearSelection,
+  walkToOption
+} from "./chunk.LMGJJIIS.js";
+import {
+  Fuse
+} from "./chunk.NTNL4P6D.js";
+import {
+  n as n2
+} from "./chunk.2XCNCXGV.js";
 import {
   o
 } from "./chunk.QEA4QW6G.js";
 import {
   combobox_styles_default
-} from "./chunk.IBV3HXI5.js";
-import {
-  clearSelection,
-  walkToOption
-} from "./chunk.LMGJJIIS.js";
+} from "./chunk.USC76EZL.js";
 import {
   watch
 } from "./chunk.IUDWCWFV.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.H2SFUFU3.js";
+} from "./chunk.XTN2KUNR.js";
 import {
   n,
   r
@@ -296,9 +296,7 @@ var _TerraCombobox = class _TerraCombobox extends TerraElement {
   render() {
     var _a;
     return x`<search part="base" title="Search through the list.">
-            <label
-                for="combobox"
-                class=${this.hideLabel ? "sr-only" : "search-input-label"}
+            <label for="combobox" class=${this.hideLabel ? "sr-only" : "input-label"}
                 >${this.label}</label
             >
             <div class="search-input-group">
@@ -322,7 +320,8 @@ var _TerraCombobox = class _TerraCombobox extends TerraElement {
                     @input=${__privateGet(this, _handleComboboxChange)}
                     @keydown=${__privateGet(this, _handleKeydown)}
                 />
-                <button
+                <terra-button
+                    shape="square-left"
                     aria-controls="listbox"
                     aria-expanded=${this.isExpanded}
                     aria-label="List of Searchable Items"
@@ -358,7 +357,7 @@ var _TerraCombobox = class _TerraCombobox extends TerraElement {
                                   stroke-width="3"
                               ></circle>
                           </svg>`}
-                </button>
+                </terra-button>
 
                 ${this.hideHelp ? T : x`<p class="search-help">
                           See

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;
     }