@trimble-oss/moduswebcomponents/modus-wc/p-07639203.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 d,F as r}from"./p-D_4hbGjA.js";import{i as t}from"./p-BLBSdonk.js";const m=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=t(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(r,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 d;return a("button",{role:"tab","aria-disabled":s.disabled,"aria-label":null!==(d=s.label)&&void 0!==d?d:s.icon,class:this.getTabClasses(s,c),disabled:s.disabled,id:`tab-${c}`,onClick:()=>this.handleClick(s,c)},s.slotName?a("slot",{name:s.slotName}):o(s))}));return a(c,{key:"c8e031c168ee2d79f3877aef48cd78c83e07197b"},a("div",Object.assign({key:"cbf113ea45c59e6f85e5c5faf5f6b53171c468e6",role:"tablist",class:this.getClasses()},this.inheritedAttributes),s),a("div",{key:"455d52d2ec3b5c64f68ca01fd150a46e259167ec",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 d(this)}};m.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;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)}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-sm) + 0.25rem)}modus-wc-tabs .modus-wc-tabs modus-wc-icon .modus-wc-icon--sm{line-height:var(--modus-wc-line-height-md)}modus-wc-tabs .modus-wc-tabs modus-wc-icon .modus-wc-icon--md{line-height:var(--modus-wc-line-height-lg)}modus-wc-tabs .modus-wc-tabs modus-wc-icon .modus-wc-icon--lg{line-height:var(--modus-wc-line-height-xl)}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]),modus-wc-tabs .modus-wc-tabs .modus-wc-tabs-lifted>.modus-wc-tab:is(input:checked){color:var(--modus-wc-color-primary)}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-tab .modus-wc-tab-active .modus-wc-tab:is(input:checked){color:var(--modus-wc-color-primary)}modus-wc-tabs .modus-wc-tab{border-radius:var(--tab-radius) var(--tab-radius) 0 0;height:inherit}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-light] modus-wc-tabs .modus-wc-tab .modus-wc-tabs-lifted>.modus-wc-tab:is(.modus-wc-tab-active,[aria-selected=true]):not(.modus-wc-tab-disabled):not([disabled]),[data-theme=modus-classic-light] modus-wc-tabs .modus-wc-tab .modus-wc-tabs-lifted>.modus-wc-tab:is(input:checked){color:var(--modus-wc-color-white) !important}[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)}[data-theme=modus-classic-dark] modus-wc-tabs .modus-wc-tab .modus-wc-tabs-lifted>.modus-wc-tab:is(.modus-wc-tab-active,[aria-selected=true]):not(.modus-wc-tab-disabled):not([disabled]),[data-theme=modus-classic-dark] modus-wc-tabs .modus-wc-tab .modus-wc-tabs-lifted>.modus-wc-tab:is(input:checked){color:var(--modus-wc-color-white)}";export{m as modus_wc_tabs}