@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
107 lines (99 loc) • 8.68 kB
JavaScript
import { h, p as proxyCustomElement, H, c as Host } from './p-BMvVSi6Y.js';
import { i as inheritAriaAttributes } from './p-COxr4v9W.js';
import { d as defineCustomElement$1 } from './p-C8YB6DYg.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 (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 = /*@__PURE__*/ proxyCustomElement(class ModusWcInputFeedback extends H {
constructor() {
super();
this.__registerHost();
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 this; }
static get style() { return modusWcInputFeedbackCss; }
}, [0, "modus-wc-input-feedback", {
"customClass": [1, "custom-class"],
"icon": [1],
"level": [1],
"message": [1],
"size": [1]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["modus-wc-input-feedback", "modus-wc-icon"];
components.forEach(tagName => { switch (tagName) {
case "modus-wc-input-feedback":
if (!customElements.get(tagName)) {
customElements.define(tagName, ModusWcInputFeedback);
}
break;
case "modus-wc-icon":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { ModusWcInputFeedback as M, defineCustomElement as d };