@nasa-terra/components 0.0.68 → 0.0.70

package/cdn/chunks/chunk.TVFCHGU3.js

@@ -1,76 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __restKey = (key) => typeof key === "symbol" ? key : key + "";
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp(target, key, result);
-  return result;
-};
-var __accessCheck = (obj, member, msg) => {
-  if (!member.has(obj))
-    throw TypeError("Cannot " + msg);
-};
-var __privateGet = (obj, member, getter) => {
-  __accessCheck(obj, member, "read from private field");
-  return getter ? getter.call(obj) : member.get(obj);
-};
-var __privateAdd = (obj, member, value) => {
-  if (member.has(obj))
-    throw TypeError("Cannot add the same private member more than once");
-  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-};
-var __privateSet = (obj, member, value, setter) => {
-  __accessCheck(obj, member, "write to private field");
-  setter ? setter.call(obj, value) : member.set(obj, value);
-  return value;
-};
-var __privateMethod = (obj, member, method) => {
-  __accessCheck(obj, member, "access private method");
-  return method;
-};
-
-export {
-  __spreadValues,
-  __spreadProps,
-  __restKey,
-  __objRest,
-  __decorateClass,
-  __privateGet,
-  __privateAdd,
-  __privateSet,
-  __privateMethod
-};

package/cdn/chunks/chunk.UDCRU3NE.js

@@ -1,120 +0,0 @@
-import {
-  loader_styles_default
-} from "./chunk.3GLMJLNY.js";
-import {
-  TerraElement,
-  component_styles_default
-} from "./chunk.O6SXSDFR.js";
-import {
-  __decorateClass
-} from "./chunk.TVFCHGU3.js";
-
-// src/components/loader/loader.component.ts
-import { property, state } from "lit/decorators.js";
-import { html, nothing } from "lit";
-import { classMap } from "lit/directives/class-map.js";
-var TerraLoader = class extends TerraElement {
-  constructor() {
-    super(...arguments);
-    this.variant = "large";
-    this.percent = "0";
-    this.indeterminate = false;
-    this._currentPercent = 0;
-  }
-  formatPercent(percent) {
-    if (parseInt(percent) > 100) {
-      percent = "100";
-    }
-    return parseInt(percent) > 0 ? percent + "%" : "";
-  }
-  render() {
-    this._currentPercent = parseInt(this.percent);
-    return html`
-            <div
-                class=${classMap({
-      loader: true,
-      "loader--small": this.variant === "small",
-      "loader--large": this.variant === "large",
-      "loader--orbit": this.variant === "orbit"
-    })}
-                aria-valuenow=${this.formatPercent(this.percent)}
-                role="progressbar"
-                tabindex="-1"
-            >
-                ${this.variant === "large" || this.variant === "orbit" ? html`
-                          <div
-                              class="percent ${this.variant == "orbit" ? "number-14" : "number-11"}"
-                          >
-                              ${this.formatPercent(this.percent)}
-                          </div>
-                      ` : nothing}
-                ${this.variant === "orbit" ? html`
-                          <svg viewBox="0 0 160 160">
-                              <circle class="planet" />
-
-                              <!-- total length of orbit ellipse = 298.2393493652344 -->
-                              <path
-                                  id="orbit"
-                                  d="M 53.528 96.775 C 73.584 124.975 100.654 140.601 115.393 130.137 C 132.613 117.912 119.246 79.55 105.434 60.525 C 90.233 39.587 60.506 18.543 44.962 30.114 C 29.456 41.657 38.219 75.25 53.528 96.775 Z"
-                              >
-                                  <animate
-                                      attributeName="stroke-dashoffset"
-                                      begin="-0.25s"
-                                      from="300"
-                                      to="0"
-                                      dur="1.5s"
-                                      repeatCount="indefinite"
-                                  />
-                              </path>
-
-                              <circle class="moon">
-                                  <animateMotion
-                                      begin="0s"
-                                      dur="1.5s"
-                                      repeatCount="indefinite"
-                                  >
-                                      <mpath href="#orbit"></mpath>
-                                  </animateMotion>
-                              </circle>
-
-                              <path
-                                  id="mask"
-                                  class="planet"
-                                  d="M 130.176 80.041 C 130.176 41.552 88.321 17.697 55.544 36.652 C 40.081 45.594 30.865 62.428 30.47 80.094 L 130.176 80.041 Z"
-                                  style="transform-box: fill-box; transform-origin: 49.8347% 100.62%;"
-                                  transform="matrix(-0.350367, -0.936613, 0.936613, -0.350367, -0.148117, -0.20884)"
-                              />
-                          </svg>
-                      ` : nothing}
-                ${this.variant === "small" || this.variant === "large" ? html`
-                          <svg
-                              viewBox=${this.variant == "small" ? "0 0 30 30" : "0 0 52 52"}
-                              aria-hidden="true"
-                              style="--progress: ${this.percent}"
-                              class="circular-progress ${this.indeterminate ? "indeterminate" : ""}"
-                          >
-                              <circle class="bg"></circle>
-                              <circle class="fg"></circle>
-                          </svg>
-                      ` : nothing}
-            </div>
-        `;
-  }
-};
-TerraLoader.styles = [component_styles_default, loader_styles_default];
-__decorateClass([
-  property({ reflect: true })
-], TerraLoader.prototype, "variant", 2);
-__decorateClass([
-  property({ type: String })
-], TerraLoader.prototype, "percent", 2);
-__decorateClass([
-  property({ type: Boolean })
-], TerraLoader.prototype, "indeterminate", 2);
-__decorateClass([
-  state()
-], TerraLoader.prototype, "_currentPercent", 2);
-
-export {
-  TerraLoader
-};

package/cdn/chunks/chunk.UT5XKCBV.js

@@ -1,183 +0,0 @@
-import {
-  date_picker_styles_default
-} from "./chunk.XZB6CNAL.js";
-import {
-  TerraButton
-} from "./chunk.PAJVTERU.js";
-import {
-  TerraElement,
-  component_styles_default
-} from "./chunk.O6SXSDFR.js";
-import {
-  __decorateClass
-} from "./chunk.TVFCHGU3.js";
-
-// src/components/date-picker/date-picker.component.ts
-import { property, query } from "lit/decorators.js";
-import { html } from "lit";
-import "lit-flatpickr";
-var TerraDatePicker = class extends TerraElement {
-  constructor() {
-    super(...arguments);
-    this.range = false;
-    this.allowInput = false;
-    this.altFormat = "F j, Y";
-    this.altInput = false;
-    this.altInputClass = "";
-    this.dateFormat = "Y-m-d";
-    this.enableTime = false;
-    this.time24hr = false;
-    this.weekNumbers = false;
-    this.static = false;
-    this.position = "auto";
-    this.showMonths = 1;
-    this.hideLabel = false;
-    this.label = "Select Date";
-  }
-  firstUpdated() {
-    this.flatpickrElement.addEventListener("change", this.handleChange.bind(this));
-    setTimeout(() => {
-      this.flatpickrElement.shadowRoot.querySelector("input").addEventListener("blur", this.handleBlur.bind(this));
-    }, 250);
-  }
-  handleChange(selectedDates) {
-    var _a, _b;
-    this.selectedDates = {
-      startDate: (_a = selectedDates[0]) == null ? void 0 : _a.toISOString().split("T")[0],
-      endDate: this.range ? (_b = selectedDates[1]) == null ? void 0 : _b.toISOString().split("T")[0] : null
-    };
-    this.emit("terra-change");
-  }
-  handleBlur() {
-    this.handleChange(this.flatpickrElement._instance.selectedDates);
-  }
-  render() {
-    return html`
-            <div class="date-picker">
-                <label
-                    for="date-picker__input"
-                    class=${this.hideLabel ? "sr-only" : "date-picker__input_label"}
-                    >${this.label}</label
-                >
-                <div class="date-picker__input_fields">
-                    <lit-flatpickr
-                        id="date-picker__input"
-                        class="form-control"
-                        .mode=${this.range ? "range" : "single"}
-                        .minDate=${this.minDate}
-                        .maxDate=${this.maxDate}
-                        .defaultDate=${this.range ? [this.startDate, this.endDate].filter(
-      Boolean
-    ) : this.defaultDate}
-                        .allowInput=${this.allowInput}
-                        .altFormat=${this.altFormat}
-                        .altInput=${this.altInput}
-                        .altInputClass=${this.altInputClass}
-                        .dateFormat=${this.dateFormat}
-                        .enableTime=${this.enableTime}
-                        .time24hr=${this.time24hr}
-                        .weekNumbers=${this.weekNumbers}
-                        .static=${this.static}
-                        .position=${this.position}
-                        .showMonths=${this.showMonths}
-                        theme="material_blue"
-                        .onChange="${this.handleChange.bind(this)}"
-                    ></lit-flatpickr>
-                    <terra-button
-                        shape="square-left"
-                        size="medium"
-                        class="date-picker__input_icon_button"
-                        @click=${() => this.flatpickrElement.open()}
-                        type="button"
-                    >
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke-width="1.5"
-                            stroke="currentColor"
-                            class="w-6 h-6"
-                        >
-                            <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5"
-                            />
-                        </svg>
-                    </terra-button>
-                </div>
-            </div>
-        `;
-  }
-};
-TerraDatePicker.styles = [component_styles_default, date_picker_styles_default];
-TerraDatePicker.dependencies = {
-  "terra-button": TerraButton
-};
-__decorateClass([
-  property()
-], TerraDatePicker.prototype, "id", 2);
-__decorateClass([
-  property({ type: Boolean })
-], TerraDatePicker.prototype, "range", 2);
-__decorateClass([
-  property({ attribute: "min-date" })
-], TerraDatePicker.prototype, "minDate", 2);
-__decorateClass([
-  property({ attribute: "max-date" })
-], TerraDatePicker.prototype, "maxDate", 2);
-__decorateClass([
-  property({ attribute: "start-date" })
-], TerraDatePicker.prototype, "startDate", 2);
-__decorateClass([
-  property({ attribute: "end-date" })
-], TerraDatePicker.prototype, "endDate", 2);
-__decorateClass([
-  property({ attribute: "default-date" })
-], TerraDatePicker.prototype, "defaultDate", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "allow-input" })
-], TerraDatePicker.prototype, "allowInput", 2);
-__decorateClass([
-  property({ attribute: "alt-format" })
-], TerraDatePicker.prototype, "altFormat", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "alt-input" })
-], TerraDatePicker.prototype, "altInput", 2);
-__decorateClass([
-  property({ attribute: "alt-input-class" })
-], TerraDatePicker.prototype, "altInputClass", 2);
-__decorateClass([
-  property({ attribute: "date-format" })
-], TerraDatePicker.prototype, "dateFormat", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "enable-time" })
-], TerraDatePicker.prototype, "enableTime", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "time-24hr" })
-], TerraDatePicker.prototype, "time24hr", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "week-numbers" })
-], TerraDatePicker.prototype, "weekNumbers", 2);
-__decorateClass([
-  property({ type: Boolean })
-], TerraDatePicker.prototype, "static", 2);
-__decorateClass([
-  property()
-], TerraDatePicker.prototype, "position", 2);
-__decorateClass([
-  property({ type: Number, attribute: "show-months" })
-], TerraDatePicker.prototype, "showMonths", 2);
-__decorateClass([
-  property({ attribute: "hide-label", type: Boolean })
-], TerraDatePicker.prototype, "hideLabel", 2);
-__decorateClass([
-  property()
-], TerraDatePicker.prototype, "label", 2);
-__decorateClass([
-  query("lit-flatpickr")
-], TerraDatePicker.prototype, "flatpickrElement", 2);
-
-export {
-  TerraDatePicker
-};

package/cdn/chunks/chunk.UZAIWUWC.js

@@ -1,8 +0,0 @@
-// src/utilities/number.ts
-function getRandomIntInclusive(min, max) {
-  return Math.floor(Math.random() * (Math.floor(max) - Math.ceil(min) + 1)) + Math.ceil(min);
-}
-
-export {
-  getRandomIntInclusive
-};

package/cdn/chunks/chunk.UZZDJISQ.js

@@ -1,258 +0,0 @@
-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
-};