@nasa-terra/components 0.0.10 → 0.0.16

package/README.md

@@ -24,10 +24,10 @@ This will spin up the dev server. After the initial build, a browser will open a
 
 ### Building
 
-To generate a production build, run the following command.
+To generate a production build, run the following commands.
 
 ```bash
-npm run build
+npm run build # to build the Lit components
 ```
 
 ### Creating New Components
@@ -51,6 +51,19 @@ Then run the following:
 -   `uv pip install -e ".[dev]"` - install dependencies (see pyproject.toml)
 -   `./.venv/bin/jupyter lab` - spins up Jupyter lab and should open the browser for you
 
+### Publishing to NPM and PyPI
+
+The Lit components are available on NPM at: https://www.npmjs.com/package/@nasa-terra/components
+The Python widgets are available on PyPI: https://pypi.org/project/terra_ui_components/
+
+To build a new version and publish it, you can use NPM commands. The Python equivalents will be run automatically for you (see the "scripts" in package.json for details). You will need access to both repositories in order to publish.
+
+```bash
+# commit all your changes first
+npm version patch # bump the version, you can use "major", "minor", "patch", etc.
+npm publish --access=public
+```
+
 ## License
 
 Terra UI Components were created by the NASA GES DISC team, on top of the amazing library Shoelace.

package/cdn/chunks/{chunk.RJSQ5GQD.js → chunk.2DQS7YWJ.js}

@@ -1,6 +1,6 @@
 import {
   formCollections
-} from "./chunk.BT4IJCQK.js";
+} from "./chunk.KAV5L6Z5.js";
 
 // src/utilities/form.ts
 function serialize(form) {

package/cdn/chunks/{chunk.OYIXDSOR.js → chunk.2GTDPFRM.js}

@@ -1,6 +1,6 @@
 import {
   TerraIcon
-} from "./chunk.HZX5FZ7S.js";
+} from "./chunk.NZLN7XGH.js";
 
 // src/react/icon/index.ts
 import * as React from "react";

package/cdn/chunks/chunk.2KFIIWTA.js

@@ -0,0 +1,53 @@
+import {
+  getRandomIntInclusive
+} from "./chunk.7PAVW6KC.js";
+import {
+  skeleton_styles_default
+} from "./chunk.FBOXM56P.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.EPQIDDJG.js";
+import {
+  __decorateClass
+} from "./chunk.TVFCHGU3.js";
+
+// src/components/skeleton/skeleton.component.ts
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { SlSkeleton } from "@shoelace-style/shoelace";
+var TerraSkeleton = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.rows = 1;
+    this.effect = "pulse";
+    this.variableWidths = true;
+  }
+  render() {
+    return html`
+            ${new Array(parseInt(this.rows.toString())).fill(0).map(
+      () => html`<sl-skeleton
+                            effect=${this.effect}
+                            style=${this.variableWidths ? `width: ${getRandomIntInclusive(60, 100)}%` : ""}
+                        ></sl-skeleton>`
+    )}
+        `;
+  }
+};
+TerraSkeleton.styles = [component_styles_default, skeleton_styles_default];
+TerraSkeleton.dependencies = {
+  "sl-skeleton": SlSkeleton
+};
+__decorateClass([
+  property()
+], TerraSkeleton.prototype, "rows", 2);
+__decorateClass([
+  property()
+], TerraSkeleton.prototype, "effect", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], TerraSkeleton.prototype, "variableWidths", 2);
+
+export {
+  TerraSkeleton
+};

package/cdn/chunks/{chunk.XF5FTC6G.js → chunk.2TEPJ23V.js}

@@ -1,6 +1,6 @@
 import {
   TerraVariableCombobox
-} from "./chunk.OEXEZBPR.js";
+} from "./chunk.5EGY75T5.js";
 
 // src/components/variable-combobox/variable-combobox.ts
 var variable_combobox_default = TerraVariableCombobox;

package/cdn/chunks/{chunk.MVSG72ZT.js → chunk.2TIJ6R6B.js}

@@ -1,6 +1,6 @@
 import {
   TerraButton
-} from "./chunk.4AB3LJPJ.js";
+} from "./chunk.QQ3GAD4X.js";
 
 // src/react/button/index.ts
 import * as React from "react";

package/cdn/chunks/chunk.2V4XFMTB.js

@@ -0,0 +1,7 @@
+// src/utilities/animation.ts
+import { getAnimationNames, getEasingNames } from "@shoelace-style/shoelace";
+
+export {
+  getAnimationNames,
+  getEasingNames
+};

package/cdn/chunks/{chunk.KMTO4VEC.js → chunk.336JMC6Z.js}

@@ -2,7 +2,7 @@ import {
   __commonJS,
   __spreadValues,
   __toESM
-} from "./chunk.6QUGTGJO.js";
+} from "./chunk.MR27IH5Z.js";
 
 // node_modules/leaflet/dist/leaflet-src.js
 var require_leaflet_src = __commonJS({

package/{dist/chunks/chunk.QFDWDOGH.js → cdn/chunks/chunk.34PQNYPP.js}

@@ -1,6 +1,6 @@
 import {
   TerraVariableCombobox
-} from "./chunk.76XK3OGD.js";
+} from "./chunk.NXW5W246.js";
 
 // src/components/variable-combobox/variable-combobox.ts
 var variable_combobox_default = TerraVariableCombobox;

package/cdn/chunks/{chunk.ABHIFWYD.js → chunk.3ENNXZ6R.js}

@@ -10,11 +10,13 @@ import {
   __await,
   __commonJS,
   __privateAdd,
+  __privateGet,
   __privateMethod,
+  __privateSet,
   __spreadProps,
   __spreadValues,
   __toESM
-} from "./chunk.6QUGTGJO.js";
+} from "./chunk.MR27IH5Z.js";
 
 // node_modules/handlebars/dist/cjs/handlebars/utils.js
 var require_utils = __commonJS({
@@ -5989,9 +5991,9 @@ var plotlyDefaultData = {
   line: { color: "rgb(28, 103, 227)" }
   // TODO: configureable?
 };
-var _loadTimeSeries, loadTimeSeries_fn, _parseTimeSeriesCsv, parseTimeSeriesCsv_fn, _getDataInRange, getDataInRange_fn;
+var _bearerToken, _loadTimeSeries, loadTimeSeries_fn, _parseTimeSeriesCsv, parseTimeSeriesCsv_fn, _getDataInRange, getDataInRange_fn;
 var TimeSeriesController = class {
-  constructor(host) {
+  constructor(host, bearerToken) {
     __privateAdd(this, _loadTimeSeries);
     /**
      * the data we receive for the time series is in CSV format, but with metadata at the top
@@ -6002,12 +6004,14 @@ var TimeSeriesController = class {
      * given a set of data and a date range, will return only the data that falls within that range
      */
     __privateAdd(this, _getDataInRange);
+    __privateAdd(this, _bearerToken, null);
     this.emptyPlotData = [
       __spreadProps(__spreadValues({}, plotlyDefaultData), {
         x: [],
         y: []
       })
     ];
+    __privateSet(this, _bearerToken, bearerToken);
     this.host = host;
     this.task = new h(host, {
       autoRun: false,
@@ -6031,6 +6035,7 @@ var TimeSeriesController = class {
     return this.task.render(renderFunctions);
   }
 };
+_bearerToken = new WeakMap();
 _loadTimeSeries = new WeakSet();
 loadTimeSeries_fn = async function(signal) {
   const collection = this.collection.replace(
@@ -6064,7 +6069,13 @@ loadTimeSeries_fn = async function(signal) {
     endDate: format(requestEndDate, "yyyy-MM-dd") + "T00",
     location: `GEOM:POINT(${this.location})`
   });
-  const response = await fetch(url, { mode: "cors", signal });
+  const response = await fetch(url, {
+    mode: "cors",
+    signal,
+    headers: __spreadValues({
+      Accept: "application/json"
+    }, __privateGet(this, _bearerToken) ? { Authorization: `Bearer: ${__privateGet(this, _bearerToken)}` } : {})
+  });
   if (!response.ok) {
     throw new Error(
       `Failed to fetch time series data: ${response.statusText}`

package/{dist/chunks/chunk.DS3DCGZJ.js → cdn/chunks/chunk.3IXG5IJD.js}

@@ -1,6 +1,6 @@
 import {
   TerraCombobox
-} from "./chunk.PBEAZMSE.js";
+} from "./chunk.NGNH7UG4.js";
 
 // src/react/combobox/index.ts
 import * as React from "react";

package/{dist/chunks/chunk.D36ZJXGZ.js → cdn/chunks/chunk.45HI7TFT.js}

@@ -1,6 +1,6 @@
 import {
   TerraCombobox
-} from "./chunk.PBEAZMSE.js";
+} from "./chunk.Q44TP6D4.js";
 
 // src/components/combobox/combobox.ts
 var combobox_default = TerraCombobox;

package/cdn/chunks/chunk.57LVW27O.js

@@ -0,0 +1,11 @@
+import {
+  TerraLogin
+} from "./chunk.DV6U7J5D.js";
+
+// src/components/login/login.ts
+var login_default = TerraLogin;
+TerraLogin.define("terra-login");
+
+export {
+  login_default
+};

package/cdn/chunks/{chunk.OEXEZBPR.js → chunk.5EGY75T5.js}

@@ -1,45 +1,45 @@
 import {
   FetchController
-} from "./chunk.GCXPHNE2.js";
+} from "./chunk.DY5SMOW7.js";
+import {
+  variable_combobox_styles_default
+} from "./chunk.SWEK2UAG.js";
 import {
   clearSelection,
   groupDocsByCollection,
   removeEmptyCollections,
   renderSearchResult,
   walkToOption
-} from "./chunk.7JHEI2UU.js";
-import {
-  variable_combobox_styles_default
-} from "./chunk.SWEK2UAG.js";
-import {
-  icon_default
-} from "./chunk.KNCEBCFL.js";
-import {
-  button_default
-} from "./chunk.3IJDKBGJ.js";
+} from "./chunk.MJY6U2Q2.js";
 import {
   h
 } from "./chunk.QB5SASDL.js";
+import {
+  icon_default
+} from "./chunk.MGN45BTW.js";
 import {
   Fuse
-} from "./chunk.NTNL4P6D.js";
+} from "./chunk.U7L2FN7F.js";
+import {
+  o
+} from "./chunk.QEA4QW6G.js";
 import {
   n as n2
 } from "./chunk.2XCNCXGV.js";
 import {
-  o
-} from "./chunk.QEA4QW6G.js";
+  button_default
+} from "./chunk.NLHKPFJJ.js";
 import {
   watch
-} from "./chunk.IUDWCWFV.js";
+} from "./chunk.CBV7M6CJ.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.LVWJBUI5.js";
+} from "./chunk.GZ24SYY3.js";
 import {
   n,
   r
-} from "./chunk.K4EJQG4O.js";
+} from "./chunk.QCK7PTWV.js";
 import {
   T,
   s,
@@ -52,7 +52,7 @@ import {
   __privateSet,
   __spreadProps,
   __spreadValues
-} from "./chunk.6QUGTGJO.js";
+} from "./chunk.MR27IH5Z.js";
 
 // src/components/variable-combobox/variable-combobox.component.ts
 var _combobox, _fetchController, _searchableList, _listbox, _searchEngine, _walker, _dispatchChange, _handleButtonClick, _handleComboboxChange, _handleOptionClick, _handleKeydown, _manageListboxVisibility, _selectOption;
@@ -60,7 +60,7 @@ var _TerraVariableCombobox = class _TerraVariableCombobox extends TerraElement {
   constructor() {
     super(...arguments);
     __privateAdd(this, _combobox, null);
-    __privateAdd(this, _fetchController, new FetchController(this));
+    __privateAdd(this, _fetchController, void 0);
     __privateAdd(this, _searchableList, []);
     __privateAdd(this, _listbox, null);
     __privateAdd(this, _searchEngine, null);
@@ -194,6 +194,7 @@ var _TerraVariableCombobox = class _TerraVariableCombobox extends TerraElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    __privateSet(this, _fetchController, new FetchController(this, this.bearerToken));
     globalThis.addEventListener("click", __privateGet(this, _manageListboxVisibility));
   }
   disconnectedCallback() {
@@ -398,6 +399,9 @@ __decorateClass([
 __decorateClass([
   n()
 ], _TerraVariableCombobox.prototype, "value", 2);
+__decorateClass([
+  n({ attribute: "bearer-token", reflect: false })
+], _TerraVariableCombobox.prototype, "bearerToken", 2);
 __decorateClass([
   r()
 ], _TerraVariableCombobox.prototype, "isExpanded", 2);

package/cdn/chunks/{chunk.Q4J4A5QN.js → chunk.5HSDW7A7.js}

@@ -1,6 +1,6 @@
 import {
   TerraGiovanniSearch
-} from "./chunk.UTSV66LS.js";
+} from "./chunk.VXV5USN7.js";
 
 // src/components/giovanni-search/giovanni-search.ts
 var giovanni_search_default = TerraGiovanniSearch;

package/{dist/chunks/chunk.CETYO6UP.js → cdn/chunks/chunk.5LOTY62O.js}

@@ -4,10 +4,10 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.VDU7JJBS.js";
+} from "./chunk.EPQIDDJG.js";
 import {
   __decorateClass
-} from "./chunk.GKBF7QGR.js";
+} from "./chunk.TVFCHGU3.js";
 
 // src/components/loader/loader.component.ts
 import { property, state } from "lit/decorators.js";

package/cdn/chunks/{chunk.BT4IJCQK.js → chunk.5LUW7D6O.js}

@@ -1,7 +1,7 @@
 import {
   __spreadProps,
   __spreadValues
-} from "./chunk.6QUGTGJO.js";
+} from "./chunk.MR27IH5Z.js";
 
 // src/internal/form.ts
 var formCollections = /* @__PURE__ */ new WeakMap();

package/cdn/chunks/chunk.5P7TDN4M.js

@@ -0,0 +1,107 @@
+import {
+  i
+} from "./chunk.PH7RLQK2.js";
+
+// src/components/login/login.styles.ts
+var login_styles_default = i`
+    :host {
+        --block-size: 20rem;
+        --inline-size: 14rem;
+
+        block-size: var(--block-size);
+        box-sizing: border-box;
+        inline-size: var(--inline-size);
+        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: auto var(--block-size) auto var(--block-size);
+        display: block;
+        font-family: var(--terra-font-family--public-sans);
+    }
+
+    .help-text {
+        color: var(--terra-color-carbon-60);
+        font-size: var(--terra-font-size-small);
+        line-height: var(--terra-line-height-normal);
+        margin-block: 0;
+    }
+
+    label,
+    input {
+        display: block;
+    }
+
+    input {
+        padding-inline: 0.5em;
+    }
+
+    terra-button[data-task-status='2']::part(base),
+    terra-button[data-task-status='3']::part(base) {
+        padding-inline: 0;
+
+        transition-delay: 4s;
+        transition-property: padding-inline;
+    }
+
+    terra-button[data-task-status='2']::part(label),
+    terra-button[data-task-status='3']::part(label) {
+        padding-inline: var(--terra-spacing-medium);
+    }
+
+    .login-task {
+        animation-delay: 4s;
+        animation-duration: 0.3s;
+        animation-fill-mode: forwards;
+        animation-name: fade-out;
+        animation-timing-function: ease-in;
+
+        transition-behavior: allow-discrete;
+    }
+
+    .login-task--pending {
+        font-size: 1em;
+    }
+
+    .login-task--complete {
+        color: var(--terra-color-active-green-tint);
+        font-size: 1.8em;
+    }
+
+    .login-task--error {
+        color: var(--terra-color-international-orange-tint);
+        font-size: 1.8em;
+    }
+
+    .form-feedback {
+        color: var(--terra-color-nasa-red-shade);
+        display: block;
+        font-size: 0.875em;
+    }
+
+    @keyframes fade-out {
+        0% {
+            opacity: 1;
+            scale: 1;
+        }
+
+        50% {
+            opacity: 0;
+            scale: 1;
+        }
+
+        95% {
+            opacity: 0;
+            scale: 1;
+        }
+
+        100% {
+            display: none;
+            opacity: 0;
+            scale: 0;
+            font-size: 0;
+        }
+    }
+`;
+
+export {
+  login_styles_default
+};

package/{dist/chunks/chunk.G6IVJK35.js → cdn/chunks/chunk.5TCRMMVM.js}

@@ -1,6 +1,6 @@
 import {
   TerraGiovanniSearch
-} from "./chunk.3WWANPMA.js";
+} from "./chunk.FWXMF6WX.js";
 
 // src/react/giovanni-search/index.ts
 import * as React from "react";