@nasa-terra/components 0.0.181 → 0.0.182

package/cdn/chunks/chunk.Q6MUWVO4.js

@@ -0,0 +1,310 @@
+import {
+  tooltip_styles_default
+} from "./chunk.YFMBAZ43.js";
+import {
+  TerraPopup
+} from "./chunk.IFBDVPXH.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.7ZVYIV7K.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.Q7SMQGGV.js

@@ -0,0 +1,32 @@
+import {
+  TerraDatePicker
+} from "./chunk.VHMUJ6SG.js";
+import {
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/react/date-picker/index.ts
+init_dirname();
+init_buffer();
+init_process();
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "terra-date-picker";
+TerraDatePicker.define("terra-date-picker");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraDatePicker,
+  react: React,
+  events: {
+    onTerraDateRangeChange: "terra-date-range-change"
+  },
+  displayName: "TerraDatePicker"
+});
+var date_picker_default = reactWrapper;
+
+export {
+  date_picker_default
+};

package/cdn/chunks/chunk.QCZATBDS.js

@@ -0,0 +1,19 @@
+import {
+  TerraToast
+} from "./chunk.4YHMBW3P.js";
+import {
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/toast/toast.ts
+init_dirname();
+init_buffer();
+init_process();
+var toast_default = TerraToast;
+TerraToast.define("terra-toast");
+
+export {
+  toast_default
+};

package/cdn/chunks/chunk.QMC7DUVJ.js

@@ -0,0 +1,151 @@
+import {
+  menu_styles_default
+} from "./chunk.QOHUVWMU.js";
+import {
+  TerraElement,
+  component_styles_default,
+  e
+} from "./chunk.7ZVYIV7K.js";
+import {
+  b
+} from "./chunk.RRCYT4LP.js";
+import {
+  __decorateClass,
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/menu/menu.component.ts
+init_dirname();
+init_buffer();
+init_process();
+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 b`
+            <slot
+                @slotchange=${this.handleSlotChange}
+                @click=${this.handleClick}
+                @keydown=${this.handleKeyDown}
+                @mousedown=${this.handleMouseDown}
+            ></slot>
+        `;
+  }
+};
+TerraMenu.styles = [component_styles_default, menu_styles_default];
+__decorateClass([
+  e("slot")
+], TerraMenu.prototype, "defaultSlot", 2);
+
+export {
+  TerraMenu
+};

package/cdn/chunks/chunk.QR25OOSG.js

@@ -0,0 +1,83 @@
+import {
+  site_header_styles_default
+} from "./chunk.PMD3UQTU.js";
+import {
+  HasSlotController
+} from "./chunk.PACUQ7ID.js";
+import {
+  TerraIcon
+} from "./chunk.S3QWAZET.js";
+import {
+  TerraElement,
+  component_styles_default,
+  n
+} from "./chunk.7ZVYIV7K.js";
+import {
+  b
+} from "./chunk.RRCYT4LP.js";
+import {
+  __decorateClass,
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/site-header/site-header.component.ts
+init_dirname();
+init_buffer();
+init_process();
+var TerraSiteHeader = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "title",
+      "center",
+      "right"
+    );
+    this.siteName = "";
+  }
+  render() {
+    const hasTitleSlot = this.hasSlotController.test("title");
+    const hasRightSlot = this.hasSlotController.test("right");
+    return b`
+            <header part="base" class="site-header">
+                <div class="site-header__left">
+                    <div part="logo" class="site-header__logo">
+                        <terra-icon name="nasa-logo" font-size="4rem"></terra-icon>
+                    </div>
+                    <div part="title" class="site-header__title">
+                        ${hasTitleSlot ? b`<slot name="title"></slot>` : b`<span>${this.siteName}</span>`}
+                    </div>
+                </div>
+                <div part="center" class="site-header__center">
+                    <slot name="center"></slot>
+                </div>
+                <div part="right" class="site-header__right">
+                    ${hasRightSlot ? b`<slot name="right"></slot>` : b`
+                              <button
+                                  class="site-header__search"
+                                  type="button"
+                                  title="Search"
+                                  aria-label="Search"
+                              >
+                                  <terra-icon
+                                      name="magnifying-glass"
+                                      library="heroicons"
+                                  ></terra-icon>
+                              </button>
+                          `}
+                </div>
+            </header>
+        `;
+  }
+};
+TerraSiteHeader.styles = [component_styles_default, site_header_styles_default];
+TerraSiteHeader.dependencies = { "terra-icon": TerraIcon };
+__decorateClass([
+  n({ attribute: "site-name" })
+], TerraSiteHeader.prototype, "siteName", 2);
+
+export {
+  TerraSiteHeader
+};

package/cdn/chunks/chunk.R5WMOIJK.js

@@ -0,0 +1,19 @@
+import {
+  TerraIcon
+} from "./chunk.S3QWAZET.js";
+import {
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/icon/icon.ts
+init_dirname();
+init_buffer();
+init_process();
+var icon_default = TerraIcon;
+TerraIcon.define("terra-icon");
+
+export {
+  icon_default
+};