@nasa-terra/components 0.0.186 → 0.0.187

package/cdn/chunks/chunk.DXKUTB3C.js

@@ -0,0 +1,532 @@
+import {
+  SpatialPickerService
+} from "./chunk.OCTYDGLC.js";
+import {
+  spatial_picker_styles_default
+} from "./chunk.DOOLLPEM.js";
+import {
+  TerraMap
+} from "./chunk.OSJMGCZG.js";
+import {
+  LatLng
+} from "./chunk.SN3T4SQP.js";
+import {
+  TerraDropdown
+} from "./chunk.5YFLB32J.js";
+import {
+  TerraInput
+} from "./chunk.2RJFUFJW.js";
+import {
+  e as e2,
+  n as n2
+} from "./chunk.LRZIT4M2.js";
+import {
+  TerraElement,
+  component_styles_default,
+  e,
+  n,
+  r
+} from "./chunk.UME44J4L.js";
+import {
+  A,
+  b
+} from "./chunk.RRCYT4LP.js";
+import {
+  __decorateClass,
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/spatial-picker/spatial-picker.component.ts
+init_dirname();
+init_buffer();
+init_process();
+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.showBoundingBoxSelection = true;
+    this.showPointSelection = true;
+    this.initialValue = "";
+    this.hideLabel = false;
+    this.label = "Select Region";
+    this.spatialConstraints = "-180, -90, 180, 90";
+    this.isExpanded = false;
+    this.worldWrap = false;
+    this.inline = false;
+    this.showMapOnFocus = false;
+    this.urlState = false;
+    this.helpText = "";
+    this.showClose = false;
+    this.error = "";
+    this.dropdownRef = e2();
+  }
+  set hideBoundingBoxSelection(value) {
+    console.warn(
+      '"hide-bounding-box-selection" is deprecated. Use "show-bounding-box-selection" instead.'
+    );
+    this.showBoundingBoxSelection = !value;
+  }
+  get hideBoundingBoxSelection() {
+    return !this.showBoundingBoxSelection;
+  }
+  set hidePointSelection(value) {
+    console.warn(
+      '"hide-point-selection" is deprecated. Use "show-point-selection" instead.'
+    );
+    this.showPointSelection = !value;
+  }
+  get hidePointSelection() {
+    return !this.showPointSelection;
+  }
+  // ─── Derived helpers ───────────────────────────────────────────────────────
+  get _allowedTypes() {
+    return {
+      allowPoint: this.showPointSelection,
+      allowBbox: this.showBoundingBoxSelection
+    };
+  }
+  firstUpdated() {
+    const urlParams = new URLSearchParams(window.location.search);
+    const spatialParam = urlParams.get("spatial");
+    const seed = this.urlState && spatialParam ? spatialParam : this.initialValue;
+    if (seed) {
+      if (typeof seed === "string") {
+        this._applyValue(seed, { emit: false });
+      } else {
+        this._commit(SpatialPickerService.serialize(seed), seed);
+      }
+    }
+  }
+  // ─── Public API ────────────────────────────────────────────────────────────
+  setValue(value) {
+    this._applyValue(value, { emit: true });
+  }
+  clear() {
+    this._clearValue();
+  }
+  open() {
+    var _a;
+    if (!this.inline)
+      (_a = this.dropdownRef.value) == null ? void 0 : _a.show();
+  }
+  close() {
+    var _a;
+    if (!this.inline)
+      (_a = this.dropdownRef.value) == null ? void 0 : _a.hide();
+  }
+  setOpen(open) {
+    open ? this.open() : this.close();
+  }
+  // ─── Input event handlers ──────────────────────────────────────────────────
+  _input() {
+    var _a;
+    this.error = "";
+    (_a = this.terraInput) == null ? void 0 : _a.setCustomValidity("");
+  }
+  _change() {
+    var _a, _b;
+    this._input();
+    const raw = (_b = (_a = this.terraInput) == null ? void 0 : _a.value) != null ? _b : "";
+    if (!raw.trim()) {
+      this._clearValue();
+      return;
+    }
+    this._validateAndCommit(raw);
+  }
+  _keydown(event) {
+    var _a, _b, _c;
+    if (event.key === " ") {
+      event.stopPropagation();
+      return;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      this._validateAndCommit((_b = (_a = this.terraInput) == null ? void 0 : _a.value) != null ? _b : "");
+      (_c = this.terraInput) == null ? void 0 : _c.blur();
+    }
+  }
+  _blur() {
+    var _a, _b;
+    this._validateAndCommit((_b = (_a = this.terraInput) == null ? void 0 : _a.value) != null ? _b : "");
+  }
+  _focus() {
+    var _a;
+    if (this.showMapOnFocus && !this.inline) {
+      (_a = this.dropdownRef.value) == null ? void 0 : _a.show();
+    }
+  }
+  _click(e3) {
+    e3.stopPropagation();
+    if (!this.inline) {
+      this.isExpanded ? this.close() : this.open();
+    }
+  }
+  // ─── Map event handler ─────────────────────────────────────────────────────
+  _handleMapChange(event) {
+    const detail = event.detail;
+    if (detail.cause === "clear") {
+      this._clearValue();
+      return;
+    }
+    if (detail.cause !== "draw")
+      return;
+    let value;
+    if (detail.type === "bbox" /* BBOX */ && detail.bounds) {
+      value = detail.bounds;
+    } else if (detail.type === "point" /* POINT */ && detail.latLng) {
+      value = detail.latLng;
+    } else {
+      this.emit("terra-map-change", { detail });
+      return;
+    }
+    const constraintError = SpatialPickerService.validateConstraints(
+      value,
+      this.spatialConstraints
+    );
+    if (constraintError) {
+      this.error = constraintError;
+      this.mapValue = void 0;
+      return;
+    }
+    const serialized = SpatialPickerService.serialize(value);
+    this._commit(serialized, value);
+  }
+  // ─── Dropdown handlers ─────────────────────────────────────────────────────
+  handleDropdownShow() {
+    this.isExpanded = true;
+  }
+  handleDropdownHide() {
+    this.isExpanded = false;
+  }
+  // ─── Internal helpers ──────────────────────────────────────────────────────
+  /**
+   * Parse, validate and commit a raw string value.
+   */
+  _validateAndCommit(raw) {
+    var _a;
+    if (!raw.trim()) {
+      this._clearValue();
+      return;
+    }
+    const result = SpatialPickerService.validate(
+      raw,
+      this._allowedTypes,
+      this.spatialConstraints
+    );
+    if (!result.ok) {
+      this.error = result.error;
+      (_a = this.terraInput) == null ? void 0 : _a.setCustomValidity(result.error);
+      return;
+    }
+    this._commit(result.serialized, result.value);
+  }
+  /**
+   * Apply a value without going through the validation pipeline
+   * (used for initialValue / setValue where we still want to display what
+   * was given, but we do want to show an error if it's malformed).
+   */
+  _applyValue(raw, { emit }) {
+    if (typeof raw !== "string") {
+      const serialized = SpatialPickerService.serialize(raw);
+      this.error = "";
+      this.mapValue = serialized;
+      if (this.terraInput)
+        this.terraInput.value = serialized;
+      if (emit)
+        this._emitChange(raw);
+      this._updateURLParam(serialized);
+      return;
+    }
+    const result = SpatialPickerService.validate(
+      raw,
+      this._allowedTypes,
+      this.spatialConstraints
+    );
+    if (!result.ok) {
+      this.error = result.error;
+      return;
+    }
+    this.error = "";
+    this.mapValue = result.serialized;
+    if (this.terraInput)
+      this.terraInput.value = result.serialized;
+    if (emit) {
+      this._emitChange(result.value);
+    }
+    this._updateURLParam(result.serialized);
+  }
+  /**
+   * Commit a validated value: sync UI, mapValue, URL, and emit.
+   */
+  _commit(serialized, value) {
+    var _a;
+    this.error = "";
+    (_a = this.terraInput) == null ? void 0 : _a.setCustomValidity("");
+    this.mapValue = serialized;
+    if (this.terraInput)
+      this.terraInput.value = serialized;
+    this.initialValue = serialized;
+    this._updateURLParam(serialized);
+    this._emitChange(value);
+  }
+  _clearValue() {
+    var _a;
+    this.error = "";
+    this.mapValue = void 0;
+    (_a = this.terraInput) == null ? void 0 : _a.setCustomValidity("");
+    if (this.terraInput)
+      this.terraInput.value = "";
+    this._updateURLParam(null);
+  }
+  _emitChange(value) {
+    if (value instanceof LatLng) {
+      this.emit("terra-map-change", {
+        detail: {
+          cause: "draw",
+          type: "point" /* POINT */,
+          latLng: value
+        }
+      });
+    } else {
+      this.emit("terra-map-change", {
+        detail: {
+          cause: "draw",
+          type: "bbox" /* BBOX */,
+          bounds: value
+        }
+      });
+    }
+  }
+  _updateURLParam(value) {
+    if (!this.urlState)
+      return;
+    const url = new URL(window.location.href);
+    value ? url.searchParams.set("spatial", value) : url.searchParams.delete("spatial");
+    window.history.replaceState({}, "", url.toString());
+  }
+  // ─── Rendering ─────────────────────────────────────────────────────────────
+  renderMap() {
+    return b`<terra-map
+            class="${this.inline ? "inline" : ""}"
+            exportparts="map"
+            min-zoom=${this.minZoom}
+            max-zoom=${this.maxZoom}
+            zoom=${this.zoom}
+            ?show-mouse-coordinates=${this.hasCoordTracker}
+            .value=${this.mapValue}
+            ?has-navigation=${this.hasNavigation}
+            ?has-shape-selector=${this.hasShapeSelector}
+            ?show-bounding-box-selection=${this.showBoundingBoxSelection}
+            ?show-point-selection=${this.showPointSelection}
+            ?no-world-wrap=${!this.worldWrap}
+            spatial-constraints=${this.spatialConstraints}
+            @terra-map-change=${this._handleMapChange}
+        ></terra-map>`;
+  }
+  _inputTemplate(slot) {
+    return b`<terra-input
+            slot=${slot != null ? slot : A}
+            .label=${this.label}
+            .hideLabel=${this.hideLabel}
+            .value=${SpatialPickerService.serialize(this.initialValue)}
+            placeholder="${this.spatialConstraints}"
+            aria-controls="map"
+            aria-expanded=${this.inline ? true : this.isExpanded}
+            @terra-input=${this._input}
+            @terra-change=${this._change}
+            @terra-blur=${this._blur}
+            @terra-focus=${this._focus}
+            @keydown=${this._keydown}
+            @click=${(e3) => {
+      e3.stopPropagation();
+      this._click(e3);
+    }}
+            name="spatial"
+            .helpText=${this.helpText}
+        >
+            <div slot="suffix" class="spatial-picker__suffix-icons">
+                ${this.mapValue ? b`<button
+                          type="button"
+                          class="spatial-picker__clear-btn"
+                          aria-label="Clear input"
+                          tabindex="-1"
+                          @click=${(e3) => {
+      e3.stopPropagation();
+      this._clearValue();
+    }}
+                      >
+                          <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 24 24"
+                              fill="currentColor"
+                          >
+                              <path
+                                  fill-rule="evenodd"
+                                  d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-1.72 6.97a.75.75 0 1 0-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 1 0 1.06 1.06L12 13.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L13.06 12l1.72-1.72a.75.75 0 1 0-1.06-1.06L12 10.94l-1.72-1.72Z"
+                                  clip-rule="evenodd"
+                              />
+                          </svg>
+                      </button>` : A}
+                <svg
+                    class="spatial-picker__input_icon"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke-width="1.5"
+                    stroke="currentColor"
+                    @click=${this._click}
+                >
+                    <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>
+            </div>
+        </terra-input>`;
+  }
+  render() {
+    if (this.inline) {
+      return b`
+                <div class="spatial-picker">
+                    ${this._inputTemplate()}
+                    <slot name="additional-text"></slot>
+                    <div
+                        class="spatial-picker__map-container spatial-picker__map-container--inline"
+                    >
+                        ${this.renderMap()}
+                    </div>
+                    ${this.error ? b`<div class="spatial-picker__error">${this.error}</div>` : A}
+                </div>
+            `;
+    }
+    return b`
+            <div class="spatial-picker">
+                <terra-dropdown
+                    ${n2(this.dropdownRef)}
+                    placement="bottom-start"
+                    distance="4"
+                    @terra-show=${this.handleDropdownShow}
+                    @terra-hide=${this.handleDropdownHide}
+                    hoist
+                >
+                    ${this._inputTemplate("trigger")}
+                    <slot name="additional-text"></slot>
+                    <div
+                        class="spatial-picker__map-container"
+                        @click=${(e3) => e3.stopPropagation()}
+                    >
+                        ${this.showClose ? b`
+                                  <div class="dropdown-header">
+                                      <button
+                                          class="spatial-picker__close-btn"
+                                          @click=${(e3) => {
+      e3.stopPropagation();
+      this.close();
+    }}
+                                          aria-label="Close"
+                                      >
+                                          ✕
+                                      </button>
+                                  </div>
+                              ` : A}
+                        ${this.renderMap()}
+                    </div>
+                </terra-dropdown>
+                ${this.error ? b`<div class="spatial-picker__error">${this.error}</div>` : A}
+            </div>
+        `;
+  }
+};
+TerraSpatialPicker.styles = [component_styles_default, spatial_picker_styles_default];
+TerraSpatialPicker.dependencies = {
+  "terra-map": TerraMap,
+  "terra-input": TerraInput,
+  "terra-dropdown": TerraDropdown
+};
+__decorateClass([
+  n({ attribute: "min-zoom", type: Number })
+], TerraSpatialPicker.prototype, "minZoom", 2);
+__decorateClass([
+  n({ attribute: "max-zoom", type: Number })
+], TerraSpatialPicker.prototype, "maxZoom", 2);
+__decorateClass([
+  n({ type: Number })
+], TerraSpatialPicker.prototype, "zoom", 2);
+__decorateClass([
+  n({ attribute: "has-navigation", type: Boolean })
+], TerraSpatialPicker.prototype, "hasNavigation", 2);
+__decorateClass([
+  n({ attribute: "has-coord-tracker", type: Boolean })
+], TerraSpatialPicker.prototype, "hasCoordTracker", 2);
+__decorateClass([
+  n({ attribute: "has-shape-selector", type: Boolean })
+], TerraSpatialPicker.prototype, "hasShapeSelector", 2);
+__decorateClass([
+  n({ attribute: "show-bounding-box-selection", type: Boolean })
+], TerraSpatialPicker.prototype, "showBoundingBoxSelection", 2);
+__decorateClass([
+  n({ attribute: "hide-bounding-box-selection", type: Boolean })
+], TerraSpatialPicker.prototype, "hideBoundingBoxSelection", 1);
+__decorateClass([
+  n({ attribute: "show-point-selection", type: Boolean })
+], TerraSpatialPicker.prototype, "showPointSelection", 2);
+__decorateClass([
+  n({ attribute: "hide-point-selection", type: Boolean })
+], TerraSpatialPicker.prototype, "hidePointSelection", 1);
+__decorateClass([
+  n({ attribute: "initial-value" })
+], TerraSpatialPicker.prototype, "initialValue", 2);
+__decorateClass([
+  n({ attribute: "hide-label", type: Boolean })
+], TerraSpatialPicker.prototype, "hideLabel", 2);
+__decorateClass([
+  n()
+], TerraSpatialPicker.prototype, "label", 2);
+__decorateClass([
+  n({ attribute: "spatial-constraints" })
+], TerraSpatialPicker.prototype, "spatialConstraints", 2);
+__decorateClass([
+  n({ attribute: "is-expanded", type: Boolean, reflect: true })
+], TerraSpatialPicker.prototype, "isExpanded", 2);
+__decorateClass([
+  n({ attribute: "world-wrap", type: Boolean })
+], TerraSpatialPicker.prototype, "worldWrap", 2);
+__decorateClass([
+  n({ type: Boolean })
+], TerraSpatialPicker.prototype, "inline", 2);
+__decorateClass([
+  n({ attribute: "show-map-on-focus", type: Boolean })
+], TerraSpatialPicker.prototype, "showMapOnFocus", 2);
+__decorateClass([
+  n({ attribute: "url-state", type: Boolean })
+], TerraSpatialPicker.prototype, "urlState", 2);
+__decorateClass([
+  n({ attribute: "help-text" })
+], TerraSpatialPicker.prototype, "helpText", 2);
+__decorateClass([
+  n({ attribute: "closable", type: Boolean })
+], TerraSpatialPicker.prototype, "showClose", 2);
+__decorateClass([
+  r()
+], TerraSpatialPicker.prototype, "mapValue", 2);
+__decorateClass([
+  r()
+], TerraSpatialPicker.prototype, "error", 2);
+__decorateClass([
+  e("terra-input")
+], TerraSpatialPicker.prototype, "terraInput", 2);
+__decorateClass([
+  e("terra-map")
+], TerraSpatialPicker.prototype, "map", 2);
+
+export {
+  TerraSpatialPicker
+};

package/cdn/chunks/chunk.DZINKXAT.js

@@ -0,0 +1,29 @@
+import {
+  TerraMap
+} from "./chunk.OSJMGCZG.js";
+import {
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/react/map/index.ts
+init_dirname();
+init_buffer();
+init_process();
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "terra-map";
+TerraMap.define("terra-map");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraMap,
+  react: React,
+  events: {},
+  displayName: "TerraMap"
+});
+var map_default = reactWrapper;
+
+export {
+  map_default
+};

package/cdn/chunks/chunk.EKPJRKBR.js

@@ -0,0 +1,19 @@
+import {
+  TerraButton
+} from "./chunk.KGVKWL76.js";
+import {
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/button/button.ts
+init_dirname();
+init_buffer();
+init_process();
+var button_default = TerraButton;
+TerraButton.define("terra-button");
+
+export {
+  button_default
+};

package/cdn/chunks/chunk.ETPMAULL.js

@@ -0,0 +1,29 @@
+import {
+  TerraCombobox
+} from "./chunk.IF6CIKBS.js";
+import {
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/react/combobox/index.ts
+init_dirname();
+init_buffer();
+init_process();
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "terra-combobox";
+TerraCombobox.define("terra-combobox");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraCombobox,
+  react: React,
+  events: {},
+  displayName: "TerraCombobox"
+});
+var combobox_default = reactWrapper;
+
+export {
+  combobox_default
+};

package/cdn/chunks/chunk.EVBV3WY4.js

@@ -0,0 +1,32 @@
+import {
+  TerraPagination
+} from "./chunk.H3DQMK3H.js";
+import {
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/react/pagination/index.ts
+init_dirname();
+init_buffer();
+init_process();
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "terra-pagination";
+TerraPagination.define("terra-pagination");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraPagination,
+  react: React,
+  events: {
+    onTerraPageChange: "terra-page-change"
+  },
+  displayName: "TerraPagination"
+});
+var pagination_default = reactWrapper;
+
+export {
+  pagination_default
+};

package/cdn/chunks/chunk.EWGXTIX4.js

@@ -0,0 +1,41 @@
+import {
+  TerraSelect
+} from "./chunk.NVLRS3IA.js";
+import {
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/react/select/index.ts
+init_dirname();
+init_buffer();
+init_process();
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "terra-select";
+TerraSelect.define("terra-select");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraSelect,
+  react: React,
+  events: {
+    onTerraChange: "terra-change",
+    onTerraClear: "terra-clear",
+    onTerraInput: "terra-input",
+    onTerraFocus: "terra-focus",
+    onTerraBlur: "terra-blur",
+    onTerraShow: "terra-show",
+    onTerraAfterShow: "terra-after-show",
+    onTerraHide: "terra-hide",
+    onTerraAfterHide: "terra-after-hide",
+    onTerraInvalid: "terra-invalid"
+  },
+  displayName: "TerraSelect"
+});
+var select_default = reactWrapper;
+
+export {
+  select_default
+};