@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
162 lines (150 loc) • 13.8 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 modusWcIconCss = "modus-wc-icon .modus-icons.modus-wc-icon--xs,modus-wc-icon .modus-icons-outlined.modus-wc-icon--xs,modus-wc-icon .modus-icons-solid.modus-wc-icon--xs{font-size:1rem}modus-wc-icon .modus-icons.modus-wc-icon--sm,modus-wc-icon .modus-icons-outlined.modus-wc-icon--sm,modus-wc-icon .modus-icons-solid.modus-wc-icon--sm{font-size:1.25rem}modus-wc-icon .modus-icons.modus-wc-icon--md,modus-wc-icon .modus-icons-outlined.modus-wc-icon--md,modus-wc-icon .modus-icons-solid.modus-wc-icon--md{font-size:1.5rem}modus-wc-icon .modus-icons.modus-wc-icon--lg,modus-wc-icon .modus-icons-outlined.modus-wc-icon--lg,modus-wc-icon .modus-icons-solid.modus-wc-icon--lg{font-size:2rem}modus-wc-icon .modus-icons.modus-wc-icon--xl,modus-wc-icon .modus-icons-outlined.modus-wc-icon--xl,modus-wc-icon .modus-icons-solid.modus-wc-icon--xl{font-size:4rem}modus-wc-icon i::before,modus-wc-icon i::after{font-family:inherit !important}";
const ModusWcIcon = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.inheritedAttributes = {};
/** Custom CSS class to apply to the i element. */
this.customClass = '';
/** Indicates that the icon is decorative. When true, sets aria-hidden to hide the icon from screen readers. */
this.decorative = true;
/** The icon size, can be "sm", "md", "lg" (a custom size can be specified in CSS). This adjusts the font size for the icon. */
this.size = 'md';
}
componentWillLoad() {
if (!this.decorative && !this.el.ariaLabel) {
this.el.ariaLabel = `${this.name} icon`;
}
this.inheritedAttributes = inheritAriaAttributes(this.el);
}
getClasses() {
let classList = [];
// Add base class
classList.push('modus-wc-icon');
// Add icon font class based on variant
if (this.variant === 'outlined') {
classList.push('modus-icons-outlined');
}
else if (this.variant === 'solid') {
classList.push('modus-icons-solid');
}
else {
classList.push('modus-icons');
}
// Add size class - this is common for all variants
classList.push(`modus-wc-icon--${this.size}`);
// Add custom class if provided
if (this.customClass)
classList.push(this.customClass);
return classList.join(' ');
}
render() {
const ariaHidden = this.decorative ? 'true' : null;
const role = this.decorative ? undefined : 'img';
return (h(Host, { key: '8a3200921eb1113ff263e935649b1e4306b5d676', class: "modus-wc-flex modus-wc-items-center" }, h("i", Object.assign({ key: 'ea7f55801a9d1fc5f541f2ab95b94f4fc70883e9', "aria-hidden": ariaHidden, "aria-label": this.decorative ? null : this.el.ariaLabel, class: this.getClasses(), role: role, tabindex: -1 }, this.inheritedAttributes), this.name)));
}
get el() { return getElement(this); }
};
ModusWcIcon.style = modusWcIconCss;
const convertPropsToClasses = ({ level, size, }) => {
let classes = '';
if (level) {
classes = `${classes} modus-wc-input-feedback--${level}`;
}
if (size) {
classes = `${classes} modus-wc-input-feedback--${size}`;
}
return classes.trim();
};
const CheckCircleOutlineIcon = ({ className, }) => {
return (h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", class: `mi-outline mi-check-circle ${className || ''}`, viewBox: "0 0 24 24" },
h("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m5.04-11.28V8.7c-.4-.39-1.03-.39-1.42 0L10.33 14l-2.6-2.62a.996.996 0 0 0-1.41 0 .984.984 0 0 0-.01 1.4l.01.01 3.3 3.34a1 1 0 0 0 1.42.01l6-6.01a.996.996 0 0 0 0-1.41" })));
};
const InfoOutlineIcon = ({ className }) => {
return (h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", class: `mi-outline mi-info ${className || ''}`, viewBox: "0 0 24 24" },
h("path", { d: "M12 9.03c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1M12 22c5.52 0 10-4.48 10-10S17.52 2 12 2 2 6.48 2 12s4.48 10 10 10m0-18c4.41 0 8 3.59 8 8s-3.59 8-8 8-8-3.59-8-8 3.59-8 8-8m0 13c.55 0 1-.45 1-1v-4c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1" })));
};
const WarningOutlineIcon = ({ className, }) => {
return (h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", class: `mi-outline mi-warning ${className || ''}`, viewBox: "0 0 24 24" },
h("path", { d: "M12 15.12c-.67 0-1.21.54-1.21 1.19s.54 1.21 1.21 1.21 1.21-.54 1.21-1.21-.54-1.19-1.21-1.19m0-1.61c.36 0 .62-.26.66-.7l.39-5.04s.01-.1.01-.14c0-.63-.45-1.15-1.06-1.15s-1.06.51-1.06 1.15v.14l.4 5.04c.04.44.28.7.66.7M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8" })));
};
const modusWcInputFeedbackCss = "modus-wc-input-feedback .modus-wc-input-feedback{align-items:center;border-radius:0 0 var(--modus-wc-border-radius-sm) var(--modus-wc-border-radius-sm);display:flex;font-weight:var(--modus-wc-font-weight-semibold);gap:var(--modus-wc-spacing-sm);margin-top:var(--modus-wc-spacing-sm);padding:var(--modus-wc-spacing-xs) 0}modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--sm{font-size:var(--modus-wc-font-size-xs)}modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--sm .modus-wc-input-feedback-icon{height:var(--modus-wc-font-size-lg);width:var(--modus-wc-font-size-lg)}modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--md{font-size:var(--modus-wc-font-size-sm)}modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--md .modus-wc-input-feedback-icon{height:var(--modus-wc-font-size-xl);width:var(--modus-wc-font-size-xl)}modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--lg{font-size:var(--modus-wc-font-size-md)}modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--lg .modus-wc-input-feedback-icon{height:var(--modus-wc-font-size-2xl);width:var(--modus-wc-font-size-2xl)}modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback{background-color:var(--modus-wc-color-base-100);border-radius:var(--modus-wc-border-radius-lg);padding:var(--modus-wc-spacing-sm)}modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--error{color:var(--modus-wc-color-error)}modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--info{color:var(--modus-wc-color-info)}modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--success{color:var(--modus-wc-color-success)}modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--warning{color:var(--modus-wc-color-warning)}[data-theme=modus-classic-light] modus-wc-input-feedback .modus-wc-input-feedback{border-radius:0;margin-top:0;padding:var(--modus-wc-spacing-xs) 0}[data-theme=modus-classic-light] modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--error{background-color:transparent;color:var(--modus-wc-color-red)}[data-theme=modus-classic-light] modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--info{background-color:transparent;color:var(--modus-wc-color-trimble-blue)}[data-theme=modus-classic-light] modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--success{background-color:transparent;color:var(--modus-wc-color-green-dark)}[data-theme=modus-classic-light] modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--warning{background-color:transparent;color:var(--modus-wc-color-yellow-dark)}[data-theme=modus-classic-dark] modus-wc-input-feedback .modus-wc-input-feedback{border-radius:0;color:var(--modus-wc-color-white);margin-top:0;padding:var(--modus-wc-spacing-xs) 0}[data-theme=modus-classic-dark] modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--error{background-color:var(--modus-wc-color-red)}[data-theme=modus-classic-dark] modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--info{background-color:var(--modus-wc-color-trimble-blue)}[data-theme=modus-classic-dark] modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--success{background-color:var(--modus-wc-color-green-dark)}[data-theme=modus-classic-dark] modus-wc-input-feedback .modus-wc-input-feedback.modus-wc-input-feedback--warning{background-color:var(--modus-wc-color-yellow-dark);color:var(--modus-wc-color-black)}";
const ModusWcInputFeedback = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.inheritedAttributes = {};
/** Custom CSS class to apply to the outer div element. */
this.customClass = '';
/** The Modus icon to use instead of the pre-defined icons. */
this.icon = '';
/** The message. */
this.message = '';
/** The size of the feedback component. */
this.size = 'md';
}
componentWillLoad() {
this.inheritedAttributes = inheritAriaAttributes(this.el);
}
getClasses() {
const classList = ['modus-wc-input-feedback'];
const propClasses = convertPropsToClasses({
level: this.level,
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(' ');
}
getPresetIcon() {
switch (this.level) {
case 'error':
return h(WarningOutlineIcon, { className: "modus-wc-input-feedback-icon" });
case 'info':
return h(InfoOutlineIcon, { className: "modus-wc-input-feedback-icon" });
case 'success':
return (h(CheckCircleOutlineIcon, { className: "modus-wc-input-feedback-icon" }));
case 'warning':
return h(WarningOutlineIcon, { className: "modus-wc-input-feedback-icon" });
}
}
render() {
return (h(Host, { key: 'ded54b9ce471063dc50ed10bb58ddc5567e9d6fa' }, h("div", Object.assign({ key: 'adfa707815c57e662b7875c889a1ecd442017040', class: this.getClasses() }, this.inheritedAttributes), this.icon ? (h("modus-wc-icon", { decorative: true, name: this.icon })) : (this.getPresetIcon()), h("span", { key: '2a0da0ab5ff2fd9f46a26ddfe639b867041b0164' }, this.message))));
}
get el() { return getElement(this); }
};
ModusWcInputFeedback.style = modusWcInputFeedbackCss;
const modusWcInputLabelCss = "modus-wc-input-label.modus-wc-input-label-host{align-items:center;display:flex}modus-wc-input-label .modus-wc-input-label{font-weight:var(--modus-wc-font-weight-bold)}modus-wc-input-label .modus-wc-input-label.modus-wc-input-label-size-sm{font-size:var(--modus-wc-font-size-xs)}modus-wc-input-label .modus-wc-input-label.modus-wc-input-label-size-sm .modus-wc-input-label-sublabel{font-size:var(--modus-wc-font-size-2xs)}modus-wc-input-label .modus-wc-input-label.modus-wc-input-label-size-md{font-size:var(--modus-wc-font-size-sm)}modus-wc-input-label .modus-wc-input-label.modus-wc-input-label-size-md .modus-wc-input-label-sublabel{font-size:var(--modus-wc-font-size-xs)}modus-wc-input-label .modus-wc-input-label.modus-wc-input-label-size-lg{font-size:var(--modus-wc-font-size-md)}modus-wc-input-label .modus-wc-input-label.modus-wc-input-label-size-lg .modus-wc-input-label-sublabel{font-size:var(--modus-wc-font-size-sm)}modus-wc-input-label .modus-wc-input-label .required-indicator{color:var(--modus-wc-color-error)}[data-theme=modus-classic-light] modus-wc-input-label .modus-wc-input-label{color:var(--modus-wc-color-gray-8)}[data-theme=modus-classic-dark] modus-wc-input-label .modus-wc-input-label{color:var(--modus-wc-color-gray-2)}";
const ModusWcInputLabel = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.inheritedAttributes = {};
/** Additional classes for custom styling. */
this.customClass = '';
/** Whether the label indicates a required field. */
this.required = false;
/** The size of the label. */
this.size = 'md';
this.getClasses = () => {
const classList = ['modus-wc-input-label'];
// The order CSS classes are added matters to CSS specificity
if (this.size)
classList.push(`modus-wc-input-label-size-${this.size}`);
if (this.customClass)
classList.push(this.customClass);
return classList.join(' ');
};
}
componentWillLoad() {
this.inheritedAttributes = inheritAriaAttributes(this.el);
}
render() {
return (h(Host, { key: '656cb5bbca9a3438f159e667e909e972fb3897c0', class: "modus-wc-input-label-host" }, h("label", Object.assign({ key: '98657e371d885ca06260dce54821a3dd6b5892dc', class: this.getClasses(), htmlFor: this.forId }, this.inheritedAttributes), this.labelText, this.required && (h("span", { key: '964b3bcce25ac6e5d6bd891ad250920b047b6342', "aria-hidden": "true", class: "required-indicator" }, '\u00A0*')), this.subLabelText && (h("div", { key: 'ebe343cc6d109e299714e7d0bc9518d36823a9a9', class: "modus-wc-input-label-sublabel" }, this.subLabelText)), h("slot", { key: '32979693b95bf9ea6ac09c54502cdc67a6643ceb' }))));
}
get el() { return getElement(this); }
};
ModusWcInputLabel.style = modusWcInputLabelCss;
export { ModusWcIcon as modus_wc_icon, ModusWcInputFeedback as modus_wc_input_feedback, ModusWcInputLabel as modus_wc_input_label };