@nasa-terra/components 0.0.2 → 0.0.3

package/cdn/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@nasa-terra/components",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -268,28 +268,6 @@
             "events": []
           }
         },
-        {
-          "name": "terra-chip",
-          "description": "Used for contacts and tags\n---\n\n\n### **Slots:**\n - _default_ - The chip's label.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "size",
-              "value": {
-                "type": "'small' | 'medium' | 'large'",
-                "default": "'medium'"
-              }
-            }
-          ],
-          "slots": [{ "name": "", "description": "The chip's label." }],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "size", "type": "'small' | 'medium' | 'large'" }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "terra-combobox",
           "description": "Fuzzy-search for combobox with list autocomplete.\n---\n\n\n### **CSS Properties:**\n - **--host-height** - The height of the host element. _(default: undefined)_\n- **--help-height** - The height of the search help element. _(default: undefined)_\n- **--label-height** - The height of the input's label element. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - A `search` element, the component's base.\n- **combobox** - An `input` element used for searching.\n- **button** - A `button` used for toggling the listbox's visibility.\n- **listbox** - A `ul` that holds the clickable options.",
@@ -434,104 +412,6 @@
             "events": []
           }
         },
-        {
-          "name": "terra-icon",
-          "description": "Icons are symbols that can be used to represent various options within an application.\n---\n\n\n### **Events:**\n - **terra-load** - Emitted when the icon has loaded.\n- **terra-error** - Emitted when the icon fails to load due to an error.\n\n### **CSS Parts:**\n - **svg** - The internal SVG element.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "name",
-              "description": "The name of the icon to draw. Available names depend on the icon library being used.",
-              "value": { "type": "string | undefined" }
-            },
-            {
-              "name": "src",
-              "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
-              "value": { "type": "string | undefined" }
-            },
-            {
-              "name": "label",
-              "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "library",
-              "description": "The name of a registered custom icon library.",
-              "value": {
-                "type": "'default' | 'heroicons' | string",
-                "default": "'default'"
-              }
-            },
-            {
-              "name": "color",
-              "description": "The CSS color to assign to the SVG.",
-              "value": { "type": "string | null", "default": "null" }
-            },
-            {
-              "name": "font-size",
-              "description": "The CSS font-size to assign to the SVG.",
-              "value": { "type": "string | null", "default": "null" }
-            }
-          ],
-          "events": [
-            {
-              "name": "terra-load",
-              "description": "Emitted when the icon has loaded."
-            },
-            {
-              "name": "terra-error",
-              "description": "Emitted when the icon fails to load due to an error."
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "svg",
-                "type": "SVGElement | HTMLTemplateResult | null"
-              },
-              {
-                "name": "name",
-                "description": "The name of the icon to draw. Available names depend on the icon library being used.",
-                "type": "string | undefined"
-              },
-              {
-                "name": "src",
-                "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
-                "type": "string | undefined"
-              },
-              {
-                "name": "label",
-                "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
-                "type": "string"
-              },
-              {
-                "name": "library",
-                "description": "The name of a registered custom icon library.",
-                "type": "'default' | 'heroicons' | string"
-              },
-              {
-                "name": "color",
-                "description": "The CSS color to assign to the SVG.",
-                "type": "string | null"
-              },
-              {
-                "name": "fontSize",
-                "description": "The CSS font-size to assign to the SVG.",
-                "type": "string | null"
-              }
-            ],
-            "events": [
-              {
-                "name": "terra-load",
-                "description": "Emitted when the icon has loaded."
-              },
-              {
-                "name": "terra-error",
-                "description": "Emitted when the icon fails to load due to an error."
-              }
-            ]
-          }
-        },
         {
           "name": "terra-loader",
           "description": "Loaders are used to indicate there is content that is loading.\n---\n\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -552,6 +432,11 @@
               "description": "The percent complete for the loader to display",
               "value": { "type": "number", "default": "0" }
             },
+            {
+              "name": "indeterminate",
+              "description": "an indeterminate loader has an unknown progress and will show a spinner",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "label",
               "description": "A label used by a screen reader which describes the loader element (e.g., \"Loading video of Tropical Storm Nepartak\")",
@@ -581,6 +466,11 @@
                 "description": "The percent complete for the loader to display",
                 "type": "number"
               },
+              {
+                "name": "indeterminate",
+                "description": "an indeterminate loader has an unknown progress and will show a spinner",
+                "type": "boolean"
+              },
               {
                 "name": "label",
                 "description": "A label used by a screen reader which describes the loader element (e.g., \"Loading video of Tropical Storm Nepartak\")",
@@ -595,6 +485,66 @@
             "events": []
           }
         },
+        {
+          "name": "terra-chip",
+          "description": "Used for contacts and tags\n---\n\n\n### **Slots:**\n - _default_ - The chip's label.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "size",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The chip's label." }],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "size", "type": "'small' | 'medium' | 'large'" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "terra-plot",
+          "description": "A web component for interactive graphs using Plotly.js.\n---\n\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "doc-url": "",
+          "attributes": [
+            { "name": "plotTitle", "value": { "type": "string | undefined" } },
+            {
+              "name": "layout",
+              "value": {
+                "type": "Partial<Layout> | undefined",
+                "default": "{}"
+              }
+            },
+            {
+              "name": "config",
+              "value": {
+                "type": "Partial<Config> | undefined",
+                "default": "{\n        modeBarButtonsToAdd: [\n            {\n                name: 'Download Data',\n                title: 'Download plot data as a CSV file',\n                icon: Icons.disk,\n                click: () => {\n                    this.downloadCSV()\n                },\n            },\n        ],\n    }"
+              }
+            },
+            {
+              "name": "data",
+              "value": { "type": "Array<Partial<Data>>", "default": "[]" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "plotData", "type": "Array<Plot>" },
+              { "name": "base", "type": "HTMLElement" },
+              { "name": "plotTitle", "type": "string | undefined" },
+              { "name": "layout", "type": "Partial<Layout> | undefined" },
+              { "name": "config", "type": "Partial<Config> | undefined" },
+              { "name": "data", "type": "Array<Partial<Data>>" }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "terra-map",
           "description": "A map component for visualizing and selecting coordinates.\n---\n",
@@ -678,6 +628,104 @@
             "events": []
           }
         },
+        {
+          "name": "terra-icon",
+          "description": "Icons are symbols that can be used to represent various options within an application.\n---\n\n\n### **Events:**\n - **terra-load** - Emitted when the icon has loaded.\n- **terra-error** - Emitted when the icon fails to load due to an error.\n\n### **CSS Parts:**\n - **svg** - The internal SVG element.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "name",
+              "description": "The name of the icon to draw. Available names depend on the icon library being used.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "src",
+              "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "label",
+              "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "library",
+              "description": "The name of a registered custom icon library.",
+              "value": {
+                "type": "'default' | 'heroicons' | string",
+                "default": "'default'"
+              }
+            },
+            {
+              "name": "color",
+              "description": "The CSS color to assign to the SVG.",
+              "value": { "type": "string | null", "default": "null" }
+            },
+            {
+              "name": "font-size",
+              "description": "The CSS font-size to assign to the SVG.",
+              "value": { "type": "string | null", "default": "null" }
+            }
+          ],
+          "events": [
+            {
+              "name": "terra-load",
+              "description": "Emitted when the icon has loaded."
+            },
+            {
+              "name": "terra-error",
+              "description": "Emitted when the icon fails to load due to an error."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "svg",
+                "type": "SVGElement | HTMLTemplateResult | null"
+              },
+              {
+                "name": "name",
+                "description": "The name of the icon to draw. Available names depend on the icon library being used.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "src",
+                "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "label",
+                "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
+                "type": "string"
+              },
+              {
+                "name": "library",
+                "description": "The name of a registered custom icon library.",
+                "type": "'default' | 'heroicons' | string"
+              },
+              {
+                "name": "color",
+                "description": "The CSS color to assign to the SVG.",
+                "type": "string | null"
+              },
+              {
+                "name": "fontSize",
+                "description": "The CSS font-size to assign to the SVG.",
+                "type": "string | null"
+              }
+            ],
+            "events": [
+              {
+                "name": "terra-load",
+                "description": "Emitted when the icon has loaded."
+              },
+              {
+                "name": "terra-error",
+                "description": "Emitted when the icon fails to load due to an error."
+              }
+            ]
+          }
+        },
         {
           "name": "terra-spatial-picker",
           "description": "A component that allows input of coordinates and rendering of map.\n---\n",
@@ -784,44 +832,6 @@
             "events": []
           }
         },
-        {
-          "name": "terra-plot",
-          "description": "A web component for interactive graphs using Plotly.js.\n---\n\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-          "doc-url": "",
-          "attributes": [
-            { "name": "plotTitle", "value": { "type": "string | undefined" } },
-            {
-              "name": "layout",
-              "value": {
-                "type": "Partial<Layout> | undefined",
-                "default": "{}"
-              }
-            },
-            {
-              "name": "config",
-              "value": {
-                "type": "Partial<Config> | undefined",
-                "default": "{\n        modeBarButtonsToAdd: [\n            {\n                name: 'Download Data',\n                title: 'Download plot data as a CSV file',\n                icon: Icons.disk,\n                click: () => {\n                    this.downloadCSV()\n                },\n            },\n        ],\n    }"
-              }
-            },
-            {
-              "name": "data",
-              "value": { "type": "Array<Partial<Data>>", "default": "[]" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "plotData", "type": "Array<Plot>" },
-              { "name": "base", "type": "HTMLElement" },
-              { "name": "plotTitle", "type": "string | undefined" },
-              { "name": "layout", "type": "Partial<Layout> | undefined" },
-              { "name": "config", "type": "Partial<Config> | undefined" },
-              { "name": "data", "type": "Array<Partial<Data>>" }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "terra-time-series",
           "description": "A component for visualizing time series data using the GES DISC Giovanni API.\n---\n",

package/dist/chunks/{chunk.DKCU7YEZ.js → chunk.2RJXTLAA.js}

@@ -84,12 +84,13 @@ var TimeSeriesController = class {
           return initialState;
         }
         const timeSeries = await __privateMethod(this, _loadTimeSeries, loadTimeSeries_fn).call(this, signal);
-        return [
+        this.lastTaskValue = [
           __spreadProps(__spreadValues({}, plotlyDefaultData), {
             x: timeSeries.data.map((row) => row.timestamp),
             y: timeSeries.data.map((row) => row.value)
           })
         ];
+        return this.lastTaskValue;
       }
     });
   }
@@ -100,9 +101,10 @@ var TimeSeriesController = class {
 _loadTimeSeries = new WeakSet();
 loadTimeSeries_fn = async function(signal) {
   const variableEntryId = `${this.collection}_${this.variable}`;
+  const cacheKey = `${variableEntryId}_${this.location}`;
   const existingTerraData = await getDataByKey(
     "time-series" /* TIME_SERIES */,
-    `${variableEntryId}_${this.location}`
+    cacheKey
   );
   if (existingTerraData && this.startDate.getTime() >= new Date(existingTerraData.startDate).getTime() && this.endDate.getTime() <= new Date(existingTerraData.endDate).getTime()) {
     return __privateMethod(this, _getDataInRange, getDataInRange_fn).call(this, existingTerraData);
@@ -133,16 +135,12 @@ loadTimeSeries_fn = async function(signal) {
   }
   const parsedData = __privateMethod(this, _parseTimeSeriesCsv, parseTimeSeriesCsv_fn).call(this, await response.text());
   parsedData.data = [...parsedData.data, ...(existingTerraData == null ? void 0 : existingTerraData.data) || []];
-  await storeDataByKey(
-    "time-series" /* TIME_SERIES */,
-    `${variableEntryId}_${this.location}`,
-    __spreadValues({
-      variableEntryId,
-      key: `${variableEntryId}_${this.location}`,
-      startDate: parsedData.data[0].timestamp,
-      endDate: parsedData.data[parsedData.data.length - 1].timestamp
-    }, parsedData)
-  );
+  await storeDataByKey("time-series" /* TIME_SERIES */, cacheKey, __spreadValues({
+    variableEntryId,
+    key: cacheKey,
+    startDate: parsedData.data[0].timestamp,
+    endDate: parsedData.data[parsedData.data.length - 1].timestamp
+  }, parsedData));
   return __privateMethod(this, _getDataInRange, getDataInRange_fn).call(this, parsedData);
 };
 _parseTimeSeriesCsv = new WeakSet();

package/dist/chunks/{chunk.WHJHZJ6L.js → chunk.33FFT37R.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.ZCNMYQP2.js";
 import {
   TerraMap
-} from "./chunk.LAFN7QOI.js";
+} from "./chunk.YUEY7TCJ.js";
 import {
   StringifyBoundingBox,
   parseBoundingBox
@@ -11,7 +11,7 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.HBEQ6SPT.js";
+} from "./chunk.PSTXVQB5.js";
 import {
   __decorateClass
 } from "./chunk.RYPAZDXE.js";

package/dist/chunks/{chunk.6HBNUONX.js → chunk.3SRITTYR.js}

@@ -1,6 +1,6 @@
 import {
   TerraMap
-} from "./chunk.LAFN7QOI.js";
+} from "./chunk.YUEY7TCJ.js";
 
 // src/react/map/index.ts
 import * as React from "react";

package/dist/chunks/{chunk.XPQYTQXW.js → chunk.4GCNO2RC.js}

@@ -2,16 +2,16 @@ import {
   FormControlController,
   validValidityState
 } from "./chunk.NYBJ252W.js";
-import {
-  watch
-} from "./chunk.ZK7QVWBI.js";
 import {
   button_styles_default
 } from "./chunk.SHS42OAD.js";
+import {
+  watch
+} from "./chunk.ZK7QVWBI.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.HBEQ6SPT.js";
+} from "./chunk.PSTXVQB5.js";
 import {
   __decorateClass
 } from "./chunk.RYPAZDXE.js";

package/dist/chunks/{chunk.XK7GWNRK.js → chunk.6DRNHPKF.js}

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

package/dist/chunks/{chunk.ACNC5AZO.js → chunk.7DFKM3M3.js}

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

package/dist/chunks/{chunk.D44WRZDJ.js → chunk.AJUYULUM.js}

@@ -1,6 +1,6 @@
 import {
   TerraButton
-} from "./chunk.XPQYTQXW.js";
+} from "./chunk.4GCNO2RC.js";
 
 // src/components/button/button.ts
 var button_default = TerraButton;

package/{cdn/chunks/chunk.RDW2UZ5N.js → dist/chunks/chunk.ALFBRTWT.js}

@@ -1,6 +1,6 @@
 import {
   TerraChip
-} from "./chunk.VHMYUAU5.js";
+} from "./chunk.ZB6UWPGQ.js";
 
 // src/components/chip/chip.ts
 var chip_default = TerraChip;

package/dist/chunks/{chunk.TFKJWQKC.js → chunk.B7L6K56Y.js}

@@ -1,10 +1,10 @@
 import {
   loader_styles_default
-} from "./chunk.I2NEFB34.js";
+} from "./chunk.CL62YJ3N.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.HBEQ6SPT.js";
+} from "./chunk.PSTXVQB5.js";
 import {
   __decorateClass
 } from "./chunk.RYPAZDXE.js";
@@ -18,6 +18,7 @@ var TerraLoader = class extends TerraElement {
     super(...arguments);
     this.size = "large";
     this.percent = 0;
+    this.indeterminate = false;
     this.label = "Loading request";
     this.message = "";
   }
@@ -54,7 +55,7 @@ var TerraLoader = class extends TerraElement {
                     viewBox=${this.size == "small" ? "0 0 30 30" : "0 0 52 52"}
                     aria-hidden="true"
                     style="--progress: ${this.percent}"
-                    class="circular-progress"
+                    class="circular-progress ${this.indeterminate ? "indeterminate" : ""}"
                 >
                     <circle class="bg"></circle>
                     <circle class="fg"></circle>
@@ -73,6 +74,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Number })
 ], TerraLoader.prototype, "percent", 2);
+__decorateClass([
+  property({ type: Boolean })
+], TerraLoader.prototype, "indeterminate", 2);
 __decorateClass([
   property({ type: String })
 ], TerraLoader.prototype, "label", 2);

package/dist/chunks/{chunk.I2NEFB34.js → chunk.CL62YJ3N.js}

@@ -63,6 +63,9 @@ var loader_styles_default = css`
         --dash: calc(
             (var(--progress) * var(--circumference)) / 100
         ); /* Calculate the length of the dash based on the progress percentage */
+        --indeterminate-dash: calc(
+            (25 * var(--circumference)) / 100
+        ); /* force progress to 25% for an indeterminate loader */
     }
 
     .circular-progress circle {
@@ -86,6 +89,24 @@ var loader_styles_default = css`
         stroke: #1c68e3;
     }
 
+    .circular-progress.indeterminate circle.fg {
+        stroke-dasharray: var(--indeterminate-dash)
+            calc(var(--circumference) - var(--indeterminate-dash));
+        animation: 0.8s spin infinite;
+        animation-timing-function: linear;
+        transform-origin: 50% 50%;
+    }
+
+    @keyframes spin {
+        from {
+            transform: rotate(-90deg);
+        }
+
+        to {
+            transform: rotate(270deg);
+        }
+    }
+
     @property --progress {
         /* Registers and describes the custom property and variable with the browser. */
         syntax: '<number>';

package/dist/chunks/{chunk.HJ4OGF6V.js → chunk.EDKH7GOS.js}

@@ -1,6 +1,6 @@
 import {
   TerraDateRangeSlider
-} from "./chunk.5LBNOLAY.js";
+} from "./chunk.MMYKMN6B.js";
 
 // src/react/date-range-slider/index.ts
 import * as React from "react";

package/{cdn/chunks/chunk.KCXQJJZ4.js → dist/chunks/chunk.EPOITANB.js}

@@ -1,6 +1,6 @@
 import {
   TerraPlot
-} from "./chunk.HMECFSJ3.js";
+} from "./chunk.PRBM2XXL.js";
 
 // src/components/plot/plot.ts
 var plot_default = TerraPlot;

package/{cdn/chunks/chunk.3NOH36JE.js → dist/chunks/chunk.FLO6VVGK.js}

@@ -1,6 +1,6 @@
 import {
   TerraPlot
-} from "./chunk.HMECFSJ3.js";
+} from "./chunk.PRBM2XXL.js";
 
 // src/react/plot/index.ts
 import * as React from "react";