@nasa-terra/components 0.0.66 → 0.0.68

package/dist/chunks/chunk.MEMNTMV2.js

@@ -0,0 +1,183 @@
+import {
+  date_picker_styles_default
+} from "./chunk.XZB6CNAL.js";
+import {
+  TerraButton
+} from "./chunk.VO4JJ7CZ.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.TSIWRLNC.js";
+import {
+  __decorateClass
+} from "./chunk.TVFCHGU3.js";
+
+// src/components/date-picker/date-picker.component.ts
+import { property, query } from "lit/decorators.js";
+import { html } from "lit";
+import "lit-flatpickr";
+var TerraDatePicker = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.range = false;
+    this.allowInput = false;
+    this.altFormat = "F j, Y";
+    this.altInput = false;
+    this.altInputClass = "";
+    this.dateFormat = "Y-m-d";
+    this.enableTime = false;
+    this.time24hr = false;
+    this.weekNumbers = false;
+    this.static = false;
+    this.position = "auto";
+    this.showMonths = 1;
+    this.hideLabel = false;
+    this.label = "Select Date";
+  }
+  firstUpdated() {
+    this.flatpickrElement.addEventListener("change", this.handleChange.bind(this));
+    setTimeout(() => {
+      this.flatpickrElement.shadowRoot.querySelector("input").addEventListener("blur", this.handleBlur.bind(this));
+    }, 250);
+  }
+  handleChange(selectedDates) {
+    var _a, _b;
+    this.selectedDates = {
+      startDate: (_a = selectedDates[0]) == null ? void 0 : _a.toISOString().split("T")[0],
+      endDate: this.range ? (_b = selectedDates[1]) == null ? void 0 : _b.toISOString().split("T")[0] : null
+    };
+    this.emit("terra-change");
+  }
+  handleBlur() {
+    this.handleChange(this.flatpickrElement._instance.selectedDates);
+  }
+  render() {
+    return html`
+            <div class="date-picker">
+                <label
+                    for="date-picker__input"
+                    class=${this.hideLabel ? "sr-only" : "date-picker__input_label"}
+                    >${this.label}</label
+                >
+                <div class="date-picker__input_fields">
+                    <lit-flatpickr
+                        id="date-picker__input"
+                        class="form-control"
+                        .mode=${this.range ? "range" : "single"}
+                        .minDate=${this.minDate}
+                        .maxDate=${this.maxDate}
+                        .defaultDate=${this.range ? [this.startDate, this.endDate].filter(
+      Boolean
+    ) : this.defaultDate}
+                        .allowInput=${this.allowInput}
+                        .altFormat=${this.altFormat}
+                        .altInput=${this.altInput}
+                        .altInputClass=${this.altInputClass}
+                        .dateFormat=${this.dateFormat}
+                        .enableTime=${this.enableTime}
+                        .time24hr=${this.time24hr}
+                        .weekNumbers=${this.weekNumbers}
+                        .static=${this.static}
+                        .position=${this.position}
+                        .showMonths=${this.showMonths}
+                        theme="material_blue"
+                        .onChange="${this.handleChange.bind(this)}"
+                    ></lit-flatpickr>
+                    <terra-button
+                        shape="square-left"
+                        size="medium"
+                        class="date-picker__input_icon_button"
+                        @click=${() => this.flatpickrElement.open()}
+                        type="button"
+                    >
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke-width="1.5"
+                            stroke="currentColor"
+                            class="w-6 h-6"
+                        >
+                            <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5"
+                            />
+                        </svg>
+                    </terra-button>
+                </div>
+            </div>
+        `;
+  }
+};
+TerraDatePicker.styles = [component_styles_default, date_picker_styles_default];
+TerraDatePicker.dependencies = {
+  "terra-button": TerraButton
+};
+__decorateClass([
+  property()
+], TerraDatePicker.prototype, "id", 2);
+__decorateClass([
+  property({ type: Boolean })
+], TerraDatePicker.prototype, "range", 2);
+__decorateClass([
+  property({ attribute: "min-date" })
+], TerraDatePicker.prototype, "minDate", 2);
+__decorateClass([
+  property({ attribute: "max-date" })
+], TerraDatePicker.prototype, "maxDate", 2);
+__decorateClass([
+  property({ attribute: "start-date" })
+], TerraDatePicker.prototype, "startDate", 2);
+__decorateClass([
+  property({ attribute: "end-date" })
+], TerraDatePicker.prototype, "endDate", 2);
+__decorateClass([
+  property({ attribute: "default-date" })
+], TerraDatePicker.prototype, "defaultDate", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "allow-input" })
+], TerraDatePicker.prototype, "allowInput", 2);
+__decorateClass([
+  property({ attribute: "alt-format" })
+], TerraDatePicker.prototype, "altFormat", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "alt-input" })
+], TerraDatePicker.prototype, "altInput", 2);
+__decorateClass([
+  property({ attribute: "alt-input-class" })
+], TerraDatePicker.prototype, "altInputClass", 2);
+__decorateClass([
+  property({ attribute: "date-format" })
+], TerraDatePicker.prototype, "dateFormat", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "enable-time" })
+], TerraDatePicker.prototype, "enableTime", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "time-24hr" })
+], TerraDatePicker.prototype, "time24hr", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "week-numbers" })
+], TerraDatePicker.prototype, "weekNumbers", 2);
+__decorateClass([
+  property({ type: Boolean })
+], TerraDatePicker.prototype, "static", 2);
+__decorateClass([
+  property()
+], TerraDatePicker.prototype, "position", 2);
+__decorateClass([
+  property({ type: Number, attribute: "show-months" })
+], TerraDatePicker.prototype, "showMonths", 2);
+__decorateClass([
+  property({ attribute: "hide-label", type: Boolean })
+], TerraDatePicker.prototype, "hideLabel", 2);
+__decorateClass([
+  property()
+], TerraDatePicker.prototype, "label", 2);
+__decorateClass([
+  query("lit-flatpickr")
+], TerraDatePicker.prototype, "flatpickrElement", 2);
+
+export {
+  TerraDatePicker
+};

package/dist/chunks/chunk.MFI2M54Y.js

@@ -0,0 +1,273 @@
+import {
+  spatial_picker_styles_default
+} from "./chunk.7RT5CEB6.js";
+import {
+  TerraMap
+} from "./chunk.GL5HOXON.js";
+import {
+  StringifyBoundingBox,
+  parseBoundingBox
+} from "./chunk.GMJWNAQG.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.O6SXSDFR.js";
+import {
+  __decorateClass
+} from "./chunk.TVFCHGU3.js";
+
+// src/components/spatial-picker/spatial-picker.component.ts
+import { html, nothing } from "lit";
+import { property, query, state } from "lit/decorators.js";
+var TerraSpatialPicker = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.minZoom = 0;
+    this.maxZoom = 23;
+    this.zoom = 1;
+    this.hasNavigation = true;
+    this.hasCoordTracker = true;
+    this.hasShapeSelector = false;
+    this.initialValue = "";
+    this.hideLabel = false;
+    this.label = "Select Region";
+    this.spatialConstraints = "-180, -90, 180, 90";
+    this.isExpanded = false;
+    this.inline = false;
+    this.showMapOnFocus = false;
+    this.error = "";
+  }
+  setValue(value) {
+    try {
+      this.mapValue = parseBoundingBox(value);
+      this.error = "";
+      this._emitMapChange();
+    } catch (error) {
+      this.error = error instanceof Error ? error.message : "Invalid spatial area (format: LAT, LNG or LAT, LNG, LAT, LNG)";
+    }
+  }
+  _blur(e) {
+    try {
+      this.mapValue = this.spatialInput.value ? parseBoundingBox(this.spatialInput.value) : [];
+      this.error = "";
+    } catch (error) {
+      this.error = error instanceof Error ? error.message : "Invalid spatial area (format: LAT, LNG or LAT, LNG, LAT, LNG)";
+    }
+    this._emitMapChange();
+    const relatedTarget = e.relatedTarget;
+    if (!(relatedTarget == null ? void 0 : relatedTarget.closest("terra-map"))) {
+      this.isExpanded = false;
+    }
+  }
+  _focus() {
+    if (this.showMapOnFocus) {
+      this.isExpanded = true;
+    }
+  }
+  _click() {
+    this.isExpanded = !this.isExpanded;
+  }
+  _emitMapChange() {
+    var _a;
+    const layer = (_a = this.map) == null ? void 0 : _a.getDrawLayer();
+    if (!layer) {
+      return;
+    }
+    if ("getLatLng" in layer) {
+      this.mapValue = layer.getLatLng();
+      this.emit("terra-map-change", {
+        detail: {
+          type: "point" /* POINT */,
+          cause: "draw",
+          latLng: this.mapValue,
+          geoJson: layer.toGeoJSON()
+        }
+      });
+    } else if ("getBounds" in layer) {
+      this.mapValue = layer.getBounds();
+      this.emit("terra-map-change", {
+        detail: {
+          type: "bbox" /* BBOX */,
+          cause: "draw",
+          bounds: this.mapValue,
+          geoJson: layer.toGeoJSON()
+        }
+      });
+    } else {
+      this.mapValue = [];
+    }
+  }
+  open() {
+    this.isExpanded = true;
+  }
+  close() {
+    this.isExpanded = false;
+  }
+  _handleMapChange(event) {
+    switch (event.detail.cause) {
+      case "clear":
+        this.spatialInput.value = "";
+        break;
+      case "draw":
+        if (event.detail.type === "bbox" /* BBOX */) {
+          this.spatialInput.value = StringifyBoundingBox(
+            event.detail.bounds
+          );
+        } else if (event.detail.type === "point" /* POINT */) {
+          this.spatialInput.value = StringifyBoundingBox(
+            event.detail.latLng
+          );
+        }
+        this._emitMapChange();
+        break;
+      default:
+        break;
+    }
+  }
+  firstUpdated() {
+    if (this.initialValue) {
+      this.mapValue = this.initialValue === "" ? [] : parseBoundingBox(this.initialValue);
+    }
+    setTimeout(() => {
+      this.invalidateSize();
+    }, 500);
+  }
+  renderMap() {
+    return html`<terra-map
+            class="${this.inline ? "inline" : ""}"
+            exportparts="map, leaflet-bbox, leaflet-point, leaflet-edit, leaflet-remove"
+            min-zoom=${this.minZoom}
+            max-zoom=${this.maxZoom}
+            zoom=${this.zoom}
+            ?has-coord-tracker=${this.hasCoordTracker}
+            .value=${this.mapValue}
+            ?has-navigation=${this.hasNavigation}
+            ?has-shape-selector=${this.hasShapeSelector}
+            ?hide-bounding-box-selection=${this.hideBoundingBoxSelection}
+            ?hide-point-selection=${this.hidePointSelection}
+            @terra-map-change=${this._handleMapChange}
+        >
+        </terra-map>`;
+  }
+  render() {
+    const expanded = this.inline ? true : this.isExpanded;
+    return html`
+            <div class="spatial-picker">
+                <label
+                    for="spatial-picker__input"
+                    class=${this.hideLabel ? "sr-only" : "spatial-picker__input_label"}
+                    >${this.label}</label
+                >
+                <div class="spatial-picker__input_fields">
+                    <input
+                        id="spatial-picker__input"
+                        value=${this.initialValue}
+                        type="text"
+                        class="spatial-picker__input form-control"
+                        placeholder="${this.spatialConstraints}"
+                        aria-controls="map"
+                        aria-expanded=${expanded}
+                        @blur=${this._blur}
+                        @focus=${this._focus}
+                    />
+                    <terra-button
+                        shape="square-left"
+                        class="spatial-picker__input_icon_button"
+                        @click=${this._click}
+                        type="button"
+                    >
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke-width="1.5"
+                            stroke="currentColor"
+                            class="w-6 h-6"
+                        >
+                            <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                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>
+                    </terra-button>
+                </div>
+                ${this.error ? html`<div class="spatial-picker__error">${this.error}</div>` : nothing}
+                ${expanded ? html`<div
+                          style="${this.inline ? "position: static; width: 100%;" : ""}"
+                      >
+                          ${this.renderMap()}
+                      </div>` : nothing}
+            </div>
+        `;
+  }
+  invalidateSize() {
+    var _a;
+    (_a = this.map) == null ? void 0 : _a.invalidateSize();
+  }
+};
+TerraSpatialPicker.styles = [component_styles_default, spatial_picker_styles_default];
+TerraSpatialPicker.dependencies = {
+  "terra-map": TerraMap
+};
+__decorateClass([
+  property({ attribute: "min-zoom", type: Number })
+], TerraSpatialPicker.prototype, "minZoom", 2);
+__decorateClass([
+  property({ attribute: "max-zoom", type: Number })
+], TerraSpatialPicker.prototype, "maxZoom", 2);
+__decorateClass([
+  property({ type: Number })
+], TerraSpatialPicker.prototype, "zoom", 2);
+__decorateClass([
+  property({ attribute: "has-navigation", type: Boolean })
+], TerraSpatialPicker.prototype, "hasNavigation", 2);
+__decorateClass([
+  property({ attribute: "has-coord-tracker", type: Boolean })
+], TerraSpatialPicker.prototype, "hasCoordTracker", 2);
+__decorateClass([
+  property({ attribute: "has-shape-selector", type: Boolean })
+], TerraSpatialPicker.prototype, "hasShapeSelector", 2);
+__decorateClass([
+  property({ attribute: "hide-bounding-box-selection", type: Boolean })
+], TerraSpatialPicker.prototype, "hideBoundingBoxSelection", 2);
+__decorateClass([
+  property({ attribute: "hide-point-selection", type: Boolean })
+], TerraSpatialPicker.prototype, "hidePointSelection", 2);
+__decorateClass([
+  property({ attribute: "initial-value" })
+], TerraSpatialPicker.prototype, "initialValue", 2);
+__decorateClass([
+  property({ attribute: "hide-label", type: Boolean })
+], TerraSpatialPicker.prototype, "hideLabel", 2);
+__decorateClass([
+  property()
+], TerraSpatialPicker.prototype, "label", 2);
+__decorateClass([
+  property({ attribute: "spatial-constraints" })
+], TerraSpatialPicker.prototype, "spatialConstraints", 2);
+__decorateClass([
+  property({ attribute: "is-expanded", type: Boolean, reflect: true })
+], TerraSpatialPicker.prototype, "isExpanded", 2);
+__decorateClass([
+  property({ type: Boolean })
+], TerraSpatialPicker.prototype, "inline", 2);
+__decorateClass([
+  property({ attribute: "show-map-on-focus", type: Boolean })
+], TerraSpatialPicker.prototype, "showMapOnFocus", 2);
+__decorateClass([
+  state()
+], TerraSpatialPicker.prototype, "mapValue", 2);
+__decorateClass([
+  state()
+], TerraSpatialPicker.prototype, "error", 2);
+__decorateClass([
+  query(".spatial-picker__input")
+], TerraSpatialPicker.prototype, "spatialInput", 2);
+__decorateClass([
+  query("terra-map")
+], TerraSpatialPicker.prototype, "map", 2);
+
+export {
+  TerraSpatialPicker
+};

package/dist/chunks/chunk.MGM5E2VQ.js

@@ -0,0 +1,98 @@
+// src/components/plot-toolbar/plot-toolbar.styles.ts
+import { css } from "lit";
+var plot_toolbar_styles_default = css`
+    :host {
+        display: block;
+    }
+
+    header {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        position: relative;
+        z-index: 10;
+        padding-bottom: 10px;
+    }
+
+    .title {
+        margin: 0;
+        font-size: 1.25rem;
+    }
+
+    .subtitle {
+        font-weight: var(--terra-font-weight-normal);
+        margin: 0;
+        margin-bottom: 0.5em;
+        font-size: 0.875rem;
+    }
+
+    .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 {
+        all: unset;
+        position: absolute;
+        top: calc(100%);
+        right: 0;
+        z-index: 1000;
+        background: white;
+        border: 1px solid #ccc;
+        border-radius: 0.5em;
+        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
+        width: max-content;
+        min-width: 20ch;
+        max-width: 100%;
+        padding: 1em;
+        display: none;
+    }
+
+    menu[data-expanded='true'] {
+        display: block;
+    }
+
+    menu [role='menuitem'] {
+        display: block;
+        list-style: none;
+        margin: 0;
+        padding: 0.5em 0;
+    }
+
+    [role='menuitem'] p {
+        margin-block: 0.5em;
+    }
+
+    menu dt {
+        font-weight: var(--terra-font-weight-semibold);
+    }
+
+    menu dd {
+        font-style: italic;
+        text-wrap: balance;
+    }
+
+    .spacer {
+        padding-block: 1.375rem;
+    }
+`;
+
+export {
+  plot_toolbar_styles_default
+};

package/dist/chunks/chunk.MKU7QBFN.js

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

package/dist/chunks/chunk.NDADYNAA.js

@@ -0,0 +1,11 @@
+import {
+  TerraDataSubsetter
+} from "./chunk.Y7TVB466.js";
+
+// src/components/data-subsetter/data-subsetter.ts
+var data_subsetter_default = TerraDataSubsetter;
+TerraDataSubsetter.define("terra-data-subsetter");
+
+export {
+  data_subsetter_default
+};

package/dist/chunks/chunk.NLADA7XK.js

@@ -0,0 +1,11 @@
+import {
+  TerraIcon
+} from "./chunk.UTXEG3QD.js";
+
+// src/components/icon/icon.ts
+var icon_default = TerraIcon;
+TerraIcon.define("terra-icon");
+
+export {
+  icon_default
+};

package/dist/chunks/chunk.NQYUJ7FK.js

@@ -0,0 +1,24 @@
+import {
+  TerraDataRods
+} from "./chunk.AHGKSSSI.js";
+
+// src/react/data-rods/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "terra-data-rods";
+TerraDataRods.define("terra-data-rods");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraDataRods,
+  react: React,
+  events: {
+    onTerraDateRangeChange: "terra-date-range-change"
+  },
+  displayName: "TerraDataRods"
+});
+var data_rods_default = reactWrapper;
+
+export {
+  data_rods_default
+};