@nasa-terra/components 0.0.66 → 0.0.68

package/dist/chunks/chunk.UPMJQK2S.js

@@ -0,0 +1,120 @@
+import {
+  loader_styles_default
+} from "./chunk.3GLMJLNY.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.TSIWRLNC.js";
+import {
+  __decorateClass
+} from "./chunk.TVFCHGU3.js";
+
+// src/components/loader/loader.component.ts
+import { property, state } from "lit/decorators.js";
+import { html, nothing } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+var TerraLoader = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "large";
+    this.percent = "0";
+    this.indeterminate = false;
+    this._currentPercent = 0;
+  }
+  formatPercent(percent) {
+    if (parseInt(percent) > 100) {
+      percent = "100";
+    }
+    return parseInt(percent) > 0 ? percent + "%" : "";
+  }
+  render() {
+    this._currentPercent = parseInt(this.percent);
+    return html`
+            <div
+                class=${classMap({
+      loader: true,
+      "loader--small": this.variant === "small",
+      "loader--large": this.variant === "large",
+      "loader--orbit": this.variant === "orbit"
+    })}
+                aria-valuenow=${this.formatPercent(this.percent)}
+                role="progressbar"
+                tabindex="-1"
+            >
+                ${this.variant === "large" || this.variant === "orbit" ? html`
+                          <div
+                              class="percent ${this.variant == "orbit" ? "number-14" : "number-11"}"
+                          >
+                              ${this.formatPercent(this.percent)}
+                          </div>
+                      ` : nothing}
+                ${this.variant === "orbit" ? html`
+                          <svg viewBox="0 0 160 160">
+                              <circle class="planet" />
+
+                              <!-- total length of orbit ellipse = 298.2393493652344 -->
+                              <path
+                                  id="orbit"
+                                  d="M 53.528 96.775 C 73.584 124.975 100.654 140.601 115.393 130.137 C 132.613 117.912 119.246 79.55 105.434 60.525 C 90.233 39.587 60.506 18.543 44.962 30.114 C 29.456 41.657 38.219 75.25 53.528 96.775 Z"
+                              >
+                                  <animate
+                                      attributeName="stroke-dashoffset"
+                                      begin="-0.25s"
+                                      from="300"
+                                      to="0"
+                                      dur="1.5s"
+                                      repeatCount="indefinite"
+                                  />
+                              </path>
+
+                              <circle class="moon">
+                                  <animateMotion
+                                      begin="0s"
+                                      dur="1.5s"
+                                      repeatCount="indefinite"
+                                  >
+                                      <mpath href="#orbit"></mpath>
+                                  </animateMotion>
+                              </circle>
+
+                              <path
+                                  id="mask"
+                                  class="planet"
+                                  d="M 130.176 80.041 C 130.176 41.552 88.321 17.697 55.544 36.652 C 40.081 45.594 30.865 62.428 30.47 80.094 L 130.176 80.041 Z"
+                                  style="transform-box: fill-box; transform-origin: 49.8347% 100.62%;"
+                                  transform="matrix(-0.350367, -0.936613, 0.936613, -0.350367, -0.148117, -0.20884)"
+                              />
+                          </svg>
+                      ` : nothing}
+                ${this.variant === "small" || this.variant === "large" ? html`
+                          <svg
+                              viewBox=${this.variant == "small" ? "0 0 30 30" : "0 0 52 52"}
+                              aria-hidden="true"
+                              style="--progress: ${this.percent}"
+                              class="circular-progress ${this.indeterminate ? "indeterminate" : ""}"
+                          >
+                              <circle class="bg"></circle>
+                              <circle class="fg"></circle>
+                          </svg>
+                      ` : nothing}
+            </div>
+        `;
+  }
+};
+TerraLoader.styles = [component_styles_default, loader_styles_default];
+__decorateClass([
+  property({ reflect: true })
+], TerraLoader.prototype, "variant", 2);
+__decorateClass([
+  property({ type: String })
+], TerraLoader.prototype, "percent", 2);
+__decorateClass([
+  property({ type: Boolean })
+], TerraLoader.prototype, "indeterminate", 2);
+__decorateClass([
+  state()
+], TerraLoader.prototype, "_currentPercent", 2);
+
+export {
+  TerraLoader
+};

package/dist/chunks/chunk.URKW2CME.js

@@ -0,0 +1,21 @@
+import {
+  TerraSkeleton
+} from "./chunk.HUX2RF6U.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.UT5XKCBV.js

@@ -0,0 +1,183 @@
+import {
+  date_picker_styles_default
+} from "./chunk.XZB6CNAL.js";
+import {
+  TerraButton
+} from "./chunk.PAJVTERU.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.O6SXSDFR.js";
+import {
+  __decorateClass
+} from "./chunk.TVFCHGU3.js";
+
+// src/components/date-picker/date-picker.component.ts
+import { property, query } from "lit/decorators.js";
+import { html } from "lit";
+import "lit-flatpickr";
+var TerraDatePicker = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.range = false;
+    this.allowInput = false;
+    this.altFormat = "F j, Y";
+    this.altInput = false;
+    this.altInputClass = "";
+    this.dateFormat = "Y-m-d";
+    this.enableTime = false;
+    this.time24hr = false;
+    this.weekNumbers = false;
+    this.static = false;
+    this.position = "auto";
+    this.showMonths = 1;
+    this.hideLabel = false;
+    this.label = "Select Date";
+  }
+  firstUpdated() {
+    this.flatpickrElement.addEventListener("change", this.handleChange.bind(this));
+    setTimeout(() => {
+      this.flatpickrElement.shadowRoot.querySelector("input").addEventListener("blur", this.handleBlur.bind(this));
+    }, 250);
+  }
+  handleChange(selectedDates) {
+    var _a, _b;
+    this.selectedDates = {
+      startDate: (_a = selectedDates[0]) == null ? void 0 : _a.toISOString().split("T")[0],
+      endDate: this.range ? (_b = selectedDates[1]) == null ? void 0 : _b.toISOString().split("T")[0] : null
+    };
+    this.emit("terra-change");
+  }
+  handleBlur() {
+    this.handleChange(this.flatpickrElement._instance.selectedDates);
+  }
+  render() {
+    return html`
+            <div class="date-picker">
+                <label
+                    for="date-picker__input"
+                    class=${this.hideLabel ? "sr-only" : "date-picker__input_label"}
+                    >${this.label}</label
+                >
+                <div class="date-picker__input_fields">
+                    <lit-flatpickr
+                        id="date-picker__input"
+                        class="form-control"
+                        .mode=${this.range ? "range" : "single"}
+                        .minDate=${this.minDate}
+                        .maxDate=${this.maxDate}
+                        .defaultDate=${this.range ? [this.startDate, this.endDate].filter(
+      Boolean
+    ) : this.defaultDate}
+                        .allowInput=${this.allowInput}
+                        .altFormat=${this.altFormat}
+                        .altInput=${this.altInput}
+                        .altInputClass=${this.altInputClass}
+                        .dateFormat=${this.dateFormat}
+                        .enableTime=${this.enableTime}
+                        .time24hr=${this.time24hr}
+                        .weekNumbers=${this.weekNumbers}
+                        .static=${this.static}
+                        .position=${this.position}
+                        .showMonths=${this.showMonths}
+                        theme="material_blue"
+                        .onChange="${this.handleChange.bind(this)}"
+                    ></lit-flatpickr>
+                    <terra-button
+                        shape="square-left"
+                        size="medium"
+                        class="date-picker__input_icon_button"
+                        @click=${() => this.flatpickrElement.open()}
+                        type="button"
+                    >
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke-width="1.5"
+                            stroke="currentColor"
+                            class="w-6 h-6"
+                        >
+                            <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5"
+                            />
+                        </svg>
+                    </terra-button>
+                </div>
+            </div>
+        `;
+  }
+};
+TerraDatePicker.styles = [component_styles_default, date_picker_styles_default];
+TerraDatePicker.dependencies = {
+  "terra-button": TerraButton
+};
+__decorateClass([
+  property()
+], TerraDatePicker.prototype, "id", 2);
+__decorateClass([
+  property({ type: Boolean })
+], TerraDatePicker.prototype, "range", 2);
+__decorateClass([
+  property({ attribute: "min-date" })
+], TerraDatePicker.prototype, "minDate", 2);
+__decorateClass([
+  property({ attribute: "max-date" })
+], TerraDatePicker.prototype, "maxDate", 2);
+__decorateClass([
+  property({ attribute: "start-date" })
+], TerraDatePicker.prototype, "startDate", 2);
+__decorateClass([
+  property({ attribute: "end-date" })
+], TerraDatePicker.prototype, "endDate", 2);
+__decorateClass([
+  property({ attribute: "default-date" })
+], TerraDatePicker.prototype, "defaultDate", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "allow-input" })
+], TerraDatePicker.prototype, "allowInput", 2);
+__decorateClass([
+  property({ attribute: "alt-format" })
+], TerraDatePicker.prototype, "altFormat", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "alt-input" })
+], TerraDatePicker.prototype, "altInput", 2);
+__decorateClass([
+  property({ attribute: "alt-input-class" })
+], TerraDatePicker.prototype, "altInputClass", 2);
+__decorateClass([
+  property({ attribute: "date-format" })
+], TerraDatePicker.prototype, "dateFormat", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "enable-time" })
+], TerraDatePicker.prototype, "enableTime", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "time-24hr" })
+], TerraDatePicker.prototype, "time24hr", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "week-numbers" })
+], TerraDatePicker.prototype, "weekNumbers", 2);
+__decorateClass([
+  property({ type: Boolean })
+], TerraDatePicker.prototype, "static", 2);
+__decorateClass([
+  property()
+], TerraDatePicker.prototype, "position", 2);
+__decorateClass([
+  property({ type: Number, attribute: "show-months" })
+], TerraDatePicker.prototype, "showMonths", 2);
+__decorateClass([
+  property({ attribute: "hide-label", type: Boolean })
+], TerraDatePicker.prototype, "hideLabel", 2);
+__decorateClass([
+  property()
+], TerraDatePicker.prototype, "label", 2);
+__decorateClass([
+  query("lit-flatpickr")
+], TerraDatePicker.prototype, "flatpickrElement", 2);
+
+export {
+  TerraDatePicker
+};

package/dist/chunks/chunk.UTXEG3QD.js

@@ -0,0 +1,214 @@
+import {
+  getIconLibrary,
+  unwatchIcon,
+  watchIcon
+} from "./chunk.CIFC3RF3.js";
+import {
+  icon_styles_default
+} from "./chunk.KUSRVQBO.js";
+import {
+  watch
+} from "./chunk.DTUHBE3U.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.TSIWRLNC.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet
+} from "./chunk.TVFCHGU3.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
+};