import * as i0 from '@angular/core';
import { inject, ChangeDetectorRef, booleanAttribute, Input, ViewChild, ViewEncapsulation, Component, NgModule } from '@angular/core';
import { LocaleService, EuiAppShellService, formatNumber } from '@eui/core';
import * as i1 from '@eui/components/eui-icon';
import { EUI_ICON } from '@eui/components/eui-icon';
import * as i2 from '@eui/components/eui-badge';
import { EUI_BADGE } from '@eui/components/eui-badge';
import { NgClass, AsyncPipe, DatePipe } from '@angular/common';

class EuiTimebarItemUI {
}
/**
 * @description
 * A component for displaying chronological events or milestones on a horizontal timeline.
 *
 * The EuiTimebarComponent renders a horizontal timeline with customizable items, labels,
 * markers, and optional grouping for overlapping items. It supports responsive behavior,
 * current date indication, and multiple display options.
 *
 */
class EuiTimebarComponent {
    constructor() {
        this.itemsUI = [];
        this.currentDate = new Date();
        /**
         * The class to be applied to the timebar column.
         *
         * @deprecated Calculation of it happens internally and will be removed in the future
         */
        this.timebarColumnClass = '';
        this.isMobile = false;
        this.isSomeStepsAreGrouped = false;
        this.extraTimelineLabelSpace = 21;
        this.e2eAttr = 'eui-timebar';
        /**
         * Format for displaying dates in the timeline.
         * @default 'yyyy-MM-dd'
         */
        this.dateFormat = 'yyyy-MM-dd';
        /**
         * Whether to show a legend with timeline item labels.
         * @default false
         */
        this.isShowLegend = false;
        /**
         * Whether to display indices instead of colors in the legend.
         * @default true
         */
        this.isShowLegendAsIndex = true;
        /**
         * Whether to display a marker for the current date on the timeline.
         * @default false
         */
        this.isShowCurrentDateMarker = false;
        /**
         * When true, keeps the current date marker visible even if the current date
         * is outside the timeline range by placing it at the edge of the timeline.
         * @default false
         */
        this.isCurrentDateMarkerAlwaysInRange = false;
        /**
         * Whether to group timeline items with overlapping labels to improve readability.
         * @default false
         */
        this.isGroupOverlappingLabels = false;
        this.maxStepWidth = 112; // 112px = 8rem = 2 x 4rem margin around starting and ending bullet.
        this.locale = inject(LocaleService);
        this.asService = inject(EuiAppShellService);
        this.cd = inject(ChangeDetectorRef);
    }
    ngOnInit() {
        this.subscription = this.asService.breakpoints$.subscribe((bkps) => {
            this.onBreakpointChange(bkps);
        });
    }
    ngAfterContentInit() {
        this.removeNullItems();
        this.sortItems();
        const startDate = this.items[0].date;
        const endDate = this.items[this.items.length - 1].date;
        this.items.forEach((item) => {
            let stepTypeClass = '';
            let tooltipColor = 'none';
            if (item.stepType) {
                stepTypeClass = 'eui-timebar__step--' + item.stepType;
                tooltipColor = item.stepType;
            }
            const isNumber = /^\d+\.\d+$/.test(item.label) || /^\d+$/.test(item.label);
            if (isNumber) {
                item.label = formatNumber(item.label, 2);
            }
            this.itemsUI.push({
                perc: this.calculatePercentage(item.date, startDate, endDate),
                item,
                stepTypeClass,
                tooltipColor,
            });
        });
        this.currentPerc = this.calculatePercentage(this.currentDate, startDate, endDate, true);
        this.markedPerc = this.calculatePercentage(this.markedDate, startDate, endDate, true);
        // initialize attributes
        this.isShowLegendGenerated = this.isShowLegend;
        this.isShowLegendAsIndexGenerated = this.isShowLegendAsIndex;
        this.isGroupOverlappingLabelsGenerated = this.isGroupOverlappingLabels;
        this.isMobile = false;
    }
    ngAfterViewChecked() {
        this.groupOverlappingLabels();
    }
    ngOnDestroy() {
        if (this.subscription) {
            this.subscription.unsubscribe();
        }
    }
    ngOnChanges(changes) {
        if (changes['markedDate']) {
            const change = changes['markedDate'];
            const startDate = this.items[0].date;
            const endDate = this.items[this.items.length - 1].date;
            this.markedPerc = this.calculatePercentage(change.currentValue, startDate, endDate);
        }
    }
    // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    onBreakpointChange(bkps) {
        if (bkps.isMobile) {
            this.isShowLegendGenerated = this.isShowLegendAsIndexGenerated = this.isMobile = true;
        }
        else {
            this.isShowLegendGenerated = this.isShowLegend;
            this.isShowLegendAsIndexGenerated = this.isShowLegendAsIndex;
            this.isMobile = false;
        }
    }
    trackByFn(index, item) {
        return item.item.label;
    }
    /**
     * Removes null and undefined items from the timeline collection.
     */
    removeNullItems() {
        if (this.items) {
            for (let i = 0; i < this.items.length; i++) {
                if (!this.items[i]) {
                    this.items.splice(i, 1);
                    i--;
                }
            }
        }
    }
    /**
     * Sorts the timeline items chronologically by their dates in ascending order.
     * Items with invalid or missing dates are treated as equal during comparison.
     */
    sortItems() {
        if (!this.items?.length) {
            return;
        }
        this.items = this.items
            .filter(a => this.areValidDates(a?.date))
            .sort(this.compareTimebarDates);
    }
    groupOverlappingLabels() {
        if (!this.isGroupOverlappingLabelsGenerated || !this.container || !this.itemsUI) {
            return;
        }
        this.clearGrouping();
        const containerWidth = this.container.nativeElement.clientWidth;
        const groupingThreshold = (this.maxStepWidth * 100) / containerWidth;
        let currentGroup = {
            startIndex: 0,
            items: [],
        };
        for (let i = 0; i < this.itemsUI.length; i++) {
            const currentItem = this.itemsUI[i];
            const previousItem = i > 0 ? this.itemsUI[i - 1] : null;
            if (!previousItem) {
                currentGroup.items.push(currentItem);
                continue;
            }
            const distance = Math.abs(currentItem.perc - previousItem.perc);
            if (distance <= groupingThreshold) {
                currentGroup.items.push(currentItem);
            }
            else {
                this.processGroup(currentGroup);
                currentGroup = {
                    startIndex: i,
                    items: [currentItem],
                };
            }
        }
        // Process the last group
        if (currentGroup.items.length > 0) {
            this.processGroup(currentGroup);
        }
        this.isSomeStepsAreGrouped = this.itemsUI.some(item => item.isGrouped);
        this.cd.detectChanges();
    }
    clearGrouping() {
        this.isSomeStepsAreGrouped = false;
        if (this.itemsUI) {
            for (const item of this.itemsUI) {
                delete item.isGrouped;
                delete item.groupIndex;
                delete item.groupLabel;
                delete item.groupEndDate;
            }
        }
        this.extraTimelineLabelSpace = 21;
    }
    /**
     * @deprecated it's not used anymore
     */
    calculateExtraTimelineLabelSpace() {
        if (this.itemsUI) {
            let maxLabelLength = 0;
            this.itemsUI
                .filter(i => i.item?.label)
                .forEach((i) => {
                maxLabelLength = Math.max(maxLabelLength, i.item.label.length);
            });
            if (maxLabelLength > 56) {
                // 56px = 4rem margin of the timeline itself.
                this.extraTimelineLabelSpace = maxLabelLength + 28; // 28px = 2rem = 1 line of text in height + margins
            }
        }
    }
    /**
     * Calculates the percentage position of a date within a given date range.
     *
     * @param date - The target date to calculate the position for
     * @param startDate - The beginning of the date range
     * @param endDate - The end of the date range
     * @param compensateForRange - When true, adjusts out-of-range values to maintain visualization constraints
     * @param alwaysInRange - When true, clamps the percentage to the 0-100 range
     * @returns The calculated percentage (0-100), or adjusted values (-3 or 103) if compensating for out-of-range dates
     *
     * @example
     * // Basic usage within range
     * calculatePercentage(new Date('2024-02-15'), new Date('2024-01-01'), new Date('2024-12-31'))
     *
     * // With range compensation
     * calculatePercentage(new Date('2025-01-01'), new Date('2024-01-01'), new Date('2024-12-31'), true)
     */
    calculatePercentage(date, startDate, endDate, compensateForRange = false, alwaysInRange = this.isCurrentDateMarkerAlwaysInRange) {
        if (!this.areValidDates(date, startDate, endDate)) {
            return 0;
        }
        const percentage = this.calculateBasePercentage(date, startDate, endDate);
        return compensateForRange
            ? this.adjustPercentageForRange(percentage, alwaysInRange)
            : percentage;
    }
    processGroup(group) {
        if (group.items.length <= 1) {
            return;
        }
        const firstItem = group.items[0];
        const lastItem = group.items[group.items.length - 1];
        // Update the first item in the group
        firstItem.groupEndDate = lastItem.item.date;
        firstItem.stepTypeClass = lastItem.item.stepType;
        const groupLabels = this.generateGroupLabels(group);
        firstItem.groupLabel = groupLabels.join(', ');
        firstItem.groupIndex = group.startIndex + 1;
        // Mark remaining items as grouped
        for (let i = 1; i < group.items.length; i++) {
            const item = group.items[i];
            item.isGrouped = true;
            item.groupIndex = group.startIndex + i + 1;
        }
    }
    generateGroupLabels(group) {
        return group.items.map((_, index) => (group.startIndex + index + 1).toString());
    }
    /**
     * Verifies that all required dates are valid Date objects.
     *
     * @param dates - The dates to validate
     * @returns True if all dates are valid, otherwise false
     */
    areValidDates(...dates) {
        return dates.every(date => date instanceof Date);
    }
    /**
     * Calculates the raw percentage position of a date within the range.
     *
     * @param date - The target date to calculate the position for
     * @param startDate - The beginning of the date range
     * @param endDate - The end of the date range
     *
     * @returns The calculated percentage (0-100) position on the range
     */
    calculateBasePercentage(date, startDate, endDate) {
        const timespan = endDate.getTime() - startDate.getTime();
        const position = date.getTime() - startDate.getTime();
        return (position / timespan) * 100;
    }
    /**
     * Handles date positions that fall outside the specified range by applying boundary adjustments.
     *
     * For dates beyond the range boundaries, this method adjusts their position values
     * to maintain consistent TimeBar visualization. When isCurrentDateMarkerAlwaysInRange
     * is enabled, positions are clamped to the boundaries (0-100). Otherwise, they extend
     * slightly beyond (-3 or 103) to indicate out-of-range status.
     *
     * @param percentage - The calculated percentage position
     * @param alwaysInRange - When true, clamps the percentage to the 0-100 range
     *
     * @returns The adjusted percentage value
     */
    adjustPercentageForRange(percentage, alwaysInRange) {
        if (percentage > 100) {
            return alwaysInRange ? 100 : 103;
        }
        if (percentage <= 0) {
            return alwaysInRange ? 0 : -3;
        }
        return percentage;
    }
    /**
     * Compares two timeline items by their dates for sorting.
     *
     * @param firstItem - The first item to compare
     * @param secondItem - The second item to compare
     * @returns Negative if first date is earlier, positive if later, zero if equal
     */
    compareTimebarDates(firstItem, secondItem) {
        return firstItem.date.getTime() - secondItem.date.getTime();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiTimebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: EuiTimebarComponent, isStandalone: true, selector: "eui-timebar", inputs: { e2eAttr: "e2eAttr", markedDate: "markedDate", items: "items", startLabel: "startLabel", endLabel: "endLabel", dateFormat: "dateFormat", isShowLegend: ["isShowLegend", "isShowLegend", booleanAttribute], isShowLegendAsIndex: ["isShowLegendAsIndex", "isShowLegendAsIndex", booleanAttribute], isShowCurrentDateMarker: ["isShowCurrentDateMarker", "isShowCurrentDateMarker", booleanAttribute], isCurrentDateMarkerAlwaysInRange: ["isCurrentDateMarkerAlwaysInRange", "isCurrentDateMarkerAlwaysInRange", booleanAttribute], isGroupOverlappingLabels: ["isGroupOverlappingLabels", "isGroupOverlappingLabels", booleanAttribute] }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"row eui-u-flex\" #container>\n    @if(startLabel) {\n        <div class=\"col-2 eui-timebar__start-label\">\n            {{ startLabel }}\n        </div>\n    }\n    <div class=\"{{timebarColumnClass}} {{ 'col-' + ((startLabel ? -2 : 0) + (endLabel ? -2 : 0) + 12) }}\">\n        <div class=\"eui-timebar\" [style.marginBottom.px]=\"extraTimelineLabelSpace\" attr.data-e2e=\"{{ e2eAttr }}\">\n            @if(isShowCurrentDateMarker) {\n                <div\n                    class=\"eui-timebar__current-progress\"\n                    [style.width.%]=\"currentPerc >= 100 ? 100 : currentPerc\"></div>\n            }\n            @if(markedDate) {\n                <div class=\"eui-timebar__current-progress\" [style.width.%]=\"markedPerc >= 100 ? 100 : markedPerc\"></div>\n            }\n\n            @for (item of itemsUI; let i = $index; track i) {\n                @if(!item.isGrouped) {\n                    <div\n                        class=\"eui-timebar__step\"\n                        [ngClass]=\"item.stepTypeClass\"\n                        [style.left.%]=\"item.perc\"\n                        [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n                        @if(!isMobile) {\n                            <div class=\"eui-timebar__step-date-item\" [class.eui-timebar__step-date-item--with-end-date]=\"item.groupEndDate\">\n                                @if(item.groupEndDate) {\n                                    <span\n                                        class=\"eui-timebar__grouped__step {{\n                                        item.stepTypeClass ? 'eui-timebar__step--' + item.stepTypeClass : ''}}\">\n                                        {{ item.groupEndDate | date: dateFormat: null: (locale.getState() | async).id }}\n                                    </span>\n                                }\n                                <span\n                                    class=\"{{ item.tooltipColor ? 'eui-timebar__step--' + item.tooltipColor : '' }}\"\n                                    [class.eui-timebar__grouped__step]=\"item.groupEndDate\">\n                                    {{ item.item.date | date: dateFormat: null: (locale.getState() | async).id }}\n                                </span>\n                            </div>\n                        }\n                        @if(!isShowLegendGenerated) {\n                            <div [style.left.%]=\"!isMobile ? item.perc : null\" class=\"eui-timebar__step-label\">\n                                @if(!item.groupLabel) {\n                                    <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n                                }\n                                @if(item.groupLabel) {\n                                    <span title=\"{{ item.groupLabel }}\">{{ item.groupLabel }}</span>\n                                }\n                            </div>\n                        }\n                        @if(isShowLegendGenerated && isShowLegendAsIndexGenerated) {\n                            <div\n                                [style.left.%]=\"!isMobile ? item.perc : null\"\n                                class=\"eui-timebar__step-label\">\n                                {{ !item.groupLabel ? i + 1 : item.groupLabel }}\n                            </div>\n                        }\n                    </div>\n                }\n            }\n\n            @if(isShowCurrentDateMarker) {\n                <div\n                    class=\"eui-timebar__current-date-marker\"\n                    [style.left.%]=\"currentPerc\"\n                    title=\"{{ currentDate | date: dateFormat: null: (locale.getState() | async).id }}\">\n                    <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\"></eui-icon-svg>\n                </div>\n                <div class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"currentPerc\">\n                    <eui-icon-svg icon=\"ellipse:sharp\" size=\"s\"></eui-icon-svg>\n                </div>\n            }\n            @if(markedDate) {\n                <div\n                    class=\"eui-timebar__current-date-marker\"\n                    [style.left.%]=\"markedPerc\"\n                    title=\"{{ markedDate | date: dateFormat: null: (locale.getState() | async).id }}\">\n                    <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\"></eui-icon-svg>\n                </div>\n                <div class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"markedPerc\">\n                    <eui-icon-svg icon=\"ellipse:sharp\" size=\"s\"></eui-icon-svg>\n                </div>\n            }\n        </div>\n    </div>\n    @if(endLabel) {\n        <div class=\"col-2 eui-timebar__end-label\">\n            {{ endLabel }}\n        </div>\n    }\n</div>\n<div class=\"row eui-u-flex-justify-content-center\">\n    <div class=\"{{timebarColumnClass}} {{ 'col-md-' + ((startLabel ? -2 : 0) + (endLabel ? -2 : 0) + 12) }}\">\n        @if (isShowLegendGenerated || isSomeStepsAreGrouped) {\n        <div class=\"eui-timebar__legend\">\n            @for (item of itemsUI; let i = $index; track i){\n                @if(isShowLegendGenerated) {\n                    <div class=\"eui-timebar__legend-item\">\n                        @if(!isShowLegendAsIndexGenerated) {\n                            <div class=\"eui-timebar__legend-item-icon\">\n                                <eui-icon-svg icon=\"ellipse:sharp\" size=\"s\" fillColor=\"{{ item.item.stepType }}\"></eui-icon-svg>\n                            </div>\n                        } @else {\n                            <div class=\"eui-timebar__legend-item-index-wrapper\">\n                                <eui-badge euiSizeL euiPrimary>{{ i + 1 }}</eui-badge>\n                            </div>\n                        }\n                        <div class=\"eui-timebar__legend-item-label\">\n                            @if(isMobile) {\n                                <strong>{{ item.item.date | date: dateFormat: null: (locale.getState() | async).id }}</strong> -\n                            }\n                            {{ item.item.label }}\n                        </div>\n                    </div>\n                }\n                @if(!isShowLegendGenerated && (item.groupLabel || item.isGrouped)) {\n                    <div class=\"eui-timebar__legend-item\">\n                        <div class=\"eui-timebar__legend-item-index-wrapper\">\n                            <eui-badge euiSizeL euiPrimary>{{ item.groupIndex }}</eui-badge>\n                        </div>\n                        <div class=\"eui-timebar__legend-item-label\">\n                            <strong>{{ item.item.date | date: dateFormat: null: (locale.getState() | async).id }}</strong> - {{ item.item.label }}\n                        </div>\n                    </div>\n                }\n            }\n        </div>\n        }\n    </div>\n</div>\n", styles: [".eui-19 .eui-timebar{border-bottom:2px solid var(--eui-c-divider);margin:6rem 3rem;padding:5px;position:relative}.eui-19 .eui-timebar__step{border:7px solid var(--eui-c-s-secondary);border-radius:var(--eui-br-max);height:14px;position:absolute;width:14px}.eui-19 .eui-timebar__step-date-item{background-color:var(--eui-c-s-secondary-surface-light);color:var(--eui-c-s-secondary-on-surface-light);border:1px solid var(--eui-c-s-secondary-border);border-radius:var(--eui-br-max);max-width:8rem;min-width:6rem;padding:var(--eui-s-2xs);position:absolute;text-align:center;top:-2.5rem;transform:rotate(65deg);transform-origin:50% -175%;white-space:normal;font:var(--eui-f-s)}.eui-19 .eui-timebar__step-date-item--with-end-date{left:2.5rem;top:-1.75rem}.eui-19 .eui-timebar__step--with-current-date-marker.hint--top:before,.eui-19 .eui-timebar__step--with-current-date-marker.hint--top:after{bottom:25px}.eui-19 .eui-timebar__current-progress{border-bottom:3px solid var(--eui-c-s-primary-base);padding-top:5px;position:absolute}.eui-19 .eui-timebar__current-date-marker{color:var(--eui-c-s-danger-base);margin-left:-2px;position:absolute;top:calc(-1 * var(--eui-s-m) - var(--eui-s-2xs))}.eui-19 .eui-timebar__current-date-marker-step{bottom:calc(-1 * var(--eui-s-m) - 2px);color:var(--eui-c-s-danger-base);position:absolute}.eui-19 .eui-timebar__start-label,.eui-19 .eui-timebar__end-label{margin-top:6.5rem;font:var(--eui-f-s-bold)}.eui-19 .eui-timebar__start-label{text-align:right}.eui-19 .eui-timebar__step-date-item--with-end-date{margin:0;padding:0}.eui-19 .eui-timebar__step-label{margin-left:-4rem;margin-top:.7rem;overflow:hidden;position:absolute;text-align:center;width:8rem}.eui-19 .eui-timebar__legend{margin-left:var(--eui-s-s);margin-top:3rem}.eui-19 .eui-timebar__legend-item{align-items:center;display:flex;padding:var(--eui-s-xs) var(--eui-s-xs) var(--eui-s-xs) 0;width:100%}.eui-19 .eui-timebar__legend-item-label{flex:1}.eui-19 .eui-timebar__legend-item-index-wrapper{padding:var(--eui-s-xs) var(--eui-s-s)}.eui-19 .eui-timebar__grouped__step{border-radius:var(--eui-br-m);display:block;padding:3px 8px}.eui-19 .eui-timebar__grouped__step.eui-timebar__step--info{background-color:var(--eui-c-s-info-surface-light)}.eui-19 .eui-timebar__grouped__step.eui-timebar__step--success{background-color:var(--eui-c-s-success-surface-light)}.eui-19 .eui-timebar__grouped__step.eui-timebar__step--warning{background-color:var(--eui-c-s-warning-surface-light)}.eui-19 .eui-timebar__grouped__step.eui-timebar__step--danger{background-color:var(--eui-c-s-danger-surface-light)}.eui-19 .eui-timebar__step--info{border-color:var(--eui-c-s-info-base)}.eui-19 .eui-timebar__step--info .eui-timebar__step-date-item{background-color:var(--eui-c-s-info-surface-light);color:var(--eui-c-s-info-on-surface-light);border:1px solid var(--eui-c-s-info-border)}.eui-19 .eui-timebar__step--success{border-color:var(--eui-c-s-success-base)}.eui-19 .eui-timebar__step--success .eui-timebar__step-date-item{background-color:var(--eui-c-s-success-surface-light);color:var(--eui-c-s-success-on-surface-light);border:1px solid var(--eui-c-s-success-border)}.eui-19 .eui-timebar__step--warning{border-color:var(--eui-c-s-warning-base)}.eui-19 .eui-timebar__step--warning .eui-timebar__step-date-item{background-color:var(--eui-c-s-warning-surface-light);color:var(--eui-c-s-warning-on-surface-light);border:1px solid var(--eui-c-s-warning-border)}.eui-19 .eui-timebar__step--danger{border-color:var(--eui-c-s-danger-base)}.eui-19 .eui-timebar__step--danger .eui-timebar__step-date-item{background-color:var(--eui-c-s-danger-surface-light);color:var(--eui-c-s-danger-on-surface-light);border:1px solid var(--eui-c-s-danger-border)}.eui-19 .eui-timebar__legend-item-icon{color:var(--eui-c-s-primary);fill:var(--eui-c-s-primary);width:var(--eui-s-3xl);height:var(--eui-s-3xl)}.eui-19 .eui-timebar__legend-item-icon--info{color:var(--eui-c-s-info)}.eui-19 .eui-timebar__legend-item-icon--success{color:var(--eui-c-s-success)}.eui-19 .eui-timebar__legend-item-icon--warning{color:var(--eui-c-s-warning)}.eui-19 .eui-timebar__legend-item-icon--danger{color:var(--eui-c-s-danger)}@media screen and (max-width: 767px){.eui-19 .eui-timebar{margin:5rem var(--eui-s-m)}.eui-19 .eui-timebar__legend{margin-bottom:var(--eui-s-l);margin-left:18px}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: i1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i2.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiTimebarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-timebar', encapsulation: ViewEncapsulation.None, imports: [
                        NgClass,
                        AsyncPipe,
                        DatePipe,
                        ...EUI_ICON,
                        ...EUI_BADGE,
                    ], template: "<div class=\"row eui-u-flex\" #container>\n    @if(startLabel) {\n        <div class=\"col-2 eui-timebar__start-label\">\n            {{ startLabel }}\n        </div>\n    }\n    <div class=\"{{timebarColumnClass}} {{ 'col-' + ((startLabel ? -2 : 0) + (endLabel ? -2 : 0) + 12) }}\">\n        <div class=\"eui-timebar\" [style.marginBottom.px]=\"extraTimelineLabelSpace\" attr.data-e2e=\"{{ e2eAttr }}\">\n            @if(isShowCurrentDateMarker) {\n                <div\n                    class=\"eui-timebar__current-progress\"\n                    [style.width.%]=\"currentPerc >= 100 ? 100 : currentPerc\"></div>\n            }\n            @if(markedDate) {\n                <div class=\"eui-timebar__current-progress\" [style.width.%]=\"markedPerc >= 100 ? 100 : markedPerc\"></div>\n            }\n\n            @for (item of itemsUI; let i = $index; track i) {\n                @if(!item.isGrouped) {\n                    <div\n                        class=\"eui-timebar__step\"\n                        [ngClass]=\"item.stepTypeClass\"\n                        [style.left.%]=\"item.perc\"\n                        [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n                        @if(!isMobile) {\n                            <div class=\"eui-timebar__step-date-item\" [class.eui-timebar__step-date-item--with-end-date]=\"item.groupEndDate\">\n                                @if(item.groupEndDate) {\n                                    <span\n                                        class=\"eui-timebar__grouped__step {{\n                                        item.stepTypeClass ? 'eui-timebar__step--' + item.stepTypeClass : ''}}\">\n                                        {{ item.groupEndDate | date: dateFormat: null: (locale.getState() | async).id }}\n                                    </span>\n                                }\n                                <span\n                                    class=\"{{ item.tooltipColor ? 'eui-timebar__step--' + item.tooltipColor : '' }}\"\n                                    [class.eui-timebar__grouped__step]=\"item.groupEndDate\">\n                                    {{ item.item.date | date: dateFormat: null: (locale.getState() | async).id }}\n                                </span>\n                            </div>\n                        }\n                        @if(!isShowLegendGenerated) {\n                            <div [style.left.%]=\"!isMobile ? item.perc : null\" class=\"eui-timebar__step-label\">\n                                @if(!item.groupLabel) {\n                                    <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n                                }\n                                @if(item.groupLabel) {\n                                    <span title=\"{{ item.groupLabel }}\">{{ item.groupLabel }}</span>\n                                }\n                            </div>\n                        }\n                        @if(isShowLegendGenerated && isShowLegendAsIndexGenerated) {\n                            <div\n                                [style.left.%]=\"!isMobile ? item.perc : null\"\n                                class=\"eui-timebar__step-label\">\n                                {{ !item.groupLabel ? i + 1 : item.groupLabel }}\n                            </div>\n                        }\n                    </div>\n                }\n            }\n\n            @if(isShowCurrentDateMarker) {\n                <div\n                    class=\"eui-timebar__current-date-marker\"\n                    [style.left.%]=\"currentPerc\"\n                    title=\"{{ currentDate | date: dateFormat: null: (locale.getState() | async).id }}\">\n                    <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\"></eui-icon-svg>\n                </div>\n                <div class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"currentPerc\">\n                    <eui-icon-svg icon=\"ellipse:sharp\" size=\"s\"></eui-icon-svg>\n                </div>\n            }\n            @if(markedDate) {\n                <div\n                    class=\"eui-timebar__current-date-marker\"\n                    [style.left.%]=\"markedPerc\"\n                    title=\"{{ markedDate | date: dateFormat: null: (locale.getState() | async).id }}\">\n                    <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\"></eui-icon-svg>\n                </div>\n                <div class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"markedPerc\">\n                    <eui-icon-svg icon=\"ellipse:sharp\" size=\"s\"></eui-icon-svg>\n                </div>\n            }\n        </div>\n    </div>\n    @if(endLabel) {\n        <div class=\"col-2 eui-timebar__end-label\">\n            {{ endLabel }}\n        </div>\n    }\n</div>\n<div class=\"row eui-u-flex-justify-content-center\">\n    <div class=\"{{timebarColumnClass}} {{ 'col-md-' + ((startLabel ? -2 : 0) + (endLabel ? -2 : 0) + 12) }}\">\n        @if (isShowLegendGenerated || isSomeStepsAreGrouped) {\n        <div class=\"eui-timebar__legend\">\n            @for (item of itemsUI; let i = $index; track i){\n                @if(isShowLegendGenerated) {\n                    <div class=\"eui-timebar__legend-item\">\n                        @if(!isShowLegendAsIndexGenerated) {\n                            <div class=\"eui-timebar__legend-item-icon\">\n                                <eui-icon-svg icon=\"ellipse:sharp\" size=\"s\" fillColor=\"{{ item.item.stepType }}\"></eui-icon-svg>\n                            </div>\n                        } @else {\n                            <div class=\"eui-timebar__legend-item-index-wrapper\">\n                                <eui-badge euiSizeL euiPrimary>{{ i + 1 }}</eui-badge>\n                            </div>\n                        }\n                        <div class=\"eui-timebar__legend-item-label\">\n                            @if(isMobile) {\n                                <strong>{{ item.item.date | date: dateFormat: null: (locale.getState() | async).id }}</strong> -\n                            }\n                            {{ item.item.label }}\n                        </div>\n                    </div>\n                }\n                @if(!isShowLegendGenerated && (item.groupLabel || item.isGrouped)) {\n                    <div class=\"eui-timebar__legend-item\">\n                        <div class=\"eui-timebar__legend-item-index-wrapper\">\n                            <eui-badge euiSizeL euiPrimary>{{ item.groupIndex }}</eui-badge>\n                        </div>\n                        <div class=\"eui-timebar__legend-item-label\">\n                            <strong>{{ item.item.date | date: dateFormat: null: (locale.getState() | async).id }}</strong> - {{ item.item.label }}\n                        </div>\n                    </div>\n                }\n            }\n        </div>\n        }\n    </div>\n</div>\n", styles: [".eui-19 .eui-timebar{border-bottom:2px solid var(--eui-c-divider);margin:6rem 3rem;padding:5px;position:relative}.eui-19 .eui-timebar__step{border:7px solid var(--eui-c-s-secondary);border-radius:var(--eui-br-max);height:14px;position:absolute;width:14px}.eui-19 .eui-timebar__step-date-item{background-color:var(--eui-c-s-secondary-surface-light);color:var(--eui-c-s-secondary-on-surface-light);border:1px solid var(--eui-c-s-secondary-border);border-radius:var(--eui-br-max);max-width:8rem;min-width:6rem;padding:var(--eui-s-2xs);position:absolute;text-align:center;top:-2.5rem;transform:rotate(65deg);transform-origin:50% -175%;white-space:normal;font:var(--eui-f-s)}.eui-19 .eui-timebar__step-date-item--with-end-date{left:2.5rem;top:-1.75rem}.eui-19 .eui-timebar__step--with-current-date-marker.hint--top:before,.eui-19 .eui-timebar__step--with-current-date-marker.hint--top:after{bottom:25px}.eui-19 .eui-timebar__current-progress{border-bottom:3px solid var(--eui-c-s-primary-base);padding-top:5px;position:absolute}.eui-19 .eui-timebar__current-date-marker{color:var(--eui-c-s-danger-base);margin-left:-2px;position:absolute;top:calc(-1 * var(--eui-s-m) - var(--eui-s-2xs))}.eui-19 .eui-timebar__current-date-marker-step{bottom:calc(-1 * var(--eui-s-m) - 2px);color:var(--eui-c-s-danger-base);position:absolute}.eui-19 .eui-timebar__start-label,.eui-19 .eui-timebar__end-label{margin-top:6.5rem;font:var(--eui-f-s-bold)}.eui-19 .eui-timebar__start-label{text-align:right}.eui-19 .eui-timebar__step-date-item--with-end-date{margin:0;padding:0}.eui-19 .eui-timebar__step-label{margin-left:-4rem;margin-top:.7rem;overflow:hidden;position:absolute;text-align:center;width:8rem}.eui-19 .eui-timebar__legend{margin-left:var(--eui-s-s);margin-top:3rem}.eui-19 .eui-timebar__legend-item{align-items:center;display:flex;padding:var(--eui-s-xs) var(--eui-s-xs) var(--eui-s-xs) 0;width:100%}.eui-19 .eui-timebar__legend-item-label{flex:1}.eui-19 .eui-timebar__legend-item-index-wrapper{padding:var(--eui-s-xs) var(--eui-s-s)}.eui-19 .eui-timebar__grouped__step{border-radius:var(--eui-br-m);display:block;padding:3px 8px}.eui-19 .eui-timebar__grouped__step.eui-timebar__step--info{background-color:var(--eui-c-s-info-surface-light)}.eui-19 .eui-timebar__grouped__step.eui-timebar__step--success{background-color:var(--eui-c-s-success-surface-light)}.eui-19 .eui-timebar__grouped__step.eui-timebar__step--warning{background-color:var(--eui-c-s-warning-surface-light)}.eui-19 .eui-timebar__grouped__step.eui-timebar__step--danger{background-color:var(--eui-c-s-danger-surface-light)}.eui-19 .eui-timebar__step--info{border-color:var(--eui-c-s-info-base)}.eui-19 .eui-timebar__step--info .eui-timebar__step-date-item{background-color:var(--eui-c-s-info-surface-light);color:var(--eui-c-s-info-on-surface-light);border:1px solid var(--eui-c-s-info-border)}.eui-19 .eui-timebar__step--success{border-color:var(--eui-c-s-success-base)}.eui-19 .eui-timebar__step--success .eui-timebar__step-date-item{background-color:var(--eui-c-s-success-surface-light);color:var(--eui-c-s-success-on-surface-light);border:1px solid var(--eui-c-s-success-border)}.eui-19 .eui-timebar__step--warning{border-color:var(--eui-c-s-warning-base)}.eui-19 .eui-timebar__step--warning .eui-timebar__step-date-item{background-color:var(--eui-c-s-warning-surface-light);color:var(--eui-c-s-warning-on-surface-light);border:1px solid var(--eui-c-s-warning-border)}.eui-19 .eui-timebar__step--danger{border-color:var(--eui-c-s-danger-base)}.eui-19 .eui-timebar__step--danger .eui-timebar__step-date-item{background-color:var(--eui-c-s-danger-surface-light);color:var(--eui-c-s-danger-on-surface-light);border:1px solid var(--eui-c-s-danger-border)}.eui-19 .eui-timebar__legend-item-icon{color:var(--eui-c-s-primary);fill:var(--eui-c-s-primary);width:var(--eui-s-3xl);height:var(--eui-s-3xl)}.eui-19 .eui-timebar__legend-item-icon--info{color:var(--eui-c-s-info)}.eui-19 .eui-timebar__legend-item-icon--success{color:var(--eui-c-s-success)}.eui-19 .eui-timebar__legend-item-icon--warning{color:var(--eui-c-s-warning)}.eui-19 .eui-timebar__legend-item-icon--danger{color:var(--eui-c-s-danger)}@media screen and (max-width: 767px){.eui-19 .eui-timebar{margin:5rem var(--eui-s-m)}.eui-19 .eui-timebar__legend{margin-bottom:var(--eui-s-l);margin-left:18px}}\n"] }]
        }], propDecorators: { container: [{
                type: ViewChild,
                args: ['container']
            }], e2eAttr: [{
                type: Input
            }], markedDate: [{
                type: Input
            }], items: [{
                type: Input
            }], startLabel: [{
                type: Input
            }], endLabel: [{
                type: Input
            }], dateFormat: [{
                type: Input
            }], isShowLegend: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isShowLegendAsIndex: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isShowCurrentDateMarker: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isCurrentDateMarkerAlwaysInRange: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isGroupOverlappingLabels: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }] } });
/**
 * @description
 * Angular module that provides the EuiTimebarComponent.
 *
 * @deprecated this component will be discontinued as of eUI 21 (end of 2025)
 */
class EuiTimebarModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiTimebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: EuiTimebarModule, imports: [EuiTimebarComponent], exports: [EuiTimebarComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiTimebarModule, imports: [EuiTimebarComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiTimebarModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [EuiTimebarComponent],
                    exports: [EuiTimebarComponent],
                }]
        }] });

/**
 * @deprecated use the {@link EuiTimebarItem} interface instead.
 */
// TODO: v17 remove this class - unnecessary
// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
class EuiTimebarItem {
    constructor(values = {}) {
        Object.assign(this, values);
    }
}

/**
 * @deprecated this component will be discontinued as of eUI 21 (end of 2025)
 */
const EUI_TIMEBAR = [
    EuiTimebarComponent,
];
// export { EuiTimebarComponent as EuiTimebar } from './eui-timebar.component';

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

export { EUI_TIMEBAR, EuiTimebarComponent, EuiTimebarItem, EuiTimebarItemUI, EuiTimebarModule };
//# sourceMappingURL=eui-components-eui-timebar.mjs.map
