@nasa-terra/components 0.0.145 → 0.0.147

package/dist/chunks/chunk.NQE2XFBJ.js

@@ -0,0 +1,21 @@
+import {
+  TerraDateRangeSlider
+} from "./chunk.2XQOX4MJ.js";
+
+// src/react/date-range-slider/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "terra-date-range-slider";
+TerraDateRangeSlider.define("terra-date-range-slider");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraDateRangeSlider,
+  react: React,
+  events: {},
+  displayName: "TerraDateRangeSlider"
+});
+var date_range_slider_default = reactWrapper;
+
+export {
+  date_range_slider_default
+};

package/dist/chunks/chunk.NULITHKJ.js

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

package/dist/chunks/chunk.NXKKL2AH.js

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

package/dist/chunks/chunk.O56TDURN.js

@@ -0,0 +1,11 @@
+import {
+  TerraTabPanel
+} from "./chunk.ZCNKJSQL.js";
+
+// src/components/tab-panel/tab-panel.ts
+var tab_panel_default = TerraTabPanel;
+TerraTabPanel.define("terra-tab-panel");
+
+export {
+  tab_panel_default
+};

package/dist/chunks/chunk.OA4UYIEZ.js

@@ -0,0 +1,11 @@
+import {
+  TerraCombobox
+} from "./chunk.IIHCR2T7.js";
+
+// src/components/combobox/combobox.ts
+var combobox_default = TerraCombobox;
+TerraCombobox.define("terra-combobox");
+
+export {
+  combobox_default
+};

package/dist/chunks/chunk.OAWTV6OW.js

@@ -0,0 +1,135 @@
+// src/components/skeleton/skeleton.styles.ts
+import { css } from "lit";
+var skeleton_styles_default = css`
+    :host {
+        --border-radius: var(--terra-skeleton-border-radius);
+        --color: var(--terra-skeleton-background-color);
+        --sheen-color: var(--terra-skeleton-sheen-color);
+
+        display: block;
+        position: relative;
+    }
+
+    .skeleton {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        min-height: var(--terra-skeleton-min-height);
+        margin-bottom: var(--terra-skeleton-margin-bottom);
+    }
+
+    .skeleton:last-child {
+        margin-bottom: 0;
+    }
+
+    .skeleton__indicator {
+        flex: 1 1 auto;
+        background: var(--color);
+        border-radius: var(--border-radius);
+    }
+
+    .skeleton--sheen .skeleton__indicator {
+        background: linear-gradient(
+            270deg,
+            var(--sheen-color),
+            var(--color),
+            var(--color),
+            var(--sheen-color)
+        );
+        background-size: 400% 100%;
+        animation: sheen 8s ease-in-out infinite;
+    }
+
+    .skeleton--pulse .skeleton__indicator {
+        animation: pulse 2s ease-in-out 0.5s infinite;
+    }
+
+    /* Forced colors mode */
+    @media (forced-colors: active) {
+        :host {
+            --color: GrayText;
+        }
+    }
+
+    @keyframes sheen {
+        0% {
+            background-position: 200% 0;
+        }
+        to {
+            background-position: -200% 0;
+        }
+    }
+
+    @keyframes pulse {
+        0% {
+            opacity: 1;
+        }
+        50% {
+            opacity: 0.4;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+
+    .skeleton {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        min-height: 1rem;
+    }
+
+    .skeleton__indicator {
+        flex: 1 1 auto;
+        background: var(--color);
+        border-radius: var(--border-radius);
+    }
+
+    .skeleton--sheen .skeleton__indicator {
+        background: linear-gradient(
+            270deg,
+            var(--sheen-color),
+            var(--color),
+            var(--color),
+            var(--sheen-color)
+        );
+        background-size: 400% 100%;
+        animation: sheen 8s ease-in-out infinite;
+    }
+
+    .skeleton--pulse .skeleton__indicator {
+        animation: pulse 2s ease-in-out 0.5s infinite;
+    }
+
+    /* Forced colors mode */
+    @media (forced-colors: active) {
+        :host {
+            --color: GrayText;
+        }
+    }
+
+    @keyframes sheen {
+        0% {
+            background-position: 200% 0;
+        }
+        to {
+            background-position: -200% 0;
+        }
+    }
+
+    @keyframes pulse {
+        0% {
+            opacity: 1;
+        }
+        50% {
+            opacity: 0.4;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+`;
+
+export {
+  skeleton_styles_default
+};

package/dist/chunks/chunk.ODBRZ3I5.js

@@ -0,0 +1,355 @@
+import {
+  FetchController
+} from "./chunk.6JWHPMOL.js";
+import {
+  variable_keyword_search_styles_default
+} from "./chunk.D3DPGMVW.js";
+import {
+  clearSelection,
+  renderSearchResult,
+  walkToOption
+} from "./chunk.YY65ZHR5.js";
+import {
+  icon_default
+} from "./chunk.PAI4CXOZ.js";
+import {
+  button_default
+} from "./chunk.DC7OZMLW.js";
+import {
+  watch
+} from "./chunk.NWXJOH5T.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.UMBI523G.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet,
+  __spreadProps,
+  __spreadValues
+} from "./chunk.SHKVBVTI.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.OGICER6I.js

@@ -0,0 +1,11 @@
+import {
+  TerraMap
+} from "./chunk.35XMYRLG.js";
+
+// src/components/map/map.ts
+var map_default = TerraMap;
+TerraMap.define("terra-map");
+
+export {
+  map_default
+};

package/dist/chunks/chunk.OLQFPKLX.js

@@ -0,0 +1,24 @@
+import {
+  TerraPagination
+} from "./chunk.PUVMXIXH.js";
+
+// src/react/pagination/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "terra-pagination";
+TerraPagination.define("terra-pagination");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraPagination,
+  react: React,
+  events: {
+    onTerraPageChange: "terra-page-change"
+  },
+  displayName: "TerraPagination"
+});
+var pagination_default = reactWrapper;
+
+export {
+  pagination_default
+};

package/dist/chunks/chunk.OMC2CTG4.js

@@ -0,0 +1,11 @@
+import {
+  TerraSelect
+} from "./chunk.QYTOHF55.js";
+
+// src/components/select/select.ts
+var select_default = TerraSelect;
+TerraSelect.define("terra-select");
+
+export {
+  select_default
+};