@nasa-terra/components 0.0.195 → 0.0.196

package/cdn/chunks/chunk.SQOILSEV.js

@@ -1,266 +0,0 @@
-import {
-  alert_styles_default
-} from "./chunk.CFL5446I.js";
-import {
-  waitForEvent
-} from "./chunk.6P5ZFZXZ.js";
-import {
-  HasSlotController
-} from "./chunk.PACUQ7ID.js";
-import {
-  e
-} from "./chunk.KGXAA5I2.js";
-import {
-  watch
-} from "./chunk.MPVZOQYA.js";
-import {
-  TerraElement,
-  component_styles_default,
-  e as e2,
-  n,
-  r
-} from "./chunk.MUSV5WD7.js";
-import {
-  b
-} from "./chunk.RRCYT4LP.js";
-import {
-  __decorateClass,
-  init_buffer,
-  init_dirname,
-  init_process
-} from "./chunk.ZEOVK2FE.js";
-
-// src/components/alert/alert.component.ts
-init_dirname();
-init_buffer();
-init_process();
-var _TerraAlert = class _TerraAlert extends TerraElement {
-  constructor() {
-    super(...arguments);
-    this.hasSlotController = new HasSlotController(this, "icon", "suffix");
-    this.open = false;
-    this.closable = false;
-    this.variant = "information";
-    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 b`
-            <div
-                part="base"
-                class=${e({
-      alert: true,
-      "alert--open": this.open,
-      "alert--closable": this.closable,
-      "alert--has-countdown": !!this.countdown,
-      "alert--has-icon": this.hasSlotController.test("icon"),
-      "alert--information": this.variant === "information",
-      "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",
-      "alert--subtle": this.appearance === "subtle"
-    })}
-                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 ? b`
-                          <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 ? b`
-                          <div
-                              class=${e({
-      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([
-  e2('[part~="base"]')
-], _TerraAlert.prototype, "base", 2);
-__decorateClass([
-  e2(".alert__countdown-elapsed")
-], _TerraAlert.prototype, "countdownElement", 2);
-__decorateClass([
-  n({ type: Boolean, reflect: true })
-], _TerraAlert.prototype, "open", 2);
-__decorateClass([
-  n({ type: Boolean, reflect: true })
-], _TerraAlert.prototype, "closable", 2);
-__decorateClass([
-  n({ reflect: true })
-], _TerraAlert.prototype, "variant", 2);
-__decorateClass([
-  n({ reflect: true })
-], _TerraAlert.prototype, "appearance", 2);
-__decorateClass([
-  n({ type: Number })
-], _TerraAlert.prototype, "duration", 2);
-__decorateClass([
-  n({ type: String, reflect: true })
-], _TerraAlert.prototype, "countdown", 2);
-__decorateClass([
-  r()
-], _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/cdn/chunks/chunk.STFECIPE.js

@@ -1,32 +0,0 @@
-import {
-  TerraTab
-} from "./chunk.FPA7IQX3.js";
-import {
-  init_buffer,
-  init_dirname,
-  init_process
-} from "./chunk.ZEOVK2FE.js";
-
-// src/react/tab/index.ts
-init_dirname();
-init_buffer();
-init_process();
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "terra-tab";
-TerraTab.define("terra-tab");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: TerraTab,
-  react: React,
-  events: {
-    onTerraClose: "terra-close"
-  },
-  displayName: "TerraTab"
-});
-var tab_default = reactWrapper;
-
-export {
-  tab_default
-};

package/cdn/chunks/chunk.SUPNZXCZ.js

@@ -1,36 +0,0 @@
-import {
-  TerraToggle
-} from "./chunk.AWRZWD5U.js";
-import {
-  init_buffer,
-  init_dirname,
-  init_process
-} from "./chunk.ZEOVK2FE.js";
-
-// src/react/toggle/index.ts
-init_dirname();
-init_buffer();
-init_process();
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "terra-toggle";
-TerraToggle.define("terra-toggle");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: TerraToggle,
-  react: React,
-  events: {
-    onTerraBlur: "terra-blur",
-    onTerraChange: "terra-change",
-    onTerraInput: "terra-input",
-    onTerraFocus: "terra-focus",
-    onTerraInvalid: "terra-invalid"
-  },
-  displayName: "TerraToggle"
-});
-var toggle_default = reactWrapper;
-
-export {
-  toggle_default
-};

package/cdn/chunks/chunk.SYTFF46K.js

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

package/cdn/chunks/chunk.THXR2ES6.js

@@ -1,78 +0,0 @@
-import {
-  stepper_styles_default
-} from "./chunk.B42N7DPY.js";
-import {
-  e
-} from "./chunk.KGXAA5I2.js";
-import {
-  TerraElement,
-  component_styles_default,
-  e as e2,
-  n
-} from "./chunk.MUSV5WD7.js";
-import {
-  b
-} from "./chunk.RRCYT4LP.js";
-import {
-  __decorateClass,
-  init_buffer,
-  init_dirname,
-  init_process
-} from "./chunk.ZEOVK2FE.js";
-
-// src/components/stepper/stepper.component.ts
-init_dirname();
-init_buffer();
-init_process();
-var TerraStepper = class extends TerraElement {
-  constructor() {
-    super(...arguments);
-    this.variant = "default";
-  }
-  handleSlotChange() {
-    const slottedElements = [
-      ...this.defaultSlot.assignedElements({ flatten: true })
-    ];
-    slottedElements.forEach((el, index) => {
-      const step = findStep(el);
-      if (step) {
-        step.toggleAttribute("data-terra-stepper__step", true);
-        step.toggleAttribute("data-terra-stepper__step--first", index === 0);
-        step.toggleAttribute(
-          "data-terra-stepper__step--last",
-          index === slottedElements.length - 1
-        );
-      }
-    });
-  }
-  render() {
-    return b`
-            <div
-                part="base"
-                class=${e({
-      stepper: true,
-      "stepper--default": this.variant === "default",
-      "stepper--condensed": this.variant === "condensed"
-    })}
-            >
-                <slot @slotchange=${this.handleSlotChange}></slot>
-            </div>
-        `;
-  }
-};
-TerraStepper.styles = [component_styles_default, stepper_styles_default];
-__decorateClass([
-  e2("slot")
-], TerraStepper.prototype, "defaultSlot", 2);
-__decorateClass([
-  n({ reflect: true })
-], TerraStepper.prototype, "variant", 2);
-function findStep(el) {
-  var _a;
-  const selector = "terra-stepper-step";
-  return (_a = el.closest(selector)) != null ? _a : el.querySelector(selector);
-}
-
-export {
-  TerraStepper
-};

package/cdn/chunks/chunk.TMF5HOD4.js

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

package/cdn/chunks/chunk.TQUM32MX.js

@@ -1,224 +0,0 @@
-import {
-  menu_item_styles_default
-} from "./chunk.YYVKZLP3.js";
-import {
-  SubmenuController
-} from "./chunk.CLOSWCHA.js";
-import {
-  TerraPopup
-} from "./chunk.KGM767Y2.js";
-import {
-  TerraLoader
-} from "./chunk.FJOMHPCP.js";
-import {
-  HasSlotController,
-  getTextContent
-} from "./chunk.PACUQ7ID.js";
-import {
-  e
-} from "./chunk.KGXAA5I2.js";
-import {
-  TerraIcon
-} from "./chunk.YL6WAIUW.js";
-import {
-  watch
-} from "./chunk.MPVZOQYA.js";
-import {
-  TerraElement,
-  component_styles_default,
-  e as e2,
-  n
-} from "./chunk.MUSV5WD7.js";
-import {
-  b
-} from "./chunk.RRCYT4LP.js";
-import {
-  __decorateClass,
-  init_buffer,
-  init_dirname,
-  init_process
-} from "./chunk.ZEOVK2FE.js";
-
-// src/components/menu-item/menu-item.component.ts
-init_dirname();
-init_buffer();
-init_process();
-var TerraMenuItem = class extends TerraElement {
-  constructor() {
-    super(...arguments);
-    this.type = "normal";
-    this.checked = false;
-    this.value = "";
-    this.loading = false;
-    this.disabled = false;
-    this.hasSlotController = new HasSlotController(this, "submenu");
-    this.submenuController = new SubmenuController(
-      this,
-      this.hasSlotController
-    );
-    this.handleHostClick = (event) => {
-      if (this.disabled) {
-        event.preventDefault();
-        event.stopImmediatePropagation();
-      }
-    };
-    this.handleMouseOver = (event) => {
-      this.focus();
-      event.stopPropagation();
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("click", this.handleHostClick);
-    this.addEventListener("mouseover", this.handleMouseOver);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener("click", this.handleHostClick);
-    this.removeEventListener("mouseover", this.handleMouseOver);
-  }
-  handleDefaultSlotChange() {
-    const textLabel = this.getTextLabel();
-    if (typeof this.cachedTextLabel === "undefined") {
-      this.cachedTextLabel = textLabel;
-      return;
-    }
-    if (textLabel !== this.cachedTextLabel) {
-      this.cachedTextLabel = textLabel;
-      this.emit("slotchange", {
-        bubbles: true,
-        composed: false,
-        cancelable: false
-      });
-    }
-  }
-  handleCheckedChange() {
-    if (this.checked && this.type !== "checkbox") {
-      this.checked = false;
-      console.error(
-        'The checked attribute can only be used on menu items with type="checkbox"',
-        this
-      );
-      return;
-    }
-    if (this.type === "checkbox") {
-      this.setAttribute("aria-checked", this.checked ? "true" : "false");
-    } else {
-      this.removeAttribute("aria-checked");
-    }
-  }
-  handleDisabledChange() {
-    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
-  }
-  handleTypeChange() {
-    if (this.type === "checkbox") {
-      this.setAttribute("role", "menuitemcheckbox");
-      this.setAttribute("aria-checked", this.checked ? "true" : "false");
-    } else {
-      this.setAttribute("role", "menuitem");
-      this.removeAttribute("aria-checked");
-    }
-  }
-  /** Returns a text label based on the contents of the menu item's default slot. */
-  getTextLabel() {
-    return getTextContent(this.defaultSlot);
-  }
-  isSubmenu() {
-    return this.hasSlotController.test("submenu");
-  }
-  render() {
-    const isRtl = false;
-    const isSubmenuExpanded = this.submenuController.isExpanded();
-    return b`
-            <div
-                id="anchor"
-                part="base"
-                class=${e({
-      "menu-item": true,
-      "menu-item--rtl": isRtl,
-      "menu-item--checked": this.checked,
-      "menu-item--disabled": this.disabled,
-      "menu-item--loading": this.loading,
-      "menu-item--has-submenu": this.isSubmenu(),
-      "menu-item--submenu-expanded": isSubmenuExpanded
-    })}
-                ?aria-haspopup="${this.isSubmenu()}"
-                ?aria-expanded="${isSubmenuExpanded ? true : false}"
-            >
-                <span part="checked-icon" class="menu-item__check">
-                    <terra-icon
-                        name="solid-check"
-                        library="heroicons"
-                        aria-hidden="true"
-                    ></terra-icon>
-                </span>
-
-                <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
-
-                <slot
-                    part="label"
-                    class="menu-item__label"
-                    @slotchange=${this.handleDefaultSlotChange}
-                ></slot>
-
-                <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
-
-                <span part="submenu-icon" class="menu-item__chevron">
-                    <terra-icon
-                        name=${isRtl ? "chevron-left" : "chevron-right"}
-                        library="system"
-                        aria-hidden="true"
-                    ></terra-icon>
-                </span>
-
-                ${this.submenuController.renderSubmenu()}
-                ${this.loading ? b`
-                          <terra-loader
-                              part="spinner"
-                              exportparts="base:spinner__base"
-                          ></terra-loader>
-                      ` : ""}
-            </div>
-        `;
-  }
-};
-TerraMenuItem.styles = [component_styles_default, menu_item_styles_default];
-TerraMenuItem.dependencies = {
-  "terra-icon": TerraIcon,
-  "terra-popup": TerraPopup,
-  "terra-loader": TerraLoader
-};
-__decorateClass([
-  e2("slot:not([name])")
-], TerraMenuItem.prototype, "defaultSlot", 2);
-__decorateClass([
-  e2(".menu-item")
-], TerraMenuItem.prototype, "menuItem", 2);
-__decorateClass([
-  n()
-], TerraMenuItem.prototype, "type", 2);
-__decorateClass([
-  n({ type: Boolean, reflect: true })
-], TerraMenuItem.prototype, "checked", 2);
-__decorateClass([
-  n()
-], TerraMenuItem.prototype, "value", 2);
-__decorateClass([
-  n({ type: Boolean, reflect: true })
-], TerraMenuItem.prototype, "loading", 2);
-__decorateClass([
-  n({ type: Boolean, reflect: true })
-], TerraMenuItem.prototype, "disabled", 2);
-__decorateClass([
-  watch("checked")
-], TerraMenuItem.prototype, "handleCheckedChange", 1);
-__decorateClass([
-  watch("disabled")
-], TerraMenuItem.prototype, "handleDisabledChange", 1);
-__decorateClass([
-  watch("type")
-], TerraMenuItem.prototype, "handleTypeChange", 1);
-
-export {
-  TerraMenuItem
-};