@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
103 lines (98 loc) • 8.84 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-D_4hbGjA.js';
import { i as inheritAriaAttributes } from './utils-DQvnWXRl.js';
const convertPropsToClasses = ({ variant, }) => {
let classes = '';
if (variant) {
classes = `${classes} modus-wc-alert-${variant}`;
}
return classes.trim();
};
const modusWcAlertCss = "modus-wc-alert .modus-wc-alert{align-content:center;background-color:var(--modus-wc-color-gray-light);border-color:var(--modus-wc-color-gray-0);border-width:var(--alert-border-width);border-left-width:var(--alert-border-left-width);border-radius:var(--alert-border-radius);color:var(--modus-wc-color-gray-10)}modus-wc-alert .modus-wc-alert .title{font-size:var(--modus-wc-font-size-md);font-weight:var(--modus-wc-font-weight-bold)}modus-wc-alert .modus-wc-alert .description{font-size:var(--modus-wc-font-size-md)}modus-wc-alert .modus-wc-alert.modus-wc-alert-info{background-color:var(--modus-wc-color-blue-pale);border-color:var(--modus-wc-color-info-blue);color:var(--modus-wc-color-gray-10)}modus-wc-alert .modus-wc-alert.modus-wc-alert-error{background-color:color-mix(in sRGB, var(--modus-wc-color-red-pale) 80%, var(--modus-wc-color-gray-light));border-color:var(--modus-wc-color-red-dark);color:var(--modus-wc-color-gray-10)}modus-wc-alert .modus-wc-alert.modus-wc-alert-success{background-color:color-mix(in sRGB, var(--modus-wc-color-success-pale) 80%, var(--modus-wc-color-gray-light));border-color:var(--modus-wc-color-green-dark);color:var(--modus-wc-color-gray-10)}modus-wc-alert .modus-wc-alert.modus-wc-alert-warning{background-color:color-mix(in sRGB, var(--modus-wc-color-yellow-pale) 60%, var(--modus-wc-color-gray-light));border-color:var(--modus-wc-color-yellow-dark);color:var(--modus-wc-color-black)}[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert .modus-wc-alert-icon{color:var(--modus-wc-color-gray-5)}[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert.modus-wc-alert-info .modus-wc-alert-icon{color:var(--modus-wc-color-info-blue)}[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert.modus-wc-alert-error .modus-wc-alert-icon{color:var(--modus-wc-color-red-dark)}[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert.modus-wc-alert-success .modus-wc-alert-icon{color:var(--modus-wc-color-green-dark)}[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert.modus-wc-alert-warning .modus-wc-alert-icon{color:var(--modus-wc-color-yellow-dark)}[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert,[data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert{border-left-width:12px;border-radius:var(--modus-wc-border-radius-md);gap:var(--modus-wc-spacing-sm);min-height:56px;padding-bottom:var(--modus-wc-spacing-sm);padding-top:var(--modus-wc-spacing-sm)}[data-theme=connect-dark] modus-wc-alert .modus-wc-alert,[data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert,[data-theme=modus-modern-dark] modus-wc-alert .modus-wc-alert{background-color:var(--modus-wc-color-gray-10);border-color:var(--modus-wc-color-gray-9);color:var(--modus-wc-color-gray-light)}[data-theme=connect-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-info,[data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-info,[data-theme=modus-modern-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-info{background-color:color-mix(in sRGB, var(--modus-wc-color-highlight-blue) 30%, transparent);border-color:var(--modus-wc-color-highlight-blue)}[data-theme=connect-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-error,[data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-error,[data-theme=modus-modern-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-error{background-color:color-mix(in sRGB, var(--modus-wc-color-red) 50%, transparent);border-color:var(--modus-wc-color-red-light)}[data-theme=connect-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-success,[data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-success,[data-theme=modus-modern-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-success{background-color:color-mix(in sRGB, var(--modus-wc-color-green) 50%, transparent);border-color:var(--modus-wc-color-green-light)}[data-theme=connect-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-warning,[data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-warning,[data-theme=modus-modern-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-warning{background-color:color-mix(in sRGB, var(--modus-wc-color-yellow) 50%, transparent);border-color:var(--modus-wc-color-yellow-light)}";
const ModusWcAlert = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.dismissClick = createEvent(this, "dismissClick");
this.inheritedAttributes = {};
/** Custom CSS class to apply to the outer div element. */
this.customClass = '';
/** Whether the alert has a dismiss button */
this.dismissible = false;
/** The variant of the alert. */
this.variant = 'info';
}
componentWillLoad() {
// Set default role if none provided
if (!this.el.hasAttribute('role')) {
this.el.setAttribute('role', 'status');
}
// Then inherit all ARIA attributes normally
this.inheritedAttributes = inheritAriaAttributes(this.el);
}
getClasses() {
const classList = ['modus-wc-alert'];
const propClasses = convertPropsToClasses({
variant: this.variant,
});
// 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(' ');
}
getLeadingIcon() {
if (this.icon) {
return (h("modus-wc-icon", { "custom-class": "modus-wc-alert-icon", name: this.icon, variant: "outlined" }));
}
switch (this.variant) {
case 'error':
return (h("modus-wc-icon", { "custom-class": "modus-wc-alert-icon", name: "alert", variant: "outlined" }));
case 'success':
return (h("modus-wc-icon", { "custom-class": "modus-wc-alert-icon", name: "check_circle" }));
case 'warning':
return (h("modus-wc-icon", { "custom-class": "modus-wc-alert-icon", name: "warning", variant: "outlined" }));
case 'info':
default:
return (h("modus-wc-icon", { "custom-class": "modus-wc-alert-icon", name: "info", variant: "outlined" }));
}
}
delayChanged(newDelay) {
clearTimeout(this.timerId);
this.timerId = setTimeout(() => {
this.dismissElement();
}, newDelay);
}
dismissElement() {
this.dismissClick.emit();
this.el.remove();
}
componentDidLoad() {
if (this.delay && this.delay > 0) {
this.timerId = setTimeout(() => {
this.dismissElement();
}, this.delay);
}
}
disconnectedCallback() {
clearTimeout(this.timerId);
}
elementKeyupHandler(event) {
switch (event.code) {
case 'Escape':
if (!this.dismissible) {
return;
}
this.dismissElement();
break;
}
}
render() {
return (h(Host, { key: '4fba2bccde6a15c0d6431a1c593ac4b6a3de9a2c' }, h("div", Object.assign({ key: '6ecb7d3d6643b3323da231775595447812faacfa', class: this.getClasses() }, this.inheritedAttributes), this.getLeadingIcon(), h("div", { key: '7ba3c57d00f326da4be078db4920960128c8159d' }, h("div", { key: '69e1c5848fb512f65320abf87818213f5fda0127', class: "title" }, this.alertTitle), this.alertDescription && (h("div", { key: '053789b7eef0bea2e510b5a483ea09a340ce712f', class: "description" }, this.alertDescription)), !this.alertTitle && !this.alertDescription && (h("slot", { key: 'f94f1ded917dcdf0fe0c29f3b4c4e03b8556ed87', name: "content" }))), h("slot", { key: '7007b90ccffc25123265d1b4ad35bca5ff205a5c', name: "button" }), this.dismissible && (h("modus-wc-button", { key: '2466b7e16d87ba8dd6bf2bc5611c546e42790d51', "aria-label": "notification button", color: "tertiary", size: "sm", slot: "button", variant: "borderless", onButtonClick: () => this.dismissElement() }, h("modus-wc-icon", { key: 'de2c7f0ec8db5b689a36536a4fa8b1080f071b21', "custom-class": "modus-wc-alert-close-icon", name: "close", variant: "outlined" }))))));
}
get el() { return getElement(this); }
static get watchers() { return {
"delay": ["delayChanged"]
}; }
};
ModusWcAlert.style = modusWcAlertCss;
export { ModusWcAlert as modus_wc_alert };