@nasa-terra/components 0.0.7 → 0.0.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nasa-terra/components",
   "description": "A collection of NASA Earthdata components",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "homepage": "https://github.com/gesdisc/components",
   "author": "NASA GES DISC <https://disc.gsfc.nasa.gov>",
   "license": "MIT",
@@ -50,7 +50,9 @@
     "prepublishOnly": "npm run verify",
     "prettier": "prettier --write --log-level=warn .",
     "prettier:check": "prettier --check --log-level=warn .",
-    "create": "plop --plopfile scripts/plop/plopfile.js",
+    "create": "plop component --plopfile scripts/plop/plopfile.js",
+    "create-widget": "plop create-widget --plopfile scripts/plop/plopfile.js",
+    "update-widget": "plop update-widget --plopfile scripts/plop/plopfile.js",
     "test": "web-test-runner --group default",
     "test:component": "web-test-runner -- --watch --group",
     "test:watch": "web-test-runner --watch --group default",
@@ -80,7 +82,6 @@
     "leaflet-draw": "^1.0.4",
     "lit": "^3.0.0",
     "nouislider": "^15.7.1",
-    "plotly.js": "^2.31.1",
     "plotly.js-dist-min": "^2.30.1",
     "qr-creator": "^1.0.0"
   },

package/cdn/chunks/chunk.FDOXEWGR.js

@@ -1,96 +0,0 @@
-import {
-  loader_styles_default
-} from "./chunk.IKBILRIY.js";
-import {
-  e
-} from "./chunk.YVSJQ4KD.js";
-import {
-  TerraElement,
-  component_styles_default
-} from "./chunk.THBBULDA.js";
-import {
-  n
-} from "./chunk.K4EJQG4O.js";
-import {
-  T,
-  x
-} from "./chunk.PQFHJHNO.js";
-import {
-  __decorateClass
-} from "./chunk.6QUGTGJO.js";
-
-// src/components/loader/loader.component.ts
-var TerraLoader = class extends TerraElement {
-  constructor() {
-    super(...arguments);
-    this.size = "large";
-    this.percent = 0;
-    this.indeterminate = false;
-    this.label = "Loading request";
-    this.message = "";
-  }
-  formatPercent(percent) {
-    if (percent > 100) {
-      percent = 100;
-    }
-    return percent > 0 ? percent + "%" : "";
-  }
-  render() {
-    return x`
-            <div
-                class=${e({
-      loader: true,
-      "loader--small": this.size === "small",
-      "loader--large": this.size === "large",
-      "loader--light": this.theme === "light",
-      "loader--dark": this.theme === "dark"
-    })}
-                arial-lable=${this.label}
-                aria-valuetext="${this.message || T}"
-                ${this.message != "" ? "aria-valuetext=${this.message}" : ""}
-                aria-valuenow=${this.formatPercent(this.percent)}
-                role="progressbar"
-                tabindex="-1"
-            >
-                ${this.size === "large" ? x`
-                          <div class="percent">
-                              ${this.formatPercent(this.percent)}
-                          </div>
-                      ` : ``}
-
-                <svg
-                    viewBox=${this.size == "small" ? "0 0 30 30" : "0 0 52 52"}
-                    aria-hidden="true"
-                    style="--progress: ${this.percent}"
-                    class="circular-progress ${this.indeterminate ? "indeterminate" : ""}"
-                >
-                    <circle class="bg"></circle>
-                    <circle class="fg"></circle>
-                </svg>
-            </div>
-        `;
-  }
-};
-TerraLoader.styles = [component_styles_default, loader_styles_default];
-__decorateClass([
-  n({ reflect: true })
-], TerraLoader.prototype, "size", 2);
-__decorateClass([
-  n({ reflect: true })
-], TerraLoader.prototype, "theme", 2);
-__decorateClass([
-  n({ type: Number })
-], TerraLoader.prototype, "percent", 2);
-__decorateClass([
-  n({ type: Boolean })
-], TerraLoader.prototype, "indeterminate", 2);
-__decorateClass([
-  n({ type: String })
-], TerraLoader.prototype, "label", 2);
-__decorateClass([
-  n({ type: String })
-], TerraLoader.prototype, "message", 2);
-
-export {
-  TerraLoader
-};

package/cdn/chunks/chunk.L7XOR6JZ.js

@@ -1,83 +0,0 @@
-import {
-  i
-} from "./chunk.PH7RLQK2.js";
-
-// src/components/map/map.styles.ts
-var map_styles_default = i`
-    :host {
-        --color-blue--400: #007acc;
-        --color-blue--500: #1c67e3;
-        --color-blue--600: #0b3d91;
-
-        --color-red--400: #f64137;
-        --color-red--500: #b60109;
-
-        --color-neutral--000: #ffffff;
-        --color-neutral--100: #f7f7f7;
-        --color-neutral--200: #d1d1d1;
-        --color-neutral--300: #b9b9bb;
-        --color-neutral--400: #959599;
-        --color-neutral--500: #767676;
-        --color-neutral--600: #58585b;
-        --color-neutral--700: #2e2e32;
-        --color-neutral--800: #1b1b1b;
-
-        display: block;
-        padding: 16px;
-        background: white;
-        border: solid 1px var(--terra-color-neutral--200, var(--color-neutral--200));
-    }
-
-    .map {
-        aspect-ratio: 4 / 3;
-    }
-
-    .leaflet-mouse-position-container {
-        color: #464646;
-        padding: 5px;
-        background-color: white;
-    }
-
-    .leaflet-mouse-position-text {
-        margin: 0;
-        font-weight: 700;
-    }
-
-    .form-control {
-        display: block;
-        border-radius: 0;
-        width: 100%;
-        height: 36px;
-        padding: 6px 12px;
-        font-size: 14px;
-        line-height: 1.42857143;
-        color: #555555;
-        background-color: #fff;
-        background-image: none;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        outline: 0 none;
-        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-        -webkit-transition:
-            border-color ease-in-out 0.15s,
-            box-shadow ease-in-out 0.15s;
-        transition:
-            border-color ease-in-out 0.15s,
-            box-shadow ease-in-out 0.15s;
-    }
-
-    .form-control:focus {
-        border: 1px solid var(--terra-color-blue--600, var(--color-blue--600));
-    }
-
-    .map__select {
-        box-shadow: none;
-        border-radius: 0 !important;
-        margin-bottom: 1rem;
-    }
-`;
-
-export {
-  map_styles_default
-};

package/cdn/chunks/chunk.SBDX4GGT.js

@@ -1,66 +0,0 @@
-import {
-  i
-} from "./chunk.PH7RLQK2.js";
-
-// src/components/time-series/time-series.styles.ts
-var time_series_styles_default = i`
-    :host {
-        display: grid;
-        gap: 0.25rem 1rem;
-        grid-template-areas:
-            'variable spatial'
-            'plot plot'
-            'time time';
-        grid-template-columns: 1fr 1fr;
-    }
-
-    terra-variable-combobox {
-        grid-area: variable;
-    }
-
-    terra-spatial-picker {
-        grid-area: spatial;
-    }
-
-    terra-plot {
-        grid-area: plot;
-    }
-
-    terra-date-range-slider {
-        grid-area: time;
-    }
-
-    /* The current Giovanni API doesn't accept bounding box subsetting. */
-    terra-spatial-picker::part(leaflet-bbox),
-    terra-spatial-picker::part(leaflet-edit) {
-        display: none;
-    }
-
-    .plot-container {
-        position: relative;
-    }
-
-    dialog {
-        opacity: 0;
-        transition: all 0.15s ease-out;
-        transition-delay: 0.4s; /* a short delay, to allow local results to be displayed without a loading icon */
-        position: absolute;
-        top: 20%;
-        left: 0;
-        z-index: 100;
-    }
-
-    dialog.open {
-        opacity: 1;
-    }
-
-    @starting-style {
-        dialog.open {
-            opacity: 0;
-        }
-    }
-`;
-
-export {
-  time_series_styles_default
-};

package/cdn/chunks/chunk.THBBULDA.js

@@ -1,108 +0,0 @@
-import {
-  n
-} from "./chunk.K4EJQG4O.js";
-import {
-  s
-} from "./chunk.PQFHJHNO.js";
-import {
-  i
-} from "./chunk.PH7RLQK2.js";
-import {
-  __decorateClass,
-  __spreadValues
-} from "./chunk.6QUGTGJO.js";
-
-// src/styles/component.styles.ts
-var component_styles_default = i`
-    :host {
-        box-sizing: border-box;
-    }
-
-    :host *,
-    :host *::before,
-    :host *::after {
-        box-sizing: inherit;
-    }
-
-    [hidden] {
-        display: none !important;
-    }
-
-    /* UTILITY CSS */
-    .sr-only {
-        block-size: 1px;
-        border-width: 0;
-        clip: rect(0, 0, 0, 0);
-        margin: -1px;
-        overflow: hidden;
-        padding: 0;
-        position: absolute;
-        white-space: nowrap;
-        width: 1px;
-    }
-`;
-
-// src/internal/terra-element.ts
-var TerraElement = class extends s {
-  emit(name, options) {
-    const event = new CustomEvent(name, __spreadValues({
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-      detail: {}
-    }, options));
-    this.dispatchEvent(event);
-    return event;
-  }
-  /* eslint-enable */
-  static define(name, elementConstructor = this, options = {}) {
-    const currentlyRegisteredConstructor = customElements.get(name);
-    if (!currentlyRegisteredConstructor) {
-      customElements.define(
-        name,
-        class extends elementConstructor {
-        },
-        options
-      );
-      return;
-    }
-    let newVersion = " (unknown version)";
-    let existingVersion = newVersion;
-    if ("version" in elementConstructor && elementConstructor.version) {
-      newVersion = " v" + elementConstructor.version;
-    }
-    if ("version" in currentlyRegisteredConstructor && currentlyRegisteredConstructor.version) {
-      existingVersion = " v" + currentlyRegisteredConstructor.version;
-    }
-    if (newVersion && existingVersion && newVersion === existingVersion) {
-      return;
-    }
-    console.warn(
-      `Attempted to register <${name}>${newVersion}, but <${name}>${existingVersion} has already been registered.`
-    );
-  }
-  constructor() {
-    super();
-    Object.entries(
-      this.constructor.dependencies
-    ).forEach(([name, component]) => {
-      ;
-      this.constructor.define(name, component);
-    });
-  }
-};
-/* eslint-disable */
-// @ts-expect-error This is auto-injected at build time.
-TerraElement.version = "0.0.7";
-TerraElement.dependencies = {};
-__decorateClass([
-  n()
-], TerraElement.prototype, "dir", 2);
-__decorateClass([
-  n()
-], TerraElement.prototype, "lang", 2);
-
-export {
-  component_styles_default,
-  TerraElement
-};

package/cdn/chunks/chunk.UOFDZJYP.js

@@ -1,116 +0,0 @@
-import {
-  i
-} from "./chunk.PH7RLQK2.js";
-
-// src/components/spatial-picker/spatial-picker.styles.ts
-var spatial_picker_styles_default = i`
-    :host {
-        --color-blue--400: #007acc;
-        --color-blue--500: #1c67e3;
-        --color-blue--600: #0b3d91;
-
-        --color-red--400: #f64137;
-        --color-red--500: #b60109;
-
-        --color-neutral--000: #ffffff;
-        --color-neutral--100: #f7f7f7;
-        --color-neutral--200: #d1d1d1;
-        --color-neutral--300: #b9b9bb;
-        --color-neutral--400: #959599;
-        --color-neutral--500: #767676;
-        --color-neutral--600: #58585b;
-        --color-neutral--700: #2e2e32;
-        --color-neutral--800: #1b1b1b;
-
-        --font-family--inter: Inter, sans-serif;
-        --font-family--public-sans: 'Public Sans', sans-serif;
-        --font-family--dm-mono: 'DM Mono', monospace;
-
-        --label-height: 1.8125rem;
-        --help-height: 1.8125rem;
-        --host-height: 5.8125rem;
-
-        display: block;
-        position: relative;
-        z-index: 1;
-    }
-
-    :host .spatial-picker__input_fields {
-        position: relative;
-    }
-
-    :host input {
-        box-shadow: none;
-        border-radius: 0 !important;
-    }
-
-    .spatial-picker__input_label {
-        font-family: var(--terra-font-family--inter, var(--font-family--inter));
-        font-weight: 600;
-        line-height: 1.1875rem;
-    }
-
-    .form-control {
-        width: 100%;
-        padding-inline-start: 1rem;
-        padding-inline-end: 2.5rem;
-        padding-block: 0.375rem;
-        font-size: 0.85rem;
-        line-height: 1.42857143;
-        color: currentColor;
-        background-color: var(--terra-color-neutral--100, var(--color-neutral--100));
-        block-size: var(--terra-block-size, 2.1875rem);
-        border-block: 2px solid
-            var(--terra-color-neutral--200, var(--color-neutral--200));
-        border-inline-end: 0;
-        border-inline-start: 2px solid
-            var(--terra-color-neutral--200, var(--color-neutral--200));
-        border-radius: 4px;
-        outline: 0;
-        transition:
-            background-color 0.2s ease,
-            border-color 0.2s ease;
-    }
-
-    .form-control:focus {
-        border-radius: 4px;
-        border: 2px solid var(--terra-color-blue--500, var(--color-blue--500));
-    }
-
-    .form-control:focus + .spatial-picker__input_icon_button {
-        background-color: var(--terra-color-neutral--800, var(--color-neutral--800));
-    }
-
-    .spatial-picker__input_icon_button {
-        block-size: var(--terra-block-size, 2.1875rem);
-        padding-inline: 0.5rem;
-        position: absolute;
-        padding-top: 5px;
-        top: 0;
-        right: 0;
-        z-index: 2;
-        border: none;
-        cursor: pointer;
-        box-shadow: none;
-        background-color: var(--terra-color-neutral--700, var(--color-neutral--700));
-        transition:
-            background-color 0.2s ease,
-            border-color 0.2s ease;
-    }
-
-    .spatial-picker__input_icon_button svg {
-        height: 1.2rem;
-        width: 1.2rem;
-        color: white;
-    }
-
-    terra-map {
-        position: absolute;
-        left: 0;
-        right: 0;
-    }
-`;
-
-export {
-  spatial_picker_styles_default
-};

package/dist/chunks/chunk.GPUFE4ML.js

@@ -1,63 +0,0 @@
-// src/components/time-series/time-series.styles.ts
-import { css } from "lit";
-var time_series_styles_default = css`
-    :host {
-        display: grid;
-        gap: 0.25rem 1rem;
-        grid-template-areas:
-            'variable spatial'
-            'plot plot'
-            'time time';
-        grid-template-columns: 1fr 1fr;
-    }
-
-    terra-variable-combobox {
-        grid-area: variable;
-    }
-
-    terra-spatial-picker {
-        grid-area: spatial;
-    }
-
-    terra-plot {
-        grid-area: plot;
-    }
-
-    terra-date-range-slider {
-        grid-area: time;
-    }
-
-    /* The current Giovanni API doesn't accept bounding box subsetting. */
-    terra-spatial-picker::part(leaflet-bbox),
-    terra-spatial-picker::part(leaflet-edit) {
-        display: none;
-    }
-
-    .plot-container {
-        position: relative;
-    }
-
-    dialog {
-        opacity: 0;
-        transition: all 0.15s ease-out;
-        transition-delay: 0.4s; /* a short delay, to allow local results to be displayed without a loading icon */
-        position: absolute;
-        top: 20%;
-        left: 0;
-        z-index: 100;
-    }
-
-    dialog.open {
-        opacity: 1;
-    }
-
-    @starting-style {
-        dialog.open {
-            opacity: 0;
-        }
-    }
-`;
-
-export {
-  time_series_styles_default
-};

package/dist/chunks/chunk.IBEKZVOY.js

@@ -1,80 +0,0 @@
-// src/components/map/map.styles.ts
-import { css } from "lit";
-var map_styles_default = css`
-    :host {
-        --color-blue--400: #007acc;
-        --color-blue--500: #1c67e3;
-        --color-blue--600: #0b3d91;
-
-        --color-red--400: #f64137;
-        --color-red--500: #b60109;
-
-        --color-neutral--000: #ffffff;
-        --color-neutral--100: #f7f7f7;
-        --color-neutral--200: #d1d1d1;
-        --color-neutral--300: #b9b9bb;
-        --color-neutral--400: #959599;
-        --color-neutral--500: #767676;
-        --color-neutral--600: #58585b;
-        --color-neutral--700: #2e2e32;
-        --color-neutral--800: #1b1b1b;
-
-        display: block;
-        padding: 16px;
-        background: white;
-        border: solid 1px var(--terra-color-neutral--200, var(--color-neutral--200));
-    }
-
-    .map {
-        aspect-ratio: 4 / 3;
-    }
-
-    .leaflet-mouse-position-container {
-        color: #464646;
-        padding: 5px;
-        background-color: white;
-    }
-
-    .leaflet-mouse-position-text {
-        margin: 0;
-        font-weight: 700;
-    }
-
-    .form-control {
-        display: block;
-        border-radius: 0;
-        width: 100%;
-        height: 36px;
-        padding: 6px 12px;
-        font-size: 14px;
-        line-height: 1.42857143;
-        color: #555555;
-        background-color: #fff;
-        background-image: none;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        outline: 0 none;
-        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-        -webkit-transition:
-            border-color ease-in-out 0.15s,
-            box-shadow ease-in-out 0.15s;
-        transition:
-            border-color ease-in-out 0.15s,
-            box-shadow ease-in-out 0.15s;
-    }
-
-    .form-control:focus {
-        border: 1px solid var(--terra-color-blue--600, var(--color-blue--600));
-    }
-
-    .map__select {
-        box-shadow: none;
-        border-radius: 0 !important;
-        margin-bottom: 1rem;
-    }
-`;
-
-export {
-  map_styles_default
-};