@nasa-terra/components 0.0.170 → 0.0.172

package/dist/chunks/chunk.76MN3EY5.js

@@ -0,0 +1,123 @@
+import {
+  tag_styles_default
+} from "./chunk.6NI3YPRS.js";
+import {
+  TerraIcon
+} from "./chunk.TJXQEGVJ.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.H7RPIHW6.js";
+import {
+  __decorateClass
+} from "./chunk.SHKVBVTI.js";
+
+// src/components/tag/tag.component.ts
+import { property } from "lit/decorators.js";
+import { html, nothing } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+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 = (e) => {
+      if (this.variant === "topic") {
+        this.emit("terra-click", { detail: { originalEvent: e } });
+      }
+    };
+  }
+  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 = html`
+            ${isContent ? html`
+                      <span
+                          part="icon"
+                          class="${classMap({
+      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 ? html`
+                                        <terra-icon
+                                            name="${this.icon}"
+                                            library="${this.iconLibrary}"
+                                        ></terra-icon>
+                                    ` : nothing}
+                          </slot>
+                      </span>
+                  ` : nothing}
+            <span part="label" class="tag__label">
+                <slot></slot>
+            </span>
+        `;
+    if (isLink) {
+      return html`
+                <a
+                    part="base"
+                    href="${this.href}"
+                    class="${classMap(baseClasses)}"
+                    @click="${this.handleClick}"
+                >
+                    ${content}
+                </a>
+            `;
+    }
+    return html`
+            <div
+                part="base"
+                class="${classMap(baseClasses)}"
+                @click="${this.handleClick}"
+                role="${this.variant === "topic" ? "button" : nothing}"
+                tabindex="${this.variant === "topic" && !this.href ? "0" : nothing}"
+            >
+                ${content}
+            </div>
+        `;
+  }
+};
+TerraTag.styles = [component_styles_default, tag_styles_default];
+TerraTag.dependencies = {
+  "terra-icon": TerraIcon
+};
+__decorateClass([
+  property({ reflect: true })
+], TerraTag.prototype, "variant", 2);
+__decorateClass([
+  property({ reflect: true })
+], TerraTag.prototype, "size", 2);
+__decorateClass([
+  property({ reflect: true })
+], TerraTag.prototype, "icon", 2);
+__decorateClass([
+  property({ reflect: true })
+], TerraTag.prototype, "iconLibrary", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], TerraTag.prototype, "stack", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], TerraTag.prototype, "dark", 2);
+__decorateClass([
+  property()
+], TerraTag.prototype, "href", 2);
+
+export {
+  TerraTag
+};

package/dist/chunks/chunk.7B4RGASR.js

@@ -0,0 +1,89 @@
+import {
+  stepper_step_styles_default
+} from "./chunk.FKON3QJJ.js";
+import {
+  TerraIcon
+} from "./chunk.TJXQEGVJ.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.H7RPIHW6.js";
+import {
+  __decorateClass
+} from "./chunk.SHKVBVTI.js";
+
+// src/components/stepper-step/stepper-step.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+var TerraStepperStep = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.state = "upcoming";
+    this.title = "";
+    this.hideCheckmark = false;
+  }
+  getStepperVariant() {
+    const stepper = this.closest("terra-stepper");
+    if (stepper) {
+      return stepper.variant || "default";
+    }
+    return "default";
+  }
+  render() {
+    const variant = this.getStepperVariant();
+    const isCondensed = variant === "condensed";
+    const isCompleted = this.state === "completed";
+    const isCurrent = this.state === "current";
+    return html`
+            <div
+                part="base"
+                class=${classMap({
+      "stepper-step": true,
+      "stepper-step--default": !isCondensed,
+      "stepper-step--condensed": isCondensed,
+      "stepper-step--completed": isCompleted,
+      "stepper-step--current": isCurrent,
+      "stepper-step--upcoming": this.state === "upcoming"
+    })}
+            >
+                <div part="bar" class="stepper-step__bar"></div>
+                ${!isCondensed ? html`
+                          <div part="content" class="stepper-step__content">
+                              <div part="title" class="stepper-step__title">
+                                  ${isCompleted && !this.hideCheckmark ? html`
+                                            <terra-icon
+                                                part="icon"
+                                                name="solid-check"
+                                                library="heroicons"
+                                                class="stepper-step__icon"
+                                            ></terra-icon>
+                                        ` : ""}
+                                  ${this.title}
+                              </div>
+                              <div part="caption" class="stepper-step__caption">
+                                  <slot></slot>
+                              </div>
+                          </div>
+                      ` : ""}
+            </div>
+        `;
+  }
+};
+TerraStepperStep.styles = [component_styles_default, stepper_step_styles_default];
+TerraStepperStep.dependencies = {
+  "terra-icon": TerraIcon
+};
+__decorateClass([
+  property({ reflect: true })
+], TerraStepperStep.prototype, "state", 2);
+__decorateClass([
+  property()
+], TerraStepperStep.prototype, "title", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "hide-checkmark" })
+], TerraStepperStep.prototype, "hideCheckmark", 2);
+
+export {
+  TerraStepperStep
+};

package/dist/chunks/chunk.7CO6QTVI.js

@@ -0,0 +1,26 @@
+import {
+  TerraRadioGroup
+} from "./chunk.IDZS2ZB5.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.7GUSP6AE.js

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

package/dist/chunks/chunk.7RDHIYBR.js

@@ -0,0 +1,24 @@
+import {
+  TerraTag
+} from "./chunk.76MN3EY5.js";
+
+// src/react/tag/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "terra-tag";
+TerraTag.define("terra-tag");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraTag,
+  react: React,
+  events: {
+    onTerraClick: "terra-click"
+  },
+  displayName: "TerraTag"
+});
+var tag_default = reactWrapper;
+
+export {
+  tag_default
+};

package/dist/chunks/chunk.7TGVKLME.js

@@ -0,0 +1,11 @@
+import {
+  TerraBreadcrumbs
+} from "./chunk.HO6GD4UO.js";
+
+// src/components/breadcrumbs/breadcrumbs.ts
+var breadcrumbs_default = TerraBreadcrumbs;
+TerraBreadcrumbs.define("terra-breadcrumbs");
+
+export {
+  breadcrumbs_default
+};

package/dist/chunks/chunk.7TJE42GX.js

@@ -0,0 +1,345 @@
+import {
+  file_upload_styles_default
+} from "./chunk.SOWK5CSF.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.H7RPIHW6.js";
+import {
+  __decorateClass
+} from "./chunk.SHKVBVTI.js";
+
+// src/components/file-upload/file-upload.component.ts
+import { property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+var TerraFileUpload = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.files = [];
+    this.isDragging = false;
+    this.hasFocus = false;
+    this.label = "Upload";
+    this.helpText = "";
+    this.name = "";
+    this.multiple = false;
+    this.disabled = false;
+    this.required = false;
+    this.accept = "";
+    this.handleDragOver = (event) => {
+      if (this.disabled)
+        return;
+      event.preventDefault();
+      event.stopPropagation();
+      this.isDragging = true;
+    };
+    this.handleDragLeave = (event) => {
+      if (this.disabled)
+        return;
+      event.preventDefault();
+      event.stopPropagation();
+      this.isDragging = false;
+    };
+    this.handleDrop = (event) => {
+      var _a;
+      if (this.disabled)
+        return;
+      event.preventDefault();
+      event.stopPropagation();
+      this.isDragging = false;
+      const droppedFiles = (_a = event.dataTransfer) == null ? void 0 : _a.files;
+      if (droppedFiles && droppedFiles.length > 0) {
+        this.handleFiles(Array.from(droppedFiles));
+      }
+    };
+    this.handleFileInputChange = (event) => {
+      const input = event.target;
+      if (input.files && input.files.length > 0) {
+        this.handleFiles(Array.from(input.files));
+      }
+    };
+    this.handleClick = () => {
+      if (!this.disabled) {
+        this.fileInput.click();
+      }
+    };
+    this.handleChangeFiles = () => {
+      this.handleClick();
+    };
+    this.handleFocus = () => {
+      this.hasFocus = true;
+      this.emit("terra-focus");
+    };
+    this.handleBlur = () => {
+      this.hasFocus = false;
+      this.emit("terra-blur");
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  firstUpdated() {
+    this.setupDragAndDrop();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.cleanupDragAndDrop();
+    this.files.forEach((file) => {
+      if (file.preview && file.preview.startsWith("blob:")) {
+        URL.revokeObjectURL(file.preview);
+      }
+    });
+  }
+  setupDragAndDrop() {
+    if (this.dropzone) {
+      this.dropzone.addEventListener("dragover", this.handleDragOver);
+      this.dropzone.addEventListener("dragleave", this.handleDragLeave);
+      this.dropzone.addEventListener("drop", this.handleDrop);
+    }
+  }
+  cleanupDragAndDrop() {
+    if (this.dropzone) {
+      this.dropzone.removeEventListener("dragover", this.handleDragOver);
+      this.dropzone.removeEventListener("dragleave", this.handleDragLeave);
+      this.dropzone.removeEventListener("drop", this.handleDrop);
+    }
+  }
+  handleFiles(newFiles) {
+    let filesToAdd = newFiles;
+    if (this.multiple && this.maxFiles) {
+      const remaining = this.maxFiles - this.files.length;
+      if (remaining <= 0) {
+        return;
+      }
+      filesToAdd = filesToAdd.slice(0, remaining);
+    } else if (!this.multiple) {
+      filesToAdd = [filesToAdd[0]];
+    }
+    if (this.maxFileSize) {
+      filesToAdd = filesToAdd.filter((file) => file.size <= this.maxFileSize);
+    }
+    const filesWithPreviews = filesToAdd.map((file) => {
+      const fileWithPreview = file;
+      if (file.type.startsWith("image/")) {
+        fileWithPreview.preview = URL.createObjectURL(file);
+      }
+      return fileWithPreview;
+    });
+    if (this.multiple) {
+      this.files = [...this.files, ...filesWithPreviews];
+    } else {
+      this.files.forEach((file) => {
+        if (file.preview && file.preview.startsWith("blob:")) {
+          URL.revokeObjectURL(file.preview);
+        }
+      });
+      this.files = filesWithPreviews;
+    }
+    this.emit("terra-change");
+  }
+  /** Gets the current files. */
+  getFiles() {
+    return [...this.files];
+  }
+  /** Clears all selected files. */
+  clearFiles() {
+    this.files.forEach((file) => {
+      if (file.preview && file.preview.startsWith("blob:")) {
+        URL.revokeObjectURL(file.preview);
+      }
+    });
+    this.files = [];
+    if (this.fileInput) {
+      this.fileInput.value = "";
+    }
+    this.emit("terra-change");
+  }
+  render() {
+    const hasFiles = this.files.length > 0;
+    const fileCount = this.files.length;
+    return html`
+            <div class="file-upload-wrapper">
+                ${this.label ? html`
+                          <label for="file-input" class="file-upload__label">
+                              ${this.label}
+                              ${this.required ? html`<span class="file-upload__required-indicator"
+                                        >*</span
+                                    >` : ""}
+                          </label>
+                      ` : ""}
+                ${hasFiles ? html`
+                          <div class="file-upload__preview">
+                              <div class="file-upload__preview-header">
+                                  <strong class="file-upload__file-count"
+                                      >${fileCount}
+                                      ${fileCount === 1 ? "file" : "files"}
+                                      selected</strong
+                                  >
+                                  <button
+                                      type="button"
+                                      class="file-upload__change-link"
+                                      @click=${this.handleChangeFiles}
+                                      ?disabled=${this.disabled}
+                                  >
+                                      Change files
+                                  </button>
+                              </div>
+                              <div class="file-upload__file-list">
+                                  ${this.files.map(
+      (file) => html`
+                                          <div
+                                              class="file-upload__file-item"
+                                              part="file-item"
+                                          >
+                                              ${file.preview ? html`
+                                                        <img
+                                                            part="file-thumbnail"
+                                                            class="file-upload__thumbnail"
+                                                            src=${file.preview}
+                                                            alt=${file.name}
+                                                        />
+                                                    ` : html`
+                                                        <div
+                                                            class="file-upload__thumbnail file-upload__thumbnail--placeholder"
+                                                        >
+                                                            <svg
+                                                                width="24"
+                                                                height="24"
+                                                                viewBox="0 0 24 24"
+                                                                fill="none"
+                                                                xmlns="http://www.w3.org/2000/svg"
+                                                            >
+                                                                <path
+                                                                    d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z"
+                                                                    stroke="currentColor"
+                                                                    stroke-width="2"
+                                                                    stroke-linecap="round"
+                                                                    stroke-linejoin="round"
+                                                                />
+                                                                <path
+                                                                    d="M14 2V8H20"
+                                                                    stroke="currentColor"
+                                                                    stroke-width="2"
+                                                                    stroke-linecap="round"
+                                                                    stroke-linejoin="round"
+                                                                />
+                                                            </svg>
+                                                        </div>
+                                                    `}
+                                              <span
+                                                  part="file-name"
+                                                  class="file-upload__file-name"
+                                                  >${file.name}</span
+                                              >
+                                          </div>
+                                      `
+    )}
+                              </div>
+                          </div>
+                      ` : html`
+                          <div
+                              part="dropzone"
+                              class=${classMap({
+      "file-upload__dropzone": true,
+      "file-upload__dropzone--dragging": this.isDragging,
+      "file-upload__dropzone--focused": this.hasFocus,
+      "file-upload__dropzone--disabled": this.disabled
+    })}
+                              @click=${this.handleClick}
+                              @keydown=${(e) => {
+      if ((e.key === "Enter" || e.key === " ") && !this.disabled) {
+        e.preventDefault();
+        this.handleClick();
+      }
+    }}
+                              @focus=${this.handleFocus}
+                              @blur=${this.handleBlur}
+                              tabindex=${this.disabled ? "-1" : "0"}
+                              role="button"
+                              aria-label="Upload files"
+                          >
+                              <slot>
+                                  <span class="file-upload__dropzone-text">
+                                      Drag files here or
+                                      <button
+                                          type="button"
+                                          class="file-upload__browse-link"
+                                          @click=${(e) => {
+      e.stopPropagation();
+      this.handleClick();
+    }}
+                                      >
+                                          choose from folder
+                                      </button>
+                                  </span>
+                              </slot>
+                          </div>
+                      `}
+
+                <input
+                    part="file-input"
+                    class="file-upload__input"
+                    id="file-input"
+                    type="file"
+                    name=${ifDefined(this.name || void 0)}
+                    ?multiple=${this.multiple}
+                    ?disabled=${this.disabled}
+                    ?required=${this.required}
+                    accept=${ifDefined(this.accept || void 0)}
+                    @change=${this.handleFileInputChange}
+                    tabindex="-1"
+                />
+
+                ${this.helpText ? html`<div class="file-upload__help-text">${this.helpText}</div>` : ""}
+            </div>
+        `;
+  }
+};
+TerraFileUpload.styles = [component_styles_default, file_upload_styles_default];
+__decorateClass([
+  query(".file-upload__input")
+], TerraFileUpload.prototype, "fileInput", 2);
+__decorateClass([
+  query(".file-upload__dropzone")
+], TerraFileUpload.prototype, "dropzone", 2);
+__decorateClass([
+  state()
+], TerraFileUpload.prototype, "files", 2);
+__decorateClass([
+  state()
+], TerraFileUpload.prototype, "isDragging", 2);
+__decorateClass([
+  state()
+], TerraFileUpload.prototype, "hasFocus", 2);
+__decorateClass([
+  property()
+], TerraFileUpload.prototype, "label", 2);
+__decorateClass([
+  property({ attribute: "help-text" })
+], TerraFileUpload.prototype, "helpText", 2);
+__decorateClass([
+  property()
+], TerraFileUpload.prototype, "name", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], TerraFileUpload.prototype, "multiple", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], TerraFileUpload.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], TerraFileUpload.prototype, "required", 2);
+__decorateClass([
+  property()
+], TerraFileUpload.prototype, "accept", 2);
+__decorateClass([
+  property({ type: Number, attribute: "max-file-size" })
+], TerraFileUpload.prototype, "maxFileSize", 2);
+__decorateClass([
+  property({ type: Number, attribute: "max-files" })
+], TerraFileUpload.prototype, "maxFiles", 2);
+
+export {
+  TerraFileUpload
+};

package/dist/chunks/chunk.AC66MQLD.js

@@ -0,0 +1,24 @@
+import {
+  TerraDataSubsetter
+} from "./chunk.FDZA4S2G.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.ACC5KGBR.js

@@ -0,0 +1,25 @@
+import {
+  TerraIcon
+} from "./chunk.TJXQEGVJ.js";
+
+// src/react/icon/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "terra-icon";
+TerraIcon.define("terra-icon");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraIcon,
+  react: React,
+  events: {
+    onTerraLoad: "terra-load",
+    onTerraError: "terra-error"
+  },
+  displayName: "TerraIcon"
+});
+var icon_default = reactWrapper;
+
+export {
+  icon_default
+};