@nasa-terra/components 0.0.193 → 0.0.194

package/cdn/chunks/chunk.JAI2Q27H.js

@@ -0,0 +1,537 @@
+import {
+  SpatialPickerService
+} from "./chunk.OCTYDGLC.js";
+import {
+  spatial_picker_styles_default
+} from "./chunk.YKZEKGNB.js";
+import {
+  TerraMap
+} from "./chunk.NN5FLRAE.js";
+import {
+  LatLng
+} from "./chunk.SN3T4SQP.js";
+import {
+  TerraDropdown
+} from "./chunk.EUSE5BHV.js";
+import {
+  TerraInput
+} from "./chunk.DJZRENBK.js";
+import {
+  e as e2,
+  n as n2
+} from "./chunk.LRZIT4M2.js";
+import {
+  TerraElement,
+  component_styles_default,
+  e,
+  n,
+  r
+} from "./chunk.WTFB42FU.js";
+import {
+  A,
+  b
+} from "./chunk.RRCYT4LP.js";
+import {
+  __decorateClass,
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/spatial-picker/spatial-picker.component.ts
+init_dirname();
+init_buffer();
+init_process();
+var TerraSpatialPicker = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.minZoom = 0;
+    this.maxZoom = 23;
+    this.zoom = 1;
+    this.hasNavigation = true;
+    this.hasCoordTracker = true;
+    this.hasShapeSelector = false;
+    this.showBoundingBoxSelection = true;
+    this.showPolygonSelection = false;
+    this.showPointSelection = true;
+    this.initialValue = "";
+    this.hideLabel = false;
+    this.label = "Select Region";
+    this.spatialConstraints = "-180, -90, 180, 90";
+    this.isExpanded = false;
+    this.worldWrap = false;
+    this.inline = false;
+    this.showMapOnFocus = false;
+    this.urlState = false;
+    this.helpText = "";
+    this.showClose = false;
+    this.error = "";
+    this.dropdownRef = e2();
+  }
+  set hideBoundingBoxSelection(value) {
+    console.warn(
+      '"hide-bounding-box-selection" is deprecated. Use "show-bounding-box-selection" instead.'
+    );
+    this.showBoundingBoxSelection = !value;
+  }
+  get hideBoundingBoxSelection() {
+    return !this.showBoundingBoxSelection;
+  }
+  set hidePointSelection(value) {
+    console.warn(
+      '"hide-point-selection" is deprecated. Use "show-point-selection" instead.'
+    );
+    this.showPointSelection = !value;
+  }
+  get hidePointSelection() {
+    return !this.showPointSelection;
+  }
+  // ─── Derived helpers ───────────────────────────────────────────────────────
+  get _allowedTypes() {
+    return {
+      allowPoint: this.showPointSelection,
+      allowBbox: this.showBoundingBoxSelection
+    };
+  }
+  firstUpdated() {
+    const urlParams = new URLSearchParams(window.location.search);
+    const spatialParam = urlParams.get("spatial");
+    const seed = this.urlState && spatialParam ? spatialParam : this.initialValue;
+    if (seed) {
+      if (typeof seed === "string") {
+        this._applyValue(seed, { emit: false });
+      } else {
+        this._commit(SpatialPickerService.serialize(seed), seed);
+      }
+    }
+  }
+  // ─── Public API ────────────────────────────────────────────────────────────
+  setValue(value) {
+    this._applyValue(value, { emit: true });
+  }
+  clear() {
+    this._clearValue();
+  }
+  open() {
+    var _a;
+    if (!this.inline)
+      (_a = this.dropdownRef.value) == null ? void 0 : _a.show();
+  }
+  close() {
+    var _a;
+    if (!this.inline)
+      (_a = this.dropdownRef.value) == null ? void 0 : _a.hide();
+  }
+  setOpen(open) {
+    open ? this.open() : this.close();
+  }
+  // ─── Input event handlers ──────────────────────────────────────────────────
+  _input() {
+    var _a;
+    this.error = "";
+    (_a = this.terraInput) == null ? void 0 : _a.setCustomValidity("");
+  }
+  _change() {
+    var _a, _b;
+    this._input();
+    const raw = (_b = (_a = this.terraInput) == null ? void 0 : _a.value) != null ? _b : "";
+    if (!raw.trim()) {
+      this._clearValue();
+      return;
+    }
+    this._validateAndCommit(raw);
+  }
+  _keydown(event) {
+    var _a, _b, _c;
+    if (event.key === " ") {
+      event.stopPropagation();
+      return;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      this._validateAndCommit((_b = (_a = this.terraInput) == null ? void 0 : _a.value) != null ? _b : "");
+      (_c = this.terraInput) == null ? void 0 : _c.blur();
+    }
+  }
+  _blur() {
+    var _a, _b;
+    this._validateAndCommit((_b = (_a = this.terraInput) == null ? void 0 : _a.value) != null ? _b : "");
+  }
+  _focus() {
+    var _a;
+    if (this.showMapOnFocus && !this.inline) {
+      (_a = this.dropdownRef.value) == null ? void 0 : _a.show();
+    }
+  }
+  _click(e3) {
+    e3.stopPropagation();
+    if (!this.inline) {
+      this.isExpanded ? this.close() : this.open();
+    }
+  }
+  // ─── Map event handler ─────────────────────────────────────────────────────
+  _handleMapChange(event) {
+    const detail = event.detail;
+    if (detail.cause === "clear") {
+      this._clearValue();
+      return;
+    }
+    if (detail.cause !== "draw")
+      return;
+    let value;
+    if (detail.type === "bbox" /* BBOX */ && detail.bounds) {
+      value = detail.bounds;
+    } else if (detail.type === "point" /* POINT */ && detail.latLng) {
+      value = detail.latLng;
+    } else {
+      this.emit("terra-map-change", { detail });
+      return;
+    }
+    const constraintError = SpatialPickerService.validateConstraints(
+      value,
+      this.spatialConstraints
+    );
+    if (constraintError) {
+      this.error = constraintError;
+      this.mapValue = void 0;
+      return;
+    }
+    const serialized = SpatialPickerService.serialize(value);
+    this._commit(serialized, value);
+  }
+  // ─── Dropdown handlers ─────────────────────────────────────────────────────
+  handleDropdownShow() {
+    this.isExpanded = true;
+  }
+  handleDropdownHide() {
+    this.isExpanded = false;
+  }
+  // ─── Internal helpers ──────────────────────────────────────────────────────
+  /**
+   * Parse, validate and commit a raw string value.
+   */
+  _validateAndCommit(raw) {
+    var _a;
+    if (!raw.trim()) {
+      this._clearValue();
+      return;
+    }
+    const result = SpatialPickerService.validate(
+      raw,
+      this._allowedTypes,
+      this.spatialConstraints
+    );
+    if (!result.ok) {
+      this.error = result.error;
+      (_a = this.terraInput) == null ? void 0 : _a.setCustomValidity(result.error);
+      return;
+    }
+    this._commit(result.serialized, result.value);
+  }
+  /**
+   * Apply a value without going through the validation pipeline
+   * (used for initialValue / setValue where we still want to display what
+   * was given, but we do want to show an error if it's malformed).
+   */
+  _applyValue(raw, { emit }) {
+    if (typeof raw !== "string") {
+      const serialized = SpatialPickerService.serialize(raw);
+      this.error = "";
+      this.mapValue = serialized;
+      if (this.terraInput)
+        this.terraInput.value = serialized;
+      if (emit)
+        this._emitChange(raw);
+      this._updateURLParam(serialized);
+      return;
+    }
+    const result = SpatialPickerService.validate(
+      raw,
+      this._allowedTypes,
+      this.spatialConstraints
+    );
+    if (!result.ok) {
+      this.error = result.error;
+      return;
+    }
+    this.error = "";
+    this.mapValue = result.serialized;
+    if (this.terraInput)
+      this.terraInput.value = result.serialized;
+    if (emit) {
+      this._emitChange(result.value);
+    }
+    this._updateURLParam(result.serialized);
+  }
+  /**
+   * Commit a validated value: sync UI, mapValue, URL, and emit.
+   */
+  _commit(serialized, value) {
+    var _a;
+    this.error = "";
+    (_a = this.terraInput) == null ? void 0 : _a.setCustomValidity("");
+    this.mapValue = serialized;
+    if (this.terraInput)
+      this.terraInput.value = serialized;
+    this.initialValue = serialized;
+    this._updateURLParam(serialized);
+    this._emitChange(value);
+  }
+  _clearValue() {
+    var _a;
+    this.error = "";
+    this.mapValue = void 0;
+    (_a = this.terraInput) == null ? void 0 : _a.setCustomValidity("");
+    if (this.terraInput)
+      this.terraInput.value = "";
+    this._updateURLParam(null);
+  }
+  _emitChange(value) {
+    if (value instanceof LatLng) {
+      this.emit("terra-map-change", {
+        detail: {
+          cause: "draw",
+          type: "point" /* POINT */,
+          latLng: value
+        }
+      });
+    } else {
+      this.emit("terra-map-change", {
+        detail: {
+          cause: "draw",
+          type: "bbox" /* BBOX */,
+          bounds: value
+        }
+      });
+    }
+  }
+  _updateURLParam(value) {
+    if (!this.urlState)
+      return;
+    const url = new URL(window.location.href);
+    value ? url.searchParams.set("spatial", value) : url.searchParams.delete("spatial");
+    window.history.replaceState({}, "", url.toString());
+  }
+  // ─── Rendering ─────────────────────────────────────────────────────────────
+  renderMap() {
+    return b`<terra-map
+            class="${this.inline ? "inline" : ""}"
+            exportparts="map"
+            min-zoom=${this.minZoom}
+            max-zoom=${this.maxZoom}
+            zoom=${this.zoom}
+            ?show-mouse-coordinates=${this.hasCoordTracker}
+            .value=${this.mapValue}
+            ?has-navigation=${this.hasNavigation}
+            ?has-shape-selector=${this.hasShapeSelector}
+            ?show-bounding-box-selection=${this.showBoundingBoxSelection}
+            ?show-polygon-selection=${this.showPolygonSelection}
+            ?show-point-selection=${this.showPointSelection}
+            ?no-world-wrap=${!this.worldWrap}
+            spatial-constraints=${this.spatialConstraints}
+            @terra-map-change=${this._handleMapChange}
+        ></terra-map>`;
+  }
+  _inputTemplate(slot) {
+    return b`<terra-input
+            slot=${slot != null ? slot : A}
+            .label=${this.label}
+            .hideLabel=${this.hideLabel}
+            .value=${SpatialPickerService.serialize(this.initialValue)}
+            placeholder="${this.spatialConstraints}"
+            aria-controls="map"
+            aria-expanded=${this.inline ? true : this.isExpanded}
+            @terra-input=${this._input}
+            @terra-change=${this._change}
+            @terra-blur=${this._blur}
+            @terra-focus=${this._focus}
+            @keydown=${this._keydown}
+            @click=${(e3) => {
+      e3.stopPropagation();
+      this._click(e3);
+    }}
+            name="spatial"
+            .helpText=${this.helpText}
+        >
+            <div slot="suffix" class="spatial-picker__suffix-icons">
+                ${this.mapValue ? b`<button
+                          type="button"
+                          class="spatial-picker__clear-btn"
+                          aria-label="Clear input"
+                          tabindex="-1"
+                          @click=${(e3) => {
+      e3.stopPropagation();
+      this._clearValue();
+    }}
+                      >
+                          <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 24 24"
+                              fill="currentColor"
+                          >
+                              <path
+                                  fill-rule="evenodd"
+                                  d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-1.72 6.97a.75.75 0 1 0-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 1 0 1.06 1.06L12 13.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L13.06 12l1.72-1.72a.75.75 0 1 0-1.06-1.06L12 10.94l-1.72-1.72Z"
+                                  clip-rule="evenodd"
+                              />
+                          </svg>
+                      </button>` : A}
+                <svg
+                    class="spatial-picker__input_icon"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke-width="1.5"
+                    stroke="currentColor"
+                    @click=${this._click}
+                >
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M9 6.75V15m6-6v8.25m.503 3.498 4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 0 0-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0Z"
+                    />
+                </svg>
+            </div>
+        </terra-input>`;
+  }
+  render() {
+    if (this.inline) {
+      return b`
+                <div class="spatial-picker">
+                    ${this._inputTemplate()}
+                    <slot name="additional-text"></slot>
+                    <div
+                        class="spatial-picker__map-container spatial-picker__map-container--inline"
+                    >
+                        ${this.renderMap()}
+                    </div>
+                    ${this.error ? b`<div class="spatial-picker__error">${this.error}</div>` : A}
+                </div>
+            `;
+    }
+    return b`
+            <div class="spatial-picker">
+                <terra-dropdown
+                    ${n2(this.dropdownRef)}
+                    placement="bottom-start"
+                    distance="4"
+                    @terra-show=${this.handleDropdownShow}
+                    @terra-hide=${this.handleDropdownHide}
+                    hoist
+                >
+                    ${this._inputTemplate("trigger")}
+                    <slot name="additional-text"></slot>
+                    <div
+                        class="spatial-picker__map-container"
+                        @click=${(e3) => e3.stopPropagation()}
+                    >
+                        ${this.showClose ? b`
+                                  <div class="dropdown-header">
+                                      <button
+                                          class="spatial-picker__close-btn"
+                                          @click=${(e3) => {
+      e3.stopPropagation();
+      this.close();
+    }}
+                                          aria-label="Close"
+                                      >
+                                          ✕
+                                      </button>
+                                  </div>
+                              ` : A}
+                        ${this.renderMap()}
+                    </div>
+                </terra-dropdown>
+                ${this.error ? b`<div class="spatial-picker__error">${this.error}</div>` : A}
+            </div>
+        `;
+  }
+};
+TerraSpatialPicker.styles = [component_styles_default, spatial_picker_styles_default];
+TerraSpatialPicker.dependencies = {
+  "terra-map": TerraMap,
+  "terra-input": TerraInput,
+  "terra-dropdown": TerraDropdown
+};
+__decorateClass([
+  n({ attribute: "min-zoom", type: Number })
+], TerraSpatialPicker.prototype, "minZoom", 2);
+__decorateClass([
+  n({ attribute: "max-zoom", type: Number })
+], TerraSpatialPicker.prototype, "maxZoom", 2);
+__decorateClass([
+  n({ type: Number })
+], TerraSpatialPicker.prototype, "zoom", 2);
+__decorateClass([
+  n({ attribute: "has-navigation", type: Boolean })
+], TerraSpatialPicker.prototype, "hasNavigation", 2);
+__decorateClass([
+  n({ attribute: "has-coord-tracker", type: Boolean })
+], TerraSpatialPicker.prototype, "hasCoordTracker", 2);
+__decorateClass([
+  n({ attribute: "has-shape-selector", type: Boolean })
+], TerraSpatialPicker.prototype, "hasShapeSelector", 2);
+__decorateClass([
+  n({ attribute: "show-bounding-box-selection", type: Boolean })
+], TerraSpatialPicker.prototype, "showBoundingBoxSelection", 2);
+__decorateClass([
+  n({ attribute: "show-polygon-selection", type: Boolean })
+], TerraSpatialPicker.prototype, "showPolygonSelection", 2);
+__decorateClass([
+  n({ attribute: "hide-bounding-box-selection", type: Boolean })
+], TerraSpatialPicker.prototype, "hideBoundingBoxSelection", 1);
+__decorateClass([
+  n({ attribute: "show-point-selection", type: Boolean })
+], TerraSpatialPicker.prototype, "showPointSelection", 2);
+__decorateClass([
+  n({ attribute: "hide-point-selection", type: Boolean })
+], TerraSpatialPicker.prototype, "hidePointSelection", 1);
+__decorateClass([
+  n({ attribute: "initial-value" })
+], TerraSpatialPicker.prototype, "initialValue", 2);
+__decorateClass([
+  n({ attribute: "hide-label", type: Boolean })
+], TerraSpatialPicker.prototype, "hideLabel", 2);
+__decorateClass([
+  n()
+], TerraSpatialPicker.prototype, "label", 2);
+__decorateClass([
+  n({ attribute: "spatial-constraints" })
+], TerraSpatialPicker.prototype, "spatialConstraints", 2);
+__decorateClass([
+  n({ attribute: "is-expanded", type: Boolean, reflect: true })
+], TerraSpatialPicker.prototype, "isExpanded", 2);
+__decorateClass([
+  n({ attribute: "world-wrap", type: Boolean })
+], TerraSpatialPicker.prototype, "worldWrap", 2);
+__decorateClass([
+  n({ type: Boolean })
+], TerraSpatialPicker.prototype, "inline", 2);
+__decorateClass([
+  n({ attribute: "show-map-on-focus", type: Boolean })
+], TerraSpatialPicker.prototype, "showMapOnFocus", 2);
+__decorateClass([
+  n({ attribute: "url-state", type: Boolean })
+], TerraSpatialPicker.prototype, "urlState", 2);
+__decorateClass([
+  n({ attribute: "help-text" })
+], TerraSpatialPicker.prototype, "helpText", 2);
+__decorateClass([
+  n({ attribute: "closable", type: Boolean })
+], TerraSpatialPicker.prototype, "showClose", 2);
+__decorateClass([
+  r()
+], TerraSpatialPicker.prototype, "mapValue", 2);
+__decorateClass([
+  r()
+], TerraSpatialPicker.prototype, "error", 2);
+__decorateClass([
+  e("terra-input")
+], TerraSpatialPicker.prototype, "terraInput", 2);
+__decorateClass([
+  e("terra-map")
+], TerraSpatialPicker.prototype, "map", 2);
+
+export {
+  TerraSpatialPicker
+};

package/cdn/chunks/chunk.JBH5HRD4.js

@@ -0,0 +1,136 @@
+import {
+  loader_styles_default
+} from "./chunk.YMMKGSAJ.js";
+import {
+  e
+} from "./chunk.KGXAA5I2.js";
+import {
+  TerraElement,
+  component_styles_default,
+  n,
+  r
+} from "./chunk.WTFB42FU.js";
+import {
+  A,
+  b
+} from "./chunk.RRCYT4LP.js";
+import {
+  __decorateClass,
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/loader/loader.component.ts
+init_dirname();
+init_buffer();
+init_process();
+var TerraLoader = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "large";
+    this.percent = "0";
+    this.indeterminate = false;
+    this.role = "progressbar";
+    this._currentPercent = 0;
+  }
+  formatPercent(percent) {
+    if (parseInt(percent) > 100) {
+      percent = "100";
+    }
+    return parseInt(percent) > 0 ? percent + "%" : "";
+  }
+  render() {
+    this._currentPercent = parseInt(this.percent);
+    return b`
+            <div
+                class=${e({
+      loader: true,
+      "loader--small": this.variant === "small",
+      "loader--large": this.variant === "large",
+      "loader--orbit": this.variant === "orbit"
+    })}
+                aria-valuenow=${this.formatPercent(this.percent)}
+                .role=${this.role}
+                tabindex="-1"
+            >
+                ${this.variant === "large" || this.variant === "orbit" ? b`
+                          <div
+                              class="percent ${this.variant == "orbit" ? "number-14" : "number-11"}"
+                          >
+                              ${this.formatPercent(this.percent)}
+                          </div>
+                      ` : A}
+                ${this.variant === "orbit" ? b`
+                          <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>
+                      ` : A}
+                ${this.variant === "small" || this.variant === "large" ? b`
+                          <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>
+                      ` : A}
+            </div>
+        `;
+  }
+};
+TerraLoader.styles = [component_styles_default, loader_styles_default];
+__decorateClass([
+  n({ reflect: true })
+], TerraLoader.prototype, "variant", 2);
+__decorateClass([
+  n({ type: String })
+], TerraLoader.prototype, "percent", 2);
+__decorateClass([
+  n({ type: Boolean })
+], TerraLoader.prototype, "indeterminate", 2);
+__decorateClass([
+  n({ reflect: true })
+], TerraLoader.prototype, "role", 2);
+__decorateClass([
+  r()
+], TerraLoader.prototype, "_currentPercent", 2);
+
+export {
+  TerraLoader
+};