@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
86 lines (77 loc) • 8.06 kB
JavaScript
'use strict';
var index = require('./index-CtEGR9Z7.js');
var utils = require('./utils-B2oo-h7a.js');
var baseComponent = require('./base-component-Dx-Crsr_.js');
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 (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", class: `mi-outline mi-check-circle ${className || ''}`, viewBox: "0 0 24 24" },
index.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 (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", class: `mi-outline mi-info ${className || ''}`, viewBox: "0 0 24 24" },
index.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 (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", class: `mi-outline mi-warning ${className || ''}`, viewBox: "0 0 24 24" },
index.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) {
index.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() {
// Auto-inject CSS if component is used inside user's shadow DOM
baseComponent.handleShadowDOMStyles(this.el);
this.inheritedAttributes = utils.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 index.h(WarningOutlineIcon, { className: "modus-wc-input-feedback-icon" });
case 'info':
return index.h(InfoOutlineIcon, { className: "modus-wc-input-feedback-icon" });
case 'success':
return (index.h(CheckCircleOutlineIcon, { className: "modus-wc-input-feedback-icon" }));
case 'warning':
return index.h(WarningOutlineIcon, { className: "modus-wc-input-feedback-icon" });
}
}
render() {
return (index.h(index.Host, { key: '8e3ab4b2d6c3b412dfc4e3a0b2250c9bd35af2ef' }, index.h("div", Object.assign({ key: 'd0f98f24f7f5998395d9e5b48206b9412d5a67ba', class: this.getClasses() }, this.inheritedAttributes), this.icon ? (index.h("modus-wc-icon", { decorative: true, name: this.icon })) : (this.getPresetIcon()), index.h("span", { key: '997c37332c46924cb7343b9795e6ead938b759f4' }, this.message))));
}
get el() { return index.getElement(this); }
};
ModusWcInputFeedback.style = modusWcInputFeedbackCss;
exports.modus_wc_input_feedback = ModusWcInputFeedback;