@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
89 lines (84 loc) • 9.77 kB
JavaScript
import { h, r as registerInstance, d as createEvent, e as Host, g as getElement } from './index-C1-Dpkp7.js';
import { h as handleShadowDOMStyles } from './base-component-tWS3Egrk.js';
import { i as inheritAriaAttributes, s as sanitizeUrl } from './utils-DN2BGzSQ.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 = class {
constructor(hostRef) {
registerInstance(this, hostRef);
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 getElement(this); }
};
ModusWcProfileMenu.style = modusWcProfileMenuCss;
export { ModusWcProfileMenu as modus_wc_profile_menu };