@nasa-terra/components 0.0.192 → 0.0.194

package/dist/chunks/chunk.YCOSKKGZ.js

@@ -0,0 +1,67 @@
+import{a as k}from"./chunk.W6DGR4DK.js";import{c as v}from"./chunk.77X2UDZ7.js";import{a as E}from"./chunk.DWUSSCJJ.js";import{a as p}from"./chunk.J5Q4TWEG.js";import{a as y,b as S}from"./chunk.AXHBILJ4.js";import{a as g,e as r}from"./chunk.INFVQQSJ.js";var _=(h,d)=>{let t=0;return function(...i){window.clearTimeout(t),t=window.setTimeout(()=>{h.call(this,...i)},d)}},A=(h,d,t)=>{let i=h[d];h[d]=function(...e){i.call(this,...e),t.call(this,i,...e)}},M="onscrollend"in window;if(!M){let h=new Set,d=new WeakMap,t=e=>{for(let s of e.changedTouches)h.add(s.identifier)},i=e=>{for(let s of e.changedTouches)h.delete(s.identifier)};document.addEventListener("touchstart",t,!0),document.addEventListener("touchend",i,!0),document.addEventListener("touchcancel",i,!0),A(EventTarget.prototype,"addEventListener",function(e,s){if(s!=="scrollend")return;let a=_(()=>{h.size?a():this.dispatchEvent(new Event("scrollend"))},100);e.call(this,"scroll",a,{passive:!0}),d.set(this,a)}),A(EventTarget.prototype,"removeEventListener",function(e,s){if(s!=="scrollend")return;let a=d.get(this);a&&e.call(this,"scroll",a,{passive:!0})})}import{classMap as m}from"lit/directives/class-map.js";import{eventOptions as O,property as u,query as f,state as T}from"lit/decorators.js";import{html as w}from"lit";var n=class extends S{constructor(){super(...arguments);this.tabs=[];this.focusableTabs=[];this.panels=[];this.hasScrollControls=!1;this.shouldHideScrollStartButton=!1;this.shouldHideScrollEndButton=!1;this.placement="top";this.activation="auto";this.noScrollControls=!1;this.fixedScrollControls=!1;this.size="large";this.scrollOffset=1}connectedCallback(){let t=Promise.all([customElements.whenDefined("terra-tab"),customElements.whenDefined("terra-tab-panel")]);super.connectedCallback(),this.resizeObserver=new ResizeObserver(()=>{this.repositionIndicator(),this.updateScrollControls()}),this.mutationObserver=new MutationObserver(i=>{let e=i.filter(({target:s})=>{if(s===this)return!0;if(s.closest("terra-tabs")!==this)return!1;let a=s.tagName.toLowerCase();return a==="terra-tab"||a==="terra-tab-panel"});if(e.length!==0){if(e.some(s=>!["aria-labelledby","aria-controls"].includes(s.attributeName))&&setTimeout(()=>this.setAriaLabels()),e.some(s=>s.attributeName==="disabled"))this.syncTabsAndPanels();else if(e.some(s=>s.attributeName==="active")){let a=e.filter(c=>c.attributeName==="active"&&c.target.tagName.toLowerCase()==="terra-tab").map(c=>c.target).find(c=>c.active);a&&this.setActiveTab(a)}}}),this.updateComplete.then(()=>{this.syncTabsAndPanels(),this.mutationObserver.observe(this,{attributes:!0,attributeFilter:["active","disabled","name","panel"],childList:!0,subtree:!0}),this.nav&&this.resizeObserver.observe(this.nav),t.then(()=>{let i=new IntersectionObserver((e,s)=>{var a;e[0].intersectionRatio>0&&(this.setAriaLabels(),this.setActiveTab((a=this.getActiveTab())!=null?a:this.tabs[0],{emitEvents:!1}),s.unobserve(e[0].target))});this.tabsElement&&i.observe(this.tabsElement)})})}disconnectedCallback(){var t,i;super.disconnectedCallback(),(t=this.mutationObserver)==null||t.disconnect(),this.nav&&((i=this.resizeObserver)==null||i.unobserve(this.nav))}getAllTabs(){return this.shadowRoot.querySelector('slot[name="nav"]').assignedElements()}getAllPanels(){return[...this.body.assignedElements()].filter(t=>t.tagName.toLowerCase()==="terra-tab-panel")}getActiveTab(){return this.tabs.find(t=>t.active)}handleClick(t){let e=t.target.closest("terra-tab");(e==null?void 0:e.closest("terra-tabs"))===this&&e!==null&&this.setActiveTab(e,{scrollBehavior:"smooth"})}handleKeyDown(t){let e=t.target.closest("terra-tab");if((e==null?void 0:e.closest("terra-tabs"))===this&&(["Enter"," "].includes(t.key)&&e!==null&&(this.setActiveTab(e,{scrollBehavior:"smooth"}),t.preventDefault()),["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key))){let a=this.tabs.find(l=>l.matches(":focus")),c=getComputedStyle(this).direction==="rtl",o=null;if((a==null?void 0:a.tagName.toLowerCase())==="terra-tab"){if(t.key==="Home")o=this.focusableTabs[0];else if(t.key==="End")o=this.focusableTabs[this.focusableTabs.length-1];else if(["top","bottom"].includes(this.placement)&&t.key===(c?"ArrowRight":"ArrowLeft")||["start","end"].includes(this.placement)&&t.key==="ArrowUp"){let l=this.tabs.findIndex(b=>b===a);o=this.findNextFocusableTab(l,"backward")}else if(["top","bottom"].includes(this.placement)&&t.key===(c?"ArrowLeft":"ArrowRight")||["start","end"].includes(this.placement)&&t.key==="ArrowDown"){let l=this.tabs.findIndex(b=>b===a);o=this.findNextFocusableTab(l,"forward")}if(!o)return;o.tabIndex=0,o.focus({preventScroll:!0}),this.activation==="auto"?this.setActiveTab(o,{scrollBehavior:"smooth"}):this.tabs.forEach(l=>{l.tabIndex=l===o?0:-1}),["top","bottom"].includes(this.placement)&&v(o,this.nav,"horizontal"),t.preventDefault()}}}handleScrollToStart(){let t=getComputedStyle(this).direction==="rtl";this.nav.scroll({left:t?this.nav.scrollLeft+this.nav.clientWidth:this.nav.scrollLeft-this.nav.clientWidth,behavior:"smooth"})}handleScrollToEnd(){let t=getComputedStyle(this).direction==="rtl";this.nav.scroll({left:t?this.nav.scrollLeft-this.nav.clientWidth:this.nav.scrollLeft+this.nav.clientWidth,behavior:"smooth"})}setActiveTab(t,i){if(i=g({emitEvents:!0,scrollBehavior:"auto"},i),t!==this.activeTab&&!t.disabled){let e=this.activeTab;this.activeTab=t,this.tabs.forEach(s=>{s.active=s===this.activeTab,s.tabIndex=s===this.activeTab?0:-1}),this.panels.forEach(s=>{var a;return s.active=s.name===((a=this.activeTab)==null?void 0:a.panel)}),this.syncIndicator(),["top","bottom"].includes(this.placement)&&v(this.activeTab,this.nav,"horizontal",i.scrollBehavior),i.emitEvents&&(e&&this.emit("terra-tab-hide",{detail:{name:e.panel}}),this.emit("terra-tab-show",{detail:{name:this.activeTab.panel}}))}}setAriaLabels(){this.tabs.forEach(t=>{let i=this.panels.find(e=>e.name===t.panel);i&&(t.setAttribute("aria-controls",i.getAttribute("id")),i.setAttribute("aria-labelledby",t.getAttribute("id")))})}repositionIndicator(){let t=this.getActiveTab();if(!t)return;let i=t.clientWidth,e=t.clientHeight,s=getComputedStyle(this).direction==="rtl",a=this.getAllTabs(),o=a.slice(0,a.indexOf(t)).reduce((l,b)=>({left:l.left+b.clientWidth,top:l.top+b.clientHeight}),{left:0,top:0});switch(this.placement){case"top":case"bottom":this.indicator.style.width=`${i}px`,this.indicator.style.translate=s?`${-1*o.left}px`:`${o.left}px`;break;case"start":case"end":this.indicator.style.height=`${e}px`,this.indicator.style.translate=`0 ${o.top}px`;break}}syncTabsAndPanels(){this.tabs=this.getAllTabs(),this.focusableTabs=this.tabs.filter(t=>!t.disabled),this.tabs.forEach(t=>{t.hasAttribute("size")||(t.size=this.size)}),this.panels=this.getAllPanels(),this.syncIndicator(),this.updateComplete.then(()=>this.updateScrollControls())}findNextFocusableTab(t,i){let e=null,s=i==="forward"?1:-1,a=t+s;for(;t<this.tabs.length;){if(e=this.tabs[a]||null,e===null){i==="forward"?e=this.focusableTabs[0]:e=this.focusableTabs[this.focusableTabs.length-1];break}if(!e.disabled)break;a+=s}return e}updateScrollButtons(){this.hasScrollControls&&!this.fixedScrollControls&&(this.shouldHideScrollStartButton=this.scrollFromStart()<=this.scrollOffset,this.shouldHideScrollEndButton=this.isScrolledToEnd())}isScrolledToEnd(){return this.scrollFromStart()+this.nav.clientWidth>=this.nav.scrollWidth-this.scrollOffset}scrollFromStart(){return getComputedStyle(this).direction==="rtl"?-this.nav.scrollLeft:this.nav.scrollLeft}updateScrollControls(){this.noScrollControls?this.hasScrollControls=!1:this.hasScrollControls=["top","bottom"].includes(this.placement)&&this.nav.scrollWidth>this.nav.clientWidth+1,this.updateScrollButtons()}syncIndicator(){this.getActiveTab()?(this.indicator.style.display="block",this.repositionIndicator()):this.indicator.style.display="none"}syncSize(){this.tabs.forEach(t=>{t.hasAttribute("size")||(t.size=this.size)})}show(t){let i=this.tabs.find(e=>e.panel===t);i&&this.setActiveTab(i,{scrollBehavior:"smooth"})}render(){let t=getComputedStyle(this).direction==="rtl";return w`
+            <div
+                part="base"
+                class=${m({tabs:!0,"tabs--top":this.placement==="top","tabs--bottom":this.placement==="bottom","tabs--start":this.placement==="start","tabs--end":this.placement==="end","tabs--rtl":t,"tabs--has-scroll-controls":this.hasScrollControls,"tabs--large":this.size==="large","tabs--small":this.size==="small"})}
+                @click=${this.handleClick}
+                @keydown=${this.handleKeyDown}
+            >
+                <div class="tabs__nav-container" part="nav">
+                    ${this.hasScrollControls?w`
+                              <button
+                                  part="scroll-button scroll-button--start"
+                                  class=${m({"tabs__scroll-button":!0,"tabs__scroll-button--start":!0,"tabs__scroll-button--start--hidden":this.shouldHideScrollStartButton})}
+                                  tabindex="-1"
+                                  aria-hidden="true"
+                                  aria-label="Scroll to start"
+                                  @click=${this.handleScrollToStart}
+                                  type="button"
+                              >
+                                  <terra-icon
+                                      name=${t?"chevron-right":"chevron-left"}
+                                      library="heroicons"
+                                      font-size="1rem"
+                                  ></terra-icon>
+                              </button>
+                          `:""}
+
+                    <div class="tabs__nav" @scrollend=${this.updateScrollButtons}>
+                        <div part="tabs" class="tabs__tabs" role="tablist">
+                            <div
+                                part="active-tab-indicator"
+                                class="tabs__indicator"
+                            ></div>
+                            <div class="tabs__resize-observer">
+                                <slot
+                                    name="nav"
+                                    @slotchange=${this.syncTabsAndPanels}
+                                ></slot>
+                            </div>
+                        </div>
+                    </div>
+
+                    ${this.hasScrollControls?w`
+                              <button
+                                  part="scroll-button scroll-button--end"
+                                  class=${m({"tabs__scroll-button":!0,"tabs__scroll-button--end":!0,"tabs__scroll-button--end--hidden":this.shouldHideScrollEndButton})}
+                                  tabindex="-1"
+                                  aria-hidden="true"
+                                  aria-label="Scroll to end"
+                                  @click=${this.handleScrollToEnd}
+                                  type="button"
+                              >
+                                  <terra-icon
+                                      name=${t?"chevron-left":"chevron-right"}
+                                      library="heroicons"
+                                      font-size="1rem"
+                                  ></terra-icon>
+                              </button>
+                          `:""}
+                </div>
+
+                <slot
+                    part="body"
+                    class="tabs__body"
+                    @slotchange=${this.syncTabsAndPanels}
+                ></slot>
+            </div>
+        `}};n.styles=[y,k],n.dependencies={"terra-icon":E},r([f(".tabs")],n.prototype,"tabsElement",2),r([f(".tabs__body")],n.prototype,"body",2),r([f(".tabs__nav")],n.prototype,"nav",2),r([f(".tabs__indicator")],n.prototype,"indicator",2),r([T()],n.prototype,"hasScrollControls",2),r([T()],n.prototype,"shouldHideScrollStartButton",2),r([T()],n.prototype,"shouldHideScrollEndButton",2),r([u()],n.prototype,"placement",2),r([u()],n.prototype,"activation",2),r([u({attribute:"no-scroll-controls",type:Boolean})],n.prototype,"noScrollControls",2),r([u({attribute:"fixed-scroll-controls",type:Boolean})],n.prototype,"fixedScrollControls",2),r([u({reflect:!0})],n.prototype,"size",2),r([O({passive:!0})],n.prototype,"updateScrollButtons",1),r([p("noScrollControls",{waitUntilFirstUpdate:!0})],n.prototype,"updateScrollControls",1),r([p("placement",{waitUntilFirstUpdate:!0})],n.prototype,"syncIndicator",1),r([p("size",{waitUntilFirstUpdate:!0})],n.prototype,"syncSize",1);export{n as a};

package/dist/chunks/chunk.YDK4KHPK.js

@@ -0,0 +1 @@
+import{a as r}from"./chunk.J6S26VCB.js";import*as e from"react";import{createComponent as t}from"@lit/react";import"@lit/react";var a="terra-avatar";r.define("terra-avatar");var o=t({tagName:a,elementClass:r,react:e,events:{onTerraError:"terra-error"},displayName:"TerraAvatar"}),f=o;export{f as a};