@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
153 lines (140 loc) • 13 kB
JavaScript
'use strict';
var index = require('./index-Cr4UXaM1.js');
var utils = require('./utils-C0e12S4M.js');
const modusWcIconCss = "modus-wc-icon .modus-icons.modus-wc-icon--xs{font-size:1rem}modus-wc-icon .modus-icons.modus-wc-icon--sm{font-size:1.25rem}modus-wc-icon .modus-icons.modus-wc-icon--md{font-size:1.5rem}modus-wc-icon .modus-icons.modus-wc-icon--lg{font-size:2rem}modus-wc-icon .modus-icons.modus-wc-icon--xl{font-size:4rem}";
const ModusWcIcon = class {
constructor(hostRef) {
index.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 = utils.inheritAriaAttributes(this.el);
}
getClasses() {
const classList = ['modus-wc-icon modus-icons'];
// The order CSS classes are added matters to CSS specificity
classList.push(`modus-wc-icon--${this.size}`);
if (this.customClass)
classList.push(this.customClass);
return classList.join(' ');
}
render() {
const ariaHidden = this.decorative ? 'true' : null;
const role = this.decorative ? undefined : 'img';
return (index.h(index.Host, { key: '81718a9ea5b64625ca3b89ddabe0be8f2f31df73', class: "modus-wc-flex modus-wc-items-center" }, index.h("i", Object.assign({ key: 'e384b6a3a1bc388cb16e7fea0b34a5e9c6670be7', "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 index.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 (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() {
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: 'ded54b9ce471063dc50ed10bb58ddc5567e9d6fa' }, index.h("div", Object.assign({ key: 'adfa707815c57e662b7875c889a1ecd442017040', class: this.getClasses() }, this.inheritedAttributes), this.icon ? (index.h("modus-wc-icon", { decorative: true, name: this.icon })) : (this.getPresetIcon()), index.h("span", { key: '2a0da0ab5ff2fd9f46a26ddfe639b867041b0164' }, this.message))));
}
get el() { return index.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) {
index.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 = utils.inheritAriaAttributes(this.el);
}
render() {
return (index.h(index.Host, { key: '53a9b19673b812e5285dad5c3fc7516095f4d143', class: "modus-wc-input-label-host" }, index.h("label", Object.assign({ key: '303ce89949b363cfb2706ad200eb1fc0f61c0956', class: this.getClasses(), htmlFor: this.forId }, this.inheritedAttributes), this.labelText, this.required && (index.h("span", { key: '7ebac3d616705386543ceab38238c46aabfe6737', "aria-hidden": "true", class: "required-indicator" }, '\u00A0*')), this.subLabelText && (index.h("div", { key: 'dc28e0b9cd77428ad680941ce3ba36b48f01cca9', class: "modus-wc-input-label-sublabel" }, this.subLabelText)), index.h("slot", { key: 'bfb4c708a73007edff6bb909a6fa88f0f62b6868' }))));
}
get el() { return index.getElement(this); }
};
ModusWcInputLabel.style = modusWcInputLabelCss;
exports.modus_wc_icon = ModusWcIcon;
exports.modus_wc_input_feedback = ModusWcInputFeedback;
exports.modus_wc_input_label = ModusWcInputLabel;