@nasa-terra/components 0.0.189 → 0.0.191

package/dist/chunks/chunk.PICICWOI.js

@@ -0,0 +1,300 @@
+import{b as q}from"./chunk.UXPPNGDD.js";import{a as W}from"./chunk.U2YGT52C.js";import{a as Q}from"./chunk.QNMFOQMN.js";import{a as G}from"./chunk.Z4MRB553.js";import{a as Z}from"./chunk.QDFHF7LY.js";import{a as D}from"./chunk.GMMPKXT2.js";import{a as j}from"./chunk.WUOLVIQC.js";import{a as H}from"./chunk.UIR73OAY.js";import{a as M}from"./chunk.JSEYNLAE.js";import{a as B}from"./chunk.3TNPGXLM.js";import{a as N}from"./chunk.PPDNREE3.js";import{a as E}from"./chunk.J5Q4TWEG.js";import{a as P,b as R}from"./chunk.NAMM3J43.js";import{a as V,b as L,c as O,d as A,e as h,f as p,g as c,i as l}from"./chunk.INFVQQSJ.js";import{html as n,nothing as g}from"lit";import{property as U,state as v}from"lit/decorators.js";var d,b,f,y,T,$,z,F,_,S,J,I,X,w,Y,k,ee,x,te,C,ae,o=class extends Z(R){constructor(){super(...arguments);c(this,b);c(this,y);c(this,$);c(this,F);c(this,S);c(this,I);c(this,w);c(this,k);c(this,x);c(this,C);this.catalog="giovanni";this.selectedFacets={};this.selectedVariables=[];this.showVariablesBrowse=!1;this.activeIndex=void 0;this.sortOrder="aToZ";c(this,d,new j(this))}handleSelectedVariablesChange(){this.emit("terra-variables-change",{detail:{selectedVariables:this.selectedVariables}})}reset(){this.searchQuery="",this.selectedFacets={},this.showVariablesBrowse=!1}handleObservationChange(){var r,t,a;let e=(a=(t=(r=this.shadowRoot)==null?void 0:r.querySelector('input[name="observation"]:checked'))==null?void 0:t.value)!=null?a:"All";e==="All"?l(this,y,T).call(this,"observations"):l(this,b,f).call(this,"observations",e,!0)}toggleFacetSelect(e){let r=e.target;r.dataset.facet&&(l(this,b,f).call(this,r.dataset.facet,r.innerText.trim()),this.showVariablesBrowse=!0)}handleSearch(e){this.selectedFacets={},this.searchQuery=e.detail,this.showVariablesBrowse=!0}render(){let e=p(this,d).isPending&&p(this,d).facetsByCategory;return n`
+            <div class="container">
+                <header class="search">
+                    ${this.showVariablesBrowse?n`
+                              <terra-button @click=${this.reset}>
+                                  <terra-icon
+                                      name="solid-chevron-left"
+                                      library="heroicons"
+                                      font-size="1.5em"
+                                  ></terra-icon>
+                              </terra-button>
+                          `:g}
+
+                    <terra-variable-keyword-search
+                        @terra-search=${this.handleSearch}
+                    ></terra-variable-keyword-search>
+                </header>
+
+                ${this.showVariablesBrowse?l(this,C,ae).call(this,!!e):l(this,k,ee).call(this)}
+
+                <dialog ?open=${e}>
+                    <terra-loader indeterminate></terra-loader>
+                </dialog>
+            </div>
+        `}getVariable(e){return p(this,d).getVariable(e)}};d=new WeakMap,b=new WeakSet,f=function(e,r,t=!1){let a=this.selectedFacets[e]||[];if(a.includes(r)){l(this,$,z).call(this,e,r);return}this.selectedFacets=L(V({},this.selectedFacets),{[e]:t?[r]:[...a,r]})},y=new WeakSet,T=function(e){let a=this.selectedFacets,{[e]:r}=a,t=A(a,[O(e)]);this.selectedFacets=t},$=new WeakSet,z=function(e,r){if(!this.selectedFacets[e])return;let t=this.selectedFacets[e].filter(a=>a!==r);if(!t.length){l(this,y,T).call(this,e);return}this.selectedFacets=L(V({},this.selectedFacets),{[e]:t})},F=new WeakSet,_=function(e,r){let t=this.selectedVariables.find(a=>a.dataFieldLongName===e.dataFieldLongName);r&&!t?this.selectedVariables=[].concat(this.selectedVariables,e):!r&&t&&(this.selectedVariables=this.selectedVariables.filter(a=>a.dataFieldLongName!==e.dataFieldLongName))},S=new WeakSet,J=function(e){let t=e.detail.item.value;(t==="aToZ"||t==="zToA")&&(this.sortOrder=t,requestAnimationFrame(()=>{e.target.querySelectorAll("terra-menu-item").forEach(s=>{s.value===this.sortOrder?s.checked=!0:s.checked=!1})}))},I=new WeakSet,X=function(){return[...p(this,d).variables].sort((t,a)=>{let i=t.dataFieldLongName.toLowerCase(),s=a.dataFieldLongName.toLowerCase();return this.sortOrder==="aToZ"?i.localeCompare(s):s.localeCompare(i)})},w=new WeakSet,Y=function(){let e=[];Object.values(this.selectedFacets).forEach(i=>{e.push(...i)});let r=e.length>0,t=!!this.searchQuery;if(!r&&!t)return"";let a="Browsing";if(r){if(e.length===1)a+=` '${e[0]}'`;else if(e.length===2)a+=` '${e[0]}' and '${e[1]}'`;else{let i=e.slice(0,-1),s=e[e.length-1];a+=` '${i.join("', '")}', and '${s}'`}a+=" variables"}else a+=" variables";return t&&(a+=` for query \`${this.searchQuery}\``),a},k=new WeakSet,ee=function(){var r,t;let e=[{title:"Research Areas",facetKey:"disciplines"},{title:"Measurements",facetKey:"measurements"},{title:"Sources",facetKey:"platformInstruments"}];return n`
+            <div class="scrollable browse-by-category">
+                <aside>
+                    <h3>Observations</h3>
+
+                    ${(r=p(this,d).facetsByCategory)!=null&&r.observations.length?n`
+                              <label>
+                                  <input
+                                      type="radio"
+                                      name="observation"
+                                      value="All"
+                                      @change=${this.handleObservationChange}
+                                      checked
+                                  />
+                                  All</label
+                              >
+
+                              ${(t=p(this,d).facetsByCategory)==null?void 0:t.observations.map(a=>n`<label>
+                                          <input
+                                              type="radio"
+                                              name="observation"
+                                              value=${a.name}
+                                              @change=${this.handleObservationChange}
+                                          />
+                                          ${a.name}
+                                      </label>`)}
+                          `:n`<terra-skeleton
+                              rows="4"
+                              variableWidths
+                          ></terra-skeleton>`}
+
+                    <terra-button
+                        variant="text"
+                        size
+                        @click=${()=>this.showVariablesBrowse=!0}
+                        >View All Now</terra-button
+                    >
+                </aside>
+
+                <main>
+                    ${e.map(a=>{var i,s,m;return n`
+                            <div class="column">
+                                <h3>${a.title}</h3>
+                                <ul role="list">
+                                    ${(m=(s=(i=p(this,d).facetsByCategory)==null?void 0:i[a.facetKey])==null?void 0:s.filter(u=>u.count>0).map(u=>n`<li
+                                                    role="button"
+                                                    tabindex="0"
+                                                    aria-selected="false"
+                                                    data-facet=${a.facetKey}
+                                                    @click=${this.toggleFacetSelect}
+                                                >
+                                                    ${u.name}
+                                                </li>`))!=null?m:n`<terra-skeleton
+                                        rows=${G(8,12)}
+                                        variableWidths
+                                    ></terra-skeleton>`}
+                                </ul>
+                            </div>
+                        `})}
+                </main>
+            </div>
+        `},x=new WeakSet,te=function(e,r,t,a){return(t!=null?t:[]).some(s=>s.count>0)?n`<details ?open=${a}>
+            <summary>${r}</summary>
+
+            ${(t!=null?t:[]).map(s=>{var m;return s.count>0?n`
+                          <div class="facet">
+                              <label
+                                  ><input
+                                      type="checkbox"
+                                      @change=${()=>l(this,b,f).call(this,e,s.name)}
+                                      ?checked=${(m=this.selectedFacets[e])==null?void 0:m.includes(s.name)}
+                                  />
+                                  ${s.name}
+                                  <!-- TODO: add count back in once we aren't filtering by Cloud Giovanni Catalog (or Cloud Giovanni supports all variables)(${s.count})--></label
+                              >
+                          </div>
+                      `:g})}
+        </details>`:g},C=new WeakSet,ae=function(e){let r=[{title:"Observations",facetKey:"observations",open:!0},{title:"Disciplines",facetKey:"disciplines"},{title:"Measurements",facetKey:"measurements"},{title:"Platform / Instrument",facetKey:"platformInstruments"},{title:"Spatial Resolutions",facetKey:"spatialResolutions"},{title:"Temporal Resolutions",facetKey:"temporalResolutions"},{title:"Wavelengths",facetKey:"wavelengths"},{title:"Depths",facetKey:"depths"},{title:"Special Features",facetKey:"specialFeatures"},{title:"Portal",facetKey:"portals"}],t=l(this,I,X).call(this),a=l(this,w,Y).call(this);return n`<div class="scrollable variables-container">
+            <header>
+                <div>${a}</div>
+
+                <menu>
+                    <li>
+                        <terra-dropdown
+                            class="list-menu-dropdown"
+                            placement="bottom-end"
+                        >
+                            <terra-button
+                                slot="trigger"
+                                variant="default"
+                                outline
+                                caret
+                                >Sort by ${q(this.sortOrder)}</terra-button
+                            >
+                            <terra-menu @terra-select=${l(this,S,J)}>
+                                <terra-menu-item
+                                    type="checkbox"
+                                    value="aToZ"
+                                    ?checked=${this.sortOrder==="aToZ"}
+                                    >A to Z</terra-menu-item
+                                >
+                                <terra-menu-item
+                                    type="checkbox"
+                                    value="zToA"
+                                    ?checked=${this.sortOrder==="zToA"}
+                                    >Z to A</terra-menu-item
+                                >
+                            </terra-menu>
+                        </terra-dropdown>
+                    </li>
+                    <!--
+                    <li>
+                        <terra-dropdown class="list-menu-dropdown">
+                            <terra-button slot="trigger" caret>Group By</terra-button>
+                            <terra-menu>
+                                <terra-menu-item value="depths"
+                                    >Depths</terra-menu-item
+                                >
+                                <terra-menu-item value="disciplines"
+                                    >Disciplines</terra-menu-item
+                                >
+                                <terra-menu-item value="measurements"
+                                    >Measurements</terra-menu-item
+                                >
+                                <terra-menu-item value="observations"
+                                    >Observations</terra-menu-item
+                                >
+                                <terra-menu-item value="platformInstruments"
+                                    >Platform Instruments</terra-menu-item
+                                >
+                                <terra-menu-item value="portals"
+                                    >Portals</terra-menu-item
+                                >
+                                <terra-menu-item value="spatialResolutions"
+                                    >Spatial Resolutions</terra-menu-item
+                                >
+                                <terra-menu-item value="specialFeatures"
+                                    >Special Features</terra-menu-item
+                                >
+                                <terra-menu-item value="temporalResolutions"
+                                    >Temporal Resolutions</terra-menu-item
+                                >
+                                <terra-menu-item value="wavelengths"
+                                    >Wavelengths</terra-menu-item
+                                >
+                            </terra-menu>
+                        </terra-dropdown>
+                    </li>
+                    -->
+                </menu>
+            </header>
+
+            <aside>
+                <h3>Filter</h3>
+
+                ${r.map(i=>{var s;return l(this,x,te).call(this,i.facetKey,i.title,(s=p(this,d).facetsByCategory)==null?void 0:s[i.facetKey],i.open)})}
+            </aside>
+
+            <main class="variable-layout">
+                <!-- LEFT COLUMN -->
+                <section class="left-column">
+                    <ul class="variable-list">
+                        ${!e&&!t.length?n`
+                                  <terra-alert
+                                      variant="primary"
+                                      appearance="white"
+                                      open
+                                  >
+                                      <p>
+                                          We didn't find any variables matching your
+                                          search and filters.
+                                      </p>
+                                      <p>
+                                          Please note: This is a beta release and may
+                                          not have the full Giovanni catalog available
+                                          yet. We are working on adding more variables
+                                          and improving the search and filter
+                                          capabilities, so please check back soon!
+                                      </p>
+                                  </terra-alert>
+                              `:g}
+                        ${t.map((i,s)=>n`
+                                <li
+                                    aria-selected="false"
+                                    class="variable-list-item"
+                                    @mouseenter=${()=>this.activeIndex=s}
+                                    @mouseleave=${()=>this.activeIndex=void 0}
+                                    @focusin=${()=>this.activeIndex=s}
+                                    @focusout=${()=>this.activeIndex=void 0}
+                                    @click=${m=>{let u=m.currentTarget,K=u.querySelector('input[type="checkbox"]');K&&(u==null||u.setAttribute("aria-selected",`${K.checked}`))}}
+                                >
+                                    <div class="variable">
+                                        <label>
+                                            <input
+                                                data-variable=${i}
+                                                type="checkbox"
+                                                @change=${m=>{let u=m.currentTarget;l(this,F,_).call(this,i,u.checked)}}
+                                                style="display: none;"
+                                            />
+                                            <strong
+                                                >${i.dataFieldLongName}</strong
+                                            >
+                                            <span
+                                                >${i.dataProductShortName}_${i.dataProductVersion}
+                                                &bull;
+                                                ${i.dataProductTimeInterval}
+                                                &bull;
+                                                ${i.dataProductSpatialResolution}</span
+                                            >
+                                        </label>
+                                    </div>
+                                </li>
+                            `)}
+                    </ul>
+                </section>
+
+                <!-- RIGHT COLUMN -->
+                ${!e&&!t.length?g:n`
+                          <section class="right-column">
+                              ${this.activeIndex!==void 0?n`
+                                        <div class="sticky-element">
+                                            <p>
+                                                <label
+                                                    ><strong
+                                                        >Name in Data File:</strong
+                                                    ></label
+                                                >
+                                                ${t[this.activeIndex].dataFieldShortName}
+                                            </p>
+                                            <p>
+                                                <label><strong>Units:</strong></label>
+                                                ${t[this.activeIndex].dataFieldUnits}
+                                            </p>
+                                            <p>
+                                                <label
+                                                    ><strong
+                                                        >Temporal Coverage:</strong
+                                                    ></label
+                                                >
+                                                ${t[this.activeIndex].dataProductBeginDateTime}
+                                                –
+                                                ${t[this.activeIndex].dataProductEndDateTime}
+                                            </p>
+                                            <p>
+                                                <label
+                                                    ><strong
+                                                        >Region Coverage:</strong
+                                                    ></label
+                                                >
+                                                ${t[this.activeIndex].dataProductWest},
+                                                ${t[this.activeIndex].dataProductSouth},
+                                                ${t[this.activeIndex].dataProductEast},
+                                                ${t[this.activeIndex].dataProductNorth}
+                                            </p>
+                                            <p>
+                                                <label
+                                                    ><strong
+                                                        >Spatial Resolution:</strong
+                                                    ></label
+                                                >
+                                                ${t[this.activeIndex].dataProductSpatialResolution}
+                                            </p>
+                                            <p>
+                                                <label
+                                                    ><strong>Dataset:</strong></label
+                                                >
+                                                ${t[this.activeIndex].dataProductShortName}_${t[this.activeIndex].dataProductVersion}
+                                            </p>
+                                        </div>
+                                    `:n`<p class="placeholder">
+                                        Hover over a variable to see details
+                                    </p>`}
+                          </section>
+                      `}
+            </main>
+        </div> `},o.styles=[P,H],o.dependencies={"terra-variable-keyword-search":W,"terra-button":M,"terra-skeleton":Q,"terra-icon":B,"terra-loader":D,"terra-alert":N},h([U()],o.prototype,"catalog",2),h([U({attribute:"selected-variable-entry-ids",reflect:!0})],o.prototype,"selectedVariableEntryIds",2),h([v()],o.prototype,"searchQuery",2),h([v()],o.prototype,"selectedFacets",2),h([v()],o.prototype,"selectedVariables",2),h([v()],o.prototype,"showVariablesBrowse",2),h([v()],o.prototype,"activeIndex",2),h([v()],o.prototype,"sortOrder",2),h([E("selectedVariables")],o.prototype,"handleSelectedVariablesChange",1);export{o as a};

package/dist/chunks/chunk.PJYZ4R4F.js

@@ -0,0 +1 @@
+import{a as t}from"./chunk.HV3NQBOM.js";import*as e from"react";import{createComponent as r}from"@lit/react";var o="terra-button-group";t.define("terra-button-group");var a=r({tagName:o,elementClass:t,react:e,events:{},displayName:"TerraButtonGroup"}),c=a;export{c as a};

package/dist/chunks/chunk.PKYBMF7D.js

@@ -0,0 +1,30 @@
+import{a as n}from"./chunk.P5Z2X5RJ.js";import{a as m}from"./chunk.3TNPGXLM.js";import{a as s}from"./chunk.J5Q4TWEG.js";import{a as o,b as l}from"./chunk.NAMM3J43.js";import{e}from"./chunk.INFVQQSJ.js";import{classMap as c}from"lit/directives/class-map.js";import{html as a}from"lit";import{property as r,state as d}from"lit/decorators.js";var i=class extends l{constructor(){super(...arguments);this.hasError=!1;this.image="";this.label="";this.initials="";this.loading="eager";this.shape="circle"}handleImageChange(){this.hasError=!1}handleImageLoadError(){this.hasError=!0,this.emit("terra-error")}render(){let h=a`
+            <img
+                part="image"
+                class="avatar__image"
+                src="${this.image}"
+                loading="${this.loading}"
+                alt=""
+                @error="${this.handleImageLoadError}"
+            />
+        `,t=a``;return this.initials?t=a`<div part="initials" class="avatar__initials">
+                ${this.initials}
+            </div>`:t=a`
+                <div part="icon" class="avatar__icon" aria-hidden="true">
+                    <slot name="icon">
+                        <terra-icon
+                            name="solid-user"
+                            library="heroicons"
+                        ></terra-icon>
+                    </slot>
+                </div>
+            `,a`
+            <div
+                part="base"
+                class=${c({avatar:!0,"avatar--circle":this.shape==="circle","avatar--rounded":this.shape==="rounded","avatar--square":this.shape==="square"})}
+                role="img"
+                aria-label=${this.label}
+            >
+                ${this.image&&!this.hasError?h:t}
+            </div>
+        `}};i.styles=[o,n],i.dependencies={"terra-icon":m},e([d()],i.prototype,"hasError",2),e([r()],i.prototype,"image",2),e([r()],i.prototype,"label",2),e([r()],i.prototype,"initials",2),e([r()],i.prototype,"loading",2),e([r({reflect:!0})],i.prototype,"shape",2),e([s("image")],i.prototype,"handleImageChange",1);export{i as a};

package/dist/chunks/chunk.PNIB7OCC.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.GVXMLVLW.js";var p=e;e.define("terra-file-upload");export{p as a};

package/dist/chunks/chunk.PPDNREE3.js

@@ -0,0 +1,37 @@
+import{a as n}from"./chunk.CUJNKBC6.js";import{a as l}from"./chunk.6PEAAW4E.js";import{a as r}from"./chunk.J5Q4TWEG.js";import{a as h,b as d}from"./chunk.NAMM3J43.js";import{a as u}from"./chunk.VGCXMKGO.js";import{e}from"./chunk.INFVQQSJ.js";import{classMap as m}from"lit/directives/class-map.js";import{html as s}from"lit";import{property as a,query as c,state as v}from"lit/decorators.js";var t=class t extends d{constructor(){super(...arguments);this.hasSlotController=new l(this,"icon","suffix");this.open=!1;this.closable=!1;this.variant="information";this.appearance="filled";this.duration=1/0;this.remainingTime=this.duration}static get toastStack(){return this.currentToastStack||(this.currentToastStack=Object.assign(document.createElement("div"),{className:"terra-toast-stack"})),this.currentToastStack}firstUpdated(){this.base.hidden=!this.open}restartAutoHide(){this.handleCountdownChange(),clearTimeout(this.autoHideTimeout),clearInterval(this.remainingTimeInterval),this.open&&this.duration<1/0&&(this.autoHideTimeout=window.setTimeout(()=>this.hide(),this.duration),this.remainingTime=this.duration,this.remainingTimeInterval=window.setInterval(()=>{this.remainingTime-=100},100))}pauseAutoHide(){var i;(i=this.countdownAnimation)==null||i.pause(),clearTimeout(this.autoHideTimeout),clearInterval(this.remainingTimeInterval)}resumeAutoHide(){var i;this.duration<1/0&&(this.autoHideTimeout=window.setTimeout(()=>this.hide(),this.remainingTime),this.remainingTimeInterval=window.setInterval(()=>{this.remainingTime-=100},100),(i=this.countdownAnimation)==null||i.play())}handleCountdownChange(){if(this.open&&this.duration<1/0&&this.countdown){let{countdownElement:i}=this,p="100%",f="0";this.countdownAnimation=i.animate([{width:p},{width:f}],{duration:this.duration,easing:"linear"})}}handleCloseClick(){this.hide()}async handleOpenChange(){this.base.hidden=!this.open,this.open?(this.emit("terra-show"),this.duration<1/0&&this.restartAutoHide(),this.emit("terra-after-show")):(this.emit("terra-hide"),clearTimeout(this.autoHideTimeout),clearInterval(this.remainingTimeInterval),this.emit("terra-after-hide"))}handleDurationChange(){this.restartAutoHide()}async show(){if(!this.open)return this.open=!0,n(this,"terra-after-show")}async hide(){if(this.open)return this.open=!1,n(this,"terra-after-hide")}async toast(){return new Promise(i=>{this.handleCountdownChange(),t.toastStack.parentElement===null&&document.body.append(t.toastStack),t.toastStack.appendChild(this),requestAnimationFrame(()=>{this.clientWidth,this.show()}),this.addEventListener("terra-after-hide",()=>{t.toastStack.removeChild(this),i(),t.toastStack.querySelector("terra-alert")===null&&t.toastStack.remove()},{once:!0})})}render(){return s`
+            <div
+                part="base"
+                class=${m({alert:!0,"alert--open":this.open,"alert--closable":this.closable,"alert--has-countdown":!!this.countdown,"alert--has-icon":this.hasSlotController.test("icon"),"alert--information":this.variant==="information","alert--primary":this.variant==="primary","alert--success":this.variant==="success","alert--neutral":this.variant==="neutral","alert--warning":this.variant==="warning","alert--danger":this.variant==="danger","alert--filled":this.appearance==="filled","alert--white":this.appearance==="white","alert--subtle":this.appearance==="subtle"})}
+                role="alert"
+                aria-hidden=${this.open?"false":"true"}
+                @mouseenter=${this.pauseAutoHide}
+                @mouseleave=${this.resumeAutoHide}
+            >
+                <div part="icon" class="alert__icon">
+                    <slot name="icon"></slot>
+                </div>
+
+                <div part="message" class="alert__message" aria-live="polite">
+                    <slot></slot>
+                </div>
+
+                ${this.closable?s`
+                          <terra-icon
+                              class="alert__close-button"
+                              name="solid-x-mark"
+                              library="heroicons"
+                              @click=${this.handleCloseClick}
+                          ></terra-icon>
+                      `:""}
+
+                <div role="timer" class="alert__timer">${this.remainingTime}</div>
+
+                ${this.countdown?s`
+                          <div
+                              class=${m({alert__countdown:!0,"alert__countdown--ltr":this.countdown==="ltr"})}
+                          >
+                              <div class="alert__countdown-elapsed"></div>
+                          </div>
+                      `:""}
+            </div>
+        `}};t.styles=[h,u],e([c('[part~="base"]')],t.prototype,"base",2),e([c(".alert__countdown-elapsed")],t.prototype,"countdownElement",2),e([a({type:Boolean,reflect:!0})],t.prototype,"open",2),e([a({type:Boolean,reflect:!0})],t.prototype,"closable",2),e([a({reflect:!0})],t.prototype,"variant",2),e([a({reflect:!0})],t.prototype,"appearance",2),e([a({type:Number})],t.prototype,"duration",2),e([a({type:String,reflect:!0})],t.prototype,"countdown",2),e([v()],t.prototype,"remainingTime",2),e([r("open",{waitUntilFirstUpdate:!0})],t.prototype,"handleOpenChange",1),e([r("duration")],t.prototype,"handleDurationChange",1);var o=t;export{o as a};

package/dist/chunks/chunk.PPHWYBMI.js

@@ -0,0 +1,35 @@
+import{a as T}from"./chunk.YU2YXPZA.js";import{a as L}from"./chunk.A4KCKDEI.js";import{b as y}from"./chunk.6MJMMDNP.js";import{a as p,c as m}from"./chunk.VOQBVUDI.js";import{a as c,c as f}from"./chunk.U6R2SR47.js";import{a as u}from"./chunk.CUJNKBC6.js";import{a as d}from"./chunk.J5Q4TWEG.js";import{a as v,b as E}from"./chunk.NAMM3J43.js";import{e as n}from"./chunk.INFVQQSJ.js";import{classMap as w}from"lit/directives/class-map.js";import{html as M}from"lit";import{ifDefined as b}from"lit/directives/if-defined.js";import{property as a,query as g}from"lit/decorators.js";var i=class extends E{constructor(){super(...arguments);this.open=!1;this.placement="bottom-start";this.disabled=!1;this.stayOpenOnSelect=!1;this.distance=0;this.skidding=0;this.hoist=!1;this.hover=!1;this.hoverTimeout=null;this.hideTimeout=null;this.sync=void 0;this.handleKeyDown=e=>{this.open&&e.key==="Escape"&&(e.stopPropagation(),this.hide(),this.focusOnTrigger())};this.handleDocumentKeyDown=e=>{var t;if(e.key==="Escape"&&this.open&&!this.closeWatcher){e.stopPropagation(),this.focusOnTrigger(),this.hide();return}if(e.key==="Tab"){if(this.open&&((t=document.activeElement)==null?void 0:t.tagName.toLowerCase())==="terra-menu-item"){e.preventDefault(),this.hide(),this.focusOnTrigger();return}let s=(o,r)=>{if(!o)return null;let h=o.closest(r);if(h)return h;let l=o.getRootNode();return l instanceof ShadowRoot?s(l.host,r):null};setTimeout(()=>{var r;let o=((r=this.containingElement)==null?void 0:r.getRootNode())instanceof ShadowRoot?y():document.activeElement;(!this.containingElement||s(o,this.containingElement.tagName.toLowerCase())!==this.containingElement)&&this.hide()})}};this.handleDocumentMouseDown=e=>{let t=e.composedPath();this.containingElement&&!t.includes(this.containingElement)&&this.hide()};this.handlePanelSelect=e=>{let t=e.target;!this.stayOpenOnSelect&&t.tagName.toLowerCase()==="terra-menu"&&(this.hide(),this.focusOnTrigger())};this.handleTriggerMouseEnter=()=>{!this.hover||this.disabled||(this.hideTimeout!==null&&(clearTimeout(this.hideTimeout),this.hideTimeout=null),this.hoverTimeout=window.setTimeout(()=>{this.open||this.show(),this.hoverTimeout=null},150))};this.handleTriggerMouseLeave=()=>{this.hover&&(this.hoverTimeout!==null&&(clearTimeout(this.hoverTimeout),this.hoverTimeout=null),this.hideTimeout=window.setTimeout(()=>{this.open&&this.hide(),this.hideTimeout=null},200))};this.handlePanelMouseEnter=()=>{this.hover&&this.hideTimeout!==null&&(clearTimeout(this.hideTimeout),this.hideTimeout=null)};this.handlePanelMouseLeave=()=>{this.hover&&(this.hideTimeout=window.setTimeout(()=>{this.open&&this.hide(),this.hideTimeout=null},200))}}connectedCallback(){super.connectedCallback(),this.containingElement||(this.containingElement=this)}firstUpdated(){this.panel.hidden=!this.open,this.updateComplete.then(()=>{this.attachHoverListeners()}),this.open&&(this.addOpenListeners(),this.popup.active=!0,this.attachPanelHoverListeners())}disconnectedCallback(){super.disconnectedCallback(),this.removeOpenListeners(),this.removeHoverListeners(),this.hide(),this.hoverTimeout!==null&&(clearTimeout(this.hoverTimeout),this.hoverTimeout=null),this.hideTimeout!==null&&(clearTimeout(this.hideTimeout),this.hideTimeout=null)}removeHoverListeners(){var r,h;let t=(((r=this.trigger)==null?void 0:r.assignedElements({flatten:!0}))||[])[0];if(!t)return;let s=t;if(t.tagName.toLowerCase()==="terra-button"){let l=t.button;l&&(s=l)}s.removeEventListener("mouseenter",this.handleTriggerMouseEnter),s.removeEventListener("mouseleave",this.handleTriggerMouseLeave);let o=(h=this.popup)==null?void 0:h.popup;o&&(o.removeEventListener("mouseenter",this.handlePanelMouseEnter),o.removeEventListener("mouseleave",this.handlePanelMouseLeave))}focusOnTrigger(){let e=this.trigger.assignedElements({flatten:!0})[0];typeof(e==null?void 0:e.focus)=="function"&&e.focus()}getMenu(){return this.panel.assignedElements({flatten:!0}).find(e=>e.tagName.toLowerCase()==="terra-menu")}handleTriggerClick(){this.hover||(this.open?this.hide():(this.show(),this.focusOnTrigger()))}async handleTriggerKeyDown(e){if([" ","Enter"].includes(e.key)){e.preventDefault(),this.handleTriggerClick();return}let t=this.getMenu();if(t){let s=t.getAllItems(),o=s[0],r=s[s.length-1];["ArrowDown","ArrowUp","Home","End"].includes(e.key)&&(e.preventDefault(),this.open||(this.show(),await this.updateComplete),s.length>0&&this.updateComplete.then(()=>{(e.key==="ArrowDown"||e.key==="Home")&&(t.setCurrentItem(o),o.focus()),(e.key==="ArrowUp"||e.key==="End")&&(t.setCurrentItem(r),r.focus())}))}}handleTriggerKeyUp(e){e.key===" "&&e.preventDefault()}handleTriggerSlotChange(){this.updateAccessibleTrigger(),requestAnimationFrame(()=>{this.attachHoverListeners()})}attachHoverListeners(){if(!this.hover||!this.trigger)return;let t=this.trigger.assignedElements({flatten:!0})[0];if(!t)return;t.removeEventListener("mouseenter",this.handleTriggerMouseEnter),t.removeEventListener("mouseleave",this.handleTriggerMouseLeave);let s=t;if(t.tagName.toLowerCase()==="terra-button"){let o=t.button;o&&(s=o)}s.addEventListener("mouseenter",this.handleTriggerMouseEnter),s.addEventListener("mouseleave",this.handleTriggerMouseLeave)}attachPanelHoverListeners(){this.hover&&this.updateComplete.then(()=>{var t;let e=(t=this.popup)==null?void 0:t.popup;e&&(e.removeEventListener("mouseenter",this.handlePanelMouseEnter),e.removeEventListener("mouseleave",this.handlePanelMouseLeave),e.addEventListener("mouseenter",this.handlePanelMouseEnter),e.addEventListener("mouseleave",this.handlePanelMouseLeave))})}updateAccessibleTrigger(){}async show(){if(!this.open)return this.open=!0,u(this,"terra-after-show")}async hide(){if(this.open)return this.open=!1,u(this,"terra-after-hide")}reposition(){this.popup.reposition()}addOpenListeners(){var e;this.panel.addEventListener("terra-select",this.handlePanelSelect),"CloseWatcher"in window?((e=this.closeWatcher)==null||e.destroy(),this.closeWatcher=new CloseWatcher,this.closeWatcher.onclose=()=>{this.hide(),this.focusOnTrigger()}):this.panel.addEventListener("keydown",this.handleKeyDown),document.addEventListener("keydown",this.handleDocumentKeyDown),document.addEventListener("mousedown",this.handleDocumentMouseDown)}removeOpenListeners(){var e;this.panel&&(this.panel.removeEventListener("terra-select",this.handlePanelSelect),this.panel.removeEventListener("keydown",this.handleKeyDown)),document.removeEventListener("keydown",this.handleDocumentKeyDown),document.removeEventListener("mousedown",this.handleDocumentMouseDown),(e=this.closeWatcher)==null||e.destroy()}async handleOpenChange(){if(this.disabled){this.open=!1;return}if(this.updateAccessibleTrigger(),this.open){this.emit("terra-show"),this.addOpenListeners(),this.attachPanelHoverListeners(),await m(this),this.panel.hidden=!1,this.popup.active=!0;let{keyframes:e,options:t}=f(this,"dropdown.show",{dir:"ltr"});await p(this.popup.popup,e,t),this.emit("terra-after-show")}else{this.emit("terra-hide"),this.removeOpenListeners(),await m(this);let{keyframes:e,options:t}=f(this,"dropdown.hide",{dir:"ltr"});await p(this.popup.popup,e,t),this.panel.hidden=!0,this.popup.active=!1,this.emit("terra-after-hide")}}handleHoverChange(){this.attachHoverListeners()}render(){return M`
+            <terra-popup
+                part="base"
+                exportparts="popup:base__popup"
+                id="dropdown"
+                placement=${this.placement}
+                distance=${this.distance}
+                skidding=${this.skidding}
+                strategy=${this.hoist?"fixed":"absolute"}
+                flip
+                shift
+                auto-size="vertical"
+                auto-size-padding="10"
+                sync=${b(this.sync?this.sync:void 0)}
+                class=${w({dropdown:!0,"dropdown--open":this.open})}
+            >
+                <slot
+                    name="trigger"
+                    slot="anchor"
+                    part="trigger"
+                    class="dropdown__trigger"
+                    @click=${this.handleTriggerClick}
+                    @keydown=${this.handleTriggerKeyDown}
+                    @keyup=${this.handleTriggerKeyUp}
+                    @slotchange=${this.handleTriggerSlotChange}
+                ></slot>
+
+                <div
+                    aria-hidden=${this.open?"false":"true"}
+                    aria-labelledby="dropdown"
+                >
+                    <slot part="panel" class="dropdown__panel"></slot>
+                </div>
+            </terra-popup>
+        `}};i.styles=[v,L],i.dependencies={"terra-popup":T},n([g(".dropdown")],i.prototype,"popup",2),n([g(".dropdown__trigger")],i.prototype,"trigger",2),n([g(".dropdown__panel")],i.prototype,"panel",2),n([a({type:Boolean,reflect:!0})],i.prototype,"open",2),n([a({reflect:!0})],i.prototype,"placement",2),n([a({type:Boolean,reflect:!0})],i.prototype,"disabled",2),n([a({attribute:"stay-open-on-select",type:Boolean,reflect:!0})],i.prototype,"stayOpenOnSelect",2),n([a({attribute:!1})],i.prototype,"containingElement",2),n([a({type:Number})],i.prototype,"distance",2),n([a({type:Number})],i.prototype,"skidding",2),n([a({type:Boolean})],i.prototype,"hoist",2),n([a({type:Boolean,reflect:!0})],i.prototype,"hover",2),n([a({reflect:!0})],i.prototype,"sync",2),n([d("open",{waitUntilFirstUpdate:!0})],i.prototype,"handleOpenChange",1),n([d("hover",{waitUntilFirstUpdate:!0})],i.prototype,"handleHoverChange",1);c("dropdown.show",{keyframes:[{opacity:0,scale:.9},{opacity:1,scale:1}],options:{duration:100,easing:"ease"}});c("dropdown.hide",{keyframes:[{opacity:1,scale:1},{opacity:0,scale:.9}],options:{duration:100,easing:"ease"}});export{i as a};

package/dist/chunks/chunk.PVRQVGN6.js

@@ -0,0 +1,99 @@
+import{a as P}from"./chunk.GZVB4XR2.js";import{a as V}from"./chunk.RKVLJUJG.js";import{a as $}from"./chunk.W5BWSIPL.js";import{a as _}from"./chunk.VT3U2SB7.js";import{a as k}from"./chunk.YGK2DL4Z.js";import{a as y}from"./chunk.WZ74OBKA.js";import{a as b,b as v}from"./chunk.NAMM3J43.js";import{e as r,f as e,g as n,i as o}from"./chunk.INFVQQSJ.js";import{html as a,nothing as S}from"lit";import{property as u,state as C,query as q}from"lit/decorators.js";import{TaskStatus as w}from"@lit/task";var t,h,E,g,T,l,c,d,I,f,N,s=class extends v{constructor(){super(...arguments);n(this,h);n(this,g);n(this,l);n(this,d);n(this,f);this.username="";this.password="";this.hidePasswordToggle=!1;this.autoLogin=!1;this.usernameError="";this.passwordError="";n(this,t,new _(this))}firstUpdated(){this.username&&this.password&&(this.hidePasswordToggle=!0,this.autoLogin&&e(this,t).loginTask.run([this.username,this.password]))}render(){var i;return a`
+            <div class="login-container">
+                <div class="login-header">
+                    <a>
+                        <terra-icon name="nasa-logo"></terra-icon>
+                        <h1>Earthdata Login</h1>
+                    </a>
+                    <a
+                        href="https://urs.earthdata.nasa.gov/documentation/what_do_i_need_to_know"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        class="help-link"
+                        aria-label="Need help?"
+                    >
+                        <terra-icon name="question"></terra-icon>
+                    </a>
+                </div>
+
+                ${(i=e(this,t).state.user)!=null&&i.uid?a`<div class="login-form">
+                          <p>
+                              ${e(this,t).state.user.first_name},<br />
+                              You've successfully authenticated with Earthdata Login!
+                          </p>
+                          <terra-button
+                              @click=${()=>e(this,t).logout()}
+                              size="small"
+                              outline
+                              >Logout</terra-button
+                          >
+                      </div>`:a`
+                          <form class="login-form" @submit=${o(this,f,N)}>
+                              <terra-input
+                                  id="username-input"
+                                  label="Username"
+                                  name="username"
+                                  type="text"
+                                  .value=${this.username}
+                                  ?disabled=${e(this,t).loginTask.status===w.PENDING}
+                                  autocomplete="username"
+                                  .errorText=${this.usernameError||""}
+                                  required
+                                  @input=${o(this,h,E)}
+                                  @blur=${o(this,l,c)}
+                              ></terra-input>
+
+                              <terra-input
+                                  id="password-input"
+                                  label="Password"
+                                  name="password"
+                                  type="password"
+                                  autocomplete="current-password"
+                                  ?password-toggle=${!this.hidePasswordToggle}
+                                  ?disabled=${e(this,t).loginTask.status===w.PENDING}
+                                  .value=${this.password}
+                                  .errorText=${this.passwordError||""}
+                                  required
+                                  @input=${o(this,g,T)}
+                                  @blur=${o(this,d,I)}
+                              ></terra-input>
+
+                              <terra-button
+                                  type="submit"
+                                  variant="primary"
+                                  class="login-button"
+                                  ?disabled=${e(this,t).loginTask.status===w.PENDING}
+                              >
+                                  ${e(this,t).loginTask.render({initial:()=>a`Log in`,pending:()=>a`Logging In...`,complete:()=>a`Log in`,error:()=>a`Log in`})}
+                              </terra-button>
+
+                              ${e(this,t).state.error?a`<div class="form-feedback">
+                                        ${e(this,t).state.error}
+                                        ${e(this,t).state.error==="Invalid user credentials"?a`<p>
+                                                  <a
+                                                      class="link"
+                                                      href="https://urs.earthdata.nasa.gov/retrieve_info"
+                                                      target="_blank"
+                                                      rel="noopener noreferrer"
+                                                      >Forgot username?</a
+                                                  >
+                                                  <a
+                                                      class="link"
+                                                      href="https://urs.earthdata.nasa.gov/reset_passwords/new"
+                                                      target="_blank"
+                                                      rel="noopener noreferrer"
+                                                      >Forgot password?</a
+                                                  >
+                                              </p>`:S}
+                                    </div>`:""}
+                              <a
+                                  class="link register-link"
+                                  href="https://urs.earthdata.nasa.gov/users/new"
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                  >Register for a profile</a
+                              >
+                          </form>
+                      `}
+            </div>
+        `}};t=new WeakMap,h=new WeakSet,E=function(i){var p;let m=i.target;this.username=m.value,this.usernameError&&this.username&&((p=this.usernameInput)!=null&&p.checkValidity())&&(this.usernameError="",this.usernameInput&&this.usernameInput.setCustomValidity(""))},g=new WeakSet,T=function(i){var p;let m=i.target;this.password=m.value,this.passwordError&&this.password&&((p=this.passwordInput)!=null&&p.checkValidity())&&(this.passwordError="",this.passwordInput&&this.passwordInput.setCustomValidity(""))},l=new WeakSet,c=function(){!this.username||this.username.trim()===""?(this.usernameError="Username is required",this.usernameInput&&this.usernameInput.setCustomValidity("Username is required")):(this.usernameError="",this.usernameInput&&this.usernameInput.setCustomValidity(""))},d=new WeakSet,I=function(){!this.password||this.password.trim()===""?(this.passwordError="Password is required",this.passwordInput&&this.passwordInput.setCustomValidity("Password is required")):(this.passwordError="",this.passwordInput&&this.passwordInput.setCustomValidity(""))},f=new WeakSet,N=function(i){i.preventDefault(),o(this,l,c).call(this),o(this,d,I).call(this),i.target.checkValidity()&&this.username&&this.password?e(this,t).loginTask.run([this.username,this.password]):(this.usernameInput&&this.usernameInput.reportValidity(),this.passwordInput&&this.passwordInput.reportValidity())},s.dependencies={"terra-button":y,"terra-icon":k,"terra-input":P,"terra-loader":$},s.styles=[b,V],r([u({attribute:"logged-in-message"})],s.prototype,"loggedInMessage",2),r([u({attribute:"logged-out-message"})],s.prototype,"loggedOutMessage",2),r([u({attribute:"loading-message"})],s.prototype,"loadingMessage",2),r([u()],s.prototype,"username",2),r([u()],s.prototype,"password",2),r([u({attribute:"hide-password-toggle",type:Boolean})],s.prototype,"hidePasswordToggle",2),r([u({attribute:"auto-login",type:Boolean})],s.prototype,"autoLogin",2),r([C()],s.prototype,"usernameError",2),r([C()],s.prototype,"passwordError",2),r([q("#username-input")],s.prototype,"usernameInput",2),r([q("#password-input")],s.prototype,"passwordInput",2);export{s as a};