@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
114 lines (108 loc) • 10.5 kB
JavaScript
import { p as proxyCustomElement, H, h, c as Host } from './p-BMvVSi6Y.js';
import { i as inheritAriaAttributes } from './p-COxr4v9W.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$1 = /*@__PURE__*/ proxyCustomElement(class ModusWcBadge extends H {
constructor() {
super();
this.__registerHost();
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);
return (h(Host, { key: '4ea37f9f98bde6a87a030f100aa1aa79a90f330c' }, h("span", Object.assign({ key: 'a6ed53be50df9f405cd6287434a84c38d82c3d5f', class: this.getClasses(), role: isAlert ? 'alert' : 'status', tabindex: -1 }, this.inheritedAttributes), h("slot", { key: 'cf6b15e22a0d15a467997f9b2deddb580e9ae2d6' }))));
}
get el() { return this; }
static get style() { return modusWcBadgeCss; }
}, [4, "modus-wc-badge", {
"color": [1],
"customClass": [1, "custom-class"],
"size": [1],
"variant": [1]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["modus-wc-badge"];
components.forEach(tagName => { switch (tagName) {
case "modus-wc-badge":
if (!customElements.get(tagName)) {
customElements.define(tagName, ModusWcBadge$1);
}
break;
} });
}
const ModusWcBadge = ModusWcBadge$1;
const defineCustomElement = defineCustomElement$1;
export { ModusWcBadge, defineCustomElement };