@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
164 lines (158 loc) • 12.6 kB
JavaScript
import { h, p as proxyCustomElement, H, d as createEvent, c as Host } from './p-Blhe_h6i.js';
import { h as handleShadowDOMStyles } from './p-tWS3Egrk.js';
import { i as inheritAriaAttributes, s as sanitizeUrl } from './p-DUWn6PrQ.js';
import { d as defineCustomElement$a } from './p-4FHGIW2M.js';
import { d as defineCustomElement$9 } from './p-C1uly3sM.js';
import { d as defineCustomElement$8 } from './p-B8VJbmjw.js';
import { d as defineCustomElement$7 } from './p-BqauKZkb.js';
import { d as defineCustomElement$6 } from './p-CMJRftIA.js';
import { d as defineCustomElement$5 } from './p-jE7DNOua.js';
import { d as defineCustomElement$4 } from './p-D8eGlcGV.js';
import { d as defineCustomElement$3 } from './p-BFz7tQrF.js';
import { d as defineCustomElement$2 } from './p-8Jp6bXoG.js';
/**
* Renders a submenu section with optional title and menu items
* @param subMenu - The submenu configuration containing title and items
* @param onMenuItemClick - Callback function when a menu item is clicked
* @returns JSX element for the submenu section or null if no items
*/
const renderSubMenu = (subMenu, onMenuItemClick, isMainMenu) => {
if (!subMenu || !subMenu.items || subMenu.items.length === 0) {
return null;
}
return (h("div", { class: isMainMenu ? 'main-menu-section' : 'submenu-section' },
!isMainMenu && (h("div", { class: "submenu-title-container" }, subMenu.title && (h("modus-wc-typography", { customClass: "submenu-title", hierarchy: "p", size: "sm", weight: "bold", label: subMenu.title })))),
h("modus-wc-menu", { size: "md" }, subMenu.items.map((item) => {
var _a, _b;
return (h("modus-wc-menu-item", { label: item.label, value: (_a = item.value) !== null && _a !== void 0 ? _a : item.label, onItemSelect: () => { var _a; return onMenuItemClick === null || onMenuItemClick === void 0 ? void 0 : onMenuItemClick((_a = item.value) !== null && _a !== void 0 ? _a : item.label); } }, item.icon && (h("modus-wc-icon", { slot: "start-icon", name: item.icon, size: (_b = item.iconSize) !== null && _b !== void 0 ? _b : 'sm', variant: item.iconVariant || 'solid' }))));
}))));
};
const modusWcProfileMenuCss = "modus-wc-profile-menu{background-color:var(--modus-wc-color-base-page);border-radius:var(--modus-wc-border-radius-box)}modus-wc-profile-menu .modus-wc-panel{background-color:var(--modus-wc-color-base-page);border:1px solid var(--modus-wc-color-base-200);border-radius:var(--rounded-box);box-shadow:0 4px 6px -4px var(--modus-wc-color-base-200), 0 10px 15px -3px var(--modus-wc-color-base-200);display:block;height:auto;padding:0 var(--modus-wc-spacing-sm)}modus-wc-profile-menu .profile-menu-header{align-items:center;align-self:center;border-bottom:1px solid var(--modus-wc-color-base-200);display:flex;flex-direction:column;margin-inline:auto;padding:var(--modus-wc-spacing-lg);width:244px}modus-wc-profile-menu .profile-menu-header .header-content{align-items:center;align-self:stretch;display:flex;flex-direction:column;gap:var(--modus-wc-spacing-md)}modus-wc-profile-menu .profile-menu-header .header-content .text-container{align-self:stretch;display:flex;flex-direction:column;gap:var(--modus-wc-spacing-2xs);justify-content:center;text-align:center}modus-wc-profile-menu .profile-menu-header .header-content .text-container .header-text,modus-wc-profile-menu .profile-menu-header .header-content .text-container .user-name-text,modus-wc-profile-menu .profile-menu-header .header-content .text-container .email-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}modus-wc-profile-menu .profile-menu-header .header-content .text-container .header-text{color:var(--modus-wc-color-base-content);line-height:16px;opacity:var(--modus-wc-opacity-overlay)}modus-wc-profile-menu .profile-menu-header .header-content .text-container .user-name-text{color:var(--modus-wc-color-base-content);line-height:24px}modus-wc-profile-menu .profile-menu-header .header-content .text-container .email-text{color:var(--modus-wc-color-base-content);line-height:16px;opacity:var(--modus-wc-opacity-overlay)}modus-wc-profile-menu .profile-menu-header .header-content .manage-link{color:var(--modus-wc-color-primary);line-height:20px;text-decoration:underline}modus-wc-profile-menu .profile-menu-footer{align-items:center;border-top:1px solid var(--modus-wc-color-base-200);display:flex;flex-direction:column;gap:var(--modus-wc-spacing-2xs);padding:var(--modus-wc-spacing-sm) var(--modus-wc-spacing-lg)}modus-wc-profile-menu .profile-menu-footer .footer-text{color:var(--modus-wc-color-accent);line-height:var(--modus-wc-font-size-2xl)}modus-wc-profile-menu .submenu-section .submenu-title-container{align-items:flex-end;border-bottom:1px solid var(--modus-wc-color-base-200);display:flex;height:var(--modus-wc-line-height-h0);padding:var(--modus-wc-spacing-sm) var(--modus-wc-spacing-lg)}modus-wc-profile-menu .submenu-section .submenu-title{color:var(--modus-wc-color-base-content-low-contrast);line-height:var(--modus-wc-font-size-2xl)}modus-wc-profile-menu [slot=body] modus-wc-menu .modus-wc-menu-item{color:var(--modus-wc-color-base-content);padding:var(--modus-wc-spacing-2xs) var(--modus-wc-spacing-xs)}modus-wc-profile-menu [slot=body] modus-wc-menu .modus-wc-menu-item .modus-wc-menu-item-labels{color:var(--modus-wc-color-base-content)}modus-wc-profile-menu [slot=body] modus-wc-menu li.modus-wc-menu-item-active{background-color:transparent;color:inherit}";
const ModusWcProfileMenu$1 = /*@__PURE__*/ proxyCustomElement(class ModusWcProfileMenu extends H {
constructor() {
super();
this.__registerHost();
this.signOutClick = createEvent(this, "signOutClick", 7);
this.menuItemClick = createEvent(this, "menuItemClick", 7);
this.inheritedAttributes = {};
this.handleMenuItemClick = (value) => {
this.menuItemClick.emit(value);
};
this.currentYear = new Date().getFullYear();
this.mainMenu = {
items: [
{
label: 'My Profile',
icon: 'info',
iconVariant: 'solid',
iconSize: 'sm',
value: 'my-profile',
},
{
label: 'My Products',
icon: 'home',
iconVariant: 'solid',
iconSize: 'sm',
value: 'my-products',
},
{
label: 'Support center',
icon: 'bar_graph',
iconVariant: 'solid',
iconSize: 'sm',
value: 'support-center',
},
{
label: 'Admin settings',
icon: 'download',
iconVariant: 'solid',
iconSize: 'sm',
value: 'admin-settings',
},
],
};
}
componentWillLoad() {
handleShadowDOMStyles(this.el);
this.inheritedAttributes = inheritAriaAttributes(this.el);
}
handleItemSelect(event) {
event.stopPropagation();
}
render() {
var _a, _b;
const manageTrimbleIdLink = sanitizeUrl((_a = this.profileProps.manageTrimbleId) === null || _a === void 0 ? void 0 : _a.link);
return (h(Host, Object.assign({ key: 'c09a4f84326a0e5b1817fa6ffe07193b9e67cc0b' }, this.inheritedAttributes), h("modus-wc-panel", { key: '86a490d35cf00cc42e67c37e3fb094c32c8e1039', height: "auto", width: "298px" }, h("div", { key: 'd99d62651673362c9fc1d8d34d95a30bb2565240', class: "profile-menu-header", slot: "header" }, h("div", { key: 'e58bf12edc64839c34590c76a6285888ab39503d', class: "header-content" }, h("modus-wc-avatar", { key: '9a73d05ae79687ae1ab5d3fb8a068ddb3edbb800', "img-src": this.profileProps.profileImageUrl, alt: this.profileProps.userName || 'Profile', size: "lg" }), h("div", { key: '8218955ed6eb3147cccffab56e2dee54ab812eab', class: "text-container" }, h("modus-wc-typography", { key: 'ce15c871a62b76a24288dce9cc893ef28fb33a66', customClass: "header-text", weight: "semibold", size: "xs", label: this.profileProps.headerName }), h("modus-wc-typography", { key: '93de790ec9a211988511d9ca5b355ae47bbbd6ce', customClass: "user-name-text", weight: "semibold", size: "md", label: this.profileProps.userName }), h("modus-wc-typography", { key: 'dba4eef0c1a5fcfe9b18143e4dd4c64b2959289f', customClass: "email-text", weight: "semibold", size: "xs", label: this.profileProps.userEmail }), this.profileProps.manageTrimbleId && manageTrimbleIdLink ? (h("a", { href: manageTrimbleIdLink, target: this.profileProps.manageTrimbleId.target, rel: (_b = this.profileProps.manageTrimbleId.rel) !== null && _b !== void 0 ? _b : (this.profileProps.manageTrimbleId.target === '_blank'
? 'noopener noreferrer'
: undefined) }, h("modus-wc-typography", { customClass: "manage-link", hierarchy: "p", size: "sm", weight: "normal", label: "Manage my Trimble ID" }))) : (h("modus-wc-typography", { customClass: "manage-link", hierarchy: "p", size: "sm", weight: "normal", label: "Manage my Trimble ID" }))))), h("div", { key: '5e2ba4e0aebffb239d4ce5ed7284d8118d6e6204', slot: "body" }, renderSubMenu(this.mainMenu, this.handleMenuItemClick, true), this.menuOne &&
renderSubMenu(this.menuOne, this.handleMenuItemClick), this.menuTwo &&
renderSubMenu(this.menuTwo, this.handleMenuItemClick), h("modus-wc-menu", { key: '1bdc20fbab07bd9b5ef82c6fba2fd18616f5b843' }, h("modus-wc-menu-item", { key: '4dc18386ae48670d408702bc52e5a556782baf94', label: "Sign Out", size: "md", onItemSelect: () => this.signOutClick.emit() }, h("modus-wc-icon", { key: '37d8f53bfb5ed8c5fb4843a7324d5a6004e198bb', slot: "start-icon", name: "sign_out", size: "sm", variant: "solid" })))), h("div", { key: '13104e01dbc1b45543868e4f38e18545a2350f7f', slot: "footer", class: "profile-menu-footer" }, h("modus-wc-typography", { key: 'a7eca2cef5ebd4816bb76c3265a6a5c5c099ae74', customClass: "footer-text", hierarchy: "p", size: "sm", weight: "normal", label: `©${this.currentYear}, Trimble Inc.` })))));
}
get el() { return this; }
static get style() { return modusWcProfileMenuCss; }
}, [0, "modus-wc-profile-menu", {
"profileProps": [16, "profile-props"],
"menuOne": [16, "menu-one"],
"menuTwo": [16, "menu-two"]
}, [[0, "itemSelect", "handleItemSelect"]]]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["modus-wc-profile-menu", "modus-wc-avatar", "modus-wc-checkbox", "modus-wc-icon", "modus-wc-input-label", "modus-wc-menu", "modus-wc-menu-item", "modus-wc-panel", "modus-wc-tooltip", "modus-wc-typography"];
components.forEach(tagName => { switch (tagName) {
case "modus-wc-profile-menu":
if (!customElements.get(tagName)) {
customElements.define(tagName, ModusWcProfileMenu$1);
}
break;
case "modus-wc-avatar":
if (!customElements.get(tagName)) {
defineCustomElement$a();
}
break;
case "modus-wc-checkbox":
if (!customElements.get(tagName)) {
defineCustomElement$9();
}
break;
case "modus-wc-icon":
if (!customElements.get(tagName)) {
defineCustomElement$8();
}
break;
case "modus-wc-input-label":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "modus-wc-menu":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "modus-wc-menu-item":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "modus-wc-panel":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "modus-wc-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "modus-wc-typography":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const ModusWcProfileMenu = ModusWcProfileMenu$1;
const defineCustomElement = defineCustomElement$1;
export { ModusWcProfileMenu, defineCustomElement };