@nasa-terra/components 0.0.7 → 0.0.9

package/dist/types/vue/index.d.ts

@@ -1,16 +1,36 @@
 import type { DefineComponent } from "vue";
 
+import type { TerraBrowseVariables } from "../../components/browse-variables/browse-variables.component.js";
+import type { TerraChip } from "../../components/chip/chip.component.js";
 import type { TerraCombobox } from "../../components/combobox/combobox.component.js";
 import type { TerraDateRangeSlider } from "../../components/date-range-slider/date-range-slider.component.js";
-import type { TerraChip } from "../../components/chip/chip.component.js";
-import type { TerraButton } from "../../components/button/button.component.js";
+import type { TerraGiovanniSearch } from "../../components/giovanni-search/giovanni-search.component.js";
 import type { TerraIcon } from "../../components/icon/icon.component.js";
 import type { TerraLoader } from "../../components/loader/loader.component.js";
+import type { TerraButton } from "../../components/button/button.component.js";
 import type { TerraMap } from "../../components/map/map.component.js";
 import type { TerraPlot } from "../../components/plot/plot.component.js";
 import type { TerraSpatialPicker } from "../../components/spatial-picker/spatial-picker.component.js";
-import type { TerraTimeSeries } from "../../components/time-series/time-series.component.js";
 import type { TerraVariableCombobox } from "../../components/variable-combobox/variable-combobox.component.js";
+import type { TerraTimeSeries } from "../../components/time-series/time-series.component.js";
+
+type TerraBrowseVariablesProps = {
+  /** Filters the catalog categories and facets by the given searchQuery
+If not provided, all categories and facets will be available to browse */
+  searchQuery?: TerraBrowseVariables["searchQuery"];
+  /** Allows the user to switch the catalog between different providers
+TODO: add support for CMR catalog and make it the default */
+  catalog?: TerraBrowseVariables["catalog"];
+  /**  */
+  selectedFacetFields?: TerraBrowseVariables["selectedFacetFields"];
+  /**  */
+  handleFacetSelect?: TerraBrowseVariables["handleFacetSelect"];
+};
+
+type TerraChipProps = {
+  /**  */
+  size?: TerraChip["size"];
+};
 
 type TerraComboboxProps = {
   /** Label the combobox with this. */
@@ -57,9 +77,63 @@ type TerraDateRangeSliderProps = {
   slider?: TerraDateRangeSlider["slider"];
 };
 
-type TerraChipProps = {
+type TerraGiovanniSearchProps = {
+  /** Label the combobox with this. */
+  label?: TerraGiovanniSearch["label"];
+  /** Set a placeholder for the combobox with this.
+Defaults to the label's value. */
+  placeholder?: TerraGiovanniSearch["placeholder"];
+  /** Hide the combobox's label text.
+When hidden, still presents to screen readers. */
+  "hide-label"?: TerraGiovanniSearch["hideLabel"];
+  /** type can be `Boolean`, `String`, `Number`, `Object`, or `Array` */
+  searchConfig?: TerraGiovanniSearch["searchConfig"];
   /**  */
-  size?: TerraChip["size"];
+  value?: TerraGiovanniSearch["value"];
+  /**  */
+  isExpanded?: TerraGiovanniSearch["isExpanded"];
+  /**  */
+  query?: TerraGiovanniSearch["query"];
+  /**  */
+  searchResults?: TerraGiovanniSearch["searchResults"];
+  /** Emitted when an option is selected. */
+  onTerraGiovanniSearchChange?: (e: CustomEvent<never>) => void;
+  /** Emitted when the component is triggering a search (like a form triggering submit). */
+  onTerraSearch?: (e: CustomEvent<never>) => void;
+};
+
+type TerraIconProps = {
+  /** The name of the icon to draw. Available names depend on the icon library being used. */
+  name?: TerraIcon["name"];
+  /** An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and
+can result in XSS attacks. */
+  src?: TerraIcon["src"];
+  /** An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and
+ignored by assistive devices. */
+  label?: TerraIcon["label"];
+  /** The name of a registered custom icon library. */
+  library?: TerraIcon["library"];
+  /** The CSS color to assign to the SVG. */
+  color?: TerraIcon["color"];
+  /** The CSS font-size to assign to the SVG. */
+  "font-size"?: TerraIcon["fontSize"];
+  /**  */
+  svg?: TerraIcon["svg"];
+  /** Emitted when the icon has loaded. */
+  onTerraLoad?: (e: CustomEvent<never>) => void;
+  /** Emitted when the icon fails to load due to an error. */
+  onTerraError?: (e: CustomEvent<never>) => void;
+};
+
+type TerraLoaderProps = {
+  /** The loader's variant */
+  variant?: TerraLoader["variant"];
+  /** The percent complete for the loader to display */
+  percent?: TerraLoader["percent"];
+  /** an indeterminate loader has an unknown progress and will show a spinner */
+  indeterminate?: TerraLoader["indeterminate"];
+  /**  */
+  _currentPercent?: TerraLoader["_currentPercent"];
 };
 
 type TerraButtonProps = {
@@ -71,15 +145,15 @@ type TerraButtonProps = {
   size?: TerraButton["size"];
   /** Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior. */
   caret?: TerraButton["caret"];
+  /** The button's shape. Used to control the radius edge shape when button is not in a terra-button-group. */
+  shape?: TerraButton["shape"];
   /** Disables the button. */
   disabled?: TerraButton["disabled"];
   /** Draws the button in a loading state. */
   loading?: TerraButton["loading"];
   /** Draws an outlined button. */
   outline?: TerraButton["outline"];
-  /** Draws a pill-style button with rounded edges. */
-  pill?: TerraButton["pill"];
-  /** Draws a circular icon button. When this attribute is present, the button expects a single `<sl-icon>` in the
+  /** Draws a circular icon button. When this attribute is present, the button expects a single `<terra-icon>` in the
 default slot. */
   circle?: TerraButton["circle"];
   /** The type of button. Note that the default value is `button` instead of `submit`, which is opposite of how native
@@ -125,44 +199,6 @@ value of this attribute must be an id of a form in the same document or shadow r
   validationMessage?: TerraButton["validationMessage"];
 };
 
-type TerraIconProps = {
-  /** The name of the icon to draw. Available names depend on the icon library being used. */
-  name?: TerraIcon["name"];
-  /** An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and
-can result in XSS attacks. */
-  src?: TerraIcon["src"];
-  /** An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and
-ignored by assistive devices. */
-  label?: TerraIcon["label"];
-  /** The name of a registered custom icon library. */
-  library?: TerraIcon["library"];
-  /** The CSS color to assign to the SVG. */
-  color?: TerraIcon["color"];
-  /** The CSS font-size to assign to the SVG. */
-  "font-size"?: TerraIcon["fontSize"];
-  /**  */
-  svg?: TerraIcon["svg"];
-  /** Emitted when the icon has loaded. */
-  onTerraLoad?: (e: CustomEvent<never>) => void;
-  /** Emitted when the icon fails to load due to an error. */
-  onTerraError?: (e: CustomEvent<never>) => void;
-};
-
-type TerraLoaderProps = {
-  /** The loader's size */
-  size?: TerraLoader["size"];
-  /** The loader's theme, light or dark mode */
-  theme?: TerraLoader["theme"];
-  /** The percent complete for the loader to display */
-  percent?: TerraLoader["percent"];
-  /** an indeterminate loader has an unknown progress and will show a spinner */
-  indeterminate?: TerraLoader["indeterminate"];
-  /** A label used by a screen reader which describes the loader element (e.g., "Loading video of Tropical Storm Nepartak") */
-  label?: TerraLoader["label"];
-  /** A message used by a screen reader to describe current value of loader element in a more human-understandable way (e.g, "12% of 45MB") */
-  message?: TerraLoader["message"];
-};
-
 type TerraMapProps = {
   /** Minimum zoom level of the map. */
   "min-zoom"?: TerraMap["minZoom"];
@@ -198,8 +234,6 @@ type TerraPlotProps = {
   /**  */
   data?: TerraPlot["data"];
   /**  */
-  plotData?: TerraPlot["plotData"];
-  /**  */
   base?: TerraPlot["base"];
 };
 
@@ -231,11 +265,41 @@ When hidden, still presents to screen readers. */
   spatialInput?: TerraSpatialPicker["spatialInput"];
 };
 
+type TerraVariableComboboxProps = {
+  /** Label the combobox with this. */
+  label?: TerraVariableCombobox["label"];
+  /** Set a placeholder for the combobox with this.
+Defaults to the label's value. */
+  placeholder?: TerraVariableCombobox["placeholder"];
+  /** Hide the combobox's help text.
+When hidden, not rendered at all. */
+  "hide-help"?: TerraVariableCombobox["hideHelp"];
+  /** Hide the combobox's label text.
+When hidden, still presents to screen readers. */
+  "hide-label"?: TerraVariableCombobox["hideLabel"];
+  /**  */
+  value?: TerraVariableCombobox["value"];
+  /**  */
+  isExpanded?: TerraVariableCombobox["isExpanded"];
+  /**  */
+  query?: TerraVariableCombobox["query"];
+  /**  */
+  searchResults?: TerraVariableCombobox["searchResults"];
+  /** Emitted when an option is selected. */
+  onTerraComboboxChange?: (e: CustomEvent<never>) => void;
+};
+
 type TerraTimeSeriesProps = {
   /** a collection entry id (ex: GPM_3IMERGHH_06) */
   collection?: TerraTimeSeries["collection"];
+  /** the dataset landing page for the collection */
+  datasetLandingPage?: TerraTimeSeries["datasetLandingPage"];
   /** a variable short name to plot (ex: precipitationCal) */
   variable?: TerraTimeSeries["variable"];
+  /** the variable landing page */
+  variableLandingPage?: TerraTimeSeries["variableLandingPage"];
+  /** a variable long name to plot (e.g., "Longwave radiation flux downwards (surface)") */
+  variableLongName?: TerraTimeSeries["variableLongName"];
   /** The start date for the time series plot. (ex: 2021-01-01) */
   "start-date"?: TerraTimeSeries["startDate"];
   /** The end date for the time series plot. (ex: 2021-01-01) */
@@ -252,37 +316,37 @@ type TerraTimeSeriesProps = {
   spatialPicker?: TerraTimeSeries["spatialPicker"];
   /**  */
   variableCombobox?: TerraTimeSeries["variableCombobox"];
+  /**  */
+  menu?: TerraTimeSeries["menu"];
   /** holds the start date for the earliest available data for the collection */
   collectionBeginningDateTime?: TerraTimeSeries["collectionBeginningDateTime"];
   /** holds the end date for the latest available data for the collection */
   collectionEndingDateTime?: TerraTimeSeries["collectionEndingDateTime"];
-};
-
-type TerraVariableComboboxProps = {
-  /** Label the combobox with this. */
-  label?: TerraVariableCombobox["label"];
-  /** Set a placeholder for the combobox with this.
-Defaults to the label's value. */
-  placeholder?: TerraVariableCombobox["placeholder"];
-  /** Hide the combobox's help text.
-When hidden, not rendered at all. */
-  "hide-help"?: TerraVariableCombobox["hideHelp"];
-  /** Hide the combobox's label text.
-When hidden, still presents to screen readers. */
-  "hide-label"?: TerraVariableCombobox["hideLabel"];
-  /**  */
-  value?: TerraVariableCombobox["value"];
-  /**  */
-  isExpanded?: TerraVariableCombobox["isExpanded"];
-  /**  */
-  query?: TerraVariableCombobox["query"];
   /**  */
-  searchResults?: TerraVariableCombobox["searchResults"];
-  /** Emitted when an option is selected. */
-  onTerraComboboxChange?: (e: CustomEvent<never>) => void;
+  activeMenuItem?: TerraTimeSeries["activeMenuItem"];
 };
 
 export type CustomElements = {
+  /**
+   * Browse through the Giovanni catalog.
+   * ---
+   *
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "terra-browse-variables": DefineComponent<TerraBrowseVariablesProps>;
+
+  /**
+   * Used for contacts and tags
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The chip's label.
+   */
+  "terra-chip": DefineComponent<TerraChipProps>;
+
   /**
    * Fuzzy-search for combobox with list autocomplete.
    * ---
@@ -319,43 +383,25 @@ export type CustomElements = {
   "terra-date-range-slider": DefineComponent<TerraDateRangeSliderProps>;
 
   /**
-   * Used for contacts and tags
+   * Fuzzy-search for dataset keywords in combobox with list autocomplete.
    * ---
    *
    *
-   * ### **Slots:**
-   *  - _default_ - The chip's label.
-   */
-  "terra-chip": DefineComponent<TerraChipProps>;
-
-  /**
-   * Buttons represent actions that are available to the user.
-   * ---
-   *
-   *
-   * ### **Methods:**
-   *  - **click()** - Simulates a click on the button.
-   * - **focus(options: _FocusOptions_)** - Sets focus on the button.
-   * - **blur()** - Removes focus from the button.
-   * - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
-   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
-   * - **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.
-   * - **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.
+   * ### **Events:**
+   *  - **terra-giovanni-search-change** - Emitted when an option is selected.
+   * - **terra-search** - Emitted when the component is triggering a search (like a form triggering submit).
    *
-   * ### **Slots:**
-   *  - _default_ - The button's label.
-   * - **prefix** - A presentational prefix icon or similar element.
-   * - **suffix** - A presentational suffix icon or similar element.
+   * ### **CSS Properties:**
+   *  - **--host-height** - The height of the host element. _(default: undefined)_
+   * - **--label-height** - The height of the input's label element. _(default: undefined)_
    *
    * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **prefix** - The container that wraps the prefix.
-   * - **label** - The button's label.
-   * - **suffix** - The container that wraps the suffix.
-   * - **caret** - The button's caret icon, an `<sl-icon>` element.
-   * - **spinner** - The spinner that shows when the button is in the loading state.
+   *  - **base** - A `search` element, the component's base.
+   * - **combobox** - An `input` element used for searching.
+   * - **button** - A `button` used for toggling the listbox's visibility.
+   * - **listbox** - A `ul` that holds the clickable options.
    */
-  "terra-button": DefineComponent<TerraButtonProps>;
+  "terra-giovanni-search": DefineComponent<TerraGiovanniSearchProps>;
 
   /**
    * Icons are symbols that can be used to represent various options within an application.
@@ -384,6 +430,35 @@ export type CustomElements = {
    */
   "terra-loader": DefineComponent<TerraLoaderProps>;
 
+  /**
+   * Buttons represent actions that are available to the user.
+   * ---
+   *
+   *
+   * ### **Methods:**
+   *  - **click()** - Simulates a click on the button.
+   * - **focus(options: _FocusOptions_)** - Sets focus on the button.
+   * - **blur()** - Removes focus from the button.
+   * - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
+   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
+   * - **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.
+   * - **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.
+   *
+   * ### **Slots:**
+   *  - _default_ - The button's label.
+   * - **prefix** - A presentational prefix icon or similar element.
+   * - **suffix** - A presentational suffix icon or similar element.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **prefix** - The container that wraps the prefix.
+   * - **label** - The button's label.
+   * - **suffix** - The container that wraps the suffix.
+   * - **caret** - The button's caret icon, an `<sl-icon>` element.
+   * - **spinner** - The spinner that shows when the button is in the loading state.
+   */
+  "terra-button": DefineComponent<TerraButtonProps>;
+
   /**
    * A map component for visualizing and selecting coordinates.
    * ---
@@ -408,13 +483,6 @@ export type CustomElements = {
    */
   "terra-spatial-picker": DefineComponent<TerraSpatialPickerProps>;
 
-  /**
-   * A component for visualizing time series data using the GES DISC Giovanni API.
-   * ---
-   *
-   */
-  "terra-time-series": DefineComponent<TerraTimeSeriesProps>;
-
   /**
    * Fuzzy-search for dataset variables in combobox with list autocomplete.
    * ---
@@ -435,6 +503,13 @@ export type CustomElements = {
    * - **listbox** - A `ul` that holds the clickable options.
    */
   "terra-variable-combobox": DefineComponent<TerraVariableComboboxProps>;
+
+  /**
+   * A component for visualizing time series data using the GES DISC Giovanni API.
+   * ---
+   *
+   */
+  "terra-time-series": DefineComponent<TerraTimeSeriesProps>;
 };
 
 declare module "vue" {

package/dist/utilities/animation-registry.js

@@ -1,7 +1,7 @@
 import {
   __spreadProps,
   __spreadValues
-} from "../chunks/chunk.RYPAZDXE.js";
+} from "../chunks/chunk.GKBF7QGR.js";
 
 // src/utilities/animation-registry.ts
 var defaultAnimationRegistry = /* @__PURE__ */ new Map();

package/dist/utilities/animation.js

@@ -2,7 +2,7 @@ import {
   getAnimationNames,
   getEasingNames
 } from "../chunks/chunk.2V4XFMTB.js";
-import "../chunks/chunk.RYPAZDXE.js";
+import "../chunks/chunk.GKBF7QGR.js";
 export {
   getAnimationNames,
   getEasingNames

package/dist/utilities/base-path.js

@@ -2,7 +2,7 @@ import {
   getBasePath,
   setBasePath
 } from "../chunks/chunk.NQKBKXPW.js";
-import "../chunks/chunk.RYPAZDXE.js";
+import "../chunks/chunk.GKBF7QGR.js";
 export {
   getBasePath,
   setBasePath

package/dist/utilities/date.js

@@ -1,7 +1,7 @@
 import {
   isValidDate
 } from "../chunks/chunk.OIDMX5LU.js";
-import "../chunks/chunk.RYPAZDXE.js";
+import "../chunks/chunk.GKBF7QGR.js";
 export {
   isValidDate
 };

package/dist/utilities/form.js

@@ -1,9 +1,9 @@
 import {
   getFormControls,
   serialize
-} from "../chunks/chunk.OQE2USZJ.js";
-import "../chunks/chunk.NYBJ252W.js";
-import "../chunks/chunk.RYPAZDXE.js";
+} from "../chunks/chunk.RWULTAWI.js";
+import "../chunks/chunk.VN4FDFT7.js";
+import "../chunks/chunk.GKBF7QGR.js";
 export {
   getFormControls,
   serialize

package/dist/utilities/icon-library.js

@@ -2,11 +2,11 @@ import "../chunks/chunk.HAL7R4WT.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
-} from "../chunks/chunk.MDRUDBRH.js";
-import "../chunks/chunk.XTCYIPKA.js";
+} from "../chunks/chunk.7DOMZGX7.js";
 import "../chunks/chunk.UCNEPIMI.js";
+import "../chunks/chunk.XTCYIPKA.js";
 import "../chunks/chunk.NQKBKXPW.js";
-import "../chunks/chunk.RYPAZDXE.js";
+import "../chunks/chunk.GKBF7QGR.js";
 export {
   registerIconLibrary,
   unregisterIconLibrary