@nasa-terra/components 0.0.16 → 0.0.19

package/dist/chunks/chunk.Q44TP6D4.js

@@ -1,477 +0,0 @@
-import {
-  combobox_styles_default
-} from "./chunk.7WL3WWGJ.js";
-import {
-  clearSelection,
-  walkToOption
-} from "./chunk.LMGJJIIS.js";
-import {
-  watch
-} from "./chunk.SK7IZCKP.js";
-import {
-  TerraElement,
-  component_styles_default
-} from "./chunk.EPQIDDJG.js";
-import {
-  __decorateClass,
-  __privateAdd,
-  __privateGet,
-  __privateSet,
-  __spreadProps,
-  __spreadValues
-} from "./chunk.TVFCHGU3.js";
-
-// src/components/combobox/combobox.component.ts
-import Fuse from "fuse.js";
-import { LitElement, html, nothing } from "lit";
-import { property, state } from "lit/decorators.js";
-import { ref } from "lit/directives/ref.js";
-import { repeat } from "lit/directives/repeat.js";
-import { cache } from "lit/directives/cache.js";
-import { choose } from "lit/directives/choose.js";
-import { map } from "lit/directives/map.js";
-var _combobox, _listbox, _searchEngine, _walker, _renderListItem, _renderGroupListItem, _renderError, _renderLoading, _dispatchChange, _handleButtonClick, _handleComboboxChange, _handleOptionClick, _handleKeydown, _manageListboxVisibility, _selectOption;
-var _TerraCombobox = class _TerraCombobox extends TerraElement {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _combobox, null);
-    __privateAdd(this, _listbox, null);
-    __privateAdd(this, _searchEngine, null);
-    __privateAdd(this, _walker, null);
-    this.label = "Search for Items";
-    this.name = "Item";
-    this.hideHelp = false;
-    this.hideLabel = false;
-    this.status = "INITIAL";
-    this.content = {
-      type: "GroupedListItem" /* GroupedListItem */,
-      data: []
-    };
-    this.isExpanded = false;
-    this.query = _TerraCombobox.initialQuery;
-    this.searchResults = [];
-    __privateAdd(this, _renderListItem, (listItem, index) => {
-      return html`
-            <li
-                id="listbox-option-${index}"
-                role="option"
-                class="listbox-option"
-                data-name=${listItem.name}
-                data-event-detail=${JSON.stringify({
-        name: listItem.name,
-        value: listItem.value
-      })}
-            >
-                ${listItem.name}
-            </li>
-        `;
-    });
-    __privateAdd(this, _renderGroupListItem, (groupListItem, index) => {
-      return html`
-            <li class="listbox-option-group" data-tree-walker="filter_skip">
-                <span class="group-title" data-tree-walker="filter_skip"
-                    >${groupListItem.name}</span
-                >
-                <ul data-tree-walker="filter_skip">
-                    ${repeat(
-        groupListItem.items,
-        (item) => `${item.name}_${item.value}`,
-        (item, subIndex) => {
-          return html`
-                                <li
-                                    id="listbox-option-${index}.${subIndex}"
-                                    role="option"
-                                    class="listbox-option"
-                                    data-name=${item.title ? item.title : item.name}
-                                    data-event-detail=${JSON.stringify({
-            name: item.name,
-            value: item.value
-          })}
-                                >
-                                    ${item.title ? item.title : item.name}
-                                </li>
-                            `;
-        }
-      )}
-                </ul>
-            </li>
-        `;
-    });
-    __privateAdd(this, _renderError, () => {
-      return html`
-            <li class="error listbox-option-group">${this.content.data}</li>
-        `;
-    });
-    __privateAdd(this, _renderLoading, () => {
-      return html`
-            <li class="skeleton listbox-option-group">
-                <span class="skeleton-title"></span>
-                <ul>
-                    <li class="listbox-option"></li>
-                </ul>
-            </li>
-            <li class="skeleton listbox-option-group">
-                <span class="skeleton-title"></span>
-                <ul>
-                    <li class="listbox-option"></li>
-                </ul>
-            </li>
-            <li class="skeleton listbox-option-group">
-                <span class="skeleton-title"></span>
-                <ul>
-                    <li class="listbox-option"></li>
-                </ul>
-            </li>
-        `;
-    });
-    __privateAdd(this, _dispatchChange, (stringifiedData) => {
-      this.emit("terra-combobox-change", { detail: JSON.parse(stringifiedData) });
-    });
-    __privateAdd(this, _handleButtonClick, () => {
-      var _a;
-      this.isExpanded = !this.isExpanded;
-      (_a = __privateGet(this, _combobox)) == null ? void 0 : _a.focus();
-    });
-    __privateAdd(this, _handleComboboxChange, (event) => {
-      var _a;
-      const target = event.target;
-      this.query = target.value;
-      if (target.value) {
-        this.isExpanded = true;
-      }
-      this.searchResults = (_a = __privateGet(this, _searchEngine)) == null ? void 0 : _a.search(target.value).map(({ item }) => item);
-    });
-    __privateAdd(this, _handleOptionClick, (event) => {
-      const path = event.composedPath();
-      const [target] = path.filter(
-        (eventTarget) => eventTarget.role === "option"
-      );
-      if (!target)
-        return;
-      __privateGet(this, _selectOption).call(this, target);
-    });
-    __privateAdd(this, _handleKeydown, (event) => {
-      var _a;
-      switch (event.key) {
-        case "ArrowDown": {
-          clearSelection(
-            __privateGet(this, _combobox),
-            __privateGet(this, _listbox)
-          );
-          if (!this.isExpanded) {
-            this.isExpanded = true;
-          }
-          if (event.altKey) {
-            break;
-          }
-          walkToOption(
-            __privateGet(this, _walker),
-            __privateGet(this, _combobox),
-            "next"
-          );
-          break;
-        }
-        case "ArrowUp": {
-          clearSelection(
-            __privateGet(this, _combobox),
-            __privateGet(this, _listbox)
-          );
-          if (!this.isExpanded) {
-            this.isExpanded = true;
-          }
-          walkToOption(
-            __privateGet(this, _walker),
-            __privateGet(this, _combobox),
-            "previous"
-          );
-          break;
-        }
-        case "Enter": {
-          __privateGet(this, _selectOption).call(this, (_a = __privateGet(this, _walker)) == null ? void 0 : _a.currentNode);
-          break;
-        }
-        case "Escape": {
-          clearSelection(
-            __privateGet(this, _combobox),
-            __privateGet(this, _listbox)
-          );
-          if (this.isExpanded) {
-            this.isExpanded = false;
-          } else {
-            this.query = _TerraCombobox.initialQuery;
-          }
-          break;
-        }
-        default: {
-          break;
-        }
-      }
-    });
-    __privateAdd(this, _manageListboxVisibility, (event) => {
-      const path = event.composedPath();
-      const containedThis = path.some(
-        (eventTarget) => eventTarget.localName === _TerraCombobox.tagName
-      );
-      if (!containedThis) {
-        this.isExpanded = false;
-      }
-    });
-    __privateAdd(this, _selectOption, (option) => {
-      const { name, eventDetail } = option.dataset;
-      this.query = `${name}`;
-      __privateGet(this, _dispatchChange).call(this, eventDetail);
-      this.isExpanded = false;
-      clearSelection(
-        __privateGet(this, _combobox),
-        __privateGet(this, _listbox)
-      );
-    });
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    globalThis.addEventListener("click", __privateGet(this, _manageListboxVisibility));
-    const list = this.content.type === "GroupedListItem" || this.content.type === "ListItem" ? this.content.data : [];
-    __privateSet(this, _searchEngine, new Fuse(list, {
-      //* @see https://www.fusejs.io/examples.html#nested-search
-      findAllMatches: true,
-      keys: [
-        "name",
-        // to search in the name of the GroupedListItem
-        "items.name",
-        // to search in the name of each ListItem
-        "items.title",
-        // to search in the title of each ListItem
-        "items.value"
-        // to search in the value of each ListItem
-      ],
-      useExtendedSearch: true
-    }));
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    globalThis.addEventListener("click", __privateGet(this, _manageListboxVisibility));
-  }
-  contentChanged(_oldValue, newValue) {
-    const list = newValue.type === "GroupedListItem" || newValue.type === "ListItem" ? newValue.data : [];
-    __privateSet(this, _searchEngine, new Fuse(list, {
-      //* @see https://www.fusejs.io/examples.html#nested-search
-      findAllMatches: true,
-      keys: [
-        "name",
-        // to search in the name of the GroupedListItem
-        "items.name",
-        // to search in the name of each ListItem
-        "items.title",
-        // to search in the title of each ListItem
-        "items.value"
-        // to search in the value of each ListItem
-      ],
-      useExtendedSearch: true
-    }));
-  }
-  render() {
-    var _a;
-    return html`<search part="base" title="Search through the list.">
-            <label for="combobox" class=${this.hideLabel ? "sr-only" : "input-label"}
-                >${this.label}</label
-            >
-            <div class="search-input-group">
-                <input
-                    ${ref((el) => {
-      var _a2;
-      if (el) {
-        (_a2 = __privateGet(this, _combobox)) != null ? _a2 : __privateSet(this, _combobox, el);
-      }
-    })}
-                    aria-autocomplete="list"
-                    aria-controls="listbox"
-                    aria-expanded=${this.isExpanded}
-                    class="combobox"
-                    id="combobox"
-                    part="combobox"
-                    role="combobox"
-                    type="text"
-                    .placeholder=${(_a = this.placeholder) != null ? _a : `${this.label}\u2026`}
-                    .value=${this.query}
-                    @input=${__privateGet(this, _handleComboboxChange)}
-                    @keydown=${__privateGet(this, _handleKeydown)}
-                />
-                <terra-button
-                    shape="square-left"
-                    aria-controls="listbox"
-                    aria-expanded=${this.isExpanded}
-                    aria-label="List of Searchable Items"
-                    class="combobox-button"
-                    id="combobox-button"
-                    part="button"
-                    tabindex="-1"
-                    type="button"
-                    @click=${__privateGet(this, _handleButtonClick)}
-                >
-                    ${["COMPLETE", "ERROR", "INITIAL"].includes(this.status) ? html`<svg
-                              aria-hidden="true"
-                              class="button-icon chevron"
-                              focusable="false"
-                              viewBox="0 0 400 400"
-                              xmlns="http://www.w3.org/2000/svg"
-                              fill="currentColor"
-                          >
-                              <path
-                                  d="m4.2 122.2 195.1 195.1 196.5-196.6-37.9-38-157.8 157.8-156.8-156.8z"
-                              ></path>
-                          </svg> ` : html`<svg
-                              class="button-icon spinner"
-                              stroke="currentColor"
-                              viewBox="0 0 24 24"
-                              xmlns="http://www.w3.org/2000/svg"
-                          >
-                              <circle
-                                  cx="12"
-                                  cy="12"
-                                  r="9.5"
-                                  fill="none"
-                                  stroke-width="3"
-                              ></circle>
-                          </svg>`}
-                </terra-button>
-
-                ${this.hideHelp ? nothing : html`<p class="search-help">
-                          See
-                          <a
-                              href="https://www.fusejs.io/examples.html#extended-search"
-                              rel="noopener noreferrer"
-                              target="_blank"
-                              >extended search syntax
-                              <svg
-                                  aria-hidden="true"
-                                  class="external-link"
-                                  xmlns="http://www.w3.org/2000/svg"
-                                  width="14"
-                                  height="14"
-                                  viewBox="0 0 24 24"
-                              >
-                                  <path
-                                      d="M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
-                                  /></svg></a
-                          >.
-                      </p>`}
-            </div>
-
-            <ul
-                ${ref((el) => {
-      var _a2;
-      if (el) {
-        (_a2 = __privateGet(this, _listbox)) != null ? _a2 : __privateSet(this, _listbox, el);
-        __privateSet(this, _walker, document.createTreeWalker(
-          el,
-          NodeFilter.SHOW_ELEMENT,
-          (node) => {
-            return node.dataset.treeWalker === "filter_skip" ? NodeFilter.FILTER_SKIP : NodeFilter.FILTER_ACCEPT;
-          }
-        ));
-      }
-    })}
-                ?inert=${!this.isExpanded}
-                ?open=${this.isExpanded}
-                @click=${__privateGet(this, _handleOptionClick)}
-                aria-label=${this.query ? `${this.name} Matching ${this.query}` : this.name}
-                id="listbox"
-                part="listbox"
-                role="listbox"
-                class="search-results"
-            >
-                ${choose(this.status, [
-      [
-        "INITIAL",
-        () => {
-          return nothing;
-        }
-      ],
-      ["PENDING", __privateGet(this, _renderLoading)],
-      [
-        "COMPLETE",
-        () => {
-          return this.content.type === "ListItem" /* ListItem */ ? cache(
-            this.query === _TerraCombobox.initialQuery ? map(
-              this.content.data,
-              __privateGet(this, _renderListItem)
-            ) : map(
-              this.searchResults,
-              __privateGet(this, _renderListItem)
-            )
-          ) : this.content.type === "GroupedListItem" /* GroupedListItem */ ? cache(
-            this.query === _TerraCombobox.initialQuery ? map(
-              this.content.data,
-              __privateGet(this, _renderGroupListItem)
-            ) : map(
-              this.searchResults,
-              __privateGet(this, _renderGroupListItem)
-            )
-          ) : nothing;
-        }
-      ],
-      ["ERROR", __privateGet(this, _renderError)]
-    ])}
-            </ul>
-        </search>`;
-  }
-};
-_combobox = new WeakMap();
-_listbox = new WeakMap();
-_searchEngine = new WeakMap();
-_walker = new WeakMap();
-_renderListItem = new WeakMap();
-_renderGroupListItem = new WeakMap();
-_renderError = new WeakMap();
-_renderLoading = new WeakMap();
-_dispatchChange = new WeakMap();
-_handleButtonClick = new WeakMap();
-_handleComboboxChange = new WeakMap();
-_handleOptionClick = new WeakMap();
-_handleKeydown = new WeakMap();
-_manageListboxVisibility = new WeakMap();
-_selectOption = new WeakMap();
-_TerraCombobox.styles = [component_styles_default, combobox_styles_default];
-_TerraCombobox.shadowRootOptions = __spreadProps(__spreadValues({}, LitElement.shadowRootOptions), {
-  delegatesFocus: true
-});
-_TerraCombobox.tagName = "terra-combobox";
-_TerraCombobox.initialQuery = "";
-__decorateClass([
-  property()
-], _TerraCombobox.prototype, "label", 2);
-__decorateClass([
-  property()
-], _TerraCombobox.prototype, "name", 2);
-__decorateClass([
-  property()
-], _TerraCombobox.prototype, "placeholder", 2);
-__decorateClass([
-  property({ attribute: "hide-help", type: Boolean })
-], _TerraCombobox.prototype, "hideHelp", 2);
-__decorateClass([
-  property({ attribute: "hide-label", type: Boolean })
-], _TerraCombobox.prototype, "hideLabel", 2);
-__decorateClass([
-  property()
-], _TerraCombobox.prototype, "status", 2);
-__decorateClass([
-  property({ type: Object })
-], _TerraCombobox.prototype, "content", 2);
-__decorateClass([
-  state()
-], _TerraCombobox.prototype, "isExpanded", 2);
-__decorateClass([
-  state()
-], _TerraCombobox.prototype, "query", 2);
-__decorateClass([
-  state()
-], _TerraCombobox.prototype, "searchResults", 2);
-__decorateClass([
-  watch("content")
-], _TerraCombobox.prototype, "contentChanged", 1);
-var TerraCombobox = _TerraCombobox;
-
-export {
-  TerraCombobox
-};

package/dist/chunks/chunk.Q67RNINH.js

@@ -1,180 +0,0 @@
-import {
-  isValidDate
-} from "./chunk.OIDMX5LU.js";
-import {
-  date_range_slider_styles_default
-} from "./chunk.62YHGVQN.js";
-import {
-  mergeTooltips
-} from "./chunk.KW4TJM4C.js";
-import {
-  watch
-} from "./chunk.SK7IZCKP.js";
-import {
-  TerraElement,
-  component_styles_default
-} from "./chunk.7QKG7IRI.js";
-import {
-  __decorateClass
-} from "./chunk.TVFCHGU3.js";
-
-// src/components/date-range-slider/date-range-slider.component.ts
-import { property, query } from "lit/decorators.js";
-import { html } from "lit";
-import noUiSlider, {
-  PipsMode
-} from "nouislider";
-import { format } from "date-fns";
-var TerraDateRangeSlider = class extends TerraElement {
-  constructor() {
-    super(...arguments);
-    this.timeScale = "daily";
-    this.disabled = false;
-    this.hasPips = true;
-  }
-  updateSlider() {
-    this.renderSlider();
-  }
-  disabledChanged() {
-    var _a, _b, _c, _d;
-    this.disabled ? (_b = (_a = this.slider) == null ? void 0 : _a.noUiSlider) == null ? void 0 : _b.disable() : (_d = (_c = this.slider) == null ? void 0 : _c.noUiSlider) == null ? void 0 : _d.enable();
-  }
-  firstUpdated() {
-    this.renderSlider();
-  }
-  renderSlider() {
-    var _a;
-    if (!this.slider) {
-      return;
-    }
-    (_a = this.slider.noUiSlider) == null ? void 0 : _a.destroy();
-    if (!isValidDate(this.minDate) || !isValidDate(this.maxDate)) {
-      this.renderEmptySlider();
-      this.minDate && !isValidDate(this.minDate) && console.error("Invalid min date provided");
-      this.maxDate && !isValidDate(this.maxDate) && console.error("Invalid max date provided");
-      return;
-    }
-    const minDate = new Date(this.minDate);
-    const maxDate = new Date(this.maxDate);
-    const startDate = new Date(
-      isValidDate(this.startDate) ? this.startDate : this.minDate
-    );
-    const endDate = new Date(
-      isValidDate(this.endDate) ? this.endDate : this.maxDate
-    );
-    minDate.setUTCHours(0, 0, 0, 0);
-    startDate.setUTCHours(0, 0, 0, 0);
-    maxDate.setUTCHours(23, 59, 59, 999);
-    endDate.setUTCHours(23, 59, 59, 999);
-    const sliderOptions = {
-      range: {
-        // convert to milliseconds to define a range
-        min: minDate.getTime(),
-        max: maxDate.getTime()
-      },
-      behaviour: "drag",
-      step: this._getStep(),
-      start: [startDate.getTime(), endDate.getTime()],
-      // defaults to either the given start/end dates or the full date range (min/max date)
-      tooltips: [true, true],
-      // for each handle, choose whether to show a tooltip
-      connect: true,
-      // whether to connect the handles with a colorized bar
-      pips: {
-        mode: PipsMode.Range,
-        density: -1,
-        format: this._getSliderFormatter()
-      },
-      format: this._getSliderFormatter()
-    };
-    noUiSlider.create(this.slider, sliderOptions);
-    mergeTooltips(this.slider);
-    this.slider.noUiSlider.on("change", (values) => {
-      this.emit("terra-date-range-change", {
-        detail: {
-          startDate: this._formatDate(values[0]),
-          endDate: this._formatDate(values[1])
-        }
-      });
-    });
-  }
-  renderEmptySlider() {
-    noUiSlider.create(this.slider, {
-      start: [0, 0],
-      range: {
-        min: 0,
-        max: 0
-      }
-    });
-  }
-  _getStep() {
-    const oneMinuteMillis = 60 * 1e3;
-    const oneHourMillis = 60 * oneMinuteMillis;
-    const oneDayMillis = 24 * oneHourMillis;
-    switch (this.timeScale) {
-      case "half-hourly":
-        return 30 * oneMinuteMillis;
-      case "hourly":
-        return oneHourMillis;
-      default:
-        return oneDayMillis;
-    }
-  }
-  _getSliderFormatter() {
-    return {
-      to: (value) => {
-        return this._formatDate(value);
-      },
-      from: (value) => {
-        return Number(value);
-      }
-    };
-  }
-  _formatDate(date) {
-    const dateFormat = this.timeScale === "daily" ? "yyyy-MM-dd" : "yyyy-MM-dd HH:mm";
-    return format(new Date(date).toUTCString(), dateFormat);
-  }
-  render() {
-    const containerClass = "container" + this.hasPips ? " hasPips" : "";
-    return html`
-            <div class="${containerClass}">
-                <div part="slider"></div>
-            </div>
-        `;
-  }
-};
-TerraDateRangeSlider.styles = [component_styles_default, date_range_slider_styles_default];
-__decorateClass([
-  query('[part~="slider"]')
-], TerraDateRangeSlider.prototype, "slider", 2);
-__decorateClass([
-  property({ attribute: "time-scale" })
-], TerraDateRangeSlider.prototype, "timeScale", 2);
-__decorateClass([
-  property({ attribute: "min-date" })
-], TerraDateRangeSlider.prototype, "minDate", 2);
-__decorateClass([
-  property({ attribute: "max-date" })
-], TerraDateRangeSlider.prototype, "maxDate", 2);
-__decorateClass([
-  property({ attribute: "start-date" })
-], TerraDateRangeSlider.prototype, "startDate", 2);
-__decorateClass([
-  property({ attribute: "end-date" })
-], TerraDateRangeSlider.prototype, "endDate", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], TerraDateRangeSlider.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, attribute: "has-pips" })
-], TerraDateRangeSlider.prototype, "hasPips", 2);
-__decorateClass([
-  watch(["startDate", "endDate", "minDate", "maxDate"])
-], TerraDateRangeSlider.prototype, "updateSlider", 1);
-__decorateClass([
-  watch("disabled")
-], TerraDateRangeSlider.prototype, "disabledChanged", 1);
-
-export {
-  TerraDateRangeSlider
-};

package/dist/chunks/chunk.QLUHMJKU.js

@@ -1,53 +0,0 @@
-import {
-  getRandomIntInclusive
-} from "./chunk.7PAVW6KC.js";
-import {
-  skeleton_styles_default
-} from "./chunk.FBOXM56P.js";
-import {
-  TerraElement,
-  component_styles_default
-} from "./chunk.7QKG7IRI.js";
-import {
-  __decorateClass
-} from "./chunk.TVFCHGU3.js";
-
-// src/components/skeleton/skeleton.component.ts
-import { html } from "lit";
-import { property } from "lit/decorators.js";
-import { SlSkeleton } from "@shoelace-style/shoelace";
-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`<sl-skeleton
-                            effect=${this.effect}
-                            style=${this.variableWidths ? `width: ${getRandomIntInclusive(60, 100)}%` : ""}
-                        ></sl-skeleton>`
-    )}
-        `;
-  }
-};
-TerraSkeleton.styles = [component_styles_default, skeleton_styles_default];
-TerraSkeleton.dependencies = {
-  "sl-skeleton": SlSkeleton
-};
-__decorateClass([
-  property()
-], TerraSkeleton.prototype, "rows", 2);
-__decorateClass([
-  property()
-], TerraSkeleton.prototype, "effect", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], TerraSkeleton.prototype, "variableWidths", 2);
-
-export {
-  TerraSkeleton
-};