@nasa-terra/components 0.0.192 → 0.0.194

package/cdn/chunks/chunk.UZNUBRSO.js

@@ -0,0 +1,278 @@
+import {
+  textarea_styles_default
+} from "./chunk.UPA5655B.js";
+import {
+  defaultValue,
+  l
+} from "./chunk.F7QE3QNK.js";
+import {
+  form_control_styles_default
+} from "./chunk.LNM5ZU6K.js";
+import {
+  FormControlController
+} from "./chunk.BJIN2WV3.js";
+import {
+  o
+} from "./chunk.VH7AMLEP.js";
+import {
+  HasSlotController
+} from "./chunk.PACUQ7ID.js";
+import {
+  e
+} from "./chunk.KGXAA5I2.js";
+import {
+  watch
+} from "./chunk.MPVZOQYA.js";
+import {
+  TerraElement,
+  component_styles_default,
+  e as e2,
+  n,
+  r
+} from "./chunk.WTFB42FU.js";
+import {
+  b
+} from "./chunk.RRCYT4LP.js";
+import {
+  __decorateClass,
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/textarea/textarea.component.ts
+init_dirname();
+init_buffer();
+init_process();
+var TerraTextarea = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.formControlController = new FormControlController(this, {
+      value: (control) => control.value,
+      defaultValue: (control) => control.defaultValue,
+      setValue: (control, value) => control.value = value
+    });
+    this.hasSlotController = new HasSlotController(this, "help-text");
+    this.hasFocus = false;
+    this.name = "";
+    this.value = "";
+    this.placeholder = "";
+    this.disabled = false;
+    this.readonly = false;
+    this.required = false;
+    this.label = "";
+    this.hideLabel = false;
+    this.helpText = "";
+    this.resize = "vertical";
+    this.defaultValue = "";
+    this.form = "";
+  }
+  /** Gets the validity state object */
+  get validity() {
+    return this.textarea.validity;
+  }
+  /** Gets the validation message */
+  get validationMessage() {
+    return this.textarea.validationMessage;
+  }
+  firstUpdated() {
+    this.formControlController.updateValidity();
+  }
+  handleInput() {
+    this.value = this.textarea.value;
+    this.formControlController.updateValidity();
+    this.emit("terra-input");
+  }
+  handleChange() {
+    this.value = this.textarea.value;
+    this.formControlController.updateValidity();
+    this.emit("terra-change");
+  }
+  handleInvalid(event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("terra-focus");
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.formControlController.updateValidity();
+    this.emit("terra-blur");
+  }
+  handleDisabledChange() {
+    this.formControlController.setValidity(this.disabled);
+  }
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    return this.textarea.checkValidity();
+  }
+  /** Gets the associated form, if one exists. */
+  getForm() {
+    return this.formControlController.getForm();
+  }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    return this.textarea.reportValidity();
+  }
+  /**
+   * Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear
+   * the custom validation message, call this method with an empty string.
+   */
+  setCustomValidity(message) {
+    this.textarea.setCustomValidity(message);
+    this.formControlController.updateValidity();
+  }
+  focus(options) {
+    this.textarea.focus(options);
+  }
+  blur() {
+    this.textarea.blur();
+  }
+  select() {
+    this.textarea.select();
+  }
+  setSelectionRange(selectionStart, selectionEnd, selectionDirection = "none") {
+    this.textarea.setSelectionRange(
+      selectionStart,
+      selectionEnd,
+      selectionDirection
+    );
+  }
+  render() {
+    const hasHelpTextSlot = this.hasSlotController.test("help-text");
+    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+    return b`
+            <div
+                class=${e({
+      "form-control": true,
+      "form-control--has-help-text": hasHelpText
+    })}
+            >
+                ${this.label ? b`
+                          <label
+                              for="textarea"
+                              part="form-control-label"
+                              class=${this.hideLabel ? "textarea__label textarea__label--hidden" : "textarea__label"}
+                          >
+                              ${this.label}
+                              ${this.required ? b`<span class="textarea__required-indicator"
+                                        >*</span
+                                    >` : ""}
+                          </label>
+                      ` : ""}
+
+                <div
+                    part="base"
+                    class=${e({
+      textarea: true,
+      "textarea--disabled": this.disabled,
+      "textarea--focused": this.hasFocus,
+      "textarea--resize-none": this.resize === "none",
+      "textarea--resize-both": this.resize === "both",
+      "textarea--resize-horizontal": this.resize === "horizontal",
+      "textarea--resize-vertical": this.resize === "vertical"
+    })}
+                >
+                    <textarea
+                        part="textarea"
+                        id="textarea"
+                        class="textarea__control"
+                        name=${o(this.name || void 0)}
+                        ?disabled=${this.disabled}
+                        ?readonly=${this.readonly}
+                        ?required=${this.required}
+                        placeholder=${o(this.placeholder || void 0)}
+                        minlength=${o(this.minlength)}
+                        maxlength=${o(this.maxlength)}
+                        rows=${o(this.rows)}
+                        cols=${o(this.cols)}
+                        .value=${l(this.value)}
+                        autocomplete=${o(this.autocomplete)}
+                        aria-describedby="help-text"
+                        @input=${this.handleInput}
+                        @change=${this.handleChange}
+                        @invalid=${this.handleInvalid}
+                        @focus=${this.handleFocus}
+                        @blur=${this.handleBlur}
+                    ></textarea>
+                </div>
+
+                <div
+                    aria-hidden=${hasHelpText ? "false" : "true"}
+                    class="form-control__help-text"
+                    id="help-text"
+                    part="form-control-help-text"
+                >
+                    <slot name="help-text">${this.helpText}</slot>
+                </div>
+            </div>
+        `;
+  }
+};
+TerraTextarea.styles = [component_styles_default, form_control_styles_default, textarea_styles_default];
+__decorateClass([
+  e2(".textarea__control")
+], TerraTextarea.prototype, "textarea", 2);
+__decorateClass([
+  r()
+], TerraTextarea.prototype, "hasFocus", 2);
+__decorateClass([
+  n()
+], TerraTextarea.prototype, "name", 2);
+__decorateClass([
+  n()
+], TerraTextarea.prototype, "value", 2);
+__decorateClass([
+  n()
+], TerraTextarea.prototype, "placeholder", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], TerraTextarea.prototype, "disabled", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], TerraTextarea.prototype, "readonly", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], TerraTextarea.prototype, "required", 2);
+__decorateClass([
+  n()
+], TerraTextarea.prototype, "autocomplete", 2);
+__decorateClass([
+  n({ type: Number })
+], TerraTextarea.prototype, "minlength", 2);
+__decorateClass([
+  n({ type: Number })
+], TerraTextarea.prototype, "maxlength", 2);
+__decorateClass([
+  n({ type: Number })
+], TerraTextarea.prototype, "rows", 2);
+__decorateClass([
+  n({ type: Number })
+], TerraTextarea.prototype, "cols", 2);
+__decorateClass([
+  n()
+], TerraTextarea.prototype, "label", 2);
+__decorateClass([
+  n({ attribute: "hide-label", type: Boolean })
+], TerraTextarea.prototype, "hideLabel", 2);
+__decorateClass([
+  n({ attribute: "help-text" })
+], TerraTextarea.prototype, "helpText", 2);
+__decorateClass([
+  n({ reflect: true })
+], TerraTextarea.prototype, "resize", 2);
+__decorateClass([
+  defaultValue("value")
+], TerraTextarea.prototype, "defaultValue", 2);
+__decorateClass([
+  n({ reflect: true })
+], TerraTextarea.prototype, "form", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], TerraTextarea.prototype, "handleDisabledChange", 1);
+
+export {
+  TerraTextarea
+};

package/cdn/chunks/chunk.VEA2ZOY3.js

@@ -0,0 +1,377 @@
+import {
+  clearSelection,
+  renderSearchResult,
+  walkToOption
+} from "./chunk.YSHSEQ7M.js";
+import {
+  FetchController
+} from "./chunk.VPEEKXD6.js";
+import {
+  variable_keyword_search_styles_default
+} from "./chunk.JJRA6RDC.js";
+import {
+  icon_default
+} from "./chunk.EDE6XYWP.js";
+import {
+  QueryClientMixin
+} from "./chunk.DOUWGQFH.js";
+import {
+  Fuse
+} from "./chunk.LWXRUSS3.js";
+import {
+  o
+} from "./chunk.IL42CKDQ.js";
+import {
+  n as n2
+} from "./chunk.LRZIT4M2.js";
+import {
+  button_default
+} from "./chunk.XFSSGWZP.js";
+import {
+  watch
+} from "./chunk.MPVZOQYA.js";
+import {
+  TerraElement,
+  component_styles_default,
+  n,
+  r
+} from "./chunk.WTFB42FU.js";
+import {
+  A,
+  b,
+  i
+} from "./chunk.RRCYT4LP.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet,
+  __spreadProps,
+  __spreadValues,
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/variable-keyword-search/variable-keyword-search.component.ts
+init_dirname();
+init_buffer();
+init_process();
+var _combobox, _fetchController, _listbox, _searchEngine, _walker, _handleComboboxChange, _handleOptionClick, _handleKeydown, _manageListboxVisibility, _selectOption, _handleSearch, handleSearch_fn, _clearSearch, clearSearch_fn;
+var _TerraVariableKeywordSearch = class _TerraVariableKeywordSearch extends QueryClientMixin(
+  TerraElement
+) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _handleSearch);
+    __privateAdd(this, _clearSearch);
+    __privateAdd(this, _combobox, null);
+    __privateAdd(this, _fetchController, new FetchController(this));
+    __privateAdd(this, _listbox, null);
+    __privateAdd(this, _searchEngine, null);
+    __privateAdd(this, _walker, null);
+    this.label = "Enter search terms (e.g., precipitation, AOD)";
+    this.hideLabel = true;
+    this.searchConfig = {
+      //* @see {@link https://www.fusejs.io/api/options.html#options}
+      keys: ["id"],
+      useExtendedSearch: true
+    };
+    this.isExpanded = false;
+    this.query = _TerraVariableKeywordSearch.initialQuery;
+    this.searchResults = [];
+    __privateAdd(this, _handleComboboxChange, (event) => {
+      var _a;
+      const target = event.target;
+      this.query = target.value;
+      if (target.value) {
+        this.isExpanded = true;
+      }
+      this.searchResults = (_a = __privateGet(this, _searchEngine)) == null ? void 0 : _a.search(target.value).map(({ item }) => item);
+    });
+    __privateAdd(this, _handleOptionClick, (event) => {
+      const path = event.composedPath();
+      const [target] = path.filter(
+        (eventTarget) => eventTarget.role === "option"
+      );
+      if (!target) {
+        return;
+      }
+      __privateGet(this, _selectOption).call(this, target);
+      __privateMethod(this, _handleSearch, handleSearch_fn).call(this, this.query);
+    });
+    __privateAdd(this, _handleKeydown, (event) => {
+      var _a;
+      switch (event.key) {
+        case "ArrowDown": {
+          if (!this.isExpanded) {
+            return;
+          }
+          clearSelection(
+            __privateGet(this, _combobox),
+            __privateGet(this, _listbox)
+          );
+          walkToOption(
+            __privateGet(this, _walker),
+            __privateGet(this, _combobox),
+            "next"
+          );
+          break;
+        }
+        case "ArrowUp": {
+          if (!this.isExpanded) {
+            return;
+          }
+          clearSelection(
+            __privateGet(this, _combobox),
+            __privateGet(this, _listbox)
+          );
+          walkToOption(
+            __privateGet(this, _walker),
+            __privateGet(this, _combobox),
+            "previous"
+          );
+          break;
+        }
+        case "Enter": {
+          const currentNode = (_a = __privateGet(this, _walker)) == null ? void 0 : _a.currentNode;
+          if (currentNode.role === "option") {
+            __privateGet(this, _selectOption).call(this, currentNode);
+          }
+          __privateMethod(this, _handleSearch, handleSearch_fn).call(this, this.query);
+          break;
+        }
+        case "Escape": {
+          clearSelection(
+            __privateGet(this, _combobox),
+            __privateGet(this, _listbox)
+          );
+          if (this.isExpanded) {
+            this.isExpanded = false;
+            this.dispatchEvent(new Event("cancel"));
+          } else {
+            this.query = _TerraVariableKeywordSearch.initialQuery;
+          }
+          break;
+        }
+        default: {
+          break;
+        }
+      }
+    });
+    __privateAdd(this, _manageListboxVisibility, (event) => {
+      const path = event.composedPath();
+      const containedThis = path.some(
+        (eventTarget) => eventTarget.localName === _TerraVariableKeywordSearch.tagName
+      );
+      if (!containedThis) {
+        this.isExpanded = false;
+      }
+    });
+    __privateAdd(this, _selectOption, (option) => {
+      this.query = option.id;
+      this.emit("terra-variable-keyword-search-change", { detail: option.id });
+      this.isExpanded = false;
+      clearSelection(
+        __privateGet(this, _combobox),
+        __privateGet(this, _listbox)
+      );
+    });
+  }
+  async valueChanged(_oldValue, newValue) {
+    this.query = newValue;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    globalThis.addEventListener("click", __privateGet(this, _manageListboxVisibility));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    globalThis.removeEventListener("click", __privateGet(this, _manageListboxVisibility));
+  }
+  clear() {
+    this.query = _TerraVariableKeywordSearch.initialQuery;
+  }
+  close() {
+    this.isExpanded = false;
+  }
+  toggle() {
+    this.isExpanded = !this.isExpanded;
+  }
+  render() {
+    var _a;
+    return b`<search part="base" title="Search through the list.">
+            <label for="combobox" class=${this.hideLabel ? "sr-only" : "input-label"}
+                >${this.label}</label
+            >
+            <div class="search-input-group">
+                <terra-button
+                    @click=${() => __privateMethod(this, _handleSearch, handleSearch_fn).call(this, this.query)}
+                    aria-label=${this.query ? `Search for ${this.query}.` : "Enter search term to enable search."}
+                    circle
+                    class="search-button search-input-button"
+                    outline
+                    tabindex="-1"
+                    type="button"
+                >
+                    <slot name="label">
+                        <terra-icon
+                            font-size="1.5em"
+                            library="heroicons"
+                            name="outline-magnifying-glass"
+                        ></terra-icon>
+                    </slot>
+                </terra-button>
+
+                <input
+                    ${n2((el) => {
+      var _a2;
+      if (el) {
+        (_a2 = __privateGet(this, _combobox)) != null ? _a2 : __privateSet(this, _combobox, el);
+      }
+    })}
+                    aria-autocomplete="list"
+                    aria-controls="listbox"
+                    aria-haspopup="list"
+                    aria-expanded=${this.isExpanded}
+                    autocomplete="off"
+                    class="combobox"
+                    id="combobox"
+                    part="combobox"
+                    role="combobox"
+                    type="text"
+                    .placeholder=${(_a = this.placeholder) != null ? _a : `${this.label}\u2026`}
+                    .value=${this.query}
+                    @input=${__privateGet(this, _handleComboboxChange)}
+                    @keydown=${__privateGet(this, _handleKeydown)}
+                />
+
+                ${this.query.length ? b`<terra-button
+                          @click=${() => __privateMethod(this, _clearSearch, clearSearch_fn).call(this)}
+                          aria-label="Clear the searched term and start over."
+                          circle
+                          class="clear-button search-input-button"
+                          outline
+                          tabindex="-1"
+                          type="button"
+                      >
+                          <slot name="label">
+                              <terra-icon
+                                  font-size="1.5em"
+                                  library="heroicons"
+                                  name="outline-x-circle"
+                              ></terra-icon>
+                          </slot>
+                      </terra-button>` : A}
+            </div>
+
+            <ul
+                ${n2((el) => {
+      var _a2;
+      if (el) {
+        (_a2 = __privateGet(this, _listbox)) != null ? _a2 : __privateSet(this, _listbox, el);
+      }
+    })}
+                ?inert=${!this.isExpanded}
+                ?open=${this.isExpanded}
+                @click=${__privateGet(this, _handleOptionClick)}
+                aria-label=${this.query ? `Keywords Matching ${this.query}` : "Keywords"}
+                id="listbox"
+                part="listbox"
+                role="listbox"
+                class="search-results"
+            >
+                ${__privateGet(this, _fetchController).render({
+      initial: () => b`<li class="updating">Updating List of Keywords</li>`,
+      pending: () => b`<li class="updating">Updating List of Keywords</li>`,
+      complete: (list) => {
+        __privateSet(this, _searchEngine, new Fuse(list, this.searchConfig));
+        __privateSet(this, _walker, document.createTreeWalker(
+          __privateGet(this, _listbox),
+          NodeFilter.SHOW_ELEMENT,
+          (node) => {
+            var _a2;
+            return ["option", "listbox"].includes(
+              (_a2 = node.role) != null ? _a2 : ""
+            ) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+          }
+        ));
+        return o(this.searchResults, renderSearchResult);
+      },
+      // TODO: Consider a more robust error strategy...like retry w/ backoff?
+      error: (errorMessage) => b`<li class="error">${errorMessage}</li>`
+    })}
+            </ul>
+        </search>`;
+  }
+};
+_combobox = new WeakMap();
+_fetchController = new WeakMap();
+_listbox = new WeakMap();
+_searchEngine = new WeakMap();
+_walker = new WeakMap();
+_handleComboboxChange = new WeakMap();
+_handleOptionClick = new WeakMap();
+_handleKeydown = new WeakMap();
+_manageListboxVisibility = new WeakMap();
+_selectOption = new WeakMap();
+_handleSearch = new WeakSet();
+handleSearch_fn = function(query) {
+  if (query.length) {
+    this.emit("terra-search", { detail: this.query });
+  }
+};
+_clearSearch = new WeakSet();
+clearSearch_fn = function() {
+  var _a;
+  this.query = _TerraVariableKeywordSearch.initialQuery;
+  this.emit("terra-search", { detail: this.query });
+  clearSelection(
+    __privateGet(this, _combobox),
+    __privateGet(this, _listbox)
+  );
+  (_a = __privateGet(this, _combobox)) == null ? void 0 : _a.focus();
+};
+_TerraVariableKeywordSearch.dependencies = {
+  "terra-button": button_default,
+  "terra-icon": icon_default
+};
+_TerraVariableKeywordSearch.styles = [component_styles_default, variable_keyword_search_styles_default];
+_TerraVariableKeywordSearch.shadowRootOptions = __spreadProps(__spreadValues({}, i.shadowRootOptions), {
+  delegatesFocus: true
+});
+_TerraVariableKeywordSearch.tagName = "terra-variable-keyword-search";
+_TerraVariableKeywordSearch.initialQuery = "";
+__decorateClass([
+  n()
+], _TerraVariableKeywordSearch.prototype, "label", 2);
+__decorateClass([
+  n()
+], _TerraVariableKeywordSearch.prototype, "placeholder", 2);
+__decorateClass([
+  n({ attribute: "hide-label", type: Boolean })
+], _TerraVariableKeywordSearch.prototype, "hideLabel", 2);
+__decorateClass([
+  n({ reflect: false, type: Object })
+], _TerraVariableKeywordSearch.prototype, "searchConfig", 2);
+__decorateClass([
+  n()
+], _TerraVariableKeywordSearch.prototype, "value", 2);
+__decorateClass([
+  r()
+], _TerraVariableKeywordSearch.prototype, "isExpanded", 2);
+__decorateClass([
+  r()
+], _TerraVariableKeywordSearch.prototype, "query", 2);
+__decorateClass([
+  r()
+], _TerraVariableKeywordSearch.prototype, "searchResults", 2);
+__decorateClass([
+  watch("value")
+], _TerraVariableKeywordSearch.prototype, "valueChanged", 1);
+var TerraVariableKeywordSearch = _TerraVariableKeywordSearch;
+
+export {
+  TerraVariableKeywordSearch
+};

package/cdn/chunks/chunk.VLH4EKCR.js

@@ -0,0 +1,29 @@
+import {
+  TerraCard
+} from "./chunk.L67ZDXTQ.js";
+import {
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/react/card/index.ts
+init_dirname();
+init_buffer();
+init_process();
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "terra-card";
+TerraCard.define("terra-card");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraCard,
+  react: React,
+  events: {},
+  displayName: "TerraCard"
+});
+var card_default = reactWrapper;
+
+export {
+  card_default
+};

package/cdn/chunks/chunk.VY3MFEXW.js

@@ -0,0 +1,29 @@
+import {
+  TerraDataRods
+} from "./chunk.MBUMDZWN.js";
+import {
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/react/data-rods/index.ts
+init_dirname();
+init_buffer();
+init_process();
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "terra-data-rods";
+TerraDataRods.define("terra-data-rods");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraDataRods,
+  react: React,
+  events: {},
+  displayName: "TerraDataRods"
+});
+var data_rods_default = reactWrapper;
+
+export {
+  data_rods_default
+};