@trimble-oss/moduswebcomponents/modus-wc/p-e779c3c8.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,c as s,h as a,H as c,g as t,F as d}from"./p-D5XAQERj.js";import{i as r}from"./p-DlW2F98o.js";const e=class{constructor(a){o(this,a),this.tabChange=s(this,"tabChange"),this.inheritedAttributes={},this.activeTabIndex=0,this.customClass="",this.size="md",this.tabs=[],this.tabStyle="bordered"}componentWillLoad(){this.el.ariaLabel||(this.el.ariaLabel="Tab Group"),this.tabs&&0!==this.tabs.length||console.error("ModusWcTabs: tab data is required."),this.inheritedAttributes=r(this.el)}handleClick(o,s){o.disabled||(this.tabChange.emit({previousTab:this.activeTabIndex,newTab:s}),this.activeTabIndex=s)}getClasses(){const o=["modus-wc-tabs"],s=(({tabStyle:o,size:s})=>{let a="";if(o)switch(o){case"boxed":a=`${a} modus-wc-tabs-boxed`;break;case"bordered":a=`${a} modus-wc-tabs-bordered`;break;case"lifted":a=`${a} modus-wc-tabs-lifted`}if(s)switch(s){case"xs":a=`${a} modus-wc-tabs-xs`;break;case"sm":a=`${a} modus-wc-tabs-sm`;break;case"md":a=`${a} modus-wc-tabs-md`;break;case"lg":a=`${a} modus-wc-tabs-lg`}return a.trim()})({tabStyle:this.tabStyle,size:this.size});return s&&o.push(s),this.customClass&&o.push(this.customClass),o.join(" ")}getTabClasses(o,s){const a=["modus-wc-tab"],c=(({active:o,disabled:s})=>{let a="";return o&&(a=`${a} modus-wc-tab-active`),s&&(a=`${a} modus-wc-tab-disabled`),a.trim()})({active:s===this.activeTabIndex,disabled:o.disabled});return c&&a.push(c),o.customClass&&a.push(o.customClass),a.join(" ")}render(){const o=o=>void 0===o.label?o.icon&&a("modus-wc-icon",{name:o.icon,size:this.size}):a(d,null,o.icon&&"left"===o.iconPosition&&a("modus-wc-icon",{name:o.icon,size:this.size}),a("span",null,o.label),o.icon&&"right"===o.iconPosition&&a("modus-wc-icon",{name:o.icon,size:this.size})),s=this.tabs.map(((s,c)=>{var t;return a("button",{role:"tab","aria-disabled":s.disabled,"aria-label":(null!==(t=s.label)&&void 0!==t?t:s.icon)+" tab",class:this.getTabClasses(s,c),id:`tab-${c}`,onClick:()=>this.handleClick(s,c)},o(s))}));return a(c,{key:"02539e84a3b948096d9b78bd9efc42f4dd4f6270"},a("div",Object.assign({key:"af17c217fd670d6f2115d6cab267f1958f5e4c3d",role:"tablist",class:this.getClasses()},this.inheritedAttributes),s),a("div",{key:"0754e4b14b7ff0d2f1fba03c0b2c93c06eed98cb",class:"modus-wc-tab-panel",role:"tabpanel",tabIndex:0},this.tabs.map(((o,s)=>a("div",{class:this.activeTabIndex===s?"modus-wc-tab-active":void 0,hidden:this.activeTabIndex!==s},a("slot",{name:`tab-${s}`}))))))}get el(){return t(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-tab{align-items:center;border-top-left-radius:var(--modus-wc-border-radius-md);border-top-right-radius:var(--modus-wc-border-radius-md);display:inline-flex;font-weight:var(--modus-wc-font-weight-bold);--tab-border:0px}modus-wc-tabs .modus-wc-tab modus-wc-icon .modus-wc-icon--xs{line-height:calc(var(--modus-wc-line-height-sm) + 0.25rem)}modus-wc-tabs .modus-wc-tab modus-wc-icon .modus-wc-icon--sm{line-height:var(--modus-wc-line-height-md)}modus-wc-tabs .modus-wc-tab modus-wc-icon .modus-wc-icon--md{line-height:var(--modus-wc-line-height-lg)}modus-wc-tabs .modus-wc-tab modus-wc-icon .modus-wc-icon--lg{line-height:var(--modus-wc-line-height-xl)}modus-wc-tabs .modus-wc-tab:not(.modus-wc-tab-active):not(.modus-wc-tab-disabled):hover{background-color:var(--modus-wc-color-base-100)}.modus-wc-tabs-lifted>.modus-wc-tab:is(.modus-wc-tab-active,[aria-selected=true]):not(.modus-wc-tab-disabled):not([disabled]),.modus-wc-tabs-lifted>.modus-wc-tab:is(input:checked){color:var(--modus-wc-color-primary)}.modus-wc-tabs-bordered .modus-wc-tab:is(.modus-wc-tab-active,[aria-selected=true]):not(.modus-wc-tab-disabled):not([disabled]){border-bottom-color:var(--modus-wc-color-primary);border-bottom-width:var(--modus-wc-border-width-lg)}.modus-wc-tab .modus-wc-tab-active .modus-wc-tab:is(input:checked){color:var(--modus-wc-color-primary)}[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) !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-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) !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}