@nasa-terra/components 0.0.167 → 0.0.169

package/dist/chunks/chunk.2MA2LAWJ.js

@@ -0,0 +1,26 @@
+import {
+  TerraRadioGroup
+} from "./chunk.5MD7WIHY.js";
+
+// src/react/radio-group/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "terra-radio-group";
+TerraRadioGroup.define("terra-radio-group");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraRadioGroup,
+  react: React,
+  events: {
+    onTerraChange: "terra-change",
+    onTerraInput: "terra-input",
+    onTerraInvalid: "terra-invalid"
+  },
+  displayName: "TerraRadioGroup"
+});
+var radio_group_default = reactWrapper;
+
+export {
+  radio_group_default
+};

package/dist/chunks/chunk.3BXIF2L6.js

@@ -0,0 +1,123 @@
+import {
+  tag_styles_default
+} from "./chunk.6NI3YPRS.js";
+import {
+  TerraIcon
+} from "./chunk.R2FIROFJ.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.JEAP7TNI.js";
+import {
+  __decorateClass
+} from "./chunk.SHKVBVTI.js";
+
+// src/components/tag/tag.component.ts
+import { property } from "lit/decorators.js";
+import { html, nothing } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+var TerraTag = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "content";
+    this.size = "medium";
+    this.iconLibrary = "default";
+    this.stack = false;
+    this.dark = false;
+    this.handleClick = (e) => {
+      if (this.variant === "topic") {
+        this.emit("terra-click", { detail: { originalEvent: e } });
+      }
+    };
+  }
+  render() {
+    const isLink = this.variant === "topic" && this.href;
+    const isContent = this.variant === "content";
+    const baseClasses = {
+      tag: true,
+      "tag--content": isContent,
+      "tag--topic": this.variant === "topic",
+      "tag--urgent": this.variant === "urgent",
+      "tag--small": this.size === "small",
+      "tag--medium": this.size === "medium",
+      "tag--large": this.size === "large"
+    };
+    const content = html`
+            ${isContent ? html`
+                      <span
+                          part="icon"
+                          class="${classMap({
+      tag__icon: true,
+      "tag__icon--small": this.size === "small",
+      "tag__icon--medium": this.size === "medium",
+      "tag__icon--large": this.size === "large"
+    })}"
+                      >
+                          <slot name="icon">
+                              ${this.icon ? html`
+                                        <terra-icon
+                                            name="${this.icon}"
+                                            library="${this.iconLibrary}"
+                                        ></terra-icon>
+                                    ` : nothing}
+                          </slot>
+                      </span>
+                  ` : nothing}
+            <span part="label" class="tag__label">
+                <slot></slot>
+            </span>
+        `;
+    if (isLink) {
+      return html`
+                <a
+                    part="base"
+                    href="${this.href}"
+                    class="${classMap(baseClasses)}"
+                    @click="${this.handleClick}"
+                >
+                    ${content}
+                </a>
+            `;
+    }
+    return html`
+            <div
+                part="base"
+                class="${classMap(baseClasses)}"
+                @click="${this.handleClick}"
+                role="${this.variant === "topic" ? "button" : nothing}"
+                tabindex="${this.variant === "topic" && !this.href ? "0" : nothing}"
+            >
+                ${content}
+            </div>
+        `;
+  }
+};
+TerraTag.styles = [component_styles_default, tag_styles_default];
+TerraTag.dependencies = {
+  "terra-icon": TerraIcon
+};
+__decorateClass([
+  property({ reflect: true })
+], TerraTag.prototype, "variant", 2);
+__decorateClass([
+  property({ reflect: true })
+], TerraTag.prototype, "size", 2);
+__decorateClass([
+  property({ reflect: true })
+], TerraTag.prototype, "icon", 2);
+__decorateClass([
+  property({ reflect: true })
+], TerraTag.prototype, "iconLibrary", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], TerraTag.prototype, "stack", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], TerraTag.prototype, "dark", 2);
+__decorateClass([
+  property()
+], TerraTag.prototype, "href", 2);
+
+export {
+  TerraTag
+};

package/dist/chunks/chunk.3GTYR5QQ.js

@@ -0,0 +1,48 @@
+import {
+  card_styles_default
+} from "./chunk.BTCCRLW3.js";
+import {
+  HasSlotController
+} from "./chunk.7YRJKZ6R.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.JEAP7TNI.js";
+
+// src/components/card/card.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+var TerraCard = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "footer",
+      "header",
+      "image"
+    );
+  }
+  render() {
+    return html`
+            <div
+                part="base"
+                class=${classMap({
+      card: true,
+      "card--has-footer": this.hasSlotController.test("footer"),
+      "card--has-image": this.hasSlotController.test("image"),
+      "card--has-header": this.hasSlotController.test("header")
+    })}
+            >
+                <slot name="image" part="image" class="card__image"></slot>
+                <slot name="header" part="header" class="card__header"></slot>
+                <slot part="body" class="card__body"></slot>
+                <slot name="footer" part="footer" class="card__footer"></slot>
+            </div>
+        `;
+  }
+};
+TerraCard.styles = [component_styles_default, card_styles_default];
+
+export {
+  TerraCard
+};

package/dist/chunks/chunk.3SUPGFZP.js

@@ -0,0 +1,11 @@
+import {
+  TerraProgressBar
+} from "./chunk.COEHW6OY.js";
+
+// src/components/progress-bar/progress-bar.ts
+var progress_bar_default = TerraProgressBar;
+TerraProgressBar.define("terra-progress-bar");
+
+export {
+  progress_bar_default
+};

package/dist/chunks/chunk.3TCKFLXO.js

@@ -0,0 +1,25 @@
+import {
+  TerraTimeSeries
+} from "./chunk.YRAXSV5D.js";
+
+// src/react/time-series/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "terra-time-series";
+TerraTimeSeries.define("terra-time-series");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraTimeSeries,
+  react: React,
+  events: {
+    onTerraDateRangeChange: "terra-date-range-change",
+    onTerraTimeSeriesDataChange: "terra-time-series-data-change"
+  },
+  displayName: "TerraTimeSeries"
+});
+var time_series_default = reactWrapper;
+
+export {
+  time_series_default
+};

package/dist/chunks/chunk.42U67QA6.js

@@ -0,0 +1,24 @@
+import {
+  TerraTag
+} from "./chunk.3BXIF2L6.js";
+
+// src/react/tag/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "terra-tag";
+TerraTag.define("terra-tag");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraTag,
+  react: React,
+  events: {
+    onTerraClick: "terra-click"
+  },
+  displayName: "TerraTag"
+});
+var tag_default = reactWrapper;
+
+export {
+  tag_default
+};

package/dist/chunks/chunk.4BRHJBL7.js

@@ -0,0 +1,362 @@
+// src/components/data-access/data-access.styles.ts
+import { css } from "lit";
+var data_access_styles_default = css`
+    :host {
+        display: block;
+    }
+
+    .filters-compact {
+        margin-bottom: 12px;
+    }
+
+    .search-row {
+        position: relative;
+        display: flex;
+        align-items: center;
+        margin-bottom: 10px;
+    }
+
+    .search-icon {
+        position: absolute;
+        left: 12px;
+        color: #666;
+        pointer-events: none;
+    }
+
+    .search-input {
+        width: 100%;
+        padding: 12px 14px 12px 36px;
+        border: 1px solid #d0d5dd;
+        border-radius: 24px;
+        font-size: 16px;
+        outline: none;
+        transition:
+            box-shadow 0.2s,
+            border-color 0.2s;
+    }
+
+    .search-input:focus {
+        border-color: #98c3ff;
+        box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15);
+    }
+
+    .toggle-row {
+        display: flex;
+        gap: 14px;
+        margin-bottom: 8px;
+    }
+
+    .filter {
+        position: relative;
+    }
+
+    .filter-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        padding: 10px 16px;
+        border: 2px solid #d0d5dd;
+        border-radius: 24px;
+        background: #f6f7f9;
+        color: #333;
+        cursor: pointer;
+        font-size: 16px;
+        transition:
+            border-color 0.15s,
+            background 0.15s,
+            color 0.15s;
+    }
+
+    .filter-btn.active {
+        border-color: #2f6bb8;
+        background: #e9f1ff;
+        color: #1f4f8a;
+    }
+
+    .clear-badge {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 20px;
+        height: 20px;
+        margin-left: 4px;
+        padding: 0;
+        background: rgba(255, 255, 255, 0.8);
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        border-radius: 50%;
+        font-size: 16px;
+        line-height: 1;
+        color: #666;
+        cursor: pointer;
+        transition: all 0.15s;
+    }
+
+    .clear-badge:hover {
+        background: white;
+        color: #333;
+        border-color: rgba(0, 0, 0, 0.2);
+    }
+
+    .filter-row {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        margin: 8px 0 4px;
+        flex-wrap: wrap;
+    }
+
+    .filter-field {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+
+    .inline-control {
+        min-width: 220px;
+    }
+
+    .inline-map {
+        min-width: 320px;
+        max-width: 600px;
+        flex: 1 1 auto;
+    }
+
+    .clear-btn {
+        background: none;
+        border: none;
+        color: #888;
+        font-size: 20px;
+        cursor: pointer;
+        padding: 4px 8px;
+    }
+
+    .clear-btn:hover {
+        color: #444;
+    }
+
+    .divider {
+        height: 1px;
+        background: #e5e7eb;
+        margin: 10px 0;
+    }
+
+    .results-info {
+        margin-top: 8px;
+        padding-top: 10px;
+        border-top: 1px solid #e5e7eb;
+        color: #333;
+        font-size: 16px;
+    }
+
+    @media (max-width: 768px) {
+        .inline-map {
+            min-width: 100%;
+        }
+    }
+
+    .grid-container {
+        position: relative;
+        width: 100%;
+    }
+
+    .datepicker-container,
+    .spatialpicker-container {
+        padding: 1rem;
+    }
+
+    .available-range {
+        font-size: 0.8rem;
+    }
+
+    /* Remove border/background from terra-data-grid container since we handle it here if needed */
+    .grid-container terra-data-grid::part(base) {
+        border: none;
+        background: transparent;
+    }
+
+    .download-dropdown {
+        position: relative;
+        display: inline-block;
+        z-index: 800;
+    }
+
+    .download-btn {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 10px 16px;
+        background: #0066cc;
+        color: white;
+        border: none;
+        border-radius: 6px;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s;
+    }
+
+    .download-btn:hover {
+        background: #0056b3;
+    }
+
+    .download-icon-small {
+        width: 16px;
+        height: 16px;
+    }
+
+    .dropdown-arrow {
+        width: 16px;
+        height: 16px;
+        transition: transform 0.2s;
+    }
+
+    .download-menu {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        background: white;
+        border: 1px solid #dee2e6;
+        border-radius: 6px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        z-index: 801;
+        opacity: 0;
+        visibility: hidden;
+        transform: translateY(-10px);
+        transition: all 0.2s;
+        margin-top: 4px;
+        min-width: 200px;
+    }
+
+    .download-menu.open {
+        opacity: 1;
+        visibility: visible;
+        transform: translateY(0);
+    }
+
+    .download-dropdown.open .dropdown-arrow {
+        transform: rotate(180deg);
+    }
+
+    .jupyter-btn {
+        background: #fff;
+        color: #333;
+        border: 1px solid #eee;
+        border-radius: 4px;
+        padding: 6px 12px;
+        font-size: 1em;
+        cursor: pointer;
+        transition:
+            background 0.2s,
+            box-shadow 0.2s;
+        margin-left: 8px;
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+    }
+
+    .jupyter-btn:hover,
+    .jupyter-btn:focus {
+        background: #f8f8f8;
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+        outline: none;
+    }
+
+    .download-option {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        width: 100%;
+        padding: 12px 16px;
+        background: none;
+        border: none;
+        text-align: left;
+        font-size: 14px;
+        color: #333;
+        cursor: pointer;
+        transition: background-color 0.2s;
+    }
+
+    .download-option:hover {
+        background: #f8f9fa;
+    }
+
+    .download-option:first-child {
+        border-radius: 6px 6px 0 0;
+    }
+
+    .download-option:last-child {
+        border-radius: 0 0 6px 6px;
+    }
+
+    .cloud-cover-dropdown {
+        position: absolute;
+        top: calc(100% + 0.5rem);
+        left: 0;
+        z-index: 1000;
+        width: 400px;
+        max-width: 90vw;
+        background: white;
+        border-radius: 0.5rem;
+        box-shadow:
+            0 10px 15px -3px rgba(0, 0, 0, 0.1),
+            0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        padding: 1rem;
+        opacity: 0;
+        visibility: hidden;
+        transform: translateY(-10px);
+        transition: all 0.2s;
+        pointer-events: none;
+    }
+
+    .cloud-cover-dropdown.open {
+        opacity: 1;
+        visibility: visible;
+        transform: translateY(0);
+        pointer-events: auto;
+    }
+
+    .cloud-cover-dropdown terra-slider {
+        width: 100%;
+        min-width: 300px;
+        padding-top: 20px;
+    }
+
+    .loading-modal {
+        background: white;
+        padding: 24px;
+        border-radius: 8px;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        position: absolute;
+        top: 100px;
+        width: 200px;
+        height: 100px;
+        left: 50%;
+        margin-left: -100px;
+    }
+
+    .dropdown-header {
+        display: flex;
+        justify-content: flex-end;
+        padding: 4px 6px;
+    }
+
+    .panel-close {
+        border: none;
+        background: transparent;
+        font-size: 18px;
+        cursor: pointer;
+        line-height: 1;
+    }
+
+    .panel-close:hover {
+        opacity: 0.7;
+    }
+`;
+
+export {
+  data_access_styles_default
+};

package/dist/chunks/chunk.4CQ6JLXT.js

@@ -0,0 +1,11 @@
+import {
+  TerraPlot
+} from "./chunk.6YM2VNJ6.js";
+
+// src/components/plot/plot.ts
+var plot_default = TerraPlot;
+TerraPlot.define("terra-plot");
+
+export {
+  plot_default
+};

package/dist/chunks/chunk.4MR3XQYZ.js

@@ -0,0 +1,11 @@
+import {
+  TerraTimeSeries
+} from "./chunk.YRAXSV5D.js";
+
+// src/components/time-series/time-series.ts
+var time_series_default = TerraTimeSeries;
+TerraTimeSeries.define("terra-time-series");
+
+export {
+  time_series_default
+};

package/dist/chunks/chunk.4YBTJRDB.js

@@ -0,0 +1,21 @@
+import {
+  TerraDataSubsetterHistory
+} from "./chunk.XQPZ7LL7.js";
+
+// src/react/data-subsetter-history/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "terra-data-subsetter-history";
+TerraDataSubsetterHistory.define("terra-data-subsetter-history");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraDataSubsetterHistory,
+  react: React,
+  events: {},
+  displayName: "TerraDataSubsetterHistory"
+});
+var data_subsetter_history_default = reactWrapper;
+
+export {
+  data_subsetter_history_default
+};