@esri/calcite-components/dist/calcite/VXVHDZ57.js

Web Components for Esri's Calcite Design System.

/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
v3.2.1 */
import{b as m}from"./5RDOSP2E.js";import{v as f,w as u}from"./3ADX47DD.js";import"./NNVH7JUI.js";import{E as b,F as h,R as p,c as d,d as n}from"./BJZTU5BQ.js";var g={section:"section"},x={titleGroup:"title-group"},v=d`:host{display:flex;flex-direction:column}:host([bordered]){box-shadow:inset 0 1px 0 var(--calcite-tab-border-color, var(--calcite-color-border-1));background-color:var(--calcite-tab-background-color, var(--calcite-color-foreground-1))}:host([bordered]) section{border-color:var(--calcite-tab-border-color, var(--calcite-color-border-1));border-style:solid}section{display:flex;flex-grow:1;overflow:hidden;border-width:1px;border-block-start-style:solid;border-block-start-color:var(--calcite-tab-border-color, var(--calcite-color-border-1))}:host([bordered][position=bottom]){box-shadow:inset 0 1px 0 var(--calcite-tab-border-color, var(--calcite-color-border-1)),inset 0 -1px 0 var(--calcite-tab-border-color, var(--calcite-color-border-1))}:host([bordered]:not([position=bottom])) ::slotted(calcite-tab-nav){margin-block-end:-1px}:host([position=bottom]){flex-direction:column-reverse}:host([position=bottom]) section{flex-direction:column-reverse;border-block-start-width:0px;border-block-end-width:1px}:host([bordered][scale=s]) section{padding:.75rem}:host([bordered][scale=m]) section{padding:.5rem}:host([bordered][scale=l]) section{padding:1rem}:host([position=bottom]:not([bordered])) section{border-block-end-style:solid;border-block-end-color:var(--calcite-tab-border-color, var(--calcite-color-border-1))}@media (forced-colors: active){:host([bordered]) section{border-block-start-width:0px;border-block-end-width:1px}:host([position=bottom][bordered]) section{border-block-start-width:1px;border-block-end-width:0px}}:host([hidden]){display:none}[hidden]{display:none}`,c=class extends b{constructor(){super(),this.tabs=[],this.titles=[],this.bordered=!1,this.layout="inline",this.position="top",this.scale="m",this.listen("calciteInternalTabNavSlotChange",this.calciteInternalTabNavSlotChangeHandler)}static{this.properties={tabs:[16,{},{state:!0}],titles:[16,{},{state:!0}],bordered:[5,{},{type:Boolean}],layout:[3,{},{reflect:!0}],position:[3,{},{reflect:!0}],scale:[3,{},{reflect:!0}]}}static{this.styles=v}connectedCallback(){super.connectedCallback(),this.updateItems()}load(){this.updateItems()}willUpdate(e){(e.has("position")&&(this.hasUpdated||this.position!=="top")||e.has("scale")&&(this.hasUpdated||this.scale!=="m"))&&this.updateItems(),(e.has("titles")||e.has("tabs"))&&this.hasUpdated&&this.titles?.length>0&&this.tabs?.length>0&&(this.updateAriaSettings(),this.updateItems())}calciteInternalTabNavSlotChangeHandler(e){e.stopPropagation(),e.detail.length!==this.titles.length&&(this.titles=e.detail)}defaultSlotChangeHandler(e){this.tabs=f(e,"calcite-tab")}async updateAriaSettings(){await this.componentOnReady();let e,r,o=u(this.slotEl,"calcite-tab");if(o.some(t=>t.tab)||this.titles.some(t=>t.tab))e=o.sort((t,a)=>t.tab.localeCompare(a.tab)).map(t=>t.id),r=this.titles.sort((t,a)=>t.tab.localeCompare(a.tab)).map(t=>t.id);else{let t=await Promise.all(o.map(s=>s.getTabIndex())),a=await Promise.all(this.titles.map(s=>s.getTabIndex()));e=t.reduce((s,i,l)=>(s[i]=o[l].id,s),[]),r=a.reduce((s,i,l)=>(s[i]=this.titles[l].id,s),[])}o.forEach(t=>t._updateAriaInfo(e,r)),this.titles.forEach(t=>t._updateAriaInfo(e,r))}updateItems(){let{position:e,scale:r}=this,o=this.el.querySelector("calcite-tab-nav");o&&(o.position=e,o.scale=r),Array.from(this.el.querySelectorAll("calcite-tab")).forEach(t=>{t.parentElement===this.el&&(t.scale=r)}),Array.from(this.el.querySelectorAll("calcite-tab-nav > calcite-tab-title")).forEach(t=>{t.position=e,t.scale=r})}setDefaultSlotRef(e){this.slotEl=e}render(){return n`<slot name=${x.titleGroup}></slot><section class=${h(g.section)}><slot @slotchange=${this.defaultSlotChangeHandler} ${m(this.setDefaultSlotRef)}></slot></section>`}};p("calcite-tabs",c);export{c as Tabs};