@nasa-terra/components 0.0.0

package/dist/chunks/chunk.J6NGZHLF.js

@@ -0,0 +1,179 @@
+import {
+  spatial_picker_styles_default
+} from "./chunk.ZCNMYQP2.js";
+import {
+  TerraMap
+} from "./chunk.V3YTQSMP.js";
+import {
+  StringifyBoundingBox,
+  parseBoundingBox
+} from "./chunk.3ZGFXEAJ.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.PJXIJK2G.js";
+import {
+  __decorateClass
+} from "./chunk.RYPAZDXE.js";
+
+// src/components/spatial-picker/spatial-picker.component.ts
+import { html, nothing } from "lit";
+import { property, query, state } from "lit/decorators.js";
+var TerraSpatialPicker = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.minZoom = 0;
+    this.maxZoom = 23;
+    this.zoom = 1;
+    this.hasNavigation = true;
+    this.hasCoordTracker = true;
+    this.hasShapeSelector = false;
+    this.initialValue = "";
+    this.hideLabel = false;
+    this.label = "Select Region";
+    this.isExpanded = false;
+  }
+  _blur(e) {
+    const inputValue = e.target.value;
+    this.mapValue = inputValue === "" ? [] : parseBoundingBox(inputValue);
+  }
+  _click() {
+    this.isExpanded = !this.isExpanded;
+  }
+  open() {
+    this.isExpanded = true;
+  }
+  close() {
+    this.isExpanded = false;
+  }
+  _handleMapChange(event) {
+    switch (event.detail.cause) {
+      case "clear":
+        this.spatialInput.value = "";
+        break;
+      case "draw":
+        if (event.detail.bounds) {
+          this.spatialInput.value = StringifyBoundingBox(
+            event.detail.bounds
+          );
+        } else if (event.detail.latLng) {
+          this.spatialInput.value = StringifyBoundingBox(
+            event.detail.latLng
+          );
+        }
+        break;
+      default:
+        break;
+    }
+  }
+  firstUpdated() {
+    if (this.initialValue) {
+      this.mapValue = this.initialValue === "" ? [] : parseBoundingBox(this.initialValue);
+    }
+  }
+  renderMap() {
+    return html`<terra-map
+            exportparts="map, leaflet-bbox, leaflet-point, leaflet-edit, leaflet-remove"
+            min-zoom=${this.minZoom}
+            max-zoom=${this.maxZoom}
+            zoom=${this.zoom}
+            ?has-coord-tracker=${this.hasCoordTracker}
+            .value=${this.mapValue}
+            ?has-navigation=${this.hasNavigation}
+            ?has-shape-selector=${this.hasShapeSelector}
+            @terra-map-change=${this._handleMapChange}
+        >
+        </terra-map>`;
+  }
+  render() {
+    return html`
+            <div class="spatial-picker">
+                <label
+                    for="spatial-picker__input"
+                    class=${this.hideLabel ? "sr-only" : "spatial-picker__input_label"}
+                    >${this.label}</label
+                >
+                <div class="spatial-picker__input_fields">
+                    <input
+                        id="spatial-picker__input"
+                        value=${this.initialValue}
+                        type="text"
+                        class="spatial-picker__input form-control"
+                        placeholder="-180, -90, 180, 90"
+                        aria-controls="map"
+                        aria-expanded=${this.isExpanded}
+                        @blur=${this._blur}
+                    />
+                    <button
+                        aria-controls="map"
+                        aria-expanded=${this.isExpanded}
+                        aria-label="Spatial picker map"
+                        class="spatial-picker__input_icon_button"
+                        @click=${this._click}
+                        type="button"
+                    >
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke-width="1.5"
+                            stroke="currentColor"
+                            class="w-6 h-6"
+                        >
+                            <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                d="M9 6.75V15m6-6v8.25m.503 3.498 4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 0 0-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0Z"
+                            />
+                        </svg>
+                    </button>
+                </div>
+                ${this.isExpanded ? this.renderMap() : nothing}
+            </div>
+        `;
+  }
+};
+TerraSpatialPicker.styles = [component_styles_default, spatial_picker_styles_default];
+TerraSpatialPicker.dependencies = {
+  "terra-map": TerraMap
+};
+__decorateClass([
+  property({ attribute: "min-zoom", type: Number })
+], TerraSpatialPicker.prototype, "minZoom", 2);
+__decorateClass([
+  property({ attribute: "max-zoom", type: Number })
+], TerraSpatialPicker.prototype, "maxZoom", 2);
+__decorateClass([
+  property({ type: Number })
+], TerraSpatialPicker.prototype, "zoom", 2);
+__decorateClass([
+  property({ attribute: "has-navigation", type: Boolean })
+], TerraSpatialPicker.prototype, "hasNavigation", 2);
+__decorateClass([
+  property({ attribute: "has-coord-tracker", type: Boolean })
+], TerraSpatialPicker.prototype, "hasCoordTracker", 2);
+__decorateClass([
+  property({ attribute: "has-shape-selector", type: Boolean })
+], TerraSpatialPicker.prototype, "hasShapeSelector", 2);
+__decorateClass([
+  property({ attribute: "initial-value" })
+], TerraSpatialPicker.prototype, "initialValue", 2);
+__decorateClass([
+  property({ attribute: "hide-label", type: Boolean })
+], TerraSpatialPicker.prototype, "hideLabel", 2);
+__decorateClass([
+  property()
+], TerraSpatialPicker.prototype, "label", 2);
+__decorateClass([
+  state()
+], TerraSpatialPicker.prototype, "isExpanded", 2);
+__decorateClass([
+  state()
+], TerraSpatialPicker.prototype, "mapValue", 2);
+__decorateClass([
+  query(".spatial-picker__input")
+], TerraSpatialPicker.prototype, "spatialInput", 2);
+
+export {
+  TerraSpatialPicker
+};

package/dist/chunks/chunk.JFU3ZCDL.js

@@ -0,0 +1,359 @@
+// src/components/combobox/combobox.styles.ts
+import { css } from "lit";
+var combobox_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;
+
+        --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;
+
+        block-size: var(--terra-block-size, 2.1875rem);
+        box-sizing: border-box;
+        color: var(--terra-color-neutral--700, var(--color-neutral--700));
+        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,
+            var(--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-label {
+        font-family: var(--terra-font-family--inter, var(--font-family--inter));
+        font-weight: 600;
+        line-height: 1.1875rem;
+    }
+
+    .search-input-group {
+        block-size: 100%;
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    .combobox {
+        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));
+        color: currentColor;
+        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-neutral--600, var(--color-neutral--600));
+    }
+
+    .combobox:focus {
+        background-color: var(--terra-color-neutral--000, var(--color-neutral--000));
+        border-color: var(--terra-color-neutral--400, var(--color-neutral--400));
+        outline: 0;
+    }
+
+    .combobox:focus + .combobox-button {
+        background-color: var(--terra-color-neutral--800, var(--color-neutral--800));
+        border-block-color: var(
+            --terra-color-neutral--400,
+            var(--color-neutral--400)
+        );
+        border-inline-end-color: var(
+            --terra-color-neutral--400,
+            var(--color-neutral--400)
+        );
+    }
+
+    .search-input-group:has(.combobox:not(:focus)) + .search-results[open] {
+        border-color: var(--terra-color-neutral--200, var(--color-neutral--200));
+    }
+
+    .combobox-button {
+        align-items: center;
+        background-color: var(--terra-color-neutral--700, var(--color-neutral--700));
+        block-size: var(--terra-block-size, 2.1875rem);
+        border-block: 2px solid
+            var(--terra-color-neutral--700, var(--color-neutral--700));
+        border-inline-end: 2px solid
+            var(--terra-color-neutral--700, var(--color-neutral--700));
+        border-inline-start: 0;
+        color: var(--terra-color-neutral--000, var(--color-neutral--000));
+        cursor: pointer;
+        display: flex;
+        flex: 0 0 auto;
+        font-size: 1rem;
+        justify-content: center;
+        margin-block: 0;
+        margin-inline: 0;
+        outline: 0;
+        padding-inline: 0.5rem;
+        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-neutral--600, var(--color-neutral--600));
+        flex: 1 1 100%;
+        font-size: 0.875rem;
+        margin-block: 0;
+        position: absolute;
+    }
+
+    .external-link {
+        fill: currentColor;
+        vertical-align: middle;
+    }
+
+    .search-results {
+        background-color: var(--terra-color-neutral--000, var(--color-neutral--000));
+        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-neutral--400, var(--color-neutral--400));
+        content-visibility: auto;
+        max-height: calc(33vh - var(--terra-block-size, 2.1875rem));
+        opacity: 1;
+        visibility: visible;
+    }
+
+    .search-results .updating {
+        font-size: 1.5rem;
+        padding-block: 4rem;
+        text-align: center;
+    }
+
+    .search-results .error {
+        color: var(--terra-color-red--500, var(--color-red--500));
+        font-family: var(--terra-font-family--dm-mono, var(--font-family--dm-mono));
+        padding-block: 2rem;
+        justify-content: center;
+        display: flex;
+    }
+
+    .listbox-option-group {
+        padding-block: 0.5rem 0rem;
+    }
+
+    .group-title {
+        padding-inline: 0.5rem;
+        font-family: var(--terra-font-family--inter, var(--font-family--inter));
+        color: var(--terra-color-gray-500, var(--color-neutral--500));
+        font-weight: 500;
+        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'] {
+        background-color: var(--terra-color-gray-200, var(--color-neutral--200));
+        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(
+            --terra-color-neutral--100,
+            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(--terra-color-neutral--100, 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(--terra-color-neutral--200, 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(
+                --terra-color-neutral--100,
+                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/dist/chunks/chunk.KPXFSE3J.js

@@ -0,0 +1,23 @@
+// src/components/map/map.controller.ts
+var MapController = class {
+  constructor(host) {
+    this.host = host;
+    this.host.addController(this);
+  }
+  async hostConnected() {
+    if (this.host.hasShapeSelector) {
+      this.host.shapes = await this.getShapeFiles();
+    }
+  }
+  async getShapeFiles() {
+    const data = await fetch("http://localhost:9000/getProvisionedShapefiles", {
+      mode: "cors"
+    });
+    const listOfShapes = await data.json();
+    return listOfShapes;
+  }
+};
+
+export {
+  MapController
+};