@nasa-terra/components 0.0.146 → 0.0.148

package/dist/chunks/chunk.KHPNEX2A.js

@@ -0,0 +1,266 @@
+import {
+  Leaflet
+} from "./chunk.JB5255IQ.js";
+import {
+  leaflet_styles_default
+} from "./chunk.HNQMK3PU.js";
+import {
+  MapController
+} from "./chunk.HHPZ7XOA.js";
+import {
+  map_styles_default
+} from "./chunk.PJP62E5Q.js";
+import {
+  leaflet_draw_styles_default
+} from "./chunk.445A7YVG.js";
+import {
+  watch
+} from "./chunk.NWXJOH5T.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.DFM34CDQ.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateMethod,
+  __spreadValues
+} from "./chunk.SHKVBVTI.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 _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 = [];
+    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) => {
+      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;
+        }
+      }
+      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`
+            ${this.hasShapeSelector ? this.selectTemplate() : nothing}
+            <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 (e) {
+    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([
+  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: Boolean })
+], TerraMap.prototype, "staticMode", 2);
+__decorateClass([
+  property({ attribute: "no-world-wrap", type: Boolean })
+], TerraMap.prototype, "noWorldWrap", 2);
+__decorateClass([
+  property({ attribute: "spatial-constraints" })
+], TerraMap.prototype, "spatialConstraints", 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.KMPHHRML.js

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

package/dist/chunks/chunk.KTUM2QQ2.js

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

package/dist/chunks/chunk.L3A2H33W.js

@@ -0,0 +1,11 @@
+import {
+  TerraBreadcrumbs
+} from "./chunk.CHRZZULX.js";
+
+// src/components/breadcrumbs/breadcrumbs.ts
+var breadcrumbs_default = TerraBreadcrumbs;
+TerraBreadcrumbs.define("terra-breadcrumbs");
+
+export {
+  breadcrumbs_default
+};

package/dist/chunks/chunk.LA3YEVTQ.js

@@ -0,0 +1,20 @@
+import {
+  caption_styles_default
+} from "./chunk.VO6PUK24.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.DFM34CDQ.js";
+
+// src/components/caption/caption.component.ts
+import { html } from "lit";
+var TerraCaption = class extends TerraElement {
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+TerraCaption.styles = [component_styles_default, caption_styles_default];
+
+export {
+  TerraCaption
+};

package/dist/chunks/chunk.LAJJMOC2.js

@@ -0,0 +1,220 @@
+import {
+  radio_styles_default
+} from "./chunk.RANEKL2E.js";
+import {
+  defaultValue
+} from "./chunk.7C67ZMHT.js";
+import {
+  form_control_styles_default
+} from "./chunk.Y6E3L66U.js";
+import {
+  FormControlController
+} from "./chunk.KT52MHEF.js";
+import {
+  watch
+} from "./chunk.NWXJOH5T.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.DFM34CDQ.js";
+import {
+  __decorateClass
+} from "./chunk.SHKVBVTI.js";
+
+// src/components/radio/radio.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { live } from "lit/directives/live.js";
+import { property, query, state } from "lit/decorators.js";
+var TerraRadio = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.formControlController = new FormControlController(this, {
+      value: (control) => control.checked ? control.value || "on" : void 0,
+      defaultValue: (control) => control.defaultChecked,
+      setValue: (control, checked) => control.checked = checked
+    });
+    this.hasFocus = false;
+    this.title = "";
+    this.name = "";
+    this.size = "medium";
+    this.disabled = false;
+    this.checked = false;
+    this.defaultChecked = false;
+    this.form = "";
+    this.required = false;
+  }
+  /** Gets the validity state object */
+  get validity() {
+    return this.input.validity;
+  }
+  /** Gets the validation message */
+  get validationMessage() {
+    return this.input.validationMessage;
+  }
+  firstUpdated() {
+    this.formControlController.updateValidity();
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("terra-blur");
+  }
+  handleClick() {
+    if (!this.disabled) {
+      this.checked = true;
+      this.emit("terra-change");
+    }
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("terra-focus");
+  }
+  handleInput() {
+    this.emit("terra-input");
+  }
+  handleChange() {
+    this.checked = this.input.checked;
+    this.emit("terra-change");
+  }
+  handleInvalid(event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+  }
+  handleDisabledChange() {
+    this.formControlController.setValidity(this.disabled);
+  }
+  handleCheckedChange() {
+    this.input.checked = this.checked;
+    this.formControlController.updateValidity();
+  }
+  /** Simulates a click on the radio. */
+  click() {
+    this.input.click();
+  }
+  /** Sets focus on the radio. */
+  focus(options) {
+    this.input.focus(options);
+  }
+  /** Removes focus from the radio. */
+  blur() {
+    this.input.blur();
+  }
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    return this.input.checkValidity();
+  }
+  /** Gets the associated form, if one exists. */
+  getForm() {
+    return this.formControlController.getForm();
+  }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    return this.input.reportValidity();
+  }
+  /**
+   * Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear
+   * the custom validation message, call this method with an empty string.
+   */
+  setCustomValidity(message) {
+    this.input.setCustomValidity(message);
+    this.formControlController.updateValidity();
+  }
+  render() {
+    return html`
+            <label
+                part="base"
+                class=${classMap({
+      radio: true,
+      "radio--checked": this.checked,
+      "radio--disabled": this.disabled,
+      "radio--focused": this.hasFocus,
+      "radio--small": this.size === "small",
+      "radio--medium": this.size === "medium",
+      "radio--large": this.size === "large"
+    })}
+            >
+                <input
+                    class="radio__input"
+                    type="radio"
+                    title=${this.title}
+                    name=${this.name}
+                    value=${ifDefined(this.value)}
+                    .checked=${live(this.checked)}
+                    .disabled=${this.disabled}
+                    .required=${this.required}
+                    aria-checked=${this.checked ? "true" : "false"}
+                    @click=${this.handleClick}
+                    @input=${this.handleInput}
+                    @change=${this.handleChange}
+                    @invalid=${this.handleInvalid}
+                    @blur=${this.handleBlur}
+                    @focus=${this.handleFocus}
+                />
+
+                <span
+                    part="${`control${this.checked ? " control--checked" : ""}`}"
+                    class="radio__control"
+                >
+                    ${this.checked ? html`
+                              <svg
+                                  part="checked-icon"
+                                  class="radio__checked-icon"
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  xmlns="http://www.w3.org/2000/svg"
+                              >
+                                  <circle cx="12" cy="12" r="6" fill="currentColor" />
+                              </svg>
+                          ` : ""}
+                </span>
+
+                <slot part="label" class="radio__label"></slot>
+            </label>
+        `;
+  }
+};
+TerraRadio.styles = [component_styles_default, form_control_styles_default, radio_styles_default];
+__decorateClass([
+  query('input[type="radio"]')
+], TerraRadio.prototype, "input", 2);
+__decorateClass([
+  state()
+], TerraRadio.prototype, "hasFocus", 2);
+__decorateClass([
+  property()
+], TerraRadio.prototype, "title", 2);
+__decorateClass([
+  property()
+], TerraRadio.prototype, "name", 2);
+__decorateClass([
+  property()
+], TerraRadio.prototype, "value", 2);
+__decorateClass([
+  property({ reflect: true })
+], TerraRadio.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], TerraRadio.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], TerraRadio.prototype, "checked", 2);
+__decorateClass([
+  defaultValue("checked")
+], TerraRadio.prototype, "defaultChecked", 2);
+__decorateClass([
+  property({ reflect: true })
+], TerraRadio.prototype, "form", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], TerraRadio.prototype, "required", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], TerraRadio.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("checked", { waitUntilFirstUpdate: true })
+], TerraRadio.prototype, "handleCheckedChange", 1);
+
+export {
+  TerraRadio
+};