@nasa-terra/components 0.0.16 → 0.0.19

package/cdn/chunks/chunk.ZC2AYSV2.js

@@ -1,273 +0,0 @@
-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 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/dist/chunks/chunk.2O6HB6W6.js

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

package/dist/chunks/chunk.3WHG66G3.js

@@ -1,177 +0,0 @@
-import {
-  spatial_picker_styles_default
-} from "./chunk.QEMJLGM4.js";
-import {
-  TerraMap
-} from "./chunk.EU6EQVBK.js";
-import {
-  StringifyBoundingBox,
-  parseBoundingBox
-} from "./chunk.ZC2AYSV2.js";
-import {
-  TerraElement,
-  component_styles_default
-} from "./chunk.7QKG7IRI.js";
-import {
-  __decorateClass
-} from "./chunk.TVFCHGU3.js";
-
-// src/components/spatial-picker/spatial-picker.component.ts
-import { html, nothing } from "lit";
-import { property, query, state } from "lit/decorators.js";
-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.isExpanded = false;
-  }
-  _blur(e) {
-    const inputValue = e.target.value;
-    this.mapValue = inputValue === "" ? [] : parseBoundingBox(inputValue);
-  }
-  _click() {
-    this.isExpanded = !this.isExpanded;
-  }
-  open() {
-    this.isExpanded = true;
-  }
-  close() {
-    this.isExpanded = false;
-  }
-  _handleMapChange(event) {
-    switch (event.detail.cause) {
-      case "clear":
-        this.spatialInput.value = "";
-        break;
-      case "draw":
-        if (event.detail.bounds) {
-          this.spatialInput.value = StringifyBoundingBox(
-            event.detail.bounds
-          );
-        } else if (event.detail.latLng) {
-          this.spatialInput.value = StringifyBoundingBox(
-            event.detail.latLng
-          );
-        }
-        break;
-      default:
-        break;
-    }
-  }
-  firstUpdated() {
-    if (this.initialValue) {
-      this.mapValue = this.initialValue === "" ? [] : parseBoundingBox(this.initialValue);
-    }
-  }
-  renderMap() {
-    return html`<terra-map
-            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}
-            @terra-map-change=${this._handleMapChange}
-        >
-        </terra-map>`;
-  }
-  render() {
-    return html`
-            <div class="spatial-picker">
-                <label
-                    for="spatial-picker__input"
-                    class=${this.hideLabel ? "sr-only" : "spatial-picker__input_label"}
-                    >${this.label}</label
-                >
-                <div class="spatial-picker__input_fields">
-                    <input
-                        id="spatial-picker__input"
-                        value=${this.initialValue}
-                        type="text"
-                        class="spatial-picker__input form-control"
-                        placeholder="-180, -90, 180, 90"
-                        aria-controls="map"
-                        aria-expanded=${this.isExpanded}
-                        @blur=${this._blur}
-                    />
-                    <terra-button
-                        shape="square-left"
-                        class="spatial-picker__input_icon_button"
-                        @click=${this._click}
-                        type="button"
-                    >
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke-width="1.5"
-                            stroke="currentColor"
-                            class="w-6 h-6"
-                        >
-                            <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-button>
-                </div>
-                ${this.isExpanded ? this.renderMap() : nothing}
-            </div>
-        `;
-  }
-};
-TerraSpatialPicker.styles = [component_styles_default, spatial_picker_styles_default];
-TerraSpatialPicker.dependencies = {
-  "terra-map": TerraMap
-};
-__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: "initial-value" })
-], TerraSpatialPicker.prototype, "initialValue", 2);
-__decorateClass([
-  property({ attribute: "hide-label", type: Boolean })
-], TerraSpatialPicker.prototype, "hideLabel", 2);
-__decorateClass([
-  property()
-], TerraSpatialPicker.prototype, "label", 2);
-__decorateClass([
-  state()
-], TerraSpatialPicker.prototype, "isExpanded", 2);
-__decorateClass([
-  state()
-], TerraSpatialPicker.prototype, "mapValue", 2);
-__decorateClass([
-  query(".spatial-picker__input")
-], TerraSpatialPicker.prototype, "spatialInput", 2);
-
-export {
-  TerraSpatialPicker
-};

package/dist/chunks/chunk.57LVW27O.js

@@ -1,11 +0,0 @@
-import {
-  TerraLogin
-} from "./chunk.DV6U7J5D.js";
-
-// src/components/login/login.ts
-var login_default = TerraLogin;
-TerraLogin.define("terra-login");
-
-export {
-  login_default
-};

package/dist/chunks/chunk.5LOTY62O.js

@@ -1,120 +0,0 @@
-import {
-  loader_styles_default
-} from "./chunk.7OKJDEHN.js";
-import {
-  TerraElement,
-  component_styles_default
-} from "./chunk.EPQIDDJG.js";
-import {
-  __decorateClass
-} from "./chunk.TVFCHGU3.js";
-
-// src/components/loader/loader.component.ts
-import { property, state } 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.variant = "large";
-    this.percent = "0";
-    this.indeterminate = false;
-    this._currentPercent = 0;
-  }
-  formatPercent(percent) {
-    if (parseInt(percent) > 100) {
-      percent = "100";
-    }
-    return parseInt(percent) > 0 ? percent + "%" : "";
-  }
-  render() {
-    this._currentPercent = parseInt(this.percent);
-    return html`
-            <div
-                class=${classMap({
-      loader: true,
-      "loader--small": this.variant === "small",
-      "loader--large": this.variant === "large",
-      "loader--orbit": this.variant === "orbit"
-    })}
-                aria-valuenow=${this.formatPercent(this.percent)}
-                role="progressbar"
-                tabindex="-1"
-            >
-                ${this.variant === "large" || this.variant === "orbit" ? html`
-                          <div
-                              class="percent ${this.variant == "orbit" ? "number-14" : "number-11"}"
-                          >
-                              ${this.formatPercent(this.percent)}
-                          </div>
-                      ` : nothing}
-                ${this.variant === "orbit" ? html`
-                          <svg viewBox="0 0 160 160">
-                              <circle class="planet" />
-
-                              <!-- total length of orbit ellipse = 298.2393493652344 -->
-                              <path
-                                  id="orbit"
-                                  d="M 53.528 96.775 C 73.584 124.975 100.654 140.601 115.393 130.137 C 132.613 117.912 119.246 79.55 105.434 60.525 C 90.233 39.587 60.506 18.543 44.962 30.114 C 29.456 41.657 38.219 75.25 53.528 96.775 Z"
-                              >
-                                  <animate
-                                      attributeName="stroke-dashoffset"
-                                      begin="-0.25s"
-                                      from="300"
-                                      to="0"
-                                      dur="1.5s"
-                                      repeatCount="indefinite"
-                                  />
-                              </path>
-
-                              <circle class="moon">
-                                  <animateMotion
-                                      begin="0s"
-                                      dur="1.5s"
-                                      repeatCount="indefinite"
-                                  >
-                                      <mpath href="#orbit"></mpath>
-                                  </animateMotion>
-                              </circle>
-
-                              <path
-                                  id="mask"
-                                  class="planet"
-                                  d="M 130.176 80.041 C 130.176 41.552 88.321 17.697 55.544 36.652 C 40.081 45.594 30.865 62.428 30.47 80.094 L 130.176 80.041 Z"
-                                  style="transform-box: fill-box; transform-origin: 49.8347% 100.62%;"
-                                  transform="matrix(-0.350367, -0.936613, 0.936613, -0.350367, -0.148117, -0.20884)"
-                              />
-                          </svg>
-                      ` : nothing}
-                ${this.variant === "small" || this.variant === "large" ? html`
-                          <svg
-                              viewBox=${this.variant == "small" ? "0 0 30 30" : "0 0 52 52"}
-                              aria-hidden="true"
-                              style="--progress: ${this.percent}"
-                              class="circular-progress ${this.indeterminate ? "indeterminate" : ""}"
-                          >
-                              <circle class="bg"></circle>
-                              <circle class="fg"></circle>
-                          </svg>
-                      ` : nothing}
-            </div>
-        `;
-  }
-};
-TerraLoader.styles = [component_styles_default, loader_styles_default];
-__decorateClass([
-  property({ reflect: true })
-], TerraLoader.prototype, "variant", 2);
-__decorateClass([
-  property({ type: String })
-], TerraLoader.prototype, "percent", 2);
-__decorateClass([
-  property({ type: Boolean })
-], TerraLoader.prototype, "indeterminate", 2);
-__decorateClass([
-  state()
-], TerraLoader.prototype, "_currentPercent", 2);
-
-export {
-  TerraLoader
-};