@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
124 lines (118 loc) • 8.46 kB
JavaScript
;
var index = require('./index-Cr4UXaM1.js');
var utils = require('./utils-C0e12S4M.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-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)}";
const ModusWcTabs = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.tabChange = index.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 = utils.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 && index.h("modus-wc-icon", { name: tab.icon, size: this.size })) : (index.h(index.Fragment, null, tab.icon && tab.iconPosition === 'left' && (index.h("modus-wc-icon", { name: tab.icon, size: this.size })), index.h("span", null, tab.label), tab.icon && tab.iconPosition === 'right' && (index.h("modus-wc-icon", { name: tab.icon, size: this.size }))));
const tabs = this.tabs.map((tab, index$1) => {
var _a;
return (index.h("button", { role: "tab", "aria-disabled": tab.disabled, "aria-label": ((_a = tab.label) !== null && _a !== void 0 ? _a : tab.icon) + ' tab', class: this.getTabClasses(tab, index$1), id: `tab-${index$1}`, onClick: () => this.handleClick(tab, index$1) }, renderTabContent(tab)));
});
return (index.h(index.Host, { key: '632eac18f374119e4254c9bf6ff43e67d729d08e' }, index.h("div", Object.assign({ key: '3fb2ba9de298d20896162442f8bad8ce64bf9565', role: "tablist", class: this.getClasses() }, this.inheritedAttributes), tabs), index.h("div", { key: 'b42b07309e6438501759bb561129a9d2a51c2cee', class: "modus-wc-tab-panel", role: "tabpanel", tabIndex: 0 }, this.tabs.map((_, index$1) => (index.h("div", { class: this.activeTabIndex === index$1
? 'modus-wc-tab-active'
: undefined, hidden: this.activeTabIndex !== index$1 }, index.h("slot", { name: `tab-${index$1}` })))))));
}
get el() { return index.getElement(this); }
};
ModusWcTabs.style = modusWcTabsCss;
exports.modus_wc_tabs = ModusWcTabs;