@nasa-terra/components 0.0.137 → 0.0.139

package/dist/chunks/chunk.JLZUVFCE.js

@@ -0,0 +1,287 @@
+import {
+  GiovanniGeoJsonShapes
+} from "./chunk.RGVKW43A.js";
+import {
+  __spreadValues
+} from "./chunk.SHKVBVTI.js";
+
+// src/components/map/leaflet-utils.ts
+import * as L from "leaflet";
+import "leaflet-draw";
+globalThis.type = "";
+function parseBoundingBox(input) {
+  let inputString = input;
+  if (inputString instanceof L.LatLng) {
+    inputString = `${inputString.lat}, ${inputString.lng}`;
+  } else if (inputString instanceof L.LatLngBounds) {
+    inputString = `${inputString.getSouthWest().lat}, ${inputString.getSouthWest().lng}, ${inputString.getNorthEast().lat}, ${inputString.getNorthEast().lng}`;
+  }
+  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) {
+    let mapOptions = {
+      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
+    };
+    if (options.staticMode) {
+      mapOptions.zoomControl = false;
+      mapOptions.doubleClickZoom = false;
+      mapOptions.scrollWheelZoom = false;
+      mapOptions.dragging = false;
+      mapOptions.touchZoom = false;
+      mapOptions.boxZoom = false;
+    }
+    if (options.noWorldWrap) {
+      mapOptions.worldCopyJump = false;
+      mapOptions.maxBounds = L.latLngBounds(
+        L.latLng(-90, -180),
+        L.latLng(90, 180)
+      );
+      mapOptions.maxBoundsViscosity = 1;
+    }
+    this.map = new L.Map(container, mapOptions);
+    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.JTBVF4U6.js

@@ -0,0 +1,422 @@
+import {
+  slider_styles_default
+} from "./chunk.I2OGX6YJ.js";
+import {
+  mergeTooltips
+} from "./chunk.L63WM7I3.js";
+import {
+  watch
+} from "./chunk.NWXJOH5T.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.R4VDG6AK.js";
+import {
+  __decorateClass
+} from "./chunk.SHKVBVTI.js";
+
+// src/components/slider/slider.component.ts
+import { property, query, state } from "lit/decorators.js";
+import { html } from "lit";
+import noUiSlider, { PipsMode } from "nouislider";
+var TerraSlider = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.mode = "single";
+    this.min = 0;
+    this.max = 100;
+    this.step = 1;
+    this.disabled = false;
+    this.hasPips = false;
+    this.hasTooltips = false;
+    this.showInputs = false;
+    this.label = "Slider";
+    this.hideLabel = false;
+    this.hasBeenManipulated = false;
+  }
+  updateSlider() {
+    this.renderSlider();
+  }
+  disabledChanged() {
+    var _a, _b, _c, _d;
+    this.disabled ? (_b = (_a = this.slider) == null ? void 0 : _a.noUiSlider) == null ? void 0 : _b.disable() : (_d = (_c = this.slider) == null ? void 0 : _c.noUiSlider) == null ? void 0 : _d.enable();
+  }
+  firstUpdated() {
+    this.renderSlider();
+  }
+  _getStartValues() {
+    var _a, _b, _c;
+    const min = Number(this.min);
+    const max = Number(this.max);
+    if (this.mode === "range") {
+      const start = (_a = this.startValue) != null ? _a : min;
+      const end = (_b = this.endValue) != null ? _b : max;
+      return [start, end];
+    }
+    const single = (_c = this.value) != null ? _c : min;
+    return [single];
+  }
+  renderSlider() {
+    var _a;
+    if (!this.slider)
+      return;
+    (_a = this.slider.noUiSlider) == null ? void 0 : _a.destroy();
+    const min = Number(this.min);
+    const max = Number(this.max);
+    if (!Number.isFinite(min) || !Number.isFinite(max) || max < min) {
+      noUiSlider.create(this.slider, {
+        start: [0],
+        range: { min: 0, max: 0 }
+      });
+      return;
+    }
+    const startValues = this._getStartValues();
+    const options = {
+      range: { min, max },
+      start: startValues,
+      step: this.step,
+      connect: this.mode === "range",
+      tooltips: this.hasTooltips ? this.mode === "range" ? [this.hasTooltips, this.hasTooltips] : this.hasTooltips : false,
+      behaviour: "drag",
+      format: this._getFormatter(),
+      pips: this.hasPips ? {
+        mode: PipsMode.Range,
+        density: -1,
+        format: this._getFormatter()
+      } : void 0
+    };
+    noUiSlider.create(this.slider, options);
+    const initialValues = this.slider.noUiSlider.get();
+    if (this.mode === "range") {
+      const [start, end] = Array.isArray(initialValues) ? initialValues.map(Number) : [min, max];
+      this.currentStartValue = start;
+      this.currentEndValue = end;
+      this.hasBeenManipulated = start !== min || end !== max;
+    } else {
+      const [val] = Array.isArray(initialValues) ? initialValues.map(Number) : [min];
+      this.currentValue = val;
+      this.hasBeenManipulated = val !== min;
+    }
+    if (this.hasTooltips && this.mode === "range") {
+      mergeTooltips(this.slider, 15, "-");
+    }
+    this.slider.noUiSlider.on("update", (values) => {
+      if (this.mode === "range") {
+        const [start, end] = values.map(Number);
+        this.currentStartValue = start;
+        this.currentEndValue = end;
+        this.hasBeenManipulated = start !== min || end !== max;
+      } else {
+        const [val] = values.map(Number);
+        this.currentValue = val;
+        this.hasBeenManipulated = val !== min;
+      }
+      this.requestUpdate();
+    });
+    this.slider.noUiSlider.on("change", (values) => {
+      if (this.mode === "range") {
+        const [start, end] = values.map(Number);
+        this.currentStartValue = start;
+        this.currentEndValue = end;
+        this.hasBeenManipulated = start !== min || end !== max;
+        this.emit("terra-slider-change", {
+          detail: { startValue: start, endValue: end }
+        });
+      } else {
+        const [val] = values.map(Number);
+        this.currentValue = val;
+        this.hasBeenManipulated = val !== min;
+        this.emit("terra-slider-change", { detail: { value: val } });
+      }
+      this.requestUpdate();
+    });
+    this.slider.noUiSlider.on("update", () => {
+      this._updateInputFields();
+    });
+    this.slider.noUiSlider.on("change", () => {
+      this._updateInputFields();
+    });
+    this.disabledChanged();
+  }
+  _updateInputFields() {
+    if (!this.showInputs) {
+      return;
+    }
+    const rawValues = this.slider.noUiSlider.get();
+    const currentValues = Array.isArray(rawValues) ? rawValues : [rawValues];
+    this.requestUpdate();
+    setTimeout(() => {
+      var _a, _b, _c;
+      if (this.mode === "range") {
+        const startInput = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
+          "#slider-start-input"
+        );
+        const endInput = (_b = this.shadowRoot) == null ? void 0 : _b.querySelector(
+          "#slider-end-input"
+        );
+        if (startInput) {
+          startInput.value = this._formatValue(Number(currentValues[0]));
+        }
+        if (endInput) {
+          endInput.value = this._formatValue(Number(currentValues[1]));
+        }
+      } else {
+        const valueInput = (_c = this.shadowRoot) == null ? void 0 : _c.querySelector(
+          "#slider-value-input"
+        );
+        if (valueInput) {
+          valueInput.value = this._formatValue(Number(currentValues[0]));
+        }
+      }
+    }, 10);
+  }
+  _getFormatter() {
+    const isIntegerStep = Number.isInteger(this.step);
+    return {
+      to: (value) => {
+        if (isIntegerStep) {
+          return Math.round(value).toString();
+        } else {
+          const stepStr = this.step.toString();
+          const decimalPlaces = stepStr.includes(".") ? stepStr.split(".")[1].length : 0;
+          return value.toFixed(decimalPlaces);
+        }
+      },
+      from: (value) => {
+        return Number(value);
+      }
+    };
+  }
+  _formatValue(value) {
+    const numValue = Number(value);
+    if (isNaN(numValue)) {
+      return "0";
+    }
+    const isIntegerStep = Number.isInteger(this.step);
+    if (isIntegerStep) {
+      return Math.round(numValue).toString();
+    } else {
+      const stepStr = this.step.toString();
+      const decimalPlaces = stepStr.includes(".") ? stepStr.split(".")[1].length : 0;
+      return numValue.toFixed(decimalPlaces);
+    }
+  }
+  handleClear() {
+    const min = Number(this.min);
+    const max = Number(this.max);
+    if (this.mode === "range") {
+      this.slider.noUiSlider.set([min, max]);
+      this.currentStartValue = min;
+      this.currentEndValue = max;
+      this.hasBeenManipulated = false;
+    } else {
+      this.slider.noUiSlider.set([min]);
+      this.currentValue = min;
+      this.hasBeenManipulated = false;
+    }
+    this.requestUpdate();
+  }
+  render() {
+    var _a, _b, _c;
+    const containerClass = "container" + (this.hasPips ? " hasPips" : "");
+    const min = Number(this.min);
+    const max = Number(this.max);
+    const startValue = (_a = this.currentStartValue) != null ? _a : this.mode === "range" ? min : void 0;
+    const endValue = (_b = this.currentEndValue) != null ? _b : this.mode === "range" ? max : void 0;
+    const singleValue = (_c = this.currentValue) != null ? _c : this.mode === "single" ? min : void 0;
+    const currentRangeDisplay = this.mode === "range" ? `${this._formatValue(startValue)}\u2013${this._formatValue(endValue)}` : this._formatValue(singleValue);
+    return html`
+            <div class="slider">
+                ${!this.hasTooltips ? html`
+                          <div class="slider__header">
+                              <label
+                                  for="slider-control"
+                                  class=${this.hideLabel ? "sr-only" : "slider__label"}
+                                  >${this.label}</label
+                              >
+                              <div class="slider__header-right">
+                                  ${this.hasBeenManipulated ? html`
+                                            <button
+                                                class="slider__clear"
+                                                @click="${this.handleClear}"
+                                                type="button"
+                                            >
+                                                Clear
+                                            </button>
+                                        ` : ""}
+                                  <span class="slider__current-range"
+                                      >${currentRangeDisplay}</span
+                                  >
+                              </div>
+                          </div>
+                      ` : html`
+                          <label
+                              for="slider-control"
+                              class=${this.hideLabel ? "sr-only" : "slider__label"}
+                              >${this.label}</label
+                          >
+                      `}
+                <div class="${containerClass}">
+                    <div part="slider" id="slider-control"></div>
+                    ${this.showInputs ? this._renderInputFields() : ""}
+                    <slot></slot>
+                </div>
+            </div>
+        `;
+  }
+  _renderInputFields() {
+    var _a, _b, _c, _d, _e, _f;
+    if (this.mode === "range") {
+      return html`
+                <div class="slider-inputs">
+                    <input
+                        id="slider-start-input"
+                        type="number"
+                        .min="${this.min}"
+                        .max="${this.max}"
+                        .step="${this.step}"
+                        .value="${this._formatValue(
+        (_b = (_a = this.startValue) != null ? _a : this.min) != null ? _b : 0
+      )}"
+                        @change="${this._handleInputChange}"
+                        @keydown="${this._handleInputKeydown}"
+                    />
+                    <span class="input-separator">to</span>
+                    <input
+                        id="slider-end-input"
+                        type="number"
+                        .min="${this.min}"
+                        .max="${this.max}"
+                        .step="${this.step}"
+                        .value="${this._formatValue(
+        (_d = (_c = this.endValue) != null ? _c : this.max) != null ? _d : 100
+      )}"
+                        @change="${this._handleInputChange}"
+                        @keydown="${this._handleInputKeydown}"
+                    />
+                </div>
+            `;
+    } else {
+      return html`
+                <div class="slider-inputs">
+                    <input
+                        id="slider-value-input"
+                        type="number"
+                        .min="${this.min}"
+                        .max="${this.max}"
+                        .step="${this.step}"
+                        .value="${this._formatValue((_f = (_e = this.value) != null ? _e : this.min) != null ? _f : 0)}"
+                        @change="${this._handleInputChange}"
+                        @keydown="${this._handleInputKeydown}"
+                    />
+                </div>
+            `;
+    }
+  }
+  _handleInputChange(event) {
+    const input = event.target;
+    const value = Number(input.value);
+    const min = Number(this.min);
+    const max = Number(this.max);
+    const clampedValue = Math.max(min, Math.min(max, value));
+    input.value = this._formatValue(clampedValue);
+    if (this.mode === "range") {
+      const currentValues = this.slider.noUiSlider.get();
+      const newValues = [...currentValues];
+      if (input.id === "slider-start-input") {
+        newValues[0] = clampedValue;
+      } else {
+        newValues[1] = clampedValue;
+      }
+      this.slider.noUiSlider.set(newValues);
+      this.emit("terra-slider-change", {
+        detail: { startValue: newValues[0], endValue: newValues[1] }
+      });
+    } else {
+      this.slider.noUiSlider.set([clampedValue]);
+      this.emit("terra-slider-change", { detail: { value: clampedValue } });
+    }
+  }
+  _handleInputKeydown(event) {
+    if (event.key === "Enter") {
+      ;
+      event.target.blur();
+    }
+  }
+};
+TerraSlider.styles = [component_styles_default, slider_styles_default];
+__decorateClass([
+  query('[part~="slider"]')
+], TerraSlider.prototype, "slider", 2);
+__decorateClass([
+  property({ reflect: true })
+], TerraSlider.prototype, "mode", 2);
+__decorateClass([
+  property({ type: Number })
+], TerraSlider.prototype, "min", 2);
+__decorateClass([
+  property({ type: Number })
+], TerraSlider.prototype, "max", 2);
+__decorateClass([
+  property({ type: Number })
+], TerraSlider.prototype, "step", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], TerraSlider.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "has-pips" })
+], TerraSlider.prototype, "hasPips", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "has-tooltips" })
+], TerraSlider.prototype, "hasTooltips", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "show-inputs" })
+], TerraSlider.prototype, "showInputs", 2);
+__decorateClass([
+  property({ type: Number })
+], TerraSlider.prototype, "value", 2);
+__decorateClass([
+  property({ type: Number, attribute: "start-value" })
+], TerraSlider.prototype, "startValue", 2);
+__decorateClass([
+  property({ type: Number, attribute: "end-value" })
+], TerraSlider.prototype, "endValue", 2);
+__decorateClass([
+  property()
+], TerraSlider.prototype, "label", 2);
+__decorateClass([
+  property({ attribute: "hide-label", type: Boolean })
+], TerraSlider.prototype, "hideLabel", 2);
+__decorateClass([
+  state()
+], TerraSlider.prototype, "currentStartValue", 2);
+__decorateClass([
+  state()
+], TerraSlider.prototype, "currentEndValue", 2);
+__decorateClass([
+  state()
+], TerraSlider.prototype, "currentValue", 2);
+__decorateClass([
+  state()
+], TerraSlider.prototype, "hasBeenManipulated", 2);
+__decorateClass([
+  watch([
+    "mode",
+    "min",
+    "max",
+    "step",
+    "value",
+    "startValue",
+    "endValue",
+    "hasPips",
+    "hasTooltips",
+    "showInputs"
+  ])
+], TerraSlider.prototype, "updateSlider", 1);
+__decorateClass([
+  watch("disabled")
+], TerraSlider.prototype, "disabledChanged", 1);
+
+export {
+  TerraSlider
+};