@nasa-terra/components 0.0.7 → 0.0.10

package/dist/chunks/chunk.VDU7JJBS.js

@@ -0,0 +1,390 @@
+import {
+  __decorateClass,
+  __spreadValues
+} from "./chunk.GKBF7QGR.js";
+
+// src/styles/component.styles.ts
+import { css } from "lit";
+var darkModeCSS = "/dist/themes/horizon-dark.css";
+function loadCSSFile(filename, media, onloadCallback) {
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.type = "text/css";
+  link.href = filename;
+  if (media) {
+    link.media = media;
+  }
+  if (onloadCallback) {
+    link.onload = onloadCallback;
+  }
+  document.head.appendChild(link);
+}
+loadCSSFile("/dist/themes/horizon.css");
+loadCSSFile(darkModeCSS);
+var component_styles_default = css`
+    :host {
+        box-sizing: border-box;
+    }
+
+    :host *,
+    :host *::before,
+    :host *::after {
+        box-sizing: inherit;
+    }
+
+    :host {
+        background-color: var(--background-color);
+        color: var(--color);
+    }
+
+    [hidden] {
+        display: none !important;
+    }
+
+    /* Horizon Design System Font Classes */
+
+    /* Display Fonts */
+
+    .display-120 {
+        font-family: var(--terra-font-family--inter);
+        font-size: 7.5rem; /* 120px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .display-100 {
+        font-family: var(--terra-font-family--inter);
+        font-size: 6.25rem; /* 100px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .display-80 {
+        font-family: var(--terra-font-family--inter);
+        font-size: 5rem; /* 80px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .display-72 {
+        font-family: var(--terra-font-family--inter);
+        font-size: 4.5rem; /* 72px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .display-60 {
+        font-family: var(--terra-font-family--inter);
+        font-size: 3.75rem; /* 60px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .display-48 {
+        font-family: var(--terra-font-family--inter);
+        font-size: 3rem; /* 48px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .display-41 {
+        font-family: var(--terra-font-family--inter);
+        font-size: 2.563rem; /* 41px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    /* Heading Fonts */
+
+    .heading-36-bold {
+        font-family: var(--terra-font-family--inter);
+        font-size: 2.25rem; /* 36px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .heading-36-light {
+        font-family: var(--terra-font-family--inter);
+        font-size: 2.25rem; /* 36px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .heading-29-bold {
+        font-family: var(--terra-font-family--inter);
+        font-size: 1.813rem; /* 29px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .heading-29-light {
+        font-family: var(--terra-font-family--inter);
+        font-size: 1.813rem; /* 29px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .heading-22-bold {
+        font-family: var(--terra-font-family--inter);
+        font-size: 1.375rem; /* 22px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .heading-22-light {
+        font-family: var(--terra-font-family--inter);
+        font-size: 1.375rem; /*22px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .heading-18-bold {
+        font-family: var(--terra-font-family--inter);
+        font-size: 1.125rem; /* 18px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .heading-18-light {
+        font-family: var(--terra-font-family--inter);
+        font-size: 1.125rem; /* 18px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .heading-16-bold {
+        font-family: var(--terra-font-family--inter);
+        font-size: 1rem; /* 16px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .heading-16-light {
+        font-family: var(--terra-font-family--inter);
+        font-size: 1rem; /* 16px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .heading-14-bold {
+        font-family: var(--terra-font-family--inter);
+        font-size: 0.875rem; /* 14px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .heading-14-light {
+        font-family: var(--terra-font-family--inter);
+        font-size: 0.875rem; /* 14px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .heading-12-bold {
+        font-family: var(--terra-font-family--inter);
+        font-size: 0.75rem; /* 12px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .heading-12-light {
+        font-family: var(--terra-font-family--inter);
+        font-size: 0.75rem; /* 12px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .heading-11-semi-bold {
+        font-family: var(--terra-font-family--inter);
+        font-size: 0.688rem; /* 11px */
+        font-weight: var(--terra-font-weight-semi-bold);
+    }
+
+    /* Body Fonts */
+
+    .body-18 {
+        font-family: var(--terra-font-family--public-sans);
+        font-size: 1.125rem; /* 18px */
+        font-weight: var(--terra-font-weight-normal);
+    }
+
+    .body-16 {
+        font-family: var(--terra-font-family--public-sans);
+        font-size: 1rem; /* 16px */
+        font-weight: var(--terra-font-weight-normal);
+    }
+
+    .body-14 {
+        font-family: var(--terra-font-family--public-sans);
+        font-size: 0.875rem; /* 14px */
+        font-weight: var(--terra-font-weight-normal);
+    }
+
+    .body-12 {
+        font-family: var(--terra-font-family--public-sans);
+        font-size: 0.75rem; /* 12px */
+        font-weight: var(--terra-font-weight-normal);
+    }
+
+    .body-11 {
+        font-family: var(--terra-font-family--public-sans);
+        font-size: 0.688rem; /* 11px */
+        font-weight: var(--terra-font-weight-normal);
+    }
+
+    /* Number & Label Fonts */
+
+    .number-240 {
+        font-family: var(--terra-font-family--dm-mono);
+        font-size: 15rem; /* 240px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .number-120 {
+        font-family: var(--terra-font-family--dm-mono);
+        font-size: 7.5rem; /* 120px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .number-48 {
+        font-family: var(--terra-font-family--dm-mono);
+        font-size: 3rem; /* 48px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .number-36 {
+        font-family: var(--terra-font-family--dm-mono);
+        font-size: 2.25rem; /* 36px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .number-14 {
+        font-family: var(--terra-font-family--dm-mono);
+        font-size: 0.875rem; /* 14px */
+        font-weight: 500;
+    }
+
+    .number-11 {
+        font-family: var(--terra-font-family--dm-mono);
+        font-size: 0.688rem; /* 11px */
+        font-weight: 500;
+    }
+
+    .label-14 {
+        font-family: var(--terra-font-family--dm-mono);
+        font-size: 0.875rem; /* 14px */
+        font-weight: var(--terra-font-weight-light);
+        text-transform: uppercase;
+    }
+
+    .label-12 {
+        font-family: var(--terra-font-family--dm-mono);
+        font-size: 0.75rem; /* 12px */
+        font-weight: var(--terra-font-weight-light);
+        text-transform: uppercase;
+    }
+
+    .label-11 {
+        font-family: var(--terra-font-family--dm-mono);
+        font-size: 0.688rem; /* 11px */
+        font-weight: var(--terra-font-weight-light);
+        text-transform: uppercase;
+    }
+
+    /* Forms */
+
+    /* Input Field */
+
+    input[type='text'],
+    input[type='password'],
+    select,
+    .input {
+        font-family: var(--terra-input-font-family);
+        font-size: var(--terra-input-font-size);
+        color: var(--terra-input-color);
+        font-weight: var(--terra-input-font-weight);
+        line-height: var(--terra-input-line-height);
+        background-color: var(--terra-input-background-color);
+        border: var(--terra-input-border-width) solid var(--terra-input-border-color);
+        border-radius: var(--terra-input-border-radius);
+    }
+
+    label,
+    .input-label {
+        font-family: var(--terra-input-label-font-family);
+        font-size: var(--terra-input-label-font-size);
+        color: var(--terra-input-label-color);
+        font-weight: var(--terra-font-weight-semibold);
+        line-height: var(--terra-input-label-line-height);
+    }
+
+    /* Elements */
+
+    a {
+        text-decoration: underline;
+        text-decoration-color: #585858;
+        text-decoration-style: dashed;
+        text-decoration-thickness: 0.05em;
+        text-underline-offset: 0.25rem;
+        color: var(--terra-color-carbon-60);
+    }
+
+    /* 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
+import { LitElement } from "lit";
+import { property } from "lit/decorators.js";
+var TerraElement = class extends LitElement {
+  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.10";
+TerraElement.dependencies = {};
+__decorateClass([
+  property()
+], TerraElement.prototype, "dir", 2);
+__decorateClass([
+  property()
+], TerraElement.prototype, "lang", 2);
+
+export {
+  component_styles_default,
+  TerraElement
+};

package/dist/chunks/{chunk.NYBJ252W.js → chunk.VN4FDFT7.js}

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

package/dist/chunks/{chunk.GBVXVADE.js → chunk.VUIXHR4Y.js}

@@ -3,20 +3,20 @@ import {
 } from "./chunk.OIDMX5LU.js";
 import {
   date_range_slider_styles_default
-} from "./chunk.OU4UPMYR.js";
+} from "./chunk.62YHGVQN.js";
 import {
   mergeTooltips
 } from "./chunk.KW4TJM4C.js";
 import {
   watch
-} from "./chunk.ZK7QVWBI.js";
+} from "./chunk.Y6OL24QM.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.RFKXBNLY.js";
+} from "./chunk.VDU7JJBS.js";
 import {
   __decorateClass
-} from "./chunk.RYPAZDXE.js";
+} from "./chunk.GKBF7QGR.js";
 
 // src/components/date-range-slider/date-range-slider.component.ts
 import { property, query } from "lit/decorators.js";
@@ -72,6 +72,7 @@ var TerraDateRangeSlider = class extends TerraElement {
         min: minDate.getTime(),
         max: maxDate.getTime()
       },
+      behaviour: "drag",
       step: this._getStep(),
       start: [startDate.getTime(), endDate.getTime()],
       // defaults to either the given start/end dates or the full date range (min/max date)

package/dist/chunks/{chunk.BLNUBLUS.js → chunk.W7JRXR2Y.js}

@@ -5,11 +5,15 @@ var plot_styles_default = css`
         display: block;
     }
 
+    :host::part(base) {
+        aspect-ratio: 4 / 3;
+    }
+
     /**
    * !Alert! The rest of this stylesheet is auto-generated!
    * Unfortunately Plotly does not work well with Shadow DOM AND they don't supply a CSS file at all for us to import
    * Because of this, a working solution is to copy their CSS over.
-   * 
+   *
    * Given that they use CSS, you can do npx -y sass ./node_modules/plotly.js/src/css/style.scss > plotly.css
    * to generate the CSS, then copy the contents of plotly.css into this file
    */

package/dist/chunks/{chunk.ZK7QVWBI.js → chunk.Y6OL24QM.js}

@@ -1,6 +1,6 @@
 import {
   __spreadValues
-} from "./chunk.RYPAZDXE.js";
+} from "./chunk.GKBF7QGR.js";
 
 // src/internal/watch.ts
 function watch(propertyName, options) {

package/{cdn/chunks/chunk.AG72D4AT.js → dist/chunks/chunk.YIQPXMOR.js}

@@ -1,6 +1,6 @@
 import {
   TerraChip
-} from "./chunk.6TP5NQZR.js";
+} from "./chunk.45IL4VM3.js";
 
 // src/react/chip/index.ts
 import * as React from "react";

package/dist/chunks/{chunk.EYUPYDT4.js → chunk.YOWSDNNI.js}

@@ -1,25 +1,25 @@
-import {
-  icon_styles_default
-} from "./chunk.7VUSSQRI.js";
 import {
   getIconLibrary,
   unwatchIcon,
   watchIcon
-} from "./chunk.MDRUDBRH.js";
+} from "./chunk.7DOMZGX7.js";
+import {
+  icon_styles_default
+} from "./chunk.7VUSSQRI.js";
 import {
   watch
-} from "./chunk.ZK7QVWBI.js";
+} from "./chunk.Y6OL24QM.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.RFKXBNLY.js";
+} from "./chunk.VDU7JJBS.js";
 import {
   __decorateClass,
   __privateAdd,
   __privateGet,
   __privateMethod,
   __privateSet
-} from "./chunk.RYPAZDXE.js";
+} from "./chunk.GKBF7QGR.js";
 
 // src/components/icon/icon.component.ts
 import { property, state } from "lit/decorators.js";

package/dist/chunks/chunk.ZKAF7B56.js

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

package/{cdn/chunks/chunk.CLFLLHS3.js → dist/chunks/chunk.ZLX3YIA5.js}

@@ -1,6 +1,6 @@
 import {
   TerraLoader
-} from "./chunk.FDOXEWGR.js";
+} from "./chunk.CETYO6UP.js";
 
 // src/react/loader/index.ts
 import * as React from "react";

package/dist/components/browse-variables/browse-variables.component.d.ts

@@ -0,0 +1,28 @@
+import TerraElement from '../../internal/terra-element.js';
+import type { CSSResultGroup } from 'lit';
+import type { SelectedFacetField } from './browse-variables.types.js';
+/**
+ * @summary Browse through the Giovanni catalog.
+ * @documentation https://disc.gsfc.nasa.gov/components/browse-variables
+ * @status MVP
+ * @since 1.0
+ *
+ * @csspart base - The component's base wrapper.
+ */
+export default class TerraBrowseVariables extends TerraElement {
+    #private;
+    static styles: CSSResultGroup;
+    /**
+     * Filters the catalog categories and facets by the given searchQuery
+     * If not provided, all categories and facets will be available to browse
+     */
+    searchQuery: string;
+    /**
+     * Allows the user to switch the catalog between different providers
+     * TODO: add support for CMR catalog and make it the default
+     */
+    catalog: 'giovanni';
+    selectedFacetFields: SelectedFacetField[];
+    handleFacetSelect: (event: Event) => void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/browse-variables/browse-variables.component.js

@@ -0,0 +1,11 @@
+import {
+  TerraBrowseVariables
+} from "../../chunks/chunk.EQN5HVOY.js";
+import "../../chunks/chunk.6LKFAV2F.js";
+import "../../chunks/chunk.O7AXAEKY.js";
+import "../../chunks/chunk.UPZNWZOP.js";
+import "../../chunks/chunk.VDU7JJBS.js";
+import "../../chunks/chunk.GKBF7QGR.js";
+export {
+  TerraBrowseVariables as default
+};

package/dist/components/browse-variables/browse-variables.controller.d.ts

@@ -0,0 +1,11 @@
+import type { StatusRenderer } from '@lit/task';
+import type { ReactiveControllerHost } from 'lit';
+import type { FacetsByCategory, Variable } from './browse-variables.types.js';
+import type TerraBrowseVariables from './browse-variables.component.js';
+export declare class BrowseVariablesController {
+    #private;
+    facetsByCategory: FacetsByCategory;
+    variables: Variable[];
+    constructor(host: ReactiveControllerHost & TerraBrowseVariables);
+    render(renderFunctions: StatusRenderer<any>): unknown;
+}

package/dist/components/browse-variables/browse-variables.controller.js

@@ -0,0 +1,8 @@
+import {
+  BrowseVariablesController
+} from "../../chunks/chunk.6LKFAV2F.js";
+import "../../chunks/chunk.O7AXAEKY.js";
+import "../../chunks/chunk.GKBF7QGR.js";
+export {
+  BrowseVariablesController
+};

package/dist/components/browse-variables/browse-variables.d.ts

@@ -0,0 +1,8 @@
+import TerraBrowseVariables from './browse-variables.component.js';
+export * from './browse-variables.component.js';
+export default TerraBrowseVariables;
+declare global {
+    interface HTMLElementTagNameMap {
+        'terra-browse-variables': TerraBrowseVariables;
+    }
+}

package/dist/components/browse-variables/browse-variables.js

@@ -0,0 +1,12 @@
+import {
+  browse_variables_default
+} from "../../chunks/chunk.NU7T7O37.js";
+import "../../chunks/chunk.EQN5HVOY.js";
+import "../../chunks/chunk.6LKFAV2F.js";
+import "../../chunks/chunk.O7AXAEKY.js";
+import "../../chunks/chunk.UPZNWZOP.js";
+import "../../chunks/chunk.VDU7JJBS.js";
+import "../../chunks/chunk.GKBF7QGR.js";
+export {
+  browse_variables_default as default
+};

package/dist/components/browse-variables/browse-variables.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/browse-variables/browse-variables.styles.js

@@ -0,0 +1,7 @@
+import {
+  browse_variables_styles_default
+} from "../../chunks/chunk.UPZNWZOP.js";
+import "../../chunks/chunk.GKBF7QGR.js";
+export {
+  browse_variables_styles_default as default
+};

package/dist/components/browse-variables/browse-variables.types.d.ts

@@ -0,0 +1,49 @@
+export interface CatalogRepositoryInterface {
+    /**
+     * used to retrieve a list of variables and facet categories that can be filtered by
+     * a search query and/or a list of selected facet fields
+     */
+    searchVariablesAndFacets(query?: string, selectedFacetFields?: SelectedFacetField[], options?: SearchOptions): Promise<SearchResponse>;
+}
+export type SearchOptions = {
+    signal: AbortSignal;
+};
+export type SearchResponse = {
+    facetsByCategory: FacetsByCategory;
+    variables: Variable[];
+};
+export type SelectedFacetField = {
+    facet: string;
+    field: string;
+};
+export type FacetsByCategory = {
+    depths: FacetField[];
+    disciplines: FacetField[];
+    measurements: FacetField[];
+    observations: FacetField[];
+    platformInstruments: FacetField[];
+    portals: FacetField[];
+    spatialResolutions: FacetField[];
+    specialFeatures: FacetField[];
+    temporalResolutions: FacetField[];
+    wavelengths: FacetField[];
+};
+export type FacetField = {
+    name: string;
+    count: number;
+};
+export type Variable = {
+    dataProductShortName: string;
+    dataProductVersion: string;
+    dataFieldShortName: string;
+    dataFieldLongName: string;
+    dataProductLongName: string;
+    dataProductTimeInterval: string;
+    dataProductWest: number;
+    dataProductSouth: number;
+    dataProductEast: number;
+    dataProductNorth: number;
+    dataProductSpatialResolution: string;
+    dataProductBeginDateTime: string;
+    dataProductEndDateTime: string;
+};