@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
61 lines (60 loc) • 2.35 kB
TypeScript
import { EventEmitter } from '../../stencil-public-runtime';
import { DaisySize } from '../types';
export interface IMenuItem {
/** The display text for the menu item. */
label: string;
/** The name of the icon to display alongside the menu item (optional). */
icon?: string;
/** The variant of the icon to use, such as 'solid' or 'outlined' (optional). */
iconVariant?: 'solid' | 'outlined';
/** The size of the icon to use, such as 'xs', 'sm', 'md' or 'lg' (optional). */
iconSize?: DaisySize;
/** The value associated with the menu item, used for selection (optional). */
value?: string;
}
export interface IManageTrimbleId {
/** The URL for managing the user's Trimble ID. */
link: string;
/** The target for the Manage my Trimble ID link (optional). */
target?: '_blank' | '_self' | '_parent' | '_top';
/** The rel attribute for the Manage my Trimble ID link (optional). Defaults to 'noopener noreferrer' when target is '_blank'. */
rel?: string;
}
export interface ISubMenu {
/** Title for the submenu section */
title?: string;
/** Array of menu items */
items: IMenuItem[];
}
export interface IProfileMenuProps {
/** The URL of the profile image. */
profileImageUrl: string;
/** The header name of the profile menu. */
headerName: string;
/** The name of the user. */
userName: string;
/** The email of the user. */
userEmail: string;
/** The manage Trimble ID link configuration (optional). */
manageTrimbleId?: IManageTrimbleId;
}
export declare class ModusWcProfileMenu {
private inheritedAttributes;
el: HTMLElement;
/** Profile menu properties containing user information */
profileProps: IProfileMenuProps;
/** Configuration for the first menu including title and items */
menuOne?: ISubMenu;
/** Configuration for the second menu including title and items */
menuTwo?: ISubMenu;
/** Emitted when the Sign Out menu item is clicked */
signOutClick: EventEmitter<void>;
/** Emitted when any menu item is clicked, passing back the item value or label */
menuItemClick: EventEmitter<string>;
componentWillLoad(): void;
handleItemSelect(event: CustomEvent): void;
private handleMenuItemClick;
private currentYear;
private mainMenu;
render(): any;
}