@trimble-oss/moduswebcomponents/modus-wc/p-32cc98f1.entry.js

Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust

import{r as o,d as a,h as s,e as c,g as d,F as t}from"./p-C1-Dpkp7.js";import{h as r}from"./p-tWS3Egrk.js";import{i as m}from"./p-DJ2rBB6r.js";const e=class{constructor(s){o(this,s),this.tabChange=a(this,"tabChange",7),this.inheritedAttributes={},this.activeTabIndex=0,this.customClass="",this.size="md",this.tabs=[],this.tabStyle="bordered"}componentWillLoad(){r(this.el),this.el.ariaLabel||(this.el.ariaLabel="Tab Group"),this.tabs&&0!==this.tabs.length||console.error("ModusWcTabs: tab data is required."),this.inheritedAttributes=m(this.el)}handleClick(o,a){o.disabled||(this.tabChange.emit({previousTab:this.activeTabIndex,newTab:a}),this.activeTabIndex=a)}getClasses(){const o=["modus-wc-tabs"],a=(({tabStyle:o,size:a})=>{let s="";if(o)switch(o){case"boxed":s=`${s} modus-wc-tabs-boxed`;break;case"bordered":s=`${s} modus-wc-tabs-bordered`;break;case"lifted":s=`${s} modus-wc-tabs-lifted`}if(a)switch(a){case"xs":s=`${s} modus-wc-tabs-xs`;break;case"sm":s=`${s} modus-wc-tabs-sm`;break;case"md":s=`${s} modus-wc-tabs-md`;break;case"lg":s=`${s} modus-wc-tabs-lg`}return s.trim()})({tabStyle:this.tabStyle,size:this.size});return a&&o.push(a),this.customClass&&o.push(this.customClass),o.join(" ")}getTabClasses(o,a){const s=["modus-wc-tab"],c=(({active:o,disabled:a})=>{let s="";return o&&(s=`${s} modus-wc-tab-active`),a&&(s=`${s} modus-wc-tab-disabled`),s.trim()})({active:a===this.activeTabIndex,disabled:o.disabled});return c&&s.push(c),o.customClass&&s.push(o.customClass),s.join(" ")}render(){const o=o=>void 0===o.label?o.icon&&s("modus-wc-icon",{name:o.icon,size:this.size}):s(t,null,o.icon&&"left"===o.iconPosition&&s("modus-wc-icon",{name:o.icon,size:this.size}),s("span",null,o.label),o.icon&&"right"===o.iconPosition&&s("modus-wc-icon",{name:o.icon,size:this.size})),a=this.tabs.map(((a,c)=>{var d;return s("button",{role:"tab","aria-disabled":a.disabled,"aria-label":null!==(d=a.label)&&void 0!==d?d:a.icon,class:this.getTabClasses(a,c),disabled:a.disabled,id:`tab-${c}`,onClick:()=>this.handleClick(a,c)},a.slotName?s("slot",{name:a.slotName}):o(a))}));return s(c,{key:"865be58a83883b030b4e25d32904b93cd042aabd"},s("div",Object.assign({key:"2ba994e7575fbaf87cfae2966c5e9343734c5138",role:"tablist",class:this.getClasses()},this.inheritedAttributes),a),s("div",{key:"506968e99961bdaa7ab77b171e05dfd0d37cfb20",class:"modus-wc-tab-panel",role:"tabpanel",tabIndex:0},this.tabs.map(((o,a)=>s("div",{class:this.activeTabIndex===a?"modus-wc-tab-active":void 0,hidden:this.activeTabIndex!==a},s("slot",{name:`tab-${a}`}))))))}get el(){return d(this)}};e.style="modus-wc-tabs .modus-wc-tab modus-wc-icon+span,modus-wc-tabs .modus-wc-tab span+modus-wc-icon{padding-inline-start:var(--modus-wc-spacing-xs)}modus-wc-tabs .modus-wc-tabs{align-items:center;display:inline-flex;font-weight:var(--modus-wc-font-weight-bold)}modus-wc-tabs .modus-wc-tabs-xs{height:var(--modus-wc-size-xs);min-height:var(--modus-wc-size-xs)}modus-wc-tabs .modus-wc-tabs-sm{height:var(--modus-wc-size-sm);min-height:var(--modus-wc-size-sm)}modus-wc-tabs .modus-wc-tabs-md{height:var(--modus-wc-size-md);min-height:var(--modus-wc-size-md)}modus-wc-tabs .modus-wc-tabs-lg{height:var(--modus-wc-size-lg);min-height:var(--modus-wc-size-lg)}modus-wc-tabs .modus-wc-tabs-xl{height:var(--modus-wc-size-xl);min-height:var(--modus-wc-size-xl)}modus-wc-tabs .modus-wc-tabs modus-wc-icon .modus-wc-icon--xs{line-height:calc(var(--modus-wc-line-height-xs) + 0.25rem)}modus-wc-tabs .modus-wc-tabs modus-wc-icon .modus-wc-icon--sm{line-height:calc(var(--modus-wc-line-height-sm) + 0.25rem)}modus-wc-tabs .modus-wc-tabs modus-wc-icon .modus-wc-icon--md{line-height:calc(var(--modus-wc-line-height-md) + 0.25rem)}modus-wc-tabs .modus-wc-tabs modus-wc-icon .modus-wc-icon--lg{line-height:calc(var(--modus-wc-line-height-lg) + 0.25rem)}modus-wc-tabs .modus-wc-tabs.modus-wc-tabs-bordered .modus-wc-tab:is(.modus-wc-tab-active,[aria-selected=true]):not(.modus-wc-tab-disabled):not([disabled]){background-color:var(--modus-wc-color-base-page);border-bottom-color:var(--modus-wc-color-primary);border-bottom-width:var(--modus-wc-border-width-lg)}modus-wc-tabs .modus-wc-tabs.modus-wc-tabs-boxed{background:var(--modus-wc-color-base-100);border-radius:var(--modus-wc-border-radius-tab)}modus-wc-tabs .modus-wc-tabs.modus-wc-tabs-boxed.modus-wc-tabs{height:inherit}modus-wc-tabs .modus-wc-tabs.modus-wc-tabs-boxed>.modus-wc-tab{border-radius:var(--modus-wc-border-radius-tab);height:inherit;min-height:var(--modus-wc-input-height-sm)}modus-wc-tabs .modus-wc-tabs.modus-wc-tabs-boxed>.modus-wc-tab:is(.modus-wc-tab-active,[aria-selected=true]):not(.modus-wc-tab-disabled):not([disabled]){background:var(--modus-wc-color-primary);border-radius:var(--modus-wc-border-radius-tab);color:var(--modus-wc-color-primary-content)}modus-wc-tabs .modus-wc-tabs.modus-wc-tabs-lifted>.modus-wc-tab{border-top-left-radius:var(--modus-wc-border-radius-tab);border-top-right-radius:var(--modus-wc-border-radius-tab)}[data-theme=modus-modern-light] modus-wc-tabs .modus-wc-tabs,[data-theme=modus-modern-dark] modus-wc-tabs .modus-wc-tabs{font-weight:var(--modus-wc-font-weight-semibold)}[data-theme=modus-modern-light] modus-wc-tabs .modus-wc-tab-active,[data-theme=modus-modern-dark] modus-wc-tabs .modus-wc-tab-active,[data-theme=connect-light] modus-wc-tabs .modus-wc-tab-active,[data-theme=connect-dark] modus-wc-tabs .modus-wc-tab-active{background-color:transparent}[data-theme=modus-modern-light] modus-wc-tabs .modus-wc-tabs.modus-wc-tabs-lifted>.modus-wc-tab:is(.modus-wc-tab-active,[aria-selected=true]):not(.modus-wc-tab-disabled):not([disabled]),[data-theme=connect-light] modus-wc-tabs .modus-wc-tabs.modus-wc-tabs-lifted>.modus-wc-tab:is(.modus-wc-tab-active,[aria-selected=true]):not(.modus-wc-tab-disabled):not([disabled]),[data-theme=connect-dark] modus-wc-tabs .modus-wc-tabs.modus-wc-tabs-lifted>.modus-wc-tab:is(.modus-wc-tab-active,[aria-selected=true]):not(.modus-wc-tab-disabled):not([disabled]){--tab-bg:var(--modus-wc-color-base-page);color:var(--modus-wc-color-primary)}modus-wc-tabs .modus-wc-tab{border-radius:var(--tab-radius) var(--tab-radius) 0 0;height:inherit;min-height:var(--modus-wc-input-height-sm)}modus-wc-tabs .modus-wc-tab:hover{background-color:var(--modus-wc-color-base-100);color:var(--modus-wc-color-primary)}modus-wc-tabs .modus-wc-tab:focus{background-color:var(--modus-wc-color-base-200);color:var(--modus-wc-color-primary)}modus-wc-tabs .modus-wc-tab:active{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-tabs .modus-wc-tab-selected{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-tabs .modus-wc-tab-active{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-tabs .modus-wc-tab-open{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-tabs .modus-wc-tab.selected{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-tabs .modus-wc-tab.active{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-tabs .modus-wc-tab-disabled:hover{background-color:inherit}modus-wc-tabs .modus-wc-tab--active{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-tabs .modus-wc-tab--selected{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-tabs .modus-wc-tab:checked{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}modus-wc-tabs .modus-wc-tab.checked{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}modus-wc-tabs .modus-wc-tab-checked{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}modus-wc-tabs .modus-wc-tab.pressed{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}modus-wc-tabs .modus-wc-tab-pressed{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}modus-wc-tabs .modus-wc-tab[aria-pressed=true]{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}modus-wc-tabs .modus-wc-tab-active{background-color:var(--modus-wc-color-base-page);color:inherit}modus-wc-tabs .modus-wc-tab:disabled{pointer-events:none}[data-theme=modus-classic-light] modus-wc-tabs .modus-wc-tab{--tab-color:var(--modus-wc-color-trimble-gray);--tab-bg:var(--modus-wc-color-white);--fallback-bc:var(--modus-wc-color-gray-2)}[data-theme=modus-classic-light] modus-wc-tabs .modus-wc-tab:not(.modus-wc-tab-active):not(.modus-wc-tab-disabled):hover{background-color:var(--modus-wc-color-blue-pale)}[data-theme=modus-classic-light] modus-wc-tabs .modus-wc-tab:not(.modus-wc-tab-disabled):active{--tab-color:var(--modus-wc-color-gray-10);--tab-border:var(\n    --modus-wc-border-width-xs\n  );--tab-bg:var(--modus-wc-color-white);background-color:var(--modus-wc-color-trimble-blue-pale) !important}[data-theme=modus-classic-light] modus-wc-tabs .modus-wc-tab.modus-wc-tab-active{--tab-color:var(--modus-wc-color-gray-10);--tab-bg:var(--modus-wc-color-blue-light);background-color:var(--modus-wc-color-white);--fallback-p:var(--modus-wc-color-blue-light);--fallback-bc:transparent}[data-theme=modus-classic-dark] modus-wc-tabs .modus-wc-tab{--tab-color:var(--modus-wc-color-white);--tab-bg:var(--modus-wc-color-gray-8);--fallback-bc:var(--modus-wc-color-gray-8)}[data-theme=modus-classic-dark] modus-wc-tabs .modus-wc-tab:not(.modus-wc-tab-active):not(.modus-wc-tab-disabled):hover{background-color:var(--modus-wc-color-highlight-blue-pale);color:var(--modus-wc-color-gray-10)}[data-theme=modus-classic-dark] modus-wc-tabs .modus-wc-tab:not(.modus-wc-tab-disabled):active{background-color:var(--modus-wc-color-highlight-blue-pale) !important}[data-theme=modus-classic-dark] modus-wc-tabs .modus-wc-tab.modus-wc-tab-active{--tab-color:var(--modus-wc-color-white);--tab-bg:var(--modus-wc-color-blue-light);border-bottom-width:var(--modus-wc-border-width-xs);--fallback-p:var(--modus-wc-color-blue-light);--fallback-bc:var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-dark] modus-wc-tabs .modus-wc-tab.modus-wc-tab-disabled{--tab-color:var(--modus-wc-color-gray-2);background-color:var(--modus-wc-color-gray-9)}";export{e as modus_wc_tabs}