@nasa-terra/components 0.0.67 → 0.0.68

package/dist/chunks/chunk.OJC754DG.js

@@ -0,0 +1,228 @@
+import {
+  TerraDialog
+} from "./chunk.2LGINANI.js";
+import {
+  DataSubsetterHistoryController
+} from "./chunk.6VTAKEV4.js";
+import {
+  data_subsetter_history_styles_default
+} from "./chunk.7674U7FT.js";
+import {
+  TerraDataSubsetter
+} from "./chunk.YMHBYV33.js";
+import {
+  AuthController
+} from "./chunk.KIC5ZCAM.js";
+import {
+  TerraIcon
+} from "./chunk.2AIVKD54.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.O6SXSDFR.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod
+} from "./chunk.TVFCHGU3.js";
+
+// src/components/data-subsetter-history/data-subsetter-history.component.ts
+import { property, query, state } from "lit/decorators.js";
+import { html, nothing } from "lit";
+var _controller, _renderHistoryItems, renderHistoryItems_fn, _handleHistoryItemClick, handleHistoryItemClick_fn;
+var TerraDataSubsetterHistory = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _renderHistoryItems);
+    __privateAdd(this, _handleHistoryItemClick);
+    this.label = "History";
+    this.collapsed = true;
+    this.hideCancelled = true;
+    __privateAdd(this, _controller, new DataSubsetterHistoryController(this));
+    this._authController = new AuthController(this);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addController(__privateGet(this, _controller));
+  }
+  toggleCollapsed() {
+    this.collapsed = !this.collapsed;
+  }
+  render() {
+    const jobs = __privateGet(this, _controller).jobs;
+    const hasJobs = jobs && jobs.jobs.length > 0;
+    if (!hasJobs) {
+      return nothing;
+    }
+    return html`
+            <div class="${this.collapsed ? "collapsed" : ""}">
+                <div class="history-header" @click=${this.toggleCollapsed}>
+                    <span>${this.label}</span>
+                </div>
+
+                <div class="history-panel">
+                    ${hasJobs ? html`
+                              <div class="history-link-row">
+                                  <label>
+                                      <input
+                                          type="checkbox"
+                                          .checked=${this.hideCancelled}
+                                          @change=${(e) => {
+      this.hideCancelled = e.target.checked;
+    }}
+                                      />
+                                      Hide Cancelled
+                                  </label>
+
+                                  <a
+                                      href="https://harmony.earthdata.nasa.gov/workflow-ui"
+                                      target="_blank"
+                                      rel="noopener noreferrer"
+                                      class="history-link"
+                                  >
+                                      View all
+                                      <terra-icon
+                                          name="outline-arrow-top-right-on-square"
+                                          library="heroicons"
+                                          size="32px"
+                                      ></terra-icon>
+                                  </a>
+                              </div>
+                          ` : nothing}
+
+                    <div class="history-list">
+                        ${jobs ? hasJobs ? __privateMethod(this, _renderHistoryItems, renderHistoryItems_fn).call(this, jobs) : html`<div class="history-alert-message">
+                                      You haven't made any requests yet.<br />
+                                      Get started by
+                                      <a
+                                          href="#"
+                                          class="history-alert-link"
+                                          @click=${(e) => {
+      var _a;
+      e.preventDefault();
+      this.selectedJob = void 0;
+      (_a = this.dialog) == null ? void 0 : _a.show();
+    }}
+                                      >
+                                          creating your first request!</a
+                                      >.
+                                  </div>` : html`<div class="history-alert-message">
+                                  Retrieving your requests....
+                              </div>`}
+                    </div>
+                </div>
+            </div>
+
+            <terra-dialog part="dialog" width="1500px">
+                <terra-data-subsetter
+                    .jobId=${this.selectedJob}
+                    .bearerToken=${this.bearerToken}
+                ></terra-data-subsetter>
+            </terra-dialog>
+        `;
+  }
+};
+_controller = new WeakMap();
+_renderHistoryItems = new WeakSet();
+renderHistoryItems_fn = function(subsetJobs) {
+  const filteredJobs = subsetJobs.jobs.slice().filter((job) => {
+    if (this.hideCancelled) {
+      return job.status !== "canceled" /* CANCELED */;
+    }
+    return true;
+  }).sort(
+    (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+  );
+  if (!filteredJobs.length) {
+    return html`
+                <div class="history-alert-message">
+                    There are no active requests to show.<br />
+                    If you'd like, you can
+                    <a
+                        href="#"
+                        class="history-alert-link"
+                        @click=${(e) => {
+      var _a;
+      e.preventDefault();
+      this.selectedJob = void 0;
+      (_a = this.dialog) == null ? void 0 : _a.show();
+    }}
+                    >
+                        create a new request.</a
+                    >
+                </div>
+            `;
+  }
+  return filteredJobs.map((job) => {
+    var _a;
+    let fillColor = "#0066cc";
+    if (job.status === "successful" /* SUCCESSFUL */ || job.status === "complete_with_errors" /* COMPLETE_WITH_ERRORS */ || job.status === "running_with_errors" /* RUNNING_WITH_ERRORS */) {
+      fillColor = "#28a745";
+    } else if (job.status === "failed" /* FAILED */) {
+      fillColor = "#dc3545";
+    } else if (job.status === "canceled" /* CANCELED */) {
+      fillColor = "#ffc107";
+    }
+    const progressLabel = job.status === "failed" /* FAILED */ || job.status === "canceled" /* CANCELED */ ? job.status : `${job.progress}%`;
+    const progress = job.status === "failed" /* FAILED */ || job.status === "canceled" /* CANCELED */ ? 100 : job.progress;
+    return html`
+                <div
+                    class="history-item"
+                    @click=${__privateMethod(this, _handleHistoryItemClick, handleHistoryItemClick_fn).bind(this, job)}
+                >
+                    <div class="item-header">
+                        <span class="item-title">
+                            ${((_a = job.labels) == null ? void 0 : _a.length) ? job.labels.join(" ") : job.request.split(".nasa.gov").pop()}
+                        </span>
+                    </div>
+
+                    <div class="progress-bar">
+                        <div
+                            class="progress-fill"
+                            style="width: ${progress}%; background-color: ${fillColor}"
+                        >
+                            ${progressLabel}
+                        </div>
+                    </div>
+                </div>
+            `;
+  });
+};
+_handleHistoryItemClick = new WeakSet();
+handleHistoryItemClick_fn = function(job) {
+  var _a;
+  this.selectedJob = job.jobID;
+  (_a = this.dialog) == null ? void 0 : _a.show();
+};
+TerraDataSubsetterHistory.dependencies = {
+  "terra-icon": TerraIcon,
+  "terra-data-subsetter": TerraDataSubsetter,
+  "terra-dialog": TerraDialog
+};
+TerraDataSubsetterHistory.styles = [component_styles_default, data_subsetter_history_styles_default];
+__decorateClass([
+  property()
+], TerraDataSubsetterHistory.prototype, "label", 2);
+__decorateClass([
+  property({ attribute: "bearer-token" })
+], TerraDataSubsetterHistory.prototype, "bearerToken", 2);
+__decorateClass([
+  property({ attribute: "always-show", type: Boolean })
+], TerraDataSubsetterHistory.prototype, "alwaysShow", 2);
+__decorateClass([
+  state()
+], TerraDataSubsetterHistory.prototype, "collapsed", 2);
+__decorateClass([
+  state()
+], TerraDataSubsetterHistory.prototype, "selectedJob", 2);
+__decorateClass([
+  state()
+], TerraDataSubsetterHistory.prototype, "hideCancelled", 2);
+__decorateClass([
+  query('[part~="dialog"]')
+], TerraDataSubsetterHistory.prototype, "dialog", 2);
+
+export {
+  TerraDataSubsetterHistory
+};

package/dist/chunks/chunk.OVUWZWWN.js

@@ -0,0 +1,355 @@
+import {
+  FetchController
+} from "./chunk.HNWBSRBL.js";
+import {
+  variable_keyword_search_styles_default
+} from "./chunk.D3DPGMVW.js";
+import {
+  clearSelection,
+  renderSearchResult,
+  walkToOption
+} from "./chunk.YY65ZHR5.js";
+import {
+  icon_default
+} from "./chunk.O7SVDS2A.js";
+import {
+  button_default
+} from "./chunk.CA2ZDE2M.js";
+import {
+  watch
+} from "./chunk.DTUHBE3U.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.O6SXSDFR.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet,
+  __spreadProps,
+  __spreadValues
+} from "./chunk.TVFCHGU3.js";
+
+// src/components/variable-keyword-search/variable-keyword-search.component.ts
+import Fuse from "fuse.js";
+import { LitElement, html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+import { map } from "lit/directives/map.js";
+import { ref } from "lit/directives/ref.js";
+var _combobox, _fetchController, _listbox, _searchEngine, _walker, _handleComboboxChange, _handleOptionClick, _handleKeydown, _manageListboxVisibility, _selectOption, _handleSearch, handleSearch_fn, _clearSearch, clearSearch_fn;
+var _TerraVariableKeywordSearch = class _TerraVariableKeywordSearch extends TerraElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _handleSearch);
+    __privateAdd(this, _clearSearch);
+    __privateAdd(this, _combobox, null);
+    __privateAdd(this, _fetchController, new FetchController(this));
+    __privateAdd(this, _listbox, null);
+    __privateAdd(this, _searchEngine, null);
+    __privateAdd(this, _walker, null);
+    this.label = "Enter search terms (e.g., precipitation, AOD)";
+    this.hideLabel = true;
+    this.searchConfig = {
+      //* @see {@link https://www.fusejs.io/api/options.html#options}
+      keys: ["id"],
+      useExtendedSearch: true
+    };
+    this.isExpanded = false;
+    this.query = _TerraVariableKeywordSearch.initialQuery;
+    this.searchResults = [];
+    __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);
+      __privateMethod(this, _handleSearch, handleSearch_fn).call(this, this.query);
+    });
+    __privateAdd(this, _handleKeydown, (event) => {
+      var _a;
+      switch (event.key) {
+        case "ArrowDown": {
+          if (!this.isExpanded) {
+            return;
+          }
+          clearSelection(
+            __privateGet(this, _combobox),
+            __privateGet(this, _listbox)
+          );
+          walkToOption(
+            __privateGet(this, _walker),
+            __privateGet(this, _combobox),
+            "next"
+          );
+          break;
+        }
+        case "ArrowUp": {
+          if (!this.isExpanded) {
+            return;
+          }
+          clearSelection(
+            __privateGet(this, _combobox),
+            __privateGet(this, _listbox)
+          );
+          walkToOption(
+            __privateGet(this, _walker),
+            __privateGet(this, _combobox),
+            "previous"
+          );
+          break;
+        }
+        case "Enter": {
+          const currentNode = (_a = __privateGet(this, _walker)) == null ? void 0 : _a.currentNode;
+          if (currentNode.role === "option") {
+            __privateGet(this, _selectOption).call(this, currentNode);
+          }
+          __privateMethod(this, _handleSearch, handleSearch_fn).call(this, this.query);
+          break;
+        }
+        case "Escape": {
+          clearSelection(
+            __privateGet(this, _combobox),
+            __privateGet(this, _listbox)
+          );
+          if (this.isExpanded) {
+            this.isExpanded = false;
+            this.dispatchEvent(new Event("cancel"));
+          } else {
+            this.query = _TerraVariableKeywordSearch.initialQuery;
+          }
+          break;
+        }
+        default: {
+          break;
+        }
+      }
+    });
+    __privateAdd(this, _manageListboxVisibility, (event) => {
+      const path = event.composedPath();
+      const containedThis = path.some(
+        (eventTarget) => eventTarget.localName === _TerraVariableKeywordSearch.tagName
+      );
+      if (!containedThis) {
+        this.isExpanded = false;
+      }
+    });
+    __privateAdd(this, _selectOption, (option) => {
+      this.query = option.id;
+      this.emit("terra-variable-keyword-search-change", { detail: option.id });
+      this.isExpanded = false;
+      clearSelection(
+        __privateGet(this, _combobox),
+        __privateGet(this, _listbox)
+      );
+    });
+  }
+  async valueChanged(_oldValue, newValue) {
+    this.query = newValue;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    globalThis.addEventListener("click", __privateGet(this, _manageListboxVisibility));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    globalThis.removeEventListener("click", __privateGet(this, _manageListboxVisibility));
+  }
+  clear() {
+    this.query = _TerraVariableKeywordSearch.initialQuery;
+  }
+  close() {
+    this.isExpanded = false;
+  }
+  toggle() {
+    this.isExpanded = !this.isExpanded;
+  }
+  render() {
+    var _a;
+    return html`<search part="base" title="Search through the list.">
+            <label for="combobox" class=${this.hideLabel ? "sr-only" : "input-label"}
+                >${this.label}</label
+            >
+            <div class="search-input-group">
+                <terra-button
+                    @click=${() => __privateMethod(this, _handleSearch, handleSearch_fn).call(this, this.query)}
+                    aria-label=${this.query ? `Search for ${this.query}.` : "Enter search term to enable search."}
+                    circle
+                    class="search-button search-input-button"
+                    outline
+                    tabindex="-1"
+                    type="button"
+                >
+                    <slot name="label">
+                        <terra-icon
+                            font-size="1.5em"
+                            library="heroicons"
+                            name="outline-magnifying-glass"
+                        ></terra-icon>
+                    </slot>
+                </terra-button>
+
+                <input
+                    ${ref((el) => {
+      var _a2;
+      if (el) {
+        (_a2 = __privateGet(this, _combobox)) != null ? _a2 : __privateSet(this, _combobox, el);
+      }
+    })}
+                    aria-autocomplete="list"
+                    aria-controls="listbox"
+                    aria-haspopup="list"
+                    aria-expanded=${this.isExpanded}
+                    autocomplete="off"
+                    class="combobox"
+                    id="combobox"
+                    part="combobox"
+                    role="combobox"
+                    type="text"
+                    .placeholder=${(_a = this.placeholder) != null ? _a : `${this.label}\u2026`}
+                    .value=${this.query}
+                    @input=${__privateGet(this, _handleComboboxChange)}
+                    @keydown=${__privateGet(this, _handleKeydown)}
+                />
+
+                ${this.query.length ? html`<terra-button
+                          @click=${() => __privateMethod(this, _clearSearch, clearSearch_fn).call(this)}
+                          aria-label="Clear the searched term and start over."
+                          circle
+                          class="clear-button search-input-button"
+                          outline
+                          tabindex="-1"
+                          type="button"
+                      >
+                          <slot name="label">
+                              <terra-icon
+                                  font-size="1.5em"
+                                  library="heroicons"
+                                  name="outline-x-circle"
+                              ></terra-icon>
+                          </slot>
+                      </terra-button>` : nothing}
+            </div>
+
+            <ul
+                ${ref((el) => {
+      var _a2;
+      if (el) {
+        (_a2 = __privateGet(this, _listbox)) != null ? _a2 : __privateSet(this, _listbox, el);
+      }
+    })}
+                ?inert=${!this.isExpanded}
+                ?open=${this.isExpanded}
+                @click=${__privateGet(this, _handleOptionClick)}
+                aria-label=${this.query ? `Keywords Matching ${this.query}` : "Keywords"}
+                id="listbox"
+                part="listbox"
+                role="listbox"
+                class="search-results"
+            >
+                ${__privateGet(this, _fetchController).render({
+      initial: () => html`<li class="updating">Updating List of Keywords</li>`,
+      pending: () => html`<li class="updating">Updating List of Keywords</li>`,
+      complete: (list) => {
+        __privateSet(this, _searchEngine, new Fuse(list, this.searchConfig));
+        __privateSet(this, _walker, document.createTreeWalker(
+          __privateGet(this, _listbox),
+          NodeFilter.SHOW_ELEMENT,
+          (node) => {
+            var _a2;
+            return ["option", "listbox"].includes(
+              (_a2 = node.role) != null ? _a2 : ""
+            ) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+          }
+        ));
+        return map(this.searchResults, renderSearchResult);
+      },
+      // TODO: Consider a more robust error strategy...like retry w/ backoff?
+      error: (errorMessage) => html`<li class="error">${errorMessage}</li>`
+    })}
+            </ul>
+        </search>`;
+  }
+};
+_combobox = new WeakMap();
+_fetchController = new WeakMap();
+_listbox = new WeakMap();
+_searchEngine = new WeakMap();
+_walker = new WeakMap();
+_handleComboboxChange = new WeakMap();
+_handleOptionClick = new WeakMap();
+_handleKeydown = new WeakMap();
+_manageListboxVisibility = new WeakMap();
+_selectOption = new WeakMap();
+_handleSearch = new WeakSet();
+handleSearch_fn = function(query) {
+  if (query.length) {
+    this.emit("terra-search", { detail: this.query });
+  }
+};
+_clearSearch = new WeakSet();
+clearSearch_fn = function() {
+  var _a;
+  this.query = _TerraVariableKeywordSearch.initialQuery;
+  this.emit("terra-search", { detail: this.query });
+  clearSelection(
+    __privateGet(this, _combobox),
+    __privateGet(this, _listbox)
+  );
+  (_a = __privateGet(this, _combobox)) == null ? void 0 : _a.focus();
+};
+_TerraVariableKeywordSearch.dependencies = {
+  "terra-button": button_default,
+  "terra-icon": icon_default
+};
+_TerraVariableKeywordSearch.styles = [component_styles_default, variable_keyword_search_styles_default];
+_TerraVariableKeywordSearch.shadowRootOptions = __spreadProps(__spreadValues({}, LitElement.shadowRootOptions), {
+  delegatesFocus: true
+});
+_TerraVariableKeywordSearch.tagName = "terra-variable-keyword-search";
+_TerraVariableKeywordSearch.initialQuery = "";
+__decorateClass([
+  property()
+], _TerraVariableKeywordSearch.prototype, "label", 2);
+__decorateClass([
+  property()
+], _TerraVariableKeywordSearch.prototype, "placeholder", 2);
+__decorateClass([
+  property({ attribute: "hide-label", type: Boolean })
+], _TerraVariableKeywordSearch.prototype, "hideLabel", 2);
+__decorateClass([
+  property({ reflect: false, type: Object })
+], _TerraVariableKeywordSearch.prototype, "searchConfig", 2);
+__decorateClass([
+  property()
+], _TerraVariableKeywordSearch.prototype, "value", 2);
+__decorateClass([
+  state()
+], _TerraVariableKeywordSearch.prototype, "isExpanded", 2);
+__decorateClass([
+  state()
+], _TerraVariableKeywordSearch.prototype, "query", 2);
+__decorateClass([
+  state()
+], _TerraVariableKeywordSearch.prototype, "searchResults", 2);
+__decorateClass([
+  watch("value")
+], _TerraVariableKeywordSearch.prototype, "valueChanged", 1);
+var TerraVariableKeywordSearch = _TerraVariableKeywordSearch;
+
+export {
+  TerraVariableKeywordSearch
+};

package/dist/chunks/chunk.OX5IY75Y.js

@@ -0,0 +1,11 @@
+import {
+  TerraTimeSeries
+} from "./chunk.B6JXOXP5.js";
+
+// src/components/time-series/time-series.ts
+var time_series_default = TerraTimeSeries;
+TerraTimeSeries.define("terra-time-series");
+
+export {
+  time_series_default
+};

package/dist/chunks/chunk.OY5R7EVO.js

@@ -0,0 +1,24 @@
+import {
+  TerraVariableCombobox
+} from "./chunk.4EIGF3E4.js";
+
+// src/react/variable-combobox/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "terra-variable-combobox";
+TerraVariableCombobox.define("terra-variable-combobox");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraVariableCombobox,
+  react: React,
+  events: {
+    onTerraComboboxChange: "terra-combobox-change"
+  },
+  displayName: "TerraVariableCombobox"
+});
+var variable_combobox_default = reactWrapper;
+
+export {
+  variable_combobox_default
+};

package/dist/chunks/chunk.P6OOV5UQ.js

@@ -0,0 +1,25 @@
+import {
+  TerraTimeSeries
+} from "./chunk.B6JXOXP5.js";
+
+// src/react/time-series/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "terra-time-series";
+TerraTimeSeries.define("terra-time-series");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraTimeSeries,
+  react: React,
+  events: {
+    onTerraDateRangeChange: "terra-date-range-change",
+    onTerraTimeSeriesDataChange: "terra-time-series-data-change"
+  },
+  displayName: "TerraTimeSeries"
+});
+var time_series_default = reactWrapper;
+
+export {
+  time_series_default
+};

package/dist/chunks/chunk.P7EL7GKI.js

@@ -0,0 +1,41 @@
+// src/components/time-average-map/time-average-map.styles.ts
+import { css } from "lit";
+var time_average_map_styles_default = css`
+    :host {
+        display: block;
+        height: 800px;
+    }
+
+    #map {
+        width: 100%;
+        height: 100%;
+    }
+
+    #settings {
+        position: absolute;
+        bottom: 10px;
+        left: 10px;
+        background: rgba(255, 255, 255, 0.9);
+        padding: 8px 10px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-family: monospace;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+        z-index: 10;
+        pointer-events: auto;
+    }
+
+    label {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+
+    input[type='range'] {
+        vertical-align: middle;
+    }
+`;
+
+export {
+  time_average_map_styles_default
+};