import * as i0 from '@angular/core';
import { booleanAttribute, Input, HostBinding, Component, inject, forwardRef } 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
 */
class EuiTimelineComponent {
    constructor() {
        /**
         * @description Data attribute for e2e testing
         * @default 'eui-timeline'
         */
        this.e2eAttr = 'eui-timeline';
    }
    /**
     * @description
     * Computes and returns the CSS classes for the timeline component
     *
     * @returns {string} Space-separated string of CSS class names
     */
    get cssClasses() {
        return this.getCssClasses();
    }
    /**
     * @description
     * Combines CSS classes based on the component's current state
     *
     * @private
     * @returns {string} Space-separated string of CSS class names
     */
    getCssClasses() {
        return ['eui-timeline', this.isLeftAligned ? 'eui-timeline--left-aligned' : ''].join(' ').trim();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.1", type: EuiTimelineComponent, isStandalone: true, selector: "eui-timeline", inputs: { e2eAttr: "e2eAttr", isLeftAligned: ["isLeftAligned", "isLeftAligned", booleanAttribute] }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-21 :host.eui-timeline{display:flex;flex-direction:column;margin:0;padding:0;position:relative;width:100%}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiTimelineComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-timeline', template: '<ng-content/>', styles: [".eui-21 :host.eui-timeline{display:flex;flex-direction:column;margin:0;padding:0;position:relative;width:100%}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], e2eAttr: [{
                type: HostBinding,
                args: ['attr.data-e2e']
            }, {
                type: Input
            }], isLeftAligned: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }] } });

/**
 * @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
 */
class EuiTimelineItemComponent {
    constructor() {
        /**
         * @description Data attribute for e2e testing
         * @default 'eui-timeline-item'
         */
        this.e2eAttr = 'eui-timeline-item';
        /**
         * @description Additional CSS class to apply to the date element
         * @default ''
         */
        this.dateStyleClass = '';
        /**
         * @description Additional CSS class to apply to the time element
         * @default ''
         */
        this.timeStyleClass = '';
        /**
         * @description Instance of BaseStatesDirective for managing component states
         */
        this.baseStatesDirective = inject(BaseStatesDirective);
        /**
         * @description Reference to parent timeline component for alignment inheritance
         */
        this.timelineComponent = inject(forwardRef(() => EuiTimelineComponent), { optional: true, host: true });
    }
    /**
     * @description
     * Computes and returns the CSS classes for the timeline item
     *
     * @returns {string} Space-separated string of CSS class names
     */
    get cssClasses() {
        return this.getCssClasses();
    }
    /**
     * @description
     * After content initialization, inherits left alignment from parent timeline component
     */
    ngAfterContentInit() {
        this.isLeftAligned = this.timelineComponent.isLeftAligned;
    }
    /**
     * @description
     * Combines CSS classes based on the component's current state and group status
     *
     * @private
     * @returns {string} Space-separated string of CSS class names
     */
    getCssClasses() {
        return [
            this.baseStatesDirective.getCssClasses('eui-timeline-item'),
            this.isGroup ? 'eui-timeline-item--more' : '',
        ]
            .join(' ')
            .trim();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiTimelineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: EuiTimelineItemComponent, isStandalone: true, selector: "eui-timeline-item", inputs: { e2eAttr: "e2eAttr", label: "label", subLabel: "subLabel", date: "date", dateStyleClass: "dateStyleClass", time: "time", timeStyleClass: "timeStyleClass", isLeftAligned: ["isLeftAligned", "isLeftAligned", booleanAttribute], isGroup: ["isGroup", "isGroup", booleanAttribute] }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr" } }, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiSecondary", "euiSecondary", "euiPrimary", "euiPrimary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiVariant", "euiVariant"] }], ngImport: i0, template: "@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", styles: [".eui-21 :host.eui-timeline-item{--_color: var(--eui-c-secondary);--_border-color: var(--eui-c-secondary)}.eui-21 :host.eui-timeline-item--primary{--_color: var(--eui-c-primary);--_border-color: var(--eui-c-primary)}.eui-21 :host.eui-timeline-item--info{--_color: var(--eui-c-info);--_border-color: var(--eui-c-info)}.eui-21 :host.eui-timeline-item--success{--_color: var(--eui-c-success);--_border-color: var(--eui-c-success)}.eui-21 :host.eui-timeline-item--warning{--_color: var(--eui-c-warning);--_border-color: var(--eui-c-warning)}.eui-21 :host.eui-timeline-item--danger{--_color: var(--eui-c-danger);--_border-color: var(--eui-c-danger)}.eui-21 :host.eui-timeline-item{display:flex;flex-direction:row;list-style:none;margin-bottom:var(--eui-s-m);position:relative;width:100%}.eui-21 :host.eui-timeline-item .eui-timeline-item__left-content{display:list-item;min-width:calc(11 * var(--eui-s-m));position:relative;text-align:right;word-break:break-all}.eui-21 :host.eui-timeline-item .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){align-items:center;background-color:var(--eui-c-surface-container);border-color:var(--_border-color);border-radius:var(--eui-br-max);border-style:solid;border-width:3px;display:flex;flex-direction:column;max-height:calc(var(--eui-s-m) + var(--eui-s-3xs));margin:0 var(--eui-s-m);min-width:calc(var(--eui-s-m) + var(--eui-s-3xs));z-index:2}.eui-21 :host.eui-timeline-item .eui-timeline-item__icon:not(.eui-timeline-item__icon--group):after{background-color:var(--eui-c-secondary-border);content:\"\";height:calc(100% - var(--eui-s-3xs));position:absolute;top:calc(var(--eui-s-m) + var(--eui-s-3xs));width:2px;z-index:1}.eui-21 :host.eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{align-items:center;border-right:var(--eui-bw-s) dashed var(--eui-c-secondary-border);display:flex;flex-direction:column;height:auto;margin:2px calc(var(--eui-s-xl) + 1px)}.eui-21 :host.eui-timeline-item .eui-timeline-item__content{position:relative;top:calc(-1 * var(--eui-s-4xs));width:100%;color:var(--_color)}.eui-21 :host.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__title{color:var(--_color);font:var(--eui-f-m-semi-bold)}.eui-21 :host.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__subtitle{color:var(--eui-c-text-light)}.eui-21 :host.eui-timeline-item .eui-timeline-item__date{position:relative;color:var(--eui-c-text);font:var(--eui-f-m-semi-bold);top:calc(-.75 * var(--eui-s-4xs))}.eui-21 :host.eui-timeline-item .eui-timeline-item__time{position:relative;color:var(--eui-c-text-light);top:calc(-1 * var(--eui-s-4xs))}.eui-21 :host.eui-timeline-item:last-child .eui-timeline-item__icon:after{height:0}.eui-21 :host.eui-timeline-item--more{margin-bottom:0}.eui-21 :host.eui-timeline-item--more .eui-timeline-item__content{padding-bottom:var(--eui-s-m)}.eui-21 .eui-timeline--left-aligned :host.eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{margin:2px calc(var(--eui-s-xl) + 2px)}.eui-21 .eui-timeline--left-aligned :host.eui-timeline-item .eui-timeline-item__icon:after{left:calc(1 * var(--eui-s-m) + 10px)!important}.eui-21 .eui-timeline--left-aligned :host.eui-timeline-item .eui-timeline-item__content{padding-bottom:var(--eui-s-s)}.eui-21 .eui-timeline--left-aligned :host.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__date{color:var(--eui-c-text);margin-top:var(--eui-s-xs);position:relative;font:var(--eui-f-m-semi-bold)}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiTimelineItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-timeline-item', hostDirectives: [
                        {
                            directive: BaseStatesDirective,
                            inputs: ['euiSecondary', 'euiPrimary', 'euiSuccess', 'euiInfo', 'euiWarning', 'euiDanger', 'euiVariant'],
                        },
                    ], template: "@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", styles: [".eui-21 :host.eui-timeline-item{--_color: var(--eui-c-secondary);--_border-color: var(--eui-c-secondary)}.eui-21 :host.eui-timeline-item--primary{--_color: var(--eui-c-primary);--_border-color: var(--eui-c-primary)}.eui-21 :host.eui-timeline-item--info{--_color: var(--eui-c-info);--_border-color: var(--eui-c-info)}.eui-21 :host.eui-timeline-item--success{--_color: var(--eui-c-success);--_border-color: var(--eui-c-success)}.eui-21 :host.eui-timeline-item--warning{--_color: var(--eui-c-warning);--_border-color: var(--eui-c-warning)}.eui-21 :host.eui-timeline-item--danger{--_color: var(--eui-c-danger);--_border-color: var(--eui-c-danger)}.eui-21 :host.eui-timeline-item{display:flex;flex-direction:row;list-style:none;margin-bottom:var(--eui-s-m);position:relative;width:100%}.eui-21 :host.eui-timeline-item .eui-timeline-item__left-content{display:list-item;min-width:calc(11 * var(--eui-s-m));position:relative;text-align:right;word-break:break-all}.eui-21 :host.eui-timeline-item .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){align-items:center;background-color:var(--eui-c-surface-container);border-color:var(--_border-color);border-radius:var(--eui-br-max);border-style:solid;border-width:3px;display:flex;flex-direction:column;max-height:calc(var(--eui-s-m) + var(--eui-s-3xs));margin:0 var(--eui-s-m);min-width:calc(var(--eui-s-m) + var(--eui-s-3xs));z-index:2}.eui-21 :host.eui-timeline-item .eui-timeline-item__icon:not(.eui-timeline-item__icon--group):after{background-color:var(--eui-c-secondary-border);content:\"\";height:calc(100% - var(--eui-s-3xs));position:absolute;top:calc(var(--eui-s-m) + var(--eui-s-3xs));width:2px;z-index:1}.eui-21 :host.eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{align-items:center;border-right:var(--eui-bw-s) dashed var(--eui-c-secondary-border);display:flex;flex-direction:column;height:auto;margin:2px calc(var(--eui-s-xl) + 1px)}.eui-21 :host.eui-timeline-item .eui-timeline-item__content{position:relative;top:calc(-1 * var(--eui-s-4xs));width:100%;color:var(--_color)}.eui-21 :host.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__title{color:var(--_color);font:var(--eui-f-m-semi-bold)}.eui-21 :host.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__subtitle{color:var(--eui-c-text-light)}.eui-21 :host.eui-timeline-item .eui-timeline-item__date{position:relative;color:var(--eui-c-text);font:var(--eui-f-m-semi-bold);top:calc(-.75 * var(--eui-s-4xs))}.eui-21 :host.eui-timeline-item .eui-timeline-item__time{position:relative;color:var(--eui-c-text-light);top:calc(-1 * var(--eui-s-4xs))}.eui-21 :host.eui-timeline-item:last-child .eui-timeline-item__icon:after{height:0}.eui-21 :host.eui-timeline-item--more{margin-bottom:0}.eui-21 :host.eui-timeline-item--more .eui-timeline-item__content{padding-bottom:var(--eui-s-m)}.eui-21 .eui-timeline--left-aligned :host.eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{margin:2px calc(var(--eui-s-xl) + 2px)}.eui-21 .eui-timeline--left-aligned :host.eui-timeline-item .eui-timeline-item__icon:after{left:calc(1 * var(--eui-s-m) + 10px)!important}.eui-21 .eui-timeline--left-aligned :host.eui-timeline-item .eui-timeline-item__content{padding-bottom:var(--eui-s-s)}.eui-21 .eui-timeline--left-aligned :host.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__date{color:var(--eui-c-text);margin-top:var(--eui-s-xs);position:relative;font:var(--eui-f-m-semi-bold)}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], e2eAttr: [{
                type: HostBinding,
                args: ['attr.data-e2e']
            }, {
                type: Input
            }], label: [{
                type: Input
            }], subLabel: [{
                type: Input
            }], date: [{
                type: Input
            }], dateStyleClass: [{
                type: Input
            }], time: [{
                type: Input
            }], timeStyleClass: [{
                type: Input
            }], isLeftAligned: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isGroup: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }] } });

const EUI_TIMELINE = [
    EuiTimelineComponent,
    EuiTimelineItemComponent,
];

/**
 * Generated bundle index. Do not edit.
 */

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