@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
835 lines (834 loc) • 41.6 kB
JavaScript
// TODO - add coverage
// istanbul ignore file
import { Fragment, h, Host, } from "@stencil/core";
import { AiDarkIcon } from "../../icons/ai-dark.icon";
import { AiLightIcon } from "../../icons/ai-light.icon";
import { AppsSolidIcon } from "../../icons/apps-solid.icon";
import { HelpSolidIcon } from "../../icons/help-solid.icon";
import { MenuSolidIcon } from "../../icons/menu-solid.icon";
import { MoreVerticalSolidIcon } from "../../icons/more-vertical-solid.icon";
import { NotificationsSolidIcon } from "../../icons/notifications-solid.icon";
import { SearchSolidIcon } from "../../icons/search-solid.icon";
import { handleShadowDOMStyles } from "../base-component";
import { inheritAriaAttributes, isLightMode } from "../utils";
/**
* A customizable navbar component used for top level navigation of all Trimble applications.
*/
export class ModusWcNavbar {
constructor() {
this.inheritedAttributes = {};
this.searchDebounceTimer = null;
/** The name of the logo to display. Supports any valid 'logo-name' from the 'modus-wc-logo' component. Defaults to 'trimble'. */
this.logoName = 'trimble';
/** The open state of the apps menu. */
this.appsMenuOpen = false;
/** Applies condensed layout and styling. */
this.condensed = false;
/** The open state of the condensed menu. */
this.condensedMenuOpen = false;
/** Custom CSS class to apply to the host element. */
this.customClass = '';
/** The open state of the main menu. */
this.mainMenuOpen = false;
/** The open state of the notifications menu. */
this.notificationsMenuOpen = false;
/** Debounce time in milliseconds for search input changes. Default is 300ms. */
this.searchDebounceMs = 300;
/** The open state of the search input. */
this.searchInputOpen = false;
/** The open state of the user menu. */
this.userMenuOpen = false;
/** The visibility of individual navbar buttons. Default is user profile visible, others hidden. */
this.visibility = {
ai: false,
apps: false,
help: false,
logo: true,
mainMenu: false,
notifications: false,
search: false,
searchInput: false,
user: true,
};
this.isLight = true;
this.searchValue = '';
this.themeObserver = null;
this.handleAiClick = (event) => {
this.aiClick.emit(event === null || event === void 0 ? void 0 : event.detail);
};
this.handleAppsClick = (event) => {
this.toggleApps();
this.appsClick.emit(event === null || event === void 0 ? void 0 : event.detail);
};
this.handleHelpClick = (event) => {
if (this.condensed) {
this.toggleCondensedMenu();
}
this.helpClick.emit(event === null || event === void 0 ? void 0 : event.detail);
};
this.handleMyTrimbleClick = (event) => {
this.myTrimbleClick.emit(event.detail);
};
this.handleNotificationsClick = (event) => {
this.toggleNotifications();
this.notificationsClick.emit(event === null || event === void 0 ? void 0 : event.detail);
};
this.handleSearchChange = (event) => {
// Update the search value immediately for UI responsiveness
this.searchValue = event.target.value;
// Clear any existing timer
if (this.searchDebounceTimer !== null) {
window.clearTimeout(this.searchDebounceTimer);
}
// Set a new timer
this.searchDebounceTimer = window.setTimeout(() => {
this.searchChange.emit({ value: this.searchValue });
this.searchDebounceTimer = null;
}, this.searchDebounceMs);
};
this.handleSearchClick = (event) => {
this.toggleSearch();
this.searchClick.emit(event === null || event === void 0 ? void 0 : event.detail);
};
this.handleSignOutClick = (event) => {
this.signOutClick.emit(event.detail);
};
this.handleTrimbleLogoClick = (event) => {
this.trimbleLogoClick.emit(event.detail);
};
this.toggleApps = () => {
if (this.condensed) {
this.toggleCondensedMenu();
}
else {
this.appsMenuOpen = !this.appsMenuOpen;
this.appsMenuOpenChange.emit(this.appsMenuOpen);
}
};
this.toggleCondensedMenu = () => {
this.condensedMenuOpen = !this.condensedMenuOpen;
this.condensedMenuOpenChange.emit(this.condensedMenuOpen);
};
this.toggleMainMenu = () => {
this.mainMenuOpen = !this.mainMenuOpen;
this.mainMenuOpenChange.emit(this.mainMenuOpen);
};
this.toggleNotifications = () => {
if (this.condensed) {
this.toggleCondensedMenu();
}
else {
this.notificationsMenuOpen = !this.notificationsMenuOpen;
this.notificationsMenuOpenChange.emit(this.notificationsMenuOpen);
}
};
this.toggleSearch = () => {
if (this.condensed) {
this.toggleCondensedMenu();
}
else {
this.searchInputOpen = !this.searchInputOpen;
this.searchInputOpenChange.emit(this.searchInputOpen);
}
};
this.toggleUser = () => {
this.userMenuOpen = !this.userMenuOpen;
this.userMenuOpenChange.emit(this.userMenuOpen);
};
}
componentWillLoad() {
// Inject full CSS bundle (including per-component SCSS) for slotted children
handleShadowDOMStyles(this.el, true);
this.inheritedAttributes = inheritAriaAttributes(this.el);
this.isLight = isLightMode();
// Watch for theme attribute changes
this.themeObserver = new MutationObserver(() => {
this.isLight = isLightMode();
});
// Observe the html element for data-theme attribute changes
this.themeObserver.observe(document.documentElement, {
attributes: true,
attributeFilter: ['data-theme'],
});
}
disconnectedCallback() {
if (this.themeObserver) {
this.themeObserver.disconnect();
}
}
handleClickOutside(event) {
const path = event.composedPath ? event.composedPath() : [event.target];
if (this.appsMenuOpen) {
const appsButton = this.el.querySelector('modus-wc-button:has(svg[class*="apps"])');
if (this.appsRef &&
!path.includes(this.appsRef) &&
!path.includes(appsButton)) {
this.appsMenuOpen = false;
this.appsMenuOpenChange.emit(false);
}
}
if (this.condensedMenuOpen) {
const condenseMenuButton = this.el.querySelector('modus-wc-button:has(svg[class*="more-vertical"])');
if (this.condensedMenuRef &&
!path.includes(this.condensedMenuRef) &&
!path.includes(condenseMenuButton)) {
this.condensedMenuOpen = false;
this.condensedMenuOpenChange.emit(false);
}
}
if (this.mainMenuOpen) {
const menuButton = this.el.querySelector('modus-wc-button:has(svg[class*="menu"])');
if (this.menuRef &&
!path.includes(this.menuRef) &&
!path.includes(menuButton)) {
this.mainMenuOpen = false;
}
}
if (this.notificationsMenuOpen) {
const notificationsButton = this.el.querySelector('modus-wc-button:has(svg[class*="notifications"])');
if (this.notificationsRef &&
!path.includes(this.notificationsRef) &&
!path.includes(notificationsButton)) {
this.notificationsMenuOpen = false;
this.notificationsMenuOpenChange.emit(false);
}
}
if (this.userMenuOpen) {
const userButton = this.el.querySelector('modus-wc-button:has([class*="user-button"])');
if (this.userRef &&
!path.includes(this.userRef) &&
!path.includes(userButton)) {
this.userMenuOpen = false;
this.userMenuOpenChange.emit(false);
}
}
}
getClasses() {
const classList = [''];
// The order CSS classes are added matters to CSS specificity
if (this.customClass)
classList.push(this.customClass);
return classList.join(' ');
}
render() {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
const condensedHasItems = ((_a = this.visibility) === null || _a === void 0 ? void 0 : _a.apps) ||
((_b = this.visibility) === null || _b === void 0 ? void 0 : _b.help) ||
((_c = this.visibility) === null || _c === void 0 ? void 0 : _c.notifications) ||
((_d = this.visibility) === null || _d === void 0 ? void 0 : _d.search);
const accessibleName = (this.logoName || 'trimble')
.replace(/_/g, ' ')
.replace(/\b\w/g, (char) => char.toUpperCase());
return (h(Host, Object.assign({ key: 'e81f467845ddc84ac97f9908e528f78b074bfcc7', class: this.getClasses() }, this.inheritedAttributes), h("modus-wc-toolbar", { key: 'b836e825f1a421a904cd255c21a866b63f06a534' }, h("div", { key: 'f1312556025e22b9641f8ff357780398c0733f90', slot: "start" }, ((_e = this.visibility) === null || _e === void 0 ? void 0 : _e.mainMenu) && (h(Fragment, { key: 'ec1570f643480a6ffb0d9dbd1c56387cfaf202b9' }, h("modus-wc-button", { key: 'c985fe5086389a1dc2376457afc25e6c7f0bfa5b', "aria-label": "Main menu", onButtonClick: this.toggleMainMenu, shape: "square", size: "sm", variant: "borderless" }, h(MenuSolidIcon, { key: '347c61f45af84ba3ab5c7a04cd2d73fe9fe26fac' })), h("div", { key: '7afb4640067c471a4fa02fdb575cf4ea4a84953c', class: `main-menu ${this.mainMenuOpen ? 'visible' : 'hidden'}`, ref: (el) => (this.menuRef = el) }, h("slot", { key: '46d003bb728709509fc91a6b335725aa7118c147', name: "main-menu" })))), ((_f = this.visibility) === null || _f === void 0 ? void 0 : _f.logo) !== false && (h("modus-wc-button", { key: '154668b70de6374fa1ed2b49c403a73201cb1ccb', "aria-label": `${accessibleName} logo`, customClass: "logo", onButtonClick: this.handleTrimbleLogoClick, size: "sm", variant: "borderless" }, h("modus-wc-logo", { key: '04d0698487bc0cbab4a09f374e2f876b14e814d5', name: this.logoName || 'trimble', emblem: this.condensed }))), h("slot", { key: 'eeb4d543099ad290682a7e296a17d82a0a003206', name: "start" })), h("div", { key: '6f67ce5b7b8b5215a129f1f42ddd9e6809c4ebdc', slot: "center" }, h("slot", { key: 'a1de68e359bdcb9143e0109963d0b90751731df5', name: "center" })), h("div", { key: '635248595c88f5e6fe1b5f031637659dcd238ffd', slot: "end" }, h("slot", { key: 'c8e1bc7c4344afd043c2282ca32e78bce568c4fc', name: "end" }), ((_g = this.visibility) === null || _g === void 0 ? void 0 : _g.ai) && (h(Fragment, { key: '5e33ba5bd1ad26e2dc9537a86067ad03a6cc822e' }, h("modus-wc-button", { key: '07583d6e2a30751d2ae89d05e66d3a8ff6902e19', "aria-label": "AI assistant", customClass: "ai", onButtonClick: this.handleAiClick, shape: "square", size: "sm", variant: "borderless" }, this.isLight ? h(AiLightIcon, null) : h(AiDarkIcon, null)))), this.condensed && condensedHasItems && (h(Fragment, { key: '437ef0161ba970b54c356dcae82a78a5e2ef28c2' }, h("modus-wc-button", { key: 'e4b09cb33712238b6a8c2b723218759885c8b148', "aria-label": "More options", onButtonClick: this.toggleCondensedMenu, shape: "square", size: "sm", variant: "borderless" }, h(MoreVerticalSolidIcon, { key: '008ce9ba5c986ab3d6e75a89d63ad6321e8879ab' })), this.condensedMenuOpen && (h("modus-wc-menu", { key: '2d0c66cd41a4da0d6ac765426a61c7575d3c389c', bordered: true, customClass: "condense-menu", ref: (el) => (this.condensedMenuRef = el) }, ((_h = this.visibility) === null || _h === void 0 ? void 0 : _h.search) && (h("modus-wc-menu-item", { key: '74f68a7497f8b6e40d7bd40ab92997a742720b07', label: ((_j = this.textOverrides) === null || _j === void 0 ? void 0 : _j.search) || 'Search', onItemSelect: () => this.handleSearchClick(), value: "search" })), ((_k = this.visibility) === null || _k === void 0 ? void 0 : _k.notifications) && (h("modus-wc-menu-item", { key: '6a2e56c6f19f3ea82203513629677a182282750f', label: ((_l = this.textOverrides) === null || _l === void 0 ? void 0 : _l.notifications) || 'Notifications', onItemSelect: () => this.handleNotificationsClick(), value: "notifications" })), ((_m = this.visibility) === null || _m === void 0 ? void 0 : _m.help) && (h("modus-wc-menu-item", { key: 'e9051aac6fce54d2c90d8ddc0ee0417acd8974a1', label: ((_o = this.textOverrides) === null || _o === void 0 ? void 0 : _o.help) || 'Help', onItemSelect: () => this.handleHelpClick(), value: "help" })), ((_p = this.visibility) === null || _p === void 0 ? void 0 : _p.apps) && (h("modus-wc-menu-item", { key: '773d5f69712f04c0524e2ee1f0b896b5cacd21b3', label: ((_q = this.textOverrides) === null || _q === void 0 ? void 0 : _q.apps) || 'Apps', onItemSelect: () => this.handleAppsClick(), value: "apps" })))))), ((_r = this.visibility) === null || _r === void 0 ? void 0 : _r.search) && !this.condensed && (h(Fragment, { key: '20020d8e2e25656783fd7f49ab9698b89b7de259' }, ((_s = this.visibility) === null || _s === void 0 ? void 0 : _s.searchInput) && this.searchInputOpen && (h("modus-wc-text-input", { key: '241f34ea342e56aed23a756e9527d28a3da8bb9a', includeClear: true, includeSearch: true, onInputChange: this.handleSearchChange, placeholder: ((_t = this.textOverrides) === null || _t === void 0 ? void 0 : _t.search) || 'Search', size: "sm", value: this.searchValue })), h("modus-wc-button", { key: '5188fae659139e93c8243077ebcacf2577bd9650', "aria-label": "Search", onButtonClick: this.handleSearchClick, shape: "square", size: "sm", variant: "borderless" }, h(SearchSolidIcon, { key: '43fb1aa77be0a6ff7afef683c91284e447f9f10b' })))), ((_u = this.visibility) === null || _u === void 0 ? void 0 : _u.notifications) && !this.condensed && (h(Fragment, { key: 'e6ac6a0886dc45caaf84f4ab53b1a2f2a1c44fae' }, h("modus-wc-button", { key: '01cf7828a1e3f27fb02d748c4e2e2e40dd7d4c4d', "aria-label": "Notifications", onButtonClick: this.handleNotificationsClick, shape: "square", size: "sm", variant: "borderless" }, h(NotificationsSolidIcon, { key: 'dcbedae55b5fb8fe8692f274042dffc23e72955b' })), h("div", { key: '7a159088c769d7da43c01a651114f8ed9215a9c5', class: `notifications ${this.notificationsMenuOpen ? 'visible' : 'hidden'}`, ref: (el) => (this.notificationsRef = el) }, h("slot", { key: '962fb3e181cde3225dcc6793eaa36866056a13e7', name: "notifications" })))), ((_v = this.visibility) === null || _v === void 0 ? void 0 : _v.help) && !this.condensed && (h("modus-wc-button", { key: '94753c3f8d33799e220929416d56882dc1436804', "aria-label": "Help", onButtonClick: this.handleHelpClick, shape: "square", size: "sm", variant: "borderless" }, h(HelpSolidIcon, { key: 'de1d069ba4a1b3054834ac5c92a6dbe63bc1e863' }))), ((_w = this.visibility) === null || _w === void 0 ? void 0 : _w.apps) && !this.condensed && (h(Fragment, { key: '975e23d359d121a788832634117946349039eb95' }, h("modus-wc-button", { key: '1945d9f7f03e533c2fa665b4e7016fac68124433', "aria-label": "Apps", onButtonClick: this.handleAppsClick, shape: "square", size: "sm", variant: "borderless" }, h(AppsSolidIcon, { key: '1487f7476f97e81f44bc4f370cbacca0dcc8aaff' })), h("div", { key: 'b0256c9f9c4019311c27be45c35534db09e10908', class: `apps ${this.appsMenuOpen ? 'visible' : 'hidden'}`, ref: (el) => (this.appsRef = el) }, h("slot", { key: 'cc91173aeb1525d575a0d3379a8382255b7d9f2d', name: "apps" })))), ((_x = this.visibility) === null || _x === void 0 ? void 0 : _x.user) && (h(Fragment, { key: 'aa83fa21c303d6545b1d700cc806f11083695efe' }, h("modus-wc-button", { key: '33bf39ee23b2b2a6b3cd8754e6876339259a5e57', "aria-label": "User profile", customClass: "user-button", onButtonClick: this.toggleUser, shape: "circle", size: "sm", variant: "borderless" }, h("modus-wc-avatar", { key: '59349dc27c1e63722a7189cb1342ad886aaed64e', alt: ((_y = this.userCard) === null || _y === void 0 ? void 0 : _y.avatarAlt) || '', imgSrc: (_z = this.userCard) === null || _z === void 0 ? void 0 : _z.avatarSrc, initials: (_0 = this.userCard) === null || _0 === void 0 ? void 0 : _0.name, size: "sm" })), h("div", { key: 'aab22a1c5fcf48f16adfb0824203b330152dd82a', class: `user ${this.userMenuOpen ? 'visible' : 'hidden'}`, ref: (el) => (this.userRef = el) }, h("modus-wc-card", { key: '11512df6848be43401511f79755d7b1ae7119c5f' }, h("div", { key: '6d6a71ac40873635514d1baa7ef277b8df96878a', slot: "header" }, h("modus-wc-avatar", { key: '71a3557df932a621c224750f87d833c82827c68a', alt: ((_1 = this.userCard) === null || _1 === void 0 ? void 0 : _1.avatarAlt) || '', imgSrc: (_2 = this.userCard) === null || _2 === void 0 ? void 0 : _2.avatarSrc, initials: (_3 = this.userCard) === null || _3 === void 0 ? void 0 : _3.name })), h("div", { key: '205438bf73e4b5ff9ce3680bb72d46c8f730a6f7', slot: "title" }, (_4 = this.userCard) === null || _4 === void 0 ? void 0 : _4.name), h("div", { key: 'c27c716bf06c53e8c4ed9e6868d80d7e16c3b710' }, (_5 = this.userCard) === null || _5 === void 0 ? void 0 : _5.email), h("div", { key: '7e8e9badd060aae7a7df1e357f0fc14a700f6722', slot: "actions" }, h("modus-wc-button", { key: 'b61dab000c40e0e3d61173fc83f3ab598c43a4db', customClass: "my-trimble", onButtonClick: this.handleMyTrimbleClick }, ((_6 = this.userCard) === null || _6 === void 0 ? void 0 : _6.myTrimbleButton) || 'Access MyTrimble')), h("div", { key: '14c9dc321797f334d9f6ca74ea6ae3338269f113', slot: "footer" }, h("modus-wc-button", { key: '557972195a711f34bfb985e5ac2d7c9e3b51c08e', customClass: "sign-out", onButtonClick: this.handleSignOutClick, variant: "borderless" }, ((_7 = this.userCard) === null || _7 === void 0 ? void 0 : _7.signOutButton) || 'Sign out'))))))))));
}
static get is() { return "modus-wc-navbar"; }
static get originalStyleUrls() {
return {
"$": ["modus-wc-navbar.scss"]
};
}
static get styleUrls() {
return {
"$": ["modus-wc-navbar.css"]
};
}
static get properties() {
return {
"logoName": {
"type": "string",
"attribute": "logo-name",
"mutable": false,
"complexType": {
"original": "LogoName",
"resolved": "LogoName | undefined",
"references": {
"LogoName": {
"location": "import",
"path": "../types",
"id": "src/components/types.ts::LogoName"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The name of the logo to display. Supports any valid 'logo-name' from the 'modus-wc-logo' component. Defaults to 'trimble'."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "'trimble'"
},
"appsMenuOpen": {
"type": "boolean",
"attribute": "apps-menu-open",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The open state of the apps menu."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
},
"condensed": {
"type": "boolean",
"attribute": "condensed",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Applies condensed layout and styling."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
},
"condensedMenuOpen": {
"type": "boolean",
"attribute": "condensed-menu-open",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The open state of the condensed menu."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
},
"customClass": {
"type": "string",
"attribute": "custom-class",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Custom CSS class to apply to the host element."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "''"
},
"mainMenuOpen": {
"type": "boolean",
"attribute": "main-menu-open",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The open state of the main menu."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
},
"notificationsMenuOpen": {
"type": "boolean",
"attribute": "notifications-menu-open",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The open state of the notifications menu."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
},
"searchDebounceMs": {
"type": "number",
"attribute": "search-debounce-ms",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Debounce time in milliseconds for search input changes. Default is 300ms."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "300"
},
"searchInputOpen": {
"type": "boolean",
"attribute": "search-input-open",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The open state of the search input."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
},
"textOverrides": {
"type": "unknown",
"attribute": "text-overrides",
"mutable": false,
"complexType": {
"original": "INavbarTextOverrides",
"resolved": "INavbarTextOverrides | undefined",
"references": {
"INavbarTextOverrides": {
"location": "local",
"path": "/home/runner/work/modus-wc-2.0/modus-wc-2.0/src/components/modus-wc-navbar/modus-wc-navbar.tsx",
"id": "src/components/modus-wc-navbar/modus-wc-navbar.tsx::INavbarTextOverrides"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Text replacements for the navbar."
},
"getter": false,
"setter": false
},
"userCard": {
"type": "unknown",
"attribute": "user-card",
"mutable": false,
"complexType": {
"original": "INavbarUserCard",
"resolved": "INavbarUserCard",
"references": {
"INavbarUserCard": {
"location": "local",
"path": "/home/runner/work/modus-wc-2.0/modus-wc-2.0/src/components/modus-wc-navbar/modus-wc-navbar.tsx",
"id": "src/components/modus-wc-navbar/modus-wc-navbar.tsx::INavbarUserCard"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "User information used to render the user card."
},
"getter": false,
"setter": false
},
"userMenuOpen": {
"type": "boolean",
"attribute": "user-menu-open",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The open state of the user menu."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
},
"visibility": {
"type": "unknown",
"attribute": "visibility",
"mutable": false,
"complexType": {
"original": "INavbarVisibility",
"resolved": "INavbarVisibility | undefined",
"references": {
"INavbarVisibility": {
"location": "local",
"path": "/home/runner/work/modus-wc-2.0/modus-wc-2.0/src/components/modus-wc-navbar/modus-wc-navbar.tsx",
"id": "src/components/modus-wc-navbar/modus-wc-navbar.tsx::INavbarVisibility"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The visibility of individual navbar buttons. Default is user profile visible, others hidden."
},
"getter": false,
"setter": false,
"defaultValue": "{\n ai: false,\n apps: false,\n help: false,\n logo: true,\n mainMenu: false,\n notifications: false,\n search: false,\n searchInput: false,\n user: true,\n }"
}
};
}
static get states() {
return {
"isLight": {},
"searchValue": {}
};
}
static get events() {
return [{
"method": "aiClick",
"name": "aiClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Event emitted when the AI button is clicked or activated via keyboard."
},
"complexType": {
"original": "MouseEvent | KeyboardEvent",
"resolved": "KeyboardEvent | MouseEvent",
"references": {
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
},
"KeyboardEvent": {
"location": "global",
"id": "global::KeyboardEvent"
}
}
}
}, {
"method": "appsClick",
"name": "appsClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Event emitted when the apps button is clicked or activated via keyboard."
},
"complexType": {
"original": "MouseEvent | KeyboardEvent",
"resolved": "KeyboardEvent | MouseEvent",
"references": {
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
},
"KeyboardEvent": {
"location": "global",
"id": "global::KeyboardEvent"
}
}
}
}, {
"method": "appsMenuOpenChange",
"name": "appsMenuOpenChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Event emitted when the apps menu open state changes."
},
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
}
}, {
"method": "condensedMenuOpenChange",
"name": "condensedMenuOpenChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Event emitted when the condensed menu open state changes."
},
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
}
}, {
"method": "helpClick",
"name": "helpClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Event emitted when the help button is clicked or activated via keyboard."
},
"complexType": {
"original": "MouseEvent | KeyboardEvent",
"resolved": "KeyboardEvent | MouseEvent",
"references": {
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
},
"KeyboardEvent": {
"location": "global",
"id": "global::KeyboardEvent"
}
}
}
}, {
"method": "mainMenuOpenChange",
"name": "mainMenuOpenChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Event emitted when the main menu open state changes."
},
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
}
}, {
"method": "myTrimbleClick",
"name": "myTrimbleClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Event emitted when the user profile Access MyTrimble button is clicked or activated via keyboard."
},
"complexType": {
"original": "MouseEvent | KeyboardEvent",
"resolved": "KeyboardEvent | MouseEvent",
"references": {
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
},
"KeyboardEvent": {
"location": "global",
"id": "global::KeyboardEvent"
}
}
}
}, {
"method": "notificationsClick",
"name": "notificationsClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Event emitted when the notifications button is clicked or activated via keyboard."
},
"complexType": {
"original": "MouseEvent | KeyboardEvent",
"resolved": "KeyboardEvent | MouseEvent",
"references": {
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
},
"KeyboardEvent": {
"location": "global",
"id": "global::KeyboardEvent"
}
}
}
}, {
"method": "notificationsMenuOpenChange",
"name": "notificationsMenuOpenChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Event emitted when the notifications menu open state changes."
},
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
}
}, {
"method": "searchChange",
"name": "searchChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Event emitted when the search input value is changed."
},
"complexType": {
"original": "{ value: string }",
"resolved": "{ value: string; }",
"references": {}
}
}, {
"method": "searchClick",
"name": "searchClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Event emitted when the search button is clicked or activated via keyboard."
},
"complexType": {
"original": "MouseEvent | KeyboardEvent",
"resolved": "KeyboardEvent | MouseEvent",
"references": {
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
},
"KeyboardEvent": {
"location": "global",
"id": "global::KeyboardEvent"
}
}
}
}, {
"method": "searchInputOpenChange",
"name": "searchInputOpenChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Event emitted when the search input open state changes."
},
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
}
}, {
"method": "signOutClick",
"name": "signOutClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Event emitted when the user profile sign out button is clicked or activated via keyboard."
},
"complexType": {
"original": "MouseEvent | KeyboardEvent",
"resolved": "KeyboardEvent | MouseEvent",
"references": {
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
},
"KeyboardEvent": {
"location": "global",
"id": "global::KeyboardEvent"
}
}
}
}, {
"method": "trimbleLogoClick",
"name": "trimbleLogoClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Event emitted when the logo button is clicked or activated via keyboard,regardless of the `logoName` prop value."
},
"complexType": {
"original": "MouseEvent | KeyboardEvent",
"resolved": "KeyboardEvent | MouseEvent",
"references": {
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
},
"KeyboardEvent": {
"location": "global",
"id": "global::KeyboardEvent"
}
}
}
}, {
"method": "userMenuOpenChange",
"name": "userMenuOpenChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Event emitted when the user menu open state changes."
},
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
}
}];
}
static get elementRef() { return "el"; }
static get listeners() {
return [{
"name": "click",
"method": "handleClickOutside",
"target": "document",
"capture": false,
"passive": false
}];
}
}