@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
159 lines (149 loc) • 11.7 kB
JavaScript
import { h, p as proxyCustomElement, H, e as createEvent, c as Host } from './p-BMvVSi6Y.js';
import { C as CloseSolidIcon } from './p-CyOAOIPl.js';
import { i as inheritAriaAttributes } from './p-COxr4v9W.js';
import { d as defineCustomElement$3 } from './p-1YuUWYzU.js';
import { d as defineCustomElement$2 } from './p-C8YB6DYg.js';
const convertPropsToClasses = ({ variant, }) => {
let classes = '';
if (variant) {
classes = `${classes} modus-wc-alert-${variant}`;
}
return classes.trim();
};
const AlertSolidIcon = ({ className }) => (h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", class: `mi-solid mi-alert ${className || ''}`, viewBox: "0 0 24 24" },
h("path", { d: "M22.87 19.04 13.72 3c-.76-1.33-2.68-1.33-3.44 0L1.13 19.04C.38 20.36 1.33 22 2.85 22h18.3c1.52 0 2.47-1.64 1.72-2.96m-11.92-9.9c0-.63.45-1.15 1.06-1.15s1.06.51 1.06 1.15c0 .04-.01.12-.01.14l-.39 5.04c-.04.44-.3.7-.66.7s-.62-.26-.66-.7l-.4-5.04zm1.06 9.89c-.67 0-1.21-.54-1.21-1.21s.54-1.19 1.21-1.19 1.21.54 1.21 1.19-.54 1.21-1.21 1.21" })));
const CheckCircleSolidIcon = ({ className, }) => {
return (h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", class: `mi-solid 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 2m5.56 7.74-6.39 6.4a1 1 0 0 1-1.42-.01l-3.3-3.34-.01-.01a.993.993 0 0 1 .01-1.4.996.996 0 0 1 1.41 0l2.6 2.62 5.68-5.69a.996.996 0 0 1 1.41 0v.02h.01c.39.39.39 1.02 0 1.41" })));
};
const InfoSolidIcon = ({ className }) => {
return (h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", class: `mi-solid mi-info ${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 2m1.06 14.15c0 .55-.45 1-1 1s-1-.45-1-1v-4.14c0-.55.45-1 1-1s1 .45 1 1zm-1-7.11c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1" })));
};
const WarningSolidIcon = ({ className }) => {
return (h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", class: `mi-solid mi-warning ${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 2m-1.06 5.63c0-.63.45-1.15 1.06-1.15s1.06.51 1.06 1.15c0 .04-.01.12-.01.14l-.39 5.04c-.04.44-.3.7-.66.7s-.62-.26-.66-.7l-.4-5.04zM12 17.52c-.67 0-1.21-.54-1.21-1.21s.54-1.19 1.21-1.19 1.21.54 1.21 1.19-.54 1.21-1.21 1.21" })));
};
const modusWcAlertCss = "modus-wc-alert .modus-wc-alert{align-content:center;border-left-width:var(--modus-wc-border-width-xl);border-radius:var(--modus-wc-border-radius-lg)}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:color-mix(in sRGB, var(--modus-wc-color-primary) 15%, transparent);border-color:var(--modus-wc-color-highlight-blue);color:var(--modus-wc-color-base-content)}modus-wc-alert .modus-wc-alert.modus-wc-alert-error{background-color:color-mix(in sRGB, var(--modus-wc-color-error) 20%, transparent);border-color:var(--modus-wc-color-error);color:var(--modus-wc-error-content)}modus-wc-alert .modus-wc-alert.modus-wc-alert-success{background-color:color-mix(in sRGB, var(--modus-wc-color-success) 20%, transparent);border-color:var(--modus-wc-color-success);color:var(--modus-wc-success-content)}modus-wc-alert .modus-wc-alert.modus-wc-alert-warning{background-color:color-mix(in sRGB, var(--modus-wc-color-warning) 20%, transparent);border-color:var(--modus-wc-color-warning);color:var(--modus-wc-color-base-content)}modus-wc-alert .modus-wc-alert .modus-wc-alert-close-icon,modus-wc-alert .modus-wc-alert .modus-wc-alert-icon{height:1.5rem;width:1.5rem}[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=modus-classic-light] modus-wc-alert .modus-wc-alert{color:var(--modus-wc-color-trimble-gray)}[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert.modus-wc-alert-info{background-color:var(--modus-wc-color-blue-pale);border-color:var(--modus-wc-color-trimble-blue)}[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert.modus-wc-alert-info .modus-wc-alert-icon{color:var(--modus-wc-color-trimble-blue)}[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert.modus-wc-alert-error{background-color:var(--modus-wc-color-red-pale);border-color:var(--modus-wc-color-red)}[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)}[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert.modus-wc-alert-success{background-color:var(--modus-wc-color-green-pale);border-color:var(--modus-wc-color-green)}[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)}[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert.modus-wc-alert-warning{background-color:var(--modus-wc-color-yellow-pale);border-color:var(--modus-wc-color-yellow-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-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-info{background-color:color-mix(in sRGB, var(--modus-wc-color-highlight-blue) 50%, transparent);border-color:var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-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);color:var(--modus-wc-error-content)}[data-theme=modus-classic-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);color:var(--modus-wc-success-content)}[data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-warning{background-color:color-mix(in sRGB, var(--modus-wc-color-yellow-dark) 50%, transparent);border-color:var(--modus-wc-color-yellow-dark);color:var(--modus-wc-color-white)}";
const ModusWcAlert$1 = /*@__PURE__*/ proxyCustomElement(class ModusWcAlert extends H {
constructor() {
super();
this.__registerHost();
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';
/** Role taken by the alert. Defaults to 'status' */
this.role = 'status';
}
componentWillLoad() {
this.inheritedAttributes = inheritAriaAttributes(this.el, ['role']);
}
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 }));
}
switch (this.variant) {
case 'error':
return h(AlertSolidIcon, { className: "modus-wc-alert-icon" });
case 'success':
return h(CheckCircleSolidIcon, { className: "modus-wc-alert-icon" });
case 'warning':
return h(WarningSolidIcon, { className: "modus-wc-alert-icon" });
case 'info':
default:
return h(InfoSolidIcon, { className: "modus-wc-alert-icon" });
}
}
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: '53bf0c060956aec86bbb41ff9c5367ae3757070d' }, h("div", Object.assign({ key: '9932f1c3e714eaa85c4cfaea462f22bac6cfe622', class: this.getClasses(), role: this.role }, this.inheritedAttributes), this.getLeadingIcon(), h("div", { key: '6514a604258e9190708d7eabfabe1c6ed2449218' }, h("div", { key: '9535218f2a5252d70f5b6008489c04c75e2982d2', class: "title" }, this.alertTitle), this.alertDescription && (h("div", { key: 'c412b0f7735aac130ad8ca647ab3af07cf536c10', class: "description" }, this.alertDescription)), !this.alertTitle && !this.alertDescription && (h("slot", { key: '7796cb5d4f7e9c6141618db4d8db91053dd1cea1', name: "content" }))), h("slot", { key: '2b2722869563a768fe537f37b077377fb98b45b4', name: "button" }), this.dismissible && (h("modus-wc-button", { key: '5f913216d03ae975c6468f0f5ff5c311c812d92e', "aria-label": "notification button", color: "secondary", size: "sm", slot: "button", variant: "borderless", onButtonClick: () => this.dismissElement() }, h(CloseSolidIcon, { key: '0aa4e8db4057b286dc299d0376b0443486fae761', className: "modus-wc-alert-close-icon" }))))));
}
get el() { return this; }
static get watchers() { return {
"delay": ["delayChanged"]
}; }
static get style() { return modusWcAlertCss; }
}, [4, "modus-wc-alert", {
"alertDescription": [1, "alert-description"],
"alertTitle": [1, "alert-title"],
"customClass": [1, "custom-class"],
"delay": [2],
"dismissible": [4],
"icon": [1],
"variant": [1],
"role": [1]
}, [[0, "keyup", "elementKeyupHandler"]], {
"delay": ["delayChanged"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["modus-wc-alert", "modus-wc-button", "modus-wc-icon"];
components.forEach(tagName => { switch (tagName) {
case "modus-wc-alert":
if (!customElements.get(tagName)) {
customElements.define(tagName, ModusWcAlert$1);
}
break;
case "modus-wc-button":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "modus-wc-icon":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const ModusWcAlert = ModusWcAlert$1;
const defineCustomElement = defineCustomElement$1;
export { ModusWcAlert, defineCustomElement };