@nasa-terra/components 0.0.184 → 0.0.186

package/cdn/chunks/chunk.FD4IZ6DH.js

@@ -0,0 +1,19 @@
+import {
+  TerraSpatialPicker
+} from "./chunk.ZT2MQHEQ.js";
+import {
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/spatial-picker/spatial-picker.ts
+init_dirname();
+init_buffer();
+init_process();
+var spatial_picker_default = TerraSpatialPicker;
+TerraSpatialPicker.define("terra-spatial-picker");
+
+export {
+  spatial_picker_default
+};

package/cdn/chunks/chunk.FPRTOOQP.js

@@ -0,0 +1,242 @@
+import {
+  TerraVariableCombobox
+} from "./chunk.WVQSNSMN.js";
+import {
+  TerraTimeSeries
+} from "./chunk.QKTCEJ3U.js";
+import {
+  getFetchVariableTask
+} from "./chunk.YQXMPDBV.js";
+import {
+  getVariableEntryId
+} from "./chunk.QS6LI65N.js";
+import {
+  TerraDateRangeSlider
+} from "./chunk.XQBFF6UL.js";
+import {
+  data_rods_styles_default
+} from "./chunk.GBYKMMSD.js";
+import {
+  TerraSpatialPicker
+} from "./chunk.ZT2MQHEQ.js";
+import {
+  getUTCDate
+} from "./chunk.TKSEPVAL.js";
+import {
+  TerraElement,
+  component_styles_default,
+  n,
+  r
+} from "./chunk.4CNDF3PH.js";
+import {
+  b
+} from "./chunk.RRCYT4LP.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateMethod,
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/data-rods/data-rods.component.ts
+init_dirname();
+init_buffer();
+init_process();
+var _handleDateRangeSliderChangeEvent, handleDateRangeSliderChangeEvent_fn, _handleInvalidDateSelection, handleInvalidDateSelection_fn, _handleVariableChange, handleVariableChange_fn, _handleMapChange, handleMapChange_fn, _handleTimeSeriesDateRangeChange, handleTimeSeriesDateRangeChange_fn;
+var TerraDataRods = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    /**
+     * anytime the date range slider changes, update the start and end date
+     */
+    __privateAdd(this, _handleDateRangeSliderChangeEvent);
+    /**
+     * anytime user selects invalid dates outside variable date range
+     */
+    __privateAdd(this, _handleInvalidDateSelection);
+    __privateAdd(this, _handleVariableChange);
+    __privateAdd(this, _handleMapChange);
+    __privateAdd(this, _handleTimeSeriesDateRangeChange);
+    this._fetchVariableTask = getFetchVariableTask(this);
+  }
+  get variableBoundingBox() {
+    const variable = this.catalogVariable;
+    if (!variable)
+      return void 0;
+    const {
+      dataProductWest,
+      dataProductSouth,
+      dataProductEast,
+      dataProductNorth
+    } = variable;
+    if (dataProductWest == null || dataProductSouth == null || dataProductEast == null || dataProductNorth == null) {
+      return void 0;
+    }
+    return `${dataProductWest}, ${dataProductSouth}, ${dataProductEast}, ${dataProductNorth}`;
+  }
+  compatibilityWarning() {
+    this.spatialWarningMessage = void 0;
+    if (!this.catalogVariable || !this.location)
+      return;
+    const {
+      dataProductWest,
+      dataProductSouth,
+      dataProductEast,
+      dataProductNorth
+    } = this.catalogVariable;
+    if (dataProductWest == null || dataProductSouth == null || dataProductEast == null || dataProductNorth == null) {
+      return;
+    }
+    const [latStr, lonStr] = this.location.split(",");
+    const lat = Number(latStr);
+    const lon = Number(lonStr);
+    const inside = lon >= dataProductWest && lon <= dataProductEast && lat >= dataProductSouth && lat <= dataProductNorth;
+    if (!inside) {
+      this.spatialWarningMessage = this.lastChanged === "variable" ? "This variable has no data at the selected location." : "The selected location is outside the coverage of this variable.";
+    }
+  }
+  render() {
+    var _a, _b;
+    const minDate = this.catalogVariable ? getUTCDate(this.catalogVariable.dataProductBeginDateTime) : void 0;
+    const maxDate = this.catalogVariable ? getUTCDate(this.catalogVariable.dataProductEndDateTime) : void 0;
+    return b`
+            ${this.spatialWarningMessage && this.lastChanged === "location" ? b`<div class="warning">⚠️ ${this.spatialWarningMessage}</div>` : null}
+            <terra-variable-combobox
+                exportparts="base:variable-combobox__base, combobox:variable-combobox__combobox, button:variable-combobox__button, listbox:variable-combobox__listbox"
+                .value=${getVariableEntryId(this)}
+                .bearerToken=${(_a = this.bearerToken) != null ? _a : null}
+                .useTags=${true}
+                @terra-combobox-change="${__privateMethod(this, _handleVariableChange, handleVariableChange_fn)}"
+            ></terra-variable-combobox>
+
+            ${this.spatialWarningMessage && this.lastChanged === "variable" ? b`<div class="warning">⚠️ ${this.spatialWarningMessage}</div>` : null}
+            <terra-spatial-picker
+                initial-value=${this.location}
+                .spatialConstraints=${this.variableBoundingBox}
+                exportparts="map:spatial-picker__map"
+                label="Select Point"
+                @terra-map-change=${__privateMethod(this, _handleMapChange, handleMapChange_fn)}
+                .showBoundingBoxSelection=${false}
+            ></terra-spatial-picker>
+
+            <terra-time-series
+                variable-entry-id=${getVariableEntryId(this)}
+                start-date=${this.startDate}
+                end-date=${this.endDate}
+                .location=${(_b = this.location) != null ? _b : void 0}
+                bearer-token=${this.bearerToken}
+                show-citation=${true}
+                cache
+                @terra-date-range-change=${__privateMethod(this, _handleTimeSeriesDateRangeChange, handleTimeSeriesDateRangeChange_fn)}
+            >
+                <li slot="help-links">
+                    <a
+                        href="https://disc.gsfc.nasa.gov/information/tools?title=Hydrology%20Time%20Series"
+                        >User Guide</a
+                    >
+                </li>
+            </terra-time-series>
+
+            <terra-date-range-slider
+                exportparts="slider:date-range-slider__slider"
+                min-date=${minDate}
+                max-date=${maxDate}
+                start-date=${this.startDate}
+                end-date=${this.endDate}
+                @terra-date-range-change="${__privateMethod(this, _handleDateRangeSliderChangeEvent, handleDateRangeSliderChangeEvent_fn)}"
+                @terra-date-selection-invalid="${__privateMethod(this, _handleInvalidDateSelection, handleInvalidDateSelection_fn)}"
+            ></terra-date-range-slider>
+            ${this.dateErrorMessage ? b`<div class="date-error" style="color: red;">
+                      ${this.dateErrorMessage}
+                  </div>` : null}
+        `;
+  }
+};
+_handleDateRangeSliderChangeEvent = new WeakSet();
+handleDateRangeSliderChangeEvent_fn = function(event) {
+  this.startDate = event.detail.startDate;
+  this.endDate = event.detail.endDate;
+};
+_handleInvalidDateSelection = new WeakSet();
+handleInvalidDateSelection_fn = function(event) {
+  this.dateErrorMessage = event.detail.message;
+};
+_handleVariableChange = new WeakSet();
+handleVariableChange_fn = function(event) {
+  const newEntryId = event.detail.entryId;
+  if (!this.variableEntryId || newEntryId === this.variableEntryId) {
+    return;
+  }
+  this.variableEntryId = newEntryId;
+  this.location = void 0;
+  this.lastChanged = "variable";
+  this.compatibilityWarning();
+};
+_handleMapChange = new WeakSet();
+handleMapChange_fn = function(event) {
+  console.log("map change event", event);
+  if (event.detail.type === "point" /* POINT */) {
+    this.location = `${event.detail.latLng.lat.toFixed(4)},${event.detail.latLng.lng.toFixed(4)}`;
+    this.lastChanged = "location";
+    this.compatibilityWarning();
+  }
+};
+_handleTimeSeriesDateRangeChange = new WeakSet();
+handleTimeSeriesDateRangeChange_fn = function(event) {
+  this.startDate = event.detail.startDate;
+  this.endDate = event.detail.endDate;
+};
+TerraDataRods.styles = [component_styles_default, data_rods_styles_default];
+TerraDataRods.dependencies = {
+  "terra-time-series": TerraTimeSeries,
+  "terra-date-range-slider": TerraDateRangeSlider,
+  "terra-spatial-picker": TerraSpatialPicker,
+  "terra-variable-combobox": TerraVariableCombobox
+};
+__decorateClass([
+  n({ attribute: "variable-entry-id", reflect: true })
+], TerraDataRods.prototype, "variableEntryId", 2);
+__decorateClass([
+  n({ reflect: true })
+], TerraDataRods.prototype, "collection", 2);
+__decorateClass([
+  n({ reflect: true })
+], TerraDataRods.prototype, "variable", 2);
+__decorateClass([
+  n({
+    attribute: "start-date",
+    reflect: true
+  })
+], TerraDataRods.prototype, "startDate", 2);
+__decorateClass([
+  n({
+    attribute: "end-date",
+    reflect: true
+  })
+], TerraDataRods.prototype, "endDate", 2);
+__decorateClass([
+  n({
+    reflect: true
+  })
+], TerraDataRods.prototype, "location", 2);
+__decorateClass([
+  n({ attribute: "bearer-token", reflect: false })
+], TerraDataRods.prototype, "bearerToken", 2);
+__decorateClass([
+  r()
+], TerraDataRods.prototype, "catalogVariable", 2);
+__decorateClass([
+  r()
+], TerraDataRods.prototype, "dateErrorMessage", 2);
+__decorateClass([
+  r()
+], TerraDataRods.prototype, "lastChanged", 2);
+__decorateClass([
+  r()
+], TerraDataRods.prototype, "spatialWarningMessage", 2);
+
+export {
+  TerraDataRods
+};

package/cdn/chunks/chunk.FUQEF2AE.js

@@ -0,0 +1,224 @@
+import {
+  menu_item_styles_default
+} from "./chunk.XWFTM3O5.js";
+import {
+  SubmenuController
+} from "./chunk.CLOSWCHA.js";
+import {
+  TerraPopup
+} from "./chunk.YE7HYUYN.js";
+import {
+  TerraLoader
+} from "./chunk.JZFBOMES.js";
+import {
+  HasSlotController,
+  getTextContent
+} from "./chunk.PACUQ7ID.js";
+import {
+  e
+} from "./chunk.KGXAA5I2.js";
+import {
+  TerraIcon
+} from "./chunk.L54U3KR7.js";
+import {
+  watch
+} from "./chunk.MPVZOQYA.js";
+import {
+  TerraElement,
+  component_styles_default,
+  e as e2,
+  n
+} from "./chunk.4CNDF3PH.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
+};

package/cdn/chunks/chunk.FZW3K6J4.js

@@ -0,0 +1,60 @@
+import {
+  getRandomIntInclusive
+} from "./chunk.YFGSWD7H.js";
+import {
+  skeleton_styles_default
+} from "./chunk.54FZLPJP.js";
+import {
+  TerraElement,
+  component_styles_default,
+  n
+} from "./chunk.4CNDF3PH.js";
+import {
+  b
+} from "./chunk.RRCYT4LP.js";
+import {
+  __decorateClass,
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/skeleton/skeleton.component.ts
+init_dirname();
+init_buffer();
+init_process();
+var TerraSkeleton = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.rows = 1;
+    this.effect = "pulse";
+    this.variableWidths = true;
+  }
+  render() {
+    return b`
+            ${new Array(parseInt(this.rows.toString())).fill(0).map(
+      () => b` <div
+                        part="base"
+                        class=${`skeleton ${this.effect === "pulse" ? "skeleton--pulse" : ""} ${this.effect === "sheen" ? "skeleton--sheen" : ""}`}
+                        style=${this.variableWidths ? `width: ${getRandomIntInclusive(60, 100)}%` : ""}
+                    >
+                        <div part="indicator" class="skeleton__indicator"></div>
+                    </div>`
+    )}
+        `;
+  }
+};
+TerraSkeleton.styles = [component_styles_default, skeleton_styles_default];
+__decorateClass([
+  n()
+], TerraSkeleton.prototype, "rows", 2);
+__decorateClass([
+  n()
+], TerraSkeleton.prototype, "effect", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], TerraSkeleton.prototype, "variableWidths", 2);
+
+export {
+  TerraSkeleton
+};