@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
141 lines (140 loc) • 6.01 kB
TypeScript
import { EventEmitter } from '../../stencil-public-runtime';
export interface INavbarTextOverrides {
/** Replaces the text for "Apps" in the condensed menu. */
apps?: string;
/** Replaces the text for "Help" in the condensed menu. */
help?: string;
/** Replaces the text for "Notifications" in the condensed menu. */
notifications?: string;
/** Replaces the text for "Search" in the condensed menu. */
search?: string;
}
export interface INavbarVisibility {
/** Controls the visibility of the AI button. */
ai?: boolean;
/** Controls visibility of the apps button. */
apps?: boolean;
/** Controls visibility of the help button. */
help?: boolean;
/** Controls visibility of the main menu button. */
mainMenu?: boolean;
/** Controls visibility of the notifications button. */
notifications?: boolean;
/** Controls visibility of the search button. */
search?: boolean;
/** Controls visibility of the search input. */
searchInput?: boolean;
/** Controls visibility of the user button. */
user?: boolean;
}
export interface INavbarUserCard {
/** The alt value to set on the avatar. */
avatarAlt?: string;
/** The avatar image source value. */
avatarSrc?: string;
/** The email address of the user. */
email: string;
/** Text override for the Access MyTrimble button, allows for translation. */
myTrimbleButton?: string;
/** The name of the user */
name: string;
/** Text override for the Sign out button, allows for translation. */
signOutButton?: string;
}
/**
* 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 declare class ModusWcNavbar {
private appsRef?;
private condensedMenuRef?;
private inheritedAttributes;
private menuRef?;
private notificationsRef?;
private searchDebounceTimer;
private userRef?;
/** Reference to the host element */
el: HTMLElement;
/** The open state of the apps menu. */
appsMenuOpen?: boolean;
/** Applies condensed layout and styling. */
condensed?: boolean;
/** The open state of the condensed menu. */
condensedMenuOpen?: boolean;
/** Custom CSS class to apply to the host element. */
customClass?: string;
/** The open state of the main menu. */
mainMenuOpen?: boolean;
/** The open state of the notifications menu. */
notificationsMenuOpen?: boolean;
/** Debounce time in milliseconds for search input changes. Default is 300ms. */
searchDebounceMs?: number;
/** The open state of the search input. */
searchInputOpen?: boolean;
/** Text replacements for the navbar. */
textOverrides?: INavbarTextOverrides;
/** User information used to render the user card. */
userCard: INavbarUserCard;
/** The open state of the user menu. */
userMenuOpen?: boolean;
/** The visibility of individual navbar buttons. Default is user profile visible, others hidden. */
visibility?: INavbarVisibility;
/** Event emitted when the AI button is clicked or activated via keyboard. */
aiClick: EventEmitter<MouseEvent | KeyboardEvent>;
/** Event emitted when the apps button is clicked or activated via keyboard. */
appsClick: EventEmitter<MouseEvent | KeyboardEvent>;
/** Event emitted when the apps menu open state changes. */
appsMenuOpenChange: EventEmitter<boolean>;
/** Event emitted when the condensed menu open state changes. */
condensedMenuOpenChange: EventEmitter<boolean>;
/** Event emitted when the help button is clicked or activated via keyboard. */
helpClick: EventEmitter<MouseEvent | KeyboardEvent>;
/** Event emitted when the main menu open state changes. */
mainMenuOpenChange: EventEmitter<boolean>;
/** Event emitted when the user profile Access MyTrimble button is clicked or activated via keyboard. */
myTrimbleClick: EventEmitter<MouseEvent | KeyboardEvent>;
/** Event emitted when the notifications button is clicked or activated via keyboard. */
notificationsClick: EventEmitter<MouseEvent | KeyboardEvent>;
/** Event emitted when the notifications menu open state changes. */
notificationsMenuOpenChange: EventEmitter<boolean>;
/** Event emitted when the search input value is changed. */
searchChange: EventEmitter<{
value: string;
}>;
/** Event emitted when the search button is clicked or activated via keyboard. */
searchClick: EventEmitter<MouseEvent | KeyboardEvent>;
/** Event emitted when the search input open state changes. */
searchInputOpenChange: EventEmitter<boolean>;
/** Event emitted when the user profile sign out button is clicked or activated via keyboard. */
signOutClick: EventEmitter<MouseEvent | KeyboardEvent>;
/** Event emitted when the Trimble logo is clicked or activated via keyboard. */
trimbleLogoClick: EventEmitter<MouseEvent | KeyboardEvent>;
/** Event emitted when the user menu open state changes. */
userMenuOpenChange: EventEmitter<boolean>;
private isLight;
private searchValue;
private themeObserver;
componentWillLoad(): void;
disconnectedCallback(): void;
handleClickOutside(event: MouseEvent): void;
private getClasses;
private getUserInitials;
private handleAiClick;
private handleAppsClick;
private handleHelpClick;
private handleMyTrimbleClick;
private handleNotificationsClick;
private handleSearchChange;
private handleSearchClick;
private handleSignOutClick;
private handleTrimbleLogoClick;
private toggleApps;
private toggleCondensedMenu;
private toggleMainMenu;
private toggleNotifications;
private toggleSearch;
private toggleUser;
render(): any;
}