@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
1 lines • 7.43 kB
JavaScript
import{h as e,r as o,d as s,e as a,g as i}from"./p-C1-Dpkp7.js";import{h as t}from"./p-tWS3Egrk.js";import{i as c,s as r}from"./p-DJ2rBB6r.js";const n=(o,s,a)=>o&&o.items&&0!==o.items.length?e("div",{class:a?"main-menu-section":"submenu-section"},!a&&e("div",{class:"submenu-title-container"},o.title&&e("modus-wc-typography",{customClass:"submenu-title",hierarchy:"p",size:"sm",weight:"bold",label:o.title})),e("modus-wc-menu",{size:"md"},o.items.map((o=>{var a,i;return e("modus-wc-menu-item",{label:o.label,value:null!==(a=o.value)&&void 0!==a?a:o.label,onItemSelect:()=>{var e;return null==s?void 0:s(null!==(e=o.value)&&void 0!==e?e:o.label)}},o.icon&&e("modus-wc-icon",{slot:"start-icon",name:o.icon,size:null!==(i=o.iconSize)&&void 0!==i?i:"sm",variant:o.iconVariant||"solid"}))})))):null,l=class{constructor(e){o(this,e),this.signOutClick=s(this,"signOutClick",7),this.menuItemClick=s(this,"menuItemClick",7),this.inheritedAttributes={},this.handleMenuItemClick=e=>{this.menuItemClick.emit(e)},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(){t(this.el),this.inheritedAttributes=c(this.el)}handleItemSelect(e){e.stopPropagation()}render(){var o,s;const i=r(null===(o=this.profileProps.manageTrimbleId)||void 0===o?void 0:o.link);return e(a,Object.assign({key:"c09a4f84326a0e5b1817fa6ffe07193b9e67cc0b"},this.inheritedAttributes),e("modus-wc-panel",{key:"86a490d35cf00cc42e67c37e3fb094c32c8e1039",height:"auto",width:"298px"},e("div",{key:"d99d62651673362c9fc1d8d34d95a30bb2565240",class:"profile-menu-header",slot:"header"},e("div",{key:"e58bf12edc64839c34590c76a6285888ab39503d",class:"header-content"},e("modus-wc-avatar",{key:"9a73d05ae79687ae1ab5d3fb8a068ddb3edbb800","img-src":this.profileProps.profileImageUrl,alt:this.profileProps.userName||"Profile",size:"lg"}),e("div",{key:"8218955ed6eb3147cccffab56e2dee54ab812eab",class:"text-container"},e("modus-wc-typography",{key:"ce15c871a62b76a24288dce9cc893ef28fb33a66",customClass:"header-text",weight:"semibold",size:"xs",label:this.profileProps.headerName}),e("modus-wc-typography",{key:"93de790ec9a211988511d9ca5b355ae47bbbd6ce",customClass:"user-name-text",weight:"semibold",size:"md",label:this.profileProps.userName}),e("modus-wc-typography",{key:"dba4eef0c1a5fcfe9b18143e4dd4c64b2959289f",customClass:"email-text",weight:"semibold",size:"xs",label:this.profileProps.userEmail}),this.profileProps.manageTrimbleId&&i?e("a",{href:i,target:this.profileProps.manageTrimbleId.target,rel:null!==(s=this.profileProps.manageTrimbleId.rel)&&void 0!==s?s:"_blank"===this.profileProps.manageTrimbleId.target?"noopener noreferrer":void 0},e("modus-wc-typography",{customClass:"manage-link",hierarchy:"p",size:"sm",weight:"normal",label:"Manage my Trimble ID"})):e("modus-wc-typography",{customClass:"manage-link",hierarchy:"p",size:"sm",weight:"normal",label:"Manage my Trimble ID"})))),e("div",{key:"5e2ba4e0aebffb239d4ce5ed7284d8118d6e6204",slot:"body"},n(this.mainMenu,this.handleMenuItemClick,!0),this.menuOne&&n(this.menuOne,this.handleMenuItemClick),this.menuTwo&&n(this.menuTwo,this.handleMenuItemClick),e("modus-wc-menu",{key:"1bdc20fbab07bd9b5ef82c6fba2fd18616f5b843"},e("modus-wc-menu-item",{key:"4dc18386ae48670d408702bc52e5a556782baf94",label:"Sign Out",size:"md",onItemSelect:()=>this.signOutClick.emit()},e("modus-wc-icon",{key:"37d8f53bfb5ed8c5fb4843a7324d5a6004e198bb",slot:"start-icon",name:"sign_out",size:"sm",variant:"solid"})))),e("div",{key:"13104e01dbc1b45543868e4f38e18545a2350f7f",slot:"footer",class:"profile-menu-footer"},e("modus-wc-typography",{key:"a7eca2cef5ebd4816bb76c3265a6a5c5c099ae74",customClass:"footer-text",hierarchy:"p",size:"sm",weight:"normal",label:`©${this.currentYear}, Trimble Inc.`}))))}get el(){return i(this)}};l.style="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}";export{l as modus_wc_profile_menu}