@nasa-terra/components 0.0.137 → 0.0.139

package/cdn/chunks/chunk.FG2ISGVU.js

@@ -0,0 +1,660 @@
+import {
+  spatial_picker_styles_default
+} from "./chunk.B6WW3XBQ.js";
+import {
+  TerraMap
+} from "./chunk.GKLZDT4V.js";
+import {
+  require_leaflet_src
+} from "./chunk.4UFYI2TK.js";
+import {
+  TerraInput
+} from "./chunk.KG6VRPUL.js";
+import {
+  TerraDropdown
+} from "./chunk.6TK5NIXR.js";
+import {
+  e as e2,
+  n as n2
+} from "./chunk.K6SKQZRX.js";
+import {
+  TerraElement,
+  component_styles_default,
+  e,
+  n,
+  r
+} from "./chunk.FU6DSPVY.js";
+import {
+  E,
+  x
+} from "./chunk.3ZQGAH53.js";
+import {
+  __decorateClass,
+  __toESM,
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.CZA6CSBG.js";
+
+// src/components/spatial-picker/spatial-picker.component.ts
+init_dirname();
+init_buffer();
+init_process();
+var L = __toESM(require_leaflet_src(), 1);
+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.noWorldWrap = false;
+    this.inline = false;
+    this.showMapOnFocus = false;
+    this.urlState = false;
+    this.helpText = "";
+    this.error = "";
+    this.dropdownRef = e2();
+  }
+  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(e3) {
+    e3.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 (e3) {
+        this.mapValue = [];
+      }
+      if (this.terraInput) {
+        this.terraInput.value = spatialParam;
+      }
+    } else if (this.initialValue) {
+      try {
+        this.mapValue = this.initialValue === "" ? [] : this._parseSpatialInput(this.initialValue);
+      } catch (e3) {
+        this.mapValue = [];
+      }
+    }
+    setTimeout(() => {
+      this.invalidateSize();
+    }, 500);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+  renderMap() {
+    return x`<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}
+            ?no-world-wrap=${this.noWorldWrap}
+            @terra-map-change=${this._handleMapChange}
+        >
+        </terra-map>`;
+  }
+  render() {
+    const expanded = this.inline ? true : this.isExpanded;
+    if (this.inline) {
+      return x`
+                <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 ? x`<div class="spatial-picker__error">${this.error}</div>` : E}
+                    <div
+                        class="spatial-picker__map-container spatial-picker__map-container--inline"
+                    >
+                        ${this.renderMap()}
+                    </div>
+                </div>
+            `;
+    }
+    return x`
+            <div class="spatial-picker">
+                <terra-dropdown
+                    ${n2(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=${(e3) => {
+      e3.stopPropagation();
+      this._click(e3);
+    }}
+                        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=${(e3) => e3.stopPropagation()}
+                    >
+                        ${this.renderMap()}
+                    </div>
+                </terra-dropdown>
+                ${this.error ? x`<div class="spatial-picker__error">${this.error}</div>` : E}
+            </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([
+  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: "hide-bounding-box-selection", type: Boolean })
+], TerraSpatialPicker.prototype, "hideBoundingBoxSelection", 2);
+__decorateClass([
+  n({ attribute: "hide-point-selection", type: Boolean })
+], TerraSpatialPicker.prototype, "hidePointSelection", 2);
+__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: "no-world-wrap", type: Boolean })
+], TerraSpatialPicker.prototype, "noWorldWrap", 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([
+  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
+};