@nasa-terra/components 0.0.137 → 0.0.139

package/dist/chunks/chunk.VMMKDZZ5.js

@@ -1,637 +0,0 @@
-import {
-  spatial_picker_styles_default
-} from "./chunk.3KDMQUYV.js";
-import {
-  TerraMap
-} from "./chunk.J6AHI4XH.js";
-import {
-  TerraInput
-} from "./chunk.PR6NXMKM.js";
-import {
-  TerraDropdown
-} from "./chunk.PMDGFZP5.js";
-import {
-  TerraElement,
-  component_styles_default
-} from "./chunk.M25BNXYX.js";
-import {
-  __decorateClass
-} from "./chunk.SHKVBVTI.js";
-
-// src/components/spatial-picker/spatial-picker.component.ts
-import { html, nothing } from "lit";
-import { createRef, ref } from "lit/directives/ref.js";
-import { property, query, state } from "lit/decorators.js";
-import * as L from "leaflet";
-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.urlState = false;
-    this.helpText = "";
-    this.error = "";
-    this.dropdownRef = createRef();
-  }
-  setValue(value) {
-    try {
-      this.mapValue = this._parseSpatialInput(value);
-      this.error = "";
-      if (this.terraInput) {
-        this.terraInput.value = value;
-      }
-      this._drawOnMap();
-      this._emitMapChangeAfterDraw();
-    } catch (error) {
-      this.error = error instanceof Error ? error.message : "Invalid spatial area (format: lat, lng for point or west, south, east, north for bounding box)";
-    }
-  }
-  _input() {
-    var _a;
-    const value = ((_a = this.terraInput) == null ? void 0 : _a.value) || "";
-    this.initialValue = value;
-    if (this.terraInput) {
-      this.terraInput.setCustomValidity("");
-    }
-    this.error = "";
-  }
-  _change() {
-    var _a, _b, _c;
-    this._input();
-    const inputValue = ((_a = this.terraInput) == null ? void 0 : _a.value) || "";
-    if (!inputValue) {
-      this.mapValue = [];
-      this.error = "";
-      if (this.terraInput) {
-        this.terraInput.setCustomValidity("");
-      }
-      if ((_c = (_b = this.map) == null ? void 0 : _b.map) == null ? void 0 : _c.isMapReady) {
-        this.map.map.clearLayers();
-      }
-      this._updateURLParam(null);
-      return;
-    }
-    this._validateAndSetValue();
-  }
-  _keydown(event) {
-    if (event.key === " ") {
-      event.stopPropagation();
-      return;
-    }
-    if (event.key === "Enter") {
-      event.preventDefault();
-      this._validateAndSetValue();
-      if (this.terraInput) {
-        this.terraInput.blur();
-      }
-    }
-  }
-  _blur() {
-    this._validateAndSetValue();
-  }
-  _parseSpatialInput(input) {
-    const coords = input.split(",").map((c) => c.trim());
-    if (coords.length === 2) {
-      const lat = parseFloat(coords[0]);
-      const lng = parseFloat(coords[1]);
-      if (isNaN(lat) || isNaN(lng)) {
-        throw new Error(
-          "All parts of the input string must be valid numbers."
-        );
-      }
-      return { lat, lng };
-    }
-    if (coords.length !== 4) {
-      throw new Error("Input must contain exactly 2 or 4 numbers");
-    }
-    const [west, south, east, north] = coords.map((c) => parseFloat(c));
-    if (coords.some((c) => isNaN(parseFloat(c)))) {
-      throw new Error("All parts of the input string must be valid numbers.");
-    }
-    return [
-      [south, west],
-      // southwest corner [lat, lng]
-      [north, east]
-      // northeast corner [lat, lng]
-    ];
-  }
-  _validateCoordinateRange(parsed) {
-    if ("lat" in parsed && "lng" in parsed) {
-      const lat = parsed.lat;
-      const lng = parsed.lng;
-      if (lat < -90 || lat > 90 || lng < -180 || lng > 180) {
-        return false;
-      }
-    } else if (Array.isArray(parsed) && parsed.length === 2) {
-      const [[south, west], [north, east]] = parsed;
-      if (south < -90 || south > 90 || west < -180 || west > 180 || north < -90 || north > 90 || east < -180 || east > 180) {
-        return false;
-      }
-    }
-    return true;
-  }
-  _validateAndSetValue() {
-    var _a, _b, _c;
-    const inputValue = ((_a = this.terraInput) == null ? void 0 : _a.value) || "";
-    if (!inputValue.trim()) {
-      this.mapValue = [];
-      this.error = "";
-      if (this.terraInput) {
-        this.terraInput.setCustomValidity("");
-      }
-      if ((_c = (_b = this.map) == null ? void 0 : _b.map) == null ? void 0 : _c.isMapReady) {
-        this.map.map.clearLayers();
-      }
-      this._updateURLParam(null);
-      return;
-    }
-    if (this.hidePointSelection && this.hideBoundingBoxSelection) {
-      try {
-        const parsed = this._parseSpatialInput(inputValue);
-        if (!this._validateCoordinateRange(parsed)) {
-          const errorMsg = "Coordinates must be within valid range (lat: -90 to 90, lng: -180 to 180)";
-          this.error = errorMsg;
-          if (this.terraInput) {
-            this.terraInput.setCustomValidity(errorMsg);
-          }
-          return;
-        }
-        this.mapValue = parsed;
-        this.error = "";
-        if (this.terraInput) {
-          this.terraInput.setCustomValidity("");
-        }
-        this._drawOnMap();
-        this._emitMapChangeAfterDraw();
-        this._updateURLParam(inputValue);
-      } catch (error) {
-        this.mapValue = [];
-        this.error = "";
-        if (this.terraInput) {
-          this.terraInput.setCustomValidity("");
-        }
-      }
-      return;
-    }
-    try {
-      const parsed = this._parseSpatialInput(inputValue);
-      const coordParts = inputValue.split(",").map((c) => c.trim());
-      const isPoint = coordParts.length === 2;
-      const isBoundingBox = coordParts.length === 4;
-      if (!this._validateCoordinateRange(parsed)) {
-        const errorMsg = "Coordinates must be within valid range (lat: -90 to 90, lng: -180 to 180)";
-        this.error = errorMsg;
-        if (this.terraInput) {
-          this.terraInput.setCustomValidity(errorMsg);
-        }
-        return;
-      }
-      if (isPoint && this.hidePointSelection) {
-        const errorMsg = this.hideBoundingBoxSelection ? "Must be a valid bounding box (west, south, east, north)" : "Must be a valid bounding box (west, south, east, north) - point selection is disabled";
-        this.error = errorMsg;
-        if (this.terraInput) {
-          this.terraInput.setCustomValidity(errorMsg);
-        }
-        return;
-      }
-      if (isBoundingBox && this.hideBoundingBoxSelection) {
-        const errorMsg = this.hidePointSelection ? "Must be a valid point (lat, lng)" : "Must be a valid point (lat, lng) - bounding box selection is disabled";
-        this.error = errorMsg;
-        if (this.terraInput) {
-          this.terraInput.setCustomValidity(errorMsg);
-        }
-        return;
-      }
-      this.mapValue = parsed;
-      this.error = "";
-      if (this.terraInput) {
-        this.terraInput.setCustomValidity("");
-      }
-      this._drawOnMap();
-      this._emitMapChangeAfterDraw();
-      this._updateURLParam(inputValue);
-    } catch (error) {
-      let errorMsg = "Invalid format";
-      if (this.hidePointSelection && !this.hideBoundingBoxSelection) {
-        errorMsg = "Must be a valid bounding box (west, south, east, north)";
-      } else if (!this.hidePointSelection && this.hideBoundingBoxSelection) {
-        errorMsg = "Must be a valid point (lat, lng)";
-      } else if (!this.hidePointSelection && !this.hideBoundingBoxSelection) {
-        errorMsg = "Must be a valid point (lat, lng) or bounding box (west, south, east, north)";
-      }
-      this.error = errorMsg;
-      if (this.terraInput) {
-        this.terraInput.setCustomValidity(errorMsg);
-      }
-    }
-  }
-  _drawOnMap() {
-    var _a, _b;
-    if (!((_b = (_a = this.map) == null ? void 0 : _a.map) == null ? void 0 : _b.isMapReady) || !this.mapValue) {
-      return;
-    }
-    this.map.map.clearLayers();
-    if (this.mapValue && typeof this.mapValue === "object") {
-      if ("lat" in this.mapValue && "lng" in this.mapValue) {
-        L.marker(this.mapValue, {
-          icon: L.icon({
-            iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
-            iconAnchor: [15, 40],
-            shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png"
-          })
-        }).addTo(this.map.map.editableLayers);
-        this.map.map.map.setView(this.mapValue, 5);
-      } else if (Array.isArray(this.mapValue) && this.mapValue.length === 2) {
-        this.map.map.setValue(this.mapValue);
-      }
-    }
-  }
-  _focus() {
-    if (this.showMapOnFocus && !this.inline && this.dropdownRef.value) {
-      this.dropdownRef.value.show();
-    }
-  }
-  _click(e) {
-    e.stopPropagation();
-    if (!this.inline && this.dropdownRef.value) {
-      if (this.isExpanded) {
-        this.dropdownRef.value.hide();
-      } else {
-        this.dropdownRef.value.show();
-      }
-    }
-  }
-  handleDropdownShow() {
-    this.isExpanded = true;
-    setTimeout(() => this.invalidateSize(), 250);
-  }
-  handleDropdownHide() {
-    this.isExpanded = false;
-  }
-  _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 = [];
-    }
-  }
-  _emitMapChangeAfterDraw() {
-    var _a, _b;
-    if (!this.mapValue) {
-      return;
-    }
-    if ("lat" in this.mapValue && "lng" in this.mapValue) {
-      const latLng = this.mapValue;
-      const layer = (_a = this.map) == null ? void 0 : _a.getDrawLayer();
-      this.emit("terra-map-change", {
-        detail: {
-          type: "point" /* POINT */,
-          cause: "draw",
-          latLng,
-          geoJson: layer == null ? void 0 : layer.toGeoJSON()
-        }
-      });
-    } else if (Array.isArray(this.mapValue) && this.mapValue.length === 2) {
-      const bounds = L.latLngBounds(
-        this.mapValue
-      );
-      const layer = (_b = this.map) == null ? void 0 : _b.getDrawLayer();
-      this.emit("terra-map-change", {
-        detail: {
-          type: "bbox" /* BBOX */,
-          cause: "draw",
-          bounds,
-          geoJson: layer == null ? void 0 : layer.toGeoJSON()
-        }
-      });
-    }
-  }
-  open() {
-    if (!this.inline && this.dropdownRef.value) {
-      this.dropdownRef.value.show();
-    }
-  }
-  close() {
-    if (!this.inline && this.dropdownRef.value) {
-      this.dropdownRef.value.hide();
-    }
-  }
-  setOpen(open) {
-    if (open) {
-      this.open();
-    } else {
-      this.close();
-    }
-  }
-  _updateURLParam(value) {
-    if (!this.urlState) {
-      return;
-    }
-    const url = new URL(window.location.href);
-    if (value) {
-      url.searchParams.set("spatial", value);
-    } else {
-      url.searchParams.delete("spatial");
-    }
-    window.history.replaceState({}, "", url.toString());
-  }
-  _handleMapChange(event) {
-    switch (event.detail.cause) {
-      case "clear":
-        if (this.terraInput) {
-          this.terraInput.value = "";
-        }
-        this.spatialConstraints = "-180, -90, 180, 90";
-        this._updateURLParam(null);
-        break;
-      case "draw":
-        let stringified = "";
-        if (event.detail.bounds) {
-          const bounds = event.detail.bounds;
-          const west = bounds._southWest.lng;
-          const south = bounds._southWest.lat;
-          const east = bounds._northEast.lng;
-          const north = bounds._northEast.lat;
-          stringified = `${west.toFixed(2)}, ${south.toFixed(2)}, ${east.toFixed(2)}, ${north.toFixed(2)}`;
-          if (this.terraInput) {
-            this.terraInput.value = stringified;
-          }
-          this.mapValue = [
-            [south, west],
-            [north, east]
-          ];
-        } else if (event.detail.latLng) {
-          const latLng = event.detail.latLng;
-          stringified = `${latLng.lat.toFixed(2)}, ${latLng.lng.toFixed(2)}`;
-          if (this.terraInput) {
-            this.terraInput.value = stringified;
-          }
-          this.mapValue = { lat: latLng.lat, lng: latLng.lng };
-        }
-        this._updateURLParam(stringified);
-        this._emitMapChange();
-        break;
-      default:
-        break;
-    }
-  }
-  firstUpdated() {
-    const urlParams = new URLSearchParams(window.location.search);
-    const spatialParam = urlParams.get("spatial");
-    if (spatialParam && this.urlState) {
-      this.initialValue = spatialParam;
-      try {
-        this.mapValue = this._parseSpatialInput(spatialParam);
-      } catch (e) {
-        this.mapValue = [];
-      }
-      if (this.terraInput) {
-        this.terraInput.value = spatialParam;
-      }
-    } else if (this.initialValue) {
-      try {
-        this.mapValue = this.initialValue === "" ? [] : this._parseSpatialInput(this.initialValue);
-      } catch (e) {
-        this.mapValue = [];
-      }
-    }
-    setTimeout(() => {
-      this.invalidateSize();
-    }, 500);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-  }
-  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;
-    if (this.inline) {
-      return html`
-                <div class="spatial-picker">
-                    <terra-input
-                        .label=${this.label}
-                        .hideLabel=${this.hideLabel}
-                        .value=${this.initialValue}
-                        placeholder="${this.spatialConstraints}"
-                        aria-controls="map"
-                        aria-expanded=${expanded}
-                        @terra-input=${this._input}
-                        @terra-change=${this._change}
-                        @terra-blur=${this._blur}
-                        @keydown=${this._keydown}
-                        resettable
-                        name="spatial"
-                        .helpText=${this.helpText}
-                    >
-                        <svg
-                            slot="suffix"
-                            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"
-                        >
-                            <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-input>
-                    ${this.error ? html`<div class="spatial-picker__error">${this.error}</div>` : nothing}
-                    <div
-                        class="spatial-picker__map-container spatial-picker__map-container--inline"
-                    >
-                        ${this.renderMap()}
-                    </div>
-                </div>
-            `;
-    }
-    return html`
-            <div class="spatial-picker">
-                <terra-dropdown
-                    ${ref(this.dropdownRef)}
-                    placement="bottom-start"
-                    distance="4"
-                    @terra-show=${this.handleDropdownShow}
-                    @terra-hide=${this.handleDropdownHide}
-                    hoist
-                >
-                    <terra-input
-                        slot="trigger"
-                        .label=${this.label}
-                        .hideLabel=${this.hideLabel}
-                        .value=${this.initialValue}
-                        placeholder="${this.spatialConstraints}"
-                        aria-controls="map"
-                        aria-expanded=${expanded}
-                        @terra-input=${this._input}
-                        @terra-change=${this._change}
-                        @terra-blur=${this._blur}
-                        @terra-focus=${this._focus}
-                        @keydown=${this._keydown}
-                        @click=${(e) => {
-      e.stopPropagation();
-      this._click(e);
-    }}
-                        resettable
-                        name="spatial"
-                        .helpText=${this.helpText}
-                    >
-                        <svg
-                            slot="suffix"
-                            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>
-                    </terra-input>
-                    <div
-                        class="spatial-picker__map-container"
-                        @click=${(e) => e.stopPropagation()}
-                    >
-                        ${this.renderMap()}
-                    </div>
-                </terra-dropdown>
-                ${this.error ? html`<div class="spatial-picker__error">${this.error}</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,
-  "terra-input": TerraInput,
-  "terra-dropdown": TerraDropdown
-};
-__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([
-  property({ attribute: "url-state", type: Boolean })
-], TerraSpatialPicker.prototype, "urlState", 2);
-__decorateClass([
-  property({ attribute: "help-text" })
-], TerraSpatialPicker.prototype, "helpText", 2);
-__decorateClass([
-  state()
-], TerraSpatialPicker.prototype, "mapValue", 2);
-__decorateClass([
-  state()
-], TerraSpatialPicker.prototype, "error", 2);
-__decorateClass([
-  query("terra-input")
-], TerraSpatialPicker.prototype, "terraInput", 2);
-__decorateClass([
-  query("terra-map")
-], TerraSpatialPicker.prototype, "map", 2);
-
-export {
-  TerraSpatialPicker
-};

package/dist/chunks/chunk.VNIY4LMA.js

@@ -1,11 +0,0 @@
-import {
-  TerraMenuItem
-} from "./chunk.LDZAANCW.js";
-
-// src/components/menu-item/menu-item.ts
-var menu_item_default = TerraMenuItem;
-TerraMenuItem.define("terra-menu-item");
-
-export {
-  menu_item_default
-};

package/dist/chunks/chunk.VSWHQLHN.js

@@ -1,11 +0,0 @@
-import {
-  TerraDropdown
-} from "./chunk.PMDGFZP5.js";
-
-// src/components/dropdown/dropdown.ts
-var dropdown_default = TerraDropdown;
-TerraDropdown.define("terra-dropdown");
-
-export {
-  dropdown_default
-};

package/dist/chunks/chunk.VTE57C55.js

@@ -1,24 +0,0 @@
-import {
-  TerraAccordion
-} from "./chunk.5IS5U42I.js";
-
-// src/react/accordion/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "terra-accordion";
-TerraAccordion.define("terra-accordion");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: TerraAccordion,
-  react: React,
-  events: {
-    onTerraAccordionToggle: "terra-accordion-toggle"
-  },
-  displayName: "TerraAccordion"
-});
-var accordion_default = reactWrapper;
-
-export {
-  accordion_default
-};