@nasa-terra/components 0.0.171 → 0.0.173

package/dist/chunks/chunk.D2MYFCNZ.js

@@ -0,0 +1,245 @@
+import {
+  toggle_styles_default
+} from "./chunk.4MDKLIS6.js";
+import {
+  defaultValue
+} from "./chunk.7C67ZMHT.js";
+import {
+  form_control_styles_default
+} from "./chunk.Y6E3L66U.js";
+import {
+  FormControlController
+} from "./chunk.KT52MHEF.js";
+import {
+  HasSlotController
+} from "./chunk.7YRJKZ6R.js";
+import {
+  watch
+} from "./chunk.NWXJOH5T.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.VT5KHE7G.js";
+import {
+  __decorateClass
+} from "./chunk.SHKVBVTI.js";
+
+// src/components/toggle/toggle.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { live } from "lit/directives/live.js";
+import { property, query, state } from "lit/decorators.js";
+var TerraToggle = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.formControlController = new FormControlController(this, {
+      value: (control) => control.checked ? control.value || "on" : void 0,
+      defaultValue: (control) => control.defaultChecked,
+      setValue: (control, checked) => control.checked = checked
+    });
+    this.hasSlotController = new HasSlotController(this, "help-text");
+    this.hasFocus = false;
+    this.title = "";
+    this.name = "";
+    this.size = "medium";
+    this.disabled = false;
+    this.checked = false;
+    this.defaultChecked = false;
+    this.form = "";
+    this.required = false;
+    this.helpText = "";
+  }
+  /** Gets the validity state object */
+  get validity() {
+    return this.input.validity;
+  }
+  /** Gets the validation message */
+  get validationMessage() {
+    return this.input.validationMessage;
+  }
+  firstUpdated() {
+    this.formControlController.updateValidity();
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("terra-blur");
+  }
+  handleInput() {
+    this.emit("terra-input");
+  }
+  handleInvalid(event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+  }
+  handleClick() {
+    this.checked = !this.checked;
+    this.emit("terra-change");
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("terra-focus");
+  }
+  handleKeyDown(event) {
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      this.checked = false;
+      this.emit("terra-change");
+      this.emit("terra-input");
+    }
+    if (event.key === "ArrowRight") {
+      event.preventDefault();
+      this.checked = true;
+      this.emit("terra-change");
+      this.emit("terra-input");
+    }
+  }
+  handleCheckedChange() {
+    this.input.checked = this.checked;
+    this.formControlController.updateValidity();
+  }
+  handleDisabledChange() {
+    this.formControlController.setValidity(true);
+  }
+  /** Simulates a click on the switch. */
+  click() {
+    this.input.click();
+  }
+  /** Sets focus on the switch. */
+  focus(options) {
+    this.input.focus(options);
+  }
+  /** Removes focus from the switch. */
+  blur() {
+    this.input.blur();
+  }
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    return this.input.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.input.reportValidity();
+  }
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(message) {
+    this.input.setCustomValidity(message);
+    this.formControlController.updateValidity();
+  }
+  render() {
+    const hasHelpTextSlot = this.hasSlotController.test("help-text");
+    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+    return html`
+            <div
+                class=${classMap({
+      "form-control": true,
+      "form-control--small": this.size === "small",
+      "form-control--medium": this.size === "medium",
+      "form-control--large": this.size === "large",
+      "form-control--has-help-text": hasHelpText
+    })}
+            >
+                <label
+                    part="base"
+                    class=${classMap({
+      toggle: true,
+      "toggle--checked": this.checked,
+      "toggle--disabled": this.disabled,
+      "toggle--focused": this.hasFocus,
+      "toggle--small": this.size === "small",
+      "toggle--medium": this.size === "medium",
+      "toggle--large": this.size === "large"
+    })}
+                >
+                    <input
+                        class="toggle__input"
+                        type="checkbox"
+                        title=${this.title}
+                        name=${this.name}
+                        value=${ifDefined(this.value)}
+                        .checked=${live(this.checked)}
+                        .disabled=${this.disabled}
+                        .required=${this.required}
+                        role="switch"
+                        aria-checked=${this.checked ? "true" : "false"}
+                        aria-describedby="help-text"
+                        @click=${this.handleClick}
+                        @input=${this.handleInput}
+                        @invalid=${this.handleInvalid}
+                        @blur=${this.handleBlur}
+                        @focus=${this.handleFocus}
+                        @keydown=${this.handleKeyDown}
+                    />
+
+                    <span part="control" class="toggle__control">
+                        <span part="thumb" class="toggle__thumb"></span>
+                    </span>
+
+                    <div part="label" class="toggle__label">
+                        <slot></slot>
+                    </div>
+                </label>
+
+                <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>
+        `;
+  }
+};
+TerraToggle.styles = [component_styles_default, form_control_styles_default, toggle_styles_default];
+__decorateClass([
+  query('input[type="checkbox"]')
+], TerraToggle.prototype, "input", 2);
+__decorateClass([
+  state()
+], TerraToggle.prototype, "hasFocus", 2);
+__decorateClass([
+  property()
+], TerraToggle.prototype, "title", 2);
+__decorateClass([
+  property()
+], TerraToggle.prototype, "name", 2);
+__decorateClass([
+  property()
+], TerraToggle.prototype, "value", 2);
+__decorateClass([
+  property({ reflect: true })
+], TerraToggle.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], TerraToggle.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], TerraToggle.prototype, "checked", 2);
+__decorateClass([
+  defaultValue("checked")
+], TerraToggle.prototype, "defaultChecked", 2);
+__decorateClass([
+  property({ reflect: true })
+], TerraToggle.prototype, "form", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], TerraToggle.prototype, "required", 2);
+__decorateClass([
+  property({ attribute: "help-text" })
+], TerraToggle.prototype, "helpText", 2);
+__decorateClass([
+  watch("checked", { waitUntilFirstUpdate: true })
+], TerraToggle.prototype, "handleCheckedChange", 1);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], TerraToggle.prototype, "handleDisabledChange", 1);
+
+export {
+  TerraToggle
+};

package/dist/chunks/chunk.D76BZEAN.js

@@ -0,0 +1,97 @@
+// src/components/plot-toolbar/notebooks/time-averaged-map-notebook.ts
+function getTimeAveragedMapNotebook(host) {
+  return [
+    {
+      cell_type: "markdown",
+      id: "367f56b9-7ca8-4435-9dcc-89bf586f33ab",
+      metadata: {},
+      source: [
+        "### Prerequisites:\n",
+        "\n",
+        "This notebook uses the `terra_ui_components`, `anywidget`, and `pandas` packages.\n",
+        "\n",
+        "After running the `pip install` cell for the first time, please reload the page to ensure the dependencies are active."
+      ]
+    },
+    {
+      id: "2733501b-0de4-4067-8aff-864e1b4c76cb",
+      cell_type: "code",
+      source: '%pip install -q "terra_ui_components==0.0.172" "anywidget==0.9.15" "pandas" "rasterio" "matplotlib"',
+      metadata: {
+        trusted: true
+      },
+      outputs: [],
+      execution_count: null
+    },
+    {
+      cell_type: "markdown",
+      id: "35aa4a00-8e2c-4478-9df7-de633fd8f6ce",
+      metadata: {},
+      source: ["### Render a time averaged map"]
+    },
+    {
+      id: "870c1384-e706-48ee-ba07-fd552a949869",
+      cell_type: "code",
+      source: `from terra_ui_components import TerraTimeAverageMap
+map = TerraTimeAverageMap()
+map.collection='${host.catalogVariable.dataFieldId.replace(`_${host.catalogVariable.dataFieldAccessName}`, "")}'
+map.variable = '${host.catalogVariable.dataFieldAccessName}'
+map.startDate = '${host.startDate}'
+map.endDate = '${host.endDate}'
+map.location = '${host.location}'
+
+map`,
+      metadata: {
+        trusted: true
+      },
+      outputs: [],
+      execution_count: null
+    },
+    {
+      cell_type: "markdown",
+      id: "25b87ed4-2ad9-4c7d-b851-bc8fea3ded5a",
+      metadata: {},
+      source: [
+        "### Access the map GeoTIFF bytes\n",
+        "\n",
+        "Once the map renders, you can access the GeoTIFF as bytes: `print(map.data)`",
+        "\n",
+        "Here is an example of loading the bytes into `rasterio` and plotting via `matplotlib`. Note: The bytes can be loaded into many other Python libraries:"
+      ]
+    },
+    {
+      cell_type: "code",
+      execution_count: null,
+      id: "6b81a089-884d-4fd7-9d4e-c45a53307c20",
+      metadata: {},
+      outputs: [],
+      source: `import rasterio
+from rasterio.io import MemoryFile
+from io import BytesIO
+import matplotlib.pyplot as plt
+
+# map.data contains the rendered GeoTIFF as bytes
+with MemoryFile(map.data) as memfile:
+    with memfile.open() as dataset:
+        # You can now work with the dataset as if it were opened from a file
+        print(f"Driver: {dataset.driver}")
+        print(f"CRS: {dataset.crs}")
+        print(f"Bounds: {dataset.bounds}")
+        data = dataset.read(1)
+        print(f"Data shape: {data.shape}")
+
+        # Example of creating a figure and displaying the data
+        plt.figure(figsize=(10, 8))
+        plt.imshow(data, cmap='viridis')  # You can change the colormap
+        plt.colorbar(label='Values')
+        plt.title('GeoTIFF Visualization')
+        plt.xlabel('X')
+        plt.ylabel('Y')
+        plt.show()`
+    }
+  ];
+}
+
+export {
+  getTimeAveragedMapNotebook
+};

package/dist/chunks/chunk.DBJRHMP4.js

@@ -0,0 +1,214 @@
+import {
+  icon_styles_default
+} from "./chunk.KUSRVQBO.js";
+import {
+  getIconLibrary,
+  unwatchIcon,
+  watchIcon
+} from "./chunk.GZ4HOM2F.js";
+import {
+  watch
+} from "./chunk.NWXJOH5T.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.VT5KHE7G.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet
+} from "./chunk.SHKVBVTI.js";
+
+// src/components/icon/icon.component.ts
+import { property, state } from "lit/decorators.js";
+import { isTemplateResult } from "lit/directive-helpers.js";
+var CACHEABLE_ERROR = Symbol();
+var RETRYABLE_ERROR = Symbol();
+var parser;
+var iconCache = /* @__PURE__ */ new Map();
+var _initialRender, _resolveIcon, resolveIcon_fn, _getIconSource, getIconSource_fn, _styleFromAttributes, styleFromAttributes_fn;
+var TerraIcon = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    /** Given a URL, this function returns the resulting SVG element or an appropriate error symbol. */
+    __privateAdd(this, _resolveIcon);
+    __privateAdd(this, _getIconSource);
+    /**
+     * SVG takes a few presentation attributes. Since we're using a template for SVG and our host element isn't an SVG, we can pass those presentational attributes into a style attribute to affect the underlying SVG.
+     * Merge select attributes with existing inline style attribute to forward values to underlying SVG.
+     */
+    __privateAdd(this, _styleFromAttributes);
+    __privateAdd(this, _initialRender, false);
+    this.svg = null;
+    this.label = "";
+    this.library = "default";
+    this.color = null;
+    this.fontSize = null;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    watchIcon(this);
+  }
+  firstUpdated() {
+    __privateSet(this, _initialRender, true);
+    this.setIcon();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    unwatchIcon(this);
+  }
+  handleLabelChange() {
+    const hasLabel = typeof this.label === "string" && this.label.length > 0;
+    if (hasLabel) {
+      this.setAttribute("role", "img");
+      this.setAttribute("aria-label", this.label);
+      this.removeAttribute("aria-hidden");
+    } else {
+      this.removeAttribute("role");
+      this.removeAttribute("aria-label");
+      this.setAttribute("aria-hidden", "true");
+    }
+  }
+  async setIcon() {
+    var _a;
+    const { url, fromLibrary } = __privateMethod(this, _getIconSource, getIconSource_fn).call(this);
+    const library = fromLibrary ? getIconLibrary(this.library) : void 0;
+    if (!url) {
+      this.svg = null;
+      return;
+    }
+    let iconResolver = iconCache.get(url);
+    if (!iconResolver) {
+      iconResolver = __privateMethod(this, _resolveIcon, resolveIcon_fn).call(this, url);
+      iconCache.set(url, iconResolver);
+    }
+    if (!__privateGet(this, _initialRender)) {
+      return;
+    }
+    const svg = await iconResolver;
+    if (svg === RETRYABLE_ERROR) {
+      iconCache.delete(url);
+    }
+    if (url !== __privateMethod(this, _getIconSource, getIconSource_fn).call(this).url) {
+      return;
+    }
+    if (isTemplateResult(svg)) {
+      this.svg = svg;
+      return;
+    }
+    switch (svg) {
+      case RETRYABLE_ERROR:
+      case CACHEABLE_ERROR:
+        this.svg = null;
+        this.emit("terra-error");
+        break;
+      default:
+        this.svg = svg.cloneNode(true);
+        (_a = library == null ? void 0 : library.mutator) == null ? void 0 : _a.call(library, this.svg);
+        this.emit("terra-load");
+    }
+  }
+  render() {
+    __privateMethod(this, _styleFromAttributes, styleFromAttributes_fn).call(this);
+    return this.svg;
+  }
+};
+_initialRender = new WeakMap();
+_resolveIcon = new WeakSet();
+resolveIcon_fn = async function(url) {
+  var _a;
+  let fileData;
+  try {
+    fileData = await fetch(url, { mode: "cors" });
+    if (!fileData.ok) {
+      return fileData.status === 410 ? CACHEABLE_ERROR : RETRYABLE_ERROR;
+    }
+  } catch (e) {
+    return RETRYABLE_ERROR;
+  }
+  try {
+    const div = document.createElement("div");
+    div.innerHTML = await fileData.text();
+    const svg = div.firstElementChild;
+    if (((_a = svg == null ? void 0 : svg.tagName) == null ? void 0 : _a.toLowerCase()) !== "svg") {
+      return CACHEABLE_ERROR;
+    }
+    if (!parser) {
+      parser = new DOMParser();
+    }
+    const doc = parser.parseFromString(svg.outerHTML, "text/html");
+    const svgEl = doc.body.querySelector("svg");
+    if (!svgEl) {
+      return CACHEABLE_ERROR;
+    }
+    svgEl.part.add("svg");
+    return document.adoptNode(svgEl);
+  } catch (e) {
+    return CACHEABLE_ERROR;
+  }
+};
+_getIconSource = new WeakSet();
+getIconSource_fn = function() {
+  const library = getIconLibrary(this.library);
+  if (this.name && library) {
+    return {
+      url: library.resolver(this.name),
+      fromLibrary: true
+    };
+  }
+  return {
+    url: this.src,
+    fromLibrary: false
+  };
+};
+_styleFromAttributes = new WeakSet();
+styleFromAttributes_fn = function() {
+  const svgAttributes = [
+    { attribute: "color", property: this.color },
+    { attribute: "font-size", property: this.fontSize }
+  ];
+  const style = svgAttributes.reduce((accumulator, { attribute, property: property2 }) => {
+    if (typeof property2 === "string" && property2.length > 0) {
+      accumulator += ` ${attribute}: ${property2};`;
+    }
+    this.removeAttribute(attribute);
+    return accumulator;
+  }, `${this.style.cssText}`);
+  if (style.length > 0) {
+    this.setAttribute("style", style);
+  }
+};
+TerraIcon.styles = [component_styles_default, icon_styles_default];
+__decorateClass([
+  state()
+], TerraIcon.prototype, "svg", 2);
+__decorateClass([
+  property({ reflect: true })
+], TerraIcon.prototype, "name", 2);
+__decorateClass([
+  property()
+], TerraIcon.prototype, "src", 2);
+__decorateClass([
+  property()
+], TerraIcon.prototype, "label", 2);
+__decorateClass([
+  property({ reflect: true })
+], TerraIcon.prototype, "library", 2);
+__decorateClass([
+  property()
+], TerraIcon.prototype, "color", 2);
+__decorateClass([
+  property({ attribute: "font-size" })
+], TerraIcon.prototype, "fontSize", 2);
+__decorateClass([
+  watch("label")
+], TerraIcon.prototype, "handleLabelChange", 1);
+__decorateClass([
+  watch(["name", "src", "library"])
+], TerraIcon.prototype, "setIcon", 1);
+
+export {
+  TerraIcon
+};

package/dist/chunks/chunk.DKMOZLOI.js

@@ -0,0 +1,75 @@
+import {
+  site_header_styles_default
+} from "./chunk.YNGZK5NG.js";
+import {
+  TerraIcon
+} from "./chunk.DBJRHMP4.js";
+import {
+  HasSlotController
+} from "./chunk.7YRJKZ6R.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.VT5KHE7G.js";
+import {
+  __decorateClass
+} from "./chunk.SHKVBVTI.js";
+
+// src/components/site-header/site-header.component.ts
+import { property } from "lit/decorators.js";
+import { html } from "lit";
+var TerraSiteHeader = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "title",
+      "center",
+      "right"
+    );
+    this.siteName = "";
+  }
+  render() {
+    const hasTitleSlot = this.hasSlotController.test("title");
+    const hasRightSlot = this.hasSlotController.test("right");
+    return html`
+            <header part="base" class="site-header">
+                <div class="site-header__left">
+                    <div part="logo" class="site-header__logo">
+                        <terra-icon name="nasa-logo" font-size="4rem"></terra-icon>
+                    </div>
+                    <div part="title" class="site-header__title">
+                        ${hasTitleSlot ? html`<slot name="title"></slot>` : html`<span>${this.siteName}</span>`}
+                    </div>
+                </div>
+                <div part="center" class="site-header__center">
+                    <slot name="center"></slot>
+                </div>
+                <div part="right" class="site-header__right">
+                    ${hasRightSlot ? html`<slot name="right"></slot>` : html`
+                              <button
+                                  class="site-header__search"
+                                  type="button"
+                                  title="Search"
+                                  aria-label="Search"
+                              >
+                                  <terra-icon
+                                      name="magnifying-glass"
+                                      library="heroicons"
+                                  ></terra-icon>
+                              </button>
+                          `}
+                </div>
+            </header>
+        `;
+  }
+};
+TerraSiteHeader.styles = [component_styles_default, site_header_styles_default];
+TerraSiteHeader.dependencies = { "terra-icon": TerraIcon };
+__decorateClass([
+  property({ attribute: "site-name" })
+], TerraSiteHeader.prototype, "siteName", 2);
+
+export {
+  TerraSiteHeader
+};

package/dist/chunks/chunk.DLWOS6BW.js

@@ -0,0 +1,26 @@
+import {
+  TerraRadioGroup
+} from "./chunk.VB6VSQRC.js";
+
+// src/react/radio-group/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "terra-radio-group";
+TerraRadioGroup.define("terra-radio-group");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraRadioGroup,
+  react: React,
+  events: {
+    onTerraChange: "terra-change",
+    onTerraInput: "terra-input",
+    onTerraInvalid: "terra-invalid"
+  },
+  displayName: "TerraRadioGroup"
+});
+var radio_group_default = reactWrapper;
+
+export {
+  radio_group_default
+};

package/dist/chunks/chunk.DMCP56YP.js

@@ -0,0 +1,11 @@
+import {
+  TerraMenuItem
+} from "./chunk.I5WFZXLP.js";
+
+// src/components/menu-item/menu-item.ts
+var menu_item_default = TerraMenuItem;
+TerraMenuItem.define("terra-menu-item");
+
+export {
+  menu_item_default
+};

package/dist/chunks/chunk.DR3V64PI.js

@@ -0,0 +1,11 @@
+import {
+  TerraBadge
+} from "./chunk.XNUE63XD.js";
+
+// src/components/badge/badge.ts
+var badge_default = TerraBadge;
+TerraBadge.define("terra-badge");
+
+export {
+  badge_default
+};

package/dist/chunks/chunk.E3QFHJY2.js

@@ -0,0 +1,11 @@
+import {
+  TerraDivider
+} from "./chunk.6GPT2252.js";
+
+// src/components/divider/divider.ts
+var divider_default = TerraDivider;
+TerraDivider.define("terra-divider");
+
+export {
+  divider_default
+};