@nasa-terra/components 0.0.146 → 0.0.147

package/cdn/chunks/chunk.FXM6K5HM.js

@@ -0,0 +1,217 @@
+import {
+  i
+} from "./chunk.5NHXMCXD.js";
+import {
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.CZA6CSBG.js";
+
+// src/components/plot-toolbar/plot-toolbar.styles.ts
+init_dirname();
+init_buffer();
+init_process();
+var plot_toolbar_styles_default = i`
+    :host {
+        display: block;
+    }
+
+    header {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        position: relative;
+        z-index: 10;
+        padding-bottom: 10px;
+    }
+
+    .title {
+        margin: 0;
+        font-size: 1.25rem;
+    }
+
+    .subtitle {
+        font-weight: var(--terra-font-weight-normal);
+        margin: 0;
+        margin-bottom: 0.5em;
+        font-size: 0.875rem;
+    }
+
+    .toggles {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 0 1em;
+    }
+
+    .toggle {
+        position: relative;
+    }
+
+    .help-toggle {
+        display: var(--terra-plot-toolbar-help-menu-display, flex);
+    }
+
+    .toggle[aria-expanded='true']::after {
+        background-color: var(--terra-color-nasa-blue);
+        block-size: 0.125em;
+        border-radius: 0.25em;
+        bottom: -0.5em;
+        content: ' ';
+        inline-size: 100%;
+        left: 0;
+        position: absolute;
+    }
+
+    .toggles[data-mobile-view='true'] .toggle::part(base) {
+        background-color: antiquewhite;
+        border: 0;
+    }
+
+    .square-button {
+        border-radius: 0 !important; /* square corners */
+        width: 2.5em;
+        height: 2.5em;
+    }
+
+    menu {
+        all: unset;
+        position: absolute;
+        top: calc(100%);
+        right: 0;
+        z-index: 1000;
+        background: white;
+        border: 1px solid #ccc;
+        border-radius: 0.5em;
+        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
+        width: max-content;
+        min-width: 20ch;
+        max-width: 100%;
+        padding: 1em;
+        display: none;
+    }
+
+    menu[data-expanded='true'] {
+        display: block;
+    }
+
+    menu [role='menuitem'] {
+        display: block;
+        list-style: none;
+        margin: 0;
+        padding: 0.5em 0;
+    }
+
+    [role='menuitem'] p {
+        margin-block: 0.5em;
+    }
+
+    menu dt,
+    .menu-dialog dt {
+        font-weight: var(--terra-font-weight-semibold);
+    }
+
+    menu dd,
+    .menu-dialog dd {
+        font-style: italic;
+        text-wrap: balance;
+    }
+
+    .menu-dialog {
+        position: fixed;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        border: 0;
+        z-index: 1002;
+        background: var(--terra-color-spacesuit-white);
+        color: var(--terra-font-color-primary);
+    }
+
+    .menu-dialog[open] {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .menu-dialog terra-button {
+        align-self: flex-end;
+    }
+
+    .spacer {
+        padding-block: 1.375rem;
+    }
+
+    .location-text {
+        cursor: pointer;
+        transition: color 0.2s ease;
+        display: inline-flex;
+        align-items: center;
+    }
+
+    .location-icon,
+    .date-range-icon {
+        vertical-align: middle;
+        color: var(--terra-color-nasa-blue);
+    }
+
+    .location-text:hover,
+    .date-range-text:hover {
+        color: var(--terra-color-nasa-blue);
+    }
+
+    .location-tooltip {
+        position: absolute;
+        top: 100%;
+        left: 50px;
+        z-index: 1001;
+        background: white;
+        border: 1px solid #ccc;
+        border-radius: 0.5em;
+        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+        padding: 0.5em;
+        margin-top: 0.5em;
+        animation: fadeIn 0.2s ease-in-out;
+        min-width: 320px;
+    }
+
+    .location-tooltip terra-map {
+        height: auto !important;
+    }
+
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+            transform: translateY(-10px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    #settings {
+        opacity: 0.75;
+        position: absolute;
+        bottom: 150px;
+        left: 10px;
+        background: rgba(255, 255, 255, 0.9);
+        padding: 8px 10px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-family: monospace;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+        z-index: 10;
+        pointer-events: auto;
+    }
+
+    label {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+`;
+
+export {
+  plot_toolbar_styles_default
+};

package/cdn/chunks/chunk.GYCJQG4T.js

@@ -0,0 +1,19 @@
+import {
+  TerraCombobox
+} from "./chunk.O5K3KHME.js";
+import {
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.CZA6CSBG.js";
+
+// src/components/combobox/combobox.ts
+init_dirname();
+init_buffer();
+init_process();
+var combobox_default = TerraCombobox;
+TerraCombobox.define("terra-combobox");
+
+export {
+  combobox_default
+};

package/cdn/chunks/chunk.GZLLW27W.js

@@ -0,0 +1,29 @@
+import {
+  TerraDateRangeSlider
+} from "./chunk.CWG6CMJ3.js";
+import {
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.CZA6CSBG.js";
+
+// src/react/date-range-slider/index.ts
+init_dirname();
+init_buffer();
+init_process();
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "terra-date-range-slider";
+TerraDateRangeSlider.define("terra-date-range-slider");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraDateRangeSlider,
+  react: React,
+  events: {},
+  displayName: "TerraDateRangeSlider"
+});
+var date_range_slider_default = reactWrapper;
+
+export {
+  date_range_slider_default
+};

package/cdn/chunks/chunk.H6Z2D67J.js

@@ -0,0 +1,30 @@
+import {
+  caption_styles_default
+} from "./chunk.BZNRBGO6.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.VZRFHHI4.js";
+import {
+  x
+} from "./chunk.3ZQGAH53.js";
+import {
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.CZA6CSBG.js";
+
+// src/components/caption/caption.component.ts
+init_dirname();
+init_buffer();
+init_process();
+var TerraCaption = class extends TerraElement {
+  render() {
+    return x`<slot></slot>`;
+  }
+};
+TerraCaption.styles = [component_styles_default, caption_styles_default];
+
+export {
+  TerraCaption
+};

package/cdn/chunks/chunk.H7SYYQZN.js

@@ -0,0 +1,71 @@
+import {
+  tab_panel_styles_default
+} from "./chunk.MHFJ4UCV.js";
+import {
+  e
+} from "./chunk.P3OLQVQM.js";
+import {
+  watch
+} from "./chunk.5WMSKURU.js";
+import {
+  TerraElement,
+  component_styles_default,
+  n
+} from "./chunk.VZRFHHI4.js";
+import {
+  x
+} from "./chunk.3ZQGAH53.js";
+import {
+  __decorateClass,
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.CZA6CSBG.js";
+
+// src/components/tab-panel/tab-panel.component.ts
+init_dirname();
+init_buffer();
+init_process();
+var id = 0;
+var TerraTabPanel = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.attrId = ++id;
+    this.componentId = `terra-tab-panel-${this.attrId}`;
+    this.name = "";
+    this.active = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.id = this.id.length > 0 ? this.id : this.componentId;
+    this.setAttribute("role", "tabpanel");
+  }
+  handleActiveChange() {
+    this.setAttribute("aria-hidden", this.active ? "false" : "true");
+  }
+  render() {
+    return x`
+            <slot
+                part="base"
+                class=${e({
+      "tab-panel": true,
+      "tab-panel--active": this.active
+    })}
+            ></slot>
+        `;
+  }
+};
+TerraTabPanel.styles = [component_styles_default, tab_panel_styles_default];
+__decorateClass([
+  n({ reflect: true })
+], TerraTabPanel.prototype, "name", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], TerraTabPanel.prototype, "active", 2);
+__decorateClass([
+  watch("active")
+], TerraTabPanel.prototype, "handleActiveChange", 1);
+
+export {
+  TerraTabPanel
+};

package/cdn/chunks/chunk.H7YMNJUS.js

@@ -0,0 +1,33 @@
+import {
+  TerraTimeSeries
+} from "./chunk.WCPL6UF4.js";
+import {
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.CZA6CSBG.js";
+
+// src/react/time-series/index.ts
+init_dirname();
+init_buffer();
+init_process();
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "terra-time-series";
+TerraTimeSeries.define("terra-time-series");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraTimeSeries,
+  react: React,
+  events: {
+    onTerraDateRangeChange: "terra-date-range-change",
+    onTerraTimeSeriesDataChange: "terra-time-series-data-change"
+  },
+  displayName: "TerraTimeSeries"
+});
+var time_series_default = reactWrapper;
+
+export {
+  time_series_default
+};

package/cdn/chunks/chunk.HBOFYV7M.js

@@ -0,0 +1,293 @@
+import {
+  input_default
+} from "./chunk.BWTGS4KO.js";
+import {
+  earthdata_login_styles_default
+} from "./chunk.RZZHOKXL.js";
+import {
+  loader_default
+} from "./chunk.ZBHEVNXK.js";
+import {
+  AuthController
+} from "./chunk.PBKMNUYF.js";
+import {
+  icon_default
+} from "./chunk.QRITY6YZ.js";
+import {
+  button_default
+} from "./chunk.FK53O3WY.js";
+import {
+  s
+} from "./chunk.WQPCK3PB.js";
+import {
+  TerraElement,
+  component_styles_default,
+  e,
+  n,
+  r
+} from "./chunk.VZRFHHI4.js";
+import {
+  E,
+  x
+} from "./chunk.3ZQGAH53.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.CZA6CSBG.js";
+
+// src/components/earthdata-login/earthdata-login.component.ts
+init_dirname();
+init_buffer();
+init_process();
+var _authController, _handleUsernameInput, handleUsernameInput_fn, _handlePasswordInput, handlePasswordInput_fn, _validateUsername, validateUsername_fn, _validatePassword, validatePassword_fn, _handleFormSubmit, handleFormSubmit_fn;
+var TerraEarthdataLogin = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _handleUsernameInput);
+    __privateAdd(this, _handlePasswordInput);
+    __privateAdd(this, _validateUsername);
+    __privateAdd(this, _validatePassword);
+    __privateAdd(this, _handleFormSubmit);
+    this.username = "";
+    this.password = "";
+    this.hidePasswordToggle = false;
+    this.autoLogin = false;
+    this.usernameError = "";
+    this.passwordError = "";
+    __privateAdd(this, _authController, new AuthController(this));
+  }
+  firstUpdated() {
+    if (this.username && this.password) {
+      this.hidePasswordToggle = true;
+      if (this.autoLogin) {
+        __privateGet(this, _authController).loginTask.run([this.username, this.password]);
+      }
+    }
+  }
+  render() {
+    var _a;
+    return x`
+            <div class="login-container">
+                <div class="login-header">
+                    <a>
+                        <terra-icon name="nasa-logo"></terra-icon>
+                        <h1>Earthdata Login</h1>
+                    </a>
+                    <a
+                        href="https://urs.earthdata.nasa.gov/documentation/what_do_i_need_to_know"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        class="help-link"
+                        aria-label="Need help?"
+                    >
+                        <terra-icon name="question"></terra-icon>
+                    </a>
+                </div>
+
+                ${((_a = __privateGet(this, _authController).state.user) == null ? void 0 : _a.uid) ? x`<div class="login-form">
+                          <p>
+                              ${__privateGet(this, _authController).state.user.first_name},<br />
+                              You've successfully authenticated with Earthdata Login!
+                          </p>
+                          <terra-button
+                              @click=${() => __privateGet(this, _authController).logout()}
+                              size="small"
+                              outline
+                              >Logout</terra-button
+                          >
+                      </div>` : x`
+                          <form class="login-form" @submit=${__privateMethod(this, _handleFormSubmit, handleFormSubmit_fn)}>
+                              <terra-input
+                                  id="username-input"
+                                  label="Username"
+                                  name="username"
+                                  type="text"
+                                  .value=${this.username}
+                                  ?disabled=${__privateGet(this, _authController).loginTask.status === s.PENDING}
+                                  autocomplete="username"
+                                  .errorText=${this.usernameError || ""}
+                                  required
+                                  @input=${__privateMethod(this, _handleUsernameInput, handleUsernameInput_fn)}
+                                  @blur=${__privateMethod(this, _validateUsername, validateUsername_fn)}
+                              ></terra-input>
+
+                              <terra-input
+                                  id="password-input"
+                                  label="Password"
+                                  name="password"
+                                  type="password"
+                                  autocomplete="current-password"
+                                  ?password-toggle=${!this.hidePasswordToggle}
+                                  ?disabled=${__privateGet(this, _authController).loginTask.status === s.PENDING}
+                                  .value=${this.password}
+                                  .errorText=${this.passwordError || ""}
+                                  required
+                                  @input=${__privateMethod(this, _handlePasswordInput, handlePasswordInput_fn)}
+                                  @blur=${__privateMethod(this, _validatePassword, validatePassword_fn)}
+                              ></terra-input>
+
+                              <terra-button
+                                  type="submit"
+                                  variant="primary"
+                                  class="login-button"
+                                  ?disabled=${__privateGet(this, _authController).loginTask.status === s.PENDING}
+                              >
+                                  ${__privateGet(this, _authController).loginTask.render({
+      initial: () => x`Log in`,
+      pending: () => x`Logging In...`,
+      complete: () => x`Log in`,
+      error: () => x`Log in`
+    })}
+                              </terra-button>
+
+                              ${__privateGet(this, _authController).state.error ? x`<div class="form-feedback">
+                                        ${__privateGet(this, _authController).state.error}
+                                        ${__privateGet(this, _authController).state.error === "Invalid user credentials" ? x`<p>
+                                                  <a
+                                                      class="link"
+                                                      href="https://urs.earthdata.nasa.gov/retrieve_info"
+                                                      target="_blank"
+                                                      rel="noopener noreferrer"
+                                                      >Forgot username?</a
+                                                  >
+                                                  <a
+                                                      class="link"
+                                                      href="https://urs.earthdata.nasa.gov/reset_passwords/new"
+                                                      target="_blank"
+                                                      rel="noopener noreferrer"
+                                                      >Forgot password?</a
+                                                  >
+                                              </p>` : E}
+                                    </div>` : ""}
+                              <a
+                                  class="link register-link"
+                                  href="https://urs.earthdata.nasa.gov/users/new"
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                  >Register for a profile</a
+                              >
+                          </form>
+                      `}
+            </div>
+        `;
+  }
+};
+_authController = new WeakMap();
+_handleUsernameInput = new WeakSet();
+handleUsernameInput_fn = function(event) {
+  var _a;
+  const input = event.target;
+  this.username = input.value;
+  if (this.usernameError && this.username && ((_a = this.usernameInput) == null ? void 0 : _a.checkValidity())) {
+    this.usernameError = "";
+    if (this.usernameInput) {
+      this.usernameInput.setCustomValidity("");
+    }
+  }
+};
+_handlePasswordInput = new WeakSet();
+handlePasswordInput_fn = function(event) {
+  var _a;
+  const input = event.target;
+  this.password = input.value;
+  if (this.passwordError && this.password && ((_a = this.passwordInput) == null ? void 0 : _a.checkValidity())) {
+    this.passwordError = "";
+    if (this.passwordInput) {
+      this.passwordInput.setCustomValidity("");
+    }
+  }
+};
+_validateUsername = new WeakSet();
+validateUsername_fn = function() {
+  if (!this.username || this.username.trim() === "") {
+    this.usernameError = "Username is required";
+    if (this.usernameInput) {
+      this.usernameInput.setCustomValidity("Username is required");
+    }
+  } else {
+    this.usernameError = "";
+    if (this.usernameInput) {
+      this.usernameInput.setCustomValidity("");
+    }
+  }
+};
+_validatePassword = new WeakSet();
+validatePassword_fn = function() {
+  if (!this.password || this.password.trim() === "") {
+    this.passwordError = "Password is required";
+    if (this.passwordInput) {
+      this.passwordInput.setCustomValidity("Password is required");
+    }
+  } else {
+    this.passwordError = "";
+    if (this.passwordInput) {
+      this.passwordInput.setCustomValidity("");
+    }
+  }
+};
+_handleFormSubmit = new WeakSet();
+handleFormSubmit_fn = function(event) {
+  event.preventDefault();
+  __privateMethod(this, _validateUsername, validateUsername_fn).call(this);
+  __privateMethod(this, _validatePassword, validatePassword_fn).call(this);
+  const form = event.target;
+  if (form.checkValidity() && this.username && this.password) {
+    __privateGet(this, _authController).loginTask.run([this.username, this.password]);
+  } else {
+    if (this.usernameInput) {
+      this.usernameInput.reportValidity();
+    }
+    if (this.passwordInput) {
+      this.passwordInput.reportValidity();
+    }
+  }
+};
+TerraEarthdataLogin.dependencies = {
+  "terra-button": button_default,
+  "terra-icon": icon_default,
+  "terra-input": input_default,
+  "terra-loader": loader_default
+};
+TerraEarthdataLogin.styles = [component_styles_default, earthdata_login_styles_default];
+__decorateClass([
+  n({ attribute: "logged-in-message" })
+], TerraEarthdataLogin.prototype, "loggedInMessage", 2);
+__decorateClass([
+  n({ attribute: "logged-out-message" })
+], TerraEarthdataLogin.prototype, "loggedOutMessage", 2);
+__decorateClass([
+  n({ attribute: "loading-message" })
+], TerraEarthdataLogin.prototype, "loadingMessage", 2);
+__decorateClass([
+  n()
+], TerraEarthdataLogin.prototype, "username", 2);
+__decorateClass([
+  n()
+], TerraEarthdataLogin.prototype, "password", 2);
+__decorateClass([
+  n({ attribute: "hide-password-toggle", type: Boolean })
+], TerraEarthdataLogin.prototype, "hidePasswordToggle", 2);
+__decorateClass([
+  n({ attribute: "auto-login", type: Boolean })
+], TerraEarthdataLogin.prototype, "autoLogin", 2);
+__decorateClass([
+  r()
+], TerraEarthdataLogin.prototype, "usernameError", 2);
+__decorateClass([
+  r()
+], TerraEarthdataLogin.prototype, "passwordError", 2);
+__decorateClass([
+  e("#username-input")
+], TerraEarthdataLogin.prototype, "usernameInput", 2);
+__decorateClass([
+  e("#password-input")
+], TerraEarthdataLogin.prototype, "passwordInput", 2);
+
+export {
+  TerraEarthdataLogin
+};