import * as i0 from '@angular/core'; import { OnInit, EventEmitter, QueryList } from '@angular/core'; import * as i1 from '@eui/components/shared'; import { BaseStatesDirective } from '@eui/components/shared'; /** * @description * Custom content container for EuiDashboardCard that enables fully customized card layouts. * Use this when the default card structure doesn't meet your needs and you want complete control * over the card's internal structure with header, body, and footer sections. * * @usageNotes * ### Complete Custom Card * ```html * * * * * * Sales Overview * * * * * * *
$24,500
*
* * +12% vs last month *
* * * View full report * * * * ``` * * ### Accessibility * - Maintains semantic structure with header, body, and footer sections * - Ensure interactive elements within have proper labels * - Use heading elements in title section for proper document outline * * ### Notes * - Provides complete flexibility for complex dashboard card layouts * - Combine with sub-components for structured content organization * - Use when default card props (label, subLabel, etc.) are insufficient * - Supports all dashboard card variants and sizes via parent component */ declare class EuiDashboardCardContentComponent { /** CSS class applied to the host element */ string: string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * Main content area for custom dashboard cards, typically displaying metrics, charts, or key information. * Provides flexible content projection for any type of dashboard data visualization. * * @usageNotes * ### Metric Display * ```html * *
1,247
*
Total Orders
* * ``` * * ### With Trend Indicator * ```html * *
$45,231
*
* * +18.2% from last week *
* * ``` * * ### Accessibility * - Use semantic HTML for data presentation * - Provide text alternatives for visual indicators (icons, colors) * - Ensure metrics have descriptive labels for screen readers * - Use appropriate ARIA attributes for dynamic content * * ### Notes * - Main content area with flexible height * - Supports any content: text, charts, lists, or custom components * - Use utility classes for consistent typography and spacing * - Grows to fill available space between header and footer */ declare class EuiDashboardCardContentBodyComponent { /** CSS class applied to the host element */ string: string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * Footer section for custom dashboard cards, typically containing action links, buttons, or supplementary information. * Provides a consistent bottom section for card actions and metadata. * * @usageNotes * ### Action Link * ```html * * View details * * ``` * * ### Multiple Actions * ```html * *
* * Export data *
* * ``` * * ### Accessibility * - Ensure links and buttons have descriptive text or aria-labels * - Maintain sufficient color contrast for footer content * - Use semantic elements for actions (buttons, links) * * ### Notes * - Optional footer section for card actions * - Automatically positioned at bottom of card * - Supports any content: links, buttons, text, or custom components * - Use flex utilities for multi-element layouts */ declare class EuiDashboardCardContentFooterComponent { /** CSS class applied to the host element */ string: string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * Header section for custom dashboard card content, typically containing an icon, title, and action buttons. * Provides a consistent layout for card headers with flexible content projection. * * @usageNotes * ### Basic Header * ```html * * * * Revenue * * * ``` * * ### With Action Button * ```html * * * * Active Users * * * * * * ``` * * ### Accessibility * - Use semantic heading elements within title component * - Provide aria-label for icon-only action buttons * - Ensure sufficient color contrast for icons and text * * ### Notes * - Automatically arranges icon, title, and action in a flex layout * - Icon and action sections are optional * - Title section grows to fill available space * - Combine with other content sub-components for complete card structure */ declare class EuiDashboardCardContentHeaderComponent { /** CSS class applied to the host element */ string: string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * Action area for dashboard card headers, typically containing buttons or interactive elements. * Positioned at the end of the header for quick access to card-level actions. * * @usageNotes * ### Single Action Button * ```html * * * * ``` * * ### Menu Button * ```html * * * * ``` * * ### Accessibility * - Always provide aria-label for icon-only buttons * - Ensure buttons have sufficient touch target size * - Use appropriate ARIA attributes for menus and dropdowns * * ### Notes * - Use within `eui-dashboard-card-content-header` component * - Typically contains icon buttons for space efficiency * - Positioned at the end of the header (right side in LTR) * - Supports any interactive element: buttons, dropdowns, toggles */ declare class EuiDashboardCardContentHeaderActionComponent { /** CSS class applied to the host element */ string: string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * Icon component for dashboard card headers, displaying a visual indicator for the card's content type. * Automatically sized and styled to fit within the header layout. * * @usageNotes * ### Basic Icon * ```html * * ``` * * ### With Different Icons * ```html * * * * ``` * * ### Accessibility * - Icon is decorative when paired with title text * - Inherits color from parent card variant * - Size is fixed at 's' for consistency * * ### Notes * - Use within `eui-dashboard-card-content-header` component * - Supports all EUI icon names and Font Awesome icons * - Icon color adapts to card variant automatically * - Fixed size ensures consistent header appearance */ declare class EuiDashboardCardContentHeaderIconComponent { /** CSS class applied to the host element */ string: string; icon: string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * Title component for dashboard card headers, displaying the primary heading or label for the card. * Automatically styled and positioned within the header layout. * * @usageNotes * ### Basic Title * ```html * * Revenue Overview * * ``` * * ### With Semantic Heading * ```html * *

Active Users

* * ``` * * ### Accessibility * - Use semantic heading elements (h2, h3, etc.) for proper document structure * - Ensure heading level matches page hierarchy * - Title provides context for card content * * ### Notes * - Use within `eui-dashboard-card-content-header` component * - Grows to fill available space between icon and action * - Supports any content but typically contains text or headings * - Text automatically truncates if too long */ declare class EuiDashboardCardContentHeaderTitleComponent { /** CSS class applied to the host element */ string: string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * Status indicator container for dashboard cards, displaying badges, chips, or status information. * Positioned separately from main content to highlight important state or metadata. * * @usageNotes * ### Status Badge * ```html * * Active * * ``` * * ### Warning Status * ```html * * Pending Review * * ``` * * ### Multiple Indicators * ```html * * New * Draft * * ``` * * ### Accessibility * - Status information should be conveyed through text, not color alone * - Use semantic elements (badges, chips) with descriptive text * - Ensure sufficient color contrast for status indicators * * ### Notes * - Use alongside `eui-dashboard-card-content` for status display * - Typically contains badges, chips, or status labels * - Positioned independently from main card content * - Supports multiple status indicators */ declare class EuiDashboardCardStatusContentComponent { /** CSS class applied to the host element */ string: string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * Dashboard card component that can display content with various styling options, including avatar/icon, labels, and clickable behavior. * * @usageNotes * ### Basic Usage * ```html * * * ``` * * ### With Navigation * ```typescript * * * ``` * * ### Accessibility * - Automatically sets `tabindex="0"` when clickable or has URL for keyboard navigation * - Use `iconLabel` to provide accessible text for icon-only cards * - Card emits `cardClick` event for custom interactions * - Supports disabled state via `euiDisabled` directive * * ### Notes * - Use `isHorizontal` for side-by-side layout of avatar and content * - Combine with `euiVariant` and size directives for visual hierarchy * - `labelMaxLines` and `subLabelMaxLines` control text truncation * - External links automatically open in new tab with `urlExternalTarget` */ declare class EuiDashboardCardComponent implements OnInit { /** * @description * Computes and returns the CSS classes for the dashboard card component based on its current state: * - Adds base dashboard card classes * - Adds horizontal layout class if isHorizontal is true * - Adds link class if the card is clickable or has a URL * - Adds flat class if isFlat is true * * @returns {string} Space-separated string of CSS class names */ get cssClasses(): string; /** Element attribute for e2e testing */ e2eAttr: string; /** Primary label/title of the card */ label: string; /** Secondary label/subtitle of the card */ subLabel: string; /** * Maximum number of lines for the primary label * @default 2 */ labelMaxLines: 1 | 2 | 3 | 4 | 5; /** * Maximum number of lines for the secondary label * @default 2 */ subLabelMaxLines: 1 | 2 | 3 | 4 | 5; /** URL for the avatar image */ imageUrl: string; /** Name of the icon to display */ iconSvgName: string; /** * Size of the icon * @default 'm' */ iconSvgSize: '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl'; /** Label for the icon (accessibility) */ iconLabel: string; /** Internal router link URL */ url: string; /** External URL */ urlExternal: string; /** Target attribute for external URLs */ urlExternalTarget: string; /** * Extra color palette to be used on the card. */ colorPalette: string; /** Tab index for keyboard navigation */ get tabindex(): string; /** Whether to display the card in horizontal layout */ isHorizontal: boolean; /** Whether to display the avatar without elevation */ isFlatAvatar: boolean; /** Whether to display the avatar without background */ hasNoBackgroundAvatar: boolean; /** Whether the card is clickable */ isClickeable: boolean; /** Whether to display the card without elevation */ isFlat: boolean; /** Whether to display the card without elevation */ isStacked: boolean; /** Event emitted when the card is clicked */ cardClick: EventEmitter; /** Reference to the custom content component */ customContent: QueryList; baseStatesDirective: BaseStatesDirective; /** Handles card click events */ onClick(event: MouseEvent): void; /** Sets default size and variant if not provided */ ngOnInit(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_isHorizontal: unknown; static ngAcceptInputType_isFlatAvatar: unknown; static ngAcceptInputType_hasNoBackgroundAvatar: unknown; static ngAcceptInputType_isClickeable: unknown; static ngAcceptInputType_isFlat: unknown; static ngAcceptInputType_isStacked: unknown; } declare const EUI_DASHBOARD_CARD: readonly [typeof EuiDashboardCardComponent, typeof EuiDashboardCardContentComponent, typeof EuiDashboardCardContentHeaderComponent, typeof EuiDashboardCardContentHeaderIconComponent, typeof EuiDashboardCardContentHeaderTitleComponent, typeof EuiDashboardCardContentHeaderActionComponent, typeof EuiDashboardCardContentBodyComponent, typeof EuiDashboardCardContentFooterComponent, typeof EuiDashboardCardStatusContentComponent]; export { EUI_DASHBOARD_CARD, EuiDashboardCardComponent, EuiDashboardCardContentBodyComponent, EuiDashboardCardContentComponent, EuiDashboardCardContentFooterComponent, EuiDashboardCardContentHeaderActionComponent, EuiDashboardCardContentHeaderComponent, EuiDashboardCardContentHeaderIconComponent, EuiDashboardCardContentHeaderTitleComponent, EuiDashboardCardStatusContentComponent }; //# sourceMappingURL=eui-components-eui-dashboard-card.d.ts.map