@nasa-terra/components 0.0.1 → 0.0.3

package/cdn/chunks/chunk.T322FDKI.js

@@ -1,300 +0,0 @@
-// src/components/variable-combobox/variable-combobox.styles.ts
-import { css } from "lit";
-var variable_combobox_styles_default = css`
-    :host {
-        --color-blue--400: #007acc;
-        --color-blue--500: #1c67e3;
-        --color-blue--600: #0b3d91;
-
-        --color-red--400: #f64137;
-        --color-red--500: #b60109;
-
-        --color-neutral--000: #ffffff;
-        --color-neutral--100: #f7f7f7;
-        --color-neutral--200: #d1d1d1;
-        --color-neutral--300: #b9b9bb;
-        --color-neutral--400: #959599;
-        --color-neutral--500: #767676;
-        --color-neutral--600: #58585b;
-        --color-neutral--700: #2e2e32;
-        --color-neutral--800: #1b1b1b;
-
-        --font-family--inter: Inter, sans-serif;
-        --font-family--public-sans: 'Public Sans', sans-serif;
-        --font-family--dm-mono: 'DM Mono', monospace;
-
-        --label-height: 1.8125rem;
-        --help-height: 1.8125rem;
-        --host-height: 5.8125rem;
-
-        block-size: var(--terra-block-size, 2.1875rem);
-        box-sizing: border-box;
-        color: var(--terra-color-neutral--700, var(--color-neutral--700));
-        contain: layout size style;
-        contain-intrinsic-size: var(--terra-inline-size, 100%)
-            calc(33vh + var(--terra-block-size, 2.1875rem));
-        display: block;
-        font-family: var(
-            --terra-font-family--public-sans,
-            var(--font-family--public-sans)
-        );
-        height: var(--terra-block-size, var(--host-height));
-        inline-size: var(--terra-inline-size, 100%);
-        position: relative;
-        z-index: 10;
-    }
-
-    :host([hide-help]) {
-        height: calc(
-            var(--terra-block-size, var(--host-height)) - var(--help-height)
-        );
-    }
-
-    :host([hide-label]) {
-        height: calc(
-            var(--terra-block-size, var(--host-height)) - var(--label-height)
-        );
-    }
-
-    :host([hide-help][hide-label]) {
-        height: calc(
-            var(--terra-block-size, var(--host-height)) - var(--help-height) - var(
-                    --label-height
-                )
-        );
-    }
-
-    * {
-        box-sizing: inherit;
-    }
-
-    .search-input-label {
-        font-family: var(--terra-font-family--inter, var(--font-family--inter));
-        font-weight: 600;
-        line-height: 1.1875rem;
-    }
-
-    .search-input-group {
-        block-size: 100%;
-        display: flex;
-        flex-wrap: wrap;
-    }
-
-    .combobox {
-        background-color: var(--terra-color-neutral--100, var(--color-neutral--100));
-        block-size: var(--terra-block-size, 2.1875rem);
-        border-block: 2px solid
-            var(--terra-color-neutral--200, var(--color-neutral--200));
-        border-inline-end: 0;
-        border-inline-start: 2px solid
-            var(--terra-color-neutral--200, var(--color-neutral--200));
-        color: currentColor;
-        flex: 1 1 auto;
-        font-size: 1rem;
-        padding-inline: 0.5rem;
-        transition:
-            background-color 0.2s ease,
-            border-color 0.2s ease;
-    }
-
-    .combobox::placeholder {
-        color: var(--terra-color-neutral--600, var(--color-neutral--600));
-    }
-
-    .combobox:focus {
-        background-color: var(--terra-color-neutral--000, var(--color-neutral--000));
-        border-color: var(--terra-color-neutral--400, var(--color-neutral--400));
-        outline: 0;
-    }
-
-    .combobox:focus + .combobox-button {
-        background-color: var(--terra-color-neutral--800, var(--color-neutral--800));
-        border-block-color: var(
-            --terra-color-neutral--400,
-            var(--color-neutral--400)
-        );
-        border-inline-end-color: var(
-            --terra-color-neutral--400,
-            var(--color-neutral--400)
-        );
-    }
-
-    .search-input-group:has(.combobox:not(:focus)) + .search-results[open] {
-        border-color: var(--terra-color-neutral--200, var(--color-neutral--200));
-    }
-
-    .combobox-button {
-        align-items: center;
-        background-color: var(--terra-color-neutral--700, var(--color-neutral--700));
-        block-size: var(--terra-block-size, 2.1875rem);
-        border-block: 2px solid
-            var(--terra-color-neutral--500, var(--color-neutral--500));
-        border-inline-end: 2px solid
-            var(--terra-color-neutral--500, var(--color-neutral--500));
-        border-inline-start: 0;
-        color: var(--terra-color-neutral--000, var(--color-neutral--000));
-        cursor: pointer;
-        display: flex;
-        flex: 0 0 auto;
-        font-size: 1rem;
-        justify-content: center;
-        margin-block: 0;
-        margin-inline: 0;
-        outline: 0;
-        padding-inline: 0.5rem;
-        transition:
-            background-color 0.2s ease,
-            border-color 0.2s ease;
-    }
-
-    .combobox-button[aria-expanded='true'] .chevron {
-        rotate: -0.5turn;
-    }
-
-    .button-icon {
-        height: 1rem;
-        width: 1rem;
-    }
-
-    .chevron {
-        transition: rotate 0.2s ease;
-        will-change: rotate;
-    }
-
-    .spinner {
-        transform-origin: center;
-        animation: spin 2s linear infinite;
-    }
-
-    .spinner circle {
-        stroke-linecap: round;
-        animation: vary-stroke 1.5s ease-in-out infinite;
-    }
-
-    .search-help {
-        bottom: 0;
-        color: var(--terra-color-neutral--600, var(--color-neutral--600));
-        flex: 1 1 100%;
-        font-size: 0.875rem;
-        margin-block: 0;
-        position: absolute;
-    }
-
-    .external-link {
-        fill: currentColor;
-        vertical-align: middle;
-    }
-
-    .search-results {
-        background-color: var(--terra-color-neutral--000, var(--color-neutral--000));
-        block-size: calc(33vh - var(--terra-block-size, 2.1875rem));
-        border-block-end: 2px solid transparent;
-        border-inline: 2px solid transparent;
-        contain: strict;
-        contain-intrinsic-size: var(--terra-inline-size, 100%)
-            calc(33vh - var(--terra-block-size, 2.1875rem));
-        content-visibility: hidden;
-        left: 0;
-        margin-block: 0;
-        margin-inline: 0;
-        max-height: 0;
-        opacity: 0;
-        overflow-y: auto;
-        overscroll-behavior: contain;
-        padding-block: 0.5rem;
-        padding-inline: 0.5rem;
-        position: absolute;
-        right: 0;
-        visibility: hidden;
-        transition:
-            background-color 0.2s ease,
-            border-color 0.2s ease;
-    }
-
-    .search-results[open] {
-        border-color: var(--terra-color-neutral--400, var(--color-neutral--400));
-        content-visibility: auto;
-        max-height: calc(33vh - var(--terra-block-size, 2.1875rem));
-        opacity: 1;
-        visibility: visible;
-    }
-
-    .search-results .updating {
-        font-size: 1.5rem;
-        padding-block: 4rem;
-        text-align: center;
-    }
-
-    .search-results .error {
-        color: var(--terra-color-red--500, var(--color-red--500));
-        font-family: var(--terra-font-family--dm-mono, var(--font-family--dm-mono));
-        padding-block: 2rem;
-    }
-
-    .listbox-option-group {
-        padding-inline: 0.5rem;
-        padding-block: 1rem 0.5rem;
-    }
-
-    .listbox-option-group:has(.clear-button) {
-        text-align: center;
-    }
-
-    .group-title {
-        font-family: var(--terra-font-family--inter, var(--font-family--inter));
-        font-weight: 700;
-        margin-block: 0;
-    }
-
-    .listbox-option {
-        cursor: pointer;
-        list-style: disc;
-        position: relative;
-    }
-
-    .listbox-option:hover::before,
-    .listbox-option[aria-selected='true']::before {
-        block-size: 1rem;
-        content: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' fill='%231c67e3' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16' cy='16' r='16'%3E%3C/circle%3E%3Cpath fill='%23ffffff' d='M8 16.956h12.604l-3.844 4.106 1.252 1.338L24 16l-5.988-6.4-1.252 1.338 3.844 4.106H8v1.912z' %3E%3C/path%3E%3C/svg%3E%0A");
-        inline-size: 1rem;
-        left: -2ch;
-        position: absolute;
-        top: 0.0625lh;
-    }
-
-    @media (prefers-reduced-motion) {
-        .button-icon {
-            transition: rotate 0s ease;
-        }
-
-        .search-results {
-            scroll-behavior: auto;
-        }
-    }
-
-    @keyframes spin {
-        to {
-            transform: rotate(1turn);
-        }
-    }
-
-    @keyframes vary-stroke {
-        0% {
-            stroke-dasharray: 0 150;
-            stroke-dashoffset: 0;
-        }
-        47.5% {
-            stroke-dasharray: 42 150;
-            stroke-dashoffset: -16;
-        }
-        95%,
-        100% {
-            stroke-dasharray: 42 150;
-            stroke-dashoffset: -59;
-        }
-    }
-`;
-
-export {
-  variable_combobox_styles_default
-};

package/cdn/chunks/chunk.UE4FYVUH.js

@@ -1,25 +0,0 @@
-import {
-  TerraIcon
-} from "./chunk.EMISRECR.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
-};

package/cdn/chunks/chunk.UU46CLE7.js

@@ -1,120 +0,0 @@
-import {
-  __spreadProps,
-  __spreadValues
-} from "./chunk.RYPAZDXE.js";
-
-// src/components/variable-combobox/lib.ts
-import { html } from "lit";
-import { repeat } from "lit/directives/repeat.js";
-function renderSearchResult(listItem, index) {
-  return html`<li class="listbox-option-group" data-tree-walker="filter_skip">
-        <span class="group-title" data-tree-walker="filter_skip"
-            >${listItem.collectionEntryId}</span
-        >
-        <ul data-tree-walker="filter_skip">
-            ${repeat(
-    listItem.variables,
-    (variable) => `${variable.collectionShortName}_${variable.collectionVersion}--${variable.longName}`,
-    (variable, subIndex) => {
-      return html`
-                        <li
-                            id="listbox-option-${index}.${subIndex}"
-                            role="option"
-                            class="listbox-option"
-                            data-long-name=${variable.longName}
-                            data-event-detail=${variable.eventDetail}
-                        >
-                            ${variable.longName} (${variable.units})
-                        </li>
-                    `;
-    }
-  )}
-        </ul>
-    </li>`;
-}
-function removeEmptyCollections(docs) {
-  const nonEmptyCollections = docs.filter((doc) => {
-    return !!doc.variables.length;
-  });
-  return nonEmptyCollections;
-}
-function groupDocsByCollection(docs) {
-  const groupedDocs = {};
-  for (const doc of docs) {
-    const key = `${doc.collectionShortName}_${doc.collectionVersion}`;
-    Array.isArray(groupedDocs[key]) ? groupedDocs[key].push(doc) : groupedDocs[key] = [doc];
-  }
-  return Object.entries(groupedDocs).map(([collectionEntryId, variables]) => {
-    return {
-      collectionEntryId,
-      variables
-    };
-  });
-}
-function cherryPickDocInfo(docs) {
-  return docs.map((doc) => {
-    const renderableData = {
-      collectionBeginningDateTime: doc["Collection.BeginDateTime"],
-      collectionEndingDateTime: doc["Collection.EndDateTime"],
-      collectionLongName: doc["Collection.LongName"],
-      collectionShortName: doc["Collection.ShortName"],
-      collectionVersion: doc["Collection.Version"],
-      name: doc["Variable.Name"],
-      longName: doc["Variable.LongName"],
-      standardName: doc["Variable.StandardName"],
-      units: doc["Variable.Units"],
-      entryId: `${doc["Collection.ShortName"]}_${doc["Collection.Version"]}_${doc["Variable.Name"]}`
-    };
-    const eventDetail = JSON.stringify({
-      collectionBeginningDateTime: doc["Collection.BeginDateTime"],
-      collectionEndingDateTime: doc["Collection.EndDateTime"],
-      collectionShortName: renderableData.collectionShortName,
-      collectionVersion: renderableData.collectionVersion,
-      name: renderableData.name,
-      longName: renderableData.longName,
-      standardName: renderableData.standardName,
-      entryId: renderableData.entryId,
-      units: doc["Variable.Units"]
-    });
-    return __spreadProps(__spreadValues({}, renderableData), { eventDetail });
-  });
-}
-function clearSelection(combobox, listbox) {
-  combobox.removeAttribute("aria-activedescendant");
-  listbox.querySelectorAll("[aria-selected]").forEach((option) => option.removeAttribute("aria-selected"));
-}
-function walkToOption(walker, combobox, direction = "next") {
-  const maybeCurrentElement = direction === "next" ? walker.nextNode() : walker.previousNode();
-  if (maybeCurrentElement === null || maybeCurrentElement === walker.root) {
-    direction === "next" ? walkToFirst(walker) : walkToLast(walker);
-  }
-  combobox.setAttribute(
-    "aria-activedescendant",
-    walker.currentNode.id
-  );
-  walker.currentNode.setAttribute("aria-selected", "true");
-  globalThis.setTimeout(() => {
-    ;
-    walker.currentNode.scrollIntoView({
-      behavior: "auto",
-      block: "nearest"
-    });
-  }, 100);
-}
-function walkToFirst(walker) {
-  walker.parentNode();
-  walker.firstChild();
-}
-function walkToLast(walker) {
-  walker.parentNode();
-  walker.lastChild();
-}
-
-export {
-  renderSearchResult,
-  removeEmptyCollections,
-  groupDocsByCollection,
-  cherryPickDocInfo,
-  clearSelection,
-  walkToOption
-};

package/cdn/chunks/chunk.WGFD2LHA.js

@@ -1,83 +0,0 @@
-import {
-  chip_styles_default
-} from "./chunk.N2DS7NLI.js";
-import {
-  TerraElement,
-  component_styles_default
-} from "./chunk.PJXIJK2G.js";
-import {
-  __decorateClass,
-  __privateAdd,
-  __privateGet
-} from "./chunk.RYPAZDXE.js";
-
-// src/components/chip/chip.component.ts
-import { property } from "lit/decorators.js";
-import { html } from "lit";
-import { classMap } from "lit/directives/class-map.js";
-var _handleRemoveClick;
-var TerraChip = class extends TerraElement {
-  constructor() {
-    super(...arguments);
-    this.size = "medium";
-    __privateAdd(this, _handleRemoveClick, () => {
-      this.emit("terra-remove");
-      this.remove();
-    });
-  }
-  render() {
-    return html`
-            <div
-                id="chip"
-                class="${classMap({
-      // Sizes
-      "chip--small": this.size === "small",
-      "chip--medium": this.size === "medium",
-      "chip--large": this.size === "large"
-    })}
-                chip"
-            >
-                <div
-                    class="${classMap({
-      // Sizes
-      "chip-content--small": this.size === "small",
-      "chip-content--medium": this.size === "medium",
-      "chip-content--large": this.size === "large"
-    })}
-                    chip-content"
-                >
-                    <slot part="content" class="tag__content"></slot>
-                </div>
-                <button class="chip-close" @click="${__privateGet(this, _handleRemoveClick)}">
-                    <svg
-                        class="${classMap({
-      // Sizes
-      "chip-svg--small": this.size === "small",
-      "chip-svg--medium": this.size === "medium",
-      "chip-svg--large": this.size === "large"
-    })}
-                        chip-svg"
-                        focusable="false"
-                        viewBox="0 0 500 500"
-                        aria-hidden="true"
-                    >
-                        <path
-                            d="M 227 56.036 H 265 V 227.037 H 436 V 265.036 H 265 V 436.036 H 227 V 265.036 H 56 V 227.037 H 227 Z"
-                            style="fill: #909090; paint-order: fill; fill-rule: nonzero; stroke-width: 0px; transform-origin: 246px 246.036px;"
-                            transform="matrix(0.707107007504, 0.707107007504, -0.707107007504, 0.707107007504, -9.98393e-7, -0.000026419743)"
-                        ></path>
-                    </svg>
-                </button>
-            </div>
-        `;
-  }
-};
-_handleRemoveClick = new WeakMap();
-TerraChip.styles = [component_styles_default, chip_styles_default];
-__decorateClass([
-  property({ reflect: true })
-], TerraChip.prototype, "size", 2);
-
-export {
-  TerraChip
-};