@nasa-terra/components 0.0.23 → 0.0.26

package/dist/chunks/{chunk.2JBR7OBQ.js → chunk.6SZJNBMQ.js}

@@ -1,31 +1,31 @@
 import {
   TerraSkeleton
-} from "./chunk.SSZJ36DG.js";
+} from "./chunk.IUJHXLVB.js";
 import {
   getRandomIntInclusive
 } from "./chunk.7PAVW6KC.js";
+import {
+  TerraLoader
+} from "./chunk.P7IYYL6V.js";
 import {
   TerraGiovanniSearch
-} from "./chunk.B5L7SVZ2.js";
+} from "./chunk.YCV4LGKI.js";
 import {
   TerraIcon
-} from "./chunk.5GIZ5MAH.js";
-import {
-  TerraLoader
-} from "./chunk.P2EJPIEH.js";
-import {
-  TerraButton
-} from "./chunk.JJ4XNWII.js";
+} from "./chunk.3VRBGLE2.js";
 import {
   BrowseVariablesController
 } from "./chunk.Z2ELMSYN.js";
 import {
   browse_variables_styles_default
-} from "./chunk.YL2ETAOO.js";
+} from "./chunk.VVDSM7KF.js";
+import {
+  TerraButton
+} from "./chunk.GUAQQMEX.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.PVDILQEJ.js";
+} from "./chunk.PYOU5GNJ.js";
 import {
   __decorateClass,
   __objRest,
@@ -38,9 +38,9 @@ import {
 } from "./chunk.TVFCHGU3.js";
 
 // src/components/browse-variables/browse-variables.component.ts
+import { TaskStatus } from "@lit/task";
 import { html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
-import { TaskStatus } from "@lit/task";
 var _controller, _selectFacetField, selectFacetField_fn, _clearFacet, clearFacet_fn, _unselectFacetField, unselectFacetField_fn, _renderCategorySelect, renderCategorySelect_fn, _renderFacet, renderFacet_fn, _renderVariablesBrowse, renderVariablesBrowse_fn;
 var TerraBrowseVariables = class extends TerraElement {
   constructor() {
@@ -84,7 +84,7 @@ var TerraBrowseVariables = class extends TerraElement {
     __privateMethod(this, _selectFacetField, selectFacetField_fn).call(this, target.dataset.facet, target.innerText.trim());
     this.showVariablesBrowse = true;
   }
-  handleSearchChange(e) {
+  handleSearch(e) {
     this.selectedFacets = {};
     this.searchQuery = e.detail;
   }
@@ -105,8 +105,8 @@ var TerraBrowseVariables = class extends TerraElement {
                           ` : nothing}
 
                     <terra-giovanni-search
-                        @terra-giovanni-search-change=${this.handleSearchChange}
-                    />
+                        @terra-search=${this.handleSearch}
+                    ></terra-giovanni-search>
                 </header>
 
                 ${this.showVariablesBrowse ? __privateMethod(this, _renderVariablesBrowse, renderVariablesBrowse_fn).call(this) : __privateMethod(this, _renderCategorySelect, renderCategorySelect_fn).call(this)}
@@ -269,8 +269,54 @@ renderVariablesBrowse_fn = function() {
   ];
   return html`<div class="scrollable variables-container">
             <header>
-                Showing ${__privateGet(this, _controller).total}
-                variables${this.searchQuery ? ` associated with '${this.searchQuery}'` : ""}
+                Showing ${__privateGet(this, _controller).total} variables
+                ${this.searchQuery ? `associated with '${this.searchQuery}'` : ""}
+                <!-- Sorting and Grouping feature still needs a UI / UX feature discussion.
+                <menu>
+                    <li>
+                        <sl-dropdown class="list-menu-dropdown">
+                            <sl-button slot="trigger" caret>Sort By</sl-button>
+                            <sl-menu>
+                                <sl-menu-item value="aToZ">A&hellip;Z</sl-menu-item>
+                                <sl-menu-item value="zToA">Z&hellip;A</sl-menu-item>
+                            </sl-menu>
+                        </sl-dropdown>
+                    </li>
+                    <li>
+                        <sl-dropdown class="list-menu-dropdown">
+                            <sl-button slot="trigger" caret>Group By</sl-button>
+                            <sl-menu>
+                                <sl-menu-item value="depths">Depths</sl-menu-item>
+                                <sl-menu-item value="disciplines"
+                                    >Disciplines</sl-menu-item
+                                >
+                                <sl-menu-item value="measurements"
+                                    >Measurements</sl-menu-item
+                                >
+                                <sl-menu-item value="observations"
+                                    >Observations</sl-menu-item
+                                >
+                                <sl-menu-item value="platformInstruments"
+                                    >Platform Instruments</sl-menu-item
+                                >
+                                <sl-menu-item value="portals">Portals</sl-menu-item>
+                                <sl-menu-item value="spatialResolutions"
+                                    >Spatial Resolutions</sl-menu-item
+                                >
+                                <sl-menu-item value="specialFeatures"
+                                    >Special Features</sl-menu-item
+                                >
+                                <sl-menu-item value="temporalResolutions"
+                                    >Temporal Resolutions</sl-menu-item
+                                >
+                                <sl-menu-item value="wavelengths"
+                                    >Wavelengths</sl-menu-item
+                                >
+                            </sl-menu>
+                        </sl-dropdown>
+                    </li>
+                </menu>
+                -->
             </header>
 
             <aside>
@@ -287,39 +333,90 @@ renderVariablesBrowse_fn = function() {
             <main>
                 <section class="group">
                     <ul class="variable-list">
-                        ${__privateGet(this, _controller).variables.map(
-    (variable) => html`
-                                <!-- Just dumping some data here that may be useful in the details popup -->
-                                <li tabindex="0" aria-selected="false">
-                                    <strong>${variable.dataFieldLongName}</strong>
-                                    <span
-                                        >MERRA-2 • ${variable.dataProductTimeInterval}
-                                        • kg-m2</span
-                                    >
+                        ${__privateGet(this, _controller).variables.map((variable) => {
+    return html`
+                                <li
+                                    aria-selected="false"
+                                    class="variable-list-item"
+                                    @click=${(event) => {
+      const target = event.currentTarget;
+      const targetCheckbox = target.querySelector(
+        'input[type="checkbox"]'
+      );
+      if (!targetCheckbox) {
+        return;
+      }
+      target == null ? void 0 : target.setAttribute(
+        "aria-selected",
+        `${targetCheckbox.checked}`
+      );
+    }}
+                                >
+                                    <div class="variable">
+                                        <label>
+                                            <input type="checkbox" />
+                                            <strong
+                                                >${variable.dataFieldLongName}</strong
+                                            ><br />
+                                            <span
+                                                >${variable.dataProductShortName}
+                                                &bull;
+                                                ${variable.dataProductTimeInterval}
+                                                &bull;
+                                                ${variable.dataProductSpatialResolution}</span
+                                            >
+                                        </label>
+
+                                        <sl-drawer contained>
+                                            <h4 slot="label">
+                                                <strong>Science Name</strong><br />
+                                                ${variable.dataFieldLongName}
+                                            </h4>
+                                            <p>
+                                                <strong>Spatial Resolution</strong
+                                                ><br />
+                                                ${variable.dataProductSpatialResolution}
+                                            </p>
+                                            <p>
+                                                <strong>Temporal Coverage</strong
+                                                ><br />
+                                                ${variable.dataProductBeginDateTime}&puncsp;&ndash;&puncsp;${variable.dataProductEndDateTime}
+                                            </p>
+                                            <p>
+                                                <strong>Region Coverage</strong><br />
+                                                ${variable.dataProductWest},${variable.dataProductSouth},${variable.dataProductEast},${variable.dataProductNorth}
+                                            </p>
+                                            <p>
+                                                <strong>Dataset</strong><br />
+                                                ${variable.dataProductShortName}_${variable.dataProductVersion}
+                                            </p>
+                                        </sl-drawer>
 
-                                    <div class="details-panel">
-                                        <h4>
-                                            Science Name:
-                                            ${variable.dataFieldLongName}
-                                        </h4>
-                                        <p>
-                                            <strong>Spatial Resolution:</strong>
-                                            ${variable.dataProductSpatialResolution}
-                                        </p>
-                                        <p>
-                                            <strong>Temporal Coverage:</strong>
-                                            ${variable.dataProductBeginDateTime} -
-                                            ${variable.dataProductEndDateTime}
-                                        </p>
-                                        <p>
-                                            <strong>Region Coverage:</strong>
-                                            Global
-                                        </p>
-                                        <p><strong>Dataset:</strong> MERRA-2</p>
+                                        <terra-button
+                                            @click=${(_event) => {
+      const drawer = this.renderRoot.querySelector(
+        "sl-drawer"
+      );
+      drawer.show();
+    }}
+                                            aria-label="View variable details."
+                                            circle
+                                            class="variable-details-button"
+                                            outline
+                                            type="button"
+                                        >
+                                            <slot name="label">
+                                                <terra-icon
+                                                    font-size="1.5em"
+                                                    library="heroicons"
+                                                    name="outline-information-circle"
+                                                ></terra-icon>
+                                            </slot>
+                                        </terra-button>
                                     </div>
                                 </li>
-                            `
-  )}
+                            `;
+  })}
                     </ul>
                 </section>
             </main>

package/dist/chunks/{chunk.ZKCIZ7YJ.js → chunk.A6MFFTZ4.js}

@@ -7,7 +7,7 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.PVDILQEJ.js";
+} from "./chunk.PYOU5GNJ.js";
 import {
   __decorateClass,
   __privateAdd,

package/dist/chunks/{chunk.IHSQ72OT.js → chunk.AXVUNFLN.js}

@@ -4,7 +4,7 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.PVDILQEJ.js";
+} from "./chunk.PYOU5GNJ.js";
 import {
   __decorateClass,
   __privateAdd,

package/dist/chunks/{chunk.6OEVAMVW.js → chunk.B2K5RQP6.js}

@@ -1,19 +1,19 @@
 import {
   isValidDate
 } from "./chunk.OIDMX5LU.js";
-import {
-  date_range_slider_styles_default
-} from "./chunk.62YHGVQN.js";
 import {
   mergeTooltips
 } from "./chunk.KW4TJM4C.js";
+import {
+  date_range_slider_styles_default
+} from "./chunk.62YHGVQN.js";
 import {
   watch
 } from "./chunk.SK7IZCKP.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.PVDILQEJ.js";
+} from "./chunk.PYOU5GNJ.js";
 import {
   __decorateClass
 } from "./chunk.TVFCHGU3.js";

package/dist/chunks/{chunk.GDI2NWFW.js → chunk.B5HKOLNS.js}

@@ -1,6 +1,6 @@
 import {
   TerraLogin
-} from "./chunk.DY5URCKM.js";
+} from "./chunk.EIBEZPY7.js";
 
 // src/react/login/index.ts
 import * as React from "react";

package/dist/chunks/chunk.BB4IASWR.js

@@ -0,0 +1,87 @@
+import {
+  dialog_styles_default
+} from "./chunk.CCDDGUFW.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.PYOU5GNJ.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateMethod
+} from "./chunk.TVFCHGU3.js";
+
+// src/components/dialog/dialog.component.ts
+import { html } from "lit";
+import { property, query } from "lit/decorators.js";
+var _handleBackdropClick, handleBackdropClick_fn;
+var TerraDialog = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _handleBackdropClick);
+    this.width = "500px";
+    this.open = false;
+    this.clickOutsideToClose = true;
+    this.showBackdrop = true;
+  }
+  toggle() {
+    this.open ? this.hide() : this.show();
+  }
+  show() {
+    this.open = true;
+    this.emit("terra-dialog-show");
+  }
+  hide() {
+    this.open = false;
+    this.emit("terra-dialog-hide");
+  }
+  render() {
+    return html`
+            <div
+                class="dialog-backdrop ${this.showBackdrop ? "visible" : ""} ${this.open ? "active" : ""} ${this.clickOutsideToClose ? "clickable" : ""}"
+                part="backdrop"
+                @click=${__privateMethod(this, _handleBackdropClick, handleBackdropClick_fn)}
+            ></div>
+
+            <dialog
+                part="dialog"
+                ?open=${this.open}
+                id=${this.id}
+                role="dialog"
+                aria-modal="true"
+                style="width: ${this.width}"
+            >
+                <slot></slot>
+            </dialog>
+        `;
+  }
+};
+_handleBackdropClick = new WeakSet();
+handleBackdropClick_fn = function() {
+  if (this.clickOutsideToClose) {
+    this.hide();
+  }
+};
+TerraDialog.styles = [component_styles_default, dialog_styles_default];
+__decorateClass([
+  query('[part="dialog"]')
+], TerraDialog.prototype, "dialogEl", 2);
+__decorateClass([
+  property()
+], TerraDialog.prototype, "id", 2);
+__decorateClass([
+  property({ reflect: true })
+], TerraDialog.prototype, "width", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], TerraDialog.prototype, "open", 2);
+__decorateClass([
+  property({ attribute: "click-outside-to-close", type: Boolean, reflect: true })
+], TerraDialog.prototype, "clickOutsideToClose", 2);
+__decorateClass([
+  property({ attribute: "show-backdrop", type: Boolean, reflect: true })
+], TerraDialog.prototype, "showBackdrop", 2);
+
+export {
+  TerraDialog
+};

package/{cdn/chunks/chunk.JNVVFMOW.js → dist/chunks/chunk.BO5W5LTB.js}

@@ -1,6 +1,6 @@
 import {
   TerraGiovanniSearch
-} from "./chunk.THKQJO6O.js";
+} from "./chunk.YCV4LGKI.js";
 
 // src/react/giovanni-search/index.ts
 import * as React from "react";

package/{cdn/chunks/chunk.4E62DZYX.js → dist/chunks/chunk.CAMWZJYR.js}

@@ -1,6 +1,6 @@
 import {
   TerraSkeleton
-} from "./chunk.MF2HKAU4.js";
+} from "./chunk.IUJHXLVB.js";
 
 // src/react/skeleton/index.ts
 import * as React from "react";

package/dist/chunks/chunk.CCDDGUFW.js

@@ -0,0 +1,55 @@
+// src/components/dialog/dialog.styles.ts
+import { css } from "lit";
+var dialog_styles_default = css`
+    :host {
+        --terra-dialog-backdrop-color: rgba(0, 0, 0, 0.5);
+        --terra-dialog-z-index: 1000;
+
+        display: block;
+    }
+
+    .dialog-backdrop {
+        pointer-events: none;
+        position: fixed;
+        top: 0;
+        left: -9999;
+        right: auto;
+        bottom: auto;
+        width: 0;
+        height: 0;
+        z-index: calc(var(--terra-dialog-z-index) - 1);
+        /* TODO: fade in the backdrop */
+    }
+
+    .dialog-backdrop.visible {
+        background-color: var(--terra-dialog-backdrop-color);
+    }
+
+    .dialog-backdrop.clickable {
+        pointer-events: auto;
+    }
+
+    .dialog-backdrop.active {
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: auto;
+        height: auto;
+    }
+
+    dialog[open] {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        position: fixed;
+        inset: 0px;
+        z-index: var(--terra-dialog-z-index);
+        max-width: 100%;
+    }
+`;
+
+export {
+  dialog_styles_default
+};

package/dist/chunks/{chunk.DY5URCKM.js → chunk.EIBEZPY7.js}

@@ -3,17 +3,17 @@ import {
 } from "./chunk.UIYPAVP3.js";
 import {
   loader_default
-} from "./chunk.ZCAH5MS4.js";
+} from "./chunk.XL3L3MUX.js";
 import {
   icon_default
-} from "./chunk.S54WBWHC.js";
+} from "./chunk.37O2PHBO.js";
 import {
   button_default
-} from "./chunk.SX6YM322.js";
+} from "./chunk.GYUNWNI5.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.PVDILQEJ.js";
+} from "./chunk.PYOU5GNJ.js";
 import {
   __privateAdd,
   __privateGet,

package/dist/chunks/{chunk.LHX3WEK6.js → chunk.GAC7ING2.js}

@@ -1,17 +1,17 @@
+import {
+  combobox_styles_default
+} from "./chunk.7WL3WWGJ.js";
 import {
   clearSelection,
   walkToOption
 } from "./chunk.LMGJJIIS.js";
-import {
-  combobox_styles_default
-} from "./chunk.7WL3WWGJ.js";
 import {
   watch
 } from "./chunk.SK7IZCKP.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.PVDILQEJ.js";
+} from "./chunk.PYOU5GNJ.js";
 import {
   __decorateClass,
   __privateAdd,

package/{cdn/chunks/chunk.DWTK5MYZ.js → dist/chunks/chunk.GMT6YDPY.js}

@@ -1,6 +1,6 @@
 import {
   TerraTimeSeries
-} from "./chunk.R7HPDUVG.js";
+} from "./chunk.ZQ3NM75L.js";
 
 // src/components/time-series/time-series.ts
 var time_series_default = TerraTimeSeries;

package/dist/chunks/{chunk.JJ4XNWII.js → chunk.GUAQQMEX.js}

@@ -11,9 +11,11 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.PVDILQEJ.js";
+} from "./chunk.PYOU5GNJ.js";
 import {
-  __decorateClass
+  __decorateClass,
+  __privateAdd,
+  __privateMethod
 } from "./chunk.TVFCHGU3.js";
 
 // src/components/button/button.component.ts
@@ -69,9 +71,11 @@ var HasSlotController = class {
 import { html, literal } from "lit/static-html.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { property, query, state } from "lit/decorators.js";
+var _handleDialogStateChange, handleDialogStateChange_fn;
 var TerraButton = class extends TerraElement {
   constructor() {
     super(...arguments);
+    __privateAdd(this, _handleDialogStateChange);
     this.formControlController = new FormControlController(this, {
       assumeInteractionOn: ["click"]
     });
@@ -96,6 +100,7 @@ var TerraButton = class extends TerraElement {
     this.value = "";
     this.href = "";
     this.rel = "noreferrer noopener";
+    this.expanded = false;
   }
   /** Gets the validity state object */
   get validity() {
@@ -116,6 +121,30 @@ var TerraButton = class extends TerraElement {
       this.formControlController.updateValidity();
     }
   }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.forDialog) {
+      document.addEventListener(
+        "terra-dialog-show",
+        __privateMethod(this, _handleDialogStateChange, handleDialogStateChange_fn).bind(this)
+      );
+      document.addEventListener(
+        "terra-dialog-hide",
+        __privateMethod(this, _handleDialogStateChange, handleDialogStateChange_fn).bind(this)
+      );
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener(
+      "terra-dialog-show",
+      __privateMethod(this, _handleDialogStateChange, handleDialogStateChange_fn).bind(this)
+    );
+    document.removeEventListener(
+      "terra-dialog-hide",
+      __privateMethod(this, _handleDialogStateChange, handleDialogStateChange_fn).bind(this)
+    );
+  }
   handleBlur() {
     this.hasFocus = false;
     this.emit("sl-blur");
@@ -131,6 +160,10 @@ var TerraButton = class extends TerraElement {
     if (this.type === "reset") {
       this.formControlController.reset(this);
     }
+    if (this.forDialog) {
+      const el = document.getElementById(this.forDialog);
+      el == null ? void 0 : el.show();
+    }
   }
   handleInvalid(event) {
     this.formControlController.setValidity(false);
@@ -251,6 +284,9 @@ var TerraButton = class extends TerraElement {
         @focus=${this.handleFocus}
         @invalid=${this.isButton() ? this.handleInvalid : null}
         @click=${this.handleClick}
+        aria-controls=${ifDefined(this.forDialog || void 0)} 
+        ?aria-haspopup=${this.forDialog ? "dialog" : void 0}
+        aria-expanded=${ifDefined(this.forDialog ? this.expanded : void 0)}
       >
         <slot name="prefix" part="prefix" class="button__prefix"></slot>
         <slot part="label" class="button__label"></slot>
@@ -269,6 +305,12 @@ var TerraButton = class extends TerraElement {
     `;
   }
 };
+_handleDialogStateChange = new WeakSet();
+handleDialogStateChange_fn = function(e) {
+  if (this.forDialog && this.forDialog === e.target.id) {
+    this.expanded = e.target.open;
+  }
+};
 TerraButton.styles = [component_styles_default, button_styles_default];
 __decorateClass([
   query(".button")
@@ -345,6 +387,12 @@ __decorateClass([
 __decorateClass([
   property({ attribute: "formtarget" })
 ], TerraButton.prototype, "formTarget", 2);
+__decorateClass([
+  property({ attribute: "for-dialog" })
+], TerraButton.prototype, "forDialog", 2);
+__decorateClass([
+  state()
+], TerraButton.prototype, "expanded", 2);
 __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], TerraButton.prototype, "handleDisabledChange", 1);

package/dist/chunks/{chunk.SX6YM322.js → chunk.GYUNWNI5.js}

@@ -1,6 +1,6 @@
 import {
   TerraButton
-} from "./chunk.JJ4XNWII.js";
+} from "./chunk.GUAQQMEX.js";
 
 // src/components/button/button.ts
 var button_default = TerraButton;

package/{cdn/chunks/chunk.4HNPFNMQ.js → dist/chunks/chunk.H4GWKCFO.js}

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

package/{cdn/chunks/chunk.TXKXHE4H.js → dist/chunks/chunk.ICEKDMA2.js}

@@ -1,6 +1,6 @@
 import {
   TerraIcon
-} from "./chunk.KIEHEHU5.js";
+} from "./chunk.3VRBGLE2.js";
 
 // src/react/icon/index.ts
 import * as React from "react";

package/dist/chunks/{chunk.SSZJ36DG.js → chunk.IUJHXLVB.js}

@@ -7,7 +7,7 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.PVDILQEJ.js";
+} from "./chunk.PYOU5GNJ.js";
 import {
   __decorateClass
 } from "./chunk.TVFCHGU3.js";