@nasa-terra/components 0.0.171 → 0.0.173

package/dist/chunks/chunk.VT5KHE7G.js

@@ -0,0 +1,451 @@
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet,
+  __spreadValues
+} from "./chunk.SHKVBVTI.js";
+
+// src/styles/component.styles.ts
+import { css } from "lit";
+var component_styles_default = css`
+    :host {
+        box-sizing: border-box;
+        display: none;
+    }
+
+    :host *,
+    :host *::before,
+    :host *::after {
+        box-sizing: inherit;
+    }
+
+    :host {
+        background-color: var(--background-color);
+        color: var(--color);
+    }
+
+    [hidden] {
+        display: none !important;
+    }
+
+    /* Horizon Design System Font Classes */
+
+    /* Display Fonts */
+
+    .display-120 {
+        font-family: var(--terra-font-family--inter);
+        font-size: 7.5rem; /* 120px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .display-100 {
+        font-family: var(--terra-font-family--inter);
+        font-size: 6.25rem; /* 100px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .display-80 {
+        font-family: var(--terra-font-family--inter);
+        font-size: 5rem; /* 80px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .display-72 {
+        font-family: var(--terra-font-family--inter);
+        font-size: 4.5rem; /* 72px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .display-60 {
+        font-family: var(--terra-font-family--inter);
+        font-size: 3.75rem; /* 60px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .display-48 {
+        font-family: var(--terra-font-family--inter);
+        font-size: 3rem; /* 48px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .display-41 {
+        font-family: var(--terra-font-family--inter);
+        font-size: 2.563rem; /* 41px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    /* Heading Fonts */
+
+    .heading-36-bold {
+        font-family: var(--terra-font-family--inter);
+        font-size: 2.25rem; /* 36px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .heading-36-light {
+        font-family: var(--terra-font-family--inter);
+        font-size: 2.25rem; /* 36px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .heading-29-bold {
+        font-family: var(--terra-font-family--inter);
+        font-size: 1.813rem; /* 29px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .heading-29-light {
+        font-family: var(--terra-font-family--inter);
+        font-size: 1.813rem; /* 29px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .heading-22-bold {
+        font-family: var(--terra-font-family--inter);
+        font-size: 1.375rem; /* 22px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .heading-22-light {
+        font-family: var(--terra-font-family--inter);
+        font-size: 1.375rem; /*22px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .heading-18-bold {
+        font-family: var(--terra-font-family--inter);
+        font-size: 1.125rem; /* 18px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .heading-18-light {
+        font-family: var(--terra-font-family--inter);
+        font-size: 1.125rem; /* 18px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .heading-16-bold {
+        font-family: var(--terra-font-family--inter);
+        font-size: 1rem; /* 16px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .heading-16-light {
+        font-family: var(--terra-font-family--inter);
+        font-size: 1rem; /* 16px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .heading-14-bold {
+        font-family: var(--terra-font-family--inter);
+        font-size: 0.875rem; /* 14px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .heading-14-light {
+        font-family: var(--terra-font-family--inter);
+        font-size: 0.875rem; /* 14px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .heading-12-bold {
+        font-family: var(--terra-font-family--inter);
+        font-size: 0.75rem; /* 12px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .heading-12-light {
+        font-family: var(--terra-font-family--inter);
+        font-size: 0.75rem; /* 12px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .heading-11-semi-bold {
+        font-family: var(--terra-font-family--inter);
+        font-size: 0.688rem; /* 11px */
+        font-weight: var(--terra-font-weight-semi-bold);
+    }
+
+    /* Body Fonts */
+
+    .body-18 {
+        font-family: var(--terra-font-family--public-sans);
+        font-size: 1.125rem; /* 18px */
+        font-weight: var(--terra-font-weight-normal);
+    }
+
+    .body-16 {
+        font-family: var(--terra-font-family--public-sans);
+        font-size: 1rem; /* 16px */
+        font-weight: var(--terra-font-weight-normal);
+    }
+
+    .body-14 {
+        font-family: var(--terra-font-family--public-sans);
+        font-size: 0.875rem; /* 14px */
+        font-weight: var(--terra-font-weight-normal);
+    }
+
+    .body-12 {
+        font-family: var(--terra-font-family--public-sans);
+        font-size: 0.75rem; /* 12px */
+        font-weight: var(--terra-font-weight-normal);
+    }
+
+    .body-11 {
+        font-family: var(--terra-font-family--public-sans);
+        font-size: 0.688rem; /* 11px */
+        font-weight: var(--terra-font-weight-normal);
+    }
+
+    /* Number & Label Fonts */
+
+    .number-240 {
+        font-family: var(--terra-font-family--dm-mono);
+        font-size: 15rem; /* 240px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .number-120 {
+        font-family: var(--terra-font-family--dm-mono);
+        font-size: 7.5rem; /* 120px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .number-48 {
+        font-family: var(--terra-font-family--dm-mono);
+        font-size: 3rem; /* 48px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .number-36 {
+        font-family: var(--terra-font-family--dm-mono);
+        font-size: 2.25rem; /* 36px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .number-14 {
+        font-family: var(--terra-font-family--dm-mono);
+        font-size: 0.875rem; /* 14px */
+        font-weight: 500;
+    }
+
+    .number-11 {
+        font-family: var(--terra-font-family--dm-mono);
+        font-size: 0.688rem; /* 11px */
+        font-weight: 500;
+    }
+
+    .label-14 {
+        font-family: var(--terra-font-family--dm-mono);
+        font-size: 0.875rem; /* 14px */
+        font-weight: var(--terra-font-weight-light);
+        text-transform: uppercase;
+    }
+
+    .label-12 {
+        font-family: var(--terra-font-family--dm-mono);
+        font-size: 0.75rem; /* 12px */
+        font-weight: var(--terra-font-weight-light);
+        text-transform: uppercase;
+    }
+
+    .label-11 {
+        font-family: var(--terra-font-family--dm-mono);
+        font-size: 0.688rem; /* 11px */
+        font-weight: var(--terra-font-weight-light);
+        text-transform: uppercase;
+    }
+
+    /* Forms */
+
+    /* Input Field */
+
+    select,
+    .input {
+        font-family: var(--terra-input-font-family);
+        font-size: var(--terra-input-font-size);
+        color: var(--terra-input-color);
+        font-weight: var(--terra-input-font-weight);
+        line-height: var(--terra-input-line-height);
+        background-color: var(--terra-input-background-color);
+        border: var(--terra-input-border-width) solid var(--terra-input-border-color);
+        border-radius: var(--terra-input-border-radius);
+    }
+
+    label,
+    .input-label {
+        font-family: var(--terra-input-label-font-family);
+        font-size: var(--terra-input-label-font-size);
+        color: var(--terra-input-label-color);
+        font-weight: var(--terra-font-weight-semibold);
+        line-height: var(--terra-input-label-line-height);
+    }
+
+    /* Elements */
+
+    a {
+        text-decoration: underline;
+        text-decoration-color: #585858;
+        text-decoration-style: dashed;
+        text-decoration-thickness: 0.05em;
+        text-underline-offset: 0.25rem;
+        color: var(--terra-color-carbon-60);
+    }
+
+    /* UTILITY CSS */
+    .sr-only {
+        block-size: 1px;
+        border-width: 0;
+        clip: rect(0, 0, 0, 0);
+        margin: -1px;
+        overflow: hidden;
+        padding: 0;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+    }
+`;
+
+// src/internal/terra-element.ts
+import { LitElement } from "lit";
+import { property, state } from "lit/decorators.js";
+var _io, _observeVisibility, observeVisibility_fn, _isComponentVisible, isComponentVisible_fn;
+var TerraElement = class extends LitElement {
+  constructor() {
+    super();
+    __privateAdd(this, _observeVisibility);
+    /**
+     * Check if the component is visible on the page
+     * @returns true if the component is visible, false otherwise
+     */
+    __privateAdd(this, _isComponentVisible);
+    this.environment = "prod" /* PROD */;
+    this.isVisible = false;
+    __privateAdd(this, _io, void 0);
+    Object.entries(
+      this.constructor.dependencies
+    ).forEach(([name, component]) => {
+      ;
+      this.constructor.define(name, component);
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    __privateMethod(this, _observeVisibility, observeVisibility_fn).call(this);
+  }
+  disconnectedCallback() {
+    var _a;
+    super.disconnectedCallback();
+    (_a = __privateGet(this, _io)) == null ? void 0 : _a.disconnect();
+    __privateSet(this, _io, void 0);
+  }
+  /**
+   * Called when the component is visible on the page
+   * Example: if the component is in a dialog, this will be triggered the first time the dialog opens
+   */
+  firstVisible() {
+  }
+  emit(name, options) {
+    const event = new CustomEvent(name, __spreadValues({
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+      detail: {}
+    }, options));
+    this.dispatchEvent(event);
+    return event;
+  }
+  /* eslint-enable */
+  static define(name, elementConstructor = this, options = {}) {
+    const currentlyRegisteredConstructor = customElements.get(name);
+    if (!currentlyRegisteredConstructor) {
+      customElements.define(
+        name,
+        class extends elementConstructor {
+        },
+        options
+      );
+      return;
+    }
+    let newVersion = " (unknown version)";
+    let existingVersion = newVersion;
+    if ("version" in elementConstructor && elementConstructor.version) {
+      newVersion = " v" + elementConstructor.version;
+    }
+    if ("version" in currentlyRegisteredConstructor && currentlyRegisteredConstructor.version) {
+      existingVersion = " v" + currentlyRegisteredConstructor.version;
+    }
+    if (newVersion && existingVersion && newVersion === existingVersion) {
+      return;
+    }
+    console.warn(
+      `Attempted to register <${name}>${newVersion}, but <${name}>${existingVersion} has already been registered.`
+    );
+  }
+};
+_io = new WeakMap();
+_observeVisibility = new WeakSet();
+observeVisibility_fn = function() {
+  if (__privateGet(this, _io)) {
+    return;
+  }
+  this.isVisible = __privateMethod(this, _isComponentVisible, isComponentVisible_fn).call(this);
+  if (this.isVisible) {
+    this.firstVisible();
+    return;
+  }
+  if (!("IntersectionObserver" in window)) {
+    this.isVisible = true;
+    this.firstVisible();
+    return;
+  }
+  __privateSet(this, _io, new IntersectionObserver(
+    (entries) => {
+      var _a;
+      if (entries.some((e) => e.isIntersecting)) {
+        (_a = __privateGet(this, _io)) == null ? void 0 : _a.disconnect();
+        __privateSet(this, _io, void 0);
+        this.isVisible = true;
+        setTimeout(() => this.firstVisible(), 500);
+      }
+    },
+    { root: null, threshold: 0 }
+  ));
+  __privateGet(this, _io).observe(this);
+};
+_isComponentVisible = new WeakSet();
+isComponentVisible_fn = function() {
+  if (!this.isConnected) {
+    return false;
+  }
+  const rect = this.getBoundingClientRect();
+  const style = getComputedStyle(this);
+  return rect.width > 0 && rect.height > 0 && style.display !== "none" && style.visibility !== "hidden";
+};
+/* eslint-disable */
+// @ts-expect-error This is auto-injected at build time.
+TerraElement.version = "0.0.173";
+TerraElement.dependencies = {};
+__decorateClass([
+  property()
+], TerraElement.prototype, "dir", 2);
+__decorateClass([
+  property()
+], TerraElement.prototype, "lang", 2);
+__decorateClass([
+  property()
+], TerraElement.prototype, "environment", 2);
+__decorateClass([
+  property()
+], TerraElement.prototype, "bearerToken", 2);
+__decorateClass([
+  state()
+], TerraElement.prototype, "isVisible", 2);
+
+export {
+  component_styles_default,
+  TerraElement
+};

package/dist/chunks/chunk.WRMEED2V.js

@@ -0,0 +1,11 @@
+import {
+  TerraTab
+} from "./chunk.4Y5DQUZI.js";
+
+// src/components/tab/tab.ts
+var tab_default = TerraTab;
+TerraTab.define("terra-tab");
+
+export {
+  tab_default
+};

package/dist/chunks/chunk.X3BWD77K.js

@@ -0,0 +1,11 @@
+import {
+  TerraBrowseVariables
+} from "./chunk.VGNT6ULL.js";
+
+// src/components/browse-variables/browse-variables.ts
+var browse_variables_default = TerraBrowseVariables;
+TerraBrowseVariables.define("terra-browse-variables");
+
+export {
+  browse_variables_default
+};

package/dist/chunks/chunk.XEPTHU2I.js

@@ -0,0 +1,143 @@
+import {
+  menu_styles_default
+} from "./chunk.6PTW3KAY.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.VT5KHE7G.js";
+import {
+  __decorateClass
+} from "./chunk.SHKVBVTI.js";
+
+// src/components/menu/menu.component.ts
+import { html } from "lit";
+import { query } from "lit/decorators.js";
+var TerraMenu = class extends TerraElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "menu");
+  }
+  handleClick(event) {
+    const menuItemTypes = ["menuitem", "menuitemcheckbox"];
+    const composedPath = event.composedPath();
+    const target = composedPath.find(
+      (el) => {
+        var _a;
+        return menuItemTypes.includes(((_a = el == null ? void 0 : el.getAttribute) == null ? void 0 : _a.call(el, "role")) || "");
+      }
+    );
+    if (!target)
+      return;
+    const closestMenu = composedPath.find(
+      (el) => {
+        var _a;
+        return ((_a = el == null ? void 0 : el.getAttribute) == null ? void 0 : _a.call(el, "role")) === "menu";
+      }
+    );
+    const clickHasSubmenu = closestMenu !== this;
+    if (clickHasSubmenu)
+      return;
+    const item = target;
+    if (item.type === "checkbox") {
+      item.checked = !item.checked;
+    }
+    this.emit("terra-select", { detail: { item } });
+  }
+  handleKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      const item = this.getCurrentItem();
+      event.preventDefault();
+      event.stopPropagation();
+      item == null ? void 0 : item.click();
+    } else if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+      const items = this.getAllItems();
+      const activeItem = this.getCurrentItem();
+      let index = activeItem ? items.indexOf(activeItem) : 0;
+      if (items.length > 0) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (event.key === "ArrowDown") {
+          index++;
+        } else if (event.key === "ArrowUp") {
+          index--;
+        } else if (event.key === "Home") {
+          index = 0;
+        } else if (event.key === "End") {
+          index = items.length - 1;
+        }
+        if (index < 0) {
+          index = items.length - 1;
+        }
+        if (index > items.length - 1) {
+          index = 0;
+        }
+        this.setCurrentItem(items[index]);
+        items[index].focus();
+      }
+    }
+  }
+  handleMouseDown(event) {
+    const target = event.target;
+    if (this.isMenuItem(target)) {
+      this.setCurrentItem(target);
+    }
+  }
+  handleSlotChange() {
+    const items = this.getAllItems();
+    if (items.length > 0) {
+      this.setCurrentItem(items[0]);
+    }
+  }
+  isMenuItem(item) {
+    var _a;
+    return item.tagName.toLowerCase() === "terra-menu-item" || ["menuitem", "menuitemcheckbox", "menuitemradio"].includes(
+      (_a = item.getAttribute("role")) != null ? _a : ""
+    );
+  }
+  /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */
+  getAllItems() {
+    return [...this.defaultSlot.assignedElements({ flatten: true })].filter(
+      (el) => {
+        if (el.inert || !this.isMenuItem(el)) {
+          return false;
+        }
+        return true;
+      }
+    );
+  }
+  /**
+   * @internal Gets the current menu item, which is the menu item that has `tabindex="0"` within the roving tab index.
+   * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the "active" item.
+   */
+  getCurrentItem() {
+    return this.getAllItems().find((i) => i.getAttribute("tabindex") === "0");
+  }
+  /**
+   * @internal Sets the current menu item to the specified element. This sets `tabindex="0"` on the target element and
+   * `tabindex="-1"` to all other items. This method must be called prior to setting focus on a menu item.
+   */
+  setCurrentItem(item) {
+    const items = this.getAllItems();
+    items.forEach((i) => {
+      i.setAttribute("tabindex", i === item ? "0" : "-1");
+    });
+  }
+  render() {
+    return html`
+            <slot
+                @slotchange=${this.handleSlotChange}
+                @click=${this.handleClick}
+                @keydown=${this.handleKeyDown}
+                @mousedown=${this.handleMouseDown}
+            ></slot>
+        `;
+  }
+};
+TerraMenu.styles = [component_styles_default, menu_styles_default];
+__decorateClass([
+  query("slot")
+], TerraMenu.prototype, "defaultSlot", 2);
+
+export {
+  TerraMenu
+};

package/dist/chunks/chunk.XJNO4Q3R.js

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

package/dist/chunks/chunk.XN574D6F.js

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

package/dist/chunks/chunk.XNUE63XD.js

@@ -0,0 +1,58 @@
+import {
+  badge_styles_default
+} from "./chunk.F4BY2ABV.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.VT5KHE7G.js";
+import {
+  __decorateClass
+} from "./chunk.SHKVBVTI.js";
+
+// src/components/badge/badge.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+var TerraBadge = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "primary";
+    this.pill = false;
+    this.pulse = false;
+  }
+  render() {
+    return html`
+            <span
+                part="base"
+                class=${classMap({
+      badge: true,
+      "badge--primary": this.variant === "primary",
+      "badge--success": this.variant === "success",
+      "badge--neutral": this.variant === "neutral",
+      "badge--warning": this.variant === "warning",
+      "badge--info": this.variant === "info",
+      "badge--danger": this.variant === "danger",
+      "badge--pill": this.pill,
+      "badge--pulse": this.pulse
+    })}
+                role="status"
+            >
+                <slot></slot>
+            </span>
+        `;
+  }
+};
+TerraBadge.styles = [component_styles_default, badge_styles_default];
+__decorateClass([
+  property({ reflect: true })
+], TerraBadge.prototype, "variant", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], TerraBadge.prototype, "pill", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], TerraBadge.prototype, "pulse", 2);
+
+export {
+  TerraBadge
+};