@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
395 lines (383 loc) • 34.7 kB
JavaScript
import { h, p as proxyCustomElement, H, d as createEvent, F as Fragment, c as Host } from './p-Blhe_h6i.js';
import { S as SearchSolidIcon, d as defineCustomElement$4 } from './p-CcssySIm.js';
import { h as handleShadowDOMStyles } from './p-tWS3Egrk.js';
import { i as inheritAriaAttributes, b as isLightMode } from './p-DUWn6PrQ.js';
import { d as defineCustomElement$e } from './p-4FHGIW2M.js';
import { d as defineCustomElement$d } from './p-BYIY4f_X.js';
import { d as defineCustomElement$c } from './p-CvGVe-_t.js';
import { d as defineCustomElement$b } from './p-C1uly3sM.js';
import { d as defineCustomElement$a } from './p-B8VJbmjw.js';
import { d as defineCustomElement$9 } from './p-DgDD6Be5.js';
import { d as defineCustomElement$8 } from './p-BqauKZkb.js';
import { d as defineCustomElement$7 } from './p-C1oBn0OE.js';
import { d as defineCustomElement$6 } from './p-CMJRftIA.js';
import { d as defineCustomElement$5 } from './p-jE7DNOua.js';
import { d as defineCustomElement$3 } from './p-ql-In9aK.js';
import { d as defineCustomElement$2 } from './p-BFz7tQrF.js';
const AiDarkIcon = ({ className }) => {
return (h("svg", { fill: "none", viewBox: "0 0 887 982", class: className || '', xmlns: "http://www.w3.org/2000/svg" },
h("defs", null,
h("radialGradient", { id: "gradient", cx: "18%", cy: "18%", r: "70%" },
h("stop", { offset: "0%", "stop-color": "#FF00FF" }),
h("stop", { offset: "50%", "stop-color": "#9933FF" }),
h("stop", { offset: "100%", "stop-color": "#0066CC" }))),
h("path", { d: "m36.76 749.83v231.56l201.3-116.22c-77.25-16.64-147.52-56.92-201.3-115.34zm199.83-634.65-199.83-115.18v230.14c56.05-60.9 128.22-99.28 199.83-114.97m403.73 374.35c0-176.82-143.34-320.16-320.16-320.16s-320.17 143.33-320.17 320.16 143.34 320.16 320.16 320.16 320.16-143.34 320.16-320.16m45.08-114.58c23.68 75.15 23.76 156.75-.59 232.74l201.86-116.54c-9.54-5.51-189.55-109.44-201.26-116.2", fill: "#fff" }),
h("path", { d: "m320.13 489.53c0 142.28 115.34 257.62 257.62 257.62s257.62-115.34 257.62-257.62-115.34-257.62-257.62-257.62-257.62 115.34-257.62 257.62", fill: "url(#gradient)", transform: "translate(-256, 0)" })));
};
const AiLightIcon = ({ className }) => {
return (h("svg", { fill: "none", viewBox: "0 0 887 982", class: className || '', xmlns: "http://www.w3.org/2000/svg" },
h("defs", null,
h("linearGradient", { id: "gradient", x1: "0%", y1: "0%", x2: "100%", y2: "100%" },
h("stop", { offset: "20%", "stop-color": "#FF00FF" }),
h("stop", { offset: "60%", "stop-color": "#0066CC" }),
h("stop", { offset: "100%", "stop-color": "#0066CC" }))),
h("path", { d: "m36.76 749.83v231.56l201.3-116.22c-77.25-16.64-147.52-56.92-201.3-115.34z", fill: "#0066CC" }),
h("path", { d: "m236.59 115.18-199.83-115.18v230.14c56.05-60.9 128.22-99.28 199.83-114.97z", fill: "#FF00FF" }),
h("path", { d: "m685.40 374.91c23.68 75.15 23.76 156.75-.59 232.74l201.86-116.54c-9.54-5.51-189.55-109.44-201.26-116.2z", fill: "#0066CC" }),
h("path", { d: "m577.75 489.53c0 142.28-115.34 257.62-257.62 257.62s-257.62-115.34-257.62-257.62 115.34-257.62 257.63-257.62 257.62 115.34 257.62 257.62m62.57-.44c0-176.82-143.34-320.16-320.16-320.16s-320.17 143.33-320.17 320.16 143.34 320.16 320.16 320.16 320.16-143.34 320.16-320.16", fill: "url(#gradient)" })));
};
const AppsSolidIcon = ({ className }) => {
return (h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", class: `mi-solid mi-apps ${className || ''}`, viewBox: "0 0 24 24" },
h("path", { d: "M5 8h2c.6 0 1-.4 1-1V5c0-.6-.4-1-1-1H5c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1m6 12h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-2c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1m-6 0h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1H5c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1m0-6h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1H5c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1m6 0h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-2c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1m5-9v2c0 .6.4 1 1 1h2c.6 0 1-.4 1-1V5c0-.6-.4-1-1-1h-2c-.6 0-1 .4-1 1m-5 3h2c.6 0 1-.4 1-1V5c0-.6-.4-1-1-1h-2c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1m6 6h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-2c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1m0 6h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-2c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1" })));
};
const HelpSolidIcon = ({ className }) => {
return (h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", class: `mi-solid mi-help ${className || ''}`, viewBox: "0 0 24 24" },
h("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 16.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5m2.82-6.72-.77.79c-.42.43-.69.78-.83 1.34-.07.28-.1.58-.1.92v.25H10.9v-.68c0-.41.07-.81.2-1.21.18-.52.48-1.01.87-1.4l1.07-1.09c.35-.33.49-.81.4-1.32-.09-.52-.5-.97-1.01-1.12a1.467 1.467 0 0 0-1.81.93c-.14.44-.51.73-.94.73h-.26c-.31 0-.59-.14-.78-.39s-.25-.58-.16-.89a3.72 3.72 0 0 1 2.97-2.61c.17-.03.34-.04.51-.04 1.15 0 2.3.63 3.06 1.68 1.13 1.57.72 3.19-.19 4.1Z" })));
};
const MenuSolidIcon = ({ className }) => {
return (h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", class: `mi-solid mi-menu ${className || ''}`, viewBox: "0 0 24 24" },
h("path", { d: "M4 18h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1m0-5h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1M3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1" })));
};
const MoreVerticalSolidIcon = ({ className, }) => {
return (h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", class: `mi-solid mi-more-vertical ${className || ''}`, viewBox: "0 0 24 24" },
h("path", { d: "M10.59 10.59c-.78.78-.78 2.05 0 2.83s2.05.78 2.83 0 .78-2.05 0-2.83-2.05-.78-2.83 0m0-7c-.78.78-.78 2.05 0 2.83s2.05.78 2.83 0 .78-2.05 0-2.83-2.05-.78-2.83 0m0 14c-.78.78-.78 2.05 0 2.83s2.05.78 2.83 0 .78-2.05 0-2.83-2.05-.78-2.83 0" })));
};
const NotificationsSolidIcon = ({ className, }) => {
return (h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", class: `mi-solid mi-notifications ${className || ''}`, viewBox: "0 0 24 24" },
h("path", { d: "M10 20h4c0 1.1-.9 2-2 2s-2-.9-2-2m9.67-2.69C18.36 15.96 17 13.66 17 10a5 5 0 0 0-4-4.9V4c0-.55-.45-1-1-1s-1 .45-1 1v1.1A5 5 0 0 0 7 10c0 3.66-1.37 5.96-2.67 7.31-.61.64-.16 1.69.72 1.69h13.91c.88 0 1.33-1.05.72-1.69Z" })));
};
const modusWcNavbarCss = "modus-wc-navbar .modus-wc-navbar{background-color:var(--modus-wc-color-base-page);border-radius:0;box-shadow:none;height:56px;min-height:0;padding:0 var(--modus-wc-spacing-md)}modus-wc-navbar .modus-wc-navbar modus-wc-button{display:inline-flex}modus-wc-navbar .modus-wc-navbar modus-wc-button svg{height:24px}modus-wc-navbar .modus-wc-navbar:not(.logo) .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary{background:var(--modus-wc-color-base-100);border:0;box-shadow:none;color:var(--modus-wc-color-base-content)}modus-wc-navbar .modus-wc-navbar .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary.logo{background:transparent}modus-wc-navbar .modus-wc-navbar [slot=end] .user,modus-wc-navbar .modus-wc-navbar [slot=end] .apps,modus-wc-navbar .modus-wc-navbar [slot=end] .notifications,modus-wc-navbar .modus-wc-navbar [slot=end] modus-wc-menu,modus-wc-navbar .modus-wc-navbar [slot=start] .main-menu{position:absolute;top:45px;z-index:99}modus-wc-navbar .modus-wc-navbar [slot=end] .hidden.user,modus-wc-navbar .modus-wc-navbar [slot=end] .hidden.apps,modus-wc-navbar .modus-wc-navbar [slot=end] .hidden.notifications,modus-wc-navbar .modus-wc-navbar [slot=end] modus-wc-menu.hidden,modus-wc-navbar .modus-wc-navbar [slot=start] .hidden.main-menu{display:none}modus-wc-navbar .modus-wc-navbar [slot=end] .visible.user,modus-wc-navbar .modus-wc-navbar [slot=end] .visible.apps,modus-wc-navbar .modus-wc-navbar [slot=end] .visible.notifications,modus-wc-navbar .modus-wc-navbar [slot=end] modus-wc-menu.visible,modus-wc-navbar .modus-wc-navbar [slot=start] .visible.main-menu{display:block}modus-wc-navbar .modus-wc-navbar [slot=end],modus-wc-navbar .modus-wc-navbar [slot=center],modus-wc-navbar .modus-wc-navbar [slot=start]{align-items:center;display:flex;position:relative}modus-wc-navbar .modus-wc-navbar [slot=start] modus-wc-button{padding-inline-end:var(--modus-wc-spacing-sm);padding-inline-start:var(--modus-wc-spacing-xs)}modus-wc-navbar .modus-wc-navbar [slot=start] .main-menu{height:calc(100dvh - 56px);left:calc(-1 * var(--modus-wc-spacing-md));min-width:256px}modus-wc-navbar .modus-wc-navbar [slot=start] .logo.modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary{padding:0}modus-wc-navbar .modus-wc-navbar [slot=start] .logo.modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary .modus-wc-logo svg{height:32px;max-width:260px}modus-wc-navbar .modus-wc-navbar [slot=end] modus-wc-button,modus-wc-navbar .modus-wc-navbar [slot=end] modus-wc-text-input{padding-inline-start:var(--modus-wc-spacing-sm)}modus-wc-navbar .modus-wc-navbar [slot=end] button.ai svg{padding:3px 0 3px 3px}modus-wc-navbar .modus-wc-navbar [slot=end] modus-wc-menu{right:var(--modus-wc-spacing-2xl);z-index:99}modus-wc-navbar .modus-wc-navbar [slot=end] .notifications{right:100px}modus-wc-navbar .modus-wc-navbar [slot=end] .apps{right:var(--modus-wc-spacing-2xl)}modus-wc-navbar .modus-wc-navbar [slot=end] .user{right:0}modus-wc-navbar .modus-wc-navbar [slot=end] .user modus-wc-card article.modus-wc-card{align-items:center;padding:var(--modus-wc-spacing-xl);width:max-content}modus-wc-navbar .modus-wc-navbar [slot=end] .user modus-wc-card article.modus-wc-card .initials{background-color:var(--modus-wc-color-black);border-radius:50%;color:var(--modus-wc-color-white);font-weight:var(--modus-wc-font-weight-semibold);padding:var(--modus-wc-spacing-sm)}modus-wc-navbar .modus-wc-navbar [slot=end] .user modus-wc-card article.modus-wc-card .modus-wc-card-body{align-items:center}modus-wc-navbar .modus-wc-navbar [slot=end] .user modus-wc-card article.modus-wc-card modus-wc-button{padding:0}modus-wc-navbar .modus-wc-navbar [slot=end] .user modus-wc-card article.modus-wc-card .sign-out.modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary{color:var(--modus-wc-color-primary)}modus-wc-navbar .modus-wc-navbar [slot=end] .user-button.modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary{background-color:var(--modus-wc-color-black);color:var(--modus-wc-color-white)}[data-theme=modus-modern-light] modus-wc-navbar .modus-wc-navbar{background-size:cover}[data-theme=modus-modern-dark] modus-wc-navbar .modus-wc-navbar{background-size:cover}[data-theme=modus-classic-light] modus-wc-navbar .modus-wc-navbar svg,[data-theme=modus-classic-dark] modus-wc-navbar .modus-wc-navbar svg{height:32px}[data-theme=modus-classic-light] modus-wc-navbar .modus-wc-navbar modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-sm,[data-theme=modus-classic-dark] modus-wc-navbar .modus-wc-navbar modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-sm{font-size:var(--modus-wc-font-size-md);height:var(--modus-wc-input-height-md);line-height:var(--modus-wc-line-height-md);padding:var(--modus-wc-spacing-sm)}[data-theme=modus-classic-dark] modus-wc-navbar .modus-wc-navbar{background-color:var(--modus-wc-color-gray-10)}[data-theme=modus-classic-dark] modus-wc-navbar .modus-wc-navbar:not(.logo) .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary{background:transparent;color:var(--modus-wc-color-white)}[data-theme=modus-classic-dark] modus-wc-navbar .modus-wc-navbar .logo.modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary path{fill:var(--modus-wc-color-white)}[data-theme=modus-classic-dark] modus-wc-navbar .modus-wc-navbar .user modus-wc-card article.modus-wc-card .sign-out.modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary{color:var(--modus-wc-color-white)}[data-theme=connect-light] modus-wc-navbar .modus-wc-navbar,[data-theme=connect-dark] modus-wc-navbar .modus-wc-navbar{border-bottom:var(--modus-wc-border-width-xs) solid var(--modus-wc-color-base-200)}[data-theme=connect-light] modus-wc-navbar .modus-wc-navbar :not(.logo) .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary,[data-theme=connect-dark] modus-wc-navbar .modus-wc-navbar :not(.logo) .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary{background:transparent}";
const ModusWcNavbar$1 = /*@__PURE__*/ proxyCustomElement(class ModusWcNavbar extends H {
constructor() {
super();
this.__registerHost();
this.aiClick = createEvent(this, "aiClick", 7);
this.appsClick = createEvent(this, "appsClick", 7);
this.appsMenuOpenChange = createEvent(this, "appsMenuOpenChange", 7);
this.condensedMenuOpenChange = createEvent(this, "condensedMenuOpenChange", 7);
this.helpClick = createEvent(this, "helpClick", 7);
this.mainMenuOpenChange = createEvent(this, "mainMenuOpenChange", 7);
this.myTrimbleClick = createEvent(this, "myTrimbleClick", 7);
this.notificationsClick = createEvent(this, "notificationsClick", 7);
this.notificationsMenuOpenChange = createEvent(this, "notificationsMenuOpenChange", 7);
this.searchChange = createEvent(this, "searchChange", 7);
this.searchClick = createEvent(this, "searchClick", 7);
this.searchInputOpenChange = createEvent(this, "searchInputOpenChange", 7);
this.signOutClick = createEvent(this, "signOutClick", 7);
this.trimbleLogoClick = createEvent(this, "trimbleLogoClick", 7);
this.userMenuOpenChange = createEvent(this, "userMenuOpenChange", 7);
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'))))))))));
}
get el() { return this; }
static get style() { return modusWcNavbarCss; }
}, [4, "modus-wc-navbar", {
"logoName": [1, "logo-name"],
"appsMenuOpen": [1028, "apps-menu-open"],
"condensed": [4],
"condensedMenuOpen": [1028, "condensed-menu-open"],
"customClass": [1, "custom-class"],
"mainMenuOpen": [1028, "main-menu-open"],
"notificationsMenuOpen": [1028, "notifications-menu-open"],
"searchDebounceMs": [2, "search-debounce-ms"],
"searchInputOpen": [1028, "search-input-open"],
"textOverrides": [16, "text-overrides"],
"userCard": [16, "user-card"],
"userMenuOpen": [1028, "user-menu-open"],
"visibility": [16],
"isLight": [32],
"searchValue": [32]
}, [[4, "click", "handleClickOutside"]]]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["modus-wc-navbar", "modus-wc-avatar", "modus-wc-button", "modus-wc-card", "modus-wc-checkbox", "modus-wc-icon", "modus-wc-input-feedback", "modus-wc-input-label", "modus-wc-logo", "modus-wc-menu", "modus-wc-menu-item", "modus-wc-text-input", "modus-wc-toolbar", "modus-wc-tooltip"];
components.forEach(tagName => { switch (tagName) {
case "modus-wc-navbar":
if (!customElements.get(tagName)) {
customElements.define(tagName, ModusWcNavbar$1);
}
break;
case "modus-wc-avatar":
if (!customElements.get(tagName)) {
defineCustomElement$e();
}
break;
case "modus-wc-button":
if (!customElements.get(tagName)) {
defineCustomElement$d();
}
break;
case "modus-wc-card":
if (!customElements.get(tagName)) {
defineCustomElement$c();
}
break;
case "modus-wc-checkbox":
if (!customElements.get(tagName)) {
defineCustomElement$b();
}
break;
case "modus-wc-icon":
if (!customElements.get(tagName)) {
defineCustomElement$a();
}
break;
case "modus-wc-input-feedback":
if (!customElements.get(tagName)) {
defineCustomElement$9();
}
break;
case "modus-wc-input-label":
if (!customElements.get(tagName)) {
defineCustomElement$8();
}
break;
case "modus-wc-logo":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "modus-wc-menu":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "modus-wc-menu-item":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "modus-wc-text-input":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "modus-wc-toolbar":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "modus-wc-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const ModusWcNavbar = ModusWcNavbar$1;
const defineCustomElement = defineCustomElement$1;
export { ModusWcNavbar, defineCustomElement };