@nasa-terra/components 0.0.66 → 0.0.68

package/dist/chunks/chunk.44BRND6T.js

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

package/dist/chunks/chunk.4E55SLUR.js

@@ -0,0 +1,11 @@
+import {
+  TerraAccordion
+} from "./chunk.PG4TSLWI.js";
+
+// src/components/accordion/accordion.ts
+var accordion_default = TerraAccordion;
+TerraAccordion.define("terra-accordion");
+
+export {
+  accordion_default
+};

package/dist/chunks/chunk.4EIGF3E4.js

@@ -0,0 +1,470 @@
+import {
+  FetchController
+} from "./chunk.KLCOAQUS.js";
+import {
+  adaptValueToVariableMetadata,
+  clearSelection,
+  groupDocsByCollection,
+  removeEmptyCollections,
+  renderSearchResult,
+  walkToOption
+} from "./chunk.6KIVAUVU.js";
+import {
+  variable_combobox_styles_default
+} from "./chunk.FRSW4UHB.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-combobox/variable-combobox.component.ts
+import Fuse from "fuse.js";
+import { LitElement, html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+import { cache } from "lit/directives/cache.js";
+import { map } from "lit/directives/map.js";
+import { ref } from "lit/directives/ref.js";
+var _combobox, _fetchController, _searchableList, _listbox, _searchEngine, _walker, _tagContainer, _dispatchChange, _handleButtonClick, _handleComboboxChange, _handleOptionClick, _handleKeydown, _manageListboxVisibility, _selectOption, _renderTags, renderTags_fn;
+var _TerraVariableCombobox = class _TerraVariableCombobox extends TerraElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _renderTags);
+    __privateAdd(this, _combobox, null);
+    __privateAdd(this, _fetchController, void 0);
+    __privateAdd(this, _searchableList, []);
+    __privateAdd(this, _listbox, null);
+    __privateAdd(this, _searchEngine, null);
+    __privateAdd(this, _walker, null);
+    __privateAdd(this, _tagContainer, null);
+    this.label = "Search for Variables";
+    this.hideHelp = false;
+    this.hideLabel = false;
+    this.useTags = false;
+    this.isExpanded = false;
+    this.query = _TerraVariableCombobox.initialQuery;
+    this.searchResults = [];
+    this.tags = [];
+    this.tagContainerWidth = 0;
+    __privateAdd(this, _dispatchChange, (stringifiedData) => {
+      this.emit("terra-combobox-change", { detail: JSON.parse(stringifiedData) });
+    });
+    __privateAdd(this, _handleButtonClick, () => {
+      var _a;
+      this.isExpanded = !this.isExpanded;
+      (_a = __privateGet(this, _combobox)) == null ? void 0 : _a.focus();
+    });
+    __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);
+    });
+    __privateAdd(this, _handleKeydown, (event) => {
+      var _a;
+      switch (event.key) {
+        case "ArrowDown": {
+          clearSelection(
+            __privateGet(this, _combobox),
+            __privateGet(this, _listbox)
+          );
+          if (!this.isExpanded) {
+            this.isExpanded = true;
+          }
+          if (event.altKey) {
+            break;
+          }
+          walkToOption(
+            __privateGet(this, _walker),
+            __privateGet(this, _combobox),
+            "next"
+          );
+          break;
+        }
+        case "ArrowUp": {
+          clearSelection(
+            __privateGet(this, _combobox),
+            __privateGet(this, _listbox)
+          );
+          if (!this.isExpanded) {
+            this.isExpanded = true;
+          }
+          walkToOption(
+            __privateGet(this, _walker),
+            __privateGet(this, _combobox),
+            "previous"
+          );
+          break;
+        }
+        case "Enter": {
+          __privateGet(this, _selectOption).call(this, (_a = __privateGet(this, _walker)) == null ? void 0 : _a.currentNode);
+          break;
+        }
+        case "Escape": {
+          clearSelection(
+            __privateGet(this, _combobox),
+            __privateGet(this, _listbox)
+          );
+          if (this.isExpanded) {
+            this.isExpanded = false;
+            this.dispatchEvent(new Event("cancel"));
+          } else {
+            this.query = _TerraVariableCombobox.initialQuery;
+          }
+          break;
+        }
+        default: {
+          break;
+        }
+      }
+    });
+    __privateAdd(this, _manageListboxVisibility, (event) => {
+      const path = event.composedPath();
+      const containedThis = path.some(
+        (eventTarget) => eventTarget.localName === _TerraVariableCombobox.tagName
+      );
+      if (!containedThis) {
+        this.isExpanded = false;
+      }
+    });
+    __privateAdd(this, _selectOption, (option) => {
+      const { longName, eventDetail, name } = option.dataset;
+      this.query = `${longName}`;
+      __privateGet(this, _dispatchChange).call(this, eventDetail);
+      this.isExpanded = false;
+      clearSelection(
+        __privateGet(this, _combobox),
+        __privateGet(this, _listbox)
+      );
+      if (this.useTags) {
+        this.tags = [`${name}`];
+        __privateGet(this, _combobox).value = _TerraVariableCombobox.initialQuery;
+        this.query = _TerraVariableCombobox.initialQuery;
+      }
+    });
+  }
+  async valueChanged(oldValue, newValue) {
+    var _a, _b;
+    if (oldValue === newValue) {
+      return;
+    }
+    await __privateGet(this, _fetchController).taskComplete;
+    const compatibleValue = adaptValueToVariableMetadata(this.value);
+    const selectedVariable = (_a = __privateGet(this, _fetchController).value) == null ? void 0 : _a.find((metadata) => {
+      return compatibleValue === metadata.entryId;
+    });
+    if (selectedVariable) {
+      this.query = selectedVariable.longName;
+      this.searchResults = (_b = __privateGet(this, _searchEngine)) == null ? void 0 : _b.search(this.query).map(({ item }) => item);
+      __privateGet(this, _dispatchChange).call(this, selectedVariable.eventDetail);
+      if (this.useTags) {
+        this.tags = [`${selectedVariable.name}`];
+        __privateGet(this, _combobox).value = _TerraVariableCombobox.initialQuery;
+        this.query = _TerraVariableCombobox.initialQuery;
+      }
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    __privateSet(this, _fetchController, new FetchController(this, this.bearerToken));
+    globalThis.addEventListener("click", __privateGet(this, _manageListboxVisibility));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    globalThis.removeEventListener("click", __privateGet(this, _manageListboxVisibility));
+  }
+  clear() {
+    this.query = _TerraVariableCombobox.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">
+                ${this.useTags ? html`<div
+                          ${ref((el) => {
+      var _a2;
+      if (el) {
+        (_a2 = __privateGet(this, _tagContainer)) != null ? _a2 : __privateSet(this, _tagContainer, el);
+        this.tagContainerWidth = el.getBoundingClientRect().width;
+      }
+    })}
+                          class="tag-container"
+                          id="tag-container"
+                      >
+                          ${map(
+      this.tags,
+      (value, index) => __privateMethod(this, _renderTags, renderTags_fn).call(this, value, index)
+    )}
+                      </div>` : nothing}
+                <input
+                    ${ref((el) => {
+      var _a2;
+      if (el) {
+        (_a2 = __privateGet(this, _combobox)) != null ? _a2 : __privateSet(this, _combobox, el);
+      }
+    })}
+                    autocomplete="off"
+                    aria-autocomplete="list"
+                    aria-controls="listbox"
+                    aria-haspopup="list"
+                    aria-expanded=${this.isExpanded}
+                    class="combobox"
+                    id="combobox"
+                    part="combobox"
+                    role="combobox"
+                    type="text"
+                    style=${this.useTags ? `padding-inline-start: calc(${this.tagContainerWidth}px + 0.25rem);` : nothing}
+                    aria-describedby=${this.useTags ? "tag-container" : nothing}
+                    placeholder=${this.useTags ? nothing : (_a = this.placeholder) != null ? _a : `${this.label}\u2026`}
+                    .value=${this.useTags ? _TerraVariableCombobox.initialQuery : this.query}
+                    @input=${__privateGet(this, _handleComboboxChange)}
+                    @keydown=${__privateGet(this, _handleKeydown)}
+                />
+                <terra-button
+                    shape="square-left"
+                    aria-controls="listbox"
+                    aria-expanded=${this.isExpanded}
+                    aria-label="List of Searchable Variables"
+                    class="combobox-button"
+                    id="combobox-button"
+                    part="button"
+                    tabindex="-1"
+                    type="button"
+                    @click=${__privateGet(this, _handleButtonClick)}
+                >
+                    ${["COMPLETE", "ERROR"].includes(__privateGet(this, _fetchController).taskStatus) ? html`<terra-icon
+                              class="chevron"
+                              name="chevron-down"
+                          ></terra-icon>` : html`<svg
+                              class="button-icon spinner"
+                              stroke="currentColor"
+                              viewBox="0 0 24 24"
+                              xmlns="http://www.w3.org/2000/svg"
+                          >
+                              <circle
+                                  cx="12"
+                                  cy="12"
+                                  r="9.5"
+                                  fill="none"
+                                  stroke-width="3"
+                              ></circle>
+                          </svg>`}
+                </terra-button>
+
+                ${this.hideHelp ? nothing : html`<p class="search-help">
+                          See
+                          <a
+                              href="https://www.fusejs.io/examples.html#extended-search"
+                              rel="noopener noreferrer"
+                              tabindex=${this.isExpanded ? "-1 " : "0"}
+                              target="_blank"
+                              >extended search syntax
+                              <terra-icon
+                                  name="outline-arrow-top-right-on-square"
+                                  library="heroicons"
+                              ></terra-icon></a
+                          >.
+                      </p>`}
+            </div>
+
+            <ul
+                ${ref((el) => {
+      var _a2;
+      if (el) {
+        (_a2 = __privateGet(this, _listbox)) != null ? _a2 : __privateSet(this, _listbox, el);
+        __privateSet(this, _walker, document.createTreeWalker(
+          el,
+          NodeFilter.SHOW_ELEMENT,
+          (node) => {
+            return node.dataset.treeWalker === "filter_skip" ? NodeFilter.FILTER_SKIP : NodeFilter.FILTER_ACCEPT;
+          }
+        ));
+      }
+    })}
+                ?inert=${!this.isExpanded}
+                ?open=${this.isExpanded}
+                @click=${__privateGet(this, _handleOptionClick)}
+                aria-label=${this.query ? `Variables Matching ${this.query}` : "Variables"}
+                id="listbox"
+                part="listbox"
+                role="listbox"
+                class="search-results"
+            >
+                ${__privateGet(this, _fetchController).render({
+      initial: () => html`<li class="updating">Updating List of Variables</li>`,
+      pending: () => html`<li class="updating">Updating List of Variables</li>`,
+      complete: (list) => {
+        const filtered = list.filter(
+          (item) => !(item.collectionShortName === "GPM_3IMERGHH" && item.collectionVersion === "06")
+        );
+        __privateSet(this, _searchableList, filtered);
+        __privateSet(this, _searchEngine, new Fuse(__privateGet(this, _searchableList), {
+          //* @see {@link https://www.fusejs.io/examples.html#nested-search}
+          findAllMatches: true,
+          keys: [
+            "entryId",
+            "longName",
+            "name",
+            "standardName",
+            "units"
+          ],
+          useExtendedSearch: true
+        }));
+        return cache(
+          this.query === _TerraVariableCombobox.initialQuery ? map(
+            removeEmptyCollections(
+              groupDocsByCollection(__privateGet(this, _searchableList))
+            ),
+            renderSearchResult
+          ) : map(
+            removeEmptyCollections(
+              groupDocsByCollection(this.searchResults)
+            ),
+            renderSearchResult
+          )
+        );
+      },
+      // TODO: Consider a more robust error strategy...like retry w/ backoff?
+      error: (errorMessage) => html`<li class="error" data-tree-walker="filter_skip">
+                            ${errorMessage}
+                        </li>`
+    })}
+            </ul>
+        </search>`;
+  }
+};
+_combobox = new WeakMap();
+_fetchController = new WeakMap();
+_searchableList = new WeakMap();
+_listbox = new WeakMap();
+_searchEngine = new WeakMap();
+_walker = new WeakMap();
+_tagContainer = new WeakMap();
+_dispatchChange = new WeakMap();
+_handleButtonClick = new WeakMap();
+_handleComboboxChange = new WeakMap();
+_handleOptionClick = new WeakMap();
+_handleKeydown = new WeakMap();
+_manageListboxVisibility = new WeakMap();
+_selectOption = new WeakMap();
+_renderTags = new WeakSet();
+renderTags_fn = function(tag, _index) {
+  return html`
+            <terra-button
+                size="small"
+                variant="default"
+                outline
+                class="tag"
+                aria-label=${`Clear tag ${tag}`}
+                @click=${() => {
+    this.tags = [];
+    this.clear();
+    setTimeout(() => {
+      var _a;
+      this.tagContainerWidth = (_a = __privateGet(this, _tagContainer)) == null ? void 0 : _a.getBoundingClientRect().width;
+    }, 100);
+  }}
+            >
+                ${tag}
+                <terra-icon
+                    class="tag-icon"
+                    slot="suffix"
+                    name="outline-x-circle"
+                    library="heroicons"
+                ></terra-icon>
+            </terra-button>
+        `;
+};
+_TerraVariableCombobox.dependencies = {
+  "terra-button": button_default,
+  "terra-icon": icon_default
+};
+_TerraVariableCombobox.styles = [component_styles_default, variable_combobox_styles_default];
+_TerraVariableCombobox.shadowRootOptions = __spreadProps(__spreadValues({}, LitElement.shadowRootOptions), {
+  delegatesFocus: true
+});
+_TerraVariableCombobox.tagName = "terra-variable-combobox";
+_TerraVariableCombobox.initialQuery = "";
+__decorateClass([
+  property()
+], _TerraVariableCombobox.prototype, "label", 2);
+__decorateClass([
+  property()
+], _TerraVariableCombobox.prototype, "placeholder", 2);
+__decorateClass([
+  property({ attribute: "hide-help", type: Boolean, reflect: true })
+], _TerraVariableCombobox.prototype, "hideHelp", 2);
+__decorateClass([
+  property({ attribute: "hide-label", type: Boolean, reflect: true })
+], _TerraVariableCombobox.prototype, "hideLabel", 2);
+__decorateClass([
+  property({ attribute: "use-tags", type: Boolean, reflect: true })
+], _TerraVariableCombobox.prototype, "useTags", 2);
+__decorateClass([
+  property()
+], _TerraVariableCombobox.prototype, "value", 2);
+__decorateClass([
+  property({ attribute: "bearer-token", reflect: false })
+], _TerraVariableCombobox.prototype, "bearerToken", 2);
+__decorateClass([
+  state()
+], _TerraVariableCombobox.prototype, "isExpanded", 2);
+__decorateClass([
+  state()
+], _TerraVariableCombobox.prototype, "query", 2);
+__decorateClass([
+  state()
+], _TerraVariableCombobox.prototype, "searchResults", 2);
+__decorateClass([
+  state()
+], _TerraVariableCombobox.prototype, "tags", 2);
+__decorateClass([
+  state()
+], _TerraVariableCombobox.prototype, "tagContainerWidth", 2);
+__decorateClass([
+  watch("value")
+], _TerraVariableCombobox.prototype, "valueChanged", 1);
+var TerraVariableCombobox = _TerraVariableCombobox;
+
+export {
+  TerraVariableCombobox
+};

package/dist/chunks/chunk.4SUQPJ6R.js

@@ -0,0 +1,63 @@
+import {
+  authService
+} from "./chunk.TSIWRLNC.js";
+import {
+  __privateAdd,
+  __privateGet,
+  __privateSet
+} from "./chunk.TVFCHGU3.js";
+
+// src/auth/auth.controller.ts
+import { Task } from "@lit/task";
+var _host;
+var AuthController = class {
+  constructor(host) {
+    __privateAdd(this, _host, void 0);
+    __privateSet(this, _host, host);
+    this.task = new Task(host, {
+      task: async ([]) => {
+        this.unsubscribe = authService.subscribe(
+          (state) => {
+            if (state.token) {
+              __privateGet(this, _host).bearerToken = state.token;
+            }
+            __privateGet(this, _host).emit("terra-login", {
+              detail: state
+            });
+            __privateGet(this, _host).requestUpdate();
+          },
+          // @ts-expect-error - we can't guarantee the host has a bearerToken property
+          __privateGet(this, _host).bearerToken
+        );
+        __privateGet(this, _host).emit("terra-login", {
+          detail: authService.getState()
+        });
+        return authService.getState();
+      },
+      args: () => [],
+      autoRun: true
+    });
+  }
+  get state() {
+    return authService.getState();
+  }
+  login() {
+    authService.login();
+  }
+  logout() {
+    authService.logout();
+  }
+  render(renderFunctions) {
+    return this.task.render(renderFunctions);
+  }
+  disconnectedCallback() {
+    if (this.unsubscribe) {
+      this.unsubscribe();
+    }
+  }
+};
+_host = new WeakMap();
+
+export {
+  AuthController
+};

package/dist/chunks/chunk.4WKVINLB.js

@@ -0,0 +1,11 @@
+import {
+  TerraTimeAverageMap
+} from "./chunk.RVH4PSND.js";
+
+// src/components/time-average-map/time-average-map.ts
+var time_average_map_default = TerraTimeAverageMap;
+TerraTimeAverageMap.define("terra-time-average-map");
+
+export {
+  time_average_map_default
+};

package/dist/chunks/chunk.5QKVNNUH.js

@@ -0,0 +1,73 @@
+import {
+  loader_default
+} from "./chunk.X7MVYC7B.js";
+import {
+  login_styles_default
+} from "./chunk.TCEJ3MS6.js";
+import {
+  AuthController
+} from "./chunk.KIC5ZCAM.js";
+import {
+  icon_default
+} from "./chunk.O7SVDS2A.js";
+import {
+  button_default
+} from "./chunk.CA2ZDE2M.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.O6SXSDFR.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet
+} from "./chunk.TVFCHGU3.js";
+
+// src/components/login/login.component.ts
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+var _authController;
+var TerraLogin = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.buttonLabel = "Earthdata Login";
+    __privateAdd(this, _authController, new AuthController(this));
+  }
+  login() {
+    __privateGet(this, _authController).login();
+  }
+  logout() {
+    __privateGet(this, _authController).logout();
+  }
+  render() {
+    var _a;
+    if ((_a = __privateGet(this, _authController).state.user) == null ? void 0 : _a.uid) {
+      const template = this.querySelector(
+        'template[slot="logged-in"]'
+      );
+      return html`${template ? template.content.cloneNode(true) : html`<slot
+                      name="logged-in"
+                      .user=${__privateGet(this, _authController).state.user}
+                  ></slot>`}`;
+    }
+    if (__privateGet(this, _authController).state.isLoading) {
+      return html`<slot name="loading"></slot>`;
+    }
+    return html` <slot name="logged-out"></slot
+            ><terra-button @click=${this.login}> ${this.buttonLabel}</terra-button>`;
+  }
+};
+_authController = new WeakMap();
+TerraLogin.dependencies = {
+  "terra-button": button_default,
+  "terra-icon": icon_default,
+  "terra-loader": loader_default
+};
+TerraLogin.styles = [component_styles_default, login_styles_default];
+__decorateClass([
+  property({ attribute: "button-label" })
+], TerraLogin.prototype, "buttonLabel", 2);
+
+export {
+  TerraLogin
+};

package/dist/chunks/chunk.5TZQDEBJ.js

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

package/dist/chunks/chunk.642Z3X7N.js

@@ -0,0 +1,11 @@
+import {
+  TerraDataSubsetterHistory
+} from "./chunk.OJC754DG.js";
+
+// src/components/data-subsetter-history/data-subsetter-history.ts
+var data_subsetter_history_default = TerraDataSubsetterHistory;
+TerraDataSubsetterHistory.define("terra-data-subsetter-history");
+
+export {
+  data_subsetter_history_default
+};

package/dist/chunks/chunk.64ARWPHU.js

@@ -0,0 +1,11 @@
+import {
+  TerraDialog
+} from "./chunk.2LGINANI.js";
+
+// src/components/dialog/dialog.ts
+var dialog_default = TerraDialog;
+TerraDialog.define("terra-dialog");
+
+export {
+  dialog_default
+};