@nasa-terra/components 0.0.186 → 0.0.188

package/cdn/chunks/chunk.XD3Q6O3R.js

@@ -0,0 +1,310 @@
+import {
+  tooltip_styles_default
+} from "./chunk.YFMBAZ43.js";
+import {
+  TerraPopup
+} from "./chunk.NEQFWCTE.js";
+import {
+  animateTo,
+  parseDuration,
+  stopAnimations
+} from "./chunk.7OPH6HSB.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.BP2GLWKL.js";
+import {
+  waitForEvent
+} from "./chunk.6P5ZFZXZ.js";
+import {
+  e
+} from "./chunk.KGXAA5I2.js";
+import {
+  watch
+} from "./chunk.MPVZOQYA.js";
+import {
+  TerraElement,
+  component_styles_default,
+  e as e2,
+  n
+} from "./chunk.TZCHRRCA.js";
+import {
+  b
+} from "./chunk.RRCYT4LP.js";
+import {
+  __decorateClass,
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/tooltip/tooltip.component.ts
+init_dirname();
+init_buffer();
+init_process();
+var TerraTooltip = class extends TerraElement {
+  constructor() {
+    super();
+    this.content = "";
+    this.variant = "tooltip";
+    this.placement = "top";
+    this.disabled = false;
+    this.distance = 8;
+    this.open = false;
+    this.skidding = 0;
+    this.trigger = "hover focus";
+    this.hoist = false;
+    this.interactive = false;
+    this.handleBlur = () => {
+      if (this.hasTrigger("focus")) {
+        this.hide();
+      }
+    };
+    this.handleClick = () => {
+      if (this.hasTrigger("click")) {
+        if (this.open) {
+          this.hide();
+        } else {
+          this.show();
+        }
+      }
+    };
+    this.handleFocus = () => {
+      if (this.hasTrigger("focus")) {
+        this.show();
+      }
+    };
+    this.handleDocumentKeyDown = (event) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        this.hide();
+      }
+    };
+    this.handleMouseOver = () => {
+      if (this.hasTrigger("hover")) {
+        const delay = parseDuration(
+          getComputedStyle(this).getPropertyValue("--show-delay")
+        );
+        clearTimeout(this.hoverTimeout);
+        this.hoverTimeout = window.setTimeout(() => this.show(), delay);
+      }
+    };
+    this.handleMouseOut = (event) => {
+      if (this.hasTrigger("hover")) {
+        const relatedTarget = event.relatedTarget;
+        if (relatedTarget && (relatedTarget === this || this.contains(relatedTarget))) {
+          return;
+        }
+        const delay = parseDuration(
+          getComputedStyle(this).getPropertyValue("--hide-delay")
+        );
+        clearTimeout(this.hoverTimeout);
+        this.hoverTimeout = window.setTimeout(() => this.hide(), delay);
+      }
+    };
+    this.addEventListener("blur", this.handleBlur, true);
+    this.addEventListener("focus", this.handleFocus, true);
+    this.addEventListener("click", this.handleClick);
+    this.addEventListener("mouseover", this.handleMouseOver);
+    this.addEventListener("mouseout", this.handleMouseOut);
+  }
+  disconnectedCallback() {
+    var _a;
+    super.disconnectedCallback();
+    (_a = this.closeWatcher) == null ? void 0 : _a.destroy();
+    document.removeEventListener("keydown", this.handleDocumentKeyDown);
+  }
+  firstUpdated() {
+    this.body.hidden = !this.open;
+    if (this.open) {
+      this.popup.active = true;
+      this.popup.reposition();
+    }
+  }
+  hasTrigger(triggerType) {
+    const triggers = this.trigger.split(" ");
+    return triggers.includes(triggerType);
+  }
+  async handleOpenChange() {
+    var _a, _b;
+    if (this.open) {
+      if (this.disabled) {
+        return;
+      }
+      this.emit("terra-show");
+      if ("CloseWatcher" in window) {
+        (_a = this.closeWatcher) == null ? void 0 : _a.destroy();
+        this.closeWatcher = new CloseWatcher();
+        this.closeWatcher.onclose = () => {
+          this.hide();
+        };
+      } else {
+        document.addEventListener("keydown", this.handleDocumentKeyDown);
+      }
+      await stopAnimations(this.body);
+      this.body.hidden = false;
+      this.popup.active = true;
+      const { keyframes, options } = getAnimation(this, "tooltip.show", {
+        dir: "ltr"
+      });
+      await animateTo(this.popup.popup, keyframes, options);
+      this.popup.reposition();
+      this.emit("terra-after-show");
+    } else {
+      this.emit("terra-hide");
+      (_b = this.closeWatcher) == null ? void 0 : _b.destroy();
+      document.removeEventListener("keydown", this.handleDocumentKeyDown);
+      await stopAnimations(this.body);
+      const { keyframes, options } = getAnimation(this, "tooltip.hide", {
+        dir: "ltr"
+      });
+      await animateTo(this.popup.popup, keyframes, options);
+      this.popup.active = false;
+      this.body.hidden = true;
+      this.emit("terra-after-hide");
+    }
+  }
+  async handleOptionsChange() {
+    if (this.hasUpdated) {
+      await this.updateComplete;
+      this.popup.reposition();
+    }
+  }
+  handleDisabledChange() {
+    if (this.disabled && this.open) {
+      this.hide();
+    }
+  }
+  /** Shows the tooltip or popover. */
+  async show() {
+    if (this.open) {
+      return void 0;
+    }
+    this.open = true;
+    return waitForEvent(this, "terra-after-show");
+  }
+  /** Hides the tooltip or popover. */
+  async hide() {
+    if (!this.open) {
+      return void 0;
+    }
+    this.open = false;
+    return waitForEvent(this, "terra-after-hide");
+  }
+  //
+  // NOTE: Tooltip is a bit unique in that we're using aria-live instead of aria-labelledby to trick screen readers into
+  // announcing the content. It works really well, but it violates an accessibility rule. We're also adding the
+  // aria-describedby attribute to a slot, which is required by <terra-popup> to correctly locate the first assigned
+  // element, otherwise positioning is incorrect.
+  //
+  render() {
+    const isPopover = this.variant === "popover";
+    return b`
+            <terra-popup
+                part="base"
+                exportparts="
+          popup:base__popup,
+          arrow:base__arrow
+        "
+                class=${e({
+      tooltip: true,
+      "tooltip--popover": isPopover,
+      "tooltip--open": this.open
+    })}
+                placement=${this.placement}
+                distance=${this.distance}
+                skidding=${this.skidding}
+                strategy=${this.hoist ? "fixed" : "absolute"}
+                flip
+                shift
+                arrow
+                hover-bridge
+            >
+                ${""}
+                <slot slot="anchor" aria-describedby="tooltip"></slot>
+
+                ${""}
+                <div
+                    part="body"
+                    id="tooltip"
+                    class="tooltip__body"
+                    role=${isPopover ? "dialog" : "tooltip"}
+                    aria-live=${this.open ? "polite" : "off"}
+                >
+                    <div class="tooltip__image">
+                        <slot name="image"></slot>
+                    </div>
+                    <slot name="content">${this.content}</slot>
+                </div>
+            </terra-popup>
+        `;
+  }
+};
+TerraTooltip.styles = [component_styles_default, tooltip_styles_default];
+TerraTooltip.dependencies = { "terra-popup": TerraPopup };
+__decorateClass([
+  e2("slot:not([name])")
+], TerraTooltip.prototype, "defaultSlot", 2);
+__decorateClass([
+  e2(".tooltip__body")
+], TerraTooltip.prototype, "body", 2);
+__decorateClass([
+  e2("terra-popup")
+], TerraTooltip.prototype, "popup", 2);
+__decorateClass([
+  n()
+], TerraTooltip.prototype, "content", 2);
+__decorateClass([
+  n({ reflect: true })
+], TerraTooltip.prototype, "variant", 2);
+__decorateClass([
+  n()
+], TerraTooltip.prototype, "placement", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], TerraTooltip.prototype, "disabled", 2);
+__decorateClass([
+  n({ type: Number })
+], TerraTooltip.prototype, "distance", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], TerraTooltip.prototype, "open", 2);
+__decorateClass([
+  n({ type: Number })
+], TerraTooltip.prototype, "skidding", 2);
+__decorateClass([
+  n()
+], TerraTooltip.prototype, "trigger", 2);
+__decorateClass([
+  n({ type: Boolean })
+], TerraTooltip.prototype, "hoist", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], TerraTooltip.prototype, "interactive", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], TerraTooltip.prototype, "handleOpenChange", 1);
+__decorateClass([
+  watch(["content", "distance", "hoist", "placement", "skidding"])
+], TerraTooltip.prototype, "handleOptionsChange", 1);
+__decorateClass([
+  watch("disabled")
+], TerraTooltip.prototype, "handleDisabledChange", 1);
+setDefaultAnimation("tooltip.show", {
+  keyframes: [
+    { opacity: 0, scale: 0.8 },
+    { opacity: 1, scale: 1 }
+  ],
+  options: { duration: 150, easing: "ease" }
+});
+setDefaultAnimation("tooltip.hide", {
+  keyframes: [
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.8 }
+  ],
+  options: { duration: 150, easing: "ease" }
+});
+
+export {
+  TerraTooltip
+};

package/cdn/chunks/chunk.XKWNA7N5.js

@@ -0,0 +1,29 @@
+import {
+  TerraSpatialPicker
+} from "./chunk.FO7AKTOQ.js";
+import {
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/react/spatial-picker/index.ts
+init_dirname();
+init_buffer();
+init_process();
+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/cdn/chunks/chunk.XPXTO5PU.js

@@ -0,0 +1,19 @@
+import {
+  TerraDataGrid
+} from "./chunk.DEDZKM62.js";
+import {
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/data-grid/data-grid.ts
+init_dirname();
+init_buffer();
+init_process();
+var data_grid_default = TerraDataGrid;
+TerraDataGrid.define("terra-data-grid");
+
+export {
+  data_grid_default
+};

package/cdn/chunks/chunk.XVM4RFB4.js

@@ -0,0 +1,29 @@
+import {
+  TerraOption
+} from "./chunk.VUQKLEDU.js";
+import {
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/react/option/index.ts
+init_dirname();
+init_buffer();
+init_process();
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "terra-option";
+TerraOption.define("terra-option");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraOption,
+  react: React,
+  events: {},
+  displayName: "TerraOption"
+});
+var option_default = reactWrapper;
+
+export {
+  option_default
+};

package/cdn/chunks/chunk.XXBW3R7J.js

@@ -0,0 +1,29 @@
+import {
+  TerraDataAccess
+} from "./chunk.LMY4CFJM.js";
+import {
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/react/data-access/index.ts
+init_dirname();
+init_buffer();
+init_process();
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "terra-data-access";
+TerraDataAccess.define("terra-data-access");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraDataAccess,
+  react: React,
+  events: {},
+  displayName: "TerraDataAccess"
+});
+var data_access_default = reactWrapper;
+
+export {
+  data_access_default
+};

package/cdn/chunks/chunk.XYC2ED7L.js

@@ -0,0 +1,19 @@
+import {
+  TerraBadge
+} from "./chunk.DI6TR3F6.js";
+import {
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/badge/badge.ts
+init_dirname();
+init_buffer();
+init_process();
+var badge_default = TerraBadge;
+TerraBadge.define("terra-badge");
+
+export {
+  badge_default
+};

package/cdn/chunks/chunk.YEKG4766.js

@@ -0,0 +1,188 @@
+import {
+  toast_styles_default
+} from "./chunk.NJ3TPG7D.js";
+import {
+  TerraAlert
+} from "./chunk.FPUA6LUR.js";
+import {
+  TerraElement,
+  component_styles_default,
+  n
+} from "./chunk.TZCHRRCA.js";
+import {
+  b
+} from "./chunk.RRCYT4LP.js";
+import {
+  __decorateClass,
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/toast/toast.component.ts
+init_dirname();
+init_buffer();
+init_process();
+var TerraToast = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "primary";
+    this.duration = 3e3;
+    this.closable = true;
+  }
+  get alert() {
+    if (!this.shadowRoot) {
+      return null;
+    }
+    return this.shadowRoot.querySelector("terra-alert");
+  }
+  firstUpdated() {
+    const alert = this.alert;
+    if (alert) {
+      alert.addEventListener("terra-show", () => this.emit("terra-show"));
+      alert.addEventListener(
+        "terra-after-show",
+        () => this.emit("terra-after-show")
+      );
+      alert.addEventListener("terra-hide", () => this.emit("terra-hide"));
+      alert.addEventListener(
+        "terra-after-hide",
+        () => this.emit("terra-after-hide")
+      );
+    }
+  }
+  /**
+   * Displays the toast as a notification. This will move the toast out of its position in the DOM and, when
+   * dismissed, it will be removed from the DOM completely. By storing a reference to the toast, you can reuse it by
+   * calling this method again. The returned promise will resolve after the toast is hidden.
+   */
+  async toast() {
+    return new Promise(async (resolve) => {
+      await this.updateComplete;
+      if (!this.shadowRoot) {
+        await this.updateComplete;
+      }
+      let alert = this.alert;
+      if (!alert) {
+        await customElements.whenDefined("terra-alert");
+        await this.updateComplete;
+        alert = this.alert;
+      }
+      if (!alert) {
+        resolve();
+        return;
+      }
+      await alert.updateComplete;
+      const toastStack = TerraAlert.toastStack;
+      if (toastStack.parentElement === null) {
+        document.body.append(toastStack);
+      }
+      toastStack.appendChild(this);
+      requestAnimationFrame(async () => {
+        this.clientWidth;
+        await this.updateComplete;
+        await alert.updateComplete;
+        if (!alert.open) {
+          await alert.show();
+        }
+      });
+      this.addEventListener(
+        "terra-after-hide",
+        () => {
+          if (toastStack.contains(this)) {
+            toastStack.removeChild(this);
+          }
+          resolve();
+          if (toastStack.querySelector("terra-toast") === null && toastStack.querySelector("terra-alert") === null) {
+            toastStack.remove();
+          }
+        },
+        { once: true }
+      );
+    });
+  }
+  /** Shows the toast. */
+  async show() {
+    await this.updateComplete;
+    const alert = this.alert;
+    if (!alert) {
+      throw new Error("TerraToast: Alert element not found");
+    }
+    await alert.updateComplete;
+    return alert.show();
+  }
+  /** Hides the toast. */
+  async hide() {
+    await this.updateComplete;
+    const alert = this.alert;
+    if (!alert) {
+      throw new Error("TerraToast: Alert element not found");
+    }
+    await alert.updateComplete;
+    return alert.hide();
+  }
+  /**
+   * Creates a toast notification imperatively. This is a convenience method that creates a toast, appends it to the
+   * body, and displays it as a notification.
+   *
+   * @param message - The message to display in the toast.
+   * @param variant - The toast variant. Defaults to 'primary'.
+   * @param icon - Optional icon name to display. Defaults to undefined.
+   * @param duration - The duration in milliseconds. Defaults to 3000.
+   * @returns A promise that resolves after the toast is hidden.
+   */
+  static async notify(message, variant = "primary", icon, duration = 3e3) {
+    const escapeHtml = (html) => {
+      const div = document.createElement("div");
+      div.textContent = html;
+      return div.innerHTML;
+    };
+    const toast = Object.assign(document.createElement("terra-toast"), {
+      variant,
+      duration,
+      closable: true,
+      innerHTML: icon ? `
+                    <terra-icon name="${icon}" slot="icon" library="heroicons"></terra-icon>
+                    ${escapeHtml(message)}
+                ` : escapeHtml(message)
+    });
+    document.body.append(toast);
+    await customElements.whenDefined("terra-toast");
+    await toast.updateComplete;
+    return toast.toast();
+  }
+  render() {
+    return b`
+            <terra-alert
+                part="base"
+                exportparts="base:base__base, icon:base__icon, message:base__message"
+                variant=${this.variant}
+                duration=${this.duration}
+                closable=${this.closable}
+                countdown=${this.countdown || ""}
+                appearance="filled"
+            >
+                <slot name="icon" slot="icon"></slot>
+                <slot></slot>
+            </terra-alert>
+        `;
+  }
+};
+TerraToast.styles = [component_styles_default, toast_styles_default];
+TerraToast.dependencies = { "terra-alert": TerraAlert };
+__decorateClass([
+  n({ reflect: true })
+], TerraToast.prototype, "variant", 2);
+__decorateClass([
+  n({ type: Number })
+], TerraToast.prototype, "duration", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], TerraToast.prototype, "closable", 2);
+__decorateClass([
+  n({ type: String, reflect: true })
+], TerraToast.prototype, "countdown", 2);
+
+export {
+  TerraToast
+};

package/cdn/chunks/chunk.YETZGDPT.js

@@ -0,0 +1,19 @@
+import {
+  TerraVariableCombobox
+} from "./chunk.U5NYPJAO.js";
+import {
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/variable-combobox/variable-combobox.ts
+init_dirname();
+init_buffer();
+init_process();
+var variable_combobox_default = TerraVariableCombobox;
+TerraVariableCombobox.define("terra-variable-combobox");
+
+export {
+  variable_combobox_default
+};

package/cdn/chunks/chunk.YMOIAW4X.js

@@ -0,0 +1,47 @@
+import {
+  breadcrumbs_styles_default
+} from "./chunk.3WMCCZLC.js";
+import {
+  TerraElement,
+  component_styles_default,
+  n
+} from "./chunk.TZCHRRCA.js";
+import {
+  b
+} from "./chunk.RRCYT4LP.js";
+import {
+  __decorateClass,
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/breadcrumbs/breadcrumbs.component.ts
+init_dirname();
+init_buffer();
+init_process();
+var TerraBreadcrumbs = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.ariaLabel = "Breadcrumb";
+    this.theme = "light";
+  }
+  render() {
+    return b`
+            <nav part="base nav" class="breadcrumbs" aria-label=${this.ariaLabel}>
+                <slot></slot>
+            </nav>
+        `;
+  }
+};
+TerraBreadcrumbs.styles = [component_styles_default, breadcrumbs_styles_default];
+__decorateClass([
+  n({ attribute: "aria-label" })
+], TerraBreadcrumbs.prototype, "ariaLabel", 2);
+__decorateClass([
+  n({ reflect: true })
+], TerraBreadcrumbs.prototype, "theme", 2);
+
+export {
+  TerraBreadcrumbs
+};