@nasa-terra/components 0.0.67 → 0.0.68

package/dist/chunks/chunk.UZZDJISQ.js

@@ -0,0 +1,258 @@
+import {
+  HasSlotController
+} from "./chunk.HWZP2UTW.js";
+import {
+  alert_styles_default
+} from "./chunk.YXLIUMJM.js";
+import {
+  watch
+} from "./chunk.DTUHBE3U.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.O6SXSDFR.js";
+import {
+  __decorateClass
+} from "./chunk.TVFCHGU3.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";
+
+// src/internal/event.ts
+function waitForEvent(el, eventName) {
+  return new Promise((resolve) => {
+    function done(event) {
+      if (event.target === el) {
+        el.removeEventListener(eventName, done);
+        resolve();
+      }
+    }
+    el.addEventListener(eventName, done);
+  });
+}
+
+// src/components/alert/alert.component.ts
+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.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"
+    })}
+                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({ 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.V2Z7ZBTD.js

@@ -0,0 +1,293 @@
+// src/components/combobox/combobox.styles.ts
+import { css } from "lit";
+var combobox_styles_default = css`
+    :host {
+        --color-neutral--100: #f7f7f7; /* Retain these 2 local color variables rather than HDS references because color-carbon-XX scale flips with light/dark theme */
+        --color-neutral--200: #d1d1d1;
+
+        --label-height: 1.8125rem;
+        --help-height: 1.8125rem;
+        --host-height: 5.8125rem;
+
+        block-size: var(--terra-block-size, 2.1875rem);
+        box-sizing: border-box;
+        color: #1b1b1b; /* HDS uses this color for body text but does not have a defined color in the HDS palette */
+        contain: layout size style;
+        contain-intrinsic-size: var(--terra-inline-size, 100%)
+            calc(33vh + var(--terra-block-size, 2.1875rem));
+        display: block;
+        font-family: var(--terra-font-family--public-sans);
+        height: var(--terra-block-size, var(--host-height));
+        inline-size: var(--terra-inline-size, 100%);
+        position: relative;
+    }
+
+    :host([hide-help]) {
+        height: calc(
+            var(--terra-block-size, var(--host-height)) - var(--help-height)
+        );
+    }
+
+    :host([hide-label]) {
+        height: calc(
+            var(--terra-block-size, var(--host-height)) - var(--label-height)
+        );
+    }
+
+    :host([hide-help][hide-label]) {
+        height: calc(
+            var(--terra-block-size, var(--host-height)) - var(--help-height) - var(
+                    --label-height
+                )
+        );
+    }
+
+    * {
+        box-sizing: inherit;
+    }
+
+    .search-input-group {
+        block-size: 100%;
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    .combobox {
+        block-size: var(--terra-block-size, 2.1875rem);
+        flex: 1 1 auto;
+        font-size: 1rem;
+        padding-inline: 0.5rem;
+        transition:
+            background-color 0.2s ease,
+            border-color 0.2s ease;
+    }
+
+    .combobox::placeholder {
+        color: var(--terra-color-carbon-60);
+    }
+
+    .combobox:focus {
+        border-color: var(--terra-color-carbon-40);
+        outline: 0;
+    }
+
+    .search-input-group:has(.combobox:not(:focus)) + .search-results[open] {
+        border-color: var(--terra-color-carbon-30);
+    }
+
+    .combobox-button {
+        position: absolute;
+        right: 0;
+        z-index: 2;
+        margin-block: 0;
+        margin-inline: 0;
+        outline: 0;
+        transition:
+            background-color 0.2s ease,
+            border-color 0.2s ease;
+    }
+
+    .combobox-button[aria-expanded='true'] .chevron {
+        rotate: -0.5turn;
+    }
+
+    .button-icon {
+        height: 1rem;
+        width: 1rem;
+    }
+
+    .chevron {
+        transition: rotate 0.2s ease;
+        will-change: rotate;
+    }
+
+    .spinner {
+        transform-origin: center;
+        animation: spin 2s linear infinite;
+    }
+
+    .spinner circle {
+        stroke-linecap: round;
+        animation: vary-stroke 1.5s ease-in-out infinite;
+    }
+
+    .search-help {
+        bottom: 0;
+        color: var(--terra-color-carbon-60);
+        flex: 1 1 100%;
+        font-size: var(--terra-font-size-small);
+        line-height: var(--terra-line-height-normal);
+        margin-block: 0;
+        position: absolute;
+        bottom: -10px;
+    }
+
+    .external-link {
+        fill: currentColor;
+        vertical-align: middle;
+    }
+
+    .search-results {
+        background-color: var(--terra-color-spacesuit-white);
+        block-size: calc(33vh - var(--terra-block-size, 2.1875rem));
+        border-block-end: 2px solid transparent;
+        border-inline: 2px solid transparent;
+        contain: strict;
+        contain-intrinsic-size: var(--terra-inline-size, 100%)
+            calc(33vh - var(--terra-block-size, 2.1875rem));
+        content-visibility: hidden;
+        left: 0;
+        margin-block: 0;
+        margin-inline: 0;
+        max-height: 0;
+        opacity: 0;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        padding-block: 0.5rem;
+        padding-inline: 0px;
+        position: absolute;
+        right: 0;
+        visibility: hidden;
+        transition:
+            background-color 0.2s ease,
+            border-color 0.2s ease;
+    }
+
+    .search-results[open] {
+        border-color: var(--terra-color-carbon-40);
+        content-visibility: auto;
+        max-height: calc(33vh - var(--terra-block-size, 2.1875rem));
+        opacity: 1;
+        visibility: visible;
+    }
+
+    .search-results .updating {
+        font-size: var(--terra-font-size-x-large);
+        padding-block: 4rem;
+        text-align: center;
+    }
+
+    .search-results .error {
+        color: var(--terra-color-nasa-red);
+        font-family: var(--terra-font-family--dm-mono);
+        padding-block: 2rem;
+    }
+
+    .listbox-option-group {
+        padding-inline: 0.5rem;
+        padding-block: 1rem 0.5rem;
+    }
+
+    .group-title {
+        padding-inline: 0.5rem;
+        font-family: var(--terra-font-family--inter);
+        font-weight: 700;
+        margin-block: 0;
+    }
+
+    .listbox-option-group ul {
+        padding-left: 0px;
+    }
+
+    .listbox-option {
+        cursor: pointer;
+        list-style: none;
+        position: relative;
+        padding-left: 2rem;
+    }
+
+    .listbox-option:hover,
+    .listbox-option[aria-selected='true'] {
+        transition: background-color 0.2s ease;
+    }
+
+    @media (prefers-reduced-motion) {
+        .button-icon {
+            transition: rotate 0s ease;
+        }
+
+        .search-results {
+            scroll-behavior: auto;
+        }
+    }
+
+    @keyframes spin {
+        to {
+            transform: rotate(1turn);
+        }
+    }
+
+    @keyframes vary-stroke {
+        0% {
+            stroke-dasharray: 0 150;
+            stroke-dashoffset: 0;
+        }
+        47.5% {
+            stroke-dasharray: 42 150;
+            stroke-dashoffset: -16;
+        }
+        95%,
+        100% {
+            stroke-dasharray: 42 150;
+            stroke-dashoffset: -59;
+        }
+    }
+
+    /* General reset for skeleton elements */
+    .skeleton,
+    .skeleton * {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        box-sizing: border-box;
+    }
+
+    /* Styling for the skeleton groups */
+    .skeleton.listbox-option-group {
+        padding: 0.25rem;
+        margin: 0.5rem 0;
+        background: var(--color-neutral--100); /* Light background for the group */
+    }
+
+    /* Styling for the title in each group */
+    .skeleton-title {
+        display: flex;
+        height: 1.25rem;
+        width: 80%; /* Slightly longer than before */
+        background-color: var(--color-neutral--100);
+        margin-bottom: 10px;
+    }
+
+    /* Styling for each option inside the group */
+    .skeleton .listbox-option {
+        height: 1rem;
+        width: 60%; /* Shorter width to differentiate from title */
+        background-color: var(--color-neutral--200);
+        margin-top: 5px;
+        margin-left: 1.5rem;
+    }
+
+    /* Keyframes for the animation */
+    @keyframes pulse {
+        0%,
+        100% {
+            background-color: var(
+                --terra-color-neutral--200,
+                var(--color-neutral--200)
+            );
+        }
+        50% {
+            background-color: var(--color-neutral--100);
+        }
+    }
+
+    /* Applying the animation to simulate loading */
+    .skeleton-title,
+    .skeleton .listbox-option {
+        animation: pulse 2s infinite ease-in-out;
+    }
+`;
+
+export {
+  combobox_styles_default
+};