@trimble-oss/moduswebcomponents
Version:
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
151 lines (145 loc) • 13 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, c as Host, F as Fragment } from './p-X1tirp06.js';
import { i as inheritAriaAttributes } from './p-VPqXjOQn.js';
import { d as defineCustomElement$2 } from './p-s6LDESOI.js';
const convertPropsToClasses = ({ tabStyle, size, }) => {
let classes = '';
if (tabStyle) {
switch (tabStyle) {
case 'boxed':
classes = `${classes} modus-wc-tabs-boxed`;
break;
case 'bordered':
classes = `${classes} modus-wc-tabs-bordered`;
break;
case 'lifted':
classes = `${classes} modus-wc-tabs-lifted`;
break;
}
}
if (size) {
switch (size) {
case 'xs':
classes = `${classes} modus-wc-tabs-xs`;
break;
case 'sm':
classes = `${classes} modus-wc-tabs-sm`;
break;
case 'md':
classes = `${classes} modus-wc-tabs-md`;
break;
case 'lg':
classes = `${classes} modus-wc-tabs-lg`;
break;
}
}
return classes.trim();
};
const convertPropsToClassesTab = ({ active, disabled, }) => {
let classes = '';
if (active) {
classes = `${classes} modus-wc-tab-active`;
}
if (disabled) {
classes = `${classes} modus-wc-tab-disabled`;
}
return classes.trim();
};
const modusWcTabsCss = "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)}";
const ModusWcTabs$1 = /*@__PURE__*/ proxyCustomElement(class ModusWcTabs extends H {
constructor() {
super();
this.__registerHost();
this.tabChange = createEvent(this, "tabChange");
this.inheritedAttributes = {};
/** The current active tab */
this.activeTabIndex = 0;
/** Custom CSS class to apply to the inner div. */
this.customClass = '';
/** The size of the tabs. */
this.size = 'md';
/** The tabs to display. */
this.tabs = [];
/** Additional styling for the tabs. */
this.tabStyle = 'bordered';
}
componentWillLoad() {
if (!this.el.ariaLabel) {
this.el.ariaLabel = 'Tab Group';
}
if (!this.tabs || this.tabs.length === 0) {
console.error('ModusWcTabs: tab data is required.');
}
this.inheritedAttributes = inheritAriaAttributes(this.el);
}
handleClick(tab, index) {
if (tab.disabled)
return;
this.tabChange.emit({ previousTab: this.activeTabIndex, newTab: index });
this.activeTabIndex = index;
}
getClasses() {
const classList = ['modus-wc-tabs'];
const propClasses = convertPropsToClasses({
tabStyle: this.tabStyle,
size: this.size,
});
// The order CSS classes are added matters to CSS specificity
if (propClasses)
classList.push(propClasses);
if (this.customClass)
classList.push(this.customClass);
return classList.join(' ');
}
getTabClasses(tab, index) {
const classList = ['modus-wc-tab'];
const propClasses = convertPropsToClassesTab({
active: index === this.activeTabIndex,
disabled: tab.disabled,
});
// The order CSS classes are added matters to CSS specificity
if (propClasses)
classList.push(propClasses);
if (tab.customClass)
classList.push(tab.customClass);
return classList.join(' ');
}
render() {
const renderTabContent = (tab) => tab.label === undefined ? (tab.icon && h("modus-wc-icon", { name: tab.icon, size: this.size })) : (h(Fragment, null, tab.icon && tab.iconPosition === 'left' && (h("modus-wc-icon", { name: tab.icon, size: this.size })), h("span", null, tab.label), tab.icon && tab.iconPosition === 'right' && (h("modus-wc-icon", { name: tab.icon, size: this.size }))));
const tabs = this.tabs.map((tab, index) => {
var _a;
return (h("button", { role: "tab", "aria-disabled": tab.disabled, "aria-label": (_a = tab.label) !== null && _a !== void 0 ? _a : tab.icon, class: this.getTabClasses(tab, index), disabled: tab.disabled, id: `tab-${index}`, onClick: () => this.handleClick(tab, index) }, tab.slotName ? (h("slot", { name: tab.slotName })) : (renderTabContent(tab))));
});
return (h(Host, { key: 'c8e031c168ee2d79f3877aef48cd78c83e07197b' }, h("div", Object.assign({ key: 'cbf113ea45c59e6f85e5c5faf5f6b53171c468e6', role: "tablist", class: this.getClasses() }, this.inheritedAttributes), tabs), h("div", { key: '455d52d2ec3b5c64f68ca01fd150a46e259167ec', class: "modus-wc-tab-panel", role: "tabpanel", tabIndex: 0 }, this.tabs.map((_, index) => (h("div", { class: this.activeTabIndex === index
? 'modus-wc-tab-active'
: undefined, hidden: this.activeTabIndex !== index }, h("slot", { name: `tab-${index}` })))))));
}
get el() { return this; }
static get style() { return modusWcTabsCss; }
}, [4, "modus-wc-tabs", {
"activeTabIndex": [1026, "active-tab-index"],
"customClass": [1, "custom-class"],
"size": [1],
"tabs": [16],
"tabStyle": [1, "tab-style"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["modus-wc-tabs", "modus-wc-icon"];
components.forEach(tagName => { switch (tagName) {
case "modus-wc-tabs":
if (!customElements.get(tagName)) {
customElements.define(tagName, ModusWcTabs$1);
}
break;
case "modus-wc-icon":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const ModusWcTabs = ModusWcTabs$1;
const defineCustomElement = defineCustomElement$1;
export { ModusWcTabs, defineCustomElement };