import * as i0 from '@angular/core';
import { OnInit, OnDestroy, AfterViewInit, OnChanges, EventEmitter, SimpleChanges, QueryList, AfterContentInit, ElementRef, TemplateRef } from '@angular/core';
import { EuiAppShellService, EuiGrowlService, EuiThemeService, UxLinkLegacy, EuiMenuItem as EuiMenuItem$2 } from '@eui/core';
import { BooleanInput } from '@angular/cdk/coercion';
import { EuiMenuItem, EuiMenuComponent } from '@eui/components/eui-menu';
import { EuiUserProfileMenuComponent, EuiUserProfileComponent } from '@eui/components/eui-user-profile';
import * as i1 from '@eui/components/shared';
import { BaseStatesDirective } from '@eui/components/shared';
import { Subscription } from 'rxjs';
import { UxLinkLegacy as UxLinkLegacy$1, EuiMenuItem as EuiMenuItem$1 } from '@eui/base';
import { EuiAutoCompleteItem } from '@eui/components/eui-autocomplete';
import { EuiTemplateDirective } from '@eui/components/directives';
/**
* @description
* Application sidebar component that provides a collapsible navigation panel for the application shell.
* Automatically registers with EuiAppShellService to coordinate layout state and responsive behavior.
* Handles automatic collapse on mobile and tablet breakpoints, and closes on body clicks in responsive modes.
* Manages CSS variables for sidebar dimensions to ensure proper content area positioning.
*
* @usageNotes
* ```html
*
*
*
*
*
*
*
*
*
*
User profile details
*
*
*
*
*
*
*
*
* Footer content
*
*
*
* ```
*
* ### Accessibility
* - Provides semantic navigation structure for sidebar content
* - Keyboard navigation supported through child menu components
* - Automatically closes on mobile/tablet for better UX
* - Focus management handled by child components
* - Collapsible behavior maintains accessibility in all states
*
* ### Notes
* - Must be used within eui-app component for proper layout integration
* - Automatically registers with EuiAppShellService on init
* - Manages CSS variables for sidebar width calculations
* - Automatically collapses on mobile and tablet breakpoints
* - Closes on body clicks when in responsive mode
* - Expects child components: eui-app-sidebar-header, eui-app-sidebar-body, eui-app-sidebar-footer
* - Optional eui-app-sidebar-drawer for expandable content (e.g., user profile)
* - Cleans up layout state and CSS variables on destroy
* - Sidebar state controlled via EuiAppShellService.isSidebarOpen
*/
declare class EuiAppSidebarComponent implements OnInit, OnDestroy {
string: string;
asService: EuiAppShellService;
private subscriptions;
private document;
close(): void;
ngOnInit(): void;
ngOnDestroy(): void;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Container component for the main content area of the sidebar, positioned between header and footer.
* Provides a scrollable region for sidebar navigation menus or other interactive content.
* Automatically handles vertical spacing to accommodate sidebar header and footer when present.
* Content is projected via ng-content allowing flexible body composition.
*
* @usageNotes
* ```html
*
*
*
*
*
*
*
*
*
* ```
*
* ### Accessibility
* - Provides scrollable navigation region
* - Content projection allows flexible accessible structure
* - Child menu components handle keyboard navigation
* - Scroll behavior maintains focus visibility
*
* ### Notes
* - Must be used within eui-app-sidebar for proper layout integration
* - Positioned between eui-app-sidebar-header and eui-app-sidebar-footer
* - Typically contains eui-app-sidebar-menu for navigation
* - Automatically scrollable when content exceeds available height
* - Content is projected via ng-content for flexible composition
* - Vertical spacing automatically adjusts for header/footer presence
* - Takes remaining vertical space between header and footer
*/
declare class EuiAppSidebarBodyComponent {
class: string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Sidebar navigation menu component that renders hierarchical menu items within the application sidebar.
* Integrates with EuiAppShellService to synchronize menu state and handle responsive behavior.
* Supports filtering, icons, tooltips, collapsible states, and automatic closure on mobile/tablet navigation.
* Automatically switches between sidebar-only and combined menu items based on viewport breakpoints.
*
* @usageNotes
* ```html
*
*
*
*
*
*
*
*
*
* ```
*
* ```ts
* import { EuiMenuItem } from '@eui/components/eui-menu';
*
* sidebarItems: EuiMenuItem[] = [
* {
* label: 'Dashboard',
* url: '/dashboard',
* icon: 'home:outline'
* },
* {
* label: 'Settings',
* icon: 'settings:outline',
* children: [
* { label: 'Profile', url: '/settings/profile' },
* { label: 'Security', url: '/settings/security' }
* ]
* }
* ];
*
* onMenuItemClick(item: EuiMenuItem): void {
* console.log('Menu item clicked:', item);
* }
* ```
*
* ### Accessibility
* - Keyboard navigation supported (Arrow keys, Enter, Space)
* - Focus management handled automatically
* - ARIA attributes for menu structure and states
* - Tooltips provide context in collapsed mode
* - Filter input is keyboard accessible
* - Collapsible items announce expanded/collapsed state
*
* ### Notes
* - Must be used within eui-app-sidebar-body for proper layout
* - items array should use EuiMenuItem interface
* - hasFilter enables search/filter input above menu
* - hasIcons displays icons alongside labels
* - hasIconsLabels shows text below icons in collapsed mode
* - hasTooltip enables tooltips in collapsed state (default: true)
* - hasTooltipOnExpanded shows tooltips even when expanded
* - expandAllItems expands all parent items by default
* - isCollapsed renders icon-only mode (syncs with sidebar state)
* - hasCollapsedInitials shows first letter instead of icon
* - isFlat removes hierarchical indentation
* - hasScrollToItem auto-scrolls to active item
* - hasBoldRootLevel emphasizes top-level items
* - Automatically closes sidebar on mobile/tablet after navigation
* - Switches to combined menu items on mobile breakpoint
* - sidebarItemClick emits on any item click
* - sidebarItemToggle emits on expand/collapse actions
*/
declare class EuiAppSidebarMenuComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
asService: EuiAppShellService;
class: string;
/**
* Enables a search/filter input field above the menu items.
* When true, displays a text input allowing users to filter menu items by label.
* @default false
*/
hasFilter: boolean;
/**
* Displays icons alongside menu item labels.
* When true, renders icon elements for menu items that have icon definitions.
* @default false
*/
hasIcons: boolean;
/**
* Shows icon labels in collapsed sidebar mode.
* When true, displays text labels below icons when sidebar is collapsed, enabling icon-with-label variant.
* @default false
*/
hasIconsLabels: boolean;
/**
* Enables tooltips on menu items when sidebar is collapsed.
* When true, displays full menu item labels in tooltips on hover in collapsed state.
* @default true
*/
hasTooltip: boolean;
/**
* Shows tooltips even when sidebar is expanded.
* When true, displays tooltips on menu items regardless of sidebar collapse state.
* @default false
*/
hasTooltipOnExpanded: boolean;
/**
* Expands all collapsible menu items by default.
* When true, all parent menu items with children are rendered in expanded state on initialization.
* @default false
*/
expandAllItems: boolean;
/**
* Renders the menu in collapsed/icon-only mode.
* When true, hides menu item labels and shows only icons, typically synchronized with sidebar collapse state.
* @default false
*/
isCollapsed: boolean;
/**
* Displays initials instead of full icons in collapsed mode.
* When true, shows first letter of menu item label as a visual identifier when sidebar is collapsed.
* @default false
*/
hasCollapsedInitials: boolean;
/**
* Renders menu in flat mode without hierarchical indentation.
* When true, all menu items are displayed at the same level regardless of parent-child relationships.
* @default false
*/
isFlat: boolean;
/**
* Enables automatic scrolling to active menu item.
* When true, scrolls the menu container to bring the currently active item into view.
* @default false
*/
hasScrollToItem: boolean;
/**
* Applies bold font weight to root-level menu items.
* When true, emphasizes top-level menu items with bold styling to distinguish hierarchy.
* @default false
*/
hasBoldRootLevel: boolean;
/**
* Array of menu item objects to render in the sidebar navigation.
* Each item should conform to EuiMenuItem interface with properties like label, url, icon, and children.
* Required for menu rendering.
*/
items: Items[];
/**
* Emitted when a menu item is clicked by the user.
* Payload: EuiMenuItem - the clicked menu item object
* Triggered on any menu item click, before automatic sidebar closure on mobile/tablet.
*/
sidebarItemClick: EventEmitter>;
/**
* Emitted when a collapsible menu item is expanded or collapsed.
* Payload: EuiMenuItem - the toggled menu item object
* Triggered when user clicks the expand/collapse control on parent menu items.
*/
sidebarItemToggle: EventEmitter>;
menu?: EuiMenuComponent;
private subs;
constructor();
ngOnInit(): void;
ngAfterViewInit(): void;
ngOnDestroy(): void;
ngOnChanges(changes: SimpleChanges): void;
onMenuItemClicked(event: EuiMenuItem): void;
onSidebarItemToggled(event: EuiMenuItem): void;
static ɵfac: i0.ɵɵFactoryDeclaration, never>;
static ɵcmp: i0.ɵɵComponentDeclaration, "eui-app-sidebar-menu", never, { "hasFilter": { "alias": "hasFilter"; "required": false; }; "hasIcons": { "alias": "hasIcons"; "required": false; }; "hasIconsLabels": { "alias": "hasIconsLabels"; "required": false; }; "hasTooltip": { "alias": "hasTooltip"; "required": false; }; "hasTooltipOnExpanded": { "alias": "hasTooltipOnExpanded"; "required": false; }; "expandAllItems": { "alias": "expandAllItems"; "required": false; }; "isCollapsed": { "alias": "isCollapsed"; "required": false; }; "hasCollapsedInitials": { "alias": "hasCollapsedInitials"; "required": false; }; "isFlat": { "alias": "isFlat"; "required": false; }; "hasScrollToItem": { "alias": "hasScrollToItem"; "required": false; }; "hasBoldRootLevel": { "alias": "hasBoldRootLevel"; "required": false; }; "items": { "alias": "items"; "required": false; }; }, { "sidebarItemClick": "sidebarItemClick"; "sidebarItemToggle": "sidebarItemToggle"; }, never, never, true, never>;
static ngAcceptInputType_hasFilter: unknown;
static ngAcceptInputType_hasIcons: unknown;
static ngAcceptInputType_hasIconsLabels: unknown;
static ngAcceptInputType_hasTooltip: unknown;
static ngAcceptInputType_hasTooltipOnExpanded: unknown;
static ngAcceptInputType_expandAllItems: unknown;
static ngAcceptInputType_isCollapsed: unknown;
static ngAcceptInputType_hasCollapsedInitials: unknown;
static ngAcceptInputType_isFlat: unknown;
static ngAcceptInputType_hasScrollToItem: unknown;
static ngAcceptInputType_hasBoldRootLevel: unknown;
}
/**
* @description
* Container component for the sidebar header area, typically containing branding, logo, or user profile elements.
* Automatically registers with EuiAppShellService to calculate and set CSS variables for proper layout spacing.
* Manages the --eui-app-sidebar-header-height CSS variable to coordinate vertical positioning of sidebar content.
* Content is projected via ng-content allowing flexible header composition.
*
* @usageNotes
* ```html
*
*
*
*
*
*
*
*
*
* ```
*
* ### Accessibility
* - Provides semantic container for sidebar header content
* - Content projection allows flexible accessible structure
* - Child components handle their own accessibility features
*
* ### Notes
* - Must be used within eui-app-sidebar for proper layout integration
* - Automatically registers with EuiAppShellService on init
* - Sets --eui-app-sidebar-header-height CSS variable for layout calculations
* - Typically contains eui-app-sidebar-header-user-profile
* - Content is projected via ng-content for flexible composition
* - Cleans up CSS variables on destroy
* - Height is automatically calculated based on content
*/
declare class EuiAppSidebarHeaderComponent implements OnInit, OnDestroy {
class: string;
private asService;
private document;
ngOnInit(): void;
ngOnDestroy(): void;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Container component for the sidebar footer area, typically containing secondary actions, settings, or utility links.
* Automatically registers with EuiAppShellService to calculate and set CSS variables for proper layout spacing.
* Manages the --eui-app-sidebar-footer-height CSS variable to coordinate vertical positioning of sidebar content.
* Content is projected via ng-content allowing flexible footer composition.
*
* @usageNotes
* ```html
*
*
*
*
*
Version 1.0.0
* Help
*
*
*
* ```
*
* ### Accessibility
* - Provides semantic container for sidebar footer content
* - Content projection allows flexible accessible structure
* - Links and buttons within footer maintain keyboard accessibility
*
* ### Notes
* - Must be used within eui-app-sidebar for proper layout integration
* - Automatically registers with EuiAppShellService on init
* - Sets --eui-app-sidebar-footer-height CSS variable for layout calculations
* - Typically contains utility links, version info, or secondary actions
* - Content is projected via ng-content for flexible composition
* - Cleans up CSS variables on destroy
* - Height is automatically calculated based on content
* - Positioned at bottom of sidebar, below sidebar body
*/
declare class EuiAppSidebarFooterComponent implements OnInit, OnDestroy {
class: string;
private asService;
private document;
ngOnInit(): void;
ngOnDestroy(): void;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* User profile component displayed in the sidebar header showing user information and avatar.
* Provides visual representation of the logged-in user with optional welcome message, online status, and profile menu integration.
* Supports impersonation indicators, avatar customization, and optional drawer toggle for expanded profile details.
* Integrates with EuiUserProfileMenuComponent for dropdown menu functionality.
*
* @usageNotes
* ```html
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
User profile details
*
*
*
* ```
*
* ```ts
* userAvatar = 'assets/user-avatar.jpg';
*
* onSidebarProfileToggle(event: any): void {
* console.log('Profile drawer toggled');
* }
* ```
*
* ### Accessibility
* - Avatar provides visual user identification
* - hasTabNavigation enables keyboard focus and navigation
* - Online status indicator is visually distinct
* - Welcome label provides context for screen readers
* - Click interaction is keyboard accessible when hasToggle enabled
* - Profile menu integration supports keyboard navigation
*
* ### Notes
* - Must be used within eui-app-sidebar-header for proper layout
* - welcomeLabel displays greeting text (default: 'Welcome')
* - impersonateLabel shows when user is impersonating (default: 'acting as')
* - avatarUrl displays custom avatar image
* - isShowUserInfos controls visibility of user text details (default: true)
* - isShowAvatarInitials shows initials when no avatar image (default: false)
* - isOnline displays online status indicator (default: true)
* - hasWelcomeLabel controls welcome message visibility (default: true)
* - hasTabNavigation enables keyboard focus (default: false)
* - hasToggle enables click toggle functionality (default: false)
* - hasProfileDrawer enables drawer mode with expandable content (default: false)
* - toggle event emits when profile is clicked with hasToggle or hasProfileDrawer enabled
* - Integrates with eui-app-sidebar-drawer for expanded profile details
* - Can contain eui-user-profile-menu for dropdown menu functionality
*/
declare class EuiAppSidebarHeaderUserProfileComponent {
get cssClasses(): string;
/**
* Text label displayed before the username in the welcome message.
* Typically used for greeting text like "Welcome" or "Hello".
* @default 'Welcome'
*/
welcomeLabel: string;
/**
* Text label displayed when user is impersonating another user.
* Shows between the actual user and impersonated user names, typically "acting as".
* @default 'acting as'
*/
impersonateLabel: string;
/**
* URL path to the user's avatar image.
* When provided, displays the image instead of initials or default avatar.
* Optional.
*/
avatarUrl: string;
/**
* Controls visibility of user information text (name, email, etc.).
* When false, hides textual user details and shows only the avatar.
* @default true
*/
isShowUserInfos: boolean;
/**
* Displays user initials in the avatar when no avatar image is provided.
* When true, shows first letters of user's name as avatar placeholder.
* @default false
*/
isShowAvatarInitials: boolean;
/**
* Indicates the user's online status with a visual indicator.
* When true, displays an online status badge on the avatar.
* @default true
*/
isOnline: boolean;
/**
* Controls visibility of the welcome label text.
* When false, hides the welcome message prefix and shows only the username.
* @default true
*/
hasWelcomeLabel: boolean;
/**
* Enables keyboard tab navigation to the user profile component.
* When true, makes the profile element focusable and accessible via keyboard.
* @default false
*/
hasTabNavigation: boolean;
/**
* Enables toggle functionality for expanding/collapsing profile details.
* When true, allows clicking to toggle profile state and emits toggle events.
* @default false
*/
hasToggle: boolean;
/**
* Enables profile drawer mode with expandable content panel.
* When true, clicking the profile opens a drawer with additional user details and actions.
* @default false
*/
hasProfileDrawer: boolean;
/**
* Emitted when the user profile is clicked and toggle functionality is enabled.
* Payload: any - event data from the click interaction
* Triggered when hasToggle or hasProfileDrawer is true and the profile is clicked.
*/
toggle: EventEmitter;
toggleProfile: boolean;
userProfileMenu: QueryList;
onProfileClick(event: any): void;
onClick(event: MouseEvent): void;
private _getCssClasses;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
static ngAcceptInputType_isShowUserInfos: unknown;
static ngAcceptInputType_isShowAvatarInitials: unknown;
static ngAcceptInputType_isOnline: unknown;
static ngAcceptInputType_hasWelcomeLabel: unknown;
static ngAcceptInputType_hasTabNavigation: unknown;
static ngAcceptInputType_hasToggle: unknown;
static ngAcceptInputType_hasProfileDrawer: unknown;
}
/**
* @description
* Expandable drawer component that slides out from the sidebar to display additional content or details.
* Provides a secondary panel for contextual information, settings, or extended navigation without leaving the current view.
* Manages expanded/collapsed state with corresponding CSS classes for animation and positioning.
* Prevents event propagation from drawer content to avoid unintended sidebar interactions.
*
* @usageNotes
* ```html
*
*
*
*
*
*
*
*
*
*
*
*
* ```
*
* ### Accessibility
* - Content projection allows flexible accessible structure
* - Links within footer are keyboard accessible
* - Use semantic HTML elements (nav, p) for proper structure
* - Ensure sufficient color contrast in both themes
*
* ### Notes
* - Can be used standalone or within eui-app-footer
* - euiPrimary applies primary brand styling (default: false)
* - Content is projected via ng-content for complete flexibility
* - Common content includes copyright, legal links, version info, contact
* - Can contain navigation links, text, or custom elements
* - Styling adapts to primary or default theme variant
* - Independent component, not tied to application shell layout
*/
declare class EuiFooterComponent {
get cssClasses(): string;
/**
* Applies primary theme styling to the footer.
* When true, uses primary brand colors and emphasis. When false, uses default neutral styling.
* @default false
*/
euiPrimary: boolean;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
static ngAcceptInputType_euiPrimary: unknown;
}
/**
* @description
* Container component for right-aligned content within eui-header, typically containing user profile, notifications, or action buttons.
* Automatically positioned to the right side of the header with appropriate spacing and alignment.
* Detected by parent EuiHeaderComponent via content projection to ensure proper layout structure.
* Content is projected via ng-content allowing flexible composition of header actions and utilities.
*
* @usageNotes
* ```html
*
*
*
*
*
*
*
*
*
*
*
* ```
*
* ### Accessibility
* - Right-aligned positioning provides consistent layout
* - Content should follow proper semantic structure
* - Interactive elements must be keyboard accessible
* - Maintains visual hierarchy in header
*
* ### Notes
* - Must be used within eui-header for proper layout
* - Positioned at the end of the header (rightmost)
* - Content projected via ng-content
* - Typically contains buttons, icons, or user profile
* - Alternative to eui-header-user-profile for custom content
* - Automatically detected by parent EuiHeaderComponent
* - Provides flexible container for header actions
* - Common use: custom action buttons or utility controls
*/
declare class EuiHeaderRightContentComponent {
cssClass: string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Standalone header component for displaying page-level or section-level headers with branding and navigation.
* Provides a flexible container with support for left and right content areas through content projection.
* Unlike eui-app-header which is part of the application shell, this component can be used independently within page layouts.
* Automatically detects and positions EuiHeaderRightContentComponent when projected for consistent right-aligned content placement.
*
* @usageNotes
* ```html
*
*
*
*
*
* DEV
*
*
*
*
*
*
*
*
*
Page Title
*
*
*
*
* ```
*
* ### Accessibility
* - Provides semantic header structure
* - Content should follow proper heading hierarchy
* - Interactive elements must be keyboard accessible
* - Maintains consistent navigation patterns
*
* ### Notes
* - Can be used within eui-app-header or standalone
* - Content projected via ng-content
* - Automatically detects eui-header-right-content for alignment
* - Supports all eui-header-* child components
* - Common children: eui-header-logo, eui-header-environment, eui-header-app
* - eui-header-user-profile typically positioned at the end
* - Flexible layout adapts to projected content
* - Use within eui-app-header for application shell integration
* - Use standalone for page-level or section headers
*/
declare class EuiHeaderComponent {
string: string;
rightContent: EuiHeaderRightContentComponent;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Custom application name component for use within eui-header-app, allowing HTML content projection for application title.
* Automatically extracts projected text content and synchronizes it with EuiAppShellService state for global access.
* Provides an alternative to the appName input property when rich HTML formatting or custom elements are needed.
* Content is projected via ng-content allowing flexible name composition with links, icons, or formatted text.
*
* @usageNotes
* ```html
*
*
*
*
*
* MyWorkplace
* Dashboard
*
*
*
*
* ```
*
* ### Accessibility
* - Text content is readable by screen readers
* - Provides application identification context
* - HTML formatting preserved for visual emphasis
* - Text content extracted for global state access
*
* ### Notes
* - Must be used within eui-header-app for proper layout
* - Automatically syncs text content with EuiAppShellService
* - Alternative to appName input property on eui-header-app
* - Allows rich HTML formatting (bold, links, icons)
* - Content is projected via ng-content for flexibility
* - Text content extracted and stored in application state
* - Typically paired with eui-header-app-subtitle
*/
declare class EuiHeaderAppNameComponent implements OnInit {
string: string;
protected asService: EuiAppShellService;
private elRef;
ngOnInit(): void;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Custom subtitle component for use within eui-header-app, allowing HTML content projection for application subtitle.
* Automatically extracts projected content and synchronizes it with EuiAppShellService state for global access.
* Provides an alternative to the appSubTitle input property when rich HTML formatting or custom elements are needed.
* Content is projected via ng-content allowing flexible subtitle composition with links, icons, or formatted text.
*
* @usageNotes
* ```html
*
*
*
*
*
* MyWorkplace
* Dashboard
*
*
*
*
* ```
*
* ### Accessibility
* - Text content is readable by screen readers
* - Provides contextual information about current view
* - HTML formatting preserved for visual emphasis
* - Content extracted for global state access
*
* ### Notes
* - Must be used within eui-header-app for proper layout
* - Automatically syncs HTML content with EuiAppShellService
* - Alternative to appSubTitle input property on eui-header-app
* - Allows rich HTML formatting (links, icons, emphasis)
* - Content is projected via ng-content for flexibility
* - HTML content extracted and stored in application state
* - Typically paired with eui-header-app-name
* - Displays below application name in header
*/
declare class EuiHeaderAppSubtitleComponent implements OnInit {
string: string;
protected asService: EuiAppShellService;
private elRef;
ngOnInit(): void;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Logo component for use within eui-header-app, displaying a small icon or logo next to the application name.
* Provides visual branding alongside the application title with automatic asset path resolution.
* Integrates with EuiConfig to resolve asset base URL, supporting custom asset locations.
* Typically used for application-specific icons or small logos that complement the main application name.
*/
declare class EuiHeaderAppNameLogoComponent implements OnInit {
cssClass: string;
/**
* URL or route path for the home page navigation when logo is clicked.
* Currently not implemented in template but reserved for future clickable logo functionality.
* @default '..'
*/
homeUrl: string;
/**
* Filename of the logo image located in the assets directory.
* Combined with assetsBaseUrl to construct the full image path.
* Should include file extension (e.g., 'my-app-logo.svg').
* Required for logo display.
*/
logoFilename: string;
private assetsBaseUrl;
private config;
ngOnInit(): void;
get svgUrl(): string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Application name and subtitle component for header placement, displaying the application title and descriptive text.
* Provides centralized management of application identity with synchronization to EuiAppShellService for global access.
* Supports full application name, shortened name for responsive layouts, and optional subtitle for context.
* Allows custom content projection via child components (EuiHeaderAppNameComponent, EuiHeaderAppSubtitleComponent, EuiHeaderAppNameLogoComponent).
* Automatically updates application shell state when input values change, enabling reactive UI updates across the application.
*
* @usageNotes
* ```html
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
* MyWorkplace
* Dashboard
*
*
*
*
* ```
*
* ### Accessibility
* - Application name provides primary identification context
* - Subtitle offers additional contextual information
* - Text content is readable by screen readers
* - Content projection allows semantic HTML structure
*
* ### Notes
* - Must be used within eui-header for proper layout
* - Two usage modes: input properties or content projection
* - appName is the full application name (required)
* - appShortName displays in responsive/compact layouts (defaults to appName)
* - appSubTitle provides contextual information below name
* - Content projection via eui-header-app-name and eui-header-app-subtitle
* - Automatically syncs with EuiAppShellService state
* - State changes propagate to all subscribed components
* - Positioned in header between logo/environment and user profile
* - Responsive behavior switches between full and short names
*/
declare class EuiHeaderAppComponent implements OnInit, OnChanges, OnDestroy {
cssClass: string;
/**
* Full application name displayed in the header.
* Used as the primary application identifier and fallback for appShortName when not provided.
* Synchronized with EuiAppShellService state for global access.
* @default empty string
*/
appName: string;
/**
* Shortened version of the application name for responsive or compact layouts.
* When empty, automatically falls back to appName value.
* Useful for displaying abbreviated names in mobile or collapsed header states.
* @default empty string
*/
appShortName: string;
/**
* Subtitle or descriptive text displayed below the application name.
* Provides additional context about the application, current section, or user role.
* Synchronized with EuiAppShellService state for global access.
* @default empty string
*/
appSubTitle: string;
customAppName: EuiHeaderAppNameComponent;
customAppSubtitle: EuiHeaderAppSubtitleComponent;
customAppNameLogo: EuiHeaderAppNameLogoComponent;
protected asService: EuiAppShellService;
private subscriptions;
ngOnInit(): void;
ngOnDestroy(): void;
ngOnChanges(changes: SimpleChanges): void;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Environment indicator component for header placement, displaying the current application environment (dev, test, production, etc.).
* Provides visual distinction between different deployment environments to prevent user confusion and accidental actions.
* Automatically registers with EuiAppShellService to share environment information across the application.
* Content is projected via ng-content allowing custom environment labels and styling.
* Typically displays text like "Development", "Testing", "Staging" with distinct background colors.
*
* @usageNotes
* ```html
*
*
*
*
* DEV
*
*
*
*
* ```
*
* ### Accessibility
* - Environment text is readable by screen readers
* - Provides critical context about deployment environment
* - Visual distinction helps prevent accidental actions in production
* - Text content should be concise and clear
*
* ### Notes
* - Must be used within eui-header for proper layout
* - Positioned between logo and application name
* - Content projected via ng-content (text or HTML)
* - Automatically syncs with EuiAppShellService state
* - Environment value extracted from innerHTML on init
* - Common values: "DEV", "TEST", "ACC", "PROD"
* - Styling typically uses distinct background colors per environment
* - Component registers/unregisters with app shell on init/destroy
*/
declare class EuiHeaderEnvironmentComponent implements OnInit, OnDestroy {
cssClass: string;
protected asService: EuiAppShellService;
private elRef;
ngOnInit(): void;
ngOnDestroy(): void;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Logo component for header placement, displaying organization branding with automatic theme and language adaptation.
* Provides clickable logo linking to home page with support for custom or default European Commission logos.
* Automatically switches between light and dark logo variants based on active theme.
* Integrates with EuiAppShellService to register logo presence and with translation service for language-specific logos.
* Supports custom logo URLs or defaults to ECL (Europa Component Library) logo assets.
*
* @usageNotes
* ```html
*
*
*
*
*
* DEV
*
*
*
*
*
*
*
*
* ```
*
* ### Accessibility
* - Logo is clickable and navigates to home page
* - Provides visual branding and orientation
* - Alt text provided via translation service
* - Keyboard accessible via RouterLink
* - Focus visible for keyboard navigation
*
* ### Notes
* - Must be used within eui-header for proper layout
* - Positioned at the start of the header (leftmost)
* - Automatically adapts to active theme (light/dark)
* - Language-specific logos loaded based on active language
* - Default logos from ECL assets (logo-ec--en, logo-ec--fr, etc.)
* - Custom logoUrl overrides default ECL logos for both themes
* - homeUrl defaults to '..' for parent route navigation
* - Logo dimensions customizable via logoHeight and logoWidth
* - Registers/unregisters with EuiAppShellService on init/destroy
* - SVG format recommended for scalability
*/
declare class EuiHeaderLogoComponent implements OnInit, OnDestroy {
cssClass: string;
/**
* URL or route path for the home page navigation when logo is clicked.
* Supports both relative and absolute paths for Angular routing.
* @default '..'
*/
homeUrl: string;
/**
* Custom URL path to a logo image file.
* When provided, overrides the default ECL logo and uses the specified image for both light and dark themes.
* Optional - defaults to language-specific ECL logos when not provided.
*/
logoUrl: string;
/**
* CSS height value for the logo image.
* Accepts any valid CSS height unit (px, rem, %, etc.).
* @default '64px'
*/
logoHeight: string;
/**
* CSS width value for the logo image.
* Accepts any valid CSS width unit (px, rem, %, etc.).
* @default '260px'
*/
logoWidth: string;
protected asService: EuiAppShellService;
protected euiThemeService: EuiThemeService;
protected logoStyle: any;
private logo;
private assetsBaseUrl;
private config;
ngOnInit(): void;
get svgUrl(): string;
get svgUrlDark(): string;
ngOnDestroy(): void;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* User profile component designed for header placement, displaying user information with optional dropdown menu.
* Provides visual representation of the logged-in user with avatar, name, welcome message, and impersonation indicators.
* Integrates with EuiUserProfileComponent and EuiUserProfileMenuComponent for dropdown menu functionality.
* Supports customization of avatar display, user information visibility, and welcome message text.
*
* @usageNotes
* ```html
*
*
*
*
*
*
*
*
* My Profile
*
*
* Sign Out
*
*
*
*
*
*
* ```
*
* ### Accessibility
* - Avatar provides visual user identification
* - Dropdown menu keyboard accessible when hasTabNavigation enabled
* - Welcome message readable by screen readers
* - Menu items must be keyboard navigable
* - Focus management for dropdown interactions
* - Impersonation status clearly indicated
*
* ### Notes
* - Must be used within eui-header for proper layout
* - Positioned at the end of the header (rightmost)
* - Wraps EuiUserProfileComponent with header-specific styling
* - Menu content via eui-user-profile-menu child component
* - isShowUserInfos controls text visibility (default: true)
* - hasWelcomeLabel controls welcome message (default: true)
* - isShowAvatarInitials shows user initials when no avatar (default: false)
* - hasTabNavigation enables keyboard focus (default: false)
* - avatarUrl for custom avatar image
* - subInfos for additional user details (role, department)
* - impersonateLabel for impersonation scenarios
* - closeUserProfileDropdown() method to programmatically close menu
* - Automatically detects menu content via ContentChildren
*/
declare class EuiHeaderUserProfileComponent implements AfterContentInit {
cssClass: string;
hasMenuContent: QueryList;
userProfile: EuiUserProfileComponent;
/**
* Controls visibility of user information text (name, email, etc.).
* When false, hides textual user details and shows only the avatar.
* @default true
*/
isShowUserInfos: boolean;
/**
* Controls visibility of the welcome label text.
* When false, hides the welcome message prefix and shows only the username.
* @default true
*/
hasWelcomeLabel: boolean;
/**
* Displays user initials in the avatar when no avatar image is provided.
* When true, shows first letters of user's name as avatar placeholder.
* @default false
*/
isShowAvatarInitials: boolean;
/**
* Enables keyboard tab navigation to the user profile component.
* When true, makes the profile element focusable and accessible via keyboard.
* @default false
*/
hasTabNavigation: boolean;
/**
* Text label displayed before the username in the welcome message.
* Typically used for greeting text like "Welcome" or "Hello".
* @default 'Welcome'
*/
welcomeLabel: string;
/**
* Text label displayed when user is impersonating another user.
* Shows between the actual user and impersonated user names, typically "acting as".
* @default 'acting as'
*/
impersonateLabel: string;
/**
* URL path to the user's avatar image.
* When provided, displays the image instead of initials or default avatar.
* Optional.
*/
avatarUrl: string;
/**
* Additional user information text displayed below the main user name.
* Typically used for role, department, or secondary identification.
* Optional.
*/
subInfos: string;
protected hasMenu: boolean;
/**
* Programmatically closes the user profile dropdown menu if currently open.
* Must be called after ngAfterViewInit lifecycle hook to ensure userProfile component is initialized.
* Useful for closing the menu in response to external events or navigation changes.
*/
closeUserProfileDropdown(): void;
ngAfterContentInit(): void;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
static ngAcceptInputType_isShowUserInfos: unknown;
static ngAcceptInputType_hasWelcomeLabel: unknown;
static ngAcceptInputType_isShowAvatarInitials: unknown;
static ngAcceptInputType_hasTabNavigation: unknown;
}
/**
* @description
* Search input component designed for header placement, providing a compact search interface with submit button.
* Combines text input with search icon button for initiating search operations from the application header.
* Emits search events with the current input value when user clicks the search button or submits the form.
* Integrates with EUI input and button components for consistent styling and behavior.
*
* @usageNotes
* ```html
*
*
*
*
*
*
*
*
*
* ```
* ```typescript
* onSearch(searchTerm: string): void {
* console.log('Searching for:', searchTerm);
* }
* ```
*
* ### Accessibility
* - Search input is keyboard accessible
* - Placeholder provides context for screen readers
* - Submit button accessible via keyboard (Enter key)
* - Focus management follows standard input behavior
* - Search icon provides visual affordance
*
* ### Notes
* - Must be used within eui-header for proper layout
* - Positioned in header content area
* - Combines input field with search button
* - searchClick event emits current input value
* - Triggered by button click or form submission
* - placeholder defaults to 'Search'
* - Input value managed internally via FormsModule
* - Integrates EUI input-text and button components
* - Compact design suitable for header placement
*/
declare class EuiHeaderSearchComponent {
cssClass: string;
/**
* Placeholder text displayed in the search input field when empty.
* Provides hint text to guide users on what they can search for.
* @default 'Search'
*/
placeholder: string;
/**
* Emitted when the user initiates a search by clicking the search button or submitting the form.
* Payload: string - the current value of the search input field
* Triggered on search button click or form submission.
*/
searchClick: EventEmitter;
protected inputValue: string;
onSearch(): void;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* Metadata interface for notification items containing read status, URLs, importance flags, and timestamp.
* Used to extend UxLinkLegacy with notification-specific properties for state management and display logic.
*/
interface NotificationMetadata {
read?: boolean;
urlExternal?: string;
urlExternalTarget?: string;
important?: boolean;
new?: boolean;
url?: string;
date?: Date | string | number;
}
/**
* @description
* Individual notification item component displaying a single notification with read/unread status and actions.
* Renders notification content with icon, label, date, and optional mark as read button.
* Supports internal and external links with visual indicators for unread and important notifications.
* Emits events for item clicks and mark as read actions to parent notification panel.
*
* @usageNotes
* ```html
*
*
*
* ```
* ```typescript
* notificationItem: UxLinkLegacy = {
* id: '1',
* label: 'New message received',
* metadata: {
* read: false,
* date: new Date(),
* important: true
* }
* };
* ```
*
* ### Accessibility
* - Entire item is clickable and keyboard accessible
* - Visual indicators for read/unread status
* - Mark as read button keyboard accessible
* - Icon color changes based on read status
* - Date displayed in accessible format
* - Supports screen reader announcements
*
* ### Notes
* - Typically used internally by eui-notifications component
* - Not intended for standalone usage
* - Item data uses UxLinkLegacy interface
* - Metadata properties: read, date, important, new, url, urlExternal
* - Visual distinction for unread items (darker icon)
* - dateFormat for timestamp display (default: 'dd/MM/yyyy')
* - Mark as read button optional via isShowMarkAsRead
* - Clicking mark as read automatically sets metadata.read to true
* - itemClick emitted on item click
* - itemMarkAsRead emitted on mark as read action
* - Icon color: 'secondary' for unread, 'secondary-light' for read
* - Supports internal and external links via metadata.url/urlExternal
* - Label truncation with tooltip for long text
*/
declare class EuiNotificationItemComponent {
string: string;
/**
* Emitted when the notification item is clicked.
* Payload: UxLinkLegacy - the clicked notification item with metadata
* Triggered when user clicks anywhere on the notification item.
*/
itemClick: EventEmitter>;
/**
* Emitted when the mark as read button is clicked.
* Payload: UxLinkLegacy - the notification item marked as read
* Triggered when user clicks the mark as read action button. Automatically sets item.metadata.read to true.
*/
itemMarkAsRead: EventEmitter>;
/**
* Custom label text for the mark as read button.
* When null, uses default translation key.
* Optional.
*/
markAsReadLabel: string;
/**
* Notification item data containing label, metadata, and link information.
* Must conform to UxLinkLegacy interface with id, label, and metadata properties.
* Required for notification display.
*/
item: UxLinkLegacy;
/**
* Date format string for displaying the notification timestamp.
* Accepts any valid Angular DatePipe format pattern.
* @default 'dd/MM/yyyy'
*/
dateFormat: string;
/**
* Shows the mark as read action button on the notification item.
* When false, hides the mark as read functionality.
* @default true
*/
isShowMarkAsRead: boolean;
tooltipSize: string;
onItemClick(): void;
onItemMarkAsRead(event: Event): void;
get iconColor(): string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
static ngAcceptInputType_isShowMarkAsRead: unknown;
}
/**
* @description
* Notifications panel component that displays a dropdown list of user notifications with badge counter.
* Provides a comprehensive notification center with filtering, marking as read/unread, and action buttons.
* Supports customizable labels, date formatting, and unread count display with badge indicator.
* Integrates with overlay component for dropdown panel behavior and manages notification state.
* Emits events for all user interactions including item clicks, refresh, settings, and mark as read actions.
*
* @usageNotes
* ```html
*
*
*
*
*
*
*
*
*
*
*
*
* ```
* ```typescript
* notificationItems = [
* { id: '1', label: 'New message', metadata: { read: false, date: new Date() } },
* { id: '2', label: 'Task completed', metadata: { read: true, date: new Date() } }
* ];
* ```
*
* ### Accessibility
* - Bell icon button keyboard accessible
* - Badge displays notification count for screen readers
* - Dropdown panel keyboard navigable
* - Each notification item is focusable
* - ARIA labels for notification count
* - Mark as read actions keyboard accessible
*
* ### Notes
* - Typically used within eui-toolbar-item-notifications
* - Positioned in toolbar right section
* - Badge shows count or unread count
* - Dropdown panel with overlay behavior
* - Items array uses UxLinkLegacy interface
* - Metadata includes read status and date
* - Automatic unread count calculation when customUnreadCount is false
* - All labels customizable or use default translations
* - dateFormat for timestamp display (default: 'dd/MM/YYYY')
* - Multiple action buttons: refresh, settings, mark all as read
* - View all button in footer (optional)
* - Empty state when no notifications
* - Panel auto-closes on view all (configurable)
* - Supports grouping by date (today vs older)
*/
declare class EuiNotificationsComponent implements OnInit, OnChanges {
/**
* Emitted when the refresh button is clicked to reload notifications.
* Payload: void
* Triggered when user clicks the refresh button in the notifications panel header.
*/
refreshClick: EventEmitter;
/**
* Emitted when the notifications bell icon is clicked to toggle the panel.
* Payload: void
* Triggered when user clicks the main notifications button to open/close the dropdown.
*/
notificationsClick: EventEmitter;
/**
* Emitted when the "View All" button is clicked.
* Payload: void
* Triggered when user clicks the view all notifications action button.
*/
viewAllClick: EventEmitter;
/**
* Emitted when the settings button is clicked.
* Payload: MouseEvent - the click event
* Triggered when user clicks the settings button in the notifications panel header.
*/
settingsClick: EventEmitter;
/**
* Emitted when the "Mark All as Read" button is clicked.
* Payload: MouseEvent - the click event
* Triggered when user clicks the mark all as read button in the panel header.
*/
markAllAsReadClick: EventEmitter;
/**
* Emitted when the "No notifications found" link is clicked.
* Payload: void
* Triggered when user clicks the no notifications message (when noNotificationFoundLink is true).
*/
noNotificationFoundClick: EventEmitter;
/**
* Emitted when a notification item is clicked.
* Payload: UxLinkLegacy - the clicked notification item
* Triggered when user clicks on any notification item in the list.
*/
itemClick: EventEmitter>;
/**
* Emitted when the mark as read button on a notification item is clicked.
* Payload: UxLinkLegacy - the notification item to mark as read
* Triggered when user clicks the mark as read action on an individual notification.
*/
itemMarkAsReadClick: EventEmitter>;
isOverlayActive: boolean;
currentDayNotifications: any[];
oldestNotifications: any[];
unreadNotifications: any[];
today: Date;
string: string;
/**
* Total count of notifications displayed in the badge.
* When null, badge shows unread count instead. When provided, overrides automatic counting.
* Optional.
*/
count: number;
/**
* Array of notification items to display in the panel.
* Each item should conform to UxLinkLegacy interface with id, label, and metadata properties.
* @default empty array
*/
items: any[];
/**
* Custom label text for "unread" status indicator.
* When null, uses default translation key.
* Optional.
*/
unreadLabel: string;
/**
* Custom label text for "total" count display.
* When null, uses default translation key.
* Optional.
*/
totalLabel: string;
/**
* Custom label text for "mark as read" action.
* When null, uses default translation key.
* Optional.
*/
markAsReadLabel: string;
/**
* Custom label text for "mark as unread" action.
* When null, uses default translation key.
* Optional.
*/
markAsUnReadLabel: string;
/**
* Custom label text for "mark all as read" button.
* When null, uses default translation key.
* Optional.
*/
markAllAsReadLabel: string;
/**
* Custom label text for settings button.
* When null, uses default translation key.
* Optional.
*/
settingsLabel: string;
/**
* Custom label text for refresh button.
* When null, uses default translation key.
* Optional.
*/
refreshLabel: string;
/**
* Custom label text for "view all notifications" button.
* When null, uses default translation key.
* Optional.
*/
viewAllNotificationsLabel: string;
/**
* Custom label text for panel header title.
* When null, uses default translation key.
* Optional.
*/
headerTitleLabel: string;
/**
* Custom label text for empty state message when no notifications exist.
* When null, uses default translation key.
* Optional.
*/
noNotificationFoundLabel: string;
/**
* Number of unread notifications to display in the badge.
* When null and customUnreadCount is false, automatically calculated from items array.
* Optional.
*/
nbUnreadCount: number;
/**
* Date format string for displaying notification timestamps.
* Accepts any valid date format pattern.
* @default 'dd/MM/yyyy'
*/
dateFormat: string;
/**
* Makes the "no notifications found" message clickable as a link.
* When true, emits noNotificationFoundClick event on click.
* @default false
*/
noNotificationFoundLink: boolean;
/**
* Shows the mark as read action button on individual notification items.
* When false, hides the mark as read functionality from notification items.
* @default true
*/
isShowMarkAsRead: boolean;
/**
* Shows the "View All" action button in the panel footer.
* When false, hides the view all notifications button.
* @default true
*/
isShowViewAllAction: boolean;
/**
* Automatically closes the notifications panel when "View All" is clicked.
* When false, panel remains open after clicking view all.
* @default true
*/
isHidePanelOnViewAllAction: boolean;
/**
* Uses custom unread count from nbUnreadCount input instead of automatic calculation.
* When true, disables automatic counting of unread notifications from items array.
* @default false
*/
customUnreadCount: boolean;
/**
* Shows the "Mark All as Read" button in the panel header.
* When false, hides the mark all as read functionality.
* @default true
*/
isShowMarkAllAsReadButton: boolean;
/**
* Shows the settings button in the panel header.
* When false, hides the settings button.
* @default true
*/
isShowSettingsButton: boolean;
/**
* Shows the refresh button in the panel header.
* When false, hides the refresh button.
* @default true
*/
isShowRefreshButton: boolean;
onClicked(event: MouseEvent | Event): void;
ngOnChanges(changes: SimpleChanges): void;
ngOnInit(): void;
onRefresh(event: Event): void;
onItemClick(link: UxLinkLegacy$1): void;
/** @internal */
onViewAllClick(event: Event): void;
onNoNotificationFoundClick(): void;
onItemMarkAsRead(link: UxLinkLegacy$1): void;
onMarkAllAsRead(e: MouseEvent): void;
onSettings(e: MouseEvent): void;
protected trackByFn(index: number, item: UxLinkLegacy$1): string;
protected updateActiveState(isActive: boolean): void;
protected getAriaLabel(): string;
private _getUnreadCount;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
static ngAcceptInputType_noNotificationFoundLink: unknown;
static ngAcceptInputType_isShowMarkAsRead: unknown;
static ngAcceptInputType_isShowViewAllAction: unknown;
static ngAcceptInputType_isHidePanelOnViewAllAction: unknown;
static ngAcceptInputType_customUnreadCount: unknown;
static ngAcceptInputType_isShowMarkAllAsReadButton: unknown;
static ngAcceptInputType_isShowSettingsButton: unknown;
static ngAcceptInputType_isShowRefreshButton: unknown;
}
/**
* @description
* Enhanced individual notification item component (v2) displaying a single notification with read/unread status and actions.
* Renders notification content with icon, label, date, and optional mark as read button.
* Supports internal and external links with visual indicators for unread and important notifications.
* Emits events for item clicks and mark as read actions to parent notification panel.
* Improved version with enhanced styling and behavior compared to EuiNotificationItemComponent.
*/
declare class EuiNotificationItemV2Component {
string: string;
/**
* Emitted when the notification item is clicked.
* Payload: UxLinkLegacy - the clicked notification item with metadata
* Triggered when user clicks anywhere on the notification item.
*/
itemClick: EventEmitter;
/**
* Emitted when the mark as read button is clicked.
* Payload: UxLinkLegacy - the notification item marked as read
* Triggered when user clicks the mark as read action button. Automatically sets item.metadata.read to true.
*/
itemMarkAsRead: EventEmitter;
/**
* Custom label text for the mark as read button.
* When null, uses default translation key.
* Optional.
*/
markAsReadLabel: string;
/**
* Notification item data containing label, metadata, and link information.
* Must conform to UxLinkLegacy interface with id, label, and metadata properties.
* Required for notification display.
*/
item: UxLinkLegacy;
/**
* Date format string for displaying the notification timestamp.
* Accepts any valid Angular DatePipe format pattern.
* @default 'dd/MM/yyyy'
*/
dateFormat: string;
/**
* Shows the mark as read action button on the notification item.
* When false, hides the mark as read functionality.
* @default true
*/
isShowMarkAsRead: boolean;
tooltipSize: string;
get iconColor(): string;
onItemClick(): void;
onItemMarkAsRead(event: Event): void;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
static ngAcceptInputType_isShowMarkAsRead: unknown;
}
/**
* @description
* Enhanced notifications panel component (v2) displaying a dropdown list of user notifications with advanced badge indicators.
* Provides comprehensive notification center with unread count, new notifications since last check, and action buttons.
* Supports customizable labels, date formatting, and multiple count displays with badge indicators.
* Integrates with overlay component for dropdown panel behavior and manages notification state.
* Emits events for all user interactions including item clicks, refresh, and mark as read actions.
* Improved version with additional features compared to EuiNotificationsComponent.
*/
declare class EuiNotificationsV2Component {
/**
* Emitted when the refresh button is clicked to reload notifications.
* Payload: Event - the click event
* Triggered when user clicks the refresh button in the notifications panel header.
*/
refreshClick: EventEmitter;
/**
* Emitted when the notifications bell icon is clicked to toggle the panel.
* Payload: KeyboardEvent | MouseEvent - the interaction event
* Triggered when user clicks or uses keyboard to open/close the dropdown.
*/
notificationsClick: EventEmitter;
/**
* Emitted when the "View All" button is clicked.
* Payload: Event - the click event
* Triggered when user clicks the view all notifications action button.
*/
viewAllClick: EventEmitter;
/**
* Emitted when the "Mark All as Read" button is clicked.
* Payload: MouseEvent - the click event
* Triggered when user clicks the mark all as read button in the panel header.
*/
markAllAsReadClick: EventEmitter;
/**
* Emitted when the "No notifications found" link is clicked.
* Payload: void
* Triggered when user clicks the no notifications message (when noNotificationFoundLink is true).
*/
noNotificationFoundClick: EventEmitter;
/**
* Emitted when a notification item is clicked.
* Payload: UxLinkLegacy - the clicked notification item
* Triggered when user clicks on any notification item in the list.
*/
itemClick: EventEmitter;
/**
* Emitted when the mark as read button on a notification item is clicked.
* Payload: UxLinkLegacy - the notification item to mark as read
* Triggered when user clicks the mark as read action on an individual notification.
*/
itemMarkAsReadClick: EventEmitter;
isOverlayActive: boolean;
currentDayNotifications: any[];
oldestNotifications: any[];
unreadNotifications: any[];
today: Date;
string: string;
/**
* Total count of notifications displayed in the badge.
* When null, badge shows unread count instead.
* Optional.
*/
count: number;
/**
* Number of unread notifications to display.
* Used for badge display and header information.
* Optional.
*/
unreadCount: number;
/**
* Number of new unread notifications since user last checked the panel.
* Displays as a secondary indicator to highlight new activity.
* Optional.
*/
unreadSinceLastCheckCount: number;
/**
* Array of notification items to display in the panel.
* Each item should conform to UxLinkLegacy interface with id, label, and metadata properties.
* @default empty array
*/
items: any[];
/**
* Custom label text for "unread" status indicator.
* When null, uses default translation key.
* Optional.
*/
unreadLabel: string;
/**
* Custom label text for "total" count display.
* When null, uses default translation key.
* Optional.
*/
totalLabel: string;
/**
* Custom label text for "mark as read" action.
* When null, uses default translation key.
* Optional.
*/
markAsReadLabel: string;
/**
* Custom label text for "mark as unread" action.
* When null, uses default translation key.
* Optional.
*/
markAsUnReadLabel: string;
/**
* Custom label text for "mark all as read" button.
* When null, uses default translation key.
* Optional.
*/
markAllAsReadLabel: string;
/**
* Custom label text for settings button.
* When null, uses default translation key.
* Optional.
*/
settingsLabel: string;
/**
* Custom label text for refresh button.
* When null, uses default translation key.
* Optional.
*/
refreshLabel: string;
/**
* Custom label text for "view all notifications" button.
* When null, uses default translation key.
* Optional.
*/
viewAllNotificationsLabel: string;
/**
* Custom label text for panel header title.
* When null, uses default translation key.
* Optional.
*/
headerTitleLabel: string;
/**
* Custom label text for hide/close button in header.
* When null, uses default translation key.
* Optional.
*/
headerHideLabel: string;
/**
* Custom label text for displaying unread count since last check in header.
* When null, uses default translation key.
* Optional.
*/
headerUnreadSinceLastCheckCountLabel: string;
/**
* Custom label text for displaying total unread count in header.
* When null, uses default translation key.
* Optional.
*/
headerUnreadCountLabel: string;
/**
* Custom label text for empty state message when no notifications exist.
* When null, uses default translation key.
* Optional.
*/
noNotificationFoundLabel: string;
/**
* Date format string for displaying notification timestamps.
* Accepts any valid Angular DatePipe format pattern.
* @default 'dd/MM/yyyy'
*/
dateFormat: string;
/**
* Makes the "no notifications found" message clickable as a link.
* When true, emits noNotificationFoundClick event on click.
* @default false
*/
noNotificationFoundLink: boolean;
/**
* Shows the mark as read action button on individual notification items.
* When false, hides the mark as read functionality from notification items.
* @default true
*/
isShowMarkAsRead: boolean;
/**
* Shows the "View All" action button in the panel footer.
* When false, hides the view all notifications button.
* @default true
*/
isShowViewAllAction: boolean;
/**
* Automatically closes the notifications panel when "View All" is clicked.
* When false, panel remains open after clicking view all.
* @default true
*/
isHidePanelOnViewAllAction: boolean;
/**
* Shows the "Mark All as Read" button in the panel header.
* When false, hides the mark all as read functionality.
* @default true
*/
isShowMarkAllAsReadButton: boolean;
/**
* Shows the settings button in the panel header.
* When false, hides the settings button.
* @default true
*/
isShowSettingsButton: boolean;
/**
* Shows the refresh button in the panel header.
* When false, hides the refresh button.
* @default true
*/
isShowRefreshButton: boolean;
get isShowUnreadSinceLastCheckCount(): boolean;
onHide(): void;
onClicked(event: Event): void;
onRefresh(event: Event): void;
onItemClick(link: UxLinkLegacy): void;
onViewAllClick(event: Event): void;
onNoNotificationFoundClick(): void;
onItemMarkAsRead(link: UxLinkLegacy): void;
onMarkAllAsRead(e: MouseEvent): void;
trackByFn(index: number, item: any): void;
protected updateActiveState(isActive: boolean): void;
protected getAriaLabel(): string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
static ngAcceptInputType_noNotificationFoundLink: unknown;
static ngAcceptInputType_isShowMarkAsRead: unknown;
static ngAcceptInputType_isShowViewAllAction: unknown;
static ngAcceptInputType_isHidePanelOnViewAllAction: unknown;
static ngAcceptInputType_isShowMarkAllAsReadButton: unknown;
static ngAcceptInputType_isShowSettingsButton: unknown;
static ngAcceptInputType_isShowRefreshButton: unknown;
}
/**
* @description
* Toggle button component for controlling sidebar open/closed state in the application shell.
* Provides a hamburger menu icon button that expands or collapses the application sidebar.
* Integrates with EuiAppShellService to manage sidebar state and handle responsive behavior.
* Automatically manages focus on mobile and tablet devices, directing focus to sidebar when opened.
* Typically placed in application header or toolbar for consistent sidebar control.
*
* @usageNotes
* ```html
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
* ```
*
* ### Accessibility
* - Hamburger icon button keyboard accessible
* - Toggles sidebar visibility on click/Enter
* - Automatically manages focus on mobile/tablet
* - Focus directed to sidebar when opened on small screens
* - ARIA attributes for toggle state
* - Clear visual affordance for interaction
*
* ### Notes
* - Typically placed in header or toolbar
* - Integrates with EuiAppShellService for state management
* - Toggles sidebar open/closed state
* - Responsive behavior: focus management on mobile/tablet
* - On mobile/tablet, opening sidebar sets isSidebarFocused to true
* - Focus automatically moves to first focusable element in sidebar
* - iconSvgFillColor for custom icon color
* - e2eAttr for test automation (default: 'eui-sidebar-toggle')
* - Hamburger icon standard for sidebar toggle
* - Works with eui-app-sidebar component
* - State synchronized across application via EuiAppShellService
*/
declare class EuiSidebarToggleComponent {
/**
* Data attribute value for end-to-end testing identification.
* Applied as data-e2e attribute on the host element for test automation.
* @default 'eui-sidebar-toggle'
*/
e2eAttr: string;
name: string;
/**
* Custom fill color for the toggle icon SVG.
* Accepts any valid CSS color value to override default icon color.
* Optional.
*/
iconSvgFillColor: any;
asService: EuiAppShellService;
onToggleSidebar(event: Event): void;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Container component for rendering the mega menu dropdown content with multi-column layout.
* Displays grouped menu items organized by parent, column index, and column label in a structured grid.
* Handles menu item clicks and executes associated command functions.
* Used internally by EuiToolbarMegaMenuComponent to render the dropdown panel content.
* Supports router links, badges, and icons on menu items.
*
* @usageNotes
* ```html
*
*
*
* ```
* ```typescript
* // Grouped structure created by parent component
* megaMenuItemsGrouped = {
* 0: {
* '0': { 'Category A': [{ label: 'Item 1', url: '/item1' }] },
* '1': { 'Category B': [{ label: 'Item 2', url: '/item2' }] }
* }
* };
* ```
*
* ### Accessibility
* - Router link integration for navigation
* - Keyboard accessible menu items
* - Semantic structure for menu layout
* - Focus management for dropdown items
* - ARIA attributes inherited from parent
*
* ### Notes
* - Used internally by eui-toolbar-mega-menu
* - Not intended for standalone usage
* - Renders dropdown panel content
* - Multi-column grid layout automatically generated
* - megaMenuItemsGrouped structure: parent → column → label → items
* - activeMenu determines which parent's children to display
* - onItemClick() executes item command functions
* - Supports router links via RouterLink directive
* - Badge and icon support on menu items
* - Column labels used as section headers
* - Grid layout adapts to number of columns
* - Items grouped by megaMenuColIndex and megaMenuColLabel
*/
declare class EuiToolbarMegaMenuContainerComponent {
string: string;
/**
* Grouped menu items organized by parent index, column index, and column label.
* Structure: { [parentIndex]: { [colIndex]: { [colLabel]: Items[] } } }
* Provided by parent EuiToolbarMegaMenuComponent after processing menu items.
* Required for rendering the multi-column dropdown layout.
*/
megaMenuItemsGrouped: {
[parentIndex: number]: {
[colIndex: string]: {
[colLabel: string]: Items[];
};
};
};
/**
* Index of the currently active menu item whose dropdown is displayed.
* Used to determine which parent menu's children to render in the dropdown.
* When null, no dropdown is displayed.
* @default null
*/
activeMenu: number;
submenuItemLinks: QueryList>;
/**
* Provides accessibility labeling for the dropdown menu.
* @default `eUI sub menu`
*/
ariaLabel: string;
/**
* Emits an output event when item is clicked
*/
itemClick: EventEmitter>;
/**
* Handles click events on menu items within the dropdown.
* Executes the item's command function if defined.
* Called internally when user clicks a menu item in the dropdown panel.
*/
onItemClick(item: EuiMenuItem$1): void;
/**
* Focuses the first item in the submenu.
*/
focusFirstItem(): void;
/**
* Handles keyboard navigation for submenu items.
* @param event - The keyboard event from the submenu item.
*/
protected onSubmenuKeydown(event: KeyboardEvent): void;
/**
* Focuses the next item in the list based on the current index
* @param items
* @param currentIndex
*/
private focusNextItem;
/**
* Focuses the previous item in the list based on the current index
* @param items
* @param currentIndex
*/
private focusPreviousItem;
static ɵfac: i0.ɵɵFactoryDeclaration, never>;
static ɵcmp: i0.ɵɵComponentDeclaration, "eui-toolbar-mega-menu-container", never, { "megaMenuItemsGrouped": { "alias": "megaMenuItemsGrouped"; "required": false; }; "activeMenu": { "alias": "activeMenu"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; }, { "itemClick": "itemClick"; }, never, never, true, never>;
}
/**
* @description
* Mega menu component for toolbar providing a multi-column dropdown navigation with grouped menu items.
* Displays a horizontal menu bar with expandable dropdown panels containing organized navigation links.
* Automatically groups child menu items by column index and label for structured multi-column layout.
* Integrates with Angular CDK Overlay for positioning and manages outside click/escape key dismissal.
* Synchronizes menu items with EuiAppShellService state for global access and reactive updates.
* Supports badges, icons, and custom commands on menu items with router link integration.
*
* @usageNotes
* ```html
*
*
*
*
*
*
*
* ```
* ```typescript
* menuItems: EuiMenuItem[] = [
* {
* label: 'Products',
* children: [
* { label: 'Item 1', url: '/products/1', megaMenuColIndex: 0, megaMenuColLabel: 'Category A' },
* { label: 'Item 2', url: '/products/2', megaMenuColIndex: 1, megaMenuColLabel: 'Category B' }
* ]
* }
* ];
* ```
*
* ### Accessibility
* - Navigation role for semantic structure
* - Keyboard accessible (Escape to close)
* - Router link integration for navigation
* - Outside click dismissal
* - Focus management for dropdown
* - ARIA attributes for menu structure
*
* ### Notes
* - Must be used within eui-toolbar for proper layout
* - Positioned at start of toolbar (leftmost)
* - Items array uses EuiMenuItem interface
* - Children grouped by megaMenuColIndex and megaMenuColLabel
* - Multi-column dropdown layout automatically generated
* - CDK Overlay for dropdown positioning
* - Outside click and Escape key close dropdown
* - Synchronizes with EuiAppShellService state
* - Supports badges and icons on menu items
* - Router link integration for navigation
* - Custom command functions on items
* - openMenu() method to programmatically open
* - closeMenu() method to programmatically close
* - onItemClick() executes item commands
* - Overlay disposed on navigation
* - Responsive positioning strategy
*/
declare class EuiToolbarMegaMenuComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges {
string: string;
/**
* Array of menu items to display in the mega menu.
* Each item should conform to EuiMenuItem interface with support for children, megaMenuColIndex, and megaMenuColLabel properties.
* Child items are automatically grouped by column for multi-column dropdown layout.
* Required for menu display.
*/
items: Items[];
/**
* Provides a unique label for the menubar.
* @default `eUI mega menu ${uniqueId()}`
*/
ariaLabel: string;
/**
* Provides a unique id for the menubar
* @default `eui-mega-menu ${uniqueId()}`
*/
id: string;
readonly itemsInput: i0.InputSignal;
protected megaMenuItems: Items[];
protected megaMenuItemsGrouped: {
[parentIndex: number]: {
[colIndex: string]: {
[colLabel: string]: Items[];
};
};
};
protected readonly activeMenu: i0.WritableSignal;
protected active: EuiMenuItem$2;
protected activeParent: EuiMenuItem$2;
templatePortalContent: TemplateRef;
subMenuComponent: EuiToolbarMegaMenuContainerComponent;
menuItemLinks: QueryList>;
private asService;
private subs;
private overlayRef;
private templatePortal;
private overlay;
private viewContainerRef;
private destroy$;
private router;
private route;
ngOnChanges(changes: SimpleChanges): void;
ngOnInit(): void;
ngAfterViewInit(): void;
ngOnDestroy(): void;
toggleMenu(menuIndex: number, e: PointerEvent): void;
/**
* Programmatically opens the mega menu dropdown for a specific menu item.
* Creates overlay with positioning strategy and attaches menu content portal.
* Sets up outside click and escape key listeners for dismissal.
*/
openMenu(menuIndex: number, target: Element | PointerEvent): void;
/**
* Programmatically closes the currently open mega menu dropdown.
* Disposes of the overlay and resets active menu state.
* Can be called externally to close the menu programmatically.
*/
closeMenu(returnFocus?: boolean): void;
/**
* Handles click events on menu items.
* Executes the item's command function if defined.
* Called internally when user clicks a menu item.
*/
onItemClick(item: EuiMenuItem$2): void;
/**
* If the Tab key in the submenu was pressed and null emitted, it captures the host megamenu element,
* closes the menu and focuses the next focusable element after the megamenu. If item is not null calls the closeMenu method.
* @param item - The item that was clicked or null if tab was pressed
*/
onContainerItemClick(item: EuiMenuItem$2): void;
/**
* Applies the keyboard navigation actions for each key pressed
* @param event - The keyboard event from the menue item
*/
protected onMenubarKeydown(event: KeyboardEvent): void;
/**
* Maps the menu item links to html elements
* @returns HTMLElement[]
*/
private getMenuItemElements;
/**
* Focuses the next item based on the current index
* @param items
* @param currentIndex
*/
private focusNextItem;
/**
* Focuses the previous item based on the current index
* @param items
* @param currentIndex
*/
private focusPreviousItem;
/**
* Sets the tabindex value based on the index of the item
* @param items
* @param index
*/
private focusItem;
private groupByColIdPerParent;
private filterMegaMenuItems;
/**
* Return the position strategy for the panel.
*
* @returns A CDK position strategy.
*/
private getPositionStrategy;
/**
* Return the scroll strategy for the panel.
*
* @returns A CDK scroll strategy.
*/
private getScrollStrategy;
private findActiveItemByUrl;
static ɵfac: i0.ɵɵFactoryDeclaration, never>;
static ɵcmp: i0.ɵɵComponentDeclaration, "eui-toolbar-mega-menu", never, { "items": { "alias": "items"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "id": { "alias": "id"; "required": false; }; "itemsInput": { "alias": "itemsInput"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}
/**
* @description
* Toolbar component providing a horizontal container for navigation, branding, and action items.
* Supports primary and secondary visual variants with automatic theme inheritance from parent eui-app-toolbar.
* Integrates with EuiAppShellService for layout coordination and responsive behavior.
* Provides content projection areas for logo, environment indicator, app name, menu items, and user profile.
* Detects and adapts to mega menu presence for enhanced navigation capabilities.
*
* @usageNotes
* ```html
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
* ```
*
* ### Accessibility
* - Provides semantic navigation structure for toolbar items
* - Keyboard navigation supported through child components
* - Focus management handled by individual toolbar items
* - Theme variants maintain sufficient contrast ratios
* - Mega menu integration provides accessible dropdown navigation
*
* ### Notes
* - Must be used within eui-app-toolbar for proper layout integration
* - euiPrimary applies primary brand colors (default: true)
* - euiSecondary applies secondary theme and overrides primary
* - Automatically inherits secondary styling from parent eui-app-toolbar
* - Content projection expects eui-toolbar-mega-menu and eui-toolbar-items children
* - Detects mega menu presence for layout adjustments
* - Integrates with EuiAppShellService for responsive behavior
* - Theme variants are mutually exclusive (secondary overrides primary)
*/
declare class EuiToolbarComponent implements OnInit, AfterViewInit {
get cssClasses(): string;
hasMegaMenu: EuiToolbarMegaMenuComponent;
asService: EuiAppShellService;
/**
* Applies secondary theme styling to the toolbar.
* When true, uses secondary colors and automatically disables primary styling.
* Automatically inherits secondary styling from parent eui-app-toolbar if present.
* @default false
*/
euiSecondary: i0.InputSignalWithTransform;
/**
* Applies primary theme styling to the toolbar.
* When true, uses primary brand colors. Automatically disabled when euiSecondary is true.
* @default true
*/
euiPrimary: i0.InputSignalWithTransform;
private euiSecondarySignal;
private euiPrimarySignal;
private elRef;
ngOnInit(): void;
ngAfterViewInit(): void;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Application name and subtitle component for toolbar placement, displaying the application title and descriptive text.
* Provides a compact representation of application identity suitable for toolbar layouts.
* Displays application name with optional subtitle for additional context or section information.
* Typically used within eui-toolbar for consistent application branding in toolbar-based layouts.
* Simpler alternative to eui-header-app for toolbar-specific use cases.
*
* @usageNotes
* ```html
*
*
*
*
*
*
*
*
* ```
*
* ### Accessibility
* - Application name provides primary identification
* - Subtitle offers additional context
* - Text content readable by screen readers
* - Semantic structure for application branding
*
* ### Notes
* - Must be used within eui-toolbar for proper layout
* - Positioned in toolbar content area
* - Simpler alternative to eui-header-app
* - Designed for toolbar-specific layouts
* - appName for primary application title
* - appSubTitle for additional context (optional)
* - Both inputs are optional
* - Compact design suitable for toolbar height
* - No integration with EuiAppShellService (unlike eui-header-app)
* - Use when toolbar is primary navigation instead of header
*/
declare class EuiToolbarAppComponent {
class: string;
/**
* Application name displayed in the toolbar.
* Provides the primary application identifier for toolbar branding.
* Optional.
*/
appName: string;
/**
* Subtitle or descriptive text displayed below the application name.
* Provides additional context about the application, current section, or user role.
* Optional.
*/
appSubTitle: string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Logo component for toolbar placement, displaying organization branding with automatic navigation to home page.
* Provides clickable logo linking to home route with support for custom or default Europa flag logo.
* Automatically resolves asset paths using EuiConfig for flexible asset location configuration.
* Integrates with Angular Router for navigation on click.
* Typically used within eui-toolbar for consistent branding across the application.
*
* @usageNotes
* ```html
*
*
*
*
*
*
*
*
*
*
*
*
*
* ```
*
* ### Accessibility
* - Logo is clickable and navigates to home page
* - Provides visual branding and orientation
* - Keyboard accessible via click handler
* - Focus visible for keyboard navigation
* - Alt text should be provided in template
*
* ### Notes
* - Must be used within eui-toolbar for proper layout
* - Positioned at the start of the toolbar (leftmost)
* - Default logo: Europa flag small (36x53px)
* - Custom logoUrl overrides default logo
* - homeUrl defaults to '..' for parent route navigation
* - Logo dimensions customizable via logoHeight and logoWidth
* - Asset path resolved via EuiConfig (default: 'assets')
* - Click handler navigates using Angular Router
* - Simpler alternative to eui-header-logo for toolbar layouts
* - No theme adaptation (unlike eui-header-logo)
* - PNG format for default logo
*/
declare class EuiToolbarLogoComponent implements OnInit {
class: string;
/**
* URL or route path for the home page navigation when logo is clicked.
* Supports both relative and absolute paths for Angular routing.
* @default '..'
*/
homeUrl: string;
/**
* Custom URL path to a logo image file.
* When provided, overrides the default Europa flag logo.
* Optional - defaults to Europa flag small logo when not provided.
*/
logoUrl: string;
/**
* CSS height value for the logo image.
* Accepts any valid CSS height unit (px, rem, %, etc.).
* @default '36px'
*/
logoHeight: string;
/**
* CSS width value for the logo image.
* Accepts any valid CSS width unit (px, rem, %, etc.).
* @default '53px'
*/
logoWidth: string;
protected logoUrlGenerated: any;
protected logoStyle: any;
private router;
private config;
onClick(): void;
ngOnInit(): void;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Environment indicator component for toolbar placement, displaying the current application environment.
* Provides visual distinction between different deployment environments (dev, test, production, etc.) to prevent user confusion.
* Content is projected via ng-content allowing custom environment labels and styling.
* Typically displays text like "Development", "Testing", "Staging" with distinct background colors.
* Used within eui-toolbar for consistent environment indication across the application.
*
* @usageNotes
* ```html
*
*
*
* DEV
*
*
*
*
* ```
*
* ### Accessibility
* - Environment text readable by screen readers
* - Provides critical deployment context
* - Visual distinction prevents accidental actions
* - Text content should be concise and clear
*
* ### Notes
* - Must be used within eui-toolbar for proper layout
* - Positioned at start of toolbar (leftmost)
* - Content projected via ng-content
* - Common values: "DEV", "TEST", "ACC", "PROD"
* - Styling typically uses distinct background colors per environment
* - Simpler alternative to eui-header-environment for toolbar layouts
* - No integration with EuiAppShellService
* - Use when toolbar is primary navigation instead of header
*/
declare class EuiToolbarEnvironmentComponent {
class: string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Individual toolbar item wrapper component for consistent spacing and styling of toolbar elements.
* Provides a standardized container for single toolbar actions, buttons, icons, or custom content.
* Content is projected via ng-content allowing flexible composition of any toolbar element.
* Automatically applies consistent spacing and alignment within the toolbar layout.
* Typically used within eui-toolbar-items to wrap individual buttons, icons, or interactive elements.
*
* @usageNotes
* ```html
*
*
*
*
*
*
*
*
*
*
*
*
*
*
* ```
*
* ### Accessibility
* - Provides consistent spacing for toolbar elements
* - Content should be keyboard accessible
* - Interactive elements must have proper focus states
* - Maintains visual consistency across toolbar
*
* ### Notes
* - Must be used within eui-toolbar-items for proper layout
* - Wraps individual toolbar elements (buttons, icons, etc.)
* - Content projected via ng-content
* - Automatic spacing and alignment applied
* - Common content: buttons, icon buttons, custom controls
* - Use one eui-toolbar-item per toolbar element
* - Works with euiPositionRight directive on parent
* - Provides consistent visual rhythm in toolbar
*/
declare class EuiToolbarItemComponent {
string: string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Container component for grouping toolbar items with flexible positioning options.
* Provides a wrapper for organizing multiple toolbar items (buttons, icons, menus) with left or right alignment.
* Content is projected via ng-content allowing flexible composition of toolbar actions and utilities.
* Supports right-side positioning through euiEnd or euiPositionRight properties for consistent layout control.
* Typically used within eui-toolbar to organize action buttons, user profile, notifications, and other toolbar elements.
*
* @usageNotes
* ```html
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
* ```
*
* ### Accessibility
* - Groups related toolbar actions logically
* - Content should be keyboard accessible
* - Interactive elements must have proper focus states
* - Maintains consistent toolbar navigation
*
* ### Notes
* - Must be used within eui-toolbar for proper layout
* - Groups multiple eui-toolbar-item components
* - Content projected via ng-content
* - euiPositionRight or euiEnd for right alignment (default: left)
* - Both positioning properties are functionally equivalent
* - Common content: notifications, buttons, user profile
* - Typically used for right-aligned actions
* - Works with eui-toolbar-item children
* - Flexbox-based positioning
* - Multiple instances can exist in same toolbar
*/
declare class EuiToolbarItemsComponent {
get cssClasses(): string;
/**
* Positions the toolbar items container to the right end of the toolbar.
* When true, applies right alignment styling using flexbox positioning.
* @default false
*/
euiEnd: boolean;
/**
* Alternative property to position the toolbar items container to the right.
* When true, applies right alignment styling. Functionally equivalent to euiEnd.
* @default false
*/
euiPositionRight: boolean;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
static ngAcceptInputType_euiEnd: unknown;
static ngAcceptInputType_euiPositionRight: unknown;
}
/**
* @description
* Center-aligned container component for toolbar content, positioning elements in the middle of the toolbar.
* Provides a dedicated region for center-aligned content such as application name, search bar, or navigation tabs.
* Content is projected via ng-content allowing flexible composition of centered toolbar elements.
* Automatically applies flexbox centering within the toolbar layout for consistent positioning.
* Typically used within eui-toolbar to organize content in the center region between left and right toolbar items.
*
* @usageNotes
* ```html
*
*
*
*
*
*
*
*
*
*
*
*
*
* ```
*
* ### Accessibility
* - Center positioning provides visual balance
* - Content should follow proper semantic structure
* - Interactive elements must be keyboard accessible
* - Maintains consistent toolbar layout
*
* ### Notes
* - Must be used within eui-toolbar for proper layout
* - Positioned in center of toolbar between left and right content
* - Content projected via ng-content
* - Flexbox centering applied automatically
* - Common content: app name, search bar, navigation tabs
* - Works alongside toolbar-items and toolbar-mega-menu
* - Provides visual balance in toolbar layout
* - Responsive behavior inherits from toolbar
*/
declare class EuiToolbarCenterComponent {
string: string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Navigation bar item component representing a single clickable tab or link within the toolbar navbar.
* Provides visual active state indication and keyboard navigation support (Enter/Space keys).
* Automatically registers with parent EuiToolbarNavbarComponent to coordinate selection state.
* Emits selection events to parent when clicked or activated via keyboard.
* Typically used within eui-toolbar-navbar for horizontal tab navigation.
*
* @usageNotes
* ```html
*
*
*
*
*
*
*
*
*
*
*
*
* ```
*
* ### Accessibility
* - Keyboard accessible (Enter/Space keys)
* - Tabindex 0 for keyboard navigation
* - Active state visually indicated
* - Focus visible for keyboard users
* - Click and keyboard events handled
* - ARIA attributes for tab role
*
* ### Notes
* - Must be used within eui-toolbar-navbar for proper functionality
* - Automatically registers with parent navbar component
* - id required for selection tracking
* - label required for display text
* - isActive controls active/selected state (default: false)
* - Only one item should be active at a time (managed by parent)
* - Click handler notifies parent via itemSelected()
* - Enter and Space keys trigger selection
* - Active state applies 'eui-toolbar-navbar-item--active' class
* - Parent navbar coordinates selection across all items
* - Tabindex 0 makes item keyboard focusable
* - Template displays label text only
*/
declare class EuiToolbarNavbarItemComponent {
get cssClasses(): string;
tabindex: number;
/**
* Unique identifier for the navbar item.
* Used by parent navbar component to track and manage selection state.
* Required for proper item identification and selection handling.
*/
id: string;
/**
* Text label displayed for the navbar item.
* Provides the visible text content for the navigation tab.
* Required for item display.
*/
label: string;
/**
* Indicates whether this navbar item is currently active/selected.
* When true, applies active styling to highlight the current selection.
* @default false
*/
isActive: boolean;
navBarComponentParent: EuiToolbarNavbarComponent;
constructor();
protected onClick(): void;
protected onKeydown(event: KeyboardEvent): void;
private _click;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
static ngAcceptInputType_isActive: unknown;
}
/**
* @description
* Navigation bar container component for horizontal tab navigation within the toolbar.
* Manages a collection of navbar items with automatic active state coordination and responsive dropdown fallback.
* Automatically switches to dropdown mode when navbar items exceed available horizontal space.
* Integrates with EuiAppShellService for responsive behavior and coordinates selection state across child items.
* Emits events when navbar items are clicked for parent components to handle navigation logic.
*
* @usageNotes
* ```html
*
*
*
*
*
* Home
*
*
* Products
*
*
* About
*
*
*
*
*
* ```
* ```typescript
* onNavItemClick(itemId: string): void {
* console.log('Selected:', itemId);
* }
* ```
*
* ### Accessibility
* - Tab navigation keyboard accessible
* - Active state clearly indicated
* - Dropdown fallback for overflow
* - Focus management for navigation
* - ARIA attributes for tab structure
* - Keyboard navigation between items
*
* ### Notes
* - Must be used within eui-toolbar for proper layout
* - Contains eui-toolbar-navbar-item children
* - Automatically coordinates active state across items
* - Responsive: switches to dropdown when items overflow
* - Overflow detection based on parent toolbar width
* - itemClick event emits selected item id
* - itemSelected() method updates active states
* - Only one item can be active at a time
* - baseItemSelected tracks initially active item
* - isDropdownView flag controls display mode
* - Dropdown mode activated automatically on overflow
* - Integrates with EuiAppShellService for responsive behavior
*/
declare class EuiToolbarNavbarComponent implements AfterContentInit, AfterViewInit {
class: string;
/**
* Emitted when a navbar item is clicked or activated.
* Payload: string - the id of the selected navbar item
* Triggered when user clicks or keyboard-activates any navbar item. Automatically updates active state of all items.
*/
itemClick: EventEmitter;
items: QueryList;
asService: EuiAppShellService;
baseItemSelected: EuiToolbarNavbarItemComponent;
isDropdownView: boolean;
private elementRef;
ngAfterContentInit(): void;
ngAfterViewInit(): void;
/**
* Handles item selection from child navbar items.
* Updates active state across all items and emits itemClick event with selected item id.
* Called internally by child EuiToolbarNavbarItemComponent instances.
*/
itemSelected(id: string): void;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Toolbar selector component providing a clickable button with icon and label for triggering selection actions.
* Typically used for context switching, workspace selection, or opening dropdown menus in the toolbar.
* Integrates with EuiAppShellService for responsive behavior and theme coordination.
* Supports disabled state and emits click events for parent components to handle selection logic.
*
* @usageNotes
* ```html
*
*
*
*
*
*
*
*
* ```
* ```typescript
* onSelectorClick(): void {
* // Open dropdown or handle selection
* console.log('Selector clicked');
* }
* ```
*
* ### Accessibility
* - Button keyboard accessible
* - Disabled state prevents interaction
* - Label provides context
* - Icon enhances visual affordance
* - Focus visible for keyboard navigation
* - Click events properly handled
*
* ### Notes
* - Must be used within eui-toolbar for proper layout
* - Positioned in toolbar content area
* - label for button text (optional)
* - iconSvgName for button icon (optional)
* - euiDisabled to disable button (default: false)
* - selectorClick event emits true on click
* - Common use: workspace/context switching
* - Often paired with dropdown menus
* - Integrates with EuiAppShellService
* - Responsive behavior inherited from toolbar
* - Button styling follows EUI button patterns
*/
declare class EuiToolbarSelectorComponent {
class: string;
/**
* Text label displayed on the selector button.
* Provides context for what the selector controls or represents.
* Optional.
*/
label: string;
/**
* SVG icon name displayed on the selector button.
* Follows EUI icon naming convention (e.g., 'chevron-down:outline').
* Optional.
*/
iconSvgName: string;
/**
* Disables the selector button preventing user interaction.
* When true, button is visually disabled and click events are not emitted.
* @default false
*/
euiDisabled: boolean;
/**
* Emitted when the selector button is clicked.
* Payload: boolean - always emits true to indicate click occurred
* Triggered when user clicks the selector button and it is not disabled.
*/
selectorClick: EventEmitter;
protected asService: EuiAppShellService;
onClick(): void;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
static ngAcceptInputType_euiDisabled: unknown;
}
/**
* @description
* Toolbar search component providing an expandable search input with autocomplete or plain text input modes.
* Offers flexible search functionality with optional search button, expand animation, and custom result templates.
* Supports two modes: autocomplete with dropdown suggestions or simple text input with enter-to-search.
* Integrates with EuiAppShellService for responsive behavior and theme coordination.
* Emits events for search actions, selection changes, and focus state for parent components to handle search logic.
*
* @usageNotes
* ```html
*
*
*
*
*
*
*
*
*
*
*
*
*
* ```
* ```typescript
* searchResults: EuiAutoCompleteItem[] = [
* { id: 1, label: 'Result 1' },
* { id: 2, label: 'Result 2' }
* ];
* ```
*
* ### Accessibility
* - Search input keyboard accessible
* - Enter key triggers search
* - Focus and blur events managed
* - Placeholder provides context
* - Autocomplete dropdown keyboard navigable
* - Search button keyboard accessible
*
* ### Notes
* - Must be used within eui-toolbar for proper layout
* - Two modes: autocomplete (default) or text input
* - isAutocomplete and isInputText are mutually exclusive
* - Default mode is autocomplete if neither specified
* - searchResults for autocomplete suggestions
* - hasSearchButton adds explicit search button
* - hasExpandAnimation controls focus expansion (default: true)
* - panelWidth for autocomplete dropdown (default: '25vw')
* - search event on Enter key or autocomplete change
* - selectionChange event for autocomplete selections
* - searchClick event for button clicks
* - inputFocus/inputBlur events for focus state
* - Custom result templates via EuiTemplateDirective
* - Focus state applies 'eui-toolbar-search--focus' class
* - Integrates with EuiAppShellService
*/
declare class EuiToolbarSearchComponent implements AfterViewInit, AfterContentInit {
get cssClasses(): string;
isInputFocus: boolean;
searchTerm: string;
searchInput: string;
resultItemTemplate: TemplateRef<{
$implicit: EuiAutoCompleteItem;
}>;
/**
* Placeholder text displayed in the search input when empty.
* Provides hint text to guide users on what they can search for.
* Optional.
*/
placeholderLabel: string;
/**
* Width of the autocomplete dropdown panel.
* Accepts any valid CSS width value.
* @default '25vw'
*/
panelWidth: string;
/**
* Array of autocomplete suggestion items displayed in the dropdown.
* Only used when isAutocomplete is true. Each item should conform to EuiAutoCompleteItem interface.
* @default empty array
*/
searchResults: EuiAutoCompleteItem[];
/**
* Enables autocomplete mode with dropdown suggestions.
* When true, displays autocomplete dropdown. Automatically disables isInputText.
* @default false (automatically set to true if both isInputText and isAutocomplete are false)
*/
isAutocomplete: boolean;
/**
* Enables plain text input mode without autocomplete.
* When true, displays simple text input. Automatically disables isAutocomplete.
* @default false
*/
isInputText: boolean;
/**
* Shows a search button next to the input field.
* When true, displays a button to trigger search action explicitly.
* @default false
*/
hasSearchButton: boolean;
/**
* Enables expand animation when search input gains focus.
* When true, animates the input field expansion. When false, input expands instantly.
* @default true
*/
hasExpandAnimation: boolean;
/**
* Emitted when a search is performed via Enter key or autocomplete input change.
* Payload: string - the search term entered by the user
* Triggered on Enter key press in text input mode or autocomplete input change.
*/
search: EventEmitter;
/**
* Emitted when autocomplete selection changes.
* Payload: EuiAutoCompleteItem[] - array of selected autocomplete items
* Triggered when user selects or deselects items in autocomplete mode.
*/
selectionChange: EventEmitter;
/**
* Emitted when the search button is clicked.
* Payload: string - the current search input value, or null if icon-only mode
* Triggered when user clicks the search button (when hasSearchButton is true).
*/
searchClick: EventEmitter;
/**
* Emitted when the search input gains focus.
* Payload: Event - the focus event
* Triggered when user focuses on the search input field.
*/
inputFocus: EventEmitter;
/**
* Emitted when the search input loses focus.
* Payload: Event - the blur event
* Triggered when user leaves the search input field, unless search button is present and input has value.
*/
inputBlur: EventEmitter;
templates: QueryList;
protected asService: EuiAppShellService;
ngAfterContentInit(): void;
ngAfterViewInit(): void;
onSelectionChange(items: EuiAutoCompleteItem[]): void;
onInputFocus(): void;
onInputBlur(): void;
onSearch(e: string): void;
onSearchInput(e: KeyboardEvent): void;
onSearchClick(isIconOnly: boolean): void;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
static ngAcceptInputType_isAutocomplete: unknown;
static ngAcceptInputType_isInputText: unknown;
static ngAcceptInputType_hasSearchButton: unknown;
static ngAcceptInputType_hasExpandAnimation: unknown;
}
declare const EUI_LAYOUT: readonly [typeof EuiAppComponent, typeof EuiAppBreadcrumbComponent, typeof EuiAppFooterComponent, typeof EuiAppHeaderComponent, typeof EuiAppPageWrapperDirective, typeof EuiAppSidebarBodyComponent, typeof EuiAppSidebarComponent, typeof EuiAppSidebarDrawerComponent, typeof EuiAppSidebarFooterComponent, typeof EuiAppSidebarHeaderComponent, typeof EuiAppSidebarHeaderUserProfileComponent, typeof EuiAppSidebarMenuComponent, typeof EuiAppToolbarComponent, typeof EuiAppToolbarItemsMobileComponent, typeof EuiAppTopMessageComponent, typeof EuiAppSideContainerComponent, typeof EuiFooterComponent, typeof EuiHeaderAppComponent, typeof EuiHeaderAppNameComponent, typeof EuiHeaderAppNameLogoComponent, typeof EuiHeaderAppSubtitleComponent, typeof EuiHeaderComponent, typeof EuiHeaderEnvironmentComponent, typeof EuiHeaderLogoComponent, typeof EuiHeaderRightContentComponent, typeof EuiHeaderSearchComponent, typeof EuiHeaderUserProfileComponent, typeof EuiNotificationItemComponent, typeof EuiNotificationsComponent, typeof EuiNotificationItemV2Component, typeof EuiNotificationsV2Component, typeof EuiSidebarToggleComponent, typeof EuiToolbarAppComponent, typeof EuiToolbarCenterComponent, typeof EuiToolbarComponent, typeof EuiToolbarEnvironmentComponent, typeof EuiToolbarItemComponent, typeof EuiToolbarItemsComponent, typeof EuiToolbarLogoComponent, typeof EuiToolbarMegaMenuComponent, typeof EuiToolbarNavbarComponent, typeof EuiToolbarNavbarItemComponent, typeof EuiToolbarSearchComponent, typeof EuiToolbarSelectorComponent];
export { EUI_LAYOUT, EuiAppBreadcrumbComponent, EuiAppComponent, EuiAppFooterComponent, EuiAppHeaderComponent, EuiAppPageWrapperDirective, EuiAppSideContainerComponent, EuiAppSidebarBodyComponent, EuiAppSidebarComponent, EuiAppSidebarDrawerComponent, EuiAppSidebarFooterComponent, EuiAppSidebarHeaderComponent, EuiAppSidebarHeaderUserProfileComponent, EuiAppSidebarMenuComponent, EuiAppToolbarComponent, EuiAppToolbarItemsMobileComponent, EuiAppTopMessageComponent, EuiFooterComponent, EuiHeaderAppComponent, EuiHeaderAppNameComponent, EuiHeaderAppNameLogoComponent, EuiHeaderAppSubtitleComponent, EuiHeaderComponent, EuiHeaderEnvironmentComponent, EuiHeaderLogoComponent, EuiHeaderRightContentComponent, EuiHeaderSearchComponent, EuiHeaderUserProfileComponent, EuiNotificationItemComponent, EuiNotificationItemV2Component, EuiNotificationsComponent, EuiNotificationsV2Component, EuiSidebarToggleComponent, EuiToolbarAppComponent, EuiToolbarCenterComponent, EuiToolbarComponent, EuiToolbarEnvironmentComponent, EuiToolbarItemComponent, EuiToolbarItemsComponent, EuiToolbarLogoComponent, EuiToolbarMegaMenuComponent, EuiToolbarMegaMenuContainerComponent, EuiToolbarNavbarComponent, EuiToolbarNavbarItemComponent, EuiToolbarSearchComponent, EuiToolbarSelectorComponent };
export type { NotificationMetadata };
//# sourceMappingURL=eui-components-layout.d.ts.map