@nasa-terra/components 0.0.16 → 0.0.19

package/dist/chunks/chunk.FWXMF6WX.js

@@ -1,327 +0,0 @@
-import {
-  giovanni_search_styles_default
-} from "./chunk.CNUQQWCR.js";
-import {
-  clearSelection,
-  renderSearchResult,
-  walkToOption
-} from "./chunk.EGZMQ7T7.js";
-import {
-  icon_default
-} from "./chunk.WALPLM23.js";
-import {
-  FetchController
-} from "./chunk.JOOAZ4RH.js";
-import {
-  button_default
-} from "./chunk.FKIVBKR4.js";
-import {
-  watch
-} from "./chunk.SK7IZCKP.js";
-import {
-  TerraElement,
-  component_styles_default
-} from "./chunk.EPQIDDJG.js";
-import {
-  __decorateClass,
-  __privateAdd,
-  __privateGet,
-  __privateMethod,
-  __privateSet,
-  __spreadProps,
-  __spreadValues
-} from "./chunk.TVFCHGU3.js";
-
-// src/components/giovanni-search/giovanni-search.component.ts
-import Fuse from "fuse.js";
-import { LitElement, html } 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, _dispatchChange, _handleComboboxChange, _handleOptionClick, _handleKeydown, _manageListboxVisibility, _selectOption, _handleSearch, handleSearch_fn;
-var _TerraGiovanniSearch = class _TerraGiovanniSearch extends TerraElement {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _handleSearch);
-    __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 = _TerraGiovanniSearch.initialQuery;
-    this.searchResults = [];
-    __privateAdd(this, _dispatchChange, (data) => {
-      this.emit("terra-giovanni-search-change", { detail: data });
-    });
-    __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": {
-          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 = _TerraGiovanniSearch.initialQuery;
-          }
-          break;
-        }
-        default: {
-          break;
-        }
-      }
-    });
-    __privateAdd(this, _manageListboxVisibility, (event) => {
-      const path = event.composedPath();
-      const containedThis = path.some(
-        (eventTarget) => eventTarget.localName === _TerraGiovanniSearch.tagName
-      );
-      if (!containedThis) {
-        this.isExpanded = false;
-      }
-    });
-    __privateAdd(this, _selectOption, (option) => {
-      this.query = option.id;
-      __privateGet(this, _dispatchChange).call(this, 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 = _TerraGiovanniSearch.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">
-                <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)}
-                />
-                <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="solid-magnifying-glass"
-                        ></terra-icon>
-                    </slot>
-                </terra-button>
-            </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();
-_dispatchChange = 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 });
-  }
-};
-_TerraGiovanniSearch.dependencies = {
-  "terra-button": button_default,
-  "terra-icon": icon_default
-};
-_TerraGiovanniSearch.styles = [component_styles_default, giovanni_search_styles_default];
-_TerraGiovanniSearch.shadowRootOptions = __spreadProps(__spreadValues({}, LitElement.shadowRootOptions), {
-  delegatesFocus: true
-});
-_TerraGiovanniSearch.tagName = "terra-giovanni-search";
-_TerraGiovanniSearch.initialQuery = "";
-__decorateClass([
-  property()
-], _TerraGiovanniSearch.prototype, "label", 2);
-__decorateClass([
-  property()
-], _TerraGiovanniSearch.prototype, "placeholder", 2);
-__decorateClass([
-  property({ attribute: "hide-label", type: Boolean })
-], _TerraGiovanniSearch.prototype, "hideLabel", 2);
-__decorateClass([
-  property({ reflect: false, type: Object })
-], _TerraGiovanniSearch.prototype, "searchConfig", 2);
-__decorateClass([
-  property()
-], _TerraGiovanniSearch.prototype, "value", 2);
-__decorateClass([
-  state()
-], _TerraGiovanniSearch.prototype, "isExpanded", 2);
-__decorateClass([
-  state()
-], _TerraGiovanniSearch.prototype, "query", 2);
-__decorateClass([
-  state()
-], _TerraGiovanniSearch.prototype, "searchResults", 2);
-__decorateClass([
-  watch("value")
-], _TerraGiovanniSearch.prototype, "valueChanged", 1);
-var TerraGiovanniSearch = _TerraGiovanniSearch;
-
-export {
-  TerraGiovanniSearch
-};

package/dist/chunks/chunk.FY4LGVGC.js

@@ -1,21 +0,0 @@
-import {
-  TerraDateRangeSlider
-} from "./chunk.Q67RNINH.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.G34ZJR6B.js

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

package/dist/chunks/chunk.GVG7MLLN.js

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

package/dist/chunks/chunk.I5DIH6L6.js

@@ -1,11 +0,0 @@
-import {
-  TerraIcon
-} from "./chunk.CPXWDTHF.js";
-
-// src/components/icon/icon.ts
-var icon_default = TerraIcon;
-TerraIcon.define("terra-icon");
-
-export {
-  icon_default
-};

package/dist/chunks/chunk.IFWHGZLJ.js

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

package/dist/chunks/chunk.IYEX72BV.js

@@ -1,11 +0,0 @@
-import {
-  TerraLogin
-} from "./chunk.PCU3BZMH.js";
-
-// src/components/login/login.ts
-var login_default = TerraLogin;
-TerraLogin.define("terra-login");
-
-export {
-  login_default
-};

package/dist/chunks/chunk.J7P5CNNR.js

@@ -1,11 +0,0 @@
-import {
-  TerraSkeleton
-} from "./chunk.QLUHMJKU.js";
-
-// src/components/skeleton/skeleton.ts
-var skeleton_default = TerraSkeleton;
-TerraSkeleton.define("terra-skeleton");
-
-export {
-  skeleton_default
-};

package/dist/chunks/chunk.JM34BH4L.js

@@ -1,11 +0,0 @@
-import {
-  TerraSpatialPicker
-} from "./chunk.SQBTHONX.js";
-
-// src/components/spatial-picker/spatial-picker.ts
-var spatial_picker_default = TerraSpatialPicker;
-TerraSpatialPicker.define("terra-spatial-picker");
-
-export {
-  spatial_picker_default
-};

package/dist/chunks/chunk.KQCFGTAH.js

@@ -1,82 +0,0 @@
-import {
-  chip_styles_default
-} from "./chunk.KZ3ISS6V.js";
-import {
-  TerraElement,
-  component_styles_default
-} from "./chunk.7QKG7IRI.js";
-import {
-  __decorateClass,
-  __privateAdd,
-  __privateGet
-} from "./chunk.TVFCHGU3.js";
-
-// src/components/chip/chip.component.ts
-import { property } from "lit/decorators.js";
-import { html } from "lit";
-import { classMap } from "lit/directives/class-map.js";
-var _handleRemoveClick;
-var TerraChip = class extends TerraElement {
-  constructor() {
-    super(...arguments);
-    this.size = "medium";
-    __privateAdd(this, _handleRemoveClick, () => {
-      this.emit("terra-remove");
-      this.remove();
-    });
-  }
-  render() {
-    return html`
-            <div
-                class="${classMap({
-      // Sizes
-      "chip--small": this.size === "small",
-      "chip--medium": this.size === "medium",
-      "chip--large": this.size === "large"
-    })}
-                chip"
-            >
-                <div
-                    class="${classMap({
-      // Sizes
-      "chip-content--small": this.size === "small",
-      "chip-content--medium": this.size === "medium",
-      "chip-content--large": this.size === "large"
-    })}
-                    chip-content"
-                >
-                    <slot part="content" class="tag__content"></slot>
-                </div>
-                <button class="chip-close" @click="${__privateGet(this, _handleRemoveClick)}">
-                    <svg
-                        class="${classMap({
-      // Sizes
-      "chip-svg--small": this.size === "small",
-      "chip-svg--medium": this.size === "medium",
-      "chip-svg--large": this.size === "large"
-    })}
-                        chip-svg"
-                        focusable="false"
-                        viewBox="0 0 500 500"
-                        aria-hidden="true"
-                    >
-                        <path
-                            d="M 227 56.036 H 265 V 227.037 H 436 V 265.036 H 265 V 436.036 H 227 V 265.036 H 56 V 227.037 H 227 Z"
-                            style="paint-order: fill; fill-rule: nonzero; stroke-width: 0px; transform-origin: 246px 246.036px;"
-                            transform="matrix(0.707107007504, 0.707107007504, -0.707107007504, 0.707107007504, -9.98393e-7, -0.000026419743)"
-                        ></path>
-                    </svg>
-                </button>
-            </div>
-        `;
-  }
-};
-_handleRemoveClick = new WeakMap();
-TerraChip.styles = [component_styles_default, chip_styles_default];
-__decorateClass([
-  property({ reflect: true })
-], TerraChip.prototype, "size", 2);
-
-export {
-  TerraChip
-};

package/dist/chunks/chunk.MDRUDBRH.js

@@ -1,43 +0,0 @@
-import {
-  library_default_default
-} from "./chunk.XTCYIPKA.js";
-import {
-  library_heroicons_default
-} from "./chunk.UCNEPIMI.js";
-
-// src/components/icon/library.ts
-var registry = [library_default_default, library_heroicons_default];
-var watchedIcons = [];
-function watchIcon(icon) {
-  watchedIcons.push(icon);
-}
-function unwatchIcon(icon) {
-  watchedIcons = watchedIcons.filter((el) => el !== icon);
-}
-function getIconLibrary(name) {
-  return registry.find((lib) => lib.name === name);
-}
-function registerIconLibrary(name, options) {
-  unregisterIconLibrary(name);
-  registry.push({
-    name,
-    resolver: options.resolver,
-    mutator: options.mutator
-  });
-  watchedIcons.forEach((icon) => {
-    if (icon.library === name) {
-      icon.setIcon();
-    }
-  });
-}
-function unregisterIconLibrary(name) {
-  registry = registry.filter((lib) => lib.name !== name);
-}
-
-export {
-  watchIcon,
-  unwatchIcon,
-  getIconLibrary,
-  registerIconLibrary,
-  unregisterIconLibrary
-};

package/dist/chunks/chunk.MHMITM2Q.js

@@ -1,21 +0,0 @@
-import {
-  TerraSpatialPicker
-} from "./chunk.3WHG66G3.js";
-
-// src/react/spatial-picker/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-var tagName = "terra-spatial-picker";
-TerraSpatialPicker.define("terra-spatial-picker");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: TerraSpatialPicker,
-  react: React,
-  events: {},
-  displayName: "TerraSpatialPicker"
-});
-var spatial_picker_default = reactWrapper;
-
-export {
-  spatial_picker_default
-};

package/dist/chunks/chunk.MTNKN7SC.js

@@ -1,95 +0,0 @@
-import {
-  plot_styles_default
-} from "./chunk.W7JRXR2Y.js";
-import {
-  watch
-} from "./chunk.SK7IZCKP.js";
-import {
-  TerraElement,
-  component_styles_default
-} from "./chunk.EPQIDDJG.js";
-import {
-  __decorateClass,
-  __privateAdd,
-  __privateGet,
-  __privateSet,
-  __spreadValues
-} from "./chunk.TVFCHGU3.js";
-
-// src/components/plot/plot.component.ts
-import { property, query } from "lit/decorators.js";
-import { html } from "lit";
-import {
-  newPlot,
-  Plots
-} from "plotly.js-dist-min";
-var _resizeObserver;
-var TerraPlot = class extends TerraElement {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _resizeObserver, void 0);
-    this.layout = {};
-    this.config = {};
-    this.data = [];
-  }
-  handleDataChange() {
-    this.updatePlotWithData();
-  }
-  firstUpdated() {
-    __privateSet(this, _resizeObserver, new ResizeObserver(() => {
-      Plots.resize(this.base);
-    }));
-    __privateGet(this, _resizeObserver).observe(this.base);
-    if (this.data.length) {
-      this.updatePlotWithData();
-    }
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    __privateGet(this, _resizeObserver).disconnect();
-  }
-  updatePlotWithData() {
-    if (!this.base) {
-      return;
-    }
-    newPlot(
-      this.base,
-      this.data,
-      __spreadValues({
-        title: this.plotTitle
-      }, this.layout),
-      __spreadValues({ responsive: true }, this.config)
-    );
-  }
-  render() {
-    return html`<div part="base"></div>`;
-  }
-  updated() {
-    var _a, _b;
-    (_b = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".gtitle")) == null ? void 0 : _b.part.add("plot-title");
-  }
-};
-_resizeObserver = new WeakMap();
-TerraPlot.styles = [component_styles_default, plot_styles_default];
-__decorateClass([
-  query('[part="base"]')
-], TerraPlot.prototype, "base", 2);
-__decorateClass([
-  property()
-], TerraPlot.prototype, "plotTitle", 2);
-__decorateClass([
-  property()
-], TerraPlot.prototype, "layout", 2);
-__decorateClass([
-  property()
-], TerraPlot.prototype, "config", 2);
-__decorateClass([
-  property({ type: Array })
-], TerraPlot.prototype, "data", 2);
-__decorateClass([
-  watch("data")
-], TerraPlot.prototype, "handleDataChange", 1);
-
-export {
-  TerraPlot
-};