@nasa-terra/components 0.0.66 → 0.0.68

package/dist/chunks/chunk.GL5HOXON.js

@@ -0,0 +1,202 @@
+import {
+  leaflet_draw_styles_default
+} from "./chunk.445A7YVG.js";
+import {
+  Leaflet
+} from "./chunk.GMJWNAQG.js";
+import {
+  leaflet_styles_default
+} from "./chunk.HNQMK3PU.js";
+import {
+  MapController
+} from "./chunk.J25AAZTC.js";
+import {
+  map_styles_default
+} from "./chunk.BEDYDFXT.js";
+import {
+  watch
+} from "./chunk.DTUHBE3U.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.O6SXSDFR.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateMethod,
+  __spreadValues
+} from "./chunk.TVFCHGU3.js";
+
+// src/components/map/map.component.ts
+import { html, nothing } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { cache } from "lit/directives/cache.js";
+import { map } from "lit/directives/map.js";
+var _markDynamicLeafletContent, markDynamicLeafletContent_fn;
+var TerraMap = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _markDynamicLeafletContent);
+    this.minZoom = 0;
+    this.maxZoom = 23;
+    this.zoom = 1;
+    this.hasNavigation = false;
+    this.hasCoordTracker = false;
+    this.hasShapeSelector = false;
+    this.value = [];
+    this.map = new Leaflet();
+    this._mapController = new MapController(this);
+  }
+  valueChanged(_oldValue, newValue) {
+    var _a;
+    if (newValue.length > 0) {
+      (_a = this.map) == null ? void 0 : _a.setValue(this.value);
+    } else if (newValue.length === 0 && this.map.isMapReady) {
+      this.map.clearLayers();
+    }
+  }
+  async connectedCallback() {
+    super.connectedCallback();
+  }
+  async firstUpdated() {
+    await this.map.initializeMap(this.mapElement, {
+      zoom: this.zoom,
+      minZoom: this.minZoom,
+      maxZoom: this.maxZoom,
+      hasCoordTracker: this.hasCoordTracker,
+      hasNavigation: this.hasNavigation,
+      initialValue: this.value,
+      hideBoundingBoxDrawTool: this.hideBoundingBoxSelection,
+      hidePointSelectionDrawTool: this.hidePointSelection
+    });
+    this.map.on("draw", (layer) => {
+      this.emit("terra-map-change", {
+        detail: __spreadValues({
+          cause: "draw",
+          type: "latLng" in layer ? "point" /* POINT */ : "bounds" in layer ? "bbox" /* BBOX */ : void 0
+        }, layer)
+      });
+    });
+    this.map.on(
+      "clear",
+      (_e) => this.emit("terra-map-change", {
+        detail: {
+          cause: "clear"
+        }
+      })
+    );
+    __privateMethod(this, _markDynamicLeafletContent, markDynamicLeafletContent_fn).call(this);
+  }
+  getDrawLayer() {
+    return this.map.editableLayers.getLayers()[0];
+  }
+  selectTemplate() {
+    var _a;
+    return html`
+            <select
+                class="map__select form-control"
+                @change=${this.map.handleShapeSelect}
+            >
+                <option value="">Select a Shape...</option>
+
+                ${cache(
+      map((_a = this.shapes) == null ? void 0 : _a.categories, (category) => {
+        return html`<optgroup label="${category.title}">
+                            ${category.shapes.map((shape) => {
+          return html`
+                                    <option
+                                        value="shape=${shape.shapefileID}/${shape.shapeID}"
+                                    >
+                                        ${shape.name}
+                                    </option>
+                                `;
+        })}
+                        </optgroup> `;
+      })
+    )}
+            </select>
+        `;
+  }
+  render() {
+    return html`
+            <!-- select goes here -->
+            ${this.hasShapeSelector ? this.selectTemplate() : nothing}
+            <!-- "Map goes here" -->
+            <div part="map" id="map" class="map"></div>
+        `;
+  }
+  invalidateSize() {
+    this.map.map.invalidateSize();
+  }
+};
+_markDynamicLeafletContent = new WeakSet();
+markDynamicLeafletContent_fn = function() {
+  var _a, _b, _c, _d;
+  const parts = [
+    {
+      item: (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".leaflet-draw-draw-rectangle"),
+      name: "leaflet-bbox"
+    },
+    {
+      item: (_b = this.shadowRoot) == null ? void 0 : _b.querySelector(".leaflet-draw-draw-marker"),
+      name: "leaflet-point"
+    },
+    {
+      item: (_c = this.shadowRoot) == null ? void 0 : _c.querySelector(".leaflet-draw-edit-edit"),
+      name: "leaflet-edit"
+    },
+    {
+      item: (_d = this.shadowRoot) == null ? void 0 : _d.querySelector(".leaflet-draw-edit-remove"),
+      name: "leaflet-remove"
+    }
+  ];
+  parts.forEach(({ item, name }) => {
+    item == null ? void 0 : item.setAttribute("part", name);
+  });
+};
+TerraMap.styles = [
+  component_styles_default,
+  leaflet_styles_default,
+  leaflet_draw_styles_default,
+  map_styles_default
+];
+__decorateClass([
+  property({ attribute: "min-zoom", type: Number })
+], TerraMap.prototype, "minZoom", 2);
+__decorateClass([
+  property({ attribute: "max-zoom", type: Number })
+], TerraMap.prototype, "maxZoom", 2);
+__decorateClass([
+  property({ type: Number })
+], TerraMap.prototype, "zoom", 2);
+__decorateClass([
+  property({ attribute: "has-navigation", type: Boolean })
+], TerraMap.prototype, "hasNavigation", 2);
+__decorateClass([
+  property({ attribute: "has-coord-tracker", type: Boolean })
+], TerraMap.prototype, "hasCoordTracker", 2);
+__decorateClass([
+  property({ attribute: "has-shape-selector", type: Boolean })
+], TerraMap.prototype, "hasShapeSelector", 2);
+__decorateClass([
+  property({ attribute: "hide-bounding-box-selection", type: Boolean })
+], TerraMap.prototype, "hideBoundingBoxSelection", 2);
+__decorateClass([
+  property({ attribute: "hide-point-selection", type: Boolean })
+], TerraMap.prototype, "hidePointSelection", 2);
+__decorateClass([
+  property({ type: Array })
+], TerraMap.prototype, "value", 2);
+__decorateClass([
+  query("#map")
+], TerraMap.prototype, "mapElement", 2);
+__decorateClass([
+  watch("value")
+], TerraMap.prototype, "valueChanged", 1);
+__decorateClass([
+  state()
+], TerraMap.prototype, "shapes", 2);
+
+export {
+  TerraMap
+};

package/dist/chunks/chunk.GMJWNAQG.js

@@ -0,0 +1,264 @@
+import {
+  GiovanniGeoJsonShapes
+} from "./chunk.XXFKVRN5.js";
+import {
+  __spreadValues
+} from "./chunk.TVFCHGU3.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 must contain exactly 2 or 4 numbers. 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);
+    this.geoJsonRepository = new GiovanniGeoJsonShapes();
+  }
+  // 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(options);
+    }
+    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 (options.initialValue && (((_a = options.initialValue) == null ? void 0 : _a.length) > 0 || "getNorthEast" in options.initialValue)) {
+        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: "bottomleft",
+        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(options) {
+    this.editableLayers = new L.FeatureGroup();
+    this.editableLayers.addTo(this.map);
+    let drawControl = new L.Control.Draw({
+      position: "topleft",
+      draw: {
+        polyline: false,
+        polygon: false,
+        circle: false,
+        // Turns off this drawing tool
+        circlemarker: false,
+        rectangle: (options == null ? void 0 : options.hideBoundingBoxDrawTool) ? false : {},
+        marker: (options == null ? void 0 : options.hidePointSelectionDrawTool) ? false : {
+          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 handleShapeSelect(event) {
+    var _a;
+    event.preventDefault();
+    const selectedShape = event.target.value;
+    if (!selectedShape)
+      return;
+    const shapeGeoJson = await this.geoJsonRepository.getGeoJson(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/dist/chunks/chunk.GPP6JDF4.js

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

package/dist/chunks/chunk.GQRGC6YW.js

@@ -0,0 +1,11 @@
+import {
+  TerraVariableKeywordSearch
+} from "./chunk.OVUWZWWN.js";
+
+// src/components/variable-keyword-search/variable-keyword-search.ts
+var variable_keyword_search_default = TerraVariableKeywordSearch;
+TerraVariableKeywordSearch.define("terra-variable-keyword-search");
+
+export {
+  variable_keyword_search_default
+};

package/dist/chunks/chunk.GUYBX63F.js

@@ -0,0 +1,108 @@
+import {
+  plot_styles_default
+} from "./chunk.SGFD3ORP.js";
+import {
+  watch
+} from "./chunk.DTUHBE3U.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.O6SXSDFR.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet,
+  __spreadValues
+} from "./chunk.TVFCHGU3.js";
+
+// src/components/plot/plot.component.ts
+import { property, query } from "lit/decorators.js";
+import { html } from "lit";
+import {
+  newPlot,
+  Plots
+} from "plotly.js-dist-min";
+var _resizeObserver, _handlePlotlyRelayout, handlePlotlyRelayout_fn;
+var TerraPlot = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _handlePlotlyRelayout);
+    __privateAdd(this, _resizeObserver, void 0);
+    this.layout = {};
+    this.config = {};
+    this.data = [];
+  }
+  handleDataChange() {
+    this.updatePlotWithData();
+  }
+  firstUpdated() {
+    __privateSet(this, _resizeObserver, new ResizeObserver(() => {
+      Plots.resize(this.base);
+    }));
+    __privateGet(this, _resizeObserver).observe(this.base);
+    if (this.data.length) {
+      this.updatePlotWithData();
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    __privateGet(this, _resizeObserver).disconnect();
+  }
+  updatePlotWithData() {
+    if (!this.base) {
+      return;
+    }
+    newPlot(
+      this.base,
+      this.data,
+      __spreadValues({
+        title: this.plotTitle
+      }, this.layout),
+      __spreadValues({ responsive: true }, this.config)
+    );
+    this.base.on("plotly_relayout", __privateMethod(this, _handlePlotlyRelayout, handlePlotlyRelayout_fn).bind(this));
+  }
+  render() {
+    return html`<div part="base"></div>`;
+  }
+  updated() {
+    var _a, _b;
+    (_b = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".gtitle")) == null ? void 0 : _b.part.add("plot-title");
+  }
+};
+_resizeObserver = new WeakMap();
+_handlePlotlyRelayout = new WeakSet();
+handlePlotlyRelayout_fn = function(e) {
+  const detail = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, e["xaxis.range[0]"] && { xAxisMin: e["xaxis.range[0]"] }), e["xaxis.range[1]"] && { xAxisMax: e["xaxis.range[1]"] }), e["yaxis.range[0]"] && { yAxisMin: e["yaxis.range[0]"] }), e["yaxis.range[1]"] && { yAxisMax: e["yaxis.range[1]"] });
+  if (!Object.keys(detail).length) {
+    return;
+  }
+  this.emit("terra-plot-relayout", {
+    detail
+  });
+};
+TerraPlot.styles = [component_styles_default, plot_styles_default];
+__decorateClass([
+  query('[part="base"]')
+], TerraPlot.prototype, "base", 2);
+__decorateClass([
+  property()
+], TerraPlot.prototype, "plotTitle", 2);
+__decorateClass([
+  property()
+], TerraPlot.prototype, "layout", 2);
+__decorateClass([
+  property()
+], TerraPlot.prototype, "config", 2);
+__decorateClass([
+  property({ type: Array })
+], TerraPlot.prototype, "data", 2);
+__decorateClass([
+  watch("data")
+], TerraPlot.prototype, "handleDataChange", 1);
+
+export {
+  TerraPlot
+};

package/dist/chunks/chunk.H2UQBMCX.js

@@ -0,0 +1,21 @@
+import {
+  TerraDatePicker
+} from "./chunk.MEMNTMV2.js";
+
+// src/react/date-picker/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "terra-date-picker";
+TerraDatePicker.define("terra-date-picker");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraDatePicker,
+  react: React,
+  events: {},
+  displayName: "TerraDatePicker"
+});
+var date_picker_default = reactWrapper;
+
+export {
+  date_picker_default
+};

package/dist/chunks/chunk.H73IKOBV.js

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

package/dist/chunks/chunk.HKST5N6O.js

@@ -0,0 +1,21 @@
+import {
+  TerraDatePicker
+} from "./chunk.UT5XKCBV.js";
+
+// src/react/date-picker/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "terra-date-picker";
+TerraDatePicker.define("terra-date-picker");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraDatePicker,
+  react: React,
+  events: {},
+  displayName: "TerraDatePicker"
+});
+var date_picker_default = reactWrapper;
+
+export {
+  date_picker_default
+};

package/dist/chunks/chunk.HN27UQHP.js

@@ -0,0 +1,21 @@
+import {
+  TerraChip
+} from "./chunk.JOTLSXEI.js";
+
+// src/react/chip/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "terra-chip";
+TerraChip.define("terra-chip");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraChip,
+  react: React,
+  events: {},
+  displayName: "TerraChip"
+});
+var chip_default = reactWrapper;
+
+export {
+  chip_default
+};