@nasa-terra/components 0.0.188 → 0.0.191

package/dist/chunks/chunk.C7ILTTDA.js

@@ -1,495 +0,0 @@
-import{css as o}from"lit";var a=o`
-    :host {
-        display: block;
-        padding: 16px;
-        background: var(--terra-map-background-color);
-        border: 1px solid var(--terra-map-border-color);
-    }
-
-    :root,
-    :host {
-        --ol-background-color: white;
-        --ol-accent-background-color: #f5f5f5;
-        --ol-subtle-background-color: rgba(128, 128, 128, 0.25);
-        --ol-partial-background-color: rgba(255, 255, 255, 0.75);
-        --ol-foreground-color: #333333;
-        --ol-subtle-foreground-color: #666666;
-        --ol-brand-color: #00aaff;
-    }
-
-    [part='map'] {
-        position: relative;
-    }
-
-    #mouse-info {
-        font: 16px var(--terra-font-family--public-sans);
-        font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
-        font-size: 0.75rem;
-        line-height: 1.5;
-        position: absolute;
-        bottom: 20px;
-        left: 10px;
-        border-radius: 4px;
-        padding: 5px;
-        background-color: var(--terra-input-background-color);
-        box-shadow: none;
-        border: 2px solid rgba(0, 0, 0, 0.2);
-        background-clip: padding-box;
-        z-index: 2;
-    }
-
-    .ol-tooltip {
-        position: absolute;
-        background: rgba(0, 0, 0, 0.75);
-        color: white;
-        padding: 6px 8px;
-        border-radius: 4px;
-        font-size: 12px;
-        pointer-events: none;
-        white-space: nowrap;
-    }
-
-    .draw-toolbar {
-        display: flex;
-        flex-direction: column;
-        position: absolute;
-        top: 4em;
-        left: 0.5em;
-    }
-
-    .draw-toolbar button {
-        width: 32px;
-        height: 32px;
-        border: none;
-        background: white;
-        cursor: pointer;
-    }
-
-    .draw-toolbar button:hover {
-        background: #f0f0f0;
-    }
-
-    .ol-box {
-        box-sizing: border-box;
-        border-radius: 2px;
-        border: 1.5px solid var(--ol-background-color);
-        background-color: var(--ol-partial-background-color);
-    }
-
-    .ol-mouse-position {
-        top: 8px;
-        right: 8px;
-        position: absolute;
-    }
-
-    .ol-scale-line {
-        background: var(--ol-partial-background-color);
-        border-radius: 4px;
-        bottom: 8px;
-        left: 8px;
-        padding: 2px;
-        position: absolute;
-    }
-
-    .ol-scale-line-inner {
-        border: 1px solid var(--ol-subtle-foreground-color);
-        border-top: none;
-        color: var(--ol-foreground-color);
-        font-size: 10px;
-        text-align: center;
-        margin: 1px;
-        will-change: contents, width;
-        transition: all 0.25s;
-    }
-
-    .ol-scale-bar {
-        position: absolute;
-        bottom: 8px;
-        left: 8px;
-    }
-
-    .ol-scale-bar-inner {
-        display: flex;
-    }
-
-    .ol-scale-step-marker {
-        width: 1px;
-        height: 15px;
-        background-color: var(--ol-foreground-color);
-        float: right;
-        z-index: 10;
-    }
-
-    .ol-scale-step-text {
-        position: absolute;
-        bottom: -5px;
-        font-size: 10px;
-        z-index: 11;
-        color: var(--ol-foreground-color);
-        text-shadow:
-            -1.5px 0 var(--ol-partial-background-color),
-            0 1.5px var(--ol-partial-background-color),
-            1.5px 0 var(--ol-partial-background-color),
-            0 -1.5px var(--ol-partial-background-color);
-    }
-
-    .ol-scale-text {
-        position: absolute;
-        font-size: 12px;
-        text-align: center;
-        bottom: 25px;
-        color: var(--ol-foreground-color);
-        text-shadow:
-            -1.5px 0 var(--ol-partial-background-color),
-            0 1.5px var(--ol-partial-background-color),
-            1.5px 0 var(--ol-partial-background-color),
-            0 -1.5px var(--ol-partial-background-color);
-    }
-
-    .ol-scale-singlebar {
-        position: relative;
-        height: 10px;
-        z-index: 9;
-        box-sizing: border-box;
-        border: 1px solid var(--ol-foreground-color);
-    }
-
-    .ol-scale-singlebar-even {
-        background-color: var(--ol-subtle-foreground-color);
-    }
-
-    .ol-scale-singlebar-odd {
-        background-color: var(--ol-background-color);
-    }
-
-    .ol-unsupported {
-        display: none;
-    }
-
-    .ol-viewport,
-    .ol-unselectable {
-        -webkit-touch-callout: none;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        user-select: none;
-        -webkit-tap-highlight-color: transparent;
-    }
-
-    .ol-viewport canvas {
-        all: unset;
-        overflow: hidden;
-    }
-
-    .ol-viewport {
-        touch-action: pan-x pan-y;
-    }
-
-    .ol-selectable {
-        -webkit-touch-callout: default;
-        -webkit-user-select: text;
-        -moz-user-select: text;
-        user-select: text;
-    }
-
-    .ol-grabbing {
-        cursor: -webkit-grabbing;
-        cursor: -moz-grabbing;
-        cursor: grabbing;
-    }
-
-    .ol-grab {
-        cursor: move;
-        cursor: -webkit-grab;
-        cursor: -moz-grab;
-        cursor: grab;
-    }
-
-    .ol-control {
-        position: absolute;
-        background-color: var(--ol-subtle-background-color);
-        border-radius: 4px;
-    }
-
-    .ol-zoom {
-        top: 0.5em;
-        left: 0.5em;
-    }
-
-    .ol-rotate {
-        top: 0.5em;
-        right: 0.5em;
-        transition:
-            opacity 0.25s linear,
-            visibility 0s linear;
-    }
-
-    .ol-rotate.ol-hidden {
-        opacity: 0;
-        visibility: hidden;
-        transition:
-            opacity 0.25s linear,
-            visibility 0s linear 0.25s;
-    }
-
-    .ol-zoom-extent {
-        top: 4.643em;
-        left: 0.5em;
-    }
-
-    .ol-full-screen {
-        right: 0.5em;
-        top: 0.5em;
-    }
-
-    .ol-control button {
-        display: block;
-        margin: 1px;
-        padding: 0;
-        color: var(--ol-subtle-foreground-color);
-        font-weight: bold;
-        text-decoration: none;
-        font-size: inherit;
-        text-align: center;
-        height: 1.375em;
-        width: 1.375em;
-        line-height: 0.4em;
-        background-color: var(--ol-background-color);
-        border: none;
-        border-radius: 2px;
-        position: relative;
-    }
-
-    .ol-control button::-moz-focus-inner {
-        border: none;
-        padding: 0;
-    }
-
-    .ol-zoom-extent button {
-        line-height: 1.4em;
-    }
-
-    .ol-compass {
-        display: block;
-        font-weight: normal;
-        will-change: transform;
-    }
-
-    .ol-touch .ol-control button {
-        font-size: 1.5em;
-    }
-
-    .ol-touch .ol-zoom-extent {
-        top: 5.5em;
-    }
-
-    .ol-control button:hover,
-    .ol-control button:focus {
-        text-decoration: none;
-        outline: 1px solid var(--ol-subtle-foreground-color);
-        color: var(--ol-foreground-color);
-    }
-
-    .ol-zoom .ol-zoom-in {
-        border-radius: 2px 2px 0 0;
-    }
-
-    .ol-zoom .ol-zoom-out {
-        border-radius: 0 0 2px 2px;
-    }
-
-    .ol-attribution {
-        display: none !important;
-    }
-
-    .ol-zoomslider {
-        top: 4.5em;
-        left: 0.5em;
-        height: 200px;
-    }
-
-    .ol-zoomslider button {
-        position: relative;
-        height: 10px;
-    }
-
-    .ol-touch .ol-zoomslider {
-        top: 5.5em;
-    }
-
-    .ol-overviewmap {
-        left: 0.5em;
-        bottom: 0.5em;
-    }
-
-    .ol-overviewmap.ol-uncollapsible {
-        bottom: 0;
-        left: 0;
-        border-radius: 0 4px 0 0;
-    }
-
-    .ol-overviewmap .ol-overviewmap-map,
-    .ol-overviewmap button {
-        display: block;
-    }
-
-    .ol-overviewmap .ol-overviewmap-map {
-        border: 1px solid var(--ol-subtle-foreground-color);
-        height: 150px;
-        width: 150px;
-    }
-
-    .ol-overviewmap:not(.ol-collapsed) button {
-        bottom: 0;
-        left: 0;
-        position: absolute;
-    }
-
-    .ol-overviewmap.ol-collapsed .ol-overviewmap-map,
-    .ol-overviewmap.ol-uncollapsible button {
-        display: none;
-    }
-
-    .ol-overviewmap:not(.ol-collapsed) {
-        background: var(--ol-subtle-background-color);
-    }
-
-    .ol-overviewmap-box {
-        border: 1.5px dotted var(--ol-subtle-foreground-color);
-    }
-
-    .ol-overviewmap .ol-overviewmap-box:hover {
-        cursor: move;
-    }
-
-    .ol-overviewmap .ol-viewport:hover {
-        cursor: pointer;
-    }
-
-    /* Responsive design for smaller screens */
-    @media (max-width: 768px) {
-        :host {
-            gap: 1rem 0.5rem;
-        }
-
-        .map-container {
-            min-height: 300px;
-        }
-
-        #map {
-            min-height: 300px;
-        }
-
-        #settings {
-            bottom: 100px;
-            left: 5px;
-            padding: 6px 8px;
-            font-size: 11px;
-        }
-    }
-
-    @media (max-width: 480px) {
-        .map-container {
-            min-height: 250px;
-        }
-
-        #map {
-            min-height: 250px;
-        }
-
-        #settings {
-            bottom: 80px;
-            left: 5px;
-            padding: 4px 6px;
-            font-size: 10px;
-        }
-    }
-
-    .map {
-        aspect-ratio: 4 / 3;
-        border: solid 1px var(--terra-map-border-color);
-    }
-
-    .map.static .ol-control {
-        display: none;
-    }
-
-    .control-button {
-        /* TODO: use a local spritesheet instead */
-        background-image:
-            linear-gradient(transparent, transparent),
-            url('https://unpkg.com/leaflet-draw@1.0.4/dist/images/spritesheet.svg');
-        background-repeat: no-repeat;
-        background-size: 300px 22px;
-        background-clip: padding-box;
-        position: absolute;
-        top: 30%;
-        left: 30%;
-        width: 40%;
-        height: 40%;
-    }
-
-    .control-bbox {
-        background-position: -90px;
-    }
-
-    .control-polygon {
-        background-position: -68px;
-    }
-
-    .control-point {
-        background-position: -134px;
-    }
-
-    .control-circle {
-        background-position: -112px;
-    }
-
-    .form-control {
-        display: block;
-        width: 100%;
-        height: 36px;
-        padding: 6px 12px;
-        background-image: 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;
-    }
-
-    .map__select {
-        width: 100%;
-        box-shadow: none;
-        margin-bottom: 1rem;
-    }
-
-    .map__loading-overlay {
-        position: absolute;
-        inset: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: rgba(255, 255, 255, 0.55);
-        backdrop-filter: blur(2px);
-        z-index: 1000;
-        pointer-events: none;
-    }
-
-    .map__spinner {
-        width: 40px;
-        height: 40px;
-        border: 3px solid rgba(0, 0, 0, 0.12);
-        border-top-color: #3388ff;
-        border-radius: 50%;
-        animation: map-spin 0.75s linear infinite;
-    }
-
-    @keyframes map-spin {
-        to {
-            transform: rotate(360deg);
-        }
-    }
-`;export{a};

package/dist/chunks/chunk.CFWA3EO3.js

@@ -1,75 +0,0 @@
-import{a as y}from"./chunk.4H7EP4CT.js";import{a as V}from"./chunk.IYLOXJSX.js";import{a as c}from"./chunk.J5Q4TWEG.js";import{a as g,b as f}from"./chunk.EBSZILKQ.js";import{e as l}from"./chunk.INFVQQSJ.js";import{property as h,query as _,state as p}from"lit/decorators.js";import{html as m}from"lit";import v,{PipsMode as N}from"nouislider";var i=class extends f{constructor(){super(...arguments);this.mode="single";this.min=0;this.max=100;this.step=1;this.disabled=!1;this.hasPips=!1;this.hasTooltips=!1;this.showInputs=!1;this.label="Slider";this.hideLabel=!1;this.hasBeenManipulated=!1}updateSlider(){this.renderSlider()}disabledChanged(){var e,t,u,n;this.disabled?(t=(e=this.slider)==null?void 0:e.noUiSlider)==null||t.disable():(n=(u=this.slider)==null?void 0:u.noUiSlider)==null||n.enable()}firstUpdated(){this.renderSlider()}_getStartValues(){var n,o,a;let e=Number(this.min),t=Number(this.max);if(this.mode==="range"){let r=(n=this.startValue)!=null?n:e,s=(o=this.endValue)!=null?o:t;return[r,s]}return[(a=this.value)!=null?a:e]}renderSlider(){var a;if(!this.slider)return;(a=this.slider.noUiSlider)==null||a.destroy();let e=Number(this.min),t=Number(this.max);if(!Number.isFinite(e)||!Number.isFinite(t)||t<e){v.create(this.slider,{start:[0],range:{min:0,max:0}});return}let u=this._getStartValues(),n={range:{min:e,max:t},start:u,step:this.step,connect:this.mode==="range",tooltips:this.formatTooltip?{to:r=>{var s,d;return(d=(s=this.formatTooltip)==null?void 0:s.call(this,r))!=null?d:r}}:this.hasTooltips,behaviour:"drag",format:this._getFormatter(),pips:this.hasPips?{mode:N.Range,density:-1,format:this._getFormatter()}:void 0};v.create(this.slider,n);let o=this.slider.noUiSlider.get();if(this.mode==="range"){let[r,s]=Array.isArray(o)?o.map(Number):[e,t];this.currentStartValue=r,this.currentEndValue=s,this.hasBeenManipulated=r!==e||s!==t}else{let[r]=Array.isArray(o)?o.map(Number):[e];this.currentValue=r,this.hasBeenManipulated=r!==e}this.hasTooltips&&this.mode==="range"&&V(this.slider,15,"-"),this.slider.noUiSlider.on("update",r=>{if(this.mode==="range"){let[s,d]=r.map(Number);this.currentStartValue=s,this.currentEndValue=d,this.hasBeenManipulated=s!==e||d!==t}else{let[s]=r.map(Number);this.currentValue=s,this.hasBeenManipulated=s!==e}this.requestUpdate()}),this.slider.noUiSlider.on("change",r=>{if(this.mode==="range"){let[s,d]=r.map(Number);this.currentStartValue=s,this.currentEndValue=d,this.hasBeenManipulated=s!==e||d!==t,this.emit("terra-slider-change",{detail:{startValue:s,endValue:d}})}else{let[s]=r.map(Number);this.currentValue=s,this.hasBeenManipulated=s!==e,this.emit("terra-slider-change",{detail:{value:s}})}this.requestUpdate()}),this.slider.noUiSlider.on("update",()=>{this._updateInputFields()}),this.slider.noUiSlider.on("change",()=>{this._updateInputFields()}),this.disabledChanged()}_updateInputFields(){if(!this.showInputs)return;let e=this.slider.noUiSlider.get(),t=Array.isArray(e)?e:[e];this.requestUpdate(),setTimeout(()=>{var u,n,o;if(this.mode==="range"){let a=(u=this.shadowRoot)==null?void 0:u.querySelector("#slider-start-input"),r=(n=this.shadowRoot)==null?void 0:n.querySelector("#slider-end-input");a&&(a.value=this._formatValue(Number(t[0]))),r&&(r.value=this._formatValue(Number(t[1])))}else{let a=(o=this.shadowRoot)==null?void 0:o.querySelector("#slider-value-input");a&&(a.value=this._formatValue(Number(t[0])))}},10)}_getFormatter(){let e=Number.isInteger(this.step);return{to:t=>{if(e)return Math.round(t).toString();{let u=this.step.toString(),n=u.includes(".")?u.split(".")[1].length:0;return t.toFixed(n)}},from:t=>Number(t)}}_formatValue(e){let t=Number(e);if(isNaN(t))return"0";if(Number.isInteger(this.step))return Math.round(t).toString();{let n=this.step.toString(),o=n.includes(".")?n.split(".")[1].length:0;return t.toFixed(o)}}handleClear(){let e=Number(this.min),t=Number(this.max);this.mode==="range"?(this.slider.noUiSlider.set([e,t]),this.currentStartValue=e,this.currentEndValue=t,this.hasBeenManipulated=!1):(this.slider.noUiSlider.set([e]),this.currentValue=e,this.hasBeenManipulated=!1),this.requestUpdate()}render(){var s,d,b;let e="container"+(this.hasPips?" hasPips":""),t=Number(this.min),u=Number(this.max),n=(s=this.currentStartValue)!=null?s:this.mode==="range"?t:void 0,o=(d=this.currentEndValue)!=null?d:this.mode==="range"?u:void 0,a=(b=this.currentValue)!=null?b:this.mode==="single"?t:void 0,r=this.mode==="range"?`${this._formatValue(n)}\u2013${this._formatValue(o)}`:this._formatValue(a);return m`
-            <div class="slider">
-                ${this.hasTooltips?m`
-                          <label
-                              for="slider-control"
-                              class=${this.hideLabel?"sr-only":"slider__label"}
-                              >${this.label}</label
-                          >
-                      `:m`
-                          <div class="slider__header">
-                              <label
-                                  for="slider-control"
-                                  class=${this.hideLabel?"sr-only":"slider__label"}
-                                  >${this.label}</label
-                              >
-                              <div class="slider__header-right">
-                                  ${this.hasBeenManipulated?m`
-                                            <button
-                                                class="slider__clear"
-                                                @click="${this.handleClear}"
-                                                type="button"
-                                            >
-                                                Clear
-                                            </button>
-                                        `:""}
-                                  <span class="slider__current-range"
-                                      >${r}</span
-                                  >
-                              </div>
-                          </div>
-                      `}
-                <div class="${e}">
-                    <div part="slider" id="slider-control"></div>
-                    ${this.showInputs?this._renderInputFields():""}
-                    <slot></slot>
-                </div>
-            </div>
-        `}_renderInputFields(){var e,t,u,n,o,a;return this.mode==="range"?m`
-                <div class="slider-inputs">
-                    <input
-                        id="slider-start-input"
-                        type="number"
-                        .min="${this.min}"
-                        .max="${this.max}"
-                        .step="${this.step}"
-                        .value="${this._formatValue((t=(e=this.startValue)!=null?e:this.min)!=null?t:0)}"
-                        @change="${this._handleInputChange}"
-                        @keydown="${this._handleInputKeydown}"
-                    />
-                    <span class="input-separator">to</span>
-                    <input
-                        id="slider-end-input"
-                        type="number"
-                        .min="${this.min}"
-                        .max="${this.max}"
-                        .step="${this.step}"
-                        .value="${this._formatValue((n=(u=this.endValue)!=null?u:this.max)!=null?n:100)}"
-                        @change="${this._handleInputChange}"
-                        @keydown="${this._handleInputKeydown}"
-                    />
-                </div>
-            `:m`
-                <div class="slider-inputs">
-                    <input
-                        id="slider-value-input"
-                        type="number"
-                        .min="${this.min}"
-                        .max="${this.max}"
-                        .step="${this.step}"
-                        .value="${this._formatValue((a=(o=this.value)!=null?o:this.min)!=null?a:0)}"
-                        @change="${this._handleInputChange}"
-                        @keydown="${this._handleInputKeydown}"
-                    />
-                </div>
-            `}_handleInputChange(e){let t=e.target,u=Number(t.value),n=Number(this.min),o=Number(this.max),a=Math.max(n,Math.min(o,u));if(t.value=this._formatValue(a),this.mode==="range"){let s=[...this.slider.noUiSlider.get()];t.id==="slider-start-input"?s[0]=a:s[1]=a,this.slider.noUiSlider.set(s),this.emit("terra-slider-change",{detail:{startValue:s[0],endValue:s[1]}})}else this.slider.noUiSlider.set([a]),this.emit("terra-slider-change",{detail:{value:a}})}_handleInputKeydown(e){e.key==="Enter"&&e.target.blur()}};i.styles=[g,y],l([_('[part~="slider"]')],i.prototype,"slider",2),l([h({reflect:!0})],i.prototype,"mode",2),l([h({type:Number})],i.prototype,"min",2),l([h({type:Number})],i.prototype,"max",2),l([h({type:Number})],i.prototype,"step",2),l([h({type:Boolean,reflect:!0})],i.prototype,"disabled",2),l([h({type:Boolean,reflect:!0,attribute:"has-pips"})],i.prototype,"hasPips",2),l([h({type:Boolean,reflect:!0,attribute:"has-tooltips"})],i.prototype,"hasTooltips",2),l([h({type:Boolean,reflect:!0,attribute:"show-inputs"})],i.prototype,"showInputs",2),l([h({type:Number})],i.prototype,"value",2),l([h({type:Number,attribute:"start-value"})],i.prototype,"startValue",2),l([h({type:Number,attribute:"end-value"})],i.prototype,"endValue",2),l([h()],i.prototype,"label",2),l([h({attribute:"hide-label",type:Boolean})],i.prototype,"hideLabel",2),l([h({attribute:"format-tooltip",type:Function})],i.prototype,"formatTooltip",2),l([p()],i.prototype,"currentStartValue",2),l([p()],i.prototype,"currentEndValue",2),l([p()],i.prototype,"currentValue",2),l([p()],i.prototype,"hasBeenManipulated",2),l([c(["mode","min","max","step","value","startValue","endValue","hasPips","hasTooltips","showInputs"])],i.prototype,"updateSlider",1),l([c("disabled")],i.prototype,"disabledChanged",1);export{i as a};

package/dist/chunks/chunk.CIJPMZV4.js

@@ -1 +0,0 @@
-import{b as a}from"./chunk.THMFNJK5.js";var s=a;a.define("terra-data-access");export{s as a};