@nasa-terra/components 0.0.0

package/cdn/chunks/chunk.T3YOGGMB.js

@@ -0,0 +1,419 @@
+import {
+  variable_combobox_styles_default
+} from "./chunk.ZKRXIISK.js";
+import {
+  FetchController
+} from "./chunk.A4PYD2BT.js";
+import {
+  clearSelection,
+  groupDocsByCollection,
+  removeEmptyCollections,
+  renderSearchResult,
+  walkToOption
+} from "./chunk.5DPGWL3Y.js";
+import {
+  button_default
+} from "./chunk.M366DOLL.js";
+import {
+  icon_default
+} from "./chunk.AY5ZYXPF.js";
+import {
+  Fuse
+} from "./chunk.NTNL4P6D.js";
+import {
+  n as n2
+} from "./chunk.2XCNCXGV.js";
+import {
+  h
+} from "./chunk.QB5SASDL.js";
+import {
+  o
+} from "./chunk.QEA4QW6G.js";
+import {
+  watch
+} from "./chunk.IUDWCWFV.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.OFCNXAUR.js";
+import {
+  n,
+  r
+} from "./chunk.K4EJQG4O.js";
+import {
+  T,
+  s,
+  x
+} from "./chunk.PQFHJHNO.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateSet,
+  __spreadProps,
+  __spreadValues
+} from "./chunk.6QUGTGJO.js";
+
+// src/components/variable-combobox/variable-combobox.component.ts
+var _combobox, _fetchController, _searchableList, _listbox, _searchEngine, _walker, _dispatchChange, _handleButtonClick, _handleComboboxChange, _handleOptionClick, _handleKeydown, _manageListboxVisibility, _selectOption;
+var _TerraVariableCombobox = class _TerraVariableCombobox extends TerraElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _combobox, null);
+    __privateAdd(this, _fetchController, new FetchController(this));
+    __privateAdd(this, _searchableList, []);
+    __privateAdd(this, _listbox, null);
+    __privateAdd(this, _searchEngine, null);
+    __privateAdd(this, _walker, null);
+    this.label = "Search for Variables";
+    this.hideHelp = false;
+    this.hideLabel = false;
+    this.isExpanded = false;
+    this.query = _TerraVariableCombobox.initialQuery;
+    this.searchResults = [];
+    __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 } = option.dataset;
+      this.query = `${longName}`;
+      __privateGet(this, _dispatchChange).call(this, eventDetail);
+      this.isExpanded = false;
+      clearSelection(
+        __privateGet(this, _combobox),
+        __privateGet(this, _listbox)
+      );
+    });
+  }
+  async valueChanged() {
+    var _a;
+    await __privateGet(this, _fetchController).taskComplete;
+    const selectedVariable = (_a = __privateGet(this, _fetchController).value) == null ? void 0 : _a.find((variable) => {
+      return variable.entryId === this.value;
+    });
+    if (selectedVariable) {
+      this.query = selectedVariable.longName;
+      __privateGet(this, _dispatchChange).call(this, selectedVariable.eventDetail);
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    globalThis.addEventListener("click", __privateGet(this, _manageListboxVisibility));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    globalThis.addEventListener("click", __privateGet(this, _manageListboxVisibility));
+  }
+  clear() {
+    this.query = _TerraVariableCombobox.initialQuery;
+  }
+  close() {
+    this.isExpanded = false;
+  }
+  toggle() {
+    this.isExpanded = !this.isExpanded;
+  }
+  render() {
+    var _a, _b, _c;
+    const searchHasNoMatches = ((_a = this.searchResults) == null ? void 0 : _a.length) === 0 && ((_b = __privateGet(this, _searchableList)) == null ? void 0 : _b.length) !== 0 && this.query !== _TerraVariableCombobox.initialQuery;
+    return x`<search part="base" title="Search through the list.">
+            <label
+                for="combobox"
+                class=${this.hideLabel ? "sr-only" : "search-input-label"}
+                >${this.label}</label
+            >
+            <div class="search-input-group">
+                <input
+                    ${n2((el) => {
+      var _a2;
+      if (el) {
+        (_a2 = __privateGet(this, _combobox)) != null ? _a2 : __privateSet(this, _combobox, el);
+      }
+    })}
+                    aria-autocomplete="list"
+                    aria-controls="listbox"
+                    aria-expanded=${this.isExpanded}
+                    class="combobox"
+                    id="combobox"
+                    part="combobox"
+                    role="combobox"
+                    type="text"
+                    .placeholder=${(_c = this.placeholder) != null ? _c : `${this.label}\u2026`}
+                    .value=${this.query}
+                    @input=${__privateGet(this, _handleComboboxChange)}
+                    @keydown=${__privateGet(this, _handleKeydown)}
+                />
+                <button
+                    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) ? x`<terra-icon
+                              class="chevron"
+                              name="chevron-down"
+                          ></terra-icon>` : x`<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>`}
+                </button>
+
+                ${this.hideHelp ? T : x`<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
+                              <svg
+                                  aria-hidden="true"
+                                  class="external-link"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  width="14"
+                                  height="14"
+                                  viewBox="0 0 24 24"
+                              >
+                                  <path
+                                      d="M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
+                                  /></svg></a
+                          >.
+                      </p>`}
+            </div>
+
+            <ul
+                ${n2((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"
+            >
+                ${searchHasNoMatches ? x`<li
+                          class="listbox-option-group"
+                          data-tree-walker="filter_skip"
+                      >
+                          <terra-button
+                              @click=${() => this.query = _TerraVariableCombobox.initialQuery}
+                              class="clear-button"
+                              data-tree-walker="filter_skip"
+                          >
+                              clear search
+                          </terra-button>
+                      </li>` : T}
+                ${__privateGet(this, _fetchController).render({
+      initial: () => x`<li class="updating">Updating List of Variables</li>`,
+      pending: () => x`<li class="updating">Updating List of Variables</li>`,
+      complete: (list) => {
+        __privateSet(this, _searchableList, list);
+        __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 h(
+          this.query === _TerraVariableCombobox.initialQuery ? o(
+            removeEmptyCollections(
+              groupDocsByCollection(__privateGet(this, _searchableList))
+            ),
+            renderSearchResult
+          ) : o(
+            removeEmptyCollections(
+              groupDocsByCollection(this.searchResults)
+            ),
+            renderSearchResult
+          )
+        );
+      },
+      // TODO: Consider a more robust error strategy...like retry w/ backoff?
+      error: (errorMessage) => x`<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();
+_dispatchChange = new WeakMap();
+_handleButtonClick = new WeakMap();
+_handleComboboxChange = new WeakMap();
+_handleOptionClick = new WeakMap();
+_handleKeydown = new WeakMap();
+_manageListboxVisibility = new WeakMap();
+_selectOption = new WeakMap();
+_TerraVariableCombobox.dependencies = {
+  "terra-button": button_default,
+  "terra-icon": icon_default
+};
+_TerraVariableCombobox.styles = [component_styles_default, variable_combobox_styles_default];
+_TerraVariableCombobox.shadowRootOptions = __spreadProps(__spreadValues({}, s.shadowRootOptions), {
+  delegatesFocus: true
+});
+_TerraVariableCombobox.tagName = "terra-variable-combobox";
+_TerraVariableCombobox.initialQuery = "";
+__decorateClass([
+  n()
+], _TerraVariableCombobox.prototype, "label", 2);
+__decorateClass([
+  n()
+], _TerraVariableCombobox.prototype, "placeholder", 2);
+__decorateClass([
+  n({ attribute: "hide-help", type: Boolean })
+], _TerraVariableCombobox.prototype, "hideHelp", 2);
+__decorateClass([
+  n({ attribute: "hide-label", type: Boolean })
+], _TerraVariableCombobox.prototype, "hideLabel", 2);
+__decorateClass([
+  n()
+], _TerraVariableCombobox.prototype, "value", 2);
+__decorateClass([
+  r()
+], _TerraVariableCombobox.prototype, "isExpanded", 2);
+__decorateClass([
+  r()
+], _TerraVariableCombobox.prototype, "query", 2);
+__decorateClass([
+  r()
+], _TerraVariableCombobox.prototype, "searchResults", 2);
+__decorateClass([
+  watch("value")
+], _TerraVariableCombobox.prototype, "valueChanged", 1);
+var TerraVariableCombobox = _TerraVariableCombobox;
+
+export {
+  TerraVariableCombobox
+};

package/cdn/chunks/chunk.TA3MUOR6.js

@@ -0,0 +1,11 @@
+import {
+  TerraChip
+} from "./chunk.NUMFOBCB.js";
+
+// src/components/chip/chip.ts
+var chip_default = TerraChip;
+TerraChip.define("terra-chip");
+
+export {
+  chip_default
+};

package/cdn/chunks/chunk.U6DUAIIP.js

@@ -0,0 +1,102 @@
+import {
+  i
+} from "./chunk.PH7RLQK2.js";
+
+// src/components/loader/loader.styles.ts
+var loader_styles_default = i`
+    :host {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100px;
+    }
+
+    .loader {
+        position: relative;
+        width: var(--size);
+        height: var(--size);
+    }
+
+    /* Theme modes */
+
+    .loader--dark {
+        color: white;
+        background-color: black;
+    }
+
+    .loader--light {
+        color: black;
+        background-color: white;
+    }
+
+    /* Loader sizes */
+
+    .loader--large {
+        --size: 52px;
+        --stroke-width: 3.5px;
+    }
+
+    .loader--small {
+        --size: 30px;
+        --stroke-width: 3.5px;
+    }
+
+    svg {
+        width: var(--size);
+        height: var(--size);
+    }
+
+    .percent {
+        display: block;
+        width: var(--size);
+        position: absolute;
+        top: 17px;
+        padding-left: 4px;
+        font-family: sans-serif;
+        font-size: 11px;
+        letter-spacing: 0.1rem;
+        text-align: center;
+    }
+
+    .circular-progress {
+        --progress: 0; /* added this so I can try to reference it and change the value. This value drives the rest of the calcultations */
+        --half-size: calc(var(--size) / 2);
+        --radius: calc((var(--size) - var(--stroke-width)) / 2);
+        --circumference: calc(var(--radius) * pi * 2);
+        --dash: calc(
+            (var(--progress) * var(--circumference)) / 100
+        ); /* Calculate the length of the dash based on the progress percentage */
+    }
+
+    .circular-progress circle {
+        cx: var(--half-size);
+        cy: var(--half-size);
+        r: var(--radius);
+        stroke-width: var(--stroke-width);
+        fill: none;
+        stroke-linecap: round;
+    }
+
+    .circular-progress circle.bg {
+        stroke: #ccc;
+    }
+
+    .circular-progress circle.fg {
+        transform: rotate(-90deg);
+        transform-origin: var(--half-size) var(--half-size);
+        stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
+        transition: stroke-dasharray 0.3s linear 0s; /* Defines how --dash value changes to stroke-dasharray are animated */
+        stroke: #1c68e3;
+    }
+
+    @property --progress {
+        /* Registers and describes the custom property and variable with the browser. */
+        syntax: '<number>';
+        inherits: false;
+        initial-value: 0;
+    }
+`;
+
+export {
+  loader_styles_default
+};

package/cdn/chunks/chunk.UCNEPIMI.js

@@ -0,0 +1,14 @@
+import {
+  getBasePath
+} from "./chunk.NQKBKXPW.js";
+
+// src/components/icon/library.heroicons.ts
+var library = {
+  name: "heroicons",
+  resolver: (name) => getBasePath(`assets/icons/${name}.svg`)
+};
+var library_heroicons_default = library;
+
+export {
+  library_heroicons_default
+};

package/cdn/chunks/chunk.UGTZ22DI.js

@@ -0,0 +1,113 @@
+import {
+  f
+} from "./chunk.PH7RLQK2.js";
+
+// node_modules/@lit/task/task.js
+var s = { INITIAL: 0, PENDING: 1, COMPLETE: 2, ERROR: 3 };
+var i = Symbol();
+var h = class {
+  get taskComplete() {
+    return this.t || (1 === this.status ? this.t = new Promise((t, s2) => {
+      this.i = t, this.o = s2;
+    }) : 3 === this.status ? this.t = Promise.reject(this.h) : this.t = Promise.resolve(this.l)), this.t;
+  }
+  constructor(t, s2, i2) {
+    var _a, _b, _c;
+    this.u = 0, this.status = 0, (this.p = t).addController(this);
+    const h2 = "object" == typeof s2 ? s2 : { task: s2, args: i2 };
+    this._ = h2.task, this.v = h2.args, this.j = (_a = h2.argsEqual) != null ? _a : r, this.m = h2.onComplete, this.g = h2.onError, this.autoRun = (_b = h2.autoRun) != null ? _b : true, "initialValue" in h2 && (this.l = h2.initialValue, this.status = 2, this.k = (_c = this.A) == null ? void 0 : _c.call(this));
+  }
+  hostUpdate() {
+    true === this.autoRun && this.O();
+  }
+  hostUpdated() {
+    "afterUpdate" === this.autoRun && this.O();
+  }
+  A() {
+    if (void 0 === this.v)
+      return;
+    const t = this.v();
+    if (!Array.isArray(t))
+      throw Error("The args function must return an array");
+    return t;
+  }
+  async O() {
+    const t = this.A(), s2 = this.k;
+    this.k = t, t === s2 || void 0 === t || void 0 !== s2 && this.j(s2, t) || await this.run(t);
+  }
+  async run(t) {
+    var _a, _b, _c, _d, _e;
+    let s2, h2;
+    t != null ? t : t = this.A(), this.k = t, 1 === this.status ? (_a = this.T) == null ? void 0 : _a.abort() : (this.t = void 0, this.i = void 0, this.o = void 0), this.status = 1, "afterUpdate" === this.autoRun ? queueMicrotask(() => this.p.requestUpdate()) : this.p.requestUpdate();
+    const r2 = ++this.u;
+    this.T = new AbortController();
+    let e = false;
+    try {
+      s2 = await this._(t, { signal: this.T.signal });
+    } catch (t2) {
+      e = true, h2 = t2;
+    }
+    if (this.u === r2) {
+      if (s2 === i)
+        this.status = 0;
+      else {
+        if (false === e) {
+          try {
+            (_b = this.m) == null ? void 0 : _b.call(this, s2);
+          } catch (e2) {
+          }
+          this.status = 2, (_c = this.i) == null ? void 0 : _c.call(this, s2);
+        } else {
+          try {
+            (_d = this.g) == null ? void 0 : _d.call(this, h2);
+          } catch (e2) {
+          }
+          this.status = 3, (_e = this.o) == null ? void 0 : _e.call(this, h2);
+        }
+        this.l = s2, this.h = h2;
+      }
+      this.p.requestUpdate();
+    }
+  }
+  abort(t) {
+    var _a;
+    1 === this.status && ((_a = this.T) == null ? void 0 : _a.abort(t));
+  }
+  get value() {
+    return this.l;
+  }
+  get error() {
+    return this.h;
+  }
+  render(t) {
+    var _a, _b, _c, _d;
+    switch (this.status) {
+      case 0:
+        return (_a = t.initial) == null ? void 0 : _a.call(t);
+      case 1:
+        return (_b = t.pending) == null ? void 0 : _b.call(t);
+      case 2:
+        return (_c = t.complete) == null ? void 0 : _c.call(t, this.value);
+      case 3:
+        return (_d = t.error) == null ? void 0 : _d.call(t, this.error);
+      default:
+        throw Error("Unexpected status: " + this.status);
+    }
+  }
+};
+var r = (s2, i2) => s2 === i2 || s2.length === i2.length && s2.every((s3, h2) => !f(s3, i2[h2]));
+
+export {
+  s,
+  i,
+  h
+};
+/*! Bundled license information:
+
+@lit/task/task.js:
+  (**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+*/