@nasa-terra/components 0.0.193 → 0.0.195

package/dist/chunks/chunk.LXQROJE2.js

@@ -0,0 +1,354 @@
+import{css as e}from"lit";var i=e`
+    :host {
+        background-color: var(--terra-color-bg-surface-neutral-primary);
+        display: block;
+        padding-bottom: 55% !important;
+        position: relative;
+        width: 100%;
+    }
+
+    h3 {
+        color: var(--terra-text-brand-on-primary);
+        margin-bottom: 1rem;
+    }
+
+    dialog {
+        position: absolute;
+        z-index: 999;
+        width: 100px;
+        height: 100px;
+        padding: 0;
+        place-self: center;
+    }
+
+    .container {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        display: grid;
+        grid-template-rows: auto 1fr;
+    }
+
+    .scrollable {
+        overflow-y: auto;
+        display: grid;
+        grid-template-columns: 250px 1fr;
+        grid-column: span 2;
+        width: 100%;
+    }
+
+    header.search {
+        border-bottom: 1px solid var(--terra-border-neutral-default, #e9ecef);
+        grid-column: span 2;
+        padding: 15px;
+        padding-bottom: 25px;
+        display: flex;
+        gap: 10px;
+    }
+
+    header.search button {
+        width: 36px;
+        height: 36px;
+    }
+
+    .browse-by-category aside {
+        padding: 0 15px;
+    }
+
+    .browse-by-category main {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+        gap: 2rem;
+        min-width: 800px;
+        overflow-x: auto;
+    }
+
+    .column {
+        min-width: 0; /* Prevents overflow issues */
+    }
+
+    .browse-by-category ul {
+        padding: 0;
+    }
+
+    .browse-by-category ul ::marker {
+        font-size: 0; /*Safari removes the semantic meaning / role of the list if we remove the list style. */
+    }
+
+    .browse-by-category li {
+        border-radius: 4px;
+        cursor: pointer;
+        margin: 0;
+        margin-bottom: 0.5rem;
+        padding: 8px;
+        transition: background-color 0.15s;
+    }
+
+    .browse-by-category li:hover {
+        background-color: rgba(255, 255, 255, 0.1);
+    }
+
+    .browse-by-category terra-button {
+        margin-top: 15px;
+    }
+
+    .browse-by-category terra-button::part(base) {
+    }
+
+    label {
+        display: flex;
+        line-height: var(--terra-line-height-normal);
+    }
+
+    input[type='radio'] {
+        appearance: none; /* removes OS default styling */
+        -webkit-appearance: none; /* for Safari */
+        -moz-appearance: none; /* for Firefox */
+        margin-right: 10px;
+        width: 1em;
+        height: 1em;
+        border: 0.125em solid var(--terra-radio-border-color);
+        border-radius: 50%;
+        background-color: var(--terra-radio-background-color);
+        cursor: pointer;
+        position: relative; /* for the dot */
+    }
+
+    /* Selected state */
+    input[type='radio']:checked {
+        border-color: var(--terra-radio-border-color-checked);
+        background-color: var(--terra-radio-background-color); /* keep white bg */
+    }
+
+    /* Inner dot */
+    input[type='radio']:checked::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 0.5em; /* size of the dot */
+        height: 0.5em;
+        background-color: var(--terra-radio-background-color-checked);
+        border-radius: 50%; /* makes it circular */
+        transform: translate(-50%, -50%); /* center it */
+    }
+
+    .variables-container {
+        display: grid;
+        grid-template-areas:
+            'header header'
+            'aside main';
+        grid-template-columns: 250px 1fr;
+        grid-template-rows: auto 1fr;
+    }
+
+    .variables-container header {
+        grid-area: header;
+        padding: 15px;
+        padding-bottom: 0;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .variables-container header menu {
+        display: inline-flex;
+        padding: 0;
+        margin: 0;
+        min-width: 24em;
+        justify-content: flex-end;
+    }
+
+    .variables-container header menu ::marker {
+        font-size: 0;
+    }
+
+    .list-menu-dropdown terra-button::part(base) {
+        border-color: transparent;
+        font-weight: 700;
+    }
+
+    .variables-container aside {
+        grid-area: aside;
+        padding: 15px;
+        overflow-y: auto;
+    }
+
+    .variables-container aside details {
+        margin-bottom: 0.5rem;
+    }
+
+    summary::marker {
+        color: var(--terra-text-brand-on-primary); /* changes the arrow color */
+        cursor: pointer;
+    }
+
+    .variables-container main {
+        grid-area: main;
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 1rem;
+        min-height: 100%;
+        overflow-x: auto;
+        padding: 15px;
+    }
+
+    .variables-container main:has(.right-column) {
+        grid-template-columns: 1fr 400px;
+    }
+
+    .facet {
+        margin-left: 10px;
+    }
+
+    .facet label {
+        align-items: center; /* vertical alignment */
+        line-height: var(--terra-line-height-loose);
+    }
+
+    .facet label input[type='checkbox'] {
+        appearance: none; /* removes OS default styling */
+        -webkit-appearance: none; /* for Safari */
+        -moz-appearance: none; /* for Firefox */
+        width: 1em;
+        height: 1em;
+        border: 0.125em solid var(--terra-checkbox-border-color);
+        border-radius: 0.25em;
+        background-color: var(--terra-checkbox-background-color);
+        cursor: pointer;
+        position: relative;
+    }
+
+    .facet label input[type='checkbox']:checked {
+        background-color: var(--terra-checkbox-background-color-checked);
+        accent-color: var(--terra-checkbox-background-color-checked);
+    }
+
+    /* Draw the checkmark */
+    .facet label input[type='checkbox']:checked::before,
+    .facet label input[type='checkbox']:checked::after {
+        content: '';
+        position: absolute;
+        height: 2px; /* thickness of the line */
+        background-color: var(--terra-checkbox-icon-color); /* checkmark color */
+        transform-origin: left center;
+    }
+
+    /* First stroke of the checkmark */
+    .facet label input[type='checkbox']:checked::before {
+        width: 0.37em;
+        top: 38%;
+        left: 23%;
+        transform: rotate(45deg);
+    }
+
+    /* Second stroke of the checkmark */
+    .facet label input[type='checkbox']:checked::after {
+        width: 0.58em;
+        top: 60%;
+        left: 45%;
+        transform: rotate(-49deg);
+    }
+
+    .variable-list {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    .variable-list-item {
+        /* border: 0.0625em var(--terra-color-nasa-blue-tint) solid; */
+        border-radius: 0.25em;
+        background-color: var(--terra-color-bg-surface-neutral-secondary);
+        padding: 0.5em 1em;
+        margin-bottom: var(--terra-spacing-2x-small);
+    }
+
+    .variable-list-item label {
+        color: var(--terra-text-secondary);
+    }
+
+    .variable-list-item:hover {
+        background-color: var(--terra-color-bg-info-subtle);
+    }
+
+    .variable-list-item:hover label {
+        color: var(--terra-text-secondary);
+    }
+
+    .variable-list-item::marker {
+        font-size: 0;
+    }
+
+    .variable[open] .details-panel {
+        height: max-content;
+    }
+
+    .variable input[type='checkbox'] {
+        margin-block: 0.25em;
+        margin-inline: 0 0.5em;
+    }
+
+    .variable {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .variable a {
+        color: white;
+    }
+
+    .variable label {
+        cursor: pointer;
+        display: flex;
+        flex-direction: row;
+        font-weight: 400;
+    }
+
+    .variable label input[type='checkbox'] {
+        align-self: flex-start;
+        margin-top: 0.4em;
+    }
+
+    .left-column {
+        /* overflow-y: auto; */
+    }
+
+    /* Right column (details panel) */
+    .right-column {
+        display: flex;
+        flex-direction: column;
+        background-color: var(--terra-color-bg-info-subtle);
+        color: var(--terra-text-secondary);
+        /* border: 0.0625em solid var(--terra-color-nasa-blue-tint); */
+        border-radius: 0.25em;
+        padding: 0.5em 1em;
+    }
+
+    .right-column h4 {
+        margin-top: 0;
+        margin-bottom: 1rem;
+    }
+
+    .right-column label {
+        color: var(--terra-text-primary);
+    }
+
+    .right-column p {
+        margin: 0.5rem 0;
+        line-height: 1.4;
+    }
+
+    .placeholder {
+        color: var(--terra-text-secondary);
+        font-style: italic;
+    }
+
+    .sticky-element {
+        position: sticky;
+        /* For older browsers, consider adding: */
+        position: -webkit-sticky;
+        top: 0; /* Sticks to the top of the viewport when scrolled to */
+    }
+`;export{i as a};

package/dist/chunks/chunk.LY7YY3K2.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.GT5LSMK3.js";var T=e;e.define("terra-tabs");export{T as a};

package/dist/chunks/chunk.M57NEZ6W.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.W64NLWOA.js";import*as r from"react";import{createComponent as t}from"@lit/react";import"@lit/react";var a="terra-time-series";e.define("terra-time-series");var n=t({tagName:a,elementClass:e,react:r,events:{onTerraTimeSeriesLoadingChange:"terra-time-series-loading-change",onTerraDateRangeChange:"terra-date-range-change",onTerraTimeSeriesDataChange:"terra-time-series-data-change",onTerraHarmonyJobStatusUpdate:"terra-harmony-job-status-update",onTerraTimeSeriesChunkProgressChange:"terra-time-series-chunk-progress-change"},displayName:"TerraTimeSeries"}),g=n;export{g as a};

package/dist/chunks/chunk.M6VUPGBZ.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.AYSQDQ7A.js";import*as t from"react";import{createComponent as r}from"@lit/react";import"@lit/react";var o="terra-popup";e.define("terra-popup");var p=r({tagName:o,elementClass:e,react:t,events:{onTerraReposition:"terra-reposition"},displayName:"TerraPopup"}),f=p;export{f as a};

package/dist/chunks/chunk.MGTW3UKR.js

@@ -0,0 +1,6 @@
+import{a as M}from"./chunk.W5WASIVZ.js";import{a as C}from"./chunk.BDNESHTZ.js";import{a as d,b as m,f as n,g as i,h as c,i as a}from"./chunk.INFVQQSJ.js";import{Control as K}from"ol/control.js";import{Draw as Q}from"ol/interaction.js";import{createBox as X}from"ol/interaction/Draw.js";import G from"ol/Feature.js";import{Point as Y,Polygon as _}from"ol/geom.js";import{transform as H,transformExtent as tt}from"ol/proj.js";import{Fill as et,Stroke as ot,Style as rt}from"ol/style.js";var u,y,l,f,x,b,L,$,v,I,B,N,E,R,D,W,V,j,F,q,P,A,S,U,g,w,O=class extends K{constructor(t,e){let o=document.createElement("div");o.className="draw-toolbar ol-unselectable ol-control";super({element:o});i(this,L);i(this,v);i(this,B);i(this,E);i(this,D);i(this,V);i(this,F);i(this,P);i(this,S);i(this,g);i(this,u,void 0);i(this,y,void 0);i(this,l,void 0);i(this,f,void 0);i(this,x,void 0);i(this,b,void 0);c(this,y,e),["bbox","polygon","point","circle"].forEach(p=>{let h=document.createElement("button");h.innerHTML=a(this,B,N).call(this,p),h.title=a(this,E,R).call(this,p),h.addEventListener("click",()=>a(this,P,A).call(this,p)),o.appendChild(h),this.toggleButtonVisibility(p)});let s=document.createElement("button");s.innerHTML="\u2715",s.style.display="none",o.appendChild(s),this.vectorLayer=t,c(this,f,s),c(this,l,document.createElement("div")),n(this,l).className="ol-tooltip",n(this,l).style.display="none",s.addEventListener("click",()=>a(this,g,w).call(this)),c(this,b,a(this,S,U).bind(this))}setOptions(t){c(this,y,d(d({},n(this,y)),t)),this.toggleButtonVisibility("bbox"),this.toggleButtonVisibility("polygon"),this.toggleButtonVisibility("point"),this.toggleButtonVisibility("circle")}clearValue(){var t;a(this,g,w).call(this),(t=this.vectorLayer.getSource())==null||t.clear()}setValue(t,e=!1){this.clearValue();let o=this.vectorLayer.getSource();if(!o)return;let r;t instanceof C?r=this.buildPointFeature(t):t instanceof M&&(r=this.buildBBoxFeature(t)),r&&(o.addFeature(r),e&&a(this,L,$).call(this,r))}setMap(t){super.setMap(t),t&&t.getViewport().appendChild(n(this,l))}buildPointFeature(t){let e=H([t.lng,t.lat],"EPSG:4326","EPSG:3857"),o=new Y(e),r=new G({geometry:o});return r.set("drawtool","point"),r}buildBBoxFeature(t){let e=t.getWest(),o=t.getSouth(),r=t.getEast(),s=t.getNorth(),p=[[e,o],[e,s],[r,s],[r,o],[e,o]].map(k=>H(k,"EPSG:4326","EPSG:3857")),h=new _([p]),T=new G({geometry:h});return T.set("drawtool","bbox"),T}toggleButtonVisibility(t){var r,s;let e=(s=(r=n(this,y))==null?void 0:r[`show${t.charAt(0).toUpperCase()+t.slice(1)}Tool`])!=null?s:!1,o=this.element.querySelector(`button:nth-child(${a(this,v,I).call(this,t)})`);o&&(o.style.display=e?"inline-block":"none")}};u=new WeakMap,y=new WeakMap,l=new WeakMap,f=new WeakMap,x=new WeakMap,b=new WeakMap,L=new WeakSet,$=function(t){let e=this.getMap();if(!e)return;let o=t.getGeometry();if(!o)return;let r=o.getExtent();r&&e.getView().fit(r,{padding:[20,20,20,20],maxZoom:5,duration:250})},v=new WeakSet,I=function(t){return t==="bbox"?1:t==="polygon"?2:t==="point"?3:t==="circle"?4:-1},B=new WeakSet,N=function(t){return t==="bbox"?'<div class="control-button control-bbox"></div>':t==="polygon"?'<div class="control-button control-polygon"></div>':t==="point"?'<div class="control-button control-point"></div>':t==="circle"?'<div class="control-button control-circle"></div>':""},E=new WeakSet,R=function(t){return t==="bbox"?"Draw a rectangle":t==="polygon"?"Draw a polygon":t==="point"?"Choose a point":t==="circle"?"Draw a circle":""},D=new WeakSet,W=function(t){return t==="bbox"?"Click and drag to draw a bounding box":t==="polygon"?"Click to draw polygon":t==="point"?"Click to place point":t==="circle"?"Click and drag to draw a circle":"Click to draw"},V=new WeakSet,j=function(){return{source:this.vectorLayer.getSource(),dragVertexDelay:0,style:new rt({stroke:new ot({color:"#0088ff",width:2,lineDash:[8,4]}),fill:new et({color:"rgba(51, 136, 255, 0.1)"})})}},F=new WeakSet,q=function(t){let e=a(this,V,j).call(this);return t==="bbox"?m(d({},e),{type:"Circle",geometryFunction:X(),freehand:!0}):t==="circle"?m(d({},e),{type:"Circle",freehand:!0}):t==="polygon"?m(d({},e),{type:"Polygon"}):m(d({},e),{type:"Point"})},P=new WeakSet,A=function(t){var r;let e=this.getMap();if(!e)return;a(this,g,w).call(this),c(this,x,t),(r=this.vectorLayer.getSource())==null||r.clear(),e.getViewport().style.cursor="crosshair";let o=a(this,F,q).call(this,t);c(this,u,new Q(o)),e.addInteraction(n(this,u)),n(this,l).style.display="block",n(this,l).innerText=a(this,D,W).call(this,t),n(this,f).style.display="inline-block",e.on("pointermove",n(this,b)),n(this,u).on("drawend",s=>{s.feature.set("drawtool",t),a(this,g,w).call(this)}),n(this,u).on("drawstart",s=>{let p=s.feature.getGeometry();p.on("change",()=>{let h=p.getExtent(),T=tt(h,"EPSG:3857","EPSG:4326"),[k,Z,z,J]=T;n(this,l).innerHTML=`
+                    W: ${k.toFixed(4)}<br/>
+                    S: ${Z.toFixed(4)}<br/>
+                    E: ${z.toFixed(4)}<br/>
+                    N: ${J.toFixed(4)}
+                `})})},S=new WeakSet,U=function(t){n(this,l).style.left=t.pixel[0]+12+"px",n(this,l).style.top=t.pixel[1]+12+"px"},g=new WeakSet,w=function(){let t=this.getMap();t&&n(this,u)&&(t.removeInteraction(n(this,u)),t.un("pointermove",n(this,b)),t.getViewport().style.cursor=""),c(this,u,void 0),c(this,x,void 0),n(this,l).style.display="none",n(this,f).style.display="none"};export{O as a};