@nasa-terra/components 0.0.7 → 0.0.9

package/dist/chunks/chunk.EGZMQ7T7.js

@@ -0,0 +1,35 @@
+// src/components/giovanni-search/lib.ts
+import { html } from "lit";
+var whenIdle = "requestIdleCallback" in window ? requestIdleCallback : requestAnimationFrame;
+function renderSearchResult(listItem) {
+  return html`
+        <li id=${listItem.id} role="option" class="listbox-option">${listItem.id}</li>
+    `;
+}
+function clearSelection(combobox, listbox) {
+  combobox.removeAttribute("aria-activedescendant");
+  listbox.querySelectorAll("[aria-selected]").forEach((option) => option.removeAttribute("aria-selected"));
+}
+function walkToOption(walker, combobox, direction = "next") {
+  const maybeCurrentElement = direction === "next" ? walker.nextNode() : walker.previousNode();
+  if (maybeCurrentElement === null || maybeCurrentElement === walker.root) {
+    walker.parentNode();
+    direction === "next" ? walker.firstChild() : walker.lastChild();
+  }
+  const currentNode = walker.currentNode;
+  whenIdle(() => {
+    currentNode.scrollIntoView({
+      behavior: "auto",
+      block: "nearest"
+    });
+    currentNode.setAttribute("aria-selected", "true");
+    combobox.setAttribute("aria-activedescendant", currentNode.id);
+  });
+}
+
+export {
+  whenIdle,
+  renderSearchResult,
+  clearSelection,
+  walkToOption
+};

package/dist/chunks/{chunk.52JSYSOV.js → chunk.EP3UVTII.js}

@@ -3,7 +3,7 @@ import {
   __privateMethod,
   __spreadProps,
   __spreadValues
-} from "./chunk.RYPAZDXE.js";
+} from "./chunk.GKBF7QGR.js";
 
 // src/components/time-series/time-series.controller.ts
 import { Task, initialState } from "@lit/task";

package/dist/chunks/{chunk.C5OZDL3F.js → chunk.F7HR6Y7D.js}

@@ -2,16 +2,16 @@ import {
   clearSelection,
   walkToOption
 } from "./chunk.LMGJJIIS.js";
+import {
+  combobox_styles_default
+} from "./chunk.7WL3WWGJ.js";
 import {
   watch
-} from "./chunk.ZK7QVWBI.js";
+} from "./chunk.Y6OL24QM.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.RFKXBNLY.js";
-import {
-  combobox_styles_default
-} from "./chunk.JFU3ZCDL.js";
+} from "./chunk.KXP54RWR.js";
 import {
   __decorateClass,
   __privateAdd,
@@ -19,7 +19,7 @@ import {
   __privateSet,
   __spreadProps,
   __spreadValues
-} from "./chunk.RYPAZDXE.js";
+} from "./chunk.GKBF7QGR.js";
 
 // src/components/combobox/combobox.component.ts
 import Fuse from "fuse.js";
@@ -272,9 +272,7 @@ var _TerraCombobox = class _TerraCombobox extends TerraElement {
   render() {
     var _a;
     return html`<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">
@@ -298,7 +296,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"
@@ -334,7 +333,7 @@ var _TerraCombobox = class _TerraCombobox extends TerraElement {
                                   stroke-width="3"
                               ></circle>
                           </svg>`}
-                </button>
+                </terra-button>
 
                 ${this.hideHelp ? nothing : html`<p class="search-help">
                           See

package/dist/chunks/chunk.GHDRVO5M.js

@@ -0,0 +1,125 @@
+// src/components/time-series/time-series.styles.ts
+import { css } from "lit";
+var time_series_styles_default = css`
+    :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/dist/chunks/{chunk.FYST4D4G.js → chunk.GJ5PF473.js}

@@ -1,6 +1,6 @@
 import {
   TerraCombobox
-} from "./chunk.C5OZDL3F.js";
+} from "./chunk.F7HR6Y7D.js";
 
 // src/react/combobox/index.ts
 import * as React from "react";

package/dist/chunks/{chunk.RYPAZDXE.js → chunk.GKBF7QGR.js}

@@ -18,6 +18,18 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __decorateClass = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
@@ -53,6 +65,7 @@ var __privateMethod = (obj, member, method) => {
 export {
   __spreadValues,
   __spreadProps,
+  __objRest,
   __decorateClass,
   __privateGet,
   __privateAdd,

package/dist/chunks/chunk.GR7XHOA3.js

@@ -0,0 +1,52 @@
+// src/components/map/map.styles.ts
+import { css } from "lit";
+var map_styles_default = css`
+    :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
+};

package/dist/chunks/{chunk.RP6DCD5M.js → chunk.GZ7EVLUK.js}

@@ -1,20 +1,20 @@
 import {
   FormControlController,
   validValidityState
-} from "./chunk.NYBJ252W.js";
-import {
-  button_styles_default
-} from "./chunk.SHS42OAD.js";
+} from "./chunk.VN4FDFT7.js";
 import {
   watch
-} from "./chunk.ZK7QVWBI.js";
+} from "./chunk.Y6OL24QM.js";
+import {
+  button_styles_default
+} from "./chunk.APJOA6RL.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.RFKXBNLY.js";
+} from "./chunk.KXP54RWR.js";
 import {
   __decorateClass
-} from "./chunk.RYPAZDXE.js";
+} from "./chunk.GKBF7QGR.js";
 
 // src/components/button/button.component.ts
 import { classMap } from "lit/directives/class-map.js";
@@ -84,13 +84,12 @@ var TerraButton = class extends TerraElement {
     this.hasFocus = false;
     this.invalid = false;
     this.title = "";
-    this.variant = "default";
+    this.variant = "primary";
     this.size = "medium";
     this.caret = false;
     this.disabled = false;
     this.loading = false;
     this.outline = false;
-    this.pill = false;
     this.circle = false;
     this.type = "button";
     this.name = "";
@@ -186,6 +185,24 @@ var TerraButton = class extends TerraElement {
       this.formControlController.updateValidity();
     }
   }
+  setPageLinkIcon(href) {
+    const parsedUrl = new URL(href);
+    const linkDomain = parsedUrl.hostname;
+    const hostDomain = globalThis.location.hostname;
+    return linkDomain === hostDomain ? "outline-arrow-right" : "outline-arrow-up-right";
+  }
+  setFontSize(size) {
+    switch (size) {
+      case "small":
+        return ".8rem";
+      case "medium":
+        return "1.2rem";
+      case "large":
+        return "1.5rem";
+      default:
+        return "1.5rem";
+    }
+  }
   render() {
     const isLink = this.isLink();
     const tag = isLink ? literal`a` : literal`button`;
@@ -197,21 +214,23 @@ var TerraButton = class extends TerraElement {
       "button--default": this.variant === "default",
       "button--primary": this.variant === "primary",
       "button--success": this.variant === "success",
-      "button--neutral": this.variant === "neutral",
       "button--warning": this.variant === "warning",
       "button--danger": this.variant === "danger",
       "button--text": this.variant === "text",
+      "button--pagelink": this.variant === "pagelink",
       "button--small": this.size === "small",
       "button--medium": this.size === "medium",
       "button--large": this.size === "large",
       "button--caret": this.caret,
+      "button--square-left": this.shape === "square-left",
+      "button--square": this.shape === "square",
+      "button--square-right": this.shape === "square-right",
       "button--circle": this.circle,
       "button--disabled": this.disabled,
       "button--focused": this.hasFocus,
       "button--loading": this.loading,
       "button--standard": !this.outline,
       "button--outline": this.outline,
-      "button--pill": this.pill,
       "button--has-label": this.hasSlotController.test("[default]"),
       "button--has-prefix": this.hasSlotController.test("prefix"),
       "button--has-suffix": this.hasSlotController.test("suffix")
@@ -235,7 +254,17 @@ var TerraButton = class extends TerraElement {
       >
         <slot name="prefix" part="prefix" class="button__prefix"></slot>
         <slot part="label" class="button__label"></slot>
-        <slot name="suffix" part="suffix" class="button__suffix"></slot>
+        <slot name="suffix" part="suffix" class="button__suffix">
+            ${this.variant == "pagelink" ? html`
+                          <span>
+                              <terra-icon
+                                  name=${this.setPageLinkIcon(this.href)}
+                                  library="heroicons"
+                                  font-size=${this.setFontSize(this.size)}
+                              ></terra-icon>
+                          </span>
+                      ` : ``}
+        </slot>
       </${tag}>
     `;
   }
@@ -262,6 +291,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], TerraButton.prototype, "caret", 2);
+__decorateClass([
+  property({ reflect: true })
+], TerraButton.prototype, "shape", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], TerraButton.prototype, "disabled", 2);
@@ -271,9 +303,6 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], TerraButton.prototype, "outline", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], TerraButton.prototype, "pill", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], TerraButton.prototype, "circle", 2);

package/dist/chunks/{chunk.FFZEV52Q.js → chunk.HMNI5WGJ.js}

@@ -1,20 +1,20 @@
+import {
+  spatial_picker_styles_default
+} from "./chunk.QEMJLGM4.js";
 import {
   TerraMap
-} from "./chunk.XIRKMIAU.js";
+} from "./chunk.4QQMSQRA.js";
 import {
   StringifyBoundingBox,
   parseBoundingBox
-} from "./chunk.3ZGFXEAJ.js";
-import {
-  spatial_picker_styles_default
-} from "./chunk.ZCNMYQP2.js";
+} from "./chunk.EDWXEF4C.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.RFKXBNLY.js";
+} from "./chunk.KXP54RWR.js";
 import {
   __decorateClass
-} from "./chunk.RYPAZDXE.js";
+} from "./chunk.GKBF7QGR.js";
 
 // src/components/spatial-picker/spatial-picker.component.ts
 import { html, nothing } from "lit";
@@ -104,10 +104,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"
@@ -126,7 +124,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() : nothing}
             </div>

package/dist/chunks/chunk.HWAZFJOD.js

@@ -0,0 +1,120 @@
+import {
+  loader_styles_default
+} from "./chunk.7OKJDEHN.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.KXP54RWR.js";
+import {
+  __decorateClass
+} from "./chunk.GKBF7QGR.js";
+
+// src/components/loader/loader.component.ts
+import { property, state } from "lit/decorators.js";
+import { html, nothing } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+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 html`
+            <div
+                class=${classMap({
+      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" ? html`
+                          <div
+                              class="percent ${this.variant == "orbit" ? "number-14" : "number-11"}"
+                          >
+                              ${this.formatPercent(this.percent)}
+                          </div>
+                      ` : nothing}
+                ${this.variant === "orbit" ? html`
+                          <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>
+                      ` : nothing}
+                ${this.variant === "small" || this.variant === "large" ? html`
+                          <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>
+                      ` : nothing}
+            </div>
+        `;
+  }
+};
+TerraLoader.styles = [component_styles_default, loader_styles_default];
+__decorateClass([
+  property({ reflect: true })
+], TerraLoader.prototype, "variant", 2);
+__decorateClass([
+  property({ type: String })
+], TerraLoader.prototype, "percent", 2);
+__decorateClass([
+  property({ type: Boolean })
+], TerraLoader.prototype, "indeterminate", 2);
+__decorateClass([
+  state()
+], TerraLoader.prototype, "_currentPercent", 2);
+
+export {
+  TerraLoader
+};

package/{cdn/chunks/chunk.AG72D4AT.js → dist/chunks/chunk.I5WKMWQE.js}

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

package/{cdn/chunks/chunk.7VBMSUOT.js → dist/chunks/chunk.IO22JTMO.js}

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

package/{cdn/chunks/chunk.4OMMI4NC.js → dist/chunks/chunk.JTUSKCXM.js}

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