@nasa-terra/components 0.0.186 → 0.0.187

package/cdn/chunks/chunk.T5FZRPK2.js

@@ -0,0 +1,19 @@
+import {
+  TerraCheckbox
+} from "./chunk.TOQAMLRU.js";
+import {
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/checkbox/checkbox.ts
+init_dirname();
+init_buffer();
+init_process();
+var checkbox_default = TerraCheckbox;
+TerraCheckbox.define("terra-checkbox");
+
+export {
+  checkbox_default
+};

package/cdn/chunks/chunk.TDCWXDQK.js

@@ -0,0 +1,19 @@
+import {
+  TerraScrollHint
+} from "./chunk.N6VIMADT.js";
+import {
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/scroll-hint/scroll-hint.ts
+init_dirname();
+init_buffer();
+init_process();
+var scroll_hint_default = TerraScrollHint;
+TerraScrollHint.define("terra-scroll-hint");
+
+export {
+  scroll_hint_default
+};

package/cdn/chunks/chunk.TJT7VKHM.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.UME44J4L.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.TOQAMLRU.js

@@ -0,0 +1,276 @@
+import {
+  defaultValue,
+  l
+} from "./chunk.F7QE3QNK.js";
+import {
+  form_control_styles_default
+} from "./chunk.LNM5ZU6K.js";
+import {
+  checkbox_styles_default
+} from "./chunk.YX2HWNCK.js";
+import {
+  FormControlController
+} from "./chunk.BJIN2WV3.js";
+import {
+  o
+} from "./chunk.VH7AMLEP.js";
+import {
+  TerraIcon
+} from "./chunk.AW3SAWPB.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.UME44J4L.js";
+import {
+  b
+} from "./chunk.RRCYT4LP.js";
+import {
+  __decorateClass,
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/checkbox/checkbox.component.ts
+init_dirname();
+init_buffer();
+init_process();
+var TerraCheckbox = 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.indeterminate = 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();
+  }
+  handleClick() {
+    this.checked = !this.checked;
+    this.indeterminate = false;
+    this.emit("terra-change");
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("terra-blur");
+  }
+  handleInput() {
+    this.emit("terra-input");
+  }
+  handleInvalid(event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("terra-focus");
+  }
+  handleDisabledChange() {
+    this.formControlController.setValidity(this.disabled);
+  }
+  handleStateChange() {
+    this.input.checked = this.checked;
+    this.input.indeterminate = this.indeterminate;
+    this.formControlController.updateValidity();
+  }
+  /** Simulates a click on the checkbox. */
+  click() {
+    this.input.click();
+  }
+  /** Sets focus on the checkbox. */
+  focus(options) {
+    this.input.focus(options);
+  }
+  /** Removes focus from the checkbox. */
+  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. 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.input.setCustomValidity(message);
+    this.formControlController.updateValidity();
+  }
+  render() {
+    const hasHelpTextSlot = this.hasSlotController.test("help-text");
+    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+    return b`
+            <div
+                class=${e({
+      "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=${e({
+      checkbox: true,
+      "checkbox--checked": this.checked,
+      "checkbox--disabled": this.disabled,
+      "checkbox--focused": this.hasFocus,
+      "checkbox--indeterminate": this.indeterminate,
+      "checkbox--small": this.size === "small",
+      "checkbox--medium": this.size === "medium",
+      "checkbox--large": this.size === "large"
+    })}
+                >
+                    <input
+                        class="checkbox__input"
+                        type="checkbox"
+                        title=${this.title}
+                        name=${this.name}
+                        value=${o(this.value)}
+                        .indeterminate=${l(this.indeterminate)}
+                        .checked=${l(this.checked)}
+                        .disabled=${this.disabled}
+                        .required=${this.required}
+                        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}
+                    />
+
+                    <span
+                        part="control${this.checked ? " control--checked" : ""}${this.indeterminate ? " control--indeterminate" : ""}"
+                        class="checkbox__control"
+                    >
+                        ${this.checked ? b`
+                                  <terra-icon
+                                      part="checked-icon"
+                                      class="checkbox__checked-icon"
+                                      library="heroicons"
+                                      name="outline-check"
+                                  ></terra-icon>
+                              ` : ""}
+                        ${!this.checked && this.indeterminate ? b`
+                                  <terra-icon
+                                      part="indeterminate-icon"
+                                      class="checkbox__indeterminate-icon"
+                                      library="heroicons"
+                                      name="outline-minus"
+                                  ></terra-icon>
+                              ` : ""}
+                    </span>
+
+                    <div part="label" class="checkbox__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>
+        `;
+  }
+};
+TerraCheckbox.styles = [component_styles_default, form_control_styles_default, checkbox_styles_default];
+TerraCheckbox.dependencies = { "terra-icon": TerraIcon };
+__decorateClass([
+  e2('input[type="checkbox"]')
+], TerraCheckbox.prototype, "input", 2);
+__decorateClass([
+  r()
+], TerraCheckbox.prototype, "hasFocus", 2);
+__decorateClass([
+  n()
+], TerraCheckbox.prototype, "title", 2);
+__decorateClass([
+  n()
+], TerraCheckbox.prototype, "name", 2);
+__decorateClass([
+  n()
+], TerraCheckbox.prototype, "value", 2);
+__decorateClass([
+  n({ reflect: true })
+], TerraCheckbox.prototype, "size", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], TerraCheckbox.prototype, "disabled", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], TerraCheckbox.prototype, "checked", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], TerraCheckbox.prototype, "indeterminate", 2);
+__decorateClass([
+  defaultValue("checked")
+], TerraCheckbox.prototype, "defaultChecked", 2);
+__decorateClass([
+  n({ reflect: true })
+], TerraCheckbox.prototype, "form", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], TerraCheckbox.prototype, "required", 2);
+__decorateClass([
+  n({ attribute: "help-text" })
+], TerraCheckbox.prototype, "helpText", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], TerraCheckbox.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch(["checked", "indeterminate"], { waitUntilFirstUpdate: true })
+], TerraCheckbox.prototype, "handleStateChange", 1);
+
+export {
+  TerraCheckbox
+};

package/cdn/chunks/chunk.U42VEZMH.js

@@ -0,0 +1,132 @@
+import {
+  tab_styles_default
+} from "./chunk.57ZIC75S.js";
+import {
+  TerraIcon
+} from "./chunk.AW3SAWPB.js";
+import {
+  e
+} from "./chunk.KGXAA5I2.js";
+import {
+  watch
+} from "./chunk.MPVZOQYA.js";
+import {
+  TerraElement,
+  component_styles_default,
+  e as e2,
+  n
+} from "./chunk.UME44J4L.js";
+import {
+  b
+} from "./chunk.RRCYT4LP.js";
+import {
+  __decorateClass,
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/tab/tab.component.ts
+init_dirname();
+init_buffer();
+init_process();
+var id = 0;
+var TerraTab = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.attrId = ++id;
+    this.componentId = `terra-tab-${this.attrId}`;
+    this.panel = "";
+    this.active = false;
+    this.closable = false;
+    this.disabled = false;
+    this.size = "large";
+    this.tabIndex = 0;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "tab");
+  }
+  handleCloseClick(event) {
+    event.stopPropagation();
+    this.emit("terra-close");
+  }
+  handleActiveChange() {
+    this.setAttribute("aria-selected", this.active ? "true" : "false");
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+    if (this.disabled && !this.active) {
+      this.tabIndex = -1;
+    } else {
+      this.tabIndex = 0;
+    }
+  }
+  render() {
+    this.id = this.id.length > 0 ? this.id : this.componentId;
+    return b`
+            <div
+                part="base"
+                class=${e({
+      tab: true,
+      "tab--active": this.active,
+      "tab--closable": this.closable,
+      "tab--disabled": this.disabled,
+      "tab--large": this.size === "large",
+      "tab--small": this.size === "small"
+    })}
+            >
+                <slot></slot>
+                ${this.closable ? b`
+                          <button
+                              part="close-button"
+                              class="tab__close-button"
+                              @click=${this.handleCloseClick}
+                              tabindex="-1"
+                              aria-label="Close tab"
+                              type="button"
+                          >
+                              <terra-icon
+                                  name="x-mark"
+                                  library="heroicons"
+                                  font-size="1rem"
+                              ></terra-icon>
+                          </button>
+                      ` : ""}
+            </div>
+        `;
+  }
+};
+TerraTab.styles = [component_styles_default, tab_styles_default];
+TerraTab.dependencies = { "terra-icon": TerraIcon };
+__decorateClass([
+  e2(".tab")
+], TerraTab.prototype, "tab", 2);
+__decorateClass([
+  n({ reflect: true })
+], TerraTab.prototype, "panel", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], TerraTab.prototype, "active", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], TerraTab.prototype, "closable", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], TerraTab.prototype, "disabled", 2);
+__decorateClass([
+  n({ reflect: true })
+], TerraTab.prototype, "size", 2);
+__decorateClass([
+  n({ type: Number, reflect: true })
+], TerraTab.prototype, "tabIndex", 2);
+__decorateClass([
+  watch("active")
+], TerraTab.prototype, "handleActiveChange", 1);
+__decorateClass([
+  watch("disabled")
+], TerraTab.prototype, "handleDisabledChange", 1);
+
+export {
+  TerraTab
+};

package/cdn/chunks/chunk.U4QWGOTS.js

@@ -0,0 +1,19 @@
+import {
+  TerraLoader
+} from "./chunk.ONHT57BX.js";
+import {
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/loader/loader.ts
+init_dirname();
+init_buffer();
+init_process();
+var loader_default = TerraLoader;
+TerraLoader.define("terra-loader");
+
+export {
+  loader_default
+};