@nasa-terra/components 0.0.0

package/dist/chunks/chunk.FGILL5W6.js

@@ -0,0 +1,118 @@
+import {
+  plot_styles_default
+} from "./chunk.BLNUBLUS.js";
+import {
+  watch
+} from "./chunk.ZK7QVWBI.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.PJXIJK2G.js";
+import {
+  __decorateClass,
+  __spreadValues
+} from "./chunk.RYPAZDXE.js";
+
+// src/components/plot/plot.component.ts
+import { property, query } from "lit/decorators.js";
+import { html } from "lit";
+import {
+  newPlot,
+  Icons
+} from "plotly.js-dist-min";
+var TerraPlot = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.plotData = [];
+    this.layout = {};
+    this.config = {
+      modeBarButtonsToAdd: [
+        {
+          name: "Download Data",
+          title: "Download plot data as a CSV file",
+          icon: Icons.disk,
+          click: () => {
+            this.downloadCSV();
+          }
+        }
+      ]
+    };
+    this.data = [];
+  }
+  handleDataChange() {
+    this.updatePlotWithData();
+  }
+  firstUpdated() {
+    if (this.data.length) {
+      this.updatePlotWithData();
+    }
+  }
+  updatePlotWithData() {
+    if (!this.base) {
+      return;
+    }
+    newPlot(
+      this.base,
+      this.data,
+      __spreadValues({
+        title: this.plotTitle
+      }, this.layout),
+      this.config
+    );
+  }
+  downloadCSV() {
+    let plotData = [];
+    this.data.forEach((plot, index) => {
+      plotData[index] = plot;
+    });
+    const csvData = plotData.map((trace) => {
+      return trace.x.map((x, i) => {
+        return {
+          x,
+          y: trace.y[i]
+        };
+      });
+    }).flat();
+    const csv = this.convertToCSV(csvData);
+    const blob = new Blob([csv], { type: "text/csv" });
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.setAttribute("href", url);
+    a.setAttribute("download", "chart_data.csv");
+    a.style.display = "none";
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  }
+  convertToCSV(data) {
+    const header = Object.keys(data[0]).join(",") + "\n";
+    const rows = data.map((obj) => Object.values(obj).join(",")).join("\n");
+    return header + rows;
+  }
+  render() {
+    return html`<div part="base"></div>`;
+  }
+};
+TerraPlot.styles = [component_styles_default, plot_styles_default];
+__decorateClass([
+  query('[part~="base"]')
+], TerraPlot.prototype, "base", 2);
+__decorateClass([
+  property()
+], TerraPlot.prototype, "plotTitle", 2);
+__decorateClass([
+  property()
+], TerraPlot.prototype, "layout", 2);
+__decorateClass([
+  property()
+], TerraPlot.prototype, "config", 2);
+__decorateClass([
+  property({ type: Array })
+], TerraPlot.prototype, "data", 2);
+__decorateClass([
+  watch("data")
+], TerraPlot.prototype, "handleDataChange", 1);
+
+export {
+  TerraPlot
+};

package/dist/chunks/chunk.FXIUS5TR.js

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

package/dist/chunks/chunk.HKHDBTIC.js

@@ -0,0 +1,214 @@
+import {
+  getIconLibrary,
+  unwatchIcon,
+  watchIcon
+} from "./chunk.MDRUDBRH.js";
+import {
+  icon_styles_default
+} from "./chunk.7VUSSQRI.js";
+import {
+  watch
+} from "./chunk.ZK7QVWBI.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.PJXIJK2G.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet
+} from "./chunk.RYPAZDXE.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.I2NEFB34.js

@@ -0,0 +1,99 @@
+// src/components/loader/loader.styles.ts
+import { css } from "lit";
+var loader_styles_default = css`
+    :host {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100px;
+    }
+
+    .loader {
+        position: relative;
+        width: var(--size);
+        height: var(--size);
+    }
+
+    /* Theme modes */
+
+    .loader--dark {
+        color: white;
+        background-color: black;
+    }
+
+    .loader--light {
+        color: black;
+        background-color: white;
+    }
+
+    /* Loader sizes */
+
+    .loader--large {
+        --size: 52px;
+        --stroke-width: 3.5px;
+    }
+
+    .loader--small {
+        --size: 30px;
+        --stroke-width: 3.5px;
+    }
+
+    svg {
+        width: var(--size);
+        height: var(--size);
+    }
+
+    .percent {
+        display: block;
+        width: var(--size);
+        position: absolute;
+        top: 17px;
+        padding-left: 4px;
+        font-family: sans-serif;
+        font-size: 11px;
+        letter-spacing: 0.1rem;
+        text-align: center;
+    }
+
+    .circular-progress {
+        --progress: 0; /* added this so I can try to reference it and change the value. This value drives the rest of the calcultations */
+        --half-size: calc(var(--size) / 2);
+        --radius: calc((var(--size) - var(--stroke-width)) / 2);
+        --circumference: calc(var(--radius) * pi * 2);
+        --dash: calc(
+            (var(--progress) * var(--circumference)) / 100
+        ); /* Calculate the length of the dash based on the progress percentage */
+    }
+
+    .circular-progress circle {
+        cx: var(--half-size);
+        cy: var(--half-size);
+        r: var(--radius);
+        stroke-width: var(--stroke-width);
+        fill: none;
+        stroke-linecap: round;
+    }
+
+    .circular-progress circle.bg {
+        stroke: #ccc;
+    }
+
+    .circular-progress circle.fg {
+        transform: rotate(-90deg);
+        transform-origin: var(--half-size) var(--half-size);
+        stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
+        transition: stroke-dasharray 0.3s linear 0s; /* Defines how --dash value changes to stroke-dasharray are animated */
+        stroke: #1c68e3;
+    }
+
+    @property --progress {
+        /* Registers and describes the custom property and variable with the browser. */
+        syntax: '<number>';
+        inherits: false;
+        initial-value: 0;
+    }
+`;
+
+export {
+  loader_styles_default
+};

package/dist/chunks/chunk.I32QCWMN.js

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