import * as i0 from '@angular/core'; import { AfterViewInit, ElementRef } from '@angular/core'; import * as i1 from '@eui/components/shared'; import { BaseStatesDirective } from '@eui/components/shared'; /** * @description * A badge component that can display text, numbers, or icons with various states and styles. * Supports content truncation, empty states, and icon-only modes. * * @usageNotes * #### Basic badge * ```html * 99 * ``` * * #### Badge with semantic variants * ```html * Active * Error * ``` * * #### Badge with icon * ```html * * 9 * * ``` * * #### Badge with button * ```html * * ``` * * #### Badge with truncation * ```html * 150 * ``` * * #### Icon-only badge (dot indicator) * ```html * * ``` * * ### Accessibility * - Uses role="status" for screen reader announcements * - aria-label provides context (defaults to "badge") * - Content is automatically announced by screen readers * - Truncated content shows replacement text to all users * - Empty badges are visually indicated with special styling * * ### Notes * - Size variants: euiSizeS, euiSizeM (default) * - Color variants: euiPrimary, euiSecondary, euiSuccess, euiInfo, euiWarning, euiDanger * - maxCharCount truncates content when exceeded, showing charReplacement (default: "99+") * - euiIconBadge creates a small dot indicator without text * - euiDottedBadge applies dotted styling variant * - Empty badges (no content) automatically receive special styling * - colorPalette accepts custom color palette names for extended theming * - euiOutline adds border outline styling * - Can be used as element (eui-badge) or attribute (div[euiBadge], span[euiBadge]) */ declare class EuiBadgeComponent implements AfterViewInit { /** * @description * Computes and returns the CSS classes for the badge based on its current state * * @returns {string} Space-separated string of CSS class names */ get cssClasses(): string; /** @description Data attribute for e2e testing */ e2eAttr: string; /** @description ARIA role for accessibility */ role: string; /** @description ARIA label for accessibility */ ariaLabel: string | null; /** * Maximum number of characters to display before truncating. * When content exceeds this limit, it will be replaced with charReplacement value. * Useful for displaying large numbers in a compact format (e.g., "99+" for values over 99). */ maxCharCount: number; /** * String to display when content is truncated due to maxCharCount. * @default '99+' */ charReplacement: string; /** * Whether the badge contains only an icon (displays as a small dot indicator). * When true, no text content is shown, creating a minimal status indicator. * @default false */ euiIconBadge: boolean; /** * Whether to display the badge with dotted styling variant. * Applies alternative visual treatment to the badge. * @default false */ euiDottedBadge: boolean; /** * Extra color palette to be used on the badge. * Accepts custom color palette names for extended theming beyond standard variants. */ colorPalette: string; content: ElementRef; protected hasContentUpdated: boolean; protected updatedContent: string; protected baseStatesDirective: BaseStatesDirective; private cdRef; private hasContent; ngAfterViewInit(): void; /** * @description * Handles content changes and triggers content checking */ onContentChanged(): void; /** * @description * Checks if content exceeds maxCharCount and updates content if necessary * @private */ private _checkContent; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_euiIconBadge: unknown; static ngAcceptInputType_euiDottedBadge: unknown; } declare const EUI_BADGE: readonly [typeof EuiBadgeComponent]; export { EUI_BADGE, EuiBadgeComponent }; //# sourceMappingURL=eui-components-eui-badge.d.ts.map