@nasa-terra/components 0.0.66 → 0.0.68

package/cdn/chunks/chunk.V2Z7ZBTD.js

@@ -0,0 +1,293 @@
+// src/components/combobox/combobox.styles.ts
+import { css } from "lit";
+var combobox_styles_default = css`
+    :host {
+        --color-neutral--100: #f7f7f7; /* Retain these 2 local color variables rather than HDS references because color-carbon-XX scale flips with light/dark theme */
+        --color-neutral--200: #d1d1d1;
+
+        --label-height: 1.8125rem;
+        --help-height: 1.8125rem;
+        --host-height: 5.8125rem;
+
+        block-size: var(--terra-block-size, 2.1875rem);
+        box-sizing: border-box;
+        color: #1b1b1b; /* HDS uses this color for body text but does not have a defined color in the HDS palette */
+        contain: layout size style;
+        contain-intrinsic-size: var(--terra-inline-size, 100%)
+            calc(33vh + var(--terra-block-size, 2.1875rem));
+        display: block;
+        font-family: var(--terra-font-family--public-sans);
+        height: var(--terra-block-size, var(--host-height));
+        inline-size: var(--terra-inline-size, 100%);
+        position: relative;
+    }
+
+    :host([hide-help]) {
+        height: calc(
+            var(--terra-block-size, var(--host-height)) - var(--help-height)
+        );
+    }
+
+    :host([hide-label]) {
+        height: calc(
+            var(--terra-block-size, var(--host-height)) - var(--label-height)
+        );
+    }
+
+    :host([hide-help][hide-label]) {
+        height: calc(
+            var(--terra-block-size, var(--host-height)) - var(--help-height) - var(
+                    --label-height
+                )
+        );
+    }
+
+    * {
+        box-sizing: inherit;
+    }
+
+    .search-input-group {
+        block-size: 100%;
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    .combobox {
+        block-size: var(--terra-block-size, 2.1875rem);
+        flex: 1 1 auto;
+        font-size: 1rem;
+        padding-inline: 0.5rem;
+        transition:
+            background-color 0.2s ease,
+            border-color 0.2s ease;
+    }
+
+    .combobox::placeholder {
+        color: var(--terra-color-carbon-60);
+    }
+
+    .combobox:focus {
+        border-color: var(--terra-color-carbon-40);
+        outline: 0;
+    }
+
+    .search-input-group:has(.combobox:not(:focus)) + .search-results[open] {
+        border-color: var(--terra-color-carbon-30);
+    }
+
+    .combobox-button {
+        position: absolute;
+        right: 0;
+        z-index: 2;
+        margin-block: 0;
+        margin-inline: 0;
+        outline: 0;
+        transition:
+            background-color 0.2s ease,
+            border-color 0.2s ease;
+    }
+
+    .combobox-button[aria-expanded='true'] .chevron {
+        rotate: -0.5turn;
+    }
+
+    .button-icon {
+        height: 1rem;
+        width: 1rem;
+    }
+
+    .chevron {
+        transition: rotate 0.2s ease;
+        will-change: rotate;
+    }
+
+    .spinner {
+        transform-origin: center;
+        animation: spin 2s linear infinite;
+    }
+
+    .spinner circle {
+        stroke-linecap: round;
+        animation: vary-stroke 1.5s ease-in-out infinite;
+    }
+
+    .search-help {
+        bottom: 0;
+        color: var(--terra-color-carbon-60);
+        flex: 1 1 100%;
+        font-size: var(--terra-font-size-small);
+        line-height: var(--terra-line-height-normal);
+        margin-block: 0;
+        position: absolute;
+        bottom: -10px;
+    }
+
+    .external-link {
+        fill: currentColor;
+        vertical-align: middle;
+    }
+
+    .search-results {
+        background-color: var(--terra-color-spacesuit-white);
+        block-size: calc(33vh - var(--terra-block-size, 2.1875rem));
+        border-block-end: 2px solid transparent;
+        border-inline: 2px solid transparent;
+        contain: strict;
+        contain-intrinsic-size: var(--terra-inline-size, 100%)
+            calc(33vh - var(--terra-block-size, 2.1875rem));
+        content-visibility: hidden;
+        left: 0;
+        margin-block: 0;
+        margin-inline: 0;
+        max-height: 0;
+        opacity: 0;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        padding-block: 0.5rem;
+        padding-inline: 0px;
+        position: absolute;
+        right: 0;
+        visibility: hidden;
+        transition:
+            background-color 0.2s ease,
+            border-color 0.2s ease;
+    }
+
+    .search-results[open] {
+        border-color: var(--terra-color-carbon-40);
+        content-visibility: auto;
+        max-height: calc(33vh - var(--terra-block-size, 2.1875rem));
+        opacity: 1;
+        visibility: visible;
+    }
+
+    .search-results .updating {
+        font-size: var(--terra-font-size-x-large);
+        padding-block: 4rem;
+        text-align: center;
+    }
+
+    .search-results .error {
+        color: var(--terra-color-nasa-red);
+        font-family: var(--terra-font-family--dm-mono);
+        padding-block: 2rem;
+    }
+
+    .listbox-option-group {
+        padding-inline: 0.5rem;
+        padding-block: 1rem 0.5rem;
+    }
+
+    .group-title {
+        padding-inline: 0.5rem;
+        font-family: var(--terra-font-family--inter);
+        font-weight: 700;
+        margin-block: 0;
+    }
+
+    .listbox-option-group ul {
+        padding-left: 0px;
+    }
+
+    .listbox-option {
+        cursor: pointer;
+        list-style: none;
+        position: relative;
+        padding-left: 2rem;
+    }
+
+    .listbox-option:hover,
+    .listbox-option[aria-selected='true'] {
+        transition: background-color 0.2s ease;
+    }
+
+    @media (prefers-reduced-motion) {
+        .button-icon {
+            transition: rotate 0s ease;
+        }
+
+        .search-results {
+            scroll-behavior: auto;
+        }
+    }
+
+    @keyframes spin {
+        to {
+            transform: rotate(1turn);
+        }
+    }
+
+    @keyframes vary-stroke {
+        0% {
+            stroke-dasharray: 0 150;
+            stroke-dashoffset: 0;
+        }
+        47.5% {
+            stroke-dasharray: 42 150;
+            stroke-dashoffset: -16;
+        }
+        95%,
+        100% {
+            stroke-dasharray: 42 150;
+            stroke-dashoffset: -59;
+        }
+    }
+
+    /* General reset for skeleton elements */
+    .skeleton,
+    .skeleton * {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        box-sizing: border-box;
+    }
+
+    /* Styling for the skeleton groups */
+    .skeleton.listbox-option-group {
+        padding: 0.25rem;
+        margin: 0.5rem 0;
+        background: var(--color-neutral--100); /* Light background for the group */
+    }
+
+    /* Styling for the title in each group */
+    .skeleton-title {
+        display: flex;
+        height: 1.25rem;
+        width: 80%; /* Slightly longer than before */
+        background-color: var(--color-neutral--100);
+        margin-bottom: 10px;
+    }
+
+    /* Styling for each option inside the group */
+    .skeleton .listbox-option {
+        height: 1rem;
+        width: 60%; /* Shorter width to differentiate from title */
+        background-color: var(--color-neutral--200);
+        margin-top: 5px;
+        margin-left: 1.5rem;
+    }
+
+    /* Keyframes for the animation */
+    @keyframes pulse {
+        0%,
+        100% {
+            background-color: var(
+                --terra-color-neutral--200,
+                var(--color-neutral--200)
+            );
+        }
+        50% {
+            background-color: var(--color-neutral--100);
+        }
+    }
+
+    /* Applying the animation to simulate loading */
+    .skeleton-title,
+    .skeleton .listbox-option {
+        animation: pulse 2s infinite ease-in-out;
+    }
+`;
+
+export {
+  combobox_styles_default
+};

package/cdn/chunks/chunk.V3EFWONT.js

@@ -0,0 +1,26 @@
+// src/utilities/environment.ts
+var Environment = /* @__PURE__ */ ((Environment2) => {
+  Environment2["UAT"] = "uat";
+  Environment2["PROD"] = "prod";
+  return Environment2;
+})(Environment || {});
+function getEnvironment() {
+  const localStorageEnv = localStorage.getItem("terra-environment");
+  if (localStorageEnv === "uat") {
+    return "uat" /* UAT */;
+  }
+  if (localStorageEnv === "prod") {
+    return "prod" /* PROD */;
+  }
+  const url = window.location.href;
+  const isUatUrl = url.includes("https://uat.") || // e.g. https://uat.urs.earthdata.nasa.gov/
+  url.includes("https://migrate.") || // e.g. https://migrate.earthdata.nasa.gov/
+  url.includes(".uat.") || // e.g. https://cmr.uat.earthdata.nasa.gov/
+  url.includes("-test.");
+  return isUatUrl ? "uat" /* UAT */ : "prod" /* PROD */;
+}
+
+export {
+  Environment,
+  getEnvironment
+};

package/cdn/chunks/chunk.V7LXD3II.js

@@ -0,0 +1,318 @@
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk.TVFCHGU3.js";
+
+// src/internal/form.ts
+var formCollections = /* @__PURE__ */ new WeakMap();
+var reportValidityOverloads = /* @__PURE__ */ new WeakMap();
+var checkValidityOverloads = /* @__PURE__ */ new WeakMap();
+var userInteractedControls = /* @__PURE__ */ new WeakSet();
+var interactions = /* @__PURE__ */ new WeakMap();
+var FormControlController = class {
+  constructor(host, options) {
+    this.handleFormData = (event) => {
+      const disabled = this.options.disabled(this.host);
+      const name = this.options.name(this.host);
+      const value = this.options.value(this.host);
+      const isButton = this.host.tagName.toLowerCase() === "terra-button";
+      if (this.host.isConnected && !disabled && !isButton && typeof name === "string" && name.length > 0 && typeof value !== "undefined") {
+        if (Array.isArray(value)) {
+          ;
+          value.forEach((val) => {
+            event.formData.append(
+              name,
+              val.toString()
+            );
+          });
+        } else {
+          event.formData.append(
+            name,
+            value.toString()
+          );
+        }
+      }
+    };
+    this.handleFormSubmit = (event) => {
+      var _a;
+      const disabled = this.options.disabled(this.host);
+      const reportValidity = this.options.reportValidity;
+      if (this.form && !this.form.noValidate) {
+        (_a = formCollections.get(this.form)) == null ? void 0 : _a.forEach((control) => {
+          this.setUserInteracted(control, true);
+        });
+      }
+      if (this.form && !this.form.noValidate && !disabled && !reportValidity(this.host)) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+    };
+    this.handleFormReset = () => {
+      this.options.setValue(this.host, this.options.defaultValue(this.host));
+      this.setUserInteracted(this.host, false);
+      interactions.set(this.host, []);
+    };
+    this.handleInteraction = (event) => {
+      const emittedEvents = interactions.get(this.host);
+      if (!emittedEvents.includes(event.type)) {
+        emittedEvents.push(event.type);
+      }
+      if (emittedEvents.length === this.options.assumeInteractionOn.length) {
+        this.setUserInteracted(this.host, true);
+      }
+    };
+    this.checkFormValidity = () => {
+      if (this.form && !this.form.noValidate) {
+        const elements = this.form.querySelectorAll("*");
+        for (const element of elements) {
+          if (typeof element.checkValidity === "function") {
+            if (!element.checkValidity()) {
+              return false;
+            }
+          }
+        }
+      }
+      return true;
+    };
+    this.reportFormValidity = () => {
+      if (this.form && !this.form.noValidate) {
+        const elements = this.form.querySelectorAll("*");
+        for (const element of elements) {
+          if (typeof element.reportValidity === "function") {
+            if (!element.reportValidity()) {
+              return false;
+            }
+          }
+        }
+      }
+      return true;
+    };
+    ;
+    (this.host = host).addController(this);
+    this.options = __spreadValues({
+      form: (input) => {
+        const formId = input.form;
+        if (formId) {
+          const root = input.getRootNode();
+          const form = root.querySelector(`#${formId}`);
+          if (form) {
+            return form;
+          }
+        }
+        return input.closest("form");
+      },
+      name: (input) => input.name,
+      value: (input) => input.value,
+      defaultValue: (input) => input.defaultValue,
+      disabled: (input) => {
+        var _a;
+        return (_a = input.disabled) != null ? _a : false;
+      },
+      reportValidity: (input) => typeof input.reportValidity === "function" ? input.reportValidity() : true,
+      checkValidity: (input) => typeof input.checkValidity === "function" ? input.checkValidity() : true,
+      setValue: (input, value) => input.value = value,
+      assumeInteractionOn: ["terra-input"]
+    }, options);
+  }
+  hostConnected() {
+    const form = this.options.form(this.host);
+    if (form) {
+      this.attachForm(form);
+    }
+    interactions.set(this.host, []);
+    this.options.assumeInteractionOn.forEach((event) => {
+      this.host.addEventListener(event, this.handleInteraction);
+    });
+  }
+  hostDisconnected() {
+    this.detachForm();
+    interactions.delete(this.host);
+    this.options.assumeInteractionOn.forEach((event) => {
+      this.host.removeEventListener(event, this.handleInteraction);
+    });
+  }
+  hostUpdated() {
+    const form = this.options.form(this.host);
+    if (!form) {
+      this.detachForm();
+    }
+    if (form && this.form !== form) {
+      this.detachForm();
+      this.attachForm(form);
+    }
+    if (this.host.hasUpdated) {
+      this.setValidity(this.host.validity.valid);
+    }
+  }
+  attachForm(form) {
+    if (form) {
+      this.form = form;
+      if (formCollections.has(this.form)) {
+        formCollections.get(this.form).add(this.host);
+      } else {
+        formCollections.set(this.form, /* @__PURE__ */ new Set([this.host]));
+      }
+      this.form.addEventListener("formdata", this.handleFormData);
+      this.form.addEventListener("submit", this.handleFormSubmit);
+      this.form.addEventListener("reset", this.handleFormReset);
+      if (!reportValidityOverloads.has(this.form)) {
+        reportValidityOverloads.set(this.form, this.form.reportValidity);
+        this.form.reportValidity = () => this.reportFormValidity();
+      }
+      if (!checkValidityOverloads.has(this.form)) {
+        checkValidityOverloads.set(this.form, this.form.checkValidity);
+        this.form.checkValidity = () => this.checkFormValidity();
+      }
+    } else {
+      this.form = void 0;
+    }
+  }
+  detachForm() {
+    if (!this.form)
+      return;
+    const formCollection = formCollections.get(this.form);
+    if (!formCollection) {
+      return;
+    }
+    formCollection.delete(this.host);
+    if (formCollection.size <= 0) {
+      this.form.removeEventListener("formdata", this.handleFormData);
+      this.form.removeEventListener("submit", this.handleFormSubmit);
+      this.form.removeEventListener("reset", this.handleFormReset);
+      if (reportValidityOverloads.has(this.form)) {
+        this.form.reportValidity = reportValidityOverloads.get(this.form);
+        reportValidityOverloads.delete(this.form);
+      }
+      if (checkValidityOverloads.has(this.form)) {
+        this.form.checkValidity = checkValidityOverloads.get(this.form);
+        checkValidityOverloads.delete(this.form);
+      }
+      this.form = void 0;
+    }
+  }
+  setUserInteracted(el, hasInteracted) {
+    if (hasInteracted) {
+      userInteractedControls.add(el);
+    } else {
+      userInteractedControls.delete(el);
+    }
+    el.requestUpdate();
+  }
+  doAction(type, submitter) {
+    if (this.form) {
+      const button = document.createElement("button");
+      button.type = type;
+      button.style.position = "absolute";
+      button.style.width = "0";
+      button.style.height = "0";
+      button.style.clipPath = "inset(50%)";
+      button.style.overflow = "hidden";
+      button.style.whiteSpace = "nowrap";
+      if (submitter) {
+        button.name = submitter.name;
+        button.value = submitter.value;
+        [
+          "formaction",
+          "formenctype",
+          "formmethod",
+          "formnovalidate",
+          "formtarget"
+        ].forEach((attr) => {
+          if (submitter.hasAttribute(attr)) {
+            button.setAttribute(attr, submitter.getAttribute(attr));
+          }
+        });
+      }
+      this.form.append(button);
+      button.click();
+      button.remove();
+    }
+  }
+  /** Returns the associated `<form>` element, if one exists. */
+  getForm() {
+    var _a;
+    return (_a = this.form) != null ? _a : null;
+  }
+  /** Resets the form, restoring all the control to their default value */
+  reset(submitter) {
+    this.doAction("reset", submitter);
+  }
+  /** Submits the form, triggering validation and form data injection. */
+  submit(submitter) {
+    this.doAction("submit", submitter);
+  }
+  /**
+   * Synchronously sets the form control's validity. Call this when you know the future validity but need to update
+   * the host element immediately, i.e. before Lit updates the component in the next update.
+   */
+  setValidity(isValid) {
+    const host = this.host;
+    const hasInteracted = Boolean(userInteractedControls.has(host));
+    const required = Boolean(host.required);
+    host.toggleAttribute("data-required", required);
+    host.toggleAttribute("data-optional", !required);
+    host.toggleAttribute("data-invalid", !isValid);
+    host.toggleAttribute("data-valid", isValid);
+    host.toggleAttribute("data-user-invalid", !isValid && hasInteracted);
+    host.toggleAttribute("data-user-valid", isValid && hasInteracted);
+  }
+  /**
+   * Updates the form control's validity based on the current value of `host.validity.valid`. Call this when anything
+   * that affects constraint validation changes so the component receives the correct validity states.
+   */
+  updateValidity() {
+    const host = this.host;
+    this.setValidity(host.validity.valid);
+  }
+  /**
+   * Dispatches a non-bubbling, cancelable custom event of type `terra-invalid`.
+   * If the `terra-invalid` event will be cancelled then the original `invalid`
+   * event (which may have been passed as argument) will also be cancelled.
+   * If no original `invalid` event has been passed then the `terra-invalid`
+   * event will be cancelled before being dispatched.
+   */
+  emitInvalidEvent(originalInvalidEvent) {
+    const slInvalidEvent = new CustomEvent(
+      "terra-invalid",
+      {
+        bubbles: false,
+        composed: false,
+        cancelable: true,
+        detail: {}
+      }
+    );
+    if (!originalInvalidEvent) {
+      slInvalidEvent.preventDefault();
+    }
+    if (!this.host.dispatchEvent(slInvalidEvent)) {
+      originalInvalidEvent == null ? void 0 : originalInvalidEvent.preventDefault();
+    }
+  }
+};
+var validValidityState = Object.freeze({
+  badInput: false,
+  customError: false,
+  patternMismatch: false,
+  rangeOverflow: false,
+  rangeUnderflow: false,
+  stepMismatch: false,
+  tooLong: false,
+  tooShort: false,
+  typeMismatch: false,
+  valid: true,
+  valueMissing: false
+});
+var valueMissingValidityState = Object.freeze(__spreadProps(__spreadValues({}, validValidityState), {
+  valid: false,
+  valueMissing: true
+}));
+var customErrorValidityState = Object.freeze(__spreadProps(__spreadValues({}, validValidityState), {
+  valid: false,
+  customError: true
+}));
+
+export {
+  formCollections,
+  FormControlController,
+  validValidityState
+};

package/cdn/chunks/{chunk.NC5TCHFE.js → chunk.VDOKMZL7.js}

@@ -1,16 +1,16 @@
 import {
   TerraIcon
-} from "./chunk.QJ4KM4TA.js";
-import {
-  accordion_styles_default
-} from "./chunk.I4WNPQOC.js";
+} from "./chunk.HVXUUXZ7.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.AOJTBQKP.js";
+} from "./chunk.WXFIXIOS.js";
 import {
   n
 } from "./chunk.KACZXI5J.js";
+import {
+  accordion_styles_default
+} from "./chunk.I4WNPQOC.js";
 import {
   x
 } from "./chunk.LL3RMB25.js";

package/cdn/chunks/{chunk.BI76W67M.js → chunk.VGHXDEZO.js}

@@ -1,6 +1,6 @@
 import {
   TerraTimeAverageMap
-} from "./chunk.MOVW5G4G.js";
+} from "./chunk.37HJNI4K.js";
 import {
   init_buffer,
   init_dirname,

package/cdn/chunks/{chunk.AQODH346.js → chunk.VLZAS4LQ.js}

@@ -1,6 +1,6 @@
 import {
   gql
-} from "./chunk.KAJGV2AN.js";
+} from "./chunk.LLQADAZV.js";
 import {
   init_buffer,
   init_dirname,
@@ -112,6 +112,7 @@ var GET_VARIABLES = gql`
                 dataFieldUnits
                 dataProductDescriptionUrl
                 dataFieldDescriptionUrl
+                dataProductInstrumentShortName
             }
             facets {
                 category

package/cdn/chunks/{chunk.2A2HFMGZ.js → chunk.VUJ26IHB.js}

@@ -7,7 +7,7 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.AOJTBQKP.js";
+} from "./chunk.WXFIXIOS.js";
 import {
   n
 } from "./chunk.KACZXI5J.js";

package/cdn/chunks/{chunk.JIBQZDEG.js → chunk.VYDVYEG6.js}

@@ -1,6 +1,6 @@
 import {
   TerraVariableKeywordSearch
-} from "./chunk.K3JEGUHG.js";
+} from "./chunk.T33FEXFP.js";
 import {
   init_buffer,
   init_dirname,