{"version":3,"file":"eui-components-eui-timeline.mjs","sources":["../../eui-timeline/eui-timeline.component.ts","../../eui-timeline/eui-timeline-item.component.ts","../../eui-timeline/eui-timeline-item.component.html","../../eui-timeline/index.ts","../../eui-timeline/eui-components-eui-timeline.ts"],"sourcesContent":["import {\n    booleanAttribute,\n    Component,\n    HostBinding,\n    Input,\n} from '@angular/core';\n\n/**\n * @description\n * A timeline component that displays a vertical list of events or activities in chronological order.\n * Can be configured to align items on the left side instead of centered.\n *\n * @usageNotes\n * ### Basic Usage\n * ```html\n * <eui-timeline>\n *   <eui-timeline-item\n *     label=\"Project Started\"\n *     date=\"Jan 15, 2024\"\n *     time=\"09:00\"\n *     euiSuccess>\n *   </eui-timeline-item>\n *   <eui-timeline-item\n *     label=\"Milestone Reached\"\n *     date=\"Feb 20, 2024\"\n *     euiInfo>\n *   </eui-timeline-item>\n * </eui-timeline>\n *\n * <!-- Left-aligned timeline -->\n * <eui-timeline [isLeftAligned]=\"true\">\n *   <eui-timeline-item label=\"Event 1\" />\n *   <eui-timeline-item label=\"Event 2\" />\n * </eui-timeline>\n * ```\n *\n * ### Accessibility\n * - Use semantic HTML structure with proper heading levels\n * - Provide clear, descriptive labels for each timeline item\n * - Consider using aria-label on timeline for screen readers\n *\n * ### Notes\n * - Default layout centers items with connecting line\n * - Left-aligned mode places all items on the left side\n * - Timeline items inherit alignment from parent timeline\n */\n@Component({\n    selector: 'eui-timeline',\n    template: '<ng-content/>',\n    styleUrl: './eui-timeline.scss',\n})\nexport class EuiTimelineComponent {\n    /**\n     * @description\n     * Computes and returns the CSS classes for the timeline component\n     *\n     * @returns {string} Space-separated string of CSS class names\n     */\n    @HostBinding('class')\n    public get cssClasses(): string {\n        return this.getCssClasses();\n    }\n\n    /**\n     * @description Data attribute for e2e testing\n     * @default 'eui-timeline'\n     */\n    @HostBinding('attr.data-e2e')\n    @Input()\n    e2eAttr = 'eui-timeline';\n\n    /**\n     * @description\n     * When true, aligns timeline items to the left side instead of center\n     * @default false\n     */\n    @Input({ transform: booleanAttribute }) isLeftAligned: boolean;\n\n    /**\n     * @description\n     * Combines CSS classes based on the component's current state\n     *\n     * @private\n     * @returns {string} Space-separated string of CSS class names\n     */\n    private getCssClasses(): string {\n        return ['eui-timeline', this.isLeftAligned ? 'eui-timeline--left-aligned' : ''].join(' ').trim();\n    }\n}\n","import {\n    AfterContentInit,\n    booleanAttribute,\n    Component,\n    forwardRef,\n    HostBinding,\n    inject,\n    Input,\n} from '@angular/core';\n\nimport { BaseStatesDirective } from '@eui/components/shared';\nimport { EuiTimelineComponent } from './eui-timeline.component';\n\n/**\n * @description\n * A timeline item component that represents a single event or activity within a timeline.\n * Can display labels, dates, times, and custom content with various visual states.\n *\n * @usageNotes\n * ### Basic Usage\n * ```html\n * <!-- Simple timeline item -->\n * <eui-timeline-item\n *   label=\"Task Completed\"\n *   date=\"March 15, 2024\"\n *   time=\"14:30\"\n *   euiSuccess />\n *\n * <!-- With sublabel and custom content -->\n * <eui-timeline-item\n *   label=\"Code Review\"\n *   subLabel=\"Pull request #123\"\n *   date=\"Today\"\n *   euiInfo>\n *   <p>Reviewed changes and approved merge</p>\n * </eui-timeline-item>\n *\n * <!-- Group item -->\n * <eui-timeline-item\n *   label=\"Multiple Events\"\n *   [isGroup]=\"true\"\n *   euiSecondary />\n * ```\n *\n * ### Accessibility\n * - Provide meaningful labels describing the event\n * - Use semantic color variants (euiSuccess, euiWarning, euiDanger) consistently\n * - Ensure date/time formats are clear and localized\n *\n * ### Notes\n * - Color variants (euiSuccess, euiInfo, euiWarning, euiDanger) indicate event status\n * - isGroup mode changes visual appearance for grouped events\n * - Alignment is inherited from parent eui-timeline component\n * - Custom content can be projected via ng-content\n */\n@Component({\n    selector: 'eui-timeline-item',\n    templateUrl: './eui-timeline-item.component.html',\n    styleUrl: './eui-timeline-item.scss',\n    hostDirectives: [\n        {\n            directive: BaseStatesDirective,\n            inputs: ['euiSecondary', 'euiPrimary', 'euiSuccess', 'euiInfo', 'euiWarning', 'euiDanger', 'euiVariant'],\n        },\n    ],\n})\nexport class EuiTimelineItemComponent implements AfterContentInit {\n    /**\n     * @description\n     * Computes and returns the CSS classes for the timeline item\n     *\n     * @returns {string} Space-separated string of CSS class names\n     */\n    @HostBinding('class')\n    public get cssClasses(): string {\n        return this.getCssClasses();\n    }\n\n    /**\n     * @description Data attribute for e2e testing\n     * @default 'eui-timeline-item'\n     */\n    @HostBinding('attr.data-e2e')\n    @Input()\n    e2eAttr = 'eui-timeline-item';\n\n    /**\n     * @description Primary text content of the timeline item\n     */\n    @Input() label: string;\n\n    /**\n     * @description Secondary text content displayed below the label\n     */\n    @Input() subLabel: string;\n\n    /**\n     * @description Date to display for the timeline item\n     */\n    @Input() date: string;\n\n    /**\n     * @description Additional CSS class to apply to the date element\n     * @default ''\n     */\n    @Input() dateStyleClass = '';\n\n    /**\n     * @description Time to display for the timeline item\n     */\n    @Input() time: string;\n\n    /**\n     * @description Additional CSS class to apply to the time element\n     * @default ''\n     */\n    @Input() timeStyleClass = '';\n\n    /**\n     * @description Controls the alignment of content within the timeline item\n     * Inherited from parent timeline component\n     */\n    @Input({ transform: booleanAttribute }) isLeftAligned: boolean;\n\n    /**\n     * @description Indicates if this item represents a group of events\n     * Changes the visual appearance accordingly\n     */\n    @Input({ transform: booleanAttribute }) isGroup: boolean;\n\n    /**\n     * @description Instance of BaseStatesDirective for managing component states\n     */\n    public baseStatesDirective: BaseStatesDirective = inject(BaseStatesDirective);\n\n    /**\n     * @description Reference to parent timeline component for alignment inheritance\n     */\n    public timelineComponent: EuiTimelineComponent = inject(forwardRef(() => EuiTimelineComponent), { optional: true, host: true });\n\n    /**\n     * @description\n     * After content initialization, inherits left alignment from parent timeline component\n     */\n    ngAfterContentInit(): void {\n        this.isLeftAligned = this.timelineComponent.isLeftAligned;\n    }\n\n    /**\n     * @description\n     * Combines CSS classes based on the component's current state and group status\n     *\n     * @private\n     * @returns {string} Space-separated string of CSS class names\n     */\n    private getCssClasses(): string {\n        return [\n            this.baseStatesDirective.getCssClasses('eui-timeline-item'),\n            this.isGroup ? 'eui-timeline-item--more' : '',\n        ]\n            .join(' ')\n            .trim();\n    }\n}\n","@if (!isLeftAligned) {\n    <div class=\"eui-timeline-item__left-content\">\n        @if (date) {\n            <div class=\"eui-timeline-item__date {{ dateStyleClass }}\">{{ date }}</div>\n        }\n        @if (time) {\n            <div class=\"eui-timeline-item__time {{ timeStyleClass }}\">{{ time }}</div>\n        }\n    </div>\n}\n<div class=\"eui-timeline-item__icon\" [class.eui-timeline-item__icon--group]=\"isGroup\"></div>\n<div class=\"eui-timeline-item__content\">\n    <ng-container #customContent>\n        <ng-content></ng-content>\n    </ng-container>\n\n    @if (customContent?.childNodes.length === 0) {\n        <div class=\"eui-timeline-item__title\">{{ label }}</div>\n        <div class=\"eui-timeline-item__subtitle\">{{ subLabel }}</div>\n        @if (isLeftAligned && date) {\n            <div class=\"eui-timeline-item__date {{ dateStyleClass }}\">{{ date }}</div>\n        }\n        @if (isLeftAligned && time) {\n            <div class=\"eui-timeline-item__time {{ timeStyleClass }}\">{{ time }}</div>\n        }\n    }\n</div>\n","import { EuiTimelineItemComponent } from './eui-timeline-item.component';\nimport { EuiTimelineComponent } from './eui-timeline.component';\n\nexport * from './eui-timeline.component';\nexport * from './eui-timeline-item.component';\n\nexport const EUI_TIMELINE = [\n    EuiTimelineComponent, \n    EuiTimelineItemComponent,\n] as const;","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}