@nasa-terra/components 0.0.186 → 0.0.188

package/cdn/chunks/chunk.GJ4SR7B4.js

@@ -0,0 +1,134 @@
+import {
+  tag_styles_default
+} from "./chunk.BYEGTGI4.js";
+import {
+  TerraIcon
+} from "./chunk.FF3LYD7N.js";
+import {
+  e
+} from "./chunk.KGXAA5I2.js";
+import {
+  TerraElement,
+  component_styles_default,
+  n
+} from "./chunk.TZCHRRCA.js";
+import {
+  A,
+  b
+} from "./chunk.RRCYT4LP.js";
+import {
+  __decorateClass,
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/tag/tag.component.ts
+init_dirname();
+init_buffer();
+init_process();
+var TerraTag = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "content";
+    this.size = "medium";
+    this.iconLibrary = "default";
+    this.stack = false;
+    this.dark = false;
+    this.handleClick = (e2) => {
+      if (this.variant === "topic") {
+        this.emit("terra-click", { detail: { originalEvent: e2 } });
+      }
+    };
+  }
+  render() {
+    const isLink = this.variant === "topic" && this.href;
+    const isContent = this.variant === "content";
+    const baseClasses = {
+      tag: true,
+      "tag--content": isContent,
+      "tag--topic": this.variant === "topic",
+      "tag--urgent": this.variant === "urgent",
+      "tag--small": this.size === "small",
+      "tag--medium": this.size === "medium",
+      "tag--large": this.size === "large"
+    };
+    const content = b`
+            ${isContent ? b`
+                      <span
+                          part="icon"
+                          class="${e({
+      tag__icon: true,
+      "tag__icon--small": this.size === "small",
+      "tag__icon--medium": this.size === "medium",
+      "tag__icon--large": this.size === "large"
+    })}"
+                      >
+                          <slot name="icon">
+                              ${this.icon ? b`
+                                        <terra-icon
+                                            name="${this.icon}"
+                                            library="${this.iconLibrary}"
+                                        ></terra-icon>
+                                    ` : A}
+                          </slot>
+                      </span>
+                  ` : A}
+            <span part="label" class="tag__label">
+                <slot></slot>
+            </span>
+        `;
+    if (isLink) {
+      return b`
+                <a
+                    part="base"
+                    href="${this.href}"
+                    class="${e(baseClasses)}"
+                    @click="${this.handleClick}"
+                >
+                    ${content}
+                </a>
+            `;
+    }
+    return b`
+            <div
+                part="base"
+                class="${e(baseClasses)}"
+                @click="${this.handleClick}"
+                role="${this.variant === "topic" ? "button" : A}"
+                tabindex="${this.variant === "topic" && !this.href ? "0" : A}"
+            >
+                ${content}
+            </div>
+        `;
+  }
+};
+TerraTag.styles = [component_styles_default, tag_styles_default];
+TerraTag.dependencies = {
+  "terra-icon": TerraIcon
+};
+__decorateClass([
+  n({ reflect: true })
+], TerraTag.prototype, "variant", 2);
+__decorateClass([
+  n({ reflect: true })
+], TerraTag.prototype, "size", 2);
+__decorateClass([
+  n({ reflect: true })
+], TerraTag.prototype, "icon", 2);
+__decorateClass([
+  n({ reflect: true })
+], TerraTag.prototype, "iconLibrary", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], TerraTag.prototype, "stack", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], TerraTag.prototype, "dark", 2);
+__decorateClass([
+  n()
+], TerraTag.prototype, "href", 2);
+
+export {
+  TerraTag
+};

package/cdn/chunks/chunk.HEYSN6YA.js

@@ -0,0 +1,36 @@
+import {
+  TerraTextarea
+} from "./chunk.6XMUNRBX.js";
+import {
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/react/textarea/index.ts
+init_dirname();
+init_buffer();
+init_process();
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "terra-textarea";
+TerraTextarea.define("terra-textarea");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraTextarea,
+  react: React,
+  events: {
+    onTerraInput: "terra-input",
+    onTerraChange: "terra-change",
+    onTerraFocus: "terra-focus",
+    onTerraBlur: "terra-blur",
+    onTerraInvalid: "terra-invalid"
+  },
+  displayName: "TerraTextarea"
+});
+var textarea_default = reactWrapper;
+
+export {
+  textarea_default
+};

package/cdn/chunks/chunk.HTS4ZFVQ.js

@@ -0,0 +1,113 @@
+import {
+  button_group_styles_default
+} from "./chunk.SR4CU2NR.js";
+import {
+  o
+} from "./chunk.VH7AMLEP.js";
+import {
+  TerraElement,
+  component_styles_default,
+  e,
+  n,
+  r
+} from "./chunk.TZCHRRCA.js";
+import {
+  b
+} from "./chunk.RRCYT4LP.js";
+import {
+  __decorateClass,
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/button-group/button-group.component.ts
+init_dirname();
+init_buffer();
+init_process();
+var TerraButtonGroup = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.disableRole = false;
+    this.label = "";
+  }
+  handleFocus(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.toggleAttribute("data-terra-button-group__button--focus", true);
+  }
+  handleBlur(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.toggleAttribute("data-terra-button-group__button--focus", false);
+  }
+  handleMouseOver(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.toggleAttribute("data-terra-button-group__button--hover", true);
+  }
+  handleMouseOut(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.toggleAttribute("data-terra-button-group__button--hover", false);
+  }
+  handleSlotChange() {
+    const slottedElements = [
+      ...this.defaultSlot.assignedElements({ flatten: true })
+    ];
+    slottedElements.forEach((el) => {
+      const index = slottedElements.indexOf(el);
+      const button = findButton(el);
+      if (button) {
+        button.toggleAttribute("data-terra-button-group__button", true);
+        button.toggleAttribute(
+          "data-terra-button-group__button--first",
+          index === 0
+        );
+        button.toggleAttribute(
+          "data-terra-button-group__button--inner",
+          index > 0 && index < slottedElements.length - 1
+        );
+        button.toggleAttribute(
+          "data-terra-button-group__button--last",
+          index === slottedElements.length - 1
+        );
+        button.toggleAttribute(
+          "data-terra-button-group__button--radio",
+          button.tagName.toLowerCase() === "terra-radio-button"
+        );
+      }
+    });
+  }
+  render() {
+    return b`
+            <div
+                part="base"
+                class="button-group"
+                role=${this.disableRole ? "presentation" : "group"}
+                aria-label=${o(this.label || void 0)}
+                @focusout=${this.handleBlur}
+                @focusin=${this.handleFocus}
+                @mouseover=${this.handleMouseOver}
+                @mouseout=${this.handleMouseOut}
+            >
+                <slot @slotchange=${this.handleSlotChange}></slot>
+            </div>
+        `;
+  }
+};
+TerraButtonGroup.styles = [component_styles_default, button_group_styles_default];
+__decorateClass([
+  e("slot")
+], TerraButtonGroup.prototype, "defaultSlot", 2);
+__decorateClass([
+  r()
+], TerraButtonGroup.prototype, "disableRole", 2);
+__decorateClass([
+  n()
+], TerraButtonGroup.prototype, "label", 2);
+function findButton(el) {
+  var _a;
+  const selector = "terra-button, terra-radio-button";
+  return (_a = el.closest(selector)) != null ? _a : el.querySelector(selector);
+}
+
+export {
+  TerraButtonGroup
+};

package/cdn/chunks/chunk.IDMRI4GH.js

@@ -0,0 +1,19 @@
+import {
+  TerraCaption
+} from "./chunk.ZFPFH5WB.js";
+import {
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/caption/caption.ts
+init_dirname();
+init_buffer();
+init_process();
+var caption_default = TerraCaption;
+TerraCaption.define("terra-caption");
+
+export {
+  caption_default
+};

package/cdn/chunks/chunk.IFTFWTIP.js

@@ -0,0 +1,161 @@
+import {
+  require_plotly_min
+} from "./chunk.NPCTDW7V.js";
+import {
+  plot_styles_default
+} from "./chunk.TOI4RMEC.js";
+import {
+  watch
+} from "./chunk.MPVZOQYA.js";
+import {
+  TerraElement,
+  component_styles_default,
+  e,
+  n
+} from "./chunk.TZCHRRCA.js";
+import {
+  b
+} from "./chunk.RRCYT4LP.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet,
+  __spreadProps,
+  __spreadValues,
+  __toESM,
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/plot/plot.component.ts
+init_dirname();
+init_buffer();
+init_process();
+var Plotly = __toESM(require_plotly_min(), 1);
+var _resizeObserver, _handlePlotlyRelayout, handlePlotlyRelayout_fn;
+var TerraPlot = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _handlePlotlyRelayout);
+    __privateAdd(this, _resizeObserver, void 0);
+    this.layout = {};
+    this.config = {};
+    this.data = [];
+    this.colors = [
+      "#1f77b4",
+      // blue
+      "#ff7f0e",
+      // orange
+      "#2ca02c",
+      // green
+      "#d62728",
+      // red
+      "#9467bd",
+      // purple
+      "#8c564b",
+      // brown
+      "#e377c2",
+      // pink
+      "#7f7f7f",
+      // gray
+      "#bcbd22",
+      // yellow-green
+      "#17becf"
+      // cyan
+    ];
+  }
+  handleDataChange() {
+    this.updatePlotWithData();
+  }
+  firstUpdated() {
+    __privateSet(this, _resizeObserver, new ResizeObserver(() => {
+      Plotly.Plots.resize(this.base);
+    }));
+    __privateGet(this, _resizeObserver).observe(this.base);
+    if (this.data.length) {
+      this.updatePlotWithData();
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    __privateGet(this, _resizeObserver).disconnect();
+  }
+  updatePlotWithData() {
+    if (!this.base)
+      return;
+    const coloredData = this.data.map((trace, index) => {
+      const color = this.colors[index % this.colors.length];
+      if (!trace.type || trace.type === "scatter") {
+        const scatterTrace = trace;
+        return __spreadProps(__spreadValues({
+          type: "scatter",
+          mode: "lines"
+        }, scatterTrace), {
+          line: __spreadValues({
+            color
+          }, scatterTrace.line || {})
+        });
+      }
+      return trace;
+    });
+    Plotly.newPlot(
+      this.base,
+      coloredData,
+      __spreadValues({
+        title: {
+          text: this.plotTitle
+          // support for adding a title directly
+        }
+      }, this.layout),
+      __spreadValues({ responsive: true }, this.config)
+    );
+    this.base.on("plotly_relayout", __privateMethod(this, _handlePlotlyRelayout, handlePlotlyRelayout_fn).bind(this));
+  }
+  render() {
+    return b`<div part="base"></div>`;
+  }
+  updated() {
+    var _a, _b;
+    (_b = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".gtitle")) == null ? void 0 : _b.part.add("plot-title");
+  }
+};
+_resizeObserver = new WeakMap();
+_handlePlotlyRelayout = new WeakSet();
+handlePlotlyRelayout_fn = function(e2) {
+  const detail = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, e2["xaxis.range[0]"] && { xAxisMin: e2["xaxis.range[0]"] }), e2["xaxis.range[1]"] && { xAxisMax: e2["xaxis.range[1]"] }), e2["yaxis.range[0]"] && { yAxisMin: e2["yaxis.range[0]"] }), e2["yaxis.range[1]"] && { yAxisMax: e2["yaxis.range[1]"] });
+  if (!Object.keys(detail).length) {
+    return;
+  }
+  this.emit("terra-plot-relayout", {
+    detail
+  });
+};
+TerraPlot.styles = [component_styles_default, plot_styles_default];
+__decorateClass([
+  e('[part="base"]')
+], TerraPlot.prototype, "base", 2);
+__decorateClass([
+  n()
+], TerraPlot.prototype, "plotTitle", 2);
+__decorateClass([
+  n()
+], TerraPlot.prototype, "layout", 2);
+__decorateClass([
+  n()
+], TerraPlot.prototype, "config", 2);
+__decorateClass([
+  n({ type: Array })
+], TerraPlot.prototype, "data", 2);
+__decorateClass([
+  n({ type: Array })
+], TerraPlot.prototype, "colors", 2);
+__decorateClass([
+  watch("data")
+], TerraPlot.prototype, "handleDataChange", 1);
+
+export {
+  TerraPlot
+};

package/cdn/chunks/chunk.ILKCE63H.js

@@ -0,0 +1,60 @@
+import {
+  getRandomIntInclusive
+} from "./chunk.YFGSWD7H.js";
+import {
+  skeleton_styles_default
+} from "./chunk.54FZLPJP.js";
+import {
+  TerraElement,
+  component_styles_default,
+  n
+} from "./chunk.TZCHRRCA.js";
+import {
+  b
+} from "./chunk.RRCYT4LP.js";
+import {
+  __decorateClass,
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/skeleton/skeleton.component.ts
+init_dirname();
+init_buffer();
+init_process();
+var TerraSkeleton = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.rows = 1;
+    this.effect = "pulse";
+    this.variableWidths = true;
+  }
+  render() {
+    return b`
+            ${new Array(parseInt(this.rows.toString())).fill(0).map(
+      () => b` <div
+                        part="base"
+                        class=${`skeleton ${this.effect === "pulse" ? "skeleton--pulse" : ""} ${this.effect === "sheen" ? "skeleton--sheen" : ""}`}
+                        style=${this.variableWidths ? `width: ${getRandomIntInclusive(60, 100)}%` : ""}
+                    >
+                        <div part="indicator" class="skeleton__indicator"></div>
+                    </div>`
+    )}
+        `;
+  }
+};
+TerraSkeleton.styles = [component_styles_default, skeleton_styles_default];
+__decorateClass([
+  n()
+], TerraSkeleton.prototype, "rows", 2);
+__decorateClass([
+  n()
+], TerraSkeleton.prototype, "effect", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], TerraSkeleton.prototype, "variableWidths", 2);
+
+export {
+  TerraSkeleton
+};

package/cdn/chunks/chunk.INKINTZY.js

@@ -0,0 +1,32 @@
+import {
+  TerraEarthdataLogin
+} from "./chunk.S2IZSFXY.js";
+import {
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/react/earthdata-login/index.ts
+init_dirname();
+init_buffer();
+init_process();
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "terra-earthdata-login";
+TerraEarthdataLogin.define("terra-earthdata-login");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraEarthdataLogin,
+  react: React,
+  events: {
+    onTerraLogin: "terra-login"
+  },
+  displayName: "TerraEarthdataLogin"
+});
+var earthdata_login_default = reactWrapper;
+
+export {
+  earthdata_login_default
+};

package/cdn/chunks/chunk.IOBHQJ6L.js

@@ -0,0 +1,19 @@
+import {
+  TerraEarthdataLogin
+} from "./chunk.S2IZSFXY.js";
+import {
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/earthdata-login/earthdata-login.ts
+init_dirname();
+init_buffer();
+init_process();
+var earthdata_login_default = TerraEarthdataLogin;
+TerraEarthdataLogin.define("terra-earthdata-login");
+
+export {
+  earthdata_login_default
+};

package/cdn/chunks/chunk.IPITXO35.js

@@ -0,0 +1,71 @@
+import {
+  tab_panel_styles_default
+} from "./chunk.NFI5NVW6.js";
+import {
+  e
+} from "./chunk.KGXAA5I2.js";
+import {
+  watch
+} from "./chunk.MPVZOQYA.js";
+import {
+  TerraElement,
+  component_styles_default,
+  n
+} from "./chunk.TZCHRRCA.js";
+import {
+  b
+} from "./chunk.RRCYT4LP.js";
+import {
+  __decorateClass,
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/tab-panel/tab-panel.component.ts
+init_dirname();
+init_buffer();
+init_process();
+var id = 0;
+var TerraTabPanel = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.attrId = ++id;
+    this.componentId = `terra-tab-panel-${this.attrId}`;
+    this.name = "";
+    this.active = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.id = this.id.length > 0 ? this.id : this.componentId;
+    this.setAttribute("role", "tabpanel");
+  }
+  handleActiveChange() {
+    this.setAttribute("aria-hidden", this.active ? "false" : "true");
+  }
+  render() {
+    return b`
+            <slot
+                part="base"
+                class=${e({
+      "tab-panel": true,
+      "tab-panel--active": this.active
+    })}
+            ></slot>
+        `;
+  }
+};
+TerraTabPanel.styles = [component_styles_default, tab_panel_styles_default];
+__decorateClass([
+  n({ reflect: true })
+], TerraTabPanel.prototype, "name", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], TerraTabPanel.prototype, "active", 2);
+__decorateClass([
+  watch("active")
+], TerraTabPanel.prototype, "handleActiveChange", 1);
+
+export {
+  TerraTabPanel
+};