@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
192 lines (191 loc) • 9.61 kB
JavaScript
import { h, Host, } from "@stencil/core";
import { handleShadowDOMStyles } from "../base-component";
import { inheritAriaAttributes, sanitizeUrl } from "../utils";
import { renderSubMenu } from "./utils/menu_template";
export class ModusWcProfileMenu {
constructor() {
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.` })))));
}
static get is() { return "modus-wc-profile-menu"; }
static get originalStyleUrls() {
return {
"$": ["modus-wc-profile-menu.scss"]
};
}
static get styleUrls() {
return {
"$": ["modus-wc-profile-menu.css"]
};
}
static get properties() {
return {
"profileProps": {
"type": "unknown",
"attribute": "profile-props",
"mutable": false,
"complexType": {
"original": "IProfileMenuProps",
"resolved": "IProfileMenuProps",
"references": {
"IProfileMenuProps": {
"location": "local",
"path": "/home/runner/work/modus-wc-2.0/modus-wc-2.0/src/components/modus-wc-profile-menu/modus-wc-profile-menu.tsx",
"id": "src/components/modus-wc-profile-menu/modus-wc-profile-menu.tsx::IProfileMenuProps"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Profile menu properties containing user information"
},
"getter": false,
"setter": false
},
"menuOne": {
"type": "unknown",
"attribute": "menu-one",
"mutable": false,
"complexType": {
"original": "ISubMenu",
"resolved": "ISubMenu | undefined",
"references": {
"ISubMenu": {
"location": "local",
"path": "/home/runner/work/modus-wc-2.0/modus-wc-2.0/src/components/modus-wc-profile-menu/modus-wc-profile-menu.tsx",
"id": "src/components/modus-wc-profile-menu/modus-wc-profile-menu.tsx::ISubMenu"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Configuration for the first menu including title and items"
},
"getter": false,
"setter": false
},
"menuTwo": {
"type": "unknown",
"attribute": "menu-two",
"mutable": false,
"complexType": {
"original": "ISubMenu",
"resolved": "ISubMenu | undefined",
"references": {
"ISubMenu": {
"location": "local",
"path": "/home/runner/work/modus-wc-2.0/modus-wc-2.0/src/components/modus-wc-profile-menu/modus-wc-profile-menu.tsx",
"id": "src/components/modus-wc-profile-menu/modus-wc-profile-menu.tsx::ISubMenu"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Configuration for the second menu including title and items"
},
"getter": false,
"setter": false
}
};
}
static get events() {
return [{
"method": "signOutClick",
"name": "signOutClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the Sign Out menu item is clicked"
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "menuItemClick",
"name": "menuItemClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when any menu item is clicked, passing back the item value or label"
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}];
}
static get elementRef() { return "el"; }
static get listeners() {
return [{
"name": "itemSelect",
"method": "handleItemSelect",
"target": undefined,
"capture": false,
"passive": false
}];
}
}