import * as i0 from '@angular/core';
import * as i1 from '@eui/components/shared';
import { BaseStatesDirective } from '@eui/components/shared';
/**
* Content projection component for displaying call-to-action elements within eui-banner.
* Provides consistent styling and positioning for action buttons or links in banner contexts.
* Must be used as a child of eui-banner component.
* Typically contains buttons, links, or other interactive elements that prompt user action.
*
* @usageNotes
* ```html
*
* Join Us
* Be part of something great
*
*
*
*
* ```
*
* ### Accessibility
* - CTA buttons should have descriptive, action-oriented labels
* - Interactive elements are keyboard accessible
* - Ensure sufficient contrast for buttons on banner backgrounds
*
* ### Notes
* - Must be direct child of eui-banner component
* - Typically placed after title and description
* - Can contain buttons, links, or button groups
* - Automatically positioned according to banner layout
* - Works with euiInverse for proper button styling on dark backgrounds
*/
declare class EuiBannerCtaComponent {
/**
* Binds the class to the component.
*
* @default 'eui-banner-cta'
*/
string: string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* Content projection component for displaying descriptive text within eui-banner.
* Provides consistent typography and styling for banner description content.
* Must be used as a child of eui-banner component.
* Accepts text, paragraphs, or inline elements through content projection.
*
* @usageNotes
* ```html
*
* Innovation Hub
*
* Explore cutting-edge solutions and collaborate with experts.
*
*
* ```
*
* ### Accessibility
* - Description text is readable by screen readers after title
* - Provides additional context about banner content
* - Ensure sufficient contrast with background images
*
* ### Notes
* - Must be direct child of eui-banner component
* - Typically placed after eui-banner-title
* - Styled as secondary/body text
* - Automatically adapts to banner size variants
* - Works with euiInverse for light text on dark backgrounds
*/
declare class EuiBannerDescriptionComponent {
/**
* Binds the class to the component.
*
* @default 'eui-banner-description'
*/
string: string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* Content projection component for displaying the title within eui-banner.
* Provides consistent typography and styling for banner title text.
* Must be used as a child of eui-banner component.
* Accepts text or inline elements through content projection.
*
* @usageNotes
* ```html
*
* Welcome to Our Platform
* Start your journey today
*
* ```
*
* ### Accessibility
* - Title text is readable by screen readers in natural order
* - Use concise, descriptive titles that convey banner purpose
* - Ensure sufficient contrast with background when using images
*
* ### Notes
* - Must be direct child of eui-banner component
* - Styled as prominent heading text
* - Automatically adapts to banner size variants
* - Works with euiInverse for light text on dark backgrounds
*/
declare class EuiBannerTitleComponent {
/**
* Binds the class to the component.
*
* @default 'eui-banner-title'
*/
string: string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Content projection component for embedding video content within eui-banner.
* Provides consistent styling and layout for video elements in banner contexts.
* Must be used as a child of eui-banner component with isVideoBanner enabled.
* Accepts any video-related content through content projection.
*
* @usageNotes
* ```html
*
*
*
*
* Innovation in Action
* Watch our story unfold
*
* ```
*
* ### Accessibility
* - Video should include captions for users with hearing impairments
* - Provide poster image for video thumbnail
* - Use muted attribute for autoplay videos to comply with accessibility guidelines
* - Consider providing alternative text description of video content
*
* ### Notes
* - Must be direct child of eui-banner component
* - Parent banner should have isVideoBanner set to true
* - Video element should include poster attribute for initial display
* - Use autoplay, loop, and muted attributes for background videos
* - Video is displayed as full-width background
* - Content (title, description) overlays the video
* - Consider video file size and format for performance
*/
declare class EuiBannerVideoComponent {
/**
* Binds the class to the component.
*
* @default 'eui-banner-video'
*/
string: string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Banner component for displaying prominent content sections with images or videos across the full width of a page.
* Provides flexible positioning options (top, center, bottom) and supports inverse color schemes.
* Can display static images or video backgrounds with content overlay.
* Supports size variants (S, M, L) and outline styling through `BaseStatesDirective`.
*
* @usageNotes
* #### Basic banner with image
* ```html
*
* Welcome
* Discover our services
*
* ```
*
* #### Banner with CTA and positioning
* ```html
*
* Get Started
* Join us today
*
*
*
*
* ```
*
* #### Video banner
* ```html
*
*
*
*
* Innovation
*
* ```
*
* ### Accessibility
* - No ARIA landmark role assigned; banner is a visual component
* - Ensure banner images have meaningful content or are decorative
* - Use euiInverse for better text contrast on dark images
* - Video content should include captions when containing important information
* - CTA buttons should have descriptive labels
*
* ### Notes
* - Size variants: euiSizeS, euiSizeM (default), euiSizeL control banner height
* - Position options: euiPositionTop, euiPositionCenter (default is bottom)
* - euiInverse applies light text on dark background for better image contrast
* - imageUrl displays static background image
* - isVideoBanner enables video background mode, use with eui-banner-video
* - euiOutline adds border outline styling
* - Content is overlaid on background image/video
* - Typically contains eui-banner-title, eui-banner-description, and optionally eui-banner-cta
*/
declare class EuiBannerComponent {
get cssClasses(): string;
/**
* Data attribute value for end-to-end testing identification.
* Applied as data-e2e attribute on the host element.
* @default 'eui-banner'
*/
e2eAttr: string;
/**
* Positions the banner content at the top of the banner area.
* When true, aligns content to the top with appropriate spacing.
* @default false
*/
euiPositionTop: boolean;
/**
* Positions the banner content at the center of the banner area.
* When true, vertically centers content within the banner.
* @default false
*/
euiPositionCenter: boolean;
/**
* Applies inverse color scheme to the banner.
* When true, uses light text on dark background for better contrast with images.
* @default false
*/
euiInverse: boolean;
/**
* Enables video banner mode for displaying video backgrounds.
* When true, configures banner to support video content instead of static images.
* @default false
*/
isVideoBanner: boolean;
/**
* URL path to the banner background image.
* When provided, displays the image as the banner background.
* Optional.
*/
imageUrl: string;
protected baseStatesDirective: BaseStatesDirective;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
static ngAcceptInputType_euiPositionTop: unknown;
static ngAcceptInputType_euiPositionCenter: unknown;
static ngAcceptInputType_euiInverse: unknown;
static ngAcceptInputType_isVideoBanner: unknown;
}
declare const EUI_BANNER: readonly [typeof EuiBannerComponent, typeof EuiBannerTitleComponent, typeof EuiBannerDescriptionComponent, typeof EuiBannerCtaComponent, typeof EuiBannerVideoComponent];
export { EUI_BANNER, EuiBannerComponent, EuiBannerCtaComponent, EuiBannerDescriptionComponent, EuiBannerTitleComponent, EuiBannerVideoComponent };
//# sourceMappingURL=eui-components-eui-banner.d.ts.map