@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) • 9.4 kB
JavaScript
import { p as proxyCustomElement, H, e as createEvent, h, c as Host, F as Fragment } from './p-BMvVSi6Y.js';
import { i as inheritAriaAttributes } from './p-COxr4v9W.js';
import { d as defineCustomElement$2 } from './p-C8YB6DYg.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$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) + ' tab', class: this.getTabClasses(tab, index), id: `tab-${index}`, onClick: () => this.handleClick(tab, index) }, renderTabContent(tab)));
});
return (h(Host, { key: '02539e84a3b948096d9b78bd9efc42f4dd4f6270' }, h("div", Object.assign({ key: 'af17c217fd670d6f2115d6cab267f1958f5e4c3d', role: "tablist", class: this.getClasses() }, this.inheritedAttributes), tabs), h("div", { key: '0754e4b14b7ff0d2f1fba03c0b2c93c06eed98cb', 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 };