@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
97 lines (92 loc) • 10.1 kB
JavaScript
import { r as registerInstance, h, H as Host, g as getElement } from './index-D_4hbGjA.js';
import { i as inheritAriaAttributes } from './utils-DQvnWXRl.js';
const convertPropsToClasses = ({ color, size, variant, }) => {
let classes = '';
if (color) {
switch (color) {
case 'primary':
classes = `${classes} modus-wc-badge-primary`;
break;
case 'secondary':
classes = `${classes} modus-wc-badge-secondary`;
break;
case 'tertiary':
classes = `${classes} modus-wc-badge-neutral`;
break;
case 'high-contrast':
classes = `${classes} modus-wc-badge-high-contrast`;
break;
case 'success':
classes = `${classes} modus-wc-badge-success`;
break;
case 'warning':
classes = `${classes} modus-wc-badge-warning`;
break;
case 'danger':
classes = `${classes} modus-wc-badge-error`;
break;
}
}
if (size) {
classes = `${classes} modus-wc-badge-${size}`;
}
if (variant) {
switch (variant) {
case 'counter':
classes = `${classes} modus-wc-badge-counter`;
break;
case 'outlined':
classes = `${classes} modus-wc-badge-outlined`;
break;
case 'text':
classes = `${classes} modus-wc-badge-text`;
break;
}
}
return classes.trim();
};
const modusWcBadgeCss = "modus-wc-badge .modus-wc-badge{font-weight:var(--modus-wc-font-weight-semibold)}modus-wc-badge .modus-wc-badge.modus-wc-badge-sm{font-size:var(--modus-wc-font-size-xs)}modus-wc-badge .modus-wc-badge.modus-wc-badge-md{font-size:var(--modus-wc-font-size-sm)}modus-wc-badge .modus-wc-badge.modus-wc-badge-high-contrast{background-color:var(--modus-wc-color-black);border-color:var(--modus-wc-color-base-content);color:var(--modus-wc-color-white)}modus-wc-badge .modus-wc-badge.modus-wc-badge-counter{border-radius:1rem}modus-wc-badge .modus-wc-badge.modus-wc-badge-text{background-color:transparent;border:none}modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-primary{color:var(--modus-wc-color-trimble-blue)}modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-secondary{color:var(--modus-wc-color-secondary)}modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-neutral{color:var(--modus-wc-color-gray-1)}modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-high-contrast{color:var(--modus-wc-color-base-content)}modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-success{color:var(--modus-wc-color-green-dark)}modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-warning{color:var(--modus-wc-color-warning)}modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-error{color:var(--modus-wc-color-error)}modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined{background-color:transparent;border-radius:1rem}modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined.modus-wc-badge-primary{border-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary)}modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined.modus-wc-badge-secondary{border-color:var(--modus-wc-color-secondary);color:var(--modus-wc-color-secondary)}modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined.modus-wc-badge-neutral{border-color:var(--modus-wc-color-gray-1);color:var(--modus-wc-color-gray-1)}modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined.modus-wc-badge-high-contrast{border-color:var(--modus-wc-color-base-content);color:var(--modus-wc-color-base-content)}modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined.modus-wc-badge-success{border-color:var(--modus-wc-color-success);color:var(--modus-wc-color-success)}modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined.modus-wc-badge-warning{border-color:var(--modus-wc-color-warning);color:var(--modus-wc-color-warning)}modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined.modus-wc-badge-error{border-color:var(--modus-wc-color-error);color:var(--modus-wc-color-error)}[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge,[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge{border:unset;font-weight:var(--modus-wc-font-weight-bold)}[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge.modus-wc-badge-secondary,[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-secondary{color:var(--modus-wc-color-gray-6)}[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge.modus-wc-badge-secondary:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined),[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-secondary:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined){background-color:var(--modus-wc-color-gray-6);color:var(--modus-wc-color-white)}[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge:not(.modus-wc-badge-counter),[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge:not(.modus-wc-badge-counter){border-radius:var(--modus-wc-border-radius-md)}[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge.modus-wc-badge-success:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined),[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-success:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined){background-color:var(--modus-wc-color-green-dark)}[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge.modus-wc-badge-sm,[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-sm{border-radius:var(--modus-wc-border-radius-sm);font-size:var(--modus-wc-font-size-xs);height:14px;padding:var(--modus-wc-spacing-2xs) var(--modus-wc-spacing-xs)}[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge.modus-wc-badge-md,[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-md{font-size:var(--modus-wc-font-size-sm);height:20px;padding:var(--modus-wc-spacing-xs) var(--modus-wc-spacing-sm)}[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge.modus-wc-badge-lg,[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-lg{font-size:var(--modus-wc-font-size-md);height:28px;padding:var(--modus-wc-spacing-sm) var(--modus-wc-spacing-md)}[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined,[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined{background-color:transparent;border:1px solid;border-radius:1rem}[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined).modus-wc-badge-primary{background-color:var(--modus-wc-color-highlight-blue);color:var(--modus-wc-color-gray-10)}[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined).modus-wc-badge-success{background-color:var(--modus-wc-color-success)}[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined).modus-wc-badge-secondary{background-color:var(--modus-wc-color-gray-6);color:var(--modus-wc-color-white)}[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined).modus-wc-badge-neutral{background-color:var(--modus-wc-color-gray-1);color:var(--modus-wc-color-trimble-gray)}[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined).modus-wc-badge-high-contrast{background-color:var(--modus-wc-color-gray-light);color:var(--modus-wc-color-gray-10)}[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-primary{color:var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-high-contrast{color:var(--modus-wc-color-gray-light)}[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-success{color:var(--modus-wc-color-success)}";
const ALERT_COLORS = ['success', 'warning', 'danger'];
const ModusWcBadge = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.inheritedAttributes = {};
/** The color variant of the badge. */
this.color = 'primary';
/** Custom CSS class to apply to the span element. */
this.customClass = '';
/** The size of the badge. */
this.size = 'md';
/** The variant of the badge. */
this.variant = 'filled';
}
componentWillLoad() {
this.inheritedAttributes = inheritAriaAttributes(this.el);
}
getClasses() {
const classList = ['modus-wc-badge'];
const propClasses = convertPropsToClasses({
color: this.color,
size: this.size,
variant: this.variant,
});
// 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(' ');
}
render() {
const isAlert = ALERT_COLORS.includes(this.color);
// Use inherited role if provided, otherwise use default based on color
const defaultRole = isAlert ? 'alert' : 'status';
const role = 'role' in this.inheritedAttributes
? this.inheritedAttributes.role
: defaultRole;
return (h(Host, { key: '7d3650836625d098dfaf7af635495ea1644994c0' }, h("span", Object.assign({ key: '6ad6f66bb5bebc82c37cb2bab63d0240b13d9088', class: this.getClasses() }, this.inheritedAttributes, { role: role }), h("slot", { key: 'cfb532a378a0ddeb9bebceb4bef1ea9e59bd2e1c' }))));
}
get el() { return getElement(this); }
};
ModusWcBadge.style = modusWcBadgeCss;
export { ModusWcBadge as modus_wc_badge };