@nasa-terra/components 0.0.165 → 0.0.167

package/dist/chunks/chunk.RNNZRROI.js

@@ -0,0 +1,85 @@
+import {
+  site_navigation_styles_default
+} from "./chunk.CJAPGH2L.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.ABJSJSVR.js";
+import {
+  __decorateClass
+} from "./chunk.SHKVBVTI.js";
+
+// src/components/site-navigation/site-navigation.component.ts
+import { property } from "lit/decorators.js";
+import { html } from "lit";
+var TerraSiteNavigation = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.fullWidth = false;
+  }
+  render() {
+    return html`
+            <nav class="navbar" aria-label="Main navigation">
+                <ul class="nav-list">
+                    <li><a href="#home">Home</a></li>
+                    <li><a href="#news">News</a></li>
+                    <li class="dropdown">
+                        <button
+                            class="dropbtn"
+                            aria-expanded="false"
+                            aria-haspopup="true"
+                            id="megamenu-button"
+                        >
+                            Dropdown
+                            <i class="fa fa-caret-down" aria-hidden="true"></i>
+                        </button>
+                        <div
+                            class="dropdown-content"
+                            id="megamenu"
+                            role="region"
+                            aria-labelledby="megamenu-button"
+                        >
+                            <div class="header">
+                                <h2>Mega Menu</h2>
+                            </div>
+                            <div class="row">
+                                <div class="column">
+                                    <h3>Category 1</h3>
+                                    <ul>
+                                        <li><a href="#">Link 1</a></li>
+                                        <li><a href="#">Link 2</a></li>
+                                        <li><a href="#">Link 3</a></li>
+                                    </ul>
+                                </div>
+                                <div class="column">
+                                    <h3>Category 2</h3>
+                                    <ul>
+                                        <li><a href="#">Link 1</a></li>
+                                        <li><a href="#">Link 2</a></li>
+                                        <li><a href="#">Link 3</a></li>
+                                    </ul>
+                                </div>
+                                <div class="column">
+                                    <h3>Category 3</h3>
+                                    <ul>
+                                        <li><a href="#">Link 1</a></li>
+                                        <li><a href="#">Link 2</a></li>
+                                        <li><a href="#">Link 3</a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </nav>
+        `;
+  }
+};
+TerraSiteNavigation.styles = [component_styles_default, site_navigation_styles_default];
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "full-width" })
+], TerraSiteNavigation.prototype, "fullWidth", 2);
+
+export {
+  TerraSiteNavigation
+};

package/dist/chunks/chunk.RQHF447H.js

@@ -0,0 +1,123 @@
+import {
+  tag_styles_default
+} from "./chunk.6NI3YPRS.js";
+import {
+  TerraIcon
+} from "./chunk.HWE36KUL.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.ABJSJSVR.js";
+import {
+  __decorateClass
+} from "./chunk.SHKVBVTI.js";
+
+// src/components/tag/tag.component.ts
+import { property } from "lit/decorators.js";
+import { html, nothing } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+var TerraTag = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "content";
+    this.size = "medium";
+    this.iconLibrary = "default";
+    this.stack = false;
+    this.dark = false;
+    this.handleClick = (e) => {
+      if (this.variant === "topic") {
+        this.emit("terra-click", { detail: { originalEvent: e } });
+      }
+    };
+  }
+  render() {
+    const isLink = this.variant === "topic" && this.href;
+    const isContent = this.variant === "content";
+    const baseClasses = {
+      tag: true,
+      "tag--content": isContent,
+      "tag--topic": this.variant === "topic",
+      "tag--urgent": this.variant === "urgent",
+      "tag--small": this.size === "small",
+      "tag--medium": this.size === "medium",
+      "tag--large": this.size === "large"
+    };
+    const content = html`
+            ${isContent ? html`
+                      <span
+                          part="icon"
+                          class="${classMap({
+      tag__icon: true,
+      "tag__icon--small": this.size === "small",
+      "tag__icon--medium": this.size === "medium",
+      "tag__icon--large": this.size === "large"
+    })}"
+                      >
+                          <slot name="icon">
+                              ${this.icon ? html`
+                                        <terra-icon
+                                            name="${this.icon}"
+                                            library="${this.iconLibrary}"
+                                        ></terra-icon>
+                                    ` : nothing}
+                          </slot>
+                      </span>
+                  ` : nothing}
+            <span part="label" class="tag__label">
+                <slot></slot>
+            </span>
+        `;
+    if (isLink) {
+      return html`
+                <a
+                    part="base"
+                    href="${this.href}"
+                    class="${classMap(baseClasses)}"
+                    @click="${this.handleClick}"
+                >
+                    ${content}
+                </a>
+            `;
+    }
+    return html`
+            <div
+                part="base"
+                class="${classMap(baseClasses)}"
+                @click="${this.handleClick}"
+                role="${this.variant === "topic" ? "button" : nothing}"
+                tabindex="${this.variant === "topic" && !this.href ? "0" : nothing}"
+            >
+                ${content}
+            </div>
+        `;
+  }
+};
+TerraTag.styles = [component_styles_default, tag_styles_default];
+TerraTag.dependencies = {
+  "terra-icon": TerraIcon
+};
+__decorateClass([
+  property({ reflect: true })
+], TerraTag.prototype, "variant", 2);
+__decorateClass([
+  property({ reflect: true })
+], TerraTag.prototype, "size", 2);
+__decorateClass([
+  property({ reflect: true })
+], TerraTag.prototype, "icon", 2);
+__decorateClass([
+  property({ reflect: true })
+], TerraTag.prototype, "iconLibrary", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], TerraTag.prototype, "stack", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], TerraTag.prototype, "dark", 2);
+__decorateClass([
+  property()
+], TerraTag.prototype, "href", 2);
+
+export {
+  TerraTag
+};

package/dist/chunks/chunk.RWTN6VR5.js

@@ -0,0 +1,11 @@
+import {
+  TerraDataSubsetterHistory
+} from "./chunk.JK62FCBM.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.RYP4SV66.js

@@ -0,0 +1,11 @@
+import {
+  TerraToast
+} from "./chunk.FQJUCC6Z.js";
+
+// src/components/toast/toast.ts
+var toast_default = TerraToast;
+TerraToast.define("terra-toast");
+
+export {
+  toast_default
+};

package/dist/chunks/chunk.S5JREWKQ.js

@@ -0,0 +1,21 @@
+import {
+  TerraDataSubsetterHistory
+} from "./chunk.JK62FCBM.js";
+
+// src/react/data-subsetter-history/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "terra-data-subsetter-history";
+TerraDataSubsetterHistory.define("terra-data-subsetter-history");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraDataSubsetterHistory,
+  react: React,
+  events: {},
+  displayName: "TerraDataSubsetterHistory"
+});
+var data_subsetter_history_default = reactWrapper;
+
+export {
+  data_subsetter_history_default
+};

package/dist/chunks/chunk.S65PVGZW.js

@@ -0,0 +1,11 @@
+import {
+  TerraPlotToolbar
+} from "./chunk.HOMKMLDI.js";
+
+// src/components/plot-toolbar/plot-toolbar.ts
+var plot_toolbar_default = TerraPlotToolbar;
+TerraPlotToolbar.define("terra-plot-toolbar");
+
+export {
+  plot_toolbar_default
+};

package/dist/chunks/chunk.SJVXFIWD.js

@@ -0,0 +1,43 @@
+import {
+  GiovanniVariableCatalog
+} from "./chunk.MZ4FDVFI.js";
+import {
+  __privateAdd,
+  __privateGet,
+  __privateSet
+} from "./chunk.SHKVBVTI.js";
+
+// src/components/variable-keyword-search/variable-keyword-search.controller.ts
+import { Task, TaskStatus } from "@lit/task";
+var _apiTask;
+var FetchController = class {
+  constructor(host) {
+    __privateAdd(this, _apiTask, void 0);
+    const variableCatalog = new GiovanniVariableCatalog();
+    __privateSet(this, _apiTask, new Task(host, {
+      task: async () => variableCatalog.getSearchKeywords(),
+      args: () => []
+    }));
+  }
+  get taskComplete() {
+    return __privateGet(this, _apiTask).taskComplete;
+  }
+  get value() {
+    return __privateGet(this, _apiTask).value;
+  }
+  get taskStatus() {
+    const readableStatus = Object.entries(TaskStatus).reduce((accumulator, [key, value]) => {
+      accumulator[value] = key;
+      return accumulator;
+    }, {});
+    return readableStatus[__privateGet(this, _apiTask).status];
+  }
+  render(renderFunctions) {
+    return __privateGet(this, _apiTask).render(renderFunctions);
+  }
+};
+_apiTask = new WeakMap();
+
+export {
+  FetchController
+};

package/dist/chunks/chunk.SMIEZHJ2.js

@@ -0,0 +1,11 @@
+import {
+  TerraCheckbox
+} from "./chunk.64SWCNHI.js";
+
+// src/components/checkbox/checkbox.ts
+var checkbox_default = TerraCheckbox;
+TerraCheckbox.define("terra-checkbox");
+
+export {
+  checkbox_default
+};

package/dist/chunks/chunk.SWGKKZUD.js

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

package/dist/chunks/chunk.SYBFIXLK.js

@@ -0,0 +1,11 @@
+import {
+  TerraPagination
+} from "./chunk.4UBHRRUU.js";
+
+// src/components/pagination/pagination.ts
+var pagination_default = TerraPagination;
+TerraPagination.define("terra-pagination");
+
+export {
+  pagination_default
+};

package/dist/chunks/chunk.SZAADZKK.js

@@ -0,0 +1,252 @@
+import {
+  waitForEvent
+} from "./chunk.N5ZOPEYQ.js";
+import {
+  HasSlotController
+} from "./chunk.7YRJKZ6R.js";
+import {
+  alert_styles_default
+} from "./chunk.D74V2Y4N.js";
+import {
+  watch
+} from "./chunk.NWXJOH5T.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.ABJSJSVR.js";
+import {
+  __decorateClass
+} from "./chunk.SHKVBVTI.js";
+
+// src/components/alert/alert.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+var _TerraAlert = class _TerraAlert extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "icon", "suffix");
+    this.open = false;
+    this.closable = false;
+    this.variant = "primary";
+    this.appearance = "filled";
+    this.duration = Infinity;
+    this.remainingTime = this.duration;
+  }
+  static get toastStack() {
+    if (!this.currentToastStack) {
+      this.currentToastStack = Object.assign(document.createElement("div"), {
+        className: "terra-toast-stack"
+      });
+    }
+    return this.currentToastStack;
+  }
+  firstUpdated() {
+    this.base.hidden = !this.open;
+  }
+  restartAutoHide() {
+    this.handleCountdownChange();
+    clearTimeout(this.autoHideTimeout);
+    clearInterval(this.remainingTimeInterval);
+    if (this.open && this.duration < Infinity) {
+      this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);
+      this.remainingTime = this.duration;
+      this.remainingTimeInterval = window.setInterval(() => {
+        this.remainingTime -= 100;
+      }, 100);
+    }
+  }
+  pauseAutoHide() {
+    var _a;
+    (_a = this.countdownAnimation) == null ? void 0 : _a.pause();
+    clearTimeout(this.autoHideTimeout);
+    clearInterval(this.remainingTimeInterval);
+  }
+  resumeAutoHide() {
+    var _a;
+    if (this.duration < Infinity) {
+      this.autoHideTimeout = window.setTimeout(
+        () => this.hide(),
+        this.remainingTime
+      );
+      this.remainingTimeInterval = window.setInterval(() => {
+        this.remainingTime -= 100;
+      }, 100);
+      (_a = this.countdownAnimation) == null ? void 0 : _a.play();
+    }
+  }
+  handleCountdownChange() {
+    if (this.open && this.duration < Infinity && this.countdown) {
+      const { countdownElement } = this;
+      const start = "100%";
+      const end = "0";
+      this.countdownAnimation = countdownElement.animate(
+        [{ width: start }, { width: end }],
+        {
+          duration: this.duration,
+          easing: "linear"
+        }
+      );
+    }
+  }
+  handleCloseClick() {
+    this.hide();
+  }
+  async handleOpenChange() {
+    this.base.hidden = !this.open;
+    if (this.open) {
+      this.emit("terra-show");
+      if (this.duration < Infinity) {
+        this.restartAutoHide();
+      }
+      this.emit("terra-after-show");
+    } else {
+      this.emit("terra-hide");
+      clearTimeout(this.autoHideTimeout);
+      clearInterval(this.remainingTimeInterval);
+      this.emit("terra-after-hide");
+    }
+  }
+  handleDurationChange() {
+    this.restartAutoHide();
+  }
+  /** Shows the alert. */
+  async show() {
+    if (this.open) {
+      return void 0;
+    }
+    this.open = true;
+    return waitForEvent(this, "terra-after-show");
+  }
+  /** Hides the alert */
+  async hide() {
+    if (!this.open) {
+      return void 0;
+    }
+    this.open = false;
+    return waitForEvent(this, "terra-after-hide");
+  }
+  /**
+   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
+   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by
+   * calling this method again. The returned promise will resolve after the alert is hidden.
+   */
+  async toast() {
+    return new Promise((resolve) => {
+      this.handleCountdownChange();
+      if (_TerraAlert.toastStack.parentElement === null) {
+        document.body.append(_TerraAlert.toastStack);
+      }
+      _TerraAlert.toastStack.appendChild(this);
+      requestAnimationFrame(() => {
+        this.clientWidth;
+        this.show();
+      });
+      this.addEventListener(
+        "terra-after-hide",
+        () => {
+          _TerraAlert.toastStack.removeChild(this);
+          resolve();
+          if (_TerraAlert.toastStack.querySelector("terra-alert") === null) {
+            _TerraAlert.toastStack.remove();
+          }
+        },
+        { once: true }
+      );
+    });
+  }
+  render() {
+    return html`
+            <div
+                part="base"
+                class=${classMap({
+      alert: true,
+      "alert--open": this.open,
+      "alert--closable": this.closable,
+      "alert--has-countdown": !!this.countdown,
+      "alert--has-icon": this.hasSlotController.test("icon"),
+      "alert--primary": this.variant === "primary",
+      "alert--success": this.variant === "success",
+      "alert--neutral": this.variant === "neutral",
+      "alert--warning": this.variant === "warning",
+      "alert--danger": this.variant === "danger",
+      "alert--filled": this.appearance === "filled",
+      "alert--white": this.appearance === "white"
+    })}
+                role="alert"
+                aria-hidden=${this.open ? "false" : "true"}
+                @mouseenter=${this.pauseAutoHide}
+                @mouseleave=${this.resumeAutoHide}
+            >
+                <div part="icon" class="alert__icon">
+                    <slot name="icon"></slot>
+                </div>
+
+                <div part="message" class="alert__message" aria-live="polite">
+                    <slot></slot>
+                </div>
+
+                ${this.closable ? html`
+                          <terra-icon
+                              class="alert__close-button"
+                              name="solid-x-mark"
+                              library="heroicons"
+                              @click=${this.handleCloseClick}
+                          ></terra-icon>
+                      ` : ""}
+
+                <div role="timer" class="alert__timer">${this.remainingTime}</div>
+
+                ${this.countdown ? html`
+                          <div
+                              class=${classMap({
+      alert__countdown: true,
+      "alert__countdown--ltr": this.countdown === "ltr"
+    })}
+                          >
+                              <div class="alert__countdown-elapsed"></div>
+                          </div>
+                      ` : ""}
+            </div>
+        `;
+  }
+};
+_TerraAlert.styles = [component_styles_default, alert_styles_default];
+__decorateClass([
+  query('[part~="base"]')
+], _TerraAlert.prototype, "base", 2);
+__decorateClass([
+  query(".alert__countdown-elapsed")
+], _TerraAlert.prototype, "countdownElement", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], _TerraAlert.prototype, "open", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], _TerraAlert.prototype, "closable", 2);
+__decorateClass([
+  property({ reflect: true })
+], _TerraAlert.prototype, "variant", 2);
+__decorateClass([
+  property({ reflect: true })
+], _TerraAlert.prototype, "appearance", 2);
+__decorateClass([
+  property({ type: Number })
+], _TerraAlert.prototype, "duration", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], _TerraAlert.prototype, "countdown", 2);
+__decorateClass([
+  state()
+], _TerraAlert.prototype, "remainingTime", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], _TerraAlert.prototype, "handleOpenChange", 1);
+__decorateClass([
+  watch("duration")
+], _TerraAlert.prototype, "handleDurationChange", 1);
+var TerraAlert = _TerraAlert;
+
+export {
+  TerraAlert
+};

package/dist/chunks/chunk.T7XC2TPO.js

@@ -0,0 +1,43 @@
+import {
+  divider_styles_default
+} from "./chunk.VHK56IML.js";
+import {
+  watch
+} from "./chunk.NWXJOH5T.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.ABJSJSVR.js";
+import {
+  __decorateClass
+} from "./chunk.SHKVBVTI.js";
+
+// src/components/divider/divider.component.ts
+import { property } from "lit/decorators.js";
+var TerraDivider = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.vertical = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "separator");
+  }
+  handleVerticalChange() {
+    this.setAttribute(
+      "aria-orientation",
+      this.vertical ? "vertical" : "horizontal"
+    );
+  }
+};
+TerraDivider.styles = [component_styles_default, divider_styles_default];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], TerraDivider.prototype, "vertical", 2);
+__decorateClass([
+  watch("vertical")
+], TerraDivider.prototype, "handleVerticalChange", 1);
+
+export {
+  TerraDivider
+};