@nasa-terra/components 0.0.198 → 0.0.199

package/cdn/chunks/chunk.GL4VHOZ6.js

@@ -1,631 +0,0 @@
-import {
-  FetchController
-} from "./chunk.NQLIIDC4.js";
-import {
-  variable_combobox_styles_default
-} from "./chunk.TINZXT55.js";
-import {
-  adaptValueToVariableMetadata,
-  clearSelection,
-  groupDocsByCollection,
-  removeEmptyCollections,
-  renderSearchResult,
-  walkToOption
-} from "./chunk.L77N7C7E.js";
-import {
-  popup_default
-} from "./chunk.53FLKCIC.js";
-import {
-  h
-} from "./chunk.ASJLND3B.js";
-import {
-  icon_default
-} from "./chunk.5D655ZE7.js";
-import {
-  Fuse
-} from "./chunk.LWXRUSS3.js";
-import {
-  o
-} from "./chunk.IL42CKDQ.js";
-import {
-  n as n2
-} from "./chunk.LRZIT4M2.js";
-import {
-  button_default
-} from "./chunk.WVFK7SEA.js";
-import {
-  watch
-} from "./chunk.MPVZOQYA.js";
-import {
-  TerraElement,
-  component_styles_default,
-  n,
-  r,
-  undefinedStringConverter
-} from "./chunk.WJ6P74RX.js";
-import {
-  A,
-  b,
-  i
-} from "./chunk.RRCYT4LP.js";
-import {
-  __decorateClass,
-  __privateAdd,
-  __privateGet,
-  __privateMethod,
-  __privateSet,
-  __spreadProps,
-  __spreadValues,
-  init_buffer,
-  init_dirname,
-  init_process
-} from "./chunk.ZEOVK2FE.js";
-
-// src/components/variable-combobox/variable-combobox.component.ts
-init_dirname();
-init_buffer();
-init_process();
-var _combobox, _fetchController, _searchableList, _listbox, _searchEngine, _walker, _tagContainer, _hideTimeout, _handleShowVariableInfo, _handleIconLeave, _handleMenuEnter, _handleMenuLeave, _dispatchChange, _handleButtonClick, _handleComboboxChange, _handleOptionClick, _handleKeydown, _manageListboxVisibility, _selectOption, _renderTags, renderTags_fn, _renderInfoPanel, renderInfoPanel_fn, _renderVariableInfoMenu, renderVariableInfoMenu_fn;
-var _TerraVariableCombobox = class _TerraVariableCombobox extends TerraElement {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _renderTags);
-    __privateAdd(this, _renderInfoPanel);
-    __privateAdd(this, _renderVariableInfoMenu);
-    __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;
-    this.menuOpen = false;
-    this.infoAnchor = null;
-    this.variableInfo = null;
-    __privateAdd(this, _hideTimeout, null);
-    __privateAdd(this, _handleShowVariableInfo, (e) => {
-      e.stopPropagation();
-      this.variableInfo = e.detail.collection;
-      this.infoAnchor = e.currentTarget;
-      this.menuOpen = true;
-      if (__privateGet(this, _hideTimeout)) {
-        clearTimeout(__privateGet(this, _hideTimeout));
-        __privateSet(this, _hideTimeout, null);
-      }
-    });
-    __privateAdd(this, _handleIconLeave, () => {
-      __privateSet(this, _hideTimeout, window.setTimeout(() => {
-        this.menuOpen = false;
-      }, 200));
-    });
-    __privateAdd(this, _handleMenuEnter, () => {
-      if (__privateGet(this, _hideTimeout)) {
-        clearTimeout(__privateGet(this, _hideTimeout));
-        __privateSet(this, _hideTimeout, null);
-      }
-    });
-    __privateAdd(this, _handleMenuLeave, () => {
-      this.menuOpen = false;
-    });
-    __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)
-      );
-      if (this.useTags) {
-        this.tags = [`${longName}`];
-        __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.longName}`];
-        __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));
-    this.addEventListener(
-      "terra-show-variable-info",
-      __privateGet(this, _handleShowVariableInfo)
-    );
-    this.addEventListener("mouseleave", __privateGet(this, _handleIconLeave));
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    globalThis.removeEventListener("click", __privateGet(this, _manageListboxVisibility));
-    this.removeEventListener(
-      "terra-show-variable-info",
-      __privateGet(this, _handleShowVariableInfo)
-    );
-    this.removeEventListener("mouseleave", __privateGet(this, _handleIconLeave));
-  }
-  clear() {
-    this.query = _TerraVariableCombobox.initialQuery;
-  }
-  close() {
-    this.isExpanded = false;
-  }
-  toggle() {
-    this.isExpanded = !this.isExpanded;
-  }
-  render() {
-    var _a;
-    return b`<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 ? b`<div
-                          ${n2((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"
-                      >
-                          ${o(
-      this.tags,
-      (value, index) => __privateMethod(this, _renderTags, renderTags_fn).call(this, value, index)
-    )}
-                      </div>` : A}
-                <input
-                    ${n2((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);` : A}
-                    aria-describedby=${this.useTags ? "tag-container" : A}
-                    placeholder=${this.useTags ? A : (_a = this.placeholder) != null ? _a : `${this.label}\u2026`}
-                    .value=${this.useTags ? _TerraVariableCombobox.initialQuery : this.query}
-                    @input=${__privateGet(this, _handleComboboxChange)}
-                    @keydown=${__privateGet(this, _handleKeydown)}
-                    @click=${__privateGet(this, _handleButtonClick)}
-                />
-                <terra-button
-                    shape="square-left"
-                    aria-controls="listbox"
-                    aria-expanded=${this.isExpanded}
-                    aria-label="List of Searchable Variables"
-                    class="combobox-button"
-                    id="combobox-button"
-                    variant="text"
-                    part="button"
-                    tabindex="-1"
-                    type="button"
-                    @click=${__privateGet(this, _handleButtonClick)}
-                >
-                    ${["COMPLETE", "ERROR"].includes(__privateGet(this, _fetchController).taskStatus) ? b`<terra-icon
-                              class="chevron"
-                              name="chevron-down"
-                          ></terra-icon>` : b`<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 ? A : b`<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
-                ${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"
-            >
-                ${__privateGet(this, _fetchController).render({
-      initial: () => b`<li class="updating">Updating List of Variables</li>`,
-      pending: () => b`<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 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) => b`<li class="error" data-tree-walker="filter_skip">
-                            ${errorMessage}
-                        </li>`
-    })}
-            </ul>
-            ${__privateMethod(this, _renderVariableInfoMenu, renderVariableInfoMenu_fn).call(this)}
-        </search>`;
-  }
-};
-_combobox = new WeakMap();
-_fetchController = new WeakMap();
-_searchableList = new WeakMap();
-_listbox = new WeakMap();
-_searchEngine = new WeakMap();
-_walker = new WeakMap();
-_tagContainer = new WeakMap();
-_hideTimeout = new WeakMap();
-_handleShowVariableInfo = new WeakMap();
-_handleIconLeave = new WeakMap();
-_handleMenuEnter = new WeakMap();
-_handleMenuLeave = 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 b`
-            <terra-button
-                size="small"
-                variant="default"
-                outline
-                class="tag"
-                title=${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);
-  }}
-                title=${tag}
-            >
-                ${tag}
-                <terra-icon
-                    class="tag-icon"
-                    slot="suffix"
-                    name="outline-x-circle"
-                    library="heroicons"
-                ></terra-icon>
-            </terra-button>
-        `;
-};
-_renderInfoPanel = new WeakSet();
-renderInfoPanel_fn = function(variable) {
-  var _a;
-  return b`
-            <h3 class="sr-only">Information</h3>
-            <dl>
-                <dt>Variable Longname</dt>
-                <dd>${variable.dataFieldLongName}</dd>
-
-                <dt>Variable Shortname</dt>
-                <dd>
-                    ${(_a = variable.dataFieldShortName) != null ? _a : variable.dataFieldAccessName}
-                </dd>
-
-                <dt>Units</dt>
-                <dd><code>${variable.dataFieldUnits}</code></dd>
-
-                <dt>Dataset Information</dt>
-                <dd>
-                    <a
-                        href=${variable.dataProductDescriptionUrl}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                    >
-                        ${variable.dataProductLongName}
-                        <terra-icon
-                            name="outline-arrow-top-right-on-square"
-                            library="heroicons"
-                        ></terra-icon>
-                    </a>
-                </dd>
-
-                <dt>Variable Information</dt>
-                <dd>
-                    <a
-                        href=${variable.dataFieldDescriptionUrl}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                    >
-                        Variable Glossary
-                        <terra-icon
-                            name="outline-arrow-top-right-on-square"
-                            library="heroicons"
-                        ></terra-icon>
-                    </a>
-                </dd>
-            </dl>
-        `;
-};
-_renderVariableInfoMenu = new WeakSet();
-renderVariableInfoMenu_fn = function() {
-  if (!this.variableInfo || !this.infoAnchor) {
-    return A;
-  }
-  return b`
-            <terra-popup
-                .anchor=${this.infoAnchor}
-                ?active=${this.menuOpen}
-                placement="right-start"
-                strategy="fixed"
-                flip
-                shift
-                distance="8"
-                @mouseenter=${__privateGet(this, _handleMenuEnter)}
-                @mouseleave=${__privateGet(this, _handleMenuLeave)}
-            >
-                <div class="variable-info-popup">
-                    ${__privateMethod(this, _renderInfoPanel, renderInfoPanel_fn).call(this, this.variableInfo)}
-                </div>
-            </terra-popup>
-        `;
-};
-_TerraVariableCombobox.dependencies = {
-  "terra-button": button_default,
-  "terra-icon": icon_default,
-  "terra-popup": popup_default
-};
-_TerraVariableCombobox.styles = [component_styles_default, variable_combobox_styles_default];
-_TerraVariableCombobox.shadowRootOptions = __spreadProps(__spreadValues({}, i.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, reflect: true })
-], _TerraVariableCombobox.prototype, "hideHelp", 2);
-__decorateClass([
-  n({ attribute: "hide-label", type: Boolean, reflect: true })
-], _TerraVariableCombobox.prototype, "hideLabel", 2);
-__decorateClass([
-  n({ attribute: "use-tags", type: Boolean, reflect: true })
-], _TerraVariableCombobox.prototype, "useTags", 2);
-__decorateClass([
-  n()
-], _TerraVariableCombobox.prototype, "value", 2);
-__decorateClass([
-  n({
-    attribute: "bearer-token",
-    reflect: false,
-    converter: undefinedStringConverter
-  })
-], _TerraVariableCombobox.prototype, "bearerToken", 2);
-__decorateClass([
-  r()
-], _TerraVariableCombobox.prototype, "isExpanded", 2);
-__decorateClass([
-  r()
-], _TerraVariableCombobox.prototype, "query", 2);
-__decorateClass([
-  r()
-], _TerraVariableCombobox.prototype, "searchResults", 2);
-__decorateClass([
-  r()
-], _TerraVariableCombobox.prototype, "tags", 2);
-__decorateClass([
-  r()
-], _TerraVariableCombobox.prototype, "tagContainerWidth", 2);
-__decorateClass([
-  r()
-], _TerraVariableCombobox.prototype, "menuOpen", 2);
-__decorateClass([
-  r()
-], _TerraVariableCombobox.prototype, "infoAnchor", 2);
-__decorateClass([
-  r()
-], _TerraVariableCombobox.prototype, "variableInfo", 2);
-__decorateClass([
-  watch("value")
-], _TerraVariableCombobox.prototype, "valueChanged", 1);
-var TerraVariableCombobox = _TerraVariableCombobox;
-
-export {
-  TerraVariableCombobox
-};