@nasa-terra/components 0.0.0 → 0.0.1

package/{dist/chunks/chunk.SZQ6DLHF.js → cdn/chunks/chunk.27YQ2AOA.js}

@@ -1,21 +1,21 @@
 import {
   TimeSeriesController
-} from "./chunk.WBXETWE4.js";
+} from "./chunk.OOUCODFZ.js";
 import {
   time_series_styles_default
 } from "./chunk.ZGJAUXFV.js";
 import {
   TerraVariableCombobox
-} from "./chunk.2RBWEAYS.js";
-import {
-  spatial_picker_default
-} from "./chunk.YHSKQAEB.js";
+} from "./chunk.36AVAQOO.js";
 import {
   TerraPlot
 } from "./chunk.FGILL5W6.js";
+import {
+  spatial_picker_default
+} from "./chunk.IP3XWLQI.js";
 import {
   TerraDateRangeSlider
-} from "./chunk.KRXFJQUH.js";
+} from "./chunk.GHCQCYO6.js";
 import {
   watch
 } from "./chunk.ZK7QVWBI.js";

package/cdn/chunks/{chunk.BHXZEJO5.js → chunk.2B4YBQ5O.js}

@@ -16,7 +16,7 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.OFCNXAUR.js";
+} from "./chunk.VEUDIPUW.js";
 import {
   e,
   n

package/cdn/chunks/chunk.2I657ASB.js

@@ -0,0 +1,85 @@
+import {
+  loader_styles_default
+} from "./chunk.I2NEFB34.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.PJXIJK2G.js";
+import {
+  __decorateClass
+} from "./chunk.RYPAZDXE.js";
+
+// src/components/loader/loader.component.ts
+import { property } from "lit/decorators.js";
+import { html, nothing } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+var TerraLoader = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.size = "large";
+    this.percent = 0;
+    this.label = "Loading request";
+    this.message = "";
+  }
+  formatPercent(percent) {
+    if (percent > 100) {
+      percent = 100;
+    }
+    return percent > 0 ? percent + "%" : "";
+  }
+  render() {
+    return html`
+            <div
+                class=${classMap({
+      loader: true,
+      "loader--small": this.size === "small",
+      "loader--large": this.size === "large",
+      "loader--light": this.theme === "light",
+      "loader--dark": this.theme === "dark"
+    })}
+                arial-lable=${this.label}
+                aria-valuetext="${this.message || nothing}"
+                ${this.message != "" ? "aria-valuetext=${this.message}" : ""}
+                aria-valuenow=${this.formatPercent(this.percent)}
+                role="progressbar"
+                tabindex="-1"
+            >
+                ${this.size === "large" ? html`
+                          <div class="percent">
+                              ${this.formatPercent(this.percent)}
+                          </div>
+                      ` : ``}
+
+                <svg
+                    viewBox=${this.size == "small" ? "0 0 30 30" : "0 0 52 52"}
+                    aria-hidden="true"
+                    style="--progress: ${this.percent}"
+                    class="circular-progress"
+                >
+                    <circle class="bg"></circle>
+                    <circle class="fg"></circle>
+                </svg>
+            </div>
+        `;
+  }
+};
+TerraLoader.styles = [component_styles_default, loader_styles_default];
+__decorateClass([
+  property({ reflect: true })
+], TerraLoader.prototype, "size", 2);
+__decorateClass([
+  property({ reflect: true })
+], TerraLoader.prototype, "theme", 2);
+__decorateClass([
+  property({ type: Number })
+], TerraLoader.prototype, "percent", 2);
+__decorateClass([
+  property({ type: String })
+], TerraLoader.prototype, "label", 2);
+__decorateClass([
+  property({ type: String })
+], TerraLoader.prototype, "message", 2);
+
+export {
+  TerraLoader
+};

package/cdn/chunks/{chunk.R5TLD4JZ.js → chunk.2J6CFV4K.js}

@@ -1,6 +1,6 @@
 import {
   TerraPlot
-} from "./chunk.7FISIUEV.js";
+} from "./chunk.KVY2Y3KE.js";
 
 // src/components/plot/plot.ts
 var plot_default = TerraPlot;

package/{dist/chunks/chunk.SJ6OGWI6.js → cdn/chunks/chunk.2O76GCUZ.js}

@@ -1,6 +1,6 @@
 import {
   TerraTimeSeries
-} from "./chunk.SZQ6DLHF.js";
+} from "./chunk.27YQ2AOA.js";
 
 // src/react/time-series/index.ts
 import * as React from "react";

package/cdn/chunks/chunk.2V4XFMTB.js

@@ -0,0 +1,7 @@
+// src/utilities/animation.ts
+import { getAnimationNames, getEasingNames } from "@shoelace-style/shoelace";
+
+export {
+  getAnimationNames,
+  getEasingNames
+};

package/{dist/chunks/chunk.2RBWEAYS.js → cdn/chunks/chunk.36AVAQOO.js}

@@ -11,12 +11,12 @@ import {
   renderSearchResult,
   walkToOption
 } from "./chunk.UU46CLE7.js";
-import {
-  button_default
-} from "./chunk.WJPV6KQS.js";
 import {
   icon_default
-} from "./chunk.R4J62P4T.js";
+} from "./chunk.SMRM4VEQ.js";
+import {
+  button_default
+} from "./chunk.MXAZ646L.js";
 import {
   watch
 } from "./chunk.ZK7QVWBI.js";

package/cdn/chunks/chunk.3ZGFXEAJ.js

@@ -0,0 +1,273 @@
+import {
+  __spreadValues
+} from "./chunk.RYPAZDXE.js";
+
+// src/components/map/leaflet-utils.ts
+import * as L from "leaflet";
+import "leaflet-draw";
+globalThis.type = "";
+function parseBoundingBox(inputString) {
+  const coords = inputString.split(",");
+  if (coords.length !== 2 && coords.length !== 4) {
+    throw new Error(
+      'Input string must contain exactly two or four numerical values. e.g "9.51, 21.80" or "52.03, -9.38, 96.33, 32.90"'
+    );
+  }
+  if (coords.length == 2) {
+    return {
+      lat: parseFloat(coords[0]),
+      lng: parseFloat(coords[1])
+    };
+  }
+  const bounds = coords.map(function(coord) {
+    let num = parseFloat(coord);
+    if (isNaN(num)) {
+      throw new Error("All parts of the input string must be valid numbers.");
+    }
+    return num;
+  });
+  const leafletBounds = [
+    [bounds[1], bounds[0]],
+    [bounds[3], bounds[2]]
+  ];
+  return leafletBounds;
+}
+function StringifyBoundingBox(input) {
+  if ("_southWest" in input && "_northEast" in input) {
+    return `${input._southWest.lng.toFixed(2)}, ${input._southWest.lat.toFixed(
+      2
+    )}, ${input._northEast.lng.toFixed(2)}, ${input._northEast.lat.toFixed(2)}`;
+  } else if ("lat" in input && "lng" in input) {
+    return `${input.lat.toFixed(2)}, ${input.lng.toFixed(2)}`;
+  } else {
+    throw new Error("Invalid input type");
+  }
+}
+var Leaflet = class {
+  constructor() {
+    this.listeners = [];
+    this.isMapReady = false;
+    this.handleShapeSelect = this.handleShapeSelect.bind(this);
+  }
+  // map initialization function
+  initializeMap(container, options) {
+    this.map = new L.Map(container, {
+      center: options.latitude && options.longitude ? L.latLng(options.latitude, options.longitude) : L.latLng(40.731253, -73.996139),
+      zoom: options.zoom,
+      attributionControl: false,
+      minZoom: options.minZoom,
+      maxZoom: options.maxZoom
+    });
+    L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
+      maxZoom: options.maxZoom
+    }).addTo(this.map);
+    if (options.hasCoordTracker) {
+      this.addCoordTracker();
+    }
+    if (options.hasNavigation) {
+      this.addDrawControl();
+    }
+    this.map.whenReady((_e) => {
+      var _a;
+      this.isMapReady = true;
+      if (options.initialValue && "lat" in options.initialValue && "lng" in options.initialValue) {
+        L.marker(options.initialValue, {
+          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.editableLayers);
+        this.map.setView(options.initialValue, 5);
+        return;
+      }
+      if (((_a = options.initialValue) == null ? void 0 : _a.length) > 0) {
+        L.rectangle(options.initialValue, {
+          stroke: true,
+          color: "#3388ff",
+          weight: 4,
+          opacity: 0.5,
+          fill: true,
+          fillOpacity: 0.2
+        }).addTo(this.editableLayers);
+        this.map.fitBounds(options.initialValue);
+      }
+    });
+  }
+  addCoordTracker() {
+    const CoordTracker = L.Control.extend({
+      options: {
+        position: "bottomright",
+        title: "Mouse Position",
+        exclude: [],
+        include: []
+      },
+      onAdd: function(map) {
+        this.div = L.DomUtil.create(
+          "div",
+          "leaflet-mouse-position-container leaflet-bar"
+        );
+        this.p = L.DomUtil.create(
+          "p",
+          "leaflet-mouse-position-text",
+          this.div
+        );
+        let content = "lat: 0, lng: 0";
+        this.p.innerHTML = content;
+        L.DomEvent.addListener(map, "mousemove", this._onChange, this);
+        return this.div;
+      },
+      _onChange: function(e) {
+        this.p.innerHTML = `lat: ${Math.round(
+          e.latlng.lat
+        )}, lng: ${Math.round(e.latlng.lng)}`;
+      }
+    });
+    const coordTracker = new CoordTracker();
+    coordTracker.addTo(this.map);
+  }
+  addDrawControl() {
+    this.editableLayers = new L.FeatureGroup();
+    this.editableLayers.addTo(this.map);
+    let drawControl = new L.Control.Draw({
+      position: "topright",
+      draw: {
+        polyline: false,
+        polygon: false,
+        circle: false,
+        // Turns off this drawing tool
+        circlemarker: false,
+        rectangle: {},
+        marker: {
+          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"
+          })
+        }
+      },
+      edit: {
+        featureGroup: this.editableLayers
+        //REQUIRED!!
+      }
+    });
+    this.map.addControl(drawControl);
+    this.map.on("draw:created", (event) => {
+      this.editableLayers.clearLayers();
+      const { layer, layerType } = event;
+      this.editableLayers.addLayer(layer);
+      const detail = __spreadValues(__spreadValues({
+        geoJson: layer.toGeoJSON()
+      }, layerType === "rectangle" && { bounds: layer.getBounds() }), layerType === "marker" && { latLng: layer._latlng });
+      this.dispatch("draw", detail);
+    });
+    this.map.on("draw:edited", (event) => {
+      const { layer, layerType } = event;
+      const detail = __spreadValues(__spreadValues({
+        geoJson: layer.toGeoJSON()
+      }, layerType === "rectangle" && { bounds: layer.getBounds() }), layerType === "marker" && { latLng: layer._latlng });
+      this.dispatch("draw", detail);
+    });
+    this.map.on("draw:deleted", (_event) => {
+      this.editableLayers.clearLayers();
+      this.dispatch("clear");
+    });
+  }
+  on(eventName, callback) {
+    this.listeners.push({
+      eventName,
+      callback
+    });
+  }
+  dispatch(eventName, detail = null) {
+    const eventTriggered = this.listeners.filter(
+      (listener) => listener.eventName === eventName
+    );
+    eventTriggered.forEach((listener) => {
+      listener.callback(detail);
+    });
+  }
+  transformShapeData(data) {
+    const shapes = data.shapes;
+    const shapefileID = data.shapefileID;
+    const transformedShapes = Object.keys(shapes).map((key) => {
+      const shape = shapes[key];
+      let name;
+      if (shapefileID === "lakes") {
+        name = shape.values[2];
+      } else if (shapefileID === "gpmLandMask" || shapefileID === "gpmSeaMask") {
+        name = shape.values.find(
+          (value) => typeof value === "string" && value.includes("deg")
+        );
+      } else if (shapefileID === "state_dept_countries_2017" || shapefileID === "world_regions" || shapefileID === "major_world_basins") {
+        name = shape.values[1];
+      } else if (shapefileID === "tl_2014_us_state") {
+        name = shape.values[6];
+      }
+      return {
+        name,
+        [data.uniqueShapeIDField]: key,
+        shapefileID
+      };
+    });
+    return transformedShapes;
+  }
+  async fetchSelectedShape(query) {
+    const url = new URL("http://localhost:9000/getGeoJSON");
+    const [key, value] = query.split("=");
+    if (key && value) {
+      url.searchParams.append(key, encodeURIComponent(value));
+    }
+    const data = await fetch(url.toString(), {
+      method: "GET",
+      mode: "cors"
+    });
+    const shape = await data.json();
+    return shape;
+  }
+  async handleShapeSelect(event) {
+    var _a;
+    event.preventDefault();
+    const selectedShape = event.target.value;
+    if (!selectedShape)
+      return;
+    const shapeGeoJson = await this.fetchSelectedShape(selectedShape);
+    if ((_a = this.selectedGeoJson) == null ? void 0 : _a.hasLayer) {
+      this.selectedGeoJson.remove();
+    }
+    this.selectedGeoJson = L.geoJson(shapeGeoJson.features).addTo(
+      this.editableLayers
+    );
+    this.map.fitBounds(this.selectedGeoJson.getBounds());
+    this.dispatch("draw", {
+      geoJson: this.selectedGeoJson.toGeoJSON(),
+      bounds: this.selectedGeoJson.getBounds()
+    });
+  }
+  drawRectangle(bounds) {
+    this.clearLayers();
+    L.rectangle(bounds, {
+      stroke: true,
+      color: "#3388ff",
+      weight: 4,
+      opacity: 0.5,
+      fill: true,
+      fillOpacity: 0.2
+    }).addTo(this.editableLayers);
+  }
+  setValue(value) {
+    if (this.isMapReady) {
+      this.drawRectangle(value);
+      this.map.fitBounds(value);
+    }
+  }
+  clearLayers() {
+    this.editableLayers.clearLayers();
+  }
+};
+
+export {
+  parseBoundingBox,
+  StringifyBoundingBox,
+  Leaflet
+};

package/cdn/chunks/{chunk.D6XFZNUK.js → chunk.4YOL6PQR.js}

@@ -1,11 +1,11 @@
+import {
+  icon_styles_default
+} from "./chunk.4XR5KYKG.js";
 import {
   getIconLibrary,
   unwatchIcon,
   watchIcon
 } from "./chunk.MDRUDBRH.js";
-import {
-  icon_styles_default
-} from "./chunk.4XR5KYKG.js";
 import {
   e
 } from "./chunk.6NYH4BZ2.js";
@@ -15,7 +15,7 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.OFCNXAUR.js";
+} from "./chunk.VEUDIPUW.js";
 import {
   n,
   r

package/{dist/chunks/chunk.6ZHGOB2G.js → cdn/chunks/chunk.77L4US7V.js}

@@ -1,6 +1,6 @@
 import {
   TerraMap
-} from "./chunk.V3YTQSMP.js";
+} from "./chunk.UQVPFKN3.js";
 
 // src/react/map/index.ts
 import * as React from "react";

package/cdn/chunks/chunk.7DEY3B3N.js

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

package/cdn/chunks/chunk.7VUSSQRI.js

@@ -0,0 +1,20 @@
+// src/components/icon/icon.styles.ts
+import { css } from "lit";
+var icon_styles_default = css`
+    :host {
+        display: inline-block;
+        width: 1em;
+        height: 1em;
+        box-sizing: content-box !important;
+    }
+
+    svg {
+        display: block;
+        height: 100%;
+        width: 100%;
+    }
+`;
+
+export {
+  icon_styles_default
+};