@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
821 lines (820 loc) • 40.7 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 { TrimbleLogoFullIcon } from "../../icons/trimble-logo-full.icon";
import { TrimbleLogoGlobeIcon } from "../../icons/trimble-logo-globe.icon";
import { inheritAriaAttributes, isLightMode } from "../utils";
/**
* A customizable navbar component used for top level navigation of all Trimble applications.
*
* The component supports a 'main-menu', 'notifications', and 'apps' `<slot>` for injecting custom HTML menus.
* It also supports a 'start', 'center', and 'end' `<slot>` for injecting additional custom HTML
*/
export class ModusWcNavbar {
constructor() {
this.inheritedAttributes = {};
this.searchDebounceTimer = null;
/** 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,
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() {
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 target = event.target;
if (this.appsMenuOpen) {
const appsButton = this.el.querySelector('modus-wc-button:has(svg[class*="apps"])');
if (this.appsRef &&
!this.appsRef.contains(target) &&
appsButton !== target &&
!(appsButton === null || appsButton === void 0 ? void 0 : appsButton.contains(target))) {
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 &&
!this.condensedMenuRef.contains(target) &&
condenseMenuButton !== target &&
!(condenseMenuButton === null || condenseMenuButton === void 0 ? void 0 : condenseMenuButton.contains(target))) {
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 &&
!this.menuRef.contains(target) &&
menuButton !== target &&
!(menuButton === null || menuButton === void 0 ? void 0 : menuButton.contains(target))) {
this.mainMenuOpen = false;
this.mainMenuOpenChange.emit(false);
}
}
if (this.notificationsMenuOpen) {
const notificationsButton = this.el.querySelector('modus-wc-button:has(svg[class*="notifications"])');
if (this.notificationsRef &&
!this.notificationsRef.contains(target) &&
notificationsButton !== target &&
!(notificationsButton === null || notificationsButton === void 0 ? void 0 : notificationsButton.contains(target))) {
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 &&
!this.userRef.contains(target) &&
userButton !== target &&
!(userButton === null || userButton === void 0 ? void 0 : userButton.contains(target))) {
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(' ');
}
getUserInitials() {
var _a;
if (!((_a = this.userCard) === null || _a === void 0 ? void 0 : _a.name))
return '';
return this.userCard.name
.split(' ')
.map((part) => part.charAt(0))
.join('')
.toUpperCase();
}
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;
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);
return (h(Host, Object.assign({ key: '702989024999fff176955c5f71c144d0976023fe', class: this.getClasses() }, this.inheritedAttributes), h("modus-wc-toolbar", { key: '05fbb60a3d00b9c9919895abb4cb7239efaa3ff3' }, h("div", { key: '438bcf1279f4c1e0f257b88cd1736bce1f23b0f0', slot: "start" }, ((_e = this.visibility) === null || _e === void 0 ? void 0 : _e.mainMenu) && (h(Fragment, { key: '3332283d4d63b7fdf1a90cd07c02a99c3dc7cabc' }, h("modus-wc-button", { key: '6a309c71d76289dff32ae32eeaee09fb65d7ec98', onButtonClick: this.toggleMainMenu, shape: "square", size: "sm", variant: "borderless" }, h(MenuSolidIcon, { key: 'd937b5603d5b9d40fbf4bf1dc6522e6b6a3fa6eb' })), h("div", { key: '81310a653dbe3337773698c9b003502fae926bc2', class: `main-menu ${this.mainMenuOpen ? 'visible' : 'hidden'}`, ref: (el) => (this.menuRef = el) }, h("slot", { key: '28f4dd63b2f0dcdea2760efa804109d02e7080d2', name: "main-menu" })))), h("modus-wc-button", { key: 'c82b4fc80115da189883b17e62e4b01a5464a070', customClass: "trimble-logo", onButtonClick: this.handleTrimbleLogoClick, size: "sm", variant: "borderless" }, this.condensed ? (h(TrimbleLogoGlobeIcon, null)) : (h(TrimbleLogoFullIcon, null))), h("slot", { key: 'a7edcdc0f198eb1c9ab0de4deed4f189d20c45d4', name: "start" })), h("div", { key: '8f9e868751bb5fa1d93a9fb56b91fd1b9ccfb5f0', slot: "center" }, h("slot", { key: 'b964d17d61384c206e419eb0a60940a450728a04', name: "center" })), h("div", { key: '739626476011f51c5b01de3c35f4aa67f1b71b83', slot: "end" }, h("slot", { key: 'af1bcfee3b88305cba240150c24e06f7d330ebd5', name: "end" }), ((_f = this.visibility) === null || _f === void 0 ? void 0 : _f.ai) && (h(Fragment, { key: 'a1344f498623c070ffd87a40850a482bc335182e' }, h("modus-wc-button", { key: '7c8259bed24aa482d146c3a49051dda39d295476', 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: '8283d6010a42296dd4b61d0b269311ef9ea3e4d2' }, h("modus-wc-button", { key: '08cc3fb258c261b2abc3a788d1eafe4f528655d4', onButtonClick: this.toggleCondensedMenu, shape: "square", size: "sm", variant: "borderless" }, h(MoreVerticalSolidIcon, { key: '103f70c6d00878af895822613898b57f64fa55d3' })), this.condensedMenuOpen && (h("modus-wc-menu", { key: '27f2dd1ad0f20e3e929ddd9e6446546d228f8670', bordered: true, customClass: "condense-menu", ref: (el) => (this.condensedMenuRef = el) }, ((_g = this.visibility) === null || _g === void 0 ? void 0 : _g.search) && (h("modus-wc-menu-item", { key: 'aa5b1bfb486a463da5aa6e6647651b19e3111380', label: ((_h = this.textOverrides) === null || _h === void 0 ? void 0 : _h.search) || 'Search', onItemSelect: () => this.handleSearchClick(), value: "search" })), ((_j = this.visibility) === null || _j === void 0 ? void 0 : _j.notifications) && (h("modus-wc-menu-item", { key: '7b8e0766343585422a7edeedb0ce1442b5137160', label: ((_k = this.textOverrides) === null || _k === void 0 ? void 0 : _k.notifications) || 'Notifications', onItemSelect: () => this.handleNotificationsClick(), value: "notifications" })), ((_l = this.visibility) === null || _l === void 0 ? void 0 : _l.help) && (h("modus-wc-menu-item", { key: 'd55c836595ed5ca499e6efdb5a8e848b61938596', label: ((_m = this.textOverrides) === null || _m === void 0 ? void 0 : _m.help) || 'Help', onItemSelect: () => this.handleHelpClick(), value: "help" })), ((_o = this.visibility) === null || _o === void 0 ? void 0 : _o.apps) && (h("modus-wc-menu-item", { key: 'd3237d3c1c2a5c05293288d97ab26cdd0d3fde09', label: ((_p = this.textOverrides) === null || _p === void 0 ? void 0 : _p.apps) || 'Apps', onItemSelect: () => this.handleAppsClick(), value: "apps" })))))), ((_q = this.visibility) === null || _q === void 0 ? void 0 : _q.search) && !this.condensed && (h(Fragment, { key: '9678aa26e0296701d482e31e4fb4d3f2361d1b88' }, ((_r = this.visibility) === null || _r === void 0 ? void 0 : _r.searchInput) && this.searchInputOpen && (h("modus-wc-text-input", { key: '27292c4f2f90390a555510f2e355a553e0d01793', includeClear: true, includeSearch: true, onInputChange: this.handleSearchChange, placeholder: ((_s = this.textOverrides) === null || _s === void 0 ? void 0 : _s.search) || 'Search', value: this.searchValue })), h("modus-wc-button", { key: 'ef01524e4d2123e3b9e27e280b22cd894bc48179', onButtonClick: this.handleSearchClick, shape: "square", size: "sm", variant: "borderless" }, h(SearchSolidIcon, { key: '7224828e50c9d788155d93c443f1eb6ee84a2b3e' })))), ((_t = this.visibility) === null || _t === void 0 ? void 0 : _t.notifications) && !this.condensed && (h(Fragment, { key: '5d14479a6e05f4ab2ce5b935e3adb215be4f6f05' }, h("modus-wc-button", { key: '4664606b33be0ba206bca471a5ff939150bc420a', onButtonClick: this.handleNotificationsClick, shape: "square", size: "sm", variant: "borderless" }, h(NotificationsSolidIcon, { key: 'f4af2c2275d2e0fd0a5724b882d35286d2b64abb' })), h("div", { key: 'a92b44d7df3cf23cfa94cce3679283c2a46bd62e', class: `notifications ${this.notificationsMenuOpen ? 'visible' : 'hidden'}`, ref: (el) => (this.notificationsRef = el) }, h("slot", { key: '47d9e19ba9c947c682dc0f33c3280b4faf0f7f20', name: "notifications" })))), ((_u = this.visibility) === null || _u === void 0 ? void 0 : _u.help) && !this.condensed && (h("modus-wc-button", { key: '77a489da82b5952ea644db41ebd704c56c044ba1', onButtonClick: this.handleHelpClick, shape: "square", size: "sm", variant: "borderless" }, h(HelpSolidIcon, { key: '87b6f74f2fdfd0a7fd15d0d8b48f772b3da88bb0' }))), ((_v = this.visibility) === null || _v === void 0 ? void 0 : _v.apps) && !this.condensed && (h(Fragment, { key: 'b8a79c2a43c15051a1e19944500599bcd61a9162' }, h("modus-wc-button", { key: 'fa47059d72c5dd4d13525812ee52f559d15a5b31', onButtonClick: this.handleAppsClick, shape: "square", size: "sm", variant: "borderless" }, h(AppsSolidIcon, { key: '02afb4406446eb6f75f47812cde7e7429be0c73b' })), h("div", { key: 'd3b7ac56cd3aeb7ff437b85b8c11e4f6c4b89753', class: `apps ${this.appsMenuOpen ? 'visible' : 'hidden'}`, ref: (el) => (this.appsRef = el) }, h("slot", { key: '4413eed9a001b814d95d21bd20a2daac67f8c36f', name: "apps" })))), ((_w = this.visibility) === null || _w === void 0 ? void 0 : _w.user) && (h(Fragment, { key: '5ae58a803822f2c489e57310b4d4b11d56a7ab1a' }, h("modus-wc-button", { key: '5606958e4cfdd6b288a0f91bc6bddd854f1124bd', customClass: "user-button", onButtonClick: this.toggleUser, shape: "circle", size: "sm", variant: "borderless" }, ((_x = this.userCard) === null || _x === void 0 ? void 0 : _x.avatarSrc) ? (h("modus-wc-avatar", { alt: this.userCard.avatarAlt || 'User avatar', imgSrc: this.userCard.avatarSrc, size: "xs" })) : (this.getUserInitials())), h("div", { key: '5d8a5db8cce97686d789e013ef9d65a15a88e41b', class: `user ${this.userMenuOpen ? 'visible' : 'hidden'}`, ref: (el) => (this.userRef = el) }, h("modus-wc-card", { key: '165c1cbb68faeaf5dd1387e85c77bade70e2e58a' }, h("div", { key: '6d6c2d6ddd7ccd578b87509fb80044da2a4025bf', slot: "header" }, ((_y = this.userCard) === null || _y === void 0 ? void 0 : _y.avatarSrc) ? (h("modus-wc-avatar", { alt: this.userCard.avatarAlt || 'User avatar', imgSrc: this.userCard.avatarSrc })) : (h("div", { class: "initials" }, this.getUserInitials()))), h("div", { key: 'f773cb53824d48c9a8cbb30efcbbd15ff1804516', slot: "title" }, (_z = this.userCard) === null || _z === void 0 ? void 0 : _z.name), h("div", { key: 'f8e6de261b8ef53a8107177b90f97b8ded9fb20c' }, (_0 = this.userCard) === null || _0 === void 0 ? void 0 : _0.email), h("div", { key: '61fcf582dc3feea1222a9353760b697859ddefed', slot: "actions" }, h("modus-wc-button", { key: '6ad1d794e46eb078059f35a4086640d12e3443d6', customClass: "my-trimble", onButtonClick: this.handleMyTrimbleClick }, ((_1 = this.userCard) === null || _1 === void 0 ? void 0 : _1.myTrimbleButton) || 'Access MyTrimble')), h("div", { key: 'b16d10ecd69363c59f1595c6373e98ef204aea2c', slot: "footer" }, h("modus-wc-button", { key: 'fe6ba98ced7aaad50c6eff705f5241f20e401fcb', customClass: "sign-out", onButtonClick: this.handleSignOutClick, variant: "borderless" }, ((_2 = this.userCard) === null || _2 === void 0 ? void 0 : _2.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 {
"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 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 Trimble logo 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": "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
}];
}
}