@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
99 lines (94 loc) • 10.3 kB
JavaScript
import { r as registerInstance, h, e as Host, g as getElement } from './index-C1-Dpkp7.js';
import { h as handleShadowDOMStyles } from './base-component-tWS3Egrk.js';
import { i as inheritAriaAttributes } from './utils-DN2BGzSQ.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{display:flex;font-weight:var(--modus-wc-font-weight-semibold);height:fit-content}modus-wc-badge .modus-wc-badge.modus-wc-badge-sm{font-size:var(--modus-wc-font-size-xs);max-height:var(--modus-wc-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() {
handleShadowDOMStyles(this.el);
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: 'f2ec988fa68161c5cc50c344167092bd0ed4695a' }, h("span", Object.assign({ key: 'bab6afe22880cb6a95ce547b5248630426c411e5', class: this.getClasses() }, this.inheritedAttributes, { role: role }), h("slot", { key: '6e3f8476708e14a6a790d49dc80912789c1bf2d1' }))));
}
get el() { return getElement(this); }
};
ModusWcBadge.style = modusWcBadgeCss;
export { ModusWcBadge as modus_wc_badge };