@nasa-terra/components 0.0.0

package/dist/chunks/chunk.2RBWEAYS.js

@@ -0,0 +1,404 @@
+import {
+  variable_combobox_styles_default
+} from "./chunk.T322FDKI.js";
+import {
+  FetchController
+} from "./chunk.MWHQHPUM.js";
+import {
+  clearSelection,
+  groupDocsByCollection,
+  removeEmptyCollections,
+  renderSearchResult,
+  walkToOption
+} from "./chunk.UU46CLE7.js";
+import {
+  button_default
+} from "./chunk.WJPV6KQS.js";
+import {
+  icon_default
+} from "./chunk.R4J62P4T.js";
+import {
+  watch
+} from "./chunk.ZK7QVWBI.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.PJXIJK2G.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateSet,
+  __spreadProps,
+  __spreadValues
+} from "./chunk.RYPAZDXE.js";
+
+// src/components/variable-combobox/variable-combobox.component.ts
+import Fuse from "fuse.js";
+import { LitElement, html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+import { cache } from "lit/directives/cache.js";
+import { map } from "lit/directives/map.js";
+import { ref } from "lit/directives/ref.js";
+var _combobox, _fetchController, _searchableList, _listbox, _searchEngine, _walker, _dispatchChange, _handleButtonClick, _handleComboboxChange, _handleOptionClick, _handleKeydown, _manageListboxVisibility, _selectOption;
+var _TerraVariableCombobox = class _TerraVariableCombobox extends TerraElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _combobox, null);
+    __privateAdd(this, _fetchController, new FetchController(this));
+    __privateAdd(this, _searchableList, []);
+    __privateAdd(this, _listbox, null);
+    __privateAdd(this, _searchEngine, null);
+    __privateAdd(this, _walker, null);
+    this.label = "Search for Variables";
+    this.hideHelp = false;
+    this.hideLabel = false;
+    this.isExpanded = false;
+    this.query = _TerraVariableCombobox.initialQuery;
+    this.searchResults = [];
+    __privateAdd(this, _dispatchChange, (stringifiedData) => {
+      this.emit("terra-combobox-change", { detail: JSON.parse(stringifiedData) });
+    });
+    __privateAdd(this, _handleButtonClick, () => {
+      var _a;
+      this.isExpanded = !this.isExpanded;
+      (_a = __privateGet(this, _combobox)) == null ? void 0 : _a.focus();
+    });
+    __privateAdd(this, _handleComboboxChange, (event) => {
+      var _a;
+      const target = event.target;
+      this.query = target.value;
+      if (target.value) {
+        this.isExpanded = true;
+      }
+      this.searchResults = (_a = __privateGet(this, _searchEngine)) == null ? void 0 : _a.search(target.value).map(({ item }) => item);
+    });
+    __privateAdd(this, _handleOptionClick, (event) => {
+      const path = event.composedPath();
+      const [target] = path.filter(
+        (eventTarget) => eventTarget.role === "option"
+      );
+      if (!target) {
+        return;
+      }
+      __privateGet(this, _selectOption).call(this, target);
+    });
+    __privateAdd(this, _handleKeydown, (event) => {
+      var _a;
+      switch (event.key) {
+        case "ArrowDown": {
+          clearSelection(
+            __privateGet(this, _combobox),
+            __privateGet(this, _listbox)
+          );
+          if (!this.isExpanded) {
+            this.isExpanded = true;
+          }
+          if (event.altKey) {
+            break;
+          }
+          walkToOption(
+            __privateGet(this, _walker),
+            __privateGet(this, _combobox),
+            "next"
+          );
+          break;
+        }
+        case "ArrowUp": {
+          clearSelection(
+            __privateGet(this, _combobox),
+            __privateGet(this, _listbox)
+          );
+          if (!this.isExpanded) {
+            this.isExpanded = true;
+          }
+          walkToOption(
+            __privateGet(this, _walker),
+            __privateGet(this, _combobox),
+            "previous"
+          );
+          break;
+        }
+        case "Enter": {
+          __privateGet(this, _selectOption).call(this, (_a = __privateGet(this, _walker)) == null ? void 0 : _a.currentNode);
+          break;
+        }
+        case "Escape": {
+          clearSelection(
+            __privateGet(this, _combobox),
+            __privateGet(this, _listbox)
+          );
+          if (this.isExpanded) {
+            this.isExpanded = false;
+            this.dispatchEvent(new Event("cancel"));
+          } else {
+            this.query = _TerraVariableCombobox.initialQuery;
+          }
+          break;
+        }
+        default: {
+          break;
+        }
+      }
+    });
+    __privateAdd(this, _manageListboxVisibility, (event) => {
+      const path = event.composedPath();
+      const containedThis = path.some(
+        (eventTarget) => eventTarget.localName === _TerraVariableCombobox.tagName
+      );
+      if (!containedThis) {
+        this.isExpanded = false;
+      }
+    });
+    __privateAdd(this, _selectOption, (option) => {
+      const { longName, eventDetail } = option.dataset;
+      this.query = `${longName}`;
+      __privateGet(this, _dispatchChange).call(this, eventDetail);
+      this.isExpanded = false;
+      clearSelection(
+        __privateGet(this, _combobox),
+        __privateGet(this, _listbox)
+      );
+    });
+  }
+  async valueChanged() {
+    var _a;
+    await __privateGet(this, _fetchController).taskComplete;
+    const selectedVariable = (_a = __privateGet(this, _fetchController).value) == null ? void 0 : _a.find((variable) => {
+      return variable.entryId === this.value;
+    });
+    if (selectedVariable) {
+      this.query = selectedVariable.longName;
+      __privateGet(this, _dispatchChange).call(this, selectedVariable.eventDetail);
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    globalThis.addEventListener("click", __privateGet(this, _manageListboxVisibility));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    globalThis.addEventListener("click", __privateGet(this, _manageListboxVisibility));
+  }
+  clear() {
+    this.query = _TerraVariableCombobox.initialQuery;
+  }
+  close() {
+    this.isExpanded = false;
+  }
+  toggle() {
+    this.isExpanded = !this.isExpanded;
+  }
+  render() {
+    var _a, _b, _c;
+    const searchHasNoMatches = ((_a = this.searchResults) == null ? void 0 : _a.length) === 0 && ((_b = __privateGet(this, _searchableList)) == null ? void 0 : _b.length) !== 0 && this.query !== _TerraVariableCombobox.initialQuery;
+    return html`<search part="base" title="Search through the list.">
+            <label
+                for="combobox"
+                class=${this.hideLabel ? "sr-only" : "search-input-label"}
+                >${this.label}</label
+            >
+            <div class="search-input-group">
+                <input
+                    ${ref((el) => {
+      var _a2;
+      if (el) {
+        (_a2 = __privateGet(this, _combobox)) != null ? _a2 : __privateSet(this, _combobox, el);
+      }
+    })}
+                    aria-autocomplete="list"
+                    aria-controls="listbox"
+                    aria-expanded=${this.isExpanded}
+                    class="combobox"
+                    id="combobox"
+                    part="combobox"
+                    role="combobox"
+                    type="text"
+                    .placeholder=${(_c = this.placeholder) != null ? _c : `${this.label}\u2026`}
+                    .value=${this.query}
+                    @input=${__privateGet(this, _handleComboboxChange)}
+                    @keydown=${__privateGet(this, _handleKeydown)}
+                />
+                <button
+                    aria-controls="listbox"
+                    aria-expanded=${this.isExpanded}
+                    aria-label="List of Searchable Variables"
+                    class="combobox-button"
+                    id="combobox-button"
+                    part="button"
+                    tabindex="-1"
+                    type="button"
+                    @click=${__privateGet(this, _handleButtonClick)}
+                >
+                    ${["COMPLETE", "ERROR"].includes(__privateGet(this, _fetchController).taskStatus) ? html`<terra-icon
+                              class="chevron"
+                              name="chevron-down"
+                          ></terra-icon>` : html`<svg
+                              class="button-icon spinner"
+                              stroke="currentColor"
+                              viewBox="0 0 24 24"
+                              xmlns="http://www.w3.org/2000/svg"
+                          >
+                              <circle
+                                  cx="12"
+                                  cy="12"
+                                  r="9.5"
+                                  fill="none"
+                                  stroke-width="3"
+                              ></circle>
+                          </svg>`}
+                </button>
+
+                ${this.hideHelp ? nothing : html`<p class="search-help">
+                          See
+                          <a
+                              href="https://www.fusejs.io/examples.html#extended-search"
+                              rel="noopener noreferrer"
+                              tabindex=${this.isExpanded ? "-1 " : "0"}
+                              target="_blank"
+                              >extended search syntax
+                              <svg
+                                  aria-hidden="true"
+                                  class="external-link"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  width="14"
+                                  height="14"
+                                  viewBox="0 0 24 24"
+                              >
+                                  <path
+                                      d="M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
+                                  /></svg></a
+                          >.
+                      </p>`}
+            </div>
+
+            <ul
+                ${ref((el) => {
+      var _a2;
+      if (el) {
+        (_a2 = __privateGet(this, _listbox)) != null ? _a2 : __privateSet(this, _listbox, el);
+        __privateSet(this, _walker, document.createTreeWalker(
+          el,
+          NodeFilter.SHOW_ELEMENT,
+          (node) => {
+            return node.dataset.treeWalker === "filter_skip" ? NodeFilter.FILTER_SKIP : NodeFilter.FILTER_ACCEPT;
+          }
+        ));
+      }
+    })}
+                ?inert=${!this.isExpanded}
+                ?open=${this.isExpanded}
+                @click=${__privateGet(this, _handleOptionClick)}
+                aria-label=${this.query ? `Variables Matching ${this.query}` : "Variables"}
+                id="listbox"
+                part="listbox"
+                role="listbox"
+                class="search-results"
+            >
+                ${searchHasNoMatches ? html`<li
+                          class="listbox-option-group"
+                          data-tree-walker="filter_skip"
+                      >
+                          <terra-button
+                              @click=${() => this.query = _TerraVariableCombobox.initialQuery}
+                              class="clear-button"
+                              data-tree-walker="filter_skip"
+                          >
+                              clear search
+                          </terra-button>
+                      </li>` : nothing}
+                ${__privateGet(this, _fetchController).render({
+      initial: () => html`<li class="updating">Updating List of Variables</li>`,
+      pending: () => html`<li class="updating">Updating List of Variables</li>`,
+      complete: (list) => {
+        __privateSet(this, _searchableList, list);
+        __privateSet(this, _searchEngine, new Fuse(__privateGet(this, _searchableList), {
+          //* @see {@link https://www.fusejs.io/examples.html#nested-search}
+          findAllMatches: true,
+          keys: [
+            "entryId",
+            "longName",
+            "name",
+            "standardName",
+            "units"
+          ],
+          useExtendedSearch: true
+        }));
+        return cache(
+          this.query === _TerraVariableCombobox.initialQuery ? map(
+            removeEmptyCollections(
+              groupDocsByCollection(__privateGet(this, _searchableList))
+            ),
+            renderSearchResult
+          ) : map(
+            removeEmptyCollections(
+              groupDocsByCollection(this.searchResults)
+            ),
+            renderSearchResult
+          )
+        );
+      },
+      // TODO: Consider a more robust error strategy...like retry w/ backoff?
+      error: (errorMessage) => html`<li class="error" data-tree-walker="filter_skip">
+                            ${errorMessage}
+                        </li>`
+    })}
+            </ul>
+        </search>`;
+  }
+};
+_combobox = new WeakMap();
+_fetchController = new WeakMap();
+_searchableList = new WeakMap();
+_listbox = new WeakMap();
+_searchEngine = new WeakMap();
+_walker = new WeakMap();
+_dispatchChange = new WeakMap();
+_handleButtonClick = new WeakMap();
+_handleComboboxChange = new WeakMap();
+_handleOptionClick = new WeakMap();
+_handleKeydown = new WeakMap();
+_manageListboxVisibility = new WeakMap();
+_selectOption = new WeakMap();
+_TerraVariableCombobox.dependencies = {
+  "terra-button": button_default,
+  "terra-icon": icon_default
+};
+_TerraVariableCombobox.styles = [component_styles_default, variable_combobox_styles_default];
+_TerraVariableCombobox.shadowRootOptions = __spreadProps(__spreadValues({}, LitElement.shadowRootOptions), {
+  delegatesFocus: true
+});
+_TerraVariableCombobox.tagName = "terra-variable-combobox";
+_TerraVariableCombobox.initialQuery = "";
+__decorateClass([
+  property()
+], _TerraVariableCombobox.prototype, "label", 2);
+__decorateClass([
+  property()
+], _TerraVariableCombobox.prototype, "placeholder", 2);
+__decorateClass([
+  property({ attribute: "hide-help", type: Boolean })
+], _TerraVariableCombobox.prototype, "hideHelp", 2);
+__decorateClass([
+  property({ attribute: "hide-label", type: Boolean })
+], _TerraVariableCombobox.prototype, "hideLabel", 2);
+__decorateClass([
+  property()
+], _TerraVariableCombobox.prototype, "value", 2);
+__decorateClass([
+  state()
+], _TerraVariableCombobox.prototype, "isExpanded", 2);
+__decorateClass([
+  state()
+], _TerraVariableCombobox.prototype, "query", 2);
+__decorateClass([
+  state()
+], _TerraVariableCombobox.prototype, "searchResults", 2);
+__decorateClass([
+  watch("value")
+], _TerraVariableCombobox.prototype, "valueChanged", 1);
+var TerraVariableCombobox = _TerraVariableCombobox;
+
+export {
+  TerraVariableCombobox
+};

package/dist/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.36PTCDA5.js

@@ -0,0 +1,11 @@
+import {
+  TerraMap
+} from "./chunk.V3YTQSMP.js";
+
+// src/components/map/map.ts
+var map_default = TerraMap;
+TerraMap.define("terra-map");
+
+export {
+  map_default
+};

package/dist/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
+};