import * as i0 from '@angular/core';
import { QueryList, EventEmitter, AfterContentInit, OnDestroy, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { Observable } from 'rxjs';
import * as i1 from '@eui/components/shared';
/**
* @description
* The eui-card-content component projects the content for eui-card.
*
* @usageNotes
* ```html
*
*
*
* Card title
*
*
* Card sub-title
*
*
*
* Card content
*
*
* Card footer
*
*
* ```
*/
declare class EuiCardContentComponent {
/**
* Binds the class to the component.
*
* @default 'eui-card-content'
*/
string: string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* The eui-card-footer-action-buttons component projects the action buttons content for eui-card.
*
* @usageNotes
* ```html
*
*
* Card content
*
*
*
* Action buttons
*
*
* Action icons
*
*
* Footer Menu
*
*
*
*/
declare class EuiCardFooterActionButtonsComponent {
/**
* Binds the class to the component.
*
* @default 'eui-card-footer-actions__buttons'
*/
string: string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* The eui-card-footer-action-icons component projects the action icons content for eui-card.
*
* @usageNotes
* ```html
*
*
* Card content
*
*
*
* Action buttons
*
*
* Action icons
*
*
* Footer Menu
*
*
*
*/
declare class EuiCardFooterActionIconsComponent {
/**
* Binds the class to the component.
*
* @default 'eui-card-footer-actions__icons'
*/
string: string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* The eui-card-footer-menu-content component projects the content of the actions menu of the eui-card.
*
* @usageNotes
* ```html
*
*
* Card content
*
*
*
* Action buttons
*
*
* Action icons
*
*
* Footer Menu
*
*
*
*/
declare class EuiCardFooterMenuContentComponent {
/**
* Sets the tooltipText Input property.
*
* @default 'More options'
*/
tooltipText: string;
/**
* Binds the class to the component.
*
* @default 'eui-card-footer-menu-content'
*/
string: string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* The eui-card-footer-menu component provides menu options for the footer of the eui-card.
*
* @usageNotes
* ```html
*
*
* Card content
*
*
*
* Action buttons
*
*
* Action icons
*
*
* Footer Menu
*
*
*
*/
declare class EuiCardFooterMenuComponent {
/**
* Binds the class to the component.
*
* @default 'eui-card-footer-menu'
*/
string: string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* The eui-card-footer component projects the footer of the eui-card.
*
* @usageNotes
* ```html
*
*
* Card content
*
*
*
* Action buttons
*
*
* Action icons
*
*
* Footer Menu
*
*
*
*/
declare class EuiCardFooterComponent {
/**
* Binds the class to the component.
*
* @default 'eui-card-footer'
*/
string: string;
actionButtons: QueryList;
actionIcons: QueryList;
actionMenu: QueryList;
actionMenuWrapper: QueryList;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* The eui-card-header-body component projects the body for eui-card-header.
*
* @usageNotes
* ```html
*
*
*
* Card title
*
*
* Car sub-title
*
*
* Card header body
*
*
*
* ```
*/
declare class EuiCardHeaderBodyComponent {
/**
* Binds the class to the component.
*
* @default 'eui-card-header-body'
*/
string: string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* The eui-card-header-left-content component projects the left content for eui-card-header.
*
* @usageNotes
* ```html
*
*
*
* Card header title
*
*
* Card header sub-title
*
*
* Card header left content
*
*
* Card header right content
*
*
*
* Card content
*
*
* ```
*/
declare class EuiCardHeaderLeftContentComponent {
/**
* Computes and returns the CSS classes for the component based on its current state.
* @default 'eui-card-header__left-content'
* @description
* @returns {string} Space-separated string of CSS class names
*/
get cssClasses(): string;
/**
* Input property to display the content top aligned (default: center)
*
* @default false
*/
isTopAligned: boolean;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
static ngAcceptInputType_isTopAligned: unknown;
}
/**
* @description
* The eui-card-header-right-content component projects the right content for eui-card-header.
*
* @usageNotes
* ```html
*
*
*
* Card header title
*
*
* Card header sub-title
*
*
* Card header left content
*
*
* Card header right content
*
*
*
* Card content
*
*
* ```
*/
declare class EuiCardHeaderRightContentComponent {
/**
* Binds the class to the component.
*
* @default 'eui-card-header__right-content'
*/
string: string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* The eui-card-header-subtitle component projects the subtitle for eui-card-header.
*
* @usageNotes
* ```html
*
*
*
* Card header title
*
*
* Card header sub-title
*
*
* Card header left content
*
*
* Card header right content
*
*
*
* Card content
*
*
* ```
*/
declare class EuiCardHeaderSubtitleComponent {
/**
* Binds the class to the component.
*
* @default 'eui-card-header__title-container-subtitle'
*/
string: string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* The eui-card-header-title component projects the title for eui-card-header.
*
* @usageNotes
* ```html
*
*
*
* Card header title
*
*
* Card header sub-title
*
*
* Card header left content
*
*
* Card header right content
*
*
*
* Card content
*
* d-content>
*
* ```
*/
declare class EuiCardHeaderTitleComponent {
/**
* Binds the class to the component.
*
* @default 'eui-card-header__title-container-title'
*/
string: string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* Interface defining the UI state properties for card components.
*/
interface UIState {
/** Whether the card can be collapsed/expanded */
isCollapsible: boolean;
/** Whether the card is currently in collapsed state */
isCollapsed: boolean;
/** Whether the card displays urgent styling */
isUrgent: boolean;
/** Whether the card has a left-side expander control */
hasLeftExpander: boolean;
}
/**
* Service for managing UI state of card components including collapse, urgency, and expander positioning.
* Provides reactive state management through RxJS observables for card component behavior.
* Injected at component level to maintain isolated state per card instance.
* Manages collapsible state, collapsed state, urgent styling, and left expander positioning.
*/
declare class UiStateService {
private _state$;
/**
* Observable stream of UI state changes.
* Emits whenever any state property is updated via setState or setters.
*/
get state$(): Observable;
/**
* Current UI state snapshot.
* Returns the current state value without subscribing to changes.
*/
get state(): UIState;
/**
* Updates the UI state with provided properties.
* Merges the next state with current state, preserving unchanged properties.
*/
setState(nextState: UIState): void;
/**
* Sets the collapsed state of the card.
* When true, card content is hidden; when false, content is visible.
*/
set isCollapsed(isActive: boolean);
/**
* Sets whether the card is collapsible.
* When true, enables collapse/expand functionality; when false, card remains static.
*/
set isCollapsible(isActive: boolean);
/**
* Toggles the collapsed state of the card.
* Switches between collapsed and expanded states.
*/
toggleCollapsed(): void;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵprov: i0.ɵɵInjectableDeclaration;
}
/**
* @description
* The eui-card-header component provides the header options of the eui-card.
*
* @usageNotes
* ```html
*
*
*
* Card header title
*
*
* Card header sub-title
*
*
* Card header left content
*
*
* Card header right content
*
*
*
* Card content
*
*
* ```
*/
declare class EuiCardHeaderComponent {
uiStateService: UiStateService;
/**
* Binds the class to the component.
*/
get cssClasses(): string;
/**
* Sets the expandLabel Input property.
*
* @default 'expand'
*/
expandLabel: string;
/**
* Sets the collapseLabel Input property.
*
* @default 'collapse'
*/
collapseLabel: string;
/**
* Input property to expand the bottom part of the card header.
*
* @default false
*/
hasBottomExpander: boolean;
/**
* Input property to display the title within the full card container's width.
*
* @default false
*/
hasFullTitle: boolean;
/**
* Input property to display the title & subtitle content in multiple lines.
*
* @default false
*/
isHeaderMultilines: boolean;
/**
* Input property to make the card clickeable
*
* @default false
*/
isClickeable: boolean;
/**
* Event emitted when the card header collapses.
*/
collapse: EventEmitter;
/**
* Event emitted when the card collapses.
*/
headerClick: EventEmitter;
/**
* Fires when the icon button expander is clicked/pressed to expand/collapse the bottom expander.
*
* @param event The event that fires the toggle.
*/
onToggle(event: Event): void;
onClick(): void;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
static ngAcceptInputType_hasBottomExpander: unknown;
static ngAcceptInputType_hasFullTitle: unknown;
static ngAcceptInputType_isHeaderMultilines: unknown;
static ngAcceptInputType_isClickeable: unknown;
}
/**
* @description
* The eui-card-header-body component projects the body for eui-card-header.
*
* @usageNotes
* ```html
*
*
*
* Card Content
*
*
* ```
*/
declare class EuiCardMediaComponent {
/**
* The image URL to display in the card.
*/
imageUrl: string;
/**
* The image legend to display in the card.
*/
imageLegend: string;
/**
* Option to set an internal link Url (routerLink).
*/
imageClickUrl: string;
/**
* Option to set an external link Url (href).
*/
imageClickUrlExternal: string;
/**
* Option to specify an image description.
* @default 'eUI Card Image'
*/
imageDescription: string;
/**
* Option to specify the image height.
* @default 'auto'
*/
imageHeight: string;
/**
* Binds the class to the component.
*
* @default 'eui-card-media'
*/
string: string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* `eui-card` is a container component based on Material Design principles.
* It provides a structured surface to group related content such as text, media, and actions around a single subject.
*
* The component supports multiple visual states (selection, urgency, loading, disabled), sizes, collapsible behavior, and deterministic state synchronization through an internal UI state service.
*
* It is designed to be **structural**, **deterministic**, and **state-driven**, without requiring custom CSS or inferred behavior.
*
* @usageNotes
* #### Basic card
* ```html
*
*
* Card Title
* Subtitle
*
*
* Card content goes here
*
*
*
*
*
* ```
*
* #### Collapsible card
* ```html
*
*
* Collapsible Card
*
* Content that can be collapsed
*
* ```
*
* #### Selected and urgent states
* ```html
*
*
* Important Card
*
* Urgent content
*
* ```
*
* #### Clickable card with hover effect
* ```html
*
* Click me
*
* ```
*
* ```ts
* onCollapse(isCollapsed: boolean): void {
* console.log('Card collapsed:', isCollapsed);
* }
*
* onCardClick(card: EuiCardComponent): void {
* console.log('Card clicked');
* }
* ```
*
* ### Accessibility
* - Card structure provides semantic grouping of related content
* - Collapsible cards use appropriate ARIA attributes for expand/collapse state
* - Selected and urgent states are visually distinct and announced to screen readers
* - Clickable cards are keyboard accessible when isClickeable is true
* - Loading and disabled states prevent interaction and are announced
* - Ensure interactive elements within cards have proper focus management
*
* ### Notes
* - Typically contains eui-card-header, eui-card-content, and eui-card-footer children
* - Size variants: euiSizeXS, euiSizeS, euiSizeM (default), euiSizeL, euiSizeXL, euiSize2XL
* - Color variants: euiPrimary, euiSecondary, euiInfo, euiSuccess, euiWarning, euiDanger
* - euiCollapsible enables collapse/expand functionality with toggle button
* - euiCollapsed controls collapsed state (use with euiCollapsible)
* - euiSelected applies selected state styling (typically for card selection)
* - euiUrgent applies urgent state styling (for high-priority content)
* - euiHighlighted applies highlighted state styling
* - euiDisabled disables all interactions within the card
* - euiLoading shows loading state with spinner
* - euiNoShadow removes default card shadow
* - euiNoContentPadding removes padding from card content area
* - euiHoverable adds hover effect styling
* - hasLeftExpander positions collapse toggle on left side
* - isCompact reduces spacing for compact layouts
* - isClickeable makes entire card clickable, emits cardClick event
* - collapse event emits when card is collapsed/expanded
* - State is managed internally via UiStateService for deterministic behavior
*/
declare class EuiCardComponent implements AfterContentInit, OnDestroy, OnInit, OnChanges {
/**
* @description
* Computes and returns the CSS classes for the component based on its current state.
*
* @returns {string} Space-separated string of CSS class names
*/
get cssClasses(): string;
/**
* Sets the `data-e2e` attribute at the host element.
*
* @default 'eui-card'
*/
e2eAttr: string;
/**
* Sets the `euiSelected` attribute in order to show the card header as selected.
*
* @default false
*/
euiSelected: boolean;
/**
* Sets the `euiCollapsible` attribute which shows the collapsible toggle in the header.
*
* @default false
*/
euiCollapsible: boolean;
/**
* Sets the `euiCollapsed` attribute which collapses the card content.
*
* @default false
*/
euiCollapsed: boolean;
/**
* Sets the `euiUrgent` attribute in order to show the card header as urgent.
*
* @default false
*/
euiUrgent: boolean;
/**
* Sets the `euiNoShadow` attribute in order to remove the shadow from the card.
*
* @default false
*/
euiNoShadow: boolean;
/**
* Sets the `euiNoContentPadding` attribute in order to remove the padding from the card content.
*
* @default false
*/
euiNoContentPadding: boolean;
/**
* Sets the `euiHoverable` attribute in order to show the hover effect on the card.
*
* @default false
*/
euiHoverable: boolean;
/**
* Sets the `hasLeftExpander` attribute to display the expander button on the left of the card.
*
* @default false
*/
hasLeftExpander: boolean;
/**
* Input property to display the card header and content in compact view
*
* @default false
*/
isCompact: boolean;
/**
* Event emitted when the card collapses.
*/
collapse: EventEmitter;
uiStateService: UiStateService;
private destroy$;
private baseStatesDirective;
ngOnChanges(changes: SimpleChanges): void;
ngOnInit(): void;
ngAfterContentInit(): void;
ngOnDestroy(): void;
/**
* Sets the card state in the UIStateService.
* This method is called when the component is initialized and when the input properties change.
*/
private _setCardState;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
static ngAcceptInputType_euiSelected: unknown;
static ngAcceptInputType_euiCollapsible: unknown;
static ngAcceptInputType_euiCollapsed: unknown;
static ngAcceptInputType_euiUrgent: unknown;
static ngAcceptInputType_euiNoShadow: unknown;
static ngAcceptInputType_euiNoContentPadding: unknown;
static ngAcceptInputType_euiHoverable: unknown;
static ngAcceptInputType_hasLeftExpander: unknown;
static ngAcceptInputType_isCompact: unknown;
}
declare const EUI_CARD: readonly [typeof EuiCardComponent, typeof EuiCardHeaderComponent, typeof EuiCardHeaderTitleComponent, typeof EuiCardContentComponent, typeof EuiCardHeaderLeftContentComponent, typeof EuiCardHeaderRightContentComponent, typeof EuiCardHeaderSubtitleComponent, typeof EuiCardHeaderBodyComponent, typeof EuiCardFooterActionButtonsComponent, typeof EuiCardFooterActionIconsComponent, typeof EuiCardMediaComponent, typeof EuiCardFooterComponent, typeof EuiCardFooterMenuContentComponent, typeof EuiCardFooterMenuComponent];
export { EUI_CARD, EuiCardComponent, EuiCardContentComponent, EuiCardFooterActionButtonsComponent, EuiCardFooterActionIconsComponent, EuiCardFooterComponent, EuiCardFooterMenuComponent, EuiCardFooterMenuContentComponent, EuiCardHeaderBodyComponent, EuiCardHeaderComponent, EuiCardHeaderLeftContentComponent, EuiCardHeaderRightContentComponent, EuiCardHeaderSubtitleComponent, EuiCardHeaderTitleComponent, EuiCardMediaComponent };
//# sourceMappingURL=eui-components-eui-card.d.ts.map