import * as i0 from '@angular/core';
import { AfterContentInit } from '@angular/core';
import * as i1 from '@eui/components/shared';
import { BaseStatesDirective } from '@eui/components/shared';

/**
 * @description
 * A timeline component that displays a vertical list of events or activities in chronological order.
 * Can be configured to align items on the left side instead of centered.
 *
 * @usageNotes
 * ### Basic Usage
 * ```html
 * <eui-timeline>
 *   <eui-timeline-item
 *     label="Project Started"
 *     date="Jan 15, 2024"
 *     time="09:00"
 *     euiSuccess>
 *   </eui-timeline-item>
 *   <eui-timeline-item
 *     label="Milestone Reached"
 *     date="Feb 20, 2024"
 *     euiInfo>
 *   </eui-timeline-item>
 * </eui-timeline>
 *
 * <!-- Left-aligned timeline -->
 * <eui-timeline [isLeftAligned]="true">
 *   <eui-timeline-item label="Event 1" />
 *   <eui-timeline-item label="Event 2" />
 * </eui-timeline>
 * ```
 *
 * ### Accessibility
 * - Use semantic HTML structure with proper heading levels
 * - Provide clear, descriptive labels for each timeline item
 * - Consider using aria-label on timeline for screen readers
 *
 * ### Notes
 * - Default layout centers items with connecting line
 * - Left-aligned mode places all items on the left side
 * - Timeline items inherit alignment from parent timeline
 */
declare class EuiTimelineComponent {
    /**
     * @description
     * Computes and returns the CSS classes for the timeline component
     *
     * @returns {string} Space-separated string of CSS class names
     */
    get cssClasses(): string;
    /**
     * @description Data attribute for e2e testing
     * @default 'eui-timeline'
     */
    e2eAttr: string;
    /**
     * @description
     * When true, aligns timeline items to the left side instead of center
     * @default false
     */
    isLeftAligned: boolean;
    /**
     * @description
     * Combines CSS classes based on the component's current state
     *
     * @private
     * @returns {string} Space-separated string of CSS class names
     */
    private getCssClasses;
    static ɵfac: i0.ɵɵFactoryDeclaration<EuiTimelineComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<EuiTimelineComponent, "eui-timeline", never, { "e2eAttr": { "alias": "e2eAttr"; "required": false; }; "isLeftAligned": { "alias": "isLeftAligned"; "required": false; }; }, {}, never, ["*"], true, never>;
    static ngAcceptInputType_isLeftAligned: unknown;
}

/**
 * @description
 * A timeline item component that represents a single event or activity within a timeline.
 * Can display labels, dates, times, and custom content with various visual states.
 *
 * @usageNotes
 * ### Basic Usage
 * ```html
 * <!-- Simple timeline item -->
 * <eui-timeline-item
 *   label="Task Completed"
 *   date="March 15, 2024"
 *   time="14:30"
 *   euiSuccess />
 *
 * <!-- With sublabel and custom content -->
 * <eui-timeline-item
 *   label="Code Review"
 *   subLabel="Pull request #123"
 *   date="Today"
 *   euiInfo>
 *   <p>Reviewed changes and approved merge</p>
 * </eui-timeline-item>
 *
 * <!-- Group item -->
 * <eui-timeline-item
 *   label="Multiple Events"
 *   [isGroup]="true"
 *   euiSecondary />
 * ```
 *
 * ### Accessibility
 * - Provide meaningful labels describing the event
 * - Use semantic color variants (euiSuccess, euiWarning, euiDanger) consistently
 * - Ensure date/time formats are clear and localized
 *
 * ### Notes
 * - Color variants (euiSuccess, euiInfo, euiWarning, euiDanger) indicate event status
 * - isGroup mode changes visual appearance for grouped events
 * - Alignment is inherited from parent eui-timeline component
 * - Custom content can be projected via ng-content
 */
declare class EuiTimelineItemComponent implements AfterContentInit {
    /**
     * @description
     * Computes and returns the CSS classes for the timeline item
     *
     * @returns {string} Space-separated string of CSS class names
     */
    get cssClasses(): string;
    /**
     * @description Data attribute for e2e testing
     * @default 'eui-timeline-item'
     */
    e2eAttr: string;
    /**
     * @description Primary text content of the timeline item
     */
    label: string;
    /**
     * @description Secondary text content displayed below the label
     */
    subLabel: string;
    /**
     * @description Date to display for the timeline item
     */
    date: string;
    /**
     * @description Additional CSS class to apply to the date element
     * @default ''
     */
    dateStyleClass: string;
    /**
     * @description Time to display for the timeline item
     */
    time: string;
    /**
     * @description Additional CSS class to apply to the time element
     * @default ''
     */
    timeStyleClass: string;
    /**
     * @description Controls the alignment of content within the timeline item
     * Inherited from parent timeline component
     */
    isLeftAligned: boolean;
    /**
     * @description Indicates if this item represents a group of events
     * Changes the visual appearance accordingly
     */
    isGroup: boolean;
    /**
     * @description Instance of BaseStatesDirective for managing component states
     */
    baseStatesDirective: BaseStatesDirective;
    /**
     * @description Reference to parent timeline component for alignment inheritance
     */
    timelineComponent: EuiTimelineComponent;
    /**
     * @description
     * After content initialization, inherits left alignment from parent timeline component
     */
    ngAfterContentInit(): void;
    /**
     * @description
     * Combines CSS classes based on the component's current state and group status
     *
     * @private
     * @returns {string} Space-separated string of CSS class names
     */
    private getCssClasses;
    static ɵfac: i0.ɵɵFactoryDeclaration<EuiTimelineItemComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<EuiTimelineItemComponent, "eui-timeline-item", never, { "e2eAttr": { "alias": "e2eAttr"; "required": false; }; "label": { "alias": "label"; "required": false; }; "subLabel": { "alias": "subLabel"; "required": false; }; "date": { "alias": "date"; "required": false; }; "dateStyleClass": { "alias": "dateStyleClass"; "required": false; }; "time": { "alias": "time"; "required": false; }; "timeStyleClass": { "alias": "timeStyleClass"; "required": false; }; "isLeftAligned": { "alias": "isLeftAligned"; "required": false; }; "isGroup": { "alias": "isGroup"; "required": false; }; }, {}, never, ["*"], true, [{ directive: typeof i1.BaseStatesDirective; inputs: { "euiSecondary": "euiSecondary"; "euiPrimary": "euiPrimary"; "euiSuccess": "euiSuccess"; "euiInfo": "euiInfo"; "euiWarning": "euiWarning"; "euiDanger": "euiDanger"; "euiVariant": "euiVariant"; }; outputs: {}; }]>;
    static ngAcceptInputType_isLeftAligned: unknown;
    static ngAcceptInputType_isGroup: unknown;
}

declare const EUI_TIMELINE: readonly [typeof EuiTimelineComponent, typeof EuiTimelineItemComponent];

export { EUI_TIMELINE, EuiTimelineComponent, EuiTimelineItemComponent };
//# sourceMappingURL=eui-components-eui-timeline.d.ts.map