@nasa-terra/components 0.0.67 → 0.0.68

package/dist/chunks/chunk.FRSW4UHB.js

@@ -0,0 +1,268 @@
+// src/components/variable-combobox/variable-combobox.styles.ts
+import { css } from "lit";
+var variable_combobox_styles_default = css`
+    :host {
+        --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: #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: var(--terra-inline-size, 100%)
+            calc(33vh + var(--terra-block-size, 2.1875rem));
+        display: block;
+        font-family: var(--terra-font-family--public-sans);
+        height: var(--terra-block-size, var(--host-height));
+        inline-size: var(--terra-inline-size, 100%);
+        position: relative;
+        z-index: 10;
+    }
+
+    :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-group {
+        block-size: 100%;
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    .tag-container {
+        block-size: var(--terra-block-size, 2.25rem);
+        position: absolute;
+        top: 2.25rem;
+        display: flex;
+        flex-wrap: wrap;
+        align-content: center;
+        padding-inline-start: 0.5rem;
+    }
+
+    .tag {
+        --terra-button-height-small: 1.25rem;
+        --terra-spacing-small: 0.5rem;
+    }
+
+    .tag:hover .tag-icon,
+    .tag:active .tag-icon,
+    .tag:focus .tag-icon {
+        transform: scale(1.125);
+        color: var(--terra-color-nasa-red-shade);
+        transition:
+            transform 0.2s ease-out,
+            color 0.2s ease-out;
+    }
+
+    .tag-icon {
+        font-size: 1.25em;
+    }
+
+    .tag-icon::part(svg) {
+        stroke-width: 2;
+    }
+
+    .combobox {
+        block-size: var(--terra-block-size, 2.25rem);
+        flex: 1 1 auto;
+        padding-inline: 0.5rem;
+        transition:
+            background-color 0.2s ease,
+            border-color 0.2s ease;
+        max-inline-size: 100%;
+    }
+
+    .combobox::placeholder {
+        color: var(--terra-color-carbon-60);
+    }
+
+    .combobox:focus {
+        border-color: var(--terra-color-carbon-40);
+        outline: 0;
+    }
+
+    .search-input-group:has(.combobox:not(:focus)) + .search-results[open] {
+        border-color: var(--terra-color-carbon-30);
+    }
+
+    .combobox-button {
+        position: absolute;
+        right: 0;
+        z-index: 2;
+        margin-block: 0;
+        margin-inline: 0;
+        outline: 0;
+        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 {
+        color: var(--terra-color-carbon-60);
+        flex: 1 1 100%;
+        font-size: var(--terra-font-size-small);
+        line-height: var(--terra-line-height-normal);
+        margin-block: 0;
+        position: absolute;
+        bottom: -10px;
+    }
+
+    .external-link {
+        fill: currentColor;
+        vertical-align: middle;
+    }
+
+    .search-results {
+        background-color: var(--terra-color-spacesuit-white);
+        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: 0.5rem;
+        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-carbon-40);
+        content-visibility: auto;
+        max-height: calc(33vh - var(--terra-block-size, 2.1875rem));
+        opacity: 1;
+        visibility: visible;
+    }
+
+    .search-results .updating {
+        font-size: var(--terra-font-size-x-large);
+        padding-block: 4rem;
+        text-align: center;
+    }
+
+    .search-results .error {
+        color: var(--terra-color-nasa-red);
+        font-family: var(--terra-font-family--dm-mono);
+        padding-block: 2rem;
+    }
+
+    .listbox-option-group {
+        padding-inline: 0.5rem;
+        padding-block: 1rem 0.5rem;
+    }
+
+    .group-title {
+        font-family: var(--terra-font-family--inter);
+        font-weight: 700;
+        margin-block: 0;
+    }
+
+    .listbox-option {
+        cursor: pointer;
+        list-style: disc;
+        position: relative;
+    }
+
+    .listbox-option:hover::before,
+    .listbox-option[aria-selected='true']::before {
+        block-size: 1rem;
+        content: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' fill='%231c67e3' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16' cy='16' r='16'%3E%3C/circle%3E%3Cpath fill='%23ffffff' d='M8 16.956h12.604l-3.844 4.106 1.252 1.338L24 16l-5.988-6.4-1.252 1.338 3.844 4.106H8v1.912z' %3E%3C/path%3E%3C/svg%3E%0A");
+        inline-size: 1rem;
+        left: -2ch;
+        position: absolute;
+        top: 0.0625lh;
+    }
+
+    @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;
+        }
+    }
+`;
+
+export {
+  variable_combobox_styles_default
+};

package/dist/chunks/chunk.FUU57PWY.js

@@ -0,0 +1,36 @@
+// src/components/combobox/lib.ts
+function clearSelection(combobox, listbox) {
+  combobox.removeAttribute("aria-activedescendant");
+  listbox.querySelectorAll("[aria-selected]").forEach((option) => option.removeAttribute("aria-selected"));
+}
+function walkToOption(walker, combobox, direction = "next") {
+  const maybeCurrentElement = direction === "next" ? walker.nextNode() : walker.previousNode();
+  if (maybeCurrentElement === null || maybeCurrentElement === walker.root) {
+    direction === "next" ? walkToFirst(walker) : walkToLast(walker);
+  }
+  combobox.setAttribute(
+    "aria-activedescendant",
+    walker.currentNode.id
+  );
+  walker.currentNode.setAttribute("aria-selected", "true");
+  globalThis.setTimeout(() => {
+    ;
+    walker.currentNode.scrollIntoView({
+      behavior: "auto",
+      block: "nearest"
+    });
+  }, 100);
+}
+function walkToFirst(walker) {
+  walker.parentNode();
+  walker.firstChild();
+}
+function walkToLast(walker) {
+  walker.parentNode();
+  walker.lastChild();
+}
+
+export {
+  clearSelection,
+  walkToOption
+};

package/dist/chunks/chunk.FZMMKJAN.js

@@ -0,0 +1,11 @@
+import {
+  TerraDataSubsetterHistory
+} from "./chunk.LQOZT7TL.js";
+
+// src/components/data-subsetter-history/data-subsetter-history.ts
+var data_subsetter_history_default = TerraDataSubsetterHistory;
+TerraDataSubsetterHistory.define("terra-data-subsetter-history");
+
+export {
+  data_subsetter_history_default
+};

package/dist/chunks/chunk.FZUQIX6Q.js

@@ -0,0 +1,24 @@
+import {
+  TerraAccordion
+} from "./chunk.GGRGK2NT.js";
+
+// src/react/accordion/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "terra-accordion";
+TerraAccordion.define("terra-accordion");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraAccordion,
+  react: React,
+  events: {
+    onTerraAccordionToggle: "terra-accordion-toggle"
+  },
+  displayName: "TerraAccordion"
+});
+var accordion_default = reactWrapper;
+
+export {
+  accordion_default
+};

package/dist/chunks/chunk.G6SMK5II.js

@@ -0,0 +1,19 @@
+// src/components/skeleton/skeleton.styles.ts
+import { css } from "lit";
+var skeleton_styles_default = css`
+    :host {
+        display: block;
+    }
+
+    sl-skeleton {
+        --border-radius: 4px;
+        --color: hsl(240 5.9% 50%);
+        --sheen-color: hsl(240 5.9% 60%);
+
+        margin-bottom: 10px;
+    }
+`;
+
+export {
+  skeleton_styles_default
+};

package/dist/chunks/chunk.GGRGK2NT.js

@@ -0,0 +1,78 @@
+import {
+  TerraIcon
+} from "./chunk.UTXEG3QD.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.TSIWRLNC.js";
+import {
+  accordion_styles_default
+} from "./chunk.MQOXBVDK.js";
+import {
+  __decorateClass
+} from "./chunk.TVFCHGU3.js";
+
+// src/components/accordion/accordion.component.ts
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+var TerraAccordion = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.showArrow = true;
+  }
+  render() {
+    return html`
+            <details
+                class="accordion"
+                ?open=${this.open}
+                @toggle=${this.handleToggle}
+            >
+                <summary class="accordion-summary">
+                    <slot name="summary"> ${this.summary} </slot>
+
+                    <div class="accordion-summary-right">
+                        <slot name="summary-right"></slot>
+
+                        ${this.showArrow && html`
+                            <terra-icon
+                                name="chevron-down-circle"
+                                font-size="24px"
+                            ></terra-icon>
+                        `}
+                    </div>
+                </summary>
+
+                <div class="accordion-content">
+                    <slot></slot>
+                </div>
+            </details>
+        `;
+  }
+  handleToggle(e) {
+    const details = e.currentTarget;
+    this.open = details.open;
+    this.emit("terra-accordion-toggle", {
+      detail: {
+        open: this.open
+      }
+    });
+  }
+};
+TerraAccordion.styles = [component_styles_default, accordion_styles_default];
+TerraAccordion.dependencies = {
+  "terra-icon": TerraIcon
+};
+__decorateClass([
+  property()
+], TerraAccordion.prototype, "summary", 2);
+__decorateClass([
+  property({ reflect: true, type: Boolean })
+], TerraAccordion.prototype, "open", 2);
+__decorateClass([
+  property({ type: Boolean })
+], TerraAccordion.prototype, "showArrow", 2);
+
+export {
+  TerraAccordion
+};

package/dist/chunks/chunk.GJZMMPJG.js

@@ -0,0 +1,21 @@
+import {
+  TerraPlot
+} from "./chunk.RVCQSKMD.js";
+
+// src/react/plot/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "terra-plot";
+TerraPlot.define("terra-plot");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraPlot,
+  react: React,
+  events: {},
+  displayName: "TerraPlot"
+});
+var plot_default = reactWrapper;
+
+export {
+  plot_default
+};

package/dist/chunks/chunk.GL5HOXON.js

@@ -0,0 +1,202 @@
+import {
+  leaflet_draw_styles_default
+} from "./chunk.445A7YVG.js";
+import {
+  Leaflet
+} from "./chunk.GMJWNAQG.js";
+import {
+  leaflet_styles_default
+} from "./chunk.HNQMK3PU.js";
+import {
+  MapController
+} from "./chunk.J25AAZTC.js";
+import {
+  map_styles_default
+} from "./chunk.BEDYDFXT.js";
+import {
+  watch
+} from "./chunk.DTUHBE3U.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.O6SXSDFR.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateMethod,
+  __spreadValues
+} from "./chunk.TVFCHGU3.js";
+
+// src/components/map/map.component.ts
+import { html, nothing } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { cache } from "lit/directives/cache.js";
+import { map } from "lit/directives/map.js";
+var _markDynamicLeafletContent, markDynamicLeafletContent_fn;
+var TerraMap = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _markDynamicLeafletContent);
+    this.minZoom = 0;
+    this.maxZoom = 23;
+    this.zoom = 1;
+    this.hasNavigation = false;
+    this.hasCoordTracker = false;
+    this.hasShapeSelector = false;
+    this.value = [];
+    this.map = new Leaflet();
+    this._mapController = new MapController(this);
+  }
+  valueChanged(_oldValue, newValue) {
+    var _a;
+    if (newValue.length > 0) {
+      (_a = this.map) == null ? void 0 : _a.setValue(this.value);
+    } else if (newValue.length === 0 && this.map.isMapReady) {
+      this.map.clearLayers();
+    }
+  }
+  async connectedCallback() {
+    super.connectedCallback();
+  }
+  async firstUpdated() {
+    await this.map.initializeMap(this.mapElement, {
+      zoom: this.zoom,
+      minZoom: this.minZoom,
+      maxZoom: this.maxZoom,
+      hasCoordTracker: this.hasCoordTracker,
+      hasNavigation: this.hasNavigation,
+      initialValue: this.value,
+      hideBoundingBoxDrawTool: this.hideBoundingBoxSelection,
+      hidePointSelectionDrawTool: this.hidePointSelection
+    });
+    this.map.on("draw", (layer) => {
+      this.emit("terra-map-change", {
+        detail: __spreadValues({
+          cause: "draw",
+          type: "latLng" in layer ? "point" /* POINT */ : "bounds" in layer ? "bbox" /* BBOX */ : void 0
+        }, layer)
+      });
+    });
+    this.map.on(
+      "clear",
+      (_e) => this.emit("terra-map-change", {
+        detail: {
+          cause: "clear"
+        }
+      })
+    );
+    __privateMethod(this, _markDynamicLeafletContent, markDynamicLeafletContent_fn).call(this);
+  }
+  getDrawLayer() {
+    return this.map.editableLayers.getLayers()[0];
+  }
+  selectTemplate() {
+    var _a;
+    return html`
+            <select
+                class="map__select form-control"
+                @change=${this.map.handleShapeSelect}
+            >
+                <option value="">Select a Shape...</option>
+
+                ${cache(
+      map((_a = this.shapes) == null ? void 0 : _a.categories, (category) => {
+        return html`<optgroup label="${category.title}">
+                            ${category.shapes.map((shape) => {
+          return html`
+                                    <option
+                                        value="shape=${shape.shapefileID}/${shape.shapeID}"
+                                    >
+                                        ${shape.name}
+                                    </option>
+                                `;
+        })}
+                        </optgroup> `;
+      })
+    )}
+            </select>
+        `;
+  }
+  render() {
+    return html`
+            <!-- select goes here -->
+            ${this.hasShapeSelector ? this.selectTemplate() : nothing}
+            <!-- "Map goes here" -->
+            <div part="map" id="map" class="map"></div>
+        `;
+  }
+  invalidateSize() {
+    this.map.map.invalidateSize();
+  }
+};
+_markDynamicLeafletContent = new WeakSet();
+markDynamicLeafletContent_fn = function() {
+  var _a, _b, _c, _d;
+  const parts = [
+    {
+      item: (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".leaflet-draw-draw-rectangle"),
+      name: "leaflet-bbox"
+    },
+    {
+      item: (_b = this.shadowRoot) == null ? void 0 : _b.querySelector(".leaflet-draw-draw-marker"),
+      name: "leaflet-point"
+    },
+    {
+      item: (_c = this.shadowRoot) == null ? void 0 : _c.querySelector(".leaflet-draw-edit-edit"),
+      name: "leaflet-edit"
+    },
+    {
+      item: (_d = this.shadowRoot) == null ? void 0 : _d.querySelector(".leaflet-draw-edit-remove"),
+      name: "leaflet-remove"
+    }
+  ];
+  parts.forEach(({ item, name }) => {
+    item == null ? void 0 : item.setAttribute("part", name);
+  });
+};
+TerraMap.styles = [
+  component_styles_default,
+  leaflet_styles_default,
+  leaflet_draw_styles_default,
+  map_styles_default
+];
+__decorateClass([
+  property({ attribute: "min-zoom", type: Number })
+], TerraMap.prototype, "minZoom", 2);
+__decorateClass([
+  property({ attribute: "max-zoom", type: Number })
+], TerraMap.prototype, "maxZoom", 2);
+__decorateClass([
+  property({ type: Number })
+], TerraMap.prototype, "zoom", 2);
+__decorateClass([
+  property({ attribute: "has-navigation", type: Boolean })
+], TerraMap.prototype, "hasNavigation", 2);
+__decorateClass([
+  property({ attribute: "has-coord-tracker", type: Boolean })
+], TerraMap.prototype, "hasCoordTracker", 2);
+__decorateClass([
+  property({ attribute: "has-shape-selector", type: Boolean })
+], TerraMap.prototype, "hasShapeSelector", 2);
+__decorateClass([
+  property({ attribute: "hide-bounding-box-selection", type: Boolean })
+], TerraMap.prototype, "hideBoundingBoxSelection", 2);
+__decorateClass([
+  property({ attribute: "hide-point-selection", type: Boolean })
+], TerraMap.prototype, "hidePointSelection", 2);
+__decorateClass([
+  property({ type: Array })
+], TerraMap.prototype, "value", 2);
+__decorateClass([
+  query("#map")
+], TerraMap.prototype, "mapElement", 2);
+__decorateClass([
+  watch("value")
+], TerraMap.prototype, "valueChanged", 1);
+__decorateClass([
+  state()
+], TerraMap.prototype, "shapes", 2);
+
+export {
+  TerraMap
+};