@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
104 lines (99 loc) • 9.26 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, orientation, position, responsive, }) => {
let classes = '';
if (color) {
switch (color) {
case 'primary':
classes = `${classes} modus-wc-divider-primary`;
break;
case 'secondary':
classes = `${classes} modus-wc-divider-secondary`;
break;
case 'tertiary':
classes = `${classes} modus-wc-divider-neutral`;
break;
case 'high-contrast':
classes = `${classes} modus-wc-divider-accent`;
break;
case 'success':
classes = `${classes} modus-wc-divider-success`;
break;
case 'warning':
classes = `${classes} modus-wc-divider-warning`;
break;
case 'danger':
classes = `${classes} modus-wc-divider-error`;
break;
}
}
if (orientation) {
switch (orientation) {
case 'horizontal':
classes = `${classes} modus-wc-divider-horizontal`;
break;
case 'vertical':
classes = `${classes} modus-wc-divider-vertical`;
break;
}
}
if (position) {
switch (position) {
case 'end':
classes = `${classes} modus-wc-divider-start`;
break;
case 'start':
classes = `${classes} modus-wc-divider-end`;
break;
}
}
if (responsive) {
classes = `${classes} flex-grow place-items-center`;
}
return classes.trim();
};
const modusWcDividerCss = "modus-wc-divider .modus-wc-divider.modus-wc-divider-primary::before,modus-wc-divider .modus-wc-divider.modus-wc-divider-primary::after{background-color:var(--modus-wc-color-primary)}modus-wc-divider .modus-wc-divider.modus-wc-divider-accent::before,modus-wc-divider .modus-wc-divider.modus-wc-divider-accent::after{background-color:var(--modus-wc-color-info-blue)}[data-theme=modus-classic-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-neutral::before,[data-theme=modus-classic-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-neutral::after,[data-theme=modus-modern-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-neutral::before,[data-theme=modus-modern-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-neutral::after,[data-theme=connect-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-neutral::before,[data-theme=connect-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-neutral::after{background-color:color-mix(in sRGB, var(--modus-wc-color-gray-10) 10%, transparent)}[data-theme=modus-classic-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-success::before,[data-theme=modus-classic-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-success::after,[data-theme=modus-modern-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-success::before,[data-theme=modus-modern-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-success::after,[data-theme=connect-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-success::before,[data-theme=connect-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-success::after{background-color:var(--modus-wc-color-green-dark)}[data-theme=modus-classic-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-error::before,[data-theme=modus-classic-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-error::after,[data-theme=modus-modern-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-error::before,[data-theme=modus-modern-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-error::after,[data-theme=connect-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-error::before,[data-theme=connect-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-error::after{background-color:var(--modus-wc-color-red-dark)}[data-theme=modus-classic-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-warning::before,[data-theme=modus-classic-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-warning::after,[data-theme=modus-modern-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-warning::before,[data-theme=modus-modern-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-warning::after,[data-theme=connect-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-warning::before,[data-theme=connect-light] modus-wc-divider .modus-wc-divider.modus-wc-divider-warning::after{background-color:var(--modus-wc-color-yellow-dark)}[data-theme=modus-classic-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-neutral::before,[data-theme=modus-classic-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-neutral::after,[data-theme=modus-modern-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-neutral::before,[data-theme=modus-modern-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-neutral::after,[data-theme=connect-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-neutral::before,[data-theme=connect-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-neutral::after{background-color:color-mix(in sRGB, var(--modus-wc-color-gray-light) 10%, transparent)}[data-theme=modus-classic-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-success::before,[data-theme=modus-classic-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-success::after,[data-theme=modus-modern-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-success::before,[data-theme=modus-modern-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-success::after,[data-theme=connect-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-success::before,[data-theme=connect-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-success::after{background-color:var(--modus-wc-color-green-light)}[data-theme=modus-classic-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-error::before,[data-theme=modus-classic-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-error::after,[data-theme=modus-modern-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-error::before,[data-theme=modus-modern-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-error::after,[data-theme=connect-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-error::before,[data-theme=connect-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-error::after{background-color:var(--modus-wc-color-red-light)}[data-theme=modus-classic-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-warning::before,[data-theme=modus-classic-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-warning::after,[data-theme=modus-modern-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-warning::before,[data-theme=modus-modern-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-warning::after,[data-theme=connect-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-warning::before,[data-theme=connect-dark] modus-wc-divider .modus-wc-divider.modus-wc-divider-warning::after{background-color:var(--modus-wc-color-yellow-light)}";
const ModusWcDivider = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.inheritedAttributes = {};
/** The color of the divider line. */
this.color = 'tertiary';
/** The content to display in the divider. */
this.content = '';
/** Custom CSS class to apply to the divider element. */
this.customClass = '';
/** The orientation of the divider. This is in reference to how content will be rendered around the divider. */
this.orientation = 'vertical';
/** The position of the divider. */
this.position = 'center';
/** Whether the divider is responsive or not. */
this.responsive = true;
}
componentWillLoad() {
handleShadowDOMStyles(this.el);
this.inheritedAttributes = inheritAriaAttributes(this.el);
}
getClasses() {
const classList = ['modus-wc-divider'];
const propClasses = convertPropsToClasses({
color: this.color,
orientation: this.orientation,
position: this.position,
responsive: this.responsive,
});
// 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() {
return (h(Host, { key: '474cecf457882c0a5b2841cb66d6b5513e561257' }, h("div", Object.assign({ key: '23f987f4fc75b44987908e4611e6b72b16a0f008', class: this.getClasses(), tabindex: -1 }, this.inheritedAttributes), this.content)));
}
get el() { return getElement(this); }
};
ModusWcDivider.style = modusWcDividerCss;
export { ModusWcDivider as modus_wc_divider };