@nasa-terra/components 0.0.171 → 0.0.173

package/dist/chunks/chunk.SXPM42XO.js

@@ -0,0 +1,220 @@
+import {
+  radio_styles_default
+} from "./chunk.RANEKL2E.js";
+import {
+  defaultValue
+} from "./chunk.7C67ZMHT.js";
+import {
+  form_control_styles_default
+} from "./chunk.Y6E3L66U.js";
+import {
+  FormControlController
+} from "./chunk.KT52MHEF.js";
+import {
+  watch
+} from "./chunk.NWXJOH5T.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.VT5KHE7G.js";
+import {
+  __decorateClass
+} from "./chunk.SHKVBVTI.js";
+
+// src/components/radio/radio.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 TerraRadio = 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.hasFocus = false;
+    this.title = "";
+    this.name = "";
+    this.size = "medium";
+    this.disabled = false;
+    this.checked = false;
+    this.defaultChecked = false;
+    this.form = "";
+    this.required = false;
+  }
+  /** 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");
+  }
+  handleClick() {
+    if (!this.disabled) {
+      this.checked = true;
+      this.emit("terra-change");
+    }
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("terra-focus");
+  }
+  handleInput() {
+    this.emit("terra-input");
+  }
+  handleChange() {
+    this.checked = this.input.checked;
+    this.emit("terra-change");
+  }
+  handleInvalid(event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+  }
+  handleDisabledChange() {
+    this.formControlController.setValidity(this.disabled);
+  }
+  handleCheckedChange() {
+    this.input.checked = this.checked;
+    this.formControlController.updateValidity();
+  }
+  /** Simulates a click on the radio. */
+  click() {
+    this.input.click();
+  }
+  /** Sets focus on the radio. */
+  focus(options) {
+    this.input.focus(options);
+  }
+  /** Removes focus from the radio. */
+  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() {
+    return html`
+            <label
+                part="base"
+                class=${classMap({
+      radio: true,
+      "radio--checked": this.checked,
+      "radio--disabled": this.disabled,
+      "radio--focused": this.hasFocus,
+      "radio--small": this.size === "small",
+      "radio--medium": this.size === "medium",
+      "radio--large": this.size === "large"
+    })}
+            >
+                <input
+                    class="radio__input"
+                    type="radio"
+                    title=${this.title}
+                    name=${this.name}
+                    value=${ifDefined(this.value)}
+                    .checked=${live(this.checked)}
+                    .disabled=${this.disabled}
+                    .required=${this.required}
+                    aria-checked=${this.checked ? "true" : "false"}
+                    @click=${this.handleClick}
+                    @input=${this.handleInput}
+                    @change=${this.handleChange}
+                    @invalid=${this.handleInvalid}
+                    @blur=${this.handleBlur}
+                    @focus=${this.handleFocus}
+                />
+
+                <span
+                    part="${`control${this.checked ? " control--checked" : ""}`}"
+                    class="radio__control"
+                >
+                    ${this.checked ? html`
+                              <svg
+                                  part="checked-icon"
+                                  class="radio__checked-icon"
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  xmlns="http://www.w3.org/2000/svg"
+                              >
+                                  <circle cx="12" cy="12" r="6" fill="currentColor" />
+                              </svg>
+                          ` : ""}
+                </span>
+
+                <slot part="label" class="radio__label"></slot>
+            </label>
+        `;
+  }
+};
+TerraRadio.styles = [component_styles_default, form_control_styles_default, radio_styles_default];
+__decorateClass([
+  query('input[type="radio"]')
+], TerraRadio.prototype, "input", 2);
+__decorateClass([
+  state()
+], TerraRadio.prototype, "hasFocus", 2);
+__decorateClass([
+  property()
+], TerraRadio.prototype, "title", 2);
+__decorateClass([
+  property()
+], TerraRadio.prototype, "name", 2);
+__decorateClass([
+  property()
+], TerraRadio.prototype, "value", 2);
+__decorateClass([
+  property({ reflect: true })
+], TerraRadio.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], TerraRadio.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], TerraRadio.prototype, "checked", 2);
+__decorateClass([
+  defaultValue("checked")
+], TerraRadio.prototype, "defaultChecked", 2);
+__decorateClass([
+  property({ reflect: true })
+], TerraRadio.prototype, "form", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], TerraRadio.prototype, "required", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], TerraRadio.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("checked", { waitUntilFirstUpdate: true })
+], TerraRadio.prototype, "handleCheckedChange", 1);
+
+export {
+  TerraRadio
+};

package/dist/chunks/chunk.T6Q62CEN.js

@@ -0,0 +1,11 @@
+import {
+  TerraPlotToolbar
+} from "./chunk.YG577JJA.js";
+
+// src/components/plot-toolbar/plot-toolbar.ts
+var plot_toolbar_default = TerraPlotToolbar;
+TerraPlotToolbar.define("terra-plot-toolbar");
+
+export {
+  plot_toolbar_default
+};

package/dist/chunks/chunk.TEYRIQPX.js

@@ -0,0 +1,11 @@
+import {
+  TerraBreadcrumb
+} from "./chunk.LUYFVAMD.js";
+
+// src/components/breadcrumb/breadcrumb.ts
+var breadcrumb_default = TerraBreadcrumb;
+TerraBreadcrumb.define("terra-breadcrumb");
+
+export {
+  breadcrumb_default
+};

package/dist/chunks/chunk.TFKL5DJ5.js

@@ -0,0 +1,21 @@
+import {
+  TerraStepper
+} from "./chunk.VG2ESYPS.js";
+
+// src/react/stepper/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "terra-stepper";
+TerraStepper.define("terra-stepper");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraStepper,
+  react: React,
+  events: {},
+  displayName: "TerraStepper"
+});
+var stepper_default = reactWrapper;
+
+export {
+  stepper_default
+};

package/dist/chunks/chunk.THWLNG2A.js

@@ -0,0 +1,52 @@
+import {
+  status_indicator_styles_default
+} from "./chunk.AUKJJNAV.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.VT5KHE7G.js";
+import {
+  __decorateClass
+} from "./chunk.SHKVBVTI.js";
+
+// src/components/status-indicator/status-indicator.component.ts
+import { property } from "lit/decorators.js";
+import { html } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+var TerraStatusIndicator = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "active";
+    this.dark = false;
+  }
+  render() {
+    return html`
+            <div
+                part="base"
+                class="${classMap({
+      "status-indicator": true,
+      "status-indicator--active": this.variant === "active",
+      "status-indicator--completed": this.variant === "completed",
+      "status-indicator--testing": this.variant === "testing",
+      "status-indicator--future": this.variant === "future"
+    })}"
+            >
+                <span part="dot" class="status-indicator__dot"></span>
+                <span part="label" class="status-indicator__label">
+                    <slot></slot>
+                </span>
+            </div>
+        `;
+  }
+};
+TerraStatusIndicator.styles = [component_styles_default, status_indicator_styles_default];
+__decorateClass([
+  property({ reflect: true })
+], TerraStatusIndicator.prototype, "variant", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], TerraStatusIndicator.prototype, "dark", 2);
+
+export {
+  TerraStatusIndicator
+};

package/dist/chunks/chunk.TMXVDFSE.js

@@ -0,0 +1,21 @@
+import {
+  TerraBreadcrumbs
+} from "./chunk.EW3VHFI7.js";
+
+// src/react/breadcrumbs/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "terra-breadcrumbs";
+TerraBreadcrumbs.define("terra-breadcrumbs");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraBreadcrumbs,
+  react: React,
+  events: {},
+  displayName: "TerraBreadcrumbs"
+});
+var breadcrumbs_default = reactWrapper;
+
+export {
+  breadcrumbs_default
+};

package/dist/chunks/chunk.TNMLOQZS.js

@@ -0,0 +1,24 @@
+import {
+  TerraDataSubsetter
+} from "./chunk.6Q4CBJWL.js";
+
+// src/react/data-subsetter/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "terra-data-subsetter";
+TerraDataSubsetter.define("terra-data-subsetter");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraDataSubsetter,
+  react: React,
+  events: {
+    onTerraSubsetJobComplete: "terra-subset-job-complete"
+  },
+  displayName: "TerraDataSubsetter"
+});
+var data_subsetter_default = reactWrapper;
+
+export {
+  data_subsetter_default
+};

package/dist/chunks/chunk.TQQ36LCR.js

@@ -0,0 +1,52 @@
+import {
+  getRandomIntInclusive
+} from "./chunk.UZAIWUWC.js";
+import {
+  skeleton_styles_default
+} from "./chunk.OAWTV6OW.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.VT5KHE7G.js";
+import {
+  __decorateClass
+} from "./chunk.SHKVBVTI.js";
+
+// src/components/skeleton/skeleton.component.ts
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+var TerraSkeleton = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.rows = 1;
+    this.effect = "pulse";
+    this.variableWidths = true;
+  }
+  render() {
+    return html`
+            ${new Array(parseInt(this.rows.toString())).fill(0).map(
+      () => html` <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([
+  property()
+], TerraSkeleton.prototype, "rows", 2);
+__decorateClass([
+  property()
+], TerraSkeleton.prototype, "effect", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], TerraSkeleton.prototype, "variableWidths", 2);
+
+export {
+  TerraSkeleton
+};

package/dist/chunks/chunk.TRXSEINU.js

@@ -0,0 +1,21 @@
+import {
+  TerraDateRangeSlider
+} from "./chunk.SNI3GRL7.js";
+
+// src/react/date-range-slider/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "terra-date-range-slider";
+TerraDateRangeSlider.define("terra-date-range-slider");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraDateRangeSlider,
+  react: React,
+  events: {},
+  displayName: "TerraDateRangeSlider"
+});
+var date_range_slider_default = reactWrapper;
+
+export {
+  date_range_slider_default
+};

package/dist/chunks/chunk.TVXTIOPO.js

@@ -0,0 +1,11 @@
+import {
+  TerraDialog
+} from "./chunk.PZSNM7Y7.js";
+
+// src/components/dialog/dialog.ts
+var dialog_default = TerraDialog;
+TerraDialog.define("terra-dialog");
+
+export {
+  dialog_default
+};

package/dist/chunks/chunk.TY4H6MKT.js

@@ -0,0 +1,21 @@
+import {
+  TerraSkeleton
+} from "./chunk.TQQ36LCR.js";
+
+// src/react/skeleton/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "terra-skeleton";
+TerraSkeleton.define("terra-skeleton");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraSkeleton,
+  react: React,
+  events: {},
+  displayName: "TerraSkeleton"
+});
+var skeleton_default = reactWrapper;
+
+export {
+  skeleton_default
+};

package/dist/chunks/chunk.UFSZ7IUJ.js

@@ -0,0 +1,101 @@
+import {
+  button_group_styles_default
+} from "./chunk.QFLXNLU3.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.VT5KHE7G.js";
+import {
+  __decorateClass
+} from "./chunk.SHKVBVTI.js";
+
+// src/components/button-group/button-group.component.ts
+import { html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+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 html`
+            <div
+                part="base"
+                class="button-group"
+                role=${this.disableRole ? "presentation" : "group"}
+                aria-label=${ifDefined(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([
+  query("slot")
+], TerraButtonGroup.prototype, "defaultSlot", 2);
+__decorateClass([
+  state()
+], TerraButtonGroup.prototype, "disableRole", 2);
+__decorateClass([
+  property()
+], 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/dist/chunks/chunk.UH7BQYXA.js

@@ -0,0 +1,28 @@
+import {
+  TerraCheckbox
+} from "./chunk.IT44PAE5.js";
+
+// src/react/checkbox/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "terra-checkbox";
+TerraCheckbox.define("terra-checkbox");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraCheckbox,
+  react: React,
+  events: {
+    onTerraBlur: "terra-blur",
+    onTerraChange: "terra-change",
+    onTerraFocus: "terra-focus",
+    onTerraInput: "terra-input",
+    onTerraInvalid: "terra-invalid"
+  },
+  displayName: "TerraCheckbox"
+});
+var checkbox_default = reactWrapper;
+
+export {
+  checkbox_default
+};