@nasa-terra/components 0.0.186 → 0.0.187

package/cdn/chunks/chunk.MTD42HQV.js

@@ -0,0 +1,264 @@
+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.UME44J4L.js";
+import {
+  alert_styles_default
+} from "./chunk.Z2SC4DOK.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 = "primary";
+    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--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"
+    })}
+                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.N266QSQR.js

@@ -0,0 +1,443 @@
+import {
+  slider_styles_default
+} from "./chunk.SKG5CDYE.js";
+import {
+  PipsMode,
+  nouislider_default
+} from "./chunk.HBHLBI3N.js";
+import {
+  mergeTooltips
+} from "./chunk.ZHCOO7YL.js";
+import {
+  watch
+} from "./chunk.MPVZOQYA.js";
+import {
+  TerraElement,
+  component_styles_default,
+  e,
+  n,
+  r
+} from "./chunk.UME44J4L.js";
+import {
+  b
+} from "./chunk.RRCYT4LP.js";
+import {
+  __decorateClass,
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/slider/slider.component.ts
+init_dirname();
+init_buffer();
+init_process();
+var TerraSlider = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.mode = "single";
+    this.min = 0;
+    this.max = 100;
+    this.step = 1;
+    this.disabled = false;
+    this.hasPips = false;
+    this.hasTooltips = false;
+    this.showInputs = false;
+    this.label = "Slider";
+    this.hideLabel = false;
+    this.hasBeenManipulated = false;
+  }
+  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();
+  }
+  _getStartValues() {
+    var _a, _b, _c;
+    const min = Number(this.min);
+    const max = Number(this.max);
+    if (this.mode === "range") {
+      const start = (_a = this.startValue) != null ? _a : min;
+      const end = (_b = this.endValue) != null ? _b : max;
+      return [start, end];
+    }
+    const single = (_c = this.value) != null ? _c : min;
+    return [single];
+  }
+  renderSlider() {
+    var _a;
+    if (!this.slider)
+      return;
+    (_a = this.slider.noUiSlider) == null ? void 0 : _a.destroy();
+    const min = Number(this.min);
+    const max = Number(this.max);
+    if (!Number.isFinite(min) || !Number.isFinite(max) || max < min) {
+      nouislider_default.create(this.slider, {
+        start: [0],
+        range: { min: 0, max: 0 }
+      });
+      return;
+    }
+    const startValues = this._getStartValues();
+    const options = {
+      range: { min, max },
+      start: startValues,
+      step: this.step,
+      connect: this.mode === "range",
+      tooltips: this.formatTooltip ? {
+        to: (value) => {
+          var _a2, _b;
+          return (_b = (_a2 = this.formatTooltip) == null ? void 0 : _a2.call(this, value)) != null ? _b : value;
+        }
+      } : this.hasTooltips,
+      behaviour: "drag",
+      format: this._getFormatter(),
+      pips: this.hasPips ? {
+        mode: PipsMode.Range,
+        density: -1,
+        format: this._getFormatter()
+      } : void 0
+    };
+    nouislider_default.create(this.slider, options);
+    const initialValues = this.slider.noUiSlider.get();
+    if (this.mode === "range") {
+      const [start, end] = Array.isArray(initialValues) ? initialValues.map(Number) : [min, max];
+      this.currentStartValue = start;
+      this.currentEndValue = end;
+      this.hasBeenManipulated = start !== min || end !== max;
+    } else {
+      const [val] = Array.isArray(initialValues) ? initialValues.map(Number) : [min];
+      this.currentValue = val;
+      this.hasBeenManipulated = val !== min;
+    }
+    if (this.hasTooltips && this.mode === "range") {
+      mergeTooltips(this.slider, 15, "-");
+    }
+    this.slider.noUiSlider.on("update", (values) => {
+      if (this.mode === "range") {
+        const [start, end] = values.map(Number);
+        this.currentStartValue = start;
+        this.currentEndValue = end;
+        this.hasBeenManipulated = start !== min || end !== max;
+      } else {
+        const [val] = values.map(Number);
+        this.currentValue = val;
+        this.hasBeenManipulated = val !== min;
+      }
+      this.requestUpdate();
+    });
+    this.slider.noUiSlider.on("change", (values) => {
+      if (this.mode === "range") {
+        const [start, end] = values.map(Number);
+        this.currentStartValue = start;
+        this.currentEndValue = end;
+        this.hasBeenManipulated = start !== min || end !== max;
+        this.emit("terra-slider-change", {
+          detail: { startValue: start, endValue: end }
+        });
+      } else {
+        const [val] = values.map(Number);
+        this.currentValue = val;
+        this.hasBeenManipulated = val !== min;
+        this.emit("terra-slider-change", { detail: { value: val } });
+      }
+      this.requestUpdate();
+    });
+    this.slider.noUiSlider.on("update", () => {
+      this._updateInputFields();
+    });
+    this.slider.noUiSlider.on("change", () => {
+      this._updateInputFields();
+    });
+    this.disabledChanged();
+  }
+  _updateInputFields() {
+    if (!this.showInputs) {
+      return;
+    }
+    const rawValues = this.slider.noUiSlider.get();
+    const currentValues = Array.isArray(rawValues) ? rawValues : [rawValues];
+    this.requestUpdate();
+    setTimeout(() => {
+      var _a, _b, _c;
+      if (this.mode === "range") {
+        const startInput = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
+          "#slider-start-input"
+        );
+        const endInput = (_b = this.shadowRoot) == null ? void 0 : _b.querySelector(
+          "#slider-end-input"
+        );
+        if (startInput) {
+          startInput.value = this._formatValue(Number(currentValues[0]));
+        }
+        if (endInput) {
+          endInput.value = this._formatValue(Number(currentValues[1]));
+        }
+      } else {
+        const valueInput = (_c = this.shadowRoot) == null ? void 0 : _c.querySelector(
+          "#slider-value-input"
+        );
+        if (valueInput) {
+          valueInput.value = this._formatValue(Number(currentValues[0]));
+        }
+      }
+    }, 10);
+  }
+  _getFormatter() {
+    const isIntegerStep = Number.isInteger(this.step);
+    return {
+      to: (value) => {
+        if (isIntegerStep) {
+          return Math.round(value).toString();
+        } else {
+          const stepStr = this.step.toString();
+          const decimalPlaces = stepStr.includes(".") ? stepStr.split(".")[1].length : 0;
+          return value.toFixed(decimalPlaces);
+        }
+      },
+      from: (value) => {
+        return Number(value);
+      }
+    };
+  }
+  _formatValue(value) {
+    const numValue = Number(value);
+    if (isNaN(numValue)) {
+      return "0";
+    }
+    const isIntegerStep = Number.isInteger(this.step);
+    if (isIntegerStep) {
+      return Math.round(numValue).toString();
+    } else {
+      const stepStr = this.step.toString();
+      const decimalPlaces = stepStr.includes(".") ? stepStr.split(".")[1].length : 0;
+      return numValue.toFixed(decimalPlaces);
+    }
+  }
+  handleClear() {
+    const min = Number(this.min);
+    const max = Number(this.max);
+    if (this.mode === "range") {
+      this.slider.noUiSlider.set([min, max]);
+      this.currentStartValue = min;
+      this.currentEndValue = max;
+      this.hasBeenManipulated = false;
+    } else {
+      this.slider.noUiSlider.set([min]);
+      this.currentValue = min;
+      this.hasBeenManipulated = false;
+    }
+    this.requestUpdate();
+  }
+  render() {
+    var _a, _b, _c;
+    const containerClass = "container" + (this.hasPips ? " hasPips" : "");
+    const min = Number(this.min);
+    const max = Number(this.max);
+    const startValue = (_a = this.currentStartValue) != null ? _a : this.mode === "range" ? min : void 0;
+    const endValue = (_b = this.currentEndValue) != null ? _b : this.mode === "range" ? max : void 0;
+    const singleValue = (_c = this.currentValue) != null ? _c : this.mode === "single" ? min : void 0;
+    const currentRangeDisplay = this.mode === "range" ? `${this._formatValue(startValue)}\u2013${this._formatValue(endValue)}` : this._formatValue(singleValue);
+    return b`
+            <div class="slider">
+                ${!this.hasTooltips ? b`
+                          <div class="slider__header">
+                              <label
+                                  for="slider-control"
+                                  class=${this.hideLabel ? "sr-only" : "slider__label"}
+                                  >${this.label}</label
+                              >
+                              <div class="slider__header-right">
+                                  ${this.hasBeenManipulated ? b`
+                                            <button
+                                                class="slider__clear"
+                                                @click="${this.handleClear}"
+                                                type="button"
+                                            >
+                                                Clear
+                                            </button>
+                                        ` : ""}
+                                  <span class="slider__current-range"
+                                      >${currentRangeDisplay}</span
+                                  >
+                              </div>
+                          </div>
+                      ` : b`
+                          <label
+                              for="slider-control"
+                              class=${this.hideLabel ? "sr-only" : "slider__label"}
+                              >${this.label}</label
+                          >
+                      `}
+                <div class="${containerClass}">
+                    <div part="slider" id="slider-control"></div>
+                    ${this.showInputs ? this._renderInputFields() : ""}
+                    <slot></slot>
+                </div>
+            </div>
+        `;
+  }
+  _renderInputFields() {
+    var _a, _b, _c, _d, _e, _f;
+    if (this.mode === "range") {
+      return b`
+                <div class="slider-inputs">
+                    <input
+                        id="slider-start-input"
+                        type="number"
+                        .min="${this.min}"
+                        .max="${this.max}"
+                        .step="${this.step}"
+                        .value="${this._formatValue(
+        (_b = (_a = this.startValue) != null ? _a : this.min) != null ? _b : 0
+      )}"
+                        @change="${this._handleInputChange}"
+                        @keydown="${this._handleInputKeydown}"
+                    />
+                    <span class="input-separator">to</span>
+                    <input
+                        id="slider-end-input"
+                        type="number"
+                        .min="${this.min}"
+                        .max="${this.max}"
+                        .step="${this.step}"
+                        .value="${this._formatValue(
+        (_d = (_c = this.endValue) != null ? _c : this.max) != null ? _d : 100
+      )}"
+                        @change="${this._handleInputChange}"
+                        @keydown="${this._handleInputKeydown}"
+                    />
+                </div>
+            `;
+    } else {
+      return b`
+                <div class="slider-inputs">
+                    <input
+                        id="slider-value-input"
+                        type="number"
+                        .min="${this.min}"
+                        .max="${this.max}"
+                        .step="${this.step}"
+                        .value="${this._formatValue((_f = (_e = this.value) != null ? _e : this.min) != null ? _f : 0)}"
+                        @change="${this._handleInputChange}"
+                        @keydown="${this._handleInputKeydown}"
+                    />
+                </div>
+            `;
+    }
+  }
+  _handleInputChange(event) {
+    const input = event.target;
+    const value = Number(input.value);
+    const min = Number(this.min);
+    const max = Number(this.max);
+    const clampedValue = Math.max(min, Math.min(max, value));
+    input.value = this._formatValue(clampedValue);
+    if (this.mode === "range") {
+      const currentValues = this.slider.noUiSlider.get();
+      const newValues = [...currentValues];
+      if (input.id === "slider-start-input") {
+        newValues[0] = clampedValue;
+      } else {
+        newValues[1] = clampedValue;
+      }
+      this.slider.noUiSlider.set(newValues);
+      this.emit("terra-slider-change", {
+        detail: { startValue: newValues[0], endValue: newValues[1] }
+      });
+    } else {
+      this.slider.noUiSlider.set([clampedValue]);
+      this.emit("terra-slider-change", { detail: { value: clampedValue } });
+    }
+  }
+  _handleInputKeydown(event) {
+    if (event.key === "Enter") {
+      ;
+      event.target.blur();
+    }
+  }
+};
+TerraSlider.styles = [component_styles_default, slider_styles_default];
+__decorateClass([
+  e('[part~="slider"]')
+], TerraSlider.prototype, "slider", 2);
+__decorateClass([
+  n({ reflect: true })
+], TerraSlider.prototype, "mode", 2);
+__decorateClass([
+  n({ type: Number })
+], TerraSlider.prototype, "min", 2);
+__decorateClass([
+  n({ type: Number })
+], TerraSlider.prototype, "max", 2);
+__decorateClass([
+  n({ type: Number })
+], TerraSlider.prototype, "step", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], TerraSlider.prototype, "disabled", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true, attribute: "has-pips" })
+], TerraSlider.prototype, "hasPips", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true, attribute: "has-tooltips" })
+], TerraSlider.prototype, "hasTooltips", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true, attribute: "show-inputs" })
+], TerraSlider.prototype, "showInputs", 2);
+__decorateClass([
+  n({ type: Number })
+], TerraSlider.prototype, "value", 2);
+__decorateClass([
+  n({ type: Number, attribute: "start-value" })
+], TerraSlider.prototype, "startValue", 2);
+__decorateClass([
+  n({ type: Number, attribute: "end-value" })
+], TerraSlider.prototype, "endValue", 2);
+__decorateClass([
+  n()
+], TerraSlider.prototype, "label", 2);
+__decorateClass([
+  n({ attribute: "hide-label", type: Boolean })
+], TerraSlider.prototype, "hideLabel", 2);
+__decorateClass([
+  n({ attribute: "format-tooltip", type: Function })
+], TerraSlider.prototype, "formatTooltip", 2);
+__decorateClass([
+  r()
+], TerraSlider.prototype, "currentStartValue", 2);
+__decorateClass([
+  r()
+], TerraSlider.prototype, "currentEndValue", 2);
+__decorateClass([
+  r()
+], TerraSlider.prototype, "currentValue", 2);
+__decorateClass([
+  r()
+], TerraSlider.prototype, "hasBeenManipulated", 2);
+__decorateClass([
+  watch([
+    "mode",
+    "min",
+    "max",
+    "step",
+    "value",
+    "startValue",
+    "endValue",
+    "hasPips",
+    "hasTooltips",
+    "showInputs"
+  ])
+], TerraSlider.prototype, "updateSlider", 1);
+__decorateClass([
+  watch("disabled")
+], TerraSlider.prototype, "disabledChanged", 1);
+
+export {
+  TerraSlider
+};