@nasa-terra/components 0.0.197 → 0.0.199

package/cdn/chunks/chunk.CJZNLZ5M.js

@@ -1,190 +0,0 @@
-import {
-  date_range_slider_styles_default
-} from "./chunk.CGMD2LPM.js";
-import {
-  PipsMode,
-  nouislider_default
-} from "./chunk.HBHLBI3N.js";
-import {
-  mergeTooltips
-} from "./chunk.ZHCOO7YL.js";
-import {
-  formatDate,
-  isValidDate
-} from "./chunk.X2BIJLHO.js";
-import {
-  watch
-} from "./chunk.MPVZOQYA.js";
-import {
-  TerraElement,
-  component_styles_default,
-  e,
-  n
-} from "./chunk.W56KFXW3.js";
-import {
-  b
-} from "./chunk.RRCYT4LP.js";
-import {
-  __decorateClass,
-  init_buffer,
-  init_dirname,
-  init_process
-} from "./chunk.ZEOVK2FE.js";
-
-// src/components/date-range-slider/date-range-slider.component.ts
-init_dirname();
-init_buffer();
-init_process();
-var TerraDateRangeSlider = class extends TerraElement {
-  constructor() {
-    super(...arguments);
-    this.timeScale = "daily";
-    this.disabled = false;
-    this.hasPips = true;
-  }
-  updateSlider() {
-    this.renderSlider();
-  }
-  disabledChanged() {
-    var _a, _b, _c, _d;
-    this.disabled ? (_b = (_a = this.slider) == null ? void 0 : _a.noUiSlider) == null ? void 0 : _b.disable() : (_d = (_c = this.slider) == null ? void 0 : _c.noUiSlider) == null ? void 0 : _d.enable();
-  }
-  firstUpdated() {
-    this.renderSlider();
-  }
-  renderSlider() {
-    var _a;
-    if (!this.slider) {
-      return;
-    }
-    (_a = this.slider.noUiSlider) == null ? void 0 : _a.destroy();
-    if (!isValidDate(this.minDate) || !isValidDate(this.maxDate)) {
-      this.renderEmptySlider();
-      this.minDate && !isValidDate(this.minDate) && console.error("Invalid min date provided");
-      this.maxDate && !isValidDate(this.maxDate) && console.error("Invalid max date provided");
-      return;
-    }
-    const minDate = new Date(this.minDate);
-    const maxDate = new Date(this.maxDate);
-    const startDate = new Date(
-      isValidDate(this.startDate) ? this.startDate : this.minDate
-    );
-    const endDate = new Date(
-      isValidDate(this.endDate) ? this.endDate : this.maxDate
-    );
-    minDate.setUTCHours(0, 0, 0, 0);
-    startDate.setUTCHours(0, 0, 0, 0);
-    maxDate.setUTCHours(23, 59, 59, 999);
-    endDate.setUTCHours(23, 59, 59, 999);
-    const sliderOptions = {
-      range: {
-        // convert to milliseconds to define a range
-        min: minDate.getTime(),
-        max: maxDate.getTime()
-      },
-      behaviour: "drag",
-      step: this._getStep(),
-      start: [startDate.getTime(), endDate.getTime()],
-      // defaults to either the given start/end dates or the full date range (min/max date)
-      tooltips: [true, true],
-      // for each handle, choose whether to show a tooltip
-      connect: true,
-      // whether to connect the handles with a colorized bar
-      pips: {
-        mode: PipsMode.Range,
-        density: -1,
-        format: this._getSliderFormatter()
-      },
-      format: this._getSliderFormatter()
-    };
-    nouislider_default.create(this.slider, sliderOptions);
-    mergeTooltips(this.slider);
-    this.slider.noUiSlider.on("change", (values) => {
-      this.emit("terra-date-range-change", {
-        detail: {
-          startDate: this._formatDate(values[0]),
-          endDate: this._formatDate(values[1])
-        }
-      });
-    });
-  }
-  renderEmptySlider() {
-    nouislider_default.create(this.slider, {
-      start: [0, 0],
-      range: {
-        min: 0,
-        max: 0
-      }
-    });
-  }
-  _getStep() {
-    const oneMinuteMillis = 60 * 1e3;
-    const oneHourMillis = 60 * oneMinuteMillis;
-    const oneDayMillis = 24 * oneHourMillis;
-    switch (this.timeScale) {
-      case "half-hourly":
-        return 30 * oneMinuteMillis;
-      case "hourly":
-        return oneHourMillis;
-      default:
-        return oneDayMillis;
-    }
-  }
-  _getSliderFormatter() {
-    return {
-      to: (value) => {
-        return this._formatDate(value);
-      },
-      from: (value) => {
-        return Number(value);
-      }
-    };
-  }
-  _formatDate(date) {
-    const dateFormat = this.timeScale === "daily" ? "yyyy-MM-dd" : "yyyy-MM-dd HH:mm";
-    return formatDate(new Date(date), dateFormat);
-  }
-  render() {
-    const containerClass = `container${this.hasPips ? " hasPips" : ""}`;
-    return b`
-            <div class="${containerClass}">
-                <div part="slider"></div>
-            </div>
-        `;
-  }
-};
-TerraDateRangeSlider.styles = [component_styles_default, date_range_slider_styles_default];
-__decorateClass([
-  e('[part~="slider"]')
-], TerraDateRangeSlider.prototype, "slider", 2);
-__decorateClass([
-  n({ attribute: "time-scale" })
-], TerraDateRangeSlider.prototype, "timeScale", 2);
-__decorateClass([
-  n({ attribute: "min-date" })
-], TerraDateRangeSlider.prototype, "minDate", 2);
-__decorateClass([
-  n({ attribute: "max-date" })
-], TerraDateRangeSlider.prototype, "maxDate", 2);
-__decorateClass([
-  n({ attribute: "start-date" })
-], TerraDateRangeSlider.prototype, "startDate", 2);
-__decorateClass([
-  n({ attribute: "end-date" })
-], TerraDateRangeSlider.prototype, "endDate", 2);
-__decorateClass([
-  n({ type: Boolean, reflect: true })
-], TerraDateRangeSlider.prototype, "disabled", 2);
-__decorateClass([
-  n({ type: Boolean, reflect: true, attribute: "has-pips" })
-], TerraDateRangeSlider.prototype, "hasPips", 2);
-__decorateClass([
-  watch(["startDate", "endDate", "minDate", "maxDate"])
-], TerraDateRangeSlider.prototype, "updateSlider", 1);
-__decorateClass([
-  watch("disabled")
-], TerraDateRangeSlider.prototype, "disabledChanged", 1);
-
-export {
-  TerraDateRangeSlider
-};

package/cdn/chunks/chunk.CLL4XXBG.js

@@ -1,188 +0,0 @@
-import {
-  toast_styles_default
-} from "./chunk.NJ3TPG7D.js";
-import {
-  TerraAlert
-} from "./chunk.35W6TJ7F.js";
-import {
-  TerraElement,
-  component_styles_default,
-  n
-} from "./chunk.W56KFXW3.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 = "information";
-    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 'information'.
-   * @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 = "information", 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.CLOSWCHA.js

@@ -1,279 +0,0 @@
-import {
-  e,
-  n
-} from "./chunk.APOEQA6N.js";
-import {
-  b
-} from "./chunk.RRCYT4LP.js";
-import {
-  init_buffer,
-  init_dirname,
-  init_process
-} from "./chunk.ZEOVK2FE.js";
-
-// src/components/menu-item/submenu-controller.ts
-init_dirname();
-init_buffer();
-init_process();
-var SubmenuController = class {
-  constructor(host, hasSlotController) {
-    this.popupRef = e();
-    this.enableSubmenuTimer = -1;
-    this.isConnected = false;
-    this.isPopupConnected = false;
-    this.skidding = 0;
-    this.submenuOpenDelay = 100;
-    // Set the safe triangle cursor position
-    this.handleMouseMove = (event) => {
-      this.host.style.setProperty("--safe-triangle-cursor-x", `${event.clientX}px`);
-      this.host.style.setProperty("--safe-triangle-cursor-y", `${event.clientY}px`);
-    };
-    this.handleMouseOver = () => {
-      if (this.hasSlotController.test("submenu")) {
-        this.enableSubmenu();
-      }
-    };
-    // Focus on the first menu-item of a submenu.
-    this.handleKeyDown = (event) => {
-      switch (event.key) {
-        case "Escape":
-        case "Tab":
-          this.disableSubmenu();
-          break;
-        case "ArrowLeft":
-          if (event.target !== this.host) {
-            event.preventDefault();
-            event.stopPropagation();
-            this.host.focus();
-            this.disableSubmenu();
-          }
-          break;
-        case "ArrowRight":
-        case "Enter":
-        case " ":
-          this.handleSubmenuEntry(event);
-          break;
-        default:
-          break;
-      }
-    };
-    this.handleClick = (event) => {
-      var _a;
-      if (event.target === this.host) {
-        event.preventDefault();
-        event.stopPropagation();
-      } else if (event.target instanceof Element && (event.target.tagName === "terra-menu-item" || ((_a = event.target.role) == null ? void 0 : _a.startsWith("menuitem")))) {
-        this.disableSubmenu();
-      }
-    };
-    // Close this submenu on focus outside of the parent or any descendants.
-    this.handleFocusOut = (event) => {
-      if (event.relatedTarget && event.relatedTarget instanceof Element && this.host.contains(event.relatedTarget)) {
-        return;
-      }
-      this.disableSubmenu();
-    };
-    // Prevent the parent menu-item from getting focus on mouse movement on the submenu
-    this.handlePopupMouseover = (event) => {
-      event.stopPropagation();
-    };
-    // Set the safe triangle values for the submenu when the position changes
-    this.handlePopupReposition = () => {
-      const submenuSlot = this.host.renderRoot.querySelector("slot[name='submenu']");
-      const menu = submenuSlot == null ? void 0 : submenuSlot.assignedElements({ flatten: true }).filter((el) => el.localName === "terra-menu")[0];
-      const isRtl = getComputedStyle(this.host).direction === "rtl";
-      if (!menu) {
-        return;
-      }
-      const { left, top, width, height } = menu.getBoundingClientRect();
-      this.host.style.setProperty(
-        "--safe-triangle-submenu-start-x",
-        `${isRtl ? left + width : left}px`
-      );
-      this.host.style.setProperty("--safe-triangle-submenu-start-y", `${top}px`);
-      this.host.style.setProperty(
-        "--safe-triangle-submenu-end-x",
-        `${isRtl ? left + width : left}px`
-      );
-      this.host.style.setProperty(
-        "--safe-triangle-submenu-end-y",
-        `${top + height}px`
-      );
-    };
-    ;
-    (this.host = host).addController(this);
-    this.hasSlotController = hasSlotController;
-  }
-  hostConnected() {
-    if (this.hasSlotController.test("submenu") && !this.host.disabled) {
-      this.addListeners();
-    }
-  }
-  hostDisconnected() {
-    this.removeListeners();
-  }
-  hostUpdated() {
-    if (this.hasSlotController.test("submenu") && !this.host.disabled) {
-      this.addListeners();
-      this.updateSkidding();
-    } else {
-      this.removeListeners();
-    }
-  }
-  addListeners() {
-    if (!this.isConnected) {
-      this.host.addEventListener("mousemove", this.handleMouseMove);
-      this.host.addEventListener("mouseover", this.handleMouseOver);
-      this.host.addEventListener("keydown", this.handleKeyDown);
-      this.host.addEventListener("click", this.handleClick);
-      this.host.addEventListener("focusout", this.handleFocusOut);
-      this.isConnected = true;
-    }
-    if (!this.isPopupConnected) {
-      if (this.popupRef.value) {
-        this.popupRef.value.addEventListener(
-          "mouseover",
-          this.handlePopupMouseover
-        );
-        this.popupRef.value.addEventListener(
-          "terra-reposition",
-          this.handlePopupReposition
-        );
-        this.isPopupConnected = true;
-      }
-    }
-  }
-  removeListeners() {
-    if (this.isConnected) {
-      this.host.removeEventListener("mousemove", this.handleMouseMove);
-      this.host.removeEventListener("mouseover", this.handleMouseOver);
-      this.host.removeEventListener("keydown", this.handleKeyDown);
-      this.host.removeEventListener("click", this.handleClick);
-      this.host.removeEventListener("focusout", this.handleFocusOut);
-      this.isConnected = false;
-    }
-    if (this.isPopupConnected) {
-      if (this.popupRef.value) {
-        this.popupRef.value.removeEventListener(
-          "mouseover",
-          this.handlePopupMouseover
-        );
-        this.popupRef.value.removeEventListener(
-          "terra-reposition",
-          this.handlePopupReposition
-        );
-        this.isPopupConnected = false;
-      }
-    }
-  }
-  handleSubmenuEntry(event) {
-    const submenuSlot = this.host.renderRoot.querySelector("slot[name='submenu']");
-    if (!submenuSlot) {
-      console.error(
-        "Cannot activate a submenu if no corresponding menuitem can be found.",
-        this
-      );
-      return;
-    }
-    let menuItems = null;
-    for (const elt of submenuSlot.assignedElements()) {
-      menuItems = elt.querySelectorAll("terra-menu-item, [role^='menuitem']");
-      if (menuItems.length !== 0) {
-        break;
-      }
-    }
-    if (!menuItems || menuItems.length === 0) {
-      return;
-    }
-    menuItems[0].setAttribute("tabindex", "0");
-    for (let i = 1; i !== menuItems.length; ++i) {
-      menuItems[i].setAttribute("tabindex", "-1");
-    }
-    if (this.popupRef.value) {
-      event.preventDefault();
-      event.stopPropagation();
-      if (this.popupRef.value.active) {
-        if (menuItems[0] instanceof HTMLElement) {
-          menuItems[0].focus();
-        }
-      } else {
-        this.enableSubmenu(false);
-        this.host.updateComplete.then(() => {
-          if (menuItems[0] instanceof HTMLElement) {
-            menuItems[0].focus();
-          }
-        });
-        this.host.requestUpdate();
-      }
-    }
-  }
-  setSubmenuState(state) {
-    if (this.popupRef.value) {
-      if (this.popupRef.value.active !== state) {
-        this.popupRef.value.active = state;
-        this.host.requestUpdate();
-      }
-    }
-  }
-  // Shows the submenu. Supports disabling the opening delay, e.g. for keyboard events that want to set the focus to the
-  // newly opened menu.
-  enableSubmenu(delay = true) {
-    if (delay) {
-      window.clearTimeout(this.enableSubmenuTimer);
-      this.enableSubmenuTimer = window.setTimeout(() => {
-        this.setSubmenuState(true);
-      }, this.submenuOpenDelay);
-    } else {
-      this.setSubmenuState(true);
-    }
-  }
-  disableSubmenu() {
-    window.clearTimeout(this.enableSubmenuTimer);
-    this.setSubmenuState(false);
-  }
-  // Calculate the space the top of a menu takes-up, for aligning the popup menu-item with the activating element.
-  updateSkidding() {
-    var _a;
-    if (!((_a = this.host.parentElement) == null ? void 0 : _a.computedStyleMap)) {
-      return;
-    }
-    const styleMap = this.host.parentElement.computedStyleMap();
-    const attrs = ["padding-top", "border-top-width", "margin-top"];
-    const skidding = attrs.reduce((accumulator, attr) => {
-      var _a2;
-      const styleValue = (_a2 = styleMap.get(attr)) != null ? _a2 : new CSSUnitValue(0, "px");
-      const unitValue = styleValue instanceof CSSUnitValue ? styleValue : new CSSUnitValue(0, "px");
-      const pxValue = unitValue.to("px");
-      return accumulator - pxValue.value;
-    }, 0);
-    this.skidding = skidding;
-  }
-  isExpanded() {
-    return this.popupRef.value ? this.popupRef.value.active : false;
-  }
-  renderSubmenu() {
-    const isRtl = getComputedStyle(this.host).direction === "rtl";
-    if (!this.isConnected) {
-      return b` <slot name="submenu" hidden></slot> `;
-    }
-    return b`
-            <terra-popup
-                ${n(this.popupRef)}
-                placement=${isRtl ? "left-start" : "right-start"}
-                anchor="anchor"
-                flip
-                flip-fallback-strategy="best-fit"
-                skidding="${this.skidding}"
-                strategy="fixed"
-                auto-size="vertical"
-                auto-size-padding="10"
-            >
-                <slot name="submenu"></slot>
-            </terra-popup>
-        `;
-  }
-};
-
-export {
-  SubmenuController
-};

package/cdn/chunks/chunk.CLYZO6RS.js

@@ -1,19 +0,0 @@
-import {
-  TerraSkeleton
-} from "./chunk.D7P7KTFB.js";
-import {
-  init_buffer,
-  init_dirname,
-  init_process
-} from "./chunk.ZEOVK2FE.js";
-
-// src/components/skeleton/skeleton.ts
-init_dirname();
-init_buffer();
-init_process();
-var skeleton_default = TerraSkeleton;
-TerraSkeleton.define("terra-skeleton");
-
-export {
-  skeleton_default
-};