@nasa-terra/components 0.0.1 → 0.0.2

package/cdn/chunks/chunk.I2NEFB34.js

@@ -1,99 +0,0 @@
-// 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/cdn/chunks/chunk.I32QCWMN.js

@@ -1,21 +0,0 @@
-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
-};

package/cdn/chunks/chunk.IBEKZVOY.js

@@ -1,80 +0,0 @@
-// src/components/map/map.styles.ts
-import { css } from "lit";
-var map_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;
-
-        display: block;
-        padding: 16px;
-        background: white;
-        border: solid 1px var(--terra-color-neutral--200, var(--color-neutral--200));
-    }
-
-    .map {
-        aspect-ratio: 4 / 3;
-    }
-
-    .leaflet-mouse-position-container {
-        color: #464646;
-        padding: 5px;
-        background-color: white;
-    }
-
-    .leaflet-mouse-position-text {
-        margin: 0;
-        font-weight: 700;
-    }
-
-    .form-control {
-        display: block;
-        border-radius: 0;
-        width: 100%;
-        height: 36px;
-        padding: 6px 12px;
-        font-size: 14px;
-        line-height: 1.42857143;
-        color: #555555;
-        background-color: #fff;
-        background-image: none;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        outline: 0 none;
-        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-        -webkit-transition:
-            border-color ease-in-out 0.15s,
-            box-shadow ease-in-out 0.15s;
-        transition:
-            border-color ease-in-out 0.15s,
-            box-shadow ease-in-out 0.15s;
-    }
-
-    .form-control:focus {
-        border: 1px solid var(--terra-color-blue--600, var(--color-blue--600));
-    }
-
-    .map__select {
-        box-shadow: none;
-        border-radius: 0 !important;
-        margin-bottom: 1rem;
-    }
-`;
-
-export {
-  map_styles_default
-};

package/cdn/chunks/chunk.IP3XWLQI.js

@@ -1,11 +0,0 @@
-import {
-  TerraSpatialPicker
-} from "./chunk.Y3WAKQQ3.js";
-
-// src/components/spatial-picker/spatial-picker.ts
-var spatial_picker_default = TerraSpatialPicker;
-TerraSpatialPicker.define("terra-spatial-picker");
-
-export {
-  spatial_picker_default
-};

package/cdn/chunks/chunk.JFU3ZCDL.js

@@ -1,359 +0,0 @@
-// src/components/combobox/combobox.styles.ts
-import { css } from "lit";
-var 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;
-    }
-
-    :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--700, var(--color-neutral--700));
-        border-inline-end: 2px solid
-            var(--terra-color-neutral--700, var(--color-neutral--700));
-        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: 0px;
-        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;
-        justify-content: center;
-        display: flex;
-    }
-
-    .listbox-option-group {
-        padding-block: 0.5rem 0rem;
-    }
-
-    .group-title {
-        padding-inline: 0.5rem;
-        font-family: var(--terra-font-family--inter, var(--font-family--inter));
-        color: var(--terra-color-gray-500, var(--color-neutral--500));
-        font-weight: 500;
-        margin-block: 0;
-    }
-
-    .listbox-option-group ul {
-        padding-left: 0px;
-    }
-
-    .listbox-option {
-        cursor: pointer;
-        list-style: none;
-        position: relative;
-        padding-left: 2rem;
-    }
-
-    .listbox-option:hover,
-    .listbox-option[aria-selected='true'] {
-        background-color: var(--terra-color-gray-200, var(--color-neutral--200));
-        transition: background-color 0.2s ease;
-    }
-
-    @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;
-        }
-    }
-
-    /* General reset for skeleton elements */
-    .skeleton,
-    .skeleton * {
-        margin: 0;
-        padding: 0;
-        list-style: none;
-        box-sizing: border-box;
-    }
-
-    /* Styling for the skeleton groups */
-    .skeleton.listbox-option-group {
-        padding: 0.25rem;
-        margin: 0.5rem 0;
-        background: var(
-            --terra-color-neutral--100,
-            var(--color-neutral--100)
-        ); /* Light background for the group */
-    }
-
-    /* Styling for the title in each group */
-    .skeleton-title {
-        display: flex;
-        height: 1.25rem;
-        width: 80%; /* Slightly longer than before */
-        background-color: var(--terra-color-neutral--100, var(--color-neutral--100));
-        margin-bottom: 10px;
-    }
-
-    /* Styling for each option inside the group */
-    .skeleton .listbox-option {
-        height: 1rem;
-        width: 60%; /* Shorter width to differentiate from title */
-        background-color: var(--terra-color-neutral--200, var(--color-neutral--200));
-        margin-top: 5px;
-        margin-left: 1.5rem;
-    }
-
-    /* Keyframes for the animation */
-    @keyframes pulse {
-        0%,
-        100% {
-            background-color: var(
-                --terra-color-neutral--200,
-                var(--color-neutral--200)
-            );
-        }
-        50% {
-            background-color: var(
-                --terra-color-neutral--100,
-                var(--color-neutral--100)
-            );
-        }
-    }
-
-    /* Applying the animation to simulate loading */
-    .skeleton-title,
-    .skeleton .listbox-option {
-        animation: pulse 2s infinite ease-in-out;
-    }
-`;
-
-export {
-  combobox_styles_default
-};