@nasa-terra/components 0.0.171 → 0.0.172

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

@@ -0,0 +1,287 @@
+import {
+  Leaflet
+} from "./chunk.ZVQIG4FI.js";
+import {
+  leaflet_styles_default
+} from "./chunk.WXP5OUQO.js";
+import {
+  MapController
+} from "./chunk.KS33TJQ3.js";
+import {
+  map_styles_default
+} from "./chunk.GNFKFHVB.js";
+import {
+  leaflet_draw_styles_default
+} from "./chunk.XCB7WJR3.js";
+import {
+  h
+} from "./chunk.AH6W6EGS.js";
+import {
+  o
+} from "./chunk.RRPJMP3C.js";
+import {
+  watch
+} from "./chunk.5WMSKURU.js";
+import {
+  TerraElement,
+  component_styles_default,
+  e,
+  n,
+  r
+} from "./chunk.TBAPGHFB.js";
+import {
+  E,
+  x
+} from "./chunk.3ZQGAH53.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateMethod,
+  __spreadValues,
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.CZA6CSBG.js";
+
+// src/components/map/map.component.ts
+init_dirname();
+init_buffer();
+init_process();
+var _parseConstraints, parseConstraints_fn, _normalizeBounds, normalizeBounds_fn, _isPointInsideBounds, isPointInsideBounds_fn, _isBoundsInsideBounds, isBoundsInsideBounds_fn, _markDynamicLeafletContent, markDynamicLeafletContent_fn;
+var TerraMap = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _parseConstraints);
+    __privateAdd(this, _normalizeBounds);
+    __privateAdd(this, _isPointInsideBounds);
+    __privateAdd(this, _isBoundsInsideBounds);
+    __privateAdd(this, _markDynamicLeafletContent);
+    this.minZoom = 0;
+    this.maxZoom = 23;
+    this.zoom = 1;
+    this.hasNavigation = false;
+    this.hasCoordTracker = false;
+    this.hasShapeSelector = false;
+    this.staticMode = false;
+    this.noWorldWrap = false;
+    this.spatialConstraints = "-180, -90, 180, 90";
+    this.value = [];
+    // Track if initial draw event has fired to distinguish user draws from initial/programmatic values
+    this.hasProcessedInitialDraw = false;
+    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,
+      staticMode: this.staticMode,
+      noWorldWrap: this.noWorldWrap
+    });
+    this.map.on("draw", (layer) => {
+      if (this.hasProcessedInitialDraw) {
+        const constraints = __privateMethod(this, _parseConstraints, parseConstraints_fn).call(this);
+        if (constraints) {
+          if ("latLng" in layer && !__privateMethod(this, _isPointInsideBounds, isPointInsideBounds_fn).call(this, layer.latLng, constraints)) {
+            this.map.clearLayers();
+            return;
+          }
+          if ("bounds" in layer && !__privateMethod(this, _isBoundsInsideBounds, isBoundsInsideBounds_fn).call(this, layer.bounds, constraints)) {
+            this.map.clearLayers();
+            return;
+          }
+        }
+      } else {
+        this.hasProcessedInitialDraw = true;
+      }
+      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 x`
+            <select
+                class="map__select form-control"
+                @change=${this.map.handleShapeSelect}
+            >
+                <option value="">Select a Shape...</option>
+
+                ${h(
+      o((_a = this.shapes) == null ? void 0 : _a.categories, (category) => {
+        return x`<optgroup label="${category.title}">
+                            ${category.shapes.map((shape) => {
+          return x`
+                                    <option
+                                        value="shape=${shape.shapefileID}/${shape.shapeID}"
+                                    >
+                                        ${shape.name}
+                                    </option>
+                                `;
+        })}
+                        </optgroup> `;
+      })
+    )}
+            </select>
+        `;
+  }
+  render() {
+    return x`
+            ${this.hasShapeSelector ? this.selectTemplate() : E}
+            <div
+                part="map"
+                id="map"
+                class=${`map ${this.staticMode ? "static" : ""}`}
+            ></div>
+        `;
+  }
+  invalidateSize() {
+    this.map.map.invalidateSize();
+  }
+};
+_parseConstraints = new WeakSet();
+parseConstraints_fn = function() {
+  var _a;
+  try {
+    const coords = (_a = this.spatialConstraints) == null ? void 0 : _a.split(",").map((c) => parseFloat(c.trim()));
+    if (!coords || coords.length !== 4)
+      return null;
+    return coords;
+  } catch (e2) {
+    return null;
+  }
+};
+_normalizeBounds = new WeakSet();
+normalizeBounds_fn = function(bounds) {
+  const [west, south, east, north] = bounds;
+  return { west, south, east, north };
+};
+_isPointInsideBounds = new WeakSet();
+isPointInsideBounds_fn = function(point, rawBounds) {
+  if (!Array.isArray(rawBounds) || rawBounds.length !== 4) {
+    return true;
+  }
+  const { west, south, east, north } = __privateMethod(this, _normalizeBounds, normalizeBounds_fn).call(this, rawBounds);
+  return point.lat >= south && point.lat <= north && point.lng >= west && point.lng <= east;
+};
+_isBoundsInsideBounds = new WeakSet();
+isBoundsInsideBounds_fn = function(inner, rawOuter) {
+  if (!Array.isArray(rawOuter) || rawOuter.length !== 4) {
+    return true;
+  }
+  const { west, south, east, north } = __privateMethod(this, _normalizeBounds, normalizeBounds_fn).call(this, rawOuter);
+  return inner.getSouth() >= south && inner.getNorth() <= north && inner.getWest() >= west && inner.getEast() <= east;
+};
+_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([
+  n({ attribute: "min-zoom", type: Number })
+], TerraMap.prototype, "minZoom", 2);
+__decorateClass([
+  n({ attribute: "max-zoom", type: Number })
+], TerraMap.prototype, "maxZoom", 2);
+__decorateClass([
+  n({ type: Number })
+], TerraMap.prototype, "zoom", 2);
+__decorateClass([
+  n({ attribute: "has-navigation", type: Boolean })
+], TerraMap.prototype, "hasNavigation", 2);
+__decorateClass([
+  n({ attribute: "has-coord-tracker", type: Boolean })
+], TerraMap.prototype, "hasCoordTracker", 2);
+__decorateClass([
+  n({ attribute: "has-shape-selector", type: Boolean })
+], TerraMap.prototype, "hasShapeSelector", 2);
+__decorateClass([
+  n({ attribute: "hide-bounding-box-selection", type: Boolean })
+], TerraMap.prototype, "hideBoundingBoxSelection", 2);
+__decorateClass([
+  n({ attribute: "hide-point-selection", type: Boolean })
+], TerraMap.prototype, "hidePointSelection", 2);
+__decorateClass([
+  n({ type: Boolean })
+], TerraMap.prototype, "staticMode", 2);
+__decorateClass([
+  n({ attribute: "no-world-wrap", type: Boolean })
+], TerraMap.prototype, "noWorldWrap", 2);
+__decorateClass([
+  n({ attribute: "spatial-constraints" })
+], TerraMap.prototype, "spatialConstraints", 2);
+__decorateClass([
+  n({ type: Array })
+], TerraMap.prototype, "value", 2);
+__decorateClass([
+  e("#map")
+], TerraMap.prototype, "mapElement", 2);
+__decorateClass([
+  watch("value")
+], TerraMap.prototype, "valueChanged", 1);
+__decorateClass([
+  r()
+], TerraMap.prototype, "shapes", 2);
+
+export {
+  TerraMap
+};

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

@@ -0,0 +1,190 @@
+import {
+  date_range_slider_styles_default
+} from "./chunk.FFPQG36A.js";
+import {
+  PipsMode,
+  nouislider_default
+} from "./chunk.T7SV2UAX.js";
+import {
+  mergeTooltips
+} from "./chunk.4HZ2S3M3.js";
+import {
+  format,
+  isValidDate
+} from "./chunk.WE52YORO.js";
+import {
+  watch
+} from "./chunk.5WMSKURU.js";
+import {
+  TerraElement,
+  component_styles_default,
+  e,
+  n
+} from "./chunk.TBAPGHFB.js";
+import {
+  x
+} from "./chunk.3ZQGAH53.js";
+import {
+  __decorateClass,
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.CZA6CSBG.js";
+
+// src/components/date-range-slider/date-range-slider.component.ts
+init_dirname();
+init_buffer();
+init_process();
+var TerraDateRangeSlider = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.timeScale = "daily";
+    this.disabled = false;
+    this.hasPips = true;
+  }
+  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();
+  }
+  renderSlider() {
+    var _a;
+    if (!this.slider) {
+      return;
+    }
+    (_a = this.slider.noUiSlider) == null ? void 0 : _a.destroy();
+    if (!isValidDate(this.minDate) || !isValidDate(this.maxDate)) {
+      this.renderEmptySlider();
+      this.minDate && !isValidDate(this.minDate) && console.error("Invalid min date provided");
+      this.maxDate && !isValidDate(this.maxDate) && console.error("Invalid max date provided");
+      return;
+    }
+    const minDate = new Date(this.minDate);
+    const maxDate = new Date(this.maxDate);
+    const startDate = new Date(
+      isValidDate(this.startDate) ? this.startDate : this.minDate
+    );
+    const endDate = new Date(
+      isValidDate(this.endDate) ? this.endDate : this.maxDate
+    );
+    minDate.setUTCHours(0, 0, 0, 0);
+    startDate.setUTCHours(0, 0, 0, 0);
+    maxDate.setUTCHours(23, 59, 59, 999);
+    endDate.setUTCHours(23, 59, 59, 999);
+    const sliderOptions = {
+      range: {
+        // convert to milliseconds to define a range
+        min: minDate.getTime(),
+        max: maxDate.getTime()
+      },
+      behaviour: "drag",
+      step: this._getStep(),
+      start: [startDate.getTime(), endDate.getTime()],
+      // defaults to either the given start/end dates or the full date range (min/max date)
+      tooltips: [true, true],
+      // for each handle, choose whether to show a tooltip
+      connect: true,
+      // whether to connect the handles with a colorized bar
+      pips: {
+        mode: PipsMode.Range,
+        density: -1,
+        format: this._getSliderFormatter()
+      },
+      format: this._getSliderFormatter()
+    };
+    nouislider_default.create(this.slider, sliderOptions);
+    mergeTooltips(this.slider);
+    this.slider.noUiSlider.on("change", (values) => {
+      this.emit("terra-date-range-change", {
+        detail: {
+          startDate: this._formatDate(values[0]),
+          endDate: this._formatDate(values[1])
+        }
+      });
+    });
+  }
+  renderEmptySlider() {
+    nouislider_default.create(this.slider, {
+      start: [0, 0],
+      range: {
+        min: 0,
+        max: 0
+      }
+    });
+  }
+  _getStep() {
+    const oneMinuteMillis = 60 * 1e3;
+    const oneHourMillis = 60 * oneMinuteMillis;
+    const oneDayMillis = 24 * oneHourMillis;
+    switch (this.timeScale) {
+      case "half-hourly":
+        return 30 * oneMinuteMillis;
+      case "hourly":
+        return oneHourMillis;
+      default:
+        return oneDayMillis;
+    }
+  }
+  _getSliderFormatter() {
+    return {
+      to: (value) => {
+        return this._formatDate(value);
+      },
+      from: (value) => {
+        return Number(value);
+      }
+    };
+  }
+  _formatDate(date) {
+    const dateFormat = this.timeScale === "daily" ? "yyyy-MM-dd" : "yyyy-MM-dd HH:mm";
+    return format(new Date(date).toUTCString(), dateFormat);
+  }
+  render() {
+    const containerClass = "container" + this.hasPips ? " hasPips" : "";
+    return x`
+            <div class="${containerClass}">
+                <div part="slider"></div>
+            </div>
+        `;
+  }
+};
+TerraDateRangeSlider.styles = [component_styles_default, date_range_slider_styles_default];
+__decorateClass([
+  e('[part~="slider"]')
+], TerraDateRangeSlider.prototype, "slider", 2);
+__decorateClass([
+  n({ attribute: "time-scale" })
+], TerraDateRangeSlider.prototype, "timeScale", 2);
+__decorateClass([
+  n({ attribute: "min-date" })
+], TerraDateRangeSlider.prototype, "minDate", 2);
+__decorateClass([
+  n({ attribute: "max-date" })
+], TerraDateRangeSlider.prototype, "maxDate", 2);
+__decorateClass([
+  n({ attribute: "start-date" })
+], TerraDateRangeSlider.prototype, "startDate", 2);
+__decorateClass([
+  n({ attribute: "end-date" })
+], TerraDateRangeSlider.prototype, "endDate", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], TerraDateRangeSlider.prototype, "disabled", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true, attribute: "has-pips" })
+], TerraDateRangeSlider.prototype, "hasPips", 2);
+__decorateClass([
+  watch(["startDate", "endDate", "minDate", "maxDate"])
+], TerraDateRangeSlider.prototype, "updateSlider", 1);
+__decorateClass([
+  watch("disabled")
+], TerraDateRangeSlider.prototype, "disabledChanged", 1);
+
+export {
+  TerraDateRangeSlider
+};

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

@@ -0,0 +1,19 @@
+import {
+  TerraMap
+} from "./chunk.7R2GWEZU.js";
+import {
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.CZA6CSBG.js";
+
+// src/components/map/map.ts
+init_dirname();
+init_buffer();
+init_process();
+var map_default = TerraMap;
+TerraMap.define("terra-map");
+
+export {
+  map_default
+};

package/cdn/chunks/chunk.A4KDSUZV.js

@@ -0,0 +1,41 @@
+import {
+  TerraSelect
+} from "./chunk.GLT3Q3FB.js";
+import {
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.CZA6CSBG.js";
+
+// src/react/select/index.ts
+init_dirname();
+init_buffer();
+init_process();
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "terra-select";
+TerraSelect.define("terra-select");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraSelect,
+  react: React,
+  events: {
+    onTerraChange: "terra-change",
+    onTerraClear: "terra-clear",
+    onTerraInput: "terra-input",
+    onTerraFocus: "terra-focus",
+    onTerraBlur: "terra-blur",
+    onTerraShow: "terra-show",
+    onTerraAfterShow: "terra-after-show",
+    onTerraHide: "terra-hide",
+    onTerraAfterHide: "terra-after-hide",
+    onTerraInvalid: "terra-invalid"
+  },
+  displayName: "TerraSelect"
+});
+var select_default = reactWrapper;
+
+export {
+  select_default
+};