@nasa-terra/components 0.0.167 → 0.0.169

package/dist/chunks/chunk.RLA4DXLG.js

@@ -0,0 +1,11 @@
+import {
+  TerraBreadcrumb
+} from "./chunk.NCLFPAHC.js";
+
+// src/components/breadcrumb/breadcrumb.ts
+var breadcrumb_default = TerraBreadcrumb;
+TerraBreadcrumb.define("terra-breadcrumb");
+
+export {
+  breadcrumb_default
+};

package/dist/chunks/chunk.RMMLBUXZ.js

@@ -0,0 +1,21 @@
+import {
+  TerraBreadcrumb
+} from "./chunk.NCLFPAHC.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.RO4MUFVF.js

@@ -0,0 +1,67 @@
+import {
+  getVariableEntryId
+} from "./chunk.CGVPVXTX.js";
+import {
+  GiovanniVariableCatalog
+} from "./chunk.6OWWYTVJ.js";
+
+// src/metadata-catalog/tasks.ts
+import { Task } from "@lit/task";
+var variableCache = /* @__PURE__ */ new Map();
+var pendingRequests = /* @__PURE__ */ new Map();
+function setHostPropertiesFromVariable(host, variable, variableEntryId) {
+  var _a, _b, _c, _d;
+  host.startDate = (_b = host.startDate) != null ? _b : (_a = variable.exampleInitialStartDate) == null ? void 0 : _a.toISOString();
+  host.endDate = (_d = host.endDate) != null ? _d : (_c = variable.exampleInitialEndDate) == null ? void 0 : _c.toISOString();
+  host.catalogVariable = variable;
+  host.variableEntryId = variableEntryId;
+}
+function getFetchVariableTask(host, autoRun = true) {
+  const catalog = new GiovanniVariableCatalog();
+  return new Task(host, {
+    task: async (_args) => {
+      const variableEntryId = getVariableEntryId(host);
+      console.debug("Fetch variable ", variableEntryId);
+      if (!variableEntryId) {
+        return;
+      }
+      if (variableCache.has(variableEntryId)) {
+        console.debug("Using cached variable ", variableEntryId);
+        const cachedVariable = variableCache.get(variableEntryId);
+        setHostPropertiesFromVariable(host, cachedVariable, variableEntryId);
+        return;
+      }
+      if (pendingRequests.has(variableEntryId)) {
+        console.debug(
+          "Waiting for pending request for variable ",
+          variableEntryId
+        );
+        const variable = await pendingRequests.get(variableEntryId);
+        if (variable) {
+          console.debug("Using cached variable ", variableEntryId);
+          setHostPropertiesFromVariable(host, variable, variableEntryId);
+        }
+        return;
+      }
+      const requestPromise = catalog.getVariable(variableEntryId);
+      pendingRequests.set(variableEntryId, requestPromise);
+      try {
+        const variable = await requestPromise;
+        console.debug("Found variable ", variable);
+        if (!variable) {
+          return;
+        }
+        variableCache.set(variableEntryId, variable);
+        setHostPropertiesFromVariable(host, variable, variableEntryId);
+      } finally {
+        pendingRequests.delete(variableEntryId);
+      }
+    },
+    args: () => [host.variableEntryId, host.collection, host.variable],
+    autoRun
+  });
+}
+
+export {
+  getFetchVariableTask
+};

package/dist/chunks/chunk.RS6ILFIV.js

@@ -0,0 +1,24 @@
+import {
+  TerraDatePicker
+} from "./chunk.QIV6FTJZ.js";
+
+// src/react/date-picker/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "terra-date-picker";
+TerraDatePicker.define("terra-date-picker");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraDatePicker,
+  react: React,
+  events: {
+    onTerraDateRangeChange: "terra-date-range-change"
+  },
+  displayName: "TerraDatePicker"
+});
+var date_picker_default = reactWrapper;
+
+export {
+  date_picker_default
+};

package/dist/chunks/chunk.S6S6AZVY.js

@@ -0,0 +1,11 @@
+import {
+  TerraSkeleton
+} from "./chunk.ZM2BSPTE.js";
+
+// src/components/skeleton/skeleton.ts
+var skeleton_default = TerraSkeleton;
+TerraSkeleton.define("terra-skeleton");
+
+export {
+  skeleton_default
+};

package/dist/chunks/chunk.SJ2MURWD.js

@@ -0,0 +1,124 @@
+import {
+  loader_styles_default
+} from "./chunk.MP5LGGXC.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.JEAP7TNI.js";
+import {
+  __decorateClass
+} from "./chunk.SHKVBVTI.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.role = "progressbar";
+    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=${this.role}
+                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([
+  property({ reflect: true })
+], TerraLoader.prototype, "role", 2);
+__decorateClass([
+  state()
+], TerraLoader.prototype, "_currentPercent", 2);
+
+export {
+  TerraLoader
+};

package/dist/chunks/chunk.SU5KHWCD.js

@@ -0,0 +1,48 @@
+import {
+  CmrCatalog
+} from "./chunk.BJDVG6P4.js";
+import {
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet
+} from "./chunk.SHKVBVTI.js";
+
+// src/components/plot-toolbar/plot-toolbar.controller.ts
+import { Task } from "@lit/task";
+var _fetchCollectionTask, _host, _catalog, _getCatalogRepository, getCatalogRepository_fn;
+var PlotToolbarController = class {
+  constructor(host) {
+    __privateAdd(this, _getCatalogRepository);
+    __privateAdd(this, _fetchCollectionTask, void 0);
+    __privateAdd(this, _host, void 0);
+    __privateAdd(this, _catalog, void 0);
+    __privateSet(this, _host, host);
+    __privateSet(this, _catalog, __privateMethod(this, _getCatalogRepository, getCatalogRepository_fn).call(this));
+    __privateSet(this, _fetchCollectionTask, new Task(host, {
+      task: async ([catalogVariable], { signal }) => {
+        return __privateGet(this, _catalog).getCollectionCitation(
+          `${catalogVariable.dataProductShortName}_${catalogVariable.dataProductVersion}`,
+          {
+            signal
+          }
+        );
+      },
+      args: () => [__privateGet(this, _host).catalogVariable]
+    }));
+  }
+  get collectionCitation() {
+    return __privateGet(this, _fetchCollectionTask).value;
+  }
+};
+_fetchCollectionTask = new WeakMap();
+_host = new WeakMap();
+_catalog = new WeakMap();
+_getCatalogRepository = new WeakSet();
+getCatalogRepository_fn = function() {
+  return new CmrCatalog();
+};
+
+export {
+  PlotToolbarController
+};

package/dist/chunks/chunk.SUIUTP6U.js

@@ -0,0 +1,27 @@
+import {
+  TerraAlert
+} from "./chunk.2IFSOO3E.js";
+
+// src/react/alert/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "terra-alert";
+TerraAlert.define("terra-alert");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraAlert,
+  react: React,
+  events: {
+    onTerraShow: "terra-show",
+    onTerraAfterShow: "terra-after-show",
+    onTerraHide: "terra-hide",
+    onTerraAfterHide: "terra-after-hide"
+  },
+  displayName: "TerraAlert"
+});
+var alert_default = reactWrapper;
+
+export {
+  alert_default
+};

package/dist/chunks/chunk.TEXDZ47N.js

@@ -0,0 +1,272 @@
+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.JEAP7TNI.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 = [];
+    // 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 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.TFDANUKB.js

@@ -0,0 +1,11 @@
+import {
+  TerraFileUpload
+} from "./chunk.6XEOJEHN.js";
+
+// src/components/file-upload/file-upload.ts
+var file_upload_default = TerraFileUpload;
+TerraFileUpload.define("terra-file-upload");
+
+export {
+  file_upload_default
+};

package/dist/chunks/chunk.TGLQJXHW.js

@@ -0,0 +1,67 @@
+import {
+  stepper_styles_default
+} from "./chunk.Y4ZWTPEA.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.JEAP7TNI.js";
+import {
+  __decorateClass
+} from "./chunk.SHKVBVTI.js";
+
+// src/components/stepper/stepper.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property, query } from "lit/decorators.js";
+var TerraStepper = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "default";
+  }
+  handleSlotChange() {
+    const slottedElements = [
+      ...this.defaultSlot.assignedElements({ flatten: true })
+    ];
+    slottedElements.forEach((el, index) => {
+      const step = findStep(el);
+      if (step) {
+        step.toggleAttribute("data-terra-stepper__step", true);
+        step.toggleAttribute("data-terra-stepper__step--first", index === 0);
+        step.toggleAttribute(
+          "data-terra-stepper__step--last",
+          index === slottedElements.length - 1
+        );
+      }
+    });
+  }
+  render() {
+    return html`
+            <div
+                part="base"
+                class=${classMap({
+      stepper: true,
+      "stepper--default": this.variant === "default",
+      "stepper--condensed": this.variant === "condensed"
+    })}
+            >
+                <slot @slotchange=${this.handleSlotChange}></slot>
+            </div>
+        `;
+  }
+};
+TerraStepper.styles = [component_styles_default, stepper_styles_default];
+__decorateClass([
+  query("slot")
+], TerraStepper.prototype, "defaultSlot", 2);
+__decorateClass([
+  property({ reflect: true })
+], TerraStepper.prototype, "variant", 2);
+function findStep(el) {
+  var _a;
+  const selector = "terra-stepper-step";
+  return (_a = el.closest(selector)) != null ? _a : el.querySelector(selector);
+}
+
+export {
+  TerraStepper
+};