import * as i0 from '@angular/core';
import { Directive, Injectable, ViewChild, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, DestroyRef, ContentChildren, Injector, afterNextRender, HostBinding, NgModule } from '@angular/core';
import { range, resizeObservable } from '@fundamental-ngx/cdk/utils';
import { debounceTime } from 'rxjs';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { SkeletonComponent } from '@fundamental-ngx/core/skeleton';
import { FD_DEFAULT_ICON_FONT_FAMILY, IconComponent } from '@fundamental-ngx/core/icon';
import { TextComponent } from '@fundamental-ngx/core/text';

class TimelineNodeHeaderDirective {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TimelineNodeHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: TimelineNodeHeaderDirective, isStandalone: true, selector: "fd-timeline-node-header", host: { classAttribute: "fd-timeline__post-header-container" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TimelineNodeHeaderDirective, decorators: [{
            type: Directive,
            args: [{
                    // eslint-disable-next-line @angular-eslint/directive-selector
                    selector: 'fd-timeline-node-header',
                    host: {
                        class: 'fd-timeline__post-header-container'
                    },
                    standalone: true
                }]
        }] });

class BaseStrategy {
    constructor() {
        /** Offset between nodes lines */
        this.SMALL_OFFSET = 14;
        /** Offset between nodes lines with icon */
        this.BIG_OFFSET = 30;
        /** Offset for second list in within vertical axis */
        this.VERTICAL_TOP_LIST_OFFSET = 24;
    }
    /** @hidden */
    _getOffset(node) {
        return node.glyph ? this.BIG_OFFSET : this.SMALL_OFFSET;
    }
    /** @hidden */
    _getTwoListFromOne(nodes) {
        const lastIndexInFirstList = Math.ceil(nodes.length / 2);
        const firstList = nodes.slice(0, lastIndexInFirstList);
        const secondList = nodes.slice(lastIndexInFirstList, nodes.length);
        return [firstList, secondList];
    }
    /** @hidden */
    _setStylesForSingleList(nodes, axis) {
        const [offsetProperty, sizeProperty] = axis === 'horizontal' ? ['offsetLeft', 'width'] : ['offsetTop', 'height'];
        nodes.forEach((node, index) => {
            const nextNode = nodes[index + 1];
            // Set line size depend on where next node item is started
            if (nextNode) {
                const size = nextNode.el.nativeElement[offsetProperty] -
                    node.el.nativeElement[offsetProperty] -
                    this._getOffset(node);
                node.lineEl.nativeElement.style[sizeProperty] = size + 'px';
            }
            else {
                // Hide last timeline line in list
                node.lineEl.nativeElement.style.opacity = '0';
            }
        });
    }
    /** @hidden */
    _setStylesForDoubleList(nodes, axis) {
        const [firstList, secondList] = this._getTwoListFromOne(nodes);
        const [offsetProp, sizeProp, sizeOffsetProp] = axis === 'horizontal' ? ['offsetLeft', 'width', 'offsetWidth'] : ['offsetTop', 'height', 'offsetHeight'];
        // Set styles for second list
        secondList.forEach((node, index) => {
            const el = node.el.nativeElement;
            const parallelNodeEl = firstList[index].el.nativeElement;
            // Handle case when bottom edge of item in second list higher than top edge of next item in first list
            // Actual only for vertical axis because items in horizontal axis have fixed size
            if (axis === 'vertical') {
                secondList[index].el.nativeElement.style.marginTop = `${this.SMALL_OFFSET}px`;
                const prevNode = secondList[index - 1];
                const diffBetween = prevNode
                    ? parallelNodeEl.offsetTop +
                        this.VERTICAL_TOP_LIST_OFFSET -
                        (prevNode.el.nativeElement.offsetTop + prevNode.el.nativeElement.offsetHeight)
                    : -1;
                if (diffBetween > 0) {
                    prevNode.el.nativeElement.style.marginBottom = `${diffBetween}px`;
                }
            }
            // Set line size depend on where next node item is started
            const diff = parallelNodeEl[offsetProp] + parallelNodeEl[sizeOffsetProp] - el[offsetProp] - this._getOffset(node);
            node.lineEl.nativeElement.style[sizeProp] = diff + 'px';
        });
        // Set styles for first list
        firstList.forEach((node, index) => {
            const el = node.el.nativeElement;
            const parallelNode = secondList[index];
            // Set line size depend on where next node item is started
            if (parallelNode) {
                const diff = parallelNode.el.nativeElement[offsetProp] - el[offsetProp] - this._getOffset(node);
                node.lineEl.nativeElement.style[sizeProp] = diff + 'px';
            }
        });
        // Hide last timeline line in lists
        const lastNode = firstList.length === secondList.length
            ? secondList[secondList.length - 1]
            : firstList[firstList.length - 1];
        lastNode.lineEl.nativeElement.style.opacity = '0';
    }
}

class HorizontalDoubleSidesStrategy extends BaseStrategy {
    /** Calculate styles for timeline nodes */
    calculateStyles(nodes) {
        this._setStylesForDoubleList(nodes, 'horizontal');
    }
}

class HorizontalSingleSideStrategy extends BaseStrategy {
    /** Calculate styles for timeline nodes */
    calculateStyles(nodes) {
        this._setStylesForSingleList(nodes, 'horizontal');
    }
}

class VerticalDoubleSidesStrategy extends BaseStrategy {
    /** Calculate styles for timeline nodes */
    calculateStyles(nodes) {
        this._setStylesForDoubleList(nodes, 'vertical');
    }
}

class VerticalSingleSideStrategy extends BaseStrategy {
    /** Calculate styles for timeline nodes */
    calculateStyles(nodes) {
        this._setStylesForSingleList(nodes, 'vertical');
    }
}

class PositionStrategyFactory {
    /** Get timeline position strategy */
    static getStrategy(strategy) {
        switch (strategy) {
            case 'vertical-right':
                return new VerticalSingleSideStrategy();
            case 'vertical-left':
                return new VerticalSingleSideStrategy();
            case 'vertical-double':
                return new VerticalDoubleSidesStrategy();
            case 'horizontal-top':
                return new HorizontalSingleSideStrategy();
            case 'horizontal-bottom':
                return new HorizontalSingleSideStrategy();
            case 'horizontal-double':
                return new HorizontalDoubleSidesStrategy();
            default:
                throw Error(`Unsupported strategy: ${strategy}`);
        }
    }
}

class TimelinePositionControlService {
    constructor() {
        /* List of TimelineNodeComponent */
        /** @hidden */
        this._nodeItems = [];
    }
    /** Calculate styles for timeline nodes */
    calculatePositions() {
        this._positionStrategy.calculateStyles(this._nodeItems);
    }
    /** Set strategy for current axis and layout */
    setStrategy(strategy) {
        this._positionStrategy = PositionStrategyFactory.getStrategy(strategy);
    }
    /** Register TimelineNodeComponent */
    registerNode(node) {
        this._nodeItems.push(node);
    }
    /** Remove TimelineNodeComponent */
    removeNode(node) {
        this._nodeItems = this._nodeItems.filter((item) => item !== node);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TimelinePositionControlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TimelinePositionControlService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TimelinePositionControlService, decorators: [{
            type: Injectable
        }] });

class TimelineNodeComponent {
    /** @hidden */
    constructor(el, _timelinePositionControl) {
        this.el = el;
        this._timelinePositionControl = _timelinePositionControl;
        /** Glyph font family */
        this.glyphFont = FD_DEFAULT_ICON_FONT_FAMILY;
        /** Aria label for the current timeline node. */
        this.ariaLabel = 'timelineitem';
    }
    /** @hidden */
    ngOnInit() {
        this._timelinePositionControl.registerNode(this);
    }
    /** @hidden */
    ngOnDestroy() {
        this._timelinePositionControl.removeNode(this);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TimelineNodeComponent, deps: [{ token: i0.ElementRef }, { token: TimelinePositionControlService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TimelineNodeComponent, isStandalone: true, selector: "fd-timeline-node", inputs: { glyph: "glyph", glyphFont: "glyphFont", ariaLabel: "ariaLabel" }, host: { properties: { "class.fd-timeline__node-wrapper--icon": "!!glyph" }, classAttribute: "fd-timeline__node-wrapper" }, viewQueries: [{ propertyName: "lineEl", first: true, predicate: ["lineEl"], descendants: true }], ngImport: i0, template: "<div class=\"fd-timeline__node-container\">\n    <div class=\"fd-timeline__icon-wrapper\">\n        <div class=\"fd-timeline__node\" [class.fd-timeline__node--icon]=\"!!glyph\">\n            @if (glyph) {\n                <fd-icon [glyph]=\"glyph\" [font]=\"glyphFont\"></fd-icon>\n            }\n        </div>\n    </div>\n    <div #lineEl class=\"fd-timeline__connecting-line\"></div>\n</div>\n<div role=\"timelineitem\" [attr.aria-label]=\"ariaLabel\" class=\"fd-timeline__post\">\n    <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "size", "class", "ariaLabel", "ariaHidden"], outputs: ["ariaHiddenChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TimelineNodeComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fd-timeline-node', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        class: 'fd-timeline__node-wrapper',
                        '[class.fd-timeline__node-wrapper--icon]': '!!glyph'
                    }, imports: [IconComponent], template: "<div class=\"fd-timeline__node-container\">\n    <div class=\"fd-timeline__icon-wrapper\">\n        <div class=\"fd-timeline__node\" [class.fd-timeline__node--icon]=\"!!glyph\">\n            @if (glyph) {\n                <fd-icon [glyph]=\"glyph\" [font]=\"glyphFont\"></fd-icon>\n            }\n        </div>\n    </div>\n    <div #lineEl class=\"fd-timeline__connecting-line\"></div>\n</div>\n<div role=\"timelineitem\" [attr.aria-label]=\"ariaLabel\" class=\"fd-timeline__post\">\n    <ng-content></ng-content>\n</div>\n" }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: TimelinePositionControlService }], propDecorators: { glyph: [{
                type: Input
            }], glyphFont: [{
                type: Input
            }], ariaLabel: [{
                type: Input
            }], lineEl: [{
                type: ViewChild,
                args: ['lineEl']
            }] } });

class TimelineFirstListOutletDirective {
    /** Ref to ViewContainerRef instance*/
    constructor(viewContainer) {
        this.viewContainer = viewContainer;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TimelineFirstListOutletDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: TimelineFirstListOutletDirective, isStandalone: true, selector: "[fdTimelineFirstListOutlet], [fd-timeline-first-list-outlet]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TimelineFirstListOutletDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fdTimelineFirstListOutlet], [fd-timeline-first-list-outlet]',
                    standalone: true
                }]
        }], ctorParameters: () => [{ type: i0.ViewContainerRef }] });

/** Context provided to the timeline node component. */
class TimelineNodeOutletContext {
    /** @hidden */
    constructor(data) {
        this.$implicit = data;
    }
}
class TimelineNodeDefDirective {
    /** @hidden */
    constructor(template) {
        this.template = template;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TimelineNodeDefDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: TimelineNodeDefDirective, isStandalone: true, selector: "[fdTimelineNodeDef], [fd-timeline-node-def]", inputs: { fdTimelineNodeData: "fdTimelineNodeData" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TimelineNodeDefDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fdTimelineNodeDef], [fd-timeline-node-def]',
                    standalone: true
                }]
        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { fdTimelineNodeData: [{
                type: Input
            }] } });

class TimelineSecondListOutletDirective {
    /** Ref to ViewContainerRef instance*/
    constructor(viewContainer) {
        this.viewContainer = viewContainer;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TimelineSecondListOutletDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: TimelineSecondListOutletDirective, isStandalone: true, selector: "[fdTimelineSecondListOutlet], [fd-timeline-second-list-outlet]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TimelineSecondListOutletDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fdTimelineSecondListOutlet], [fd-timeline-second-list-outlet]',
                    standalone: true
                }]
        }], ctorParameters: () => [{ type: i0.ViewContainerRef }] });

class TimelineComponent {
    /** @hidden */
    constructor(_differs, _cd, _timelinePositionControlService, _elementRef) {
        this._differs = _differs;
        this._cd = _cd;
        this._timelinePositionControlService = _timelinePositionControlService;
        this._elementRef = _elementRef;
        /**
         * Axis for timeline
         */
        this.axis = 'vertical';
        /**
         * Layout for timeline
         */
        this.layout = 'right';
        /** @hidden */
        this._canShowFirstList = true;
        /** @hidden */
        this._canShowSecondList = true;
        /** @hidden */
        this._loading = true;
        /** @hidden */
        this.loadingRange = range(3);
        /** @hidden */
        this._onDestroy = inject(DestroyRef);
    }
    /** @hidden */
    ngOnInit() {
        this._dataDifferForFirstList = this._differs.find([]).create(this.trackBy);
        this._dataDifferForSecondList = this._differs.find([]).create(this.trackBy);
        this._canShowFirstList = this.layout !== 'right' && this.layout !== 'bottom';
        this._canShowSecondList = this.layout !== 'left' && this.layout !== 'top';
    }
    /** @hidden */
    ngOnChanges(changes) {
        if ('axis' in changes || 'layout' in changes) {
            this._canShowFirstList = this.layout !== 'right' && this.layout !== 'bottom';
            this._canShowSecondList = this.layout !== 'left' && this.layout !== 'top';
            this._setPositionStrategy();
            this.switchDataSource(this.dataSource);
        }
        if ('dataSource' in changes && !changes['dataSource'].firstChange) {
            const value = changes['dataSource'].currentValue;
            this.switchDataSource(value);
        }
    }
    /** @hidden */
    ngAfterViewInit() {
        resizeObservable(this._elementRef.nativeElement)
            .pipe(debounceTime(50), takeUntilDestroyed(this._onDestroy))
            .subscribe(() => this._timelinePositionControlService.calculatePositions());
        this._setPositionStrategy();
        this.switchDataSource(this.dataSource);
    }
    /** @hidden */
    ngOnDestroy() {
        this._firstListOutlet.viewContainer.clear();
    }
    /**
     * Update state by new data source
     * If the data source is null, interpret this by clearing the node outlet.
     */
    /** @hidden */
    switchDataSource(data) {
        this._loading = true;
        if (!data) {
            this._firstListOutlet.viewContainer.clear();
            this._firstListOutlet.viewContainer.createEmbeddedView(this._loadingTemplate);
            this._cd.detectChanges();
            this._timelinePositionControlService.calculatePositions();
            this._cd.detectChanges();
            return;
        }
        if (this._nodeDefs) {
            const [first, second] = this._splitList(data);
            this._renderNodeChanges(first, this._dataDifferForFirstList, this._firstListOutlet?.viewContainer);
            this._renderNodeChanges(second, this._dataDifferForSecondList, this._secondListOutlet?.viewContainer);
            this._cd.detectChanges();
            this._timelinePositionControlService.calculatePositions();
            this._loading = false;
            this._cd.detectChanges();
        }
    }
    /** Check for changes made in the data and render each change (node added/removed/moved). */
    /** @hidden */
    _renderNodeChanges(data, differ, vcr) {
        const changes = differ.diff(data);
        if (!changes) {
            return;
        }
        changes.forEachOperation((item, adjustedPreviousIndex, currentIndex) => {
            if (currentIndex != null && item.previousIndex === null) {
                this._insertNode(data[currentIndex], currentIndex, vcr);
            }
            else if (currentIndex === null && adjustedPreviousIndex != null) {
                vcr.remove(adjustedPreviousIndex);
            }
            else if (adjustedPreviousIndex != null && currentIndex != null) {
                const view = vcr.get(adjustedPreviousIndex);
                if (view) {
                    vcr.move(view, currentIndex);
                }
            }
        });
    }
    /** @hidden */
    _setPositionStrategy() {
        this._timelinePositionControlService.setStrategy(`${this.axis}-${this.layout}`);
    }
    /**
     * Create the embedded view for the data node template and place it in the correct index location
     * within the data node view container.
     */
    /** @hidden */
    _insertNode(nodeData, index, vcr) {
        const node = this._getNodeDef(index);
        // Node context that will be provided to created embedded view
        const context = new TimelineNodeOutletContext(nodeData);
        vcr.createEmbeddedView(node.template, context, index);
    }
    /**
     * Finds the matching node definition that should be used for this node data. If there is only
     * one node definition, it is returned.
     */
    /** @hidden */
    _getNodeDef(i) {
        if (this._nodeDefs.length === 1) {
            return this._nodeDefs.first;
        }
        return this._nodeDefs.toArray()[i];
    }
    /**
     * Split data list to two list first and second to represent timelines in two lists.
     */
    /** @hidden */
    _splitList(dataSource) {
        let dataForFirstList = [];
        let dataForSecondList = [];
        if (this.layout === 'left' || this.layout === 'top') {
            dataForFirstList = [...dataSource];
        }
        else if (this.layout === 'right' || this.layout === 'bottom') {
            dataForSecondList = [...dataSource];
        }
        else {
            dataSource.forEach((item, index) => {
                if (index % 2 === 0) {
                    dataForFirstList.push(item);
                }
                else {
                    dataForSecondList.push(item);
                }
            });
        }
        return [dataForFirstList, dataForSecondList];
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TimelineComponent, deps: [{ token: i0.IterableDiffers }, { token: i0.ChangeDetectorRef }, { token: TimelinePositionControlService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TimelineComponent, isStandalone: true, selector: "fd-timeline", inputs: { dataSource: "dataSource", trackBy: "trackBy", axis: "axis", layout: "layout" }, host: { attributes: { "role": "timeline", "arial-label": "timeline" }, properties: { "class.fd-timeline--horizontal": "axis === \"horizontal\"", "class.fd-timeline--vertical": "axis === \"vertical\"" }, classAttribute: "fd-timeline" }, providers: [TimelinePositionControlService], queries: [{ propertyName: "_nodeDefs", predicate: TimelineNodeDefDirective, descendants: true }], viewQueries: [{ propertyName: "_loadingTemplate", first: true, predicate: ["loadingTemplate"], descendants: true }, { propertyName: "_firstListOutlet", first: true, predicate: TimelineFirstListOutletDirective, descendants: true, static: true }, { propertyName: "_secondListOutlet", first: true, predicate: TimelineSecondListOutletDirective, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div\n    [class.fd-timeline__list--empty]=\"!_canShowFirstList && !_loading\"\n    class=\"fd-timeline__list fd-timeline__list--first\"\n>\n    <ng-container fdTimelineFirstListOutlet></ng-container>\n</div>\n<div class=\"fd-timeline__main-line\"></div>\n<div\n    [class.fd-timeline__list--empty]=\"!_canShowSecondList\"\n    [class.fd-timeline__list--with-offset]=\"_canShowFirstList\"\n    class=\"fd-timeline__list fd-timeline__list--second\"\n>\n    <ng-container fdTimelineSecondListOutlet></ng-container>\n</div>\n\n<ng-template #loadingTemplate>\n    @for (_ of loadingRange; track $index) {\n        <fd-timeline-node>\n            <fd-timeline-node-header>\n                <fd-skeleton width=\"100%\" height=\"32px\">\n                    <svg:circle cx=\"16\" cy=\"16\" r=\"16\" rx=\"4\"></svg:circle>\n                    <svg:rect x=\"37\" y=\"0\" width=\"120\" height=\"12\" rx=\"4\"></svg:rect>\n                    <svg:rect x=\"37\" y=\"20\" width=\"80\" height=\"8\" rx=\"4\"></svg:rect>\n                </fd-skeleton>\n            </fd-timeline-node-header>\n\n            <fd-skeleton type=\"text\"></fd-skeleton>\n        </fd-timeline-node>\n    }\n</ng-template>\n", styles: [".fd-timeline{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline:before,.fd-timeline:after{box-sizing:inherit;font-size:inherit}.fd-timeline--double-sided{max-width:57.5rem}.fd-timeline__container{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__container:before,.fd-timeline__container:after{box-sizing:inherit;font-size:inherit}.fd-timeline__container{margin-top:1rem}.fd-timeline__group{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__group:before,.fd-timeline__group:after{box-sizing:inherit;font-size:inherit}.fd-timeline__group{margin-bottom:1rem;list-style-type:none}.fd-timeline__group--collapsed{margin-bottom:2rem}.fd-timeline__group-header-container{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__group-header-container:before,.fd-timeline__group-header-container:after{box-sizing:inherit;font-size:inherit}.fd-timeline__group-header-container{display:flex;align-items:center}.fd-timeline__group-header-container--horizontal{width:auto;height:100%;flex-direction:column;align-items:flex-start}.fd-timeline__group-header-container--horizontal .fd-timeline__group-header-bar{margin:0;margin-left:1.25rem}[dir=rtl] .fd-timeline__group-header-container--horizontal .fd-timeline__group-header-bar,.fd-timeline__group-header-container--horizontal .fd-timeline__group-header-bar[dir=rtl]{margin-right:1.25rem;margin-left:0}.fd-timeline__group-header-container--horizontal .fd-timeline__group-header-bar{margin-top:.8125rem}.fd-timeline__group-header{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__group-header:before,.fd-timeline__group-header:after{box-sizing:inherit;font-size:inherit}.fd-timeline__group-header{display:flex;align-items:center}.fd-timeline__group-header:focus,.fd-timeline__group-header.is-focus{outline:none}.fd-timeline__group-header:focus:before,.fd-timeline__group-header.is-focus:before{content:\"\";display:block;position:absolute;inset:-.1875rem;border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor)}.fd-timeline__group-header{margin-right:.8125rem}[dir=rtl] .fd-timeline__group-header,.fd-timeline__group-header[dir=rtl]{margin-right:0;margin-left:.8125rem}.fd-timeline__group-header{cursor:pointer;width:fit-content;position:relative;height:1.625rem;background:var(--sapButton_Selected_Background);border-radius:var(--sapElement_BorderCornerRadius);border:.0625rem solid var(--sapButton_Selected_BorderColor)}.fd-timeline__group-header:hover,.fd-timeline__group-header.is-hover{background:var(--sapButton_Selected_Hover_Background);border-color:var(--sapButton_Selected_Hover_BorderColor)}.fd-timeline__group-header:active,.fd-timeline__group-header.is-active{background:var(--sapButton_Selected_Background);border-color:var(--sapButton_Selected_BorderColor)}.fd-timeline__group-header--collapsed:focus:before,.fd-timeline__group-header--collapsed.is-focus:before{left:-.1875rem;right:-.375rem}[dir=rtl] .fd-timeline__group-header--collapsed:focus:before,[dir=rtl] .fd-timeline__group-header--collapsed.is-focus:before,.fd-timeline__group-header--collapsed[dir=rtl]:focus:before,.fd-timeline__group-header--collapsed[dir=rtl].is-focus:before{right:-.1875rem;left:-.375rem}.fd-timeline__group-header--collapsed{background:var(--sapButton_Background);border-color:var(--sapButton_BorderColor)}.fd-timeline__group-header--collapsed .fd-timeline__group-header-icon [class*=sap-icon]{color:var(--sapButton_TextColor)}[dir=rtl] .fd-timeline__group-header--collapsed .fd-timeline__group-header-icon,.fd-timeline__group-header--collapsed .fd-timeline__group-header-icon[dir=rtl]{transform:rotate(180deg)}.fd-timeline__group-header--collapsed .fd-timeline__group-header-text{color:var(--sapButton_Hover_TextColor)}.fd-timeline__group-header--collapsed:hover,.fd-timeline__group-header--collapsed.is-hover{background:var(--sapButton_Hover_Background);border-color:var(--sapButton_Hover_BorderColor)}.fd-timeline__group-header--collapsed:hover:after,.fd-timeline__group-header--collapsed.is-hover:after{background:var(--sapButton_Hover_Background);border-color:var(--sapButton_Hover_BorderColor)}.fd-timeline__group-header--collapsed:hover .fd-timeline__group-header-icon [class*=sap-icon],.fd-timeline__group-header--collapsed.is-hover .fd-timeline__group-header-icon [class*=sap-icon],.fd-timeline__group-header--collapsed:hover .fd-timeline__group-header-text,.fd-timeline__group-header--collapsed.is-hover .fd-timeline__group-header-text{color:var(--sapButton_Hover_TextColor)}.fd-timeline__group-header--collapsed:active,.fd-timeline__group-header--collapsed.is-active{background:var(--sapButton_Active_Background);border-color:var(--sapButton_Active_BorderColor)}.fd-timeline__group-header--collapsed:active:after,.fd-timeline__group-header--collapsed.is-active:after{background:var(--sapButton_Active_Background);border-color:var(--sapButton_Active_BorderColor)}.fd-timeline__group-header--collapsed:active .fd-timeline__group-header-icon [class*=sap-icon],.fd-timeline__group-header--collapsed.is-active .fd-timeline__group-header-icon [class*=sap-icon],.fd-timeline__group-header--collapsed:active .fd-timeline__group-header-text,.fd-timeline__group-header--collapsed.is-active .fd-timeline__group-header-text{color:var(--sapButton_Active_TextColor)}.fd-timeline__group-header--collapsed:after{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__group-header--collapsed:after:before,.fd-timeline__group-header--collapsed:after:after{box-sizing:inherit;font-size:inherit}.fd-timeline__group-header--collapsed:after{transform:translate(0) translateY(0) rotate(45deg);content:\"\";position:absolute;width:.4375rem;height:.4375rem;right:-.25rem;background:var(--sapButton_Background);border-top:.0625rem solid var(--sapButton_BorderColor);border-right:.0625rem solid var(--sapButton_BorderColor)}[dir=rtl] .fd-timeline__group-header--collapsed:after,.fd-timeline__group-header--collapsed[dir=rtl]:after{transform:translate(0) translateY(0) rotate(225deg);right:auto;left:-.25rem}.fd-timeline__group-header--horizontal:focus:before,.fd-timeline__group-header--horizontal.is-focus:before{right:-.1875rem;bottom:-.375rem}[dir=rtl] .fd-timeline__group-header--horizontal:focus:before,[dir=rtl] .fd-timeline__group-header--horizontal.is-focus:before,.fd-timeline__group-header--horizontal[dir=rtl]:focus:before,.fd-timeline__group-header--horizontal[dir=rtl].is-focus:before{left:-.1875rem;right:-.1875rem}.fd-timeline__group-header--horizontal:after{transform:rotate(135deg);left:1rem;bottom:-.25rem}[dir=rtl] .fd-timeline__group-header--horizontal:after,.fd-timeline__group-header--horizontal[dir=rtl]:after{left:auto;transform:rotate(135deg);right:1rem}.fd-timeline__group-header-icon{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__group-header-icon:before,.fd-timeline__group-header-icon:after{box-sizing:inherit;font-size:inherit}.fd-timeline__group-header-icon{margin-left:.5rem;margin-right:.5rem}.fd-timeline__group-header-icon [class*=sap-icon]{color:var(--sapButton_Selected_TextColor);font-size:1rem;height:1.625rem;line-height:1.625rem}.fd-timeline__group-header-text{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__group-header-text:before,.fd-timeline__group-header-text:after{box-sizing:inherit;font-size:inherit}.fd-timeline__group-header-text{margin-right:1rem}[dir=rtl] .fd-timeline__group-header-text,.fd-timeline__group-header-text[dir=rtl]{margin-right:0;margin-left:1rem}.fd-timeline__group-header-text{cursor:inherit;color:var(--sapButton_Selected_TextColor)}.fd-timeline__node-container--horizontal{flex-direction:row}.fd-timeline__node-container--horizontal .fd-timeline__node{margin-top:0;margin-bottom:0;margin-left:.25rem;margin-right:.25rem}.fd-timeline__node-container--horizontal .fd-timeline__node--grouping{margin:0}.fd-timeline__node-container--horizontal .fd-timeline__node--icon{margin-top:0;margin-bottom:0;margin-left:.5rem;margin-right:.5rem}.fd-timeline__node{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__node:before,.fd-timeline__node:after{box-sizing:inherit;font-size:inherit}.fd-timeline__node{width:.375rem;height:.375rem;border-radius:50%;background:var(--sapContent_ForegroundBorderColor)}.fd-timeline__node--grouping{margin-top:0;margin-bottom:0;border:.0625rem solid var(--sapContent_ForegroundBorderColor);width:.5rem;height:.5rem;border-radius:50%;background:transparent}.fd-timeline__node--icon{margin-top:.5rem;margin-bottom:.5rem;width:auto;height:auto;border-radius:50%;background:transparent}.fd-timeline__node--icon [class*=sap-icon]{line-height:1;width:1.375rem;height:1.375rem;font-size:1.375rem;color:var(--sapContent_NonInteractiveIconColor)}.fd-timeline__group-header-bar{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__group-header-bar:before,.fd-timeline__group-header-bar:after{box-sizing:inherit;font-size:inherit}.fd-timeline__group-header-bar{margin-right:.375rem}[dir=rtl] .fd-timeline__group-header-bar,.fd-timeline__group-header-bar[dir=rtl]{margin-right:0;margin-left:.375rem}.fd-timeline__group-header-bar{border:.0625rem dashed var(--sapContent_ForegroundBorderColor);flex:1}.fd-timeline__connecting-line{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__connecting-line:before,.fd-timeline__connecting-line:after{box-sizing:inherit;font-size:inherit}.fd-timeline__connecting-line{border:.0625rem solid var(--sapContent_ForegroundBorderColor)}.fd-timeline__posts{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__posts:before,.fd-timeline__posts:after{box-sizing:inherit;font-size:inherit}.fd-timeline__posts{list-style-type:none}.fd-timeline__post-container{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__post-container:before,.fd-timeline__post-container:after{box-sizing:inherit;font-size:inherit}.fd-timeline__post-container{display:flex;flex-direction:row}.fd-timeline__post{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__post:before,.fd-timeline__post:after{box-sizing:inherit;font-size:inherit}.fd-timeline__post{height:auto;padding:.5rem;position:relative;border-radius:.25rem;border:.0625rem solid var(--sapGroup_ContentBorderColor);background:var(--sapGroup_ContentBackground)}.fd-timeline__post:after{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__post:after:before,.fd-timeline__post:after:after{box-sizing:inherit;font-size:inherit}.fd-timeline__post:after{content:\"\";position:absolute;width:.8rem;height:.8rem;border-top:.0625rem solid var(--sapGroup_ContentBorderColor);border-right:.0625rem solid var(--sapGroup_ContentBorderColor);background:var(--sapGroup_ContentBackground)}.fd-timeline__post-header-container{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__post-header-container:before,.fd-timeline__post-header-container:after{box-sizing:inherit;font-size:inherit}.fd-timeline__post-header-container{display:flex;align-items:center;margin-bottom:.5rem}.fd-timeline__post-header{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__post-header:before,.fd-timeline__post-header:after{box-sizing:inherit;font-size:inherit}.fd-timeline__post-header:not(:first-child){margin-left:.3125rem}[dir=rtl] .fd-timeline__post-header:not(:first-child),.fd-timeline__post-header:not(:first-child)[dir=rtl]{margin-right:.3125rem;margin-left:0}.fd-timeline__post-header-title{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__post-header-title:before,.fd-timeline__post-header-title:after{box-sizing:inherit;font-size:inherit}.fd-timeline__post-header-title{font-weight:700}.fd-timeline__post-header-text{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__post-header-text:before,.fd-timeline__post-header-text:after{box-sizing:inherit;font-size:inherit}.fd-timeline__post-subheader{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__post-subheader:before,.fd-timeline__post-subheader:after{box-sizing:inherit;font-size:inherit}.fd-timeline__post-subheader{margin-top:.125rem;font-size:var(--sapFontSmallSize);color:var(--sapContent_LabelColor)}.fd-timeline__post-content{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__post-content:before,.fd-timeline__post-content:after{box-sizing:inherit;font-size:inherit}.fd-timeline .fd-timeline__post-actions{margin-top:.5rem}.fd-timeline .fd-timeline__post-actions button:not(:first-child){margin-left:.5rem}[dir=rtl] .fd-timeline .fd-timeline__post-actions button:not(:first-child),.fd-timeline .fd-timeline__post-actions button:not(:first-child)[dir=rtl]{margin-right:.5rem;margin-left:0}.fd-timeline__post{flex-grow:1}.fd-timeline__post-subheader{display:block}.fd-timeline__post-header-title{margin-right:.3rem}.fd-timeline__node--icon{font-size:1.375rem}.fd-timeline__node--icon [class*=sap-icon]{display:flex;flex-direction:row;justify-content:center}.fd-timeline__node-container{position:absolute;height:1.5rem}.fd-timeline__node-wrapper{display:flex;flex-direction:row;position:relative;box-sizing:border-box;flex-shrink:0}.fd-timeline__list{display:flex;position:relative;flex-grow:1}.fd-timeline__connecting-line{flex-shrink:0}.fd-timeline{display:flex;justify-content:center}.fd-timeline--horizontal{flex-direction:column}.fd-timeline--horizontal .fd-timeline__node-wrapper{width:20rem}.fd-timeline--horizontal .fd-timeline__node-wrapper--icon .fd-timeline__icon-wrapper{padding-left:.25rem}[dir=rtl] .fd-timeline--horizontal .fd-timeline__node-wrapper--icon .fd-timeline__icon-wrapper,.fd-timeline--horizontal .fd-timeline__node-wrapper--icon .fd-timeline__icon-wrapper[dir=rtl]{padding-right:.25rem;padding-left:0}.fd-timeline--horizontal .fd-timeline__post{margin-right:1.25rem}[dir=rtl] .fd-timeline--horizontal .fd-timeline__post,.fd-timeline--horizontal .fd-timeline__post[dir=rtl]{margin-right:0;margin-left:1.25rem}.fd-timeline--horizontal .fd-timeline__main-line{height:1.5rem;width:100%}.fd-timeline--horizontal .fd-timeline__node-container{height:1.5rem;width:100%;display:flex;align-items:center;left:.5rem}[dir=rtl] .fd-timeline--horizontal .fd-timeline__node-container,.fd-timeline--horizontal .fd-timeline__node-container[dir=rtl]{left:auto;right:.5rem}.fd-timeline--horizontal .fd-timeline__icon-wrapper{flex:0;padding-left:.75rem}[dir=rtl] .fd-timeline--horizontal .fd-timeline__icon-wrapper,.fd-timeline--horizontal .fd-timeline__icon-wrapper[dir=rtl]{padding-right:.75rem;padding-left:0}.fd-timeline--horizontal .fd-timeline__icon-wrapper{padding-right:.25rem}[dir=rtl] .fd-timeline--horizontal .fd-timeline__icon-wrapper,.fd-timeline--horizontal .fd-timeline__icon-wrapper[dir=rtl]{padding-right:0;padding-left:.25rem}[dir=rtl] .fd-timeline--horizontal .fd-timeline__icon-wrapper,.fd-timeline--horizontal .fd-timeline__icon-wrapper[dir=rtl]{padding-left:.25rem;padding-right:.75rem}.fd-timeline--horizontal .fd-timeline__list--first{align-items:flex-end}.fd-timeline--horizontal .fd-timeline__list--first .fd-timeline__node-container{bottom:-1.5rem}.fd-timeline--horizontal .fd-timeline__list--first .fd-timeline__post{margin-bottom:1rem}.fd-timeline--horizontal .fd-timeline__list--first .fd-timeline__post:after{transform:translate(0) translateY(0) rotate(135deg);left:1rem;bottom:-.4375rem}[dir=rtl] .fd-timeline--horizontal .fd-timeline__list--first .fd-timeline__post:after,.fd-timeline--horizontal .fd-timeline__list--first .fd-timeline__post[dir=rtl]:after{left:auto;right:1rem}.fd-timeline--horizontal .fd-timeline__list--second{align-items:flex-start}.fd-timeline--horizontal .fd-timeline__list--second .fd-timeline__node-container{top:-1.5rem}.fd-timeline--horizontal .fd-timeline__list--second .fd-timeline__post{margin-top:1rem}.fd-timeline--horizontal .fd-timeline__list--second .fd-timeline__post:after{transform:translate(0) translateY(0) rotate(315deg);left:1rem;top:-.4375rem}[dir=rtl] .fd-timeline--horizontal .fd-timeline__list--second .fd-timeline__post:after,.fd-timeline--horizontal .fd-timeline__list--second .fd-timeline__post[dir=rtl]:after{left:auto;right:1rem}.fd-timeline--horizontal .fd-timeline__list--with-offset{padding-left:4.688rem}[dir=rtl] .fd-timeline--horizontal .fd-timeline__list--with-offset,.fd-timeline--horizontal .fd-timeline__list--with-offset[dir=rtl]{padding-right:4.688rem;padding-left:0}.fd-timeline--vertical{max-width:50rem;align-items:stretch}.fd-timeline--vertical .fd-timeline__node-wrapper--icon .fd-timeline__icon-wrapper{padding-top:.25rem}.fd-timeline--vertical .fd-timeline__node-wrapper--icon .fd-timeline__node--icon{margin:0}.fd-timeline--vertical .fd-timeline__post{margin-bottom:1.25rem}.fd-timeline--vertical .fd-timeline__main-line{width:1.5rem;flex:0 0 1.5rem;height:100%}.fd-timeline--vertical .fd-timeline__node-container{height:100%;flex:1 0;width:1.5rem;display:flex;flex-direction:column;align-items:center;top:.5rem}.fd-timeline--vertical .fd-timeline__icon-wrapper{flex:0;padding-top:.75rem;padding-bottom:.25rem}.fd-timeline--vertical .fd-timeline__list{flex-direction:column;flex:1 0 calc(50% - .75rem)}.fd-timeline--vertical .fd-timeline__list--first .fd-timeline__node-container{right:-1.5rem}[dir=rtl] .fd-timeline--vertical .fd-timeline__list--first .fd-timeline__node-container,.fd-timeline--vertical .fd-timeline__list--first .fd-timeline__node-container[dir=rtl]{right:auto;left:-1.5rem}.fd-timeline--vertical .fd-timeline__list--first .fd-timeline__post{margin-right:1rem}[dir=rtl] .fd-timeline--vertical .fd-timeline__list--first .fd-timeline__post,.fd-timeline--vertical .fd-timeline__list--first .fd-timeline__post[dir=rtl]{margin-right:0;margin-left:1rem}.fd-timeline--vertical .fd-timeline__list--first .fd-timeline__post:after{transform:translate(0) translateY(0) rotate(45deg);top:1rem;right:-.4375rem}[dir=rtl] .fd-timeline--vertical .fd-timeline__list--first .fd-timeline__post:after,.fd-timeline--vertical .fd-timeline__list--first .fd-timeline__post[dir=rtl]:after{transform:translate(0) translateY(0) rotate(225deg);right:auto;left:-.4375rem}.fd-timeline--vertical .fd-timeline__list--second .fd-timeline__node-container{left:-1.5rem}[dir=rtl] .fd-timeline--vertical .fd-timeline__list--second .fd-timeline__node-container,.fd-timeline--vertical .fd-timeline__list--second .fd-timeline__node-container[dir=rtl]{left:auto;right:-1.5rem}.fd-timeline--vertical .fd-timeline__list--second .fd-timeline__post{margin-left:1rem}[dir=rtl] .fd-timeline--vertical .fd-timeline__list--second .fd-timeline__post,.fd-timeline--vertical .fd-timeline__list--second .fd-timeline__post[dir=rtl]{margin-right:1rem;margin-left:0}.fd-timeline--vertical .fd-timeline__list--second .fd-timeline__post:after{transform:translate(0) translateY(0) rotate(225deg);top:1rem;left:-.4375rem}[dir=rtl] .fd-timeline--vertical .fd-timeline__list--second .fd-timeline__post:after,.fd-timeline--vertical .fd-timeline__list--second .fd-timeline__post[dir=rtl]:after{transform:translate(0) translateY(0) rotate(45deg);left:auto;right:-.4375rem}.fd-timeline--vertical .fd-timeline__list--with-offset{padding-top:1.5rem}.fd-timeline--vertical .fd-timeline__list--empty{flex:0 0 0}\n"], dependencies: [{ kind: "directive", type: TimelineFirstListOutletDirective, selector: "[fdTimelineFirstListOutlet], [fd-timeline-first-list-outlet]" }, { kind: "directive", type: TimelineSecondListOutletDirective, selector: "[fdTimelineSecondListOutlet], [fd-timeline-second-list-outlet]" }, { kind: "component", type: TimelineNodeComponent, selector: "fd-timeline-node", inputs: ["glyph", "glyphFont", "ariaLabel"] }, { kind: "directive", type: TimelineNodeHeaderDirective, selector: "fd-timeline-node-header" }, { kind: "component", type: SkeletonComponent, selector: "fd-skeleton", inputs: ["animated", "type", "textLines", "width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TimelineComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fd-timeline', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [TimelinePositionControlService], host: {
                        role: 'timeline',
                        'arial-label': 'timeline',
                        class: 'fd-timeline',
                        '[class.fd-timeline--horizontal]': 'axis === "horizontal"',
                        '[class.fd-timeline--vertical]': 'axis === "vertical"'
                    }, imports: [
                        TimelineFirstListOutletDirective,
                        TimelineSecondListOutletDirective,
                        TimelineNodeComponent,
                        TimelineNodeHeaderDirective,
                        SkeletonComponent
                    ], template: "<div\n    [class.fd-timeline__list--empty]=\"!_canShowFirstList && !_loading\"\n    class=\"fd-timeline__list fd-timeline__list--first\"\n>\n    <ng-container fdTimelineFirstListOutlet></ng-container>\n</div>\n<div class=\"fd-timeline__main-line\"></div>\n<div\n    [class.fd-timeline__list--empty]=\"!_canShowSecondList\"\n    [class.fd-timeline__list--with-offset]=\"_canShowFirstList\"\n    class=\"fd-timeline__list fd-timeline__list--second\"\n>\n    <ng-container fdTimelineSecondListOutlet></ng-container>\n</div>\n\n<ng-template #loadingTemplate>\n    @for (_ of loadingRange; track $index) {\n        <fd-timeline-node>\n            <fd-timeline-node-header>\n                <fd-skeleton width=\"100%\" height=\"32px\">\n                    <svg:circle cx=\"16\" cy=\"16\" r=\"16\" rx=\"4\"></svg:circle>\n                    <svg:rect x=\"37\" y=\"0\" width=\"120\" height=\"12\" rx=\"4\"></svg:rect>\n                    <svg:rect x=\"37\" y=\"20\" width=\"80\" height=\"8\" rx=\"4\"></svg:rect>\n                </fd-skeleton>\n            </fd-timeline-node-header>\n\n            <fd-skeleton type=\"text\"></fd-skeleton>\n        </fd-timeline-node>\n    }\n</ng-template>\n", styles: [".fd-timeline{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline:before,.fd-timeline:after{box-sizing:inherit;font-size:inherit}.fd-timeline--double-sided{max-width:57.5rem}.fd-timeline__container{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__container:before,.fd-timeline__container:after{box-sizing:inherit;font-size:inherit}.fd-timeline__container{margin-top:1rem}.fd-timeline__group{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__group:before,.fd-timeline__group:after{box-sizing:inherit;font-size:inherit}.fd-timeline__group{margin-bottom:1rem;list-style-type:none}.fd-timeline__group--collapsed{margin-bottom:2rem}.fd-timeline__group-header-container{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__group-header-container:before,.fd-timeline__group-header-container:after{box-sizing:inherit;font-size:inherit}.fd-timeline__group-header-container{display:flex;align-items:center}.fd-timeline__group-header-container--horizontal{width:auto;height:100%;flex-direction:column;align-items:flex-start}.fd-timeline__group-header-container--horizontal .fd-timeline__group-header-bar{margin:0;margin-left:1.25rem}[dir=rtl] .fd-timeline__group-header-container--horizontal .fd-timeline__group-header-bar,.fd-timeline__group-header-container--horizontal .fd-timeline__group-header-bar[dir=rtl]{margin-right:1.25rem;margin-left:0}.fd-timeline__group-header-container--horizontal .fd-timeline__group-header-bar{margin-top:.8125rem}.fd-timeline__group-header{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__group-header:before,.fd-timeline__group-header:after{box-sizing:inherit;font-size:inherit}.fd-timeline__group-header{display:flex;align-items:center}.fd-timeline__group-header:focus,.fd-timeline__group-header.is-focus{outline:none}.fd-timeline__group-header:focus:before,.fd-timeline__group-header.is-focus:before{content:\"\";display:block;position:absolute;inset:-.1875rem;border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor)}.fd-timeline__group-header{margin-right:.8125rem}[dir=rtl] .fd-timeline__group-header,.fd-timeline__group-header[dir=rtl]{margin-right:0;margin-left:.8125rem}.fd-timeline__group-header{cursor:pointer;width:fit-content;position:relative;height:1.625rem;background:var(--sapButton_Selected_Background);border-radius:var(--sapElement_BorderCornerRadius);border:.0625rem solid var(--sapButton_Selected_BorderColor)}.fd-timeline__group-header:hover,.fd-timeline__group-header.is-hover{background:var(--sapButton_Selected_Hover_Background);border-color:var(--sapButton_Selected_Hover_BorderColor)}.fd-timeline__group-header:active,.fd-timeline__group-header.is-active{background:var(--sapButton_Selected_Background);border-color:var(--sapButton_Selected_BorderColor)}.fd-timeline__group-header--collapsed:focus:before,.fd-timeline__group-header--collapsed.is-focus:before{left:-.1875rem;right:-.375rem}[dir=rtl] .fd-timeline__group-header--collapsed:focus:before,[dir=rtl] .fd-timeline__group-header--collapsed.is-focus:before,.fd-timeline__group-header--collapsed[dir=rtl]:focus:before,.fd-timeline__group-header--collapsed[dir=rtl].is-focus:before{right:-.1875rem;left:-.375rem}.fd-timeline__group-header--collapsed{background:var(--sapButton_Background);border-color:var(--sapButton_BorderColor)}.fd-timeline__group-header--collapsed .fd-timeline__group-header-icon [class*=sap-icon]{color:var(--sapButton_TextColor)}[dir=rtl] .fd-timeline__group-header--collapsed .fd-timeline__group-header-icon,.fd-timeline__group-header--collapsed .fd-timeline__group-header-icon[dir=rtl]{transform:rotate(180deg)}.fd-timeline__group-header--collapsed .fd-timeline__group-header-text{color:var(--sapButton_Hover_TextColor)}.fd-timeline__group-header--collapsed:hover,.fd-timeline__group-header--collapsed.is-hover{background:var(--sapButton_Hover_Background);border-color:var(--sapButton_Hover_BorderColor)}.fd-timeline__group-header--collapsed:hover:after,.fd-timeline__group-header--collapsed.is-hover:after{background:var(--sapButton_Hover_Background);border-color:var(--sapButton_Hover_BorderColor)}.fd-timeline__group-header--collapsed:hover .fd-timeline__group-header-icon [class*=sap-icon],.fd-timeline__group-header--collapsed.is-hover .fd-timeline__group-header-icon [class*=sap-icon],.fd-timeline__group-header--collapsed:hover .fd-timeline__group-header-text,.fd-timeline__group-header--collapsed.is-hover .fd-timeline__group-header-text{color:var(--sapButton_Hover_TextColor)}.fd-timeline__group-header--collapsed:active,.fd-timeline__group-header--collapsed.is-active{background:var(--sapButton_Active_Background);border-color:var(--sapButton_Active_BorderColor)}.fd-timeline__group-header--collapsed:active:after,.fd-timeline__group-header--collapsed.is-active:after{background:var(--sapButton_Active_Background);border-color:var(--sapButton_Active_BorderColor)}.fd-timeline__group-header--collapsed:active .fd-timeline__group-header-icon [class*=sap-icon],.fd-timeline__group-header--collapsed.is-active .fd-timeline__group-header-icon [class*=sap-icon],.fd-timeline__group-header--collapsed:active .fd-timeline__group-header-text,.fd-timeline__group-header--collapsed.is-active .fd-timeline__group-header-text{color:var(--sapButton_Active_TextColor)}.fd-timeline__group-header--collapsed:after{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__group-header--collapsed:after:before,.fd-timeline__group-header--collapsed:after:after{box-sizing:inherit;font-size:inherit}.fd-timeline__group-header--collapsed:after{transform:translate(0) translateY(0) rotate(45deg);content:\"\";position:absolute;width:.4375rem;height:.4375rem;right:-.25rem;background:var(--sapButton_Background);border-top:.0625rem solid var(--sapButton_BorderColor);border-right:.0625rem solid var(--sapButton_BorderColor)}[dir=rtl] .fd-timeline__group-header--collapsed:after,.fd-timeline__group-header--collapsed[dir=rtl]:after{transform:translate(0) translateY(0) rotate(225deg);right:auto;left:-.25rem}.fd-timeline__group-header--horizontal:focus:before,.fd-timeline__group-header--horizontal.is-focus:before{right:-.1875rem;bottom:-.375rem}[dir=rtl] .fd-timeline__group-header--horizontal:focus:before,[dir=rtl] .fd-timeline__group-header--horizontal.is-focus:before,.fd-timeline__group-header--horizontal[dir=rtl]:focus:before,.fd-timeline__group-header--horizontal[dir=rtl].is-focus:before{left:-.1875rem;right:-.1875rem}.fd-timeline__group-header--horizontal:after{transform:rotate(135deg);left:1rem;bottom:-.25rem}[dir=rtl] .fd-timeline__group-header--horizontal:after,.fd-timeline__group-header--horizontal[dir=rtl]:after{left:auto;transform:rotate(135deg);right:1rem}.fd-timeline__group-header-icon{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__group-header-icon:before,.fd-timeline__group-header-icon:after{box-sizing:inherit;font-size:inherit}.fd-timeline__group-header-icon{margin-left:.5rem;margin-right:.5rem}.fd-timeline__group-header-icon [class*=sap-icon]{color:var(--sapButton_Selected_TextColor);font-size:1rem;height:1.625rem;line-height:1.625rem}.fd-timeline__group-header-text{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__group-header-text:before,.fd-timeline__group-header-text:after{box-sizing:inherit;font-size:inherit}.fd-timeline__group-header-text{margin-right:1rem}[dir=rtl] .fd-timeline__group-header-text,.fd-timeline__group-header-text[dir=rtl]{margin-right:0;margin-left:1rem}.fd-timeline__group-header-text{cursor:inherit;color:var(--sapButton_Selected_TextColor)}.fd-timeline__node-container--horizontal{flex-direction:row}.fd-timeline__node-container--horizontal .fd-timeline__node{margin-top:0;margin-bottom:0;margin-left:.25rem;margin-right:.25rem}.fd-timeline__node-container--horizontal .fd-timeline__node--grouping{margin:0}.fd-timeline__node-container--horizontal .fd-timeline__node--icon{margin-top:0;margin-bottom:0;margin-left:.5rem;margin-right:.5rem}.fd-timeline__node{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__node:before,.fd-timeline__node:after{box-sizing:inherit;font-size:inherit}.fd-timeline__node{width:.375rem;height:.375rem;border-radius:50%;background:var(--sapContent_ForegroundBorderColor)}.fd-timeline__node--grouping{margin-top:0;margin-bottom:0;border:.0625rem solid var(--sapContent_ForegroundBorderColor);width:.5rem;height:.5rem;border-radius:50%;background:transparent}.fd-timeline__node--icon{margin-top:.5rem;margin-bottom:.5rem;width:auto;height:auto;border-radius:50%;background:transparent}.fd-timeline__node--icon [class*=sap-icon]{line-height:1;width:1.375rem;height:1.375rem;font-size:1.375rem;color:var(--sapContent_NonInteractiveIconColor)}.fd-timeline__group-header-bar{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__group-header-bar:before,.fd-timeline__group-header-bar:after{box-sizing:inherit;font-size:inherit}.fd-timeline__group-header-bar{margin-right:.375rem}[dir=rtl] .fd-timeline__group-header-bar,.fd-timeline__group-header-bar[dir=rtl]{margin-right:0;margin-left:.375rem}.fd-timeline__group-header-bar{border:.0625rem dashed var(--sapContent_ForegroundBorderColor);flex:1}.fd-timeline__connecting-line{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__connecting-line:before,.fd-timeline__connecting-line:after{box-sizing:inherit;font-size:inherit}.fd-timeline__connecting-line{border:.0625rem solid var(--sapContent_ForegroundBorderColor)}.fd-timeline__posts{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__posts:before,.fd-timeline__posts:after{box-sizing:inherit;font-size:inherit}.fd-timeline__posts{list-style-type:none}.fd-timeline__post-container{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__post-container:before,.fd-timeline__post-container:after{box-sizing:inherit;font-size:inherit}.fd-timeline__post-container{display:flex;flex-direction:row}.fd-timeline__post{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__post:before,.fd-timeline__post:after{box-sizing:inherit;font-size:inherit}.fd-timeline__post{height:auto;padding:.5rem;position:relative;border-radius:.25rem;border:.0625rem solid var(--sapGroup_ContentBorderColor);background:var(--sapGroup_ContentBackground)}.fd-timeline__post:after{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__post:after:before,.fd-timeline__post:after:after{box-sizing:inherit;font-size:inherit}.fd-timeline__post:after{content:\"\";position:absolute;width:.8rem;height:.8rem;border-top:.0625rem solid var(--sapGroup_ContentBorderColor);border-right:.0625rem solid var(--sapGroup_ContentBorderColor);background:var(--sapGroup_ContentBackground)}.fd-timeline__post-header-container{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__post-header-container:before,.fd-timeline__post-header-container:after{box-sizing:inherit;font-size:inherit}.fd-timeline__post-header-container{display:flex;align-items:center;margin-bottom:.5rem}.fd-timeline__post-header{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__post-header:before,.fd-timeline__post-header:after{box-sizing:inherit;font-size:inherit}.fd-timeline__post-header:not(:first-child){margin-left:.3125rem}[dir=rtl] .fd-timeline__post-header:not(:first-child),.fd-timeline__post-header:not(:first-child)[dir=rtl]{margin-right:.3125rem;margin-left:0}.fd-timeline__post-header-title{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__post-header-title:before,.fd-timeline__post-header-title:after{box-sizing:inherit;font-size:inherit}.fd-timeline__post-header-title{font-weight:700}.fd-timeline__post-header-text{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__post-header-text:before,.fd-timeline__post-header-text:after{box-sizing:inherit;font-size:inherit}.fd-timeline__post-subheader{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__post-subheader:before,.fd-timeline__post-subheader:after{box-sizing:inherit;font-size:inherit}.fd-timeline__post-subheader{margin-top:.125rem;font-size:var(--sapFontSmallSize);color:var(--sapContent_LabelColor)}.fd-timeline__post-content{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-timeline__post-content:before,.fd-timeline__post-content:after{box-sizing:inherit;font-size:inherit}.fd-timeline .fd-timeline__post-actions{margin-top:.5rem}.fd-timeline .fd-timeline__post-actions button:not(:first-child){margin-left:.5rem}[dir=rtl] .fd-timeline .fd-timeline__post-actions button:not(:first-child),.fd-timeline .fd-timeline__post-actions button:not(:first-child)[dir=rtl]{margin-right:.5rem;margin-left:0}.fd-timeline__post{flex-grow:1}.fd-timeline__post-subheader{display:block}.fd-timeline__post-header-title{margin-right:.3rem}.fd-timeline__node--icon{font-size:1.375rem}.fd-timeline__node--icon [class*=sap-icon]{display:flex;flex-direction:row;justify-content:center}.fd-timeline__node-container{position:absolute;height:1.5rem}.fd-timeline__node-wrapper{display:flex;flex-direction:row;position:relative;box-sizing:border-box;flex-shrink:0}.fd-timeline__list{display:flex;position:relative;flex-grow:1}.fd-timeline__connecting-line{flex-shrink:0}.fd-timeline{display:flex;justify-content:center}.fd-timeline--horizontal{flex-direction:column}.fd-timeline--horizontal .fd-timeline__node-wrapper{width:20rem}.fd-timeline--horizontal .fd-timeline__node-wrapper--icon .fd-timeline__icon-wrapper{padding-left:.25rem}[dir=rtl] .fd-timeline--horizontal .fd-timeline__node-wrapper--icon .fd-timeline__icon-wrapper,.fd-timeline--horizontal .fd-timeline__node-wrapper--icon .fd-timeline__icon-wrapper[dir=rtl]{padding-right:.25rem;padding-left:0}.fd-timeline--horizontal .fd-timeline__post{margin-right:1.25rem}[dir=rtl] .fd-timeline--horizontal .fd-timeline__post,.fd-timeline--horizontal .fd-timeline__post[dir=rtl]{margin-right:0;margin-left:1.25rem}.fd-timeline--horizontal .fd-timeline__main-line{height:1.5rem;width:100%}.fd-timeline--horizontal .fd-timeline__node-container{height:1.5rem;width:100%;display:flex;align-items:center;left:.5rem}[dir=rtl] .fd-timeline--horizontal .fd-timeline__node-container,.fd-timeline--horizontal .fd-timeline__node-container[dir=rtl]{left:auto;right:.5rem}.fd-timeline--horizontal .fd-timeline__icon-wrapper{flex:0;padding-left:.75rem}[dir=rtl] .fd-timeline--horizontal .fd-timeline__icon-wrapper,.fd-timeline--horizontal .fd-timeline__icon-wrapper[dir=rtl]{padding-right:.75rem;padding-left:0}.fd-timeline--horizontal .fd-timeline__icon-wrapper{padding-right:.25rem}[dir=rtl] .fd-timeline--horizontal .fd-timeline__icon-wrapper,.fd-timeline--horizontal .fd-timeline__icon-wrapper[dir=rtl]{padding-right:0;padding-left:.25rem}[dir=rtl] .fd-timeline--horizontal .fd-timeline__icon-wrapper,.fd-timeline--horizontal .fd-timeline__icon-wrapper[dir=rtl]{padding-left:.25rem;padding-right:.75rem}.fd-timeline--horizontal .fd-timeline__list--first{align-items:flex-end}.fd-timeline--horizontal .fd-timeline__list--first .fd-timeline__node-container{bottom:-1.5rem}.fd-timeline--horizontal .fd-timeline__list--first .fd-timeline__post{margin-bottom:1rem}.fd-timeline--horizontal .fd-timeline__list--first .fd-timeline__post:after{transform:translate(0) translateY(0) rotate(135deg);left:1rem;bottom:-.4375rem}[dir=rtl] .fd-timeline--horizontal .fd-timeline__list--first .fd-timeline__post:after,.fd-timeline--horizontal .fd-timeline__list--first .fd-timeline__post[dir=rtl]:after{left:auto;right:1rem}.fd-timeline--horizontal .fd-timeline__list--second{align-items:flex-start}.fd-timeline--horizontal .fd-timeline__list--second .fd-timeline__node-container{top:-1.5rem}.fd-timeline--horizontal .fd-timeline__list--second .fd-timeline__post{margin-top:1rem}.fd-timeline--horizontal .fd-timeline__list--second .fd-timeline__post:after{transform:translate(0) translateY(0) rotate(315deg);left:1rem;top:-.4375rem}[dir=rtl] .fd-timeline--horizontal .fd-timeline__list--second .fd-timeline__post:after,.fd-timeline--horizontal .fd-timeline__list--second .fd-timeline__post[dir=rtl]:after{left:auto;right:1rem}.fd-timeline--horizontal .fd-timeline__list--with-offset{padding-left:4.688rem}[dir=rtl] .fd-timeline--horizontal .fd-timeline__list--with-offset,.fd-timeline--horizontal .fd-timeline__list--with-offset[dir=rtl]{padding-right:4.688rem;padding-left:0}.fd-timeline--vertical{max-width:50rem;align-items:stretch}.fd-timeline--vertical .fd-timeline__node-wrapper--icon .fd-timeline__icon-wrapper{padding-top:.25rem}.fd-timeline--vertical .fd-timeline__node-wrapper--icon .fd-timeline__node--icon{margin:0}.fd-timeline--vertical .fd-timeline__post{margin-bottom:1.25rem}.fd-timeline--vertical .fd-timeline__main-line{width:1.5rem;flex:0 0 1.5rem;height:100%}.fd-timeline--vertical .fd-timeline__node-container{height:100%;flex:1 0;width:1.5rem;display:flex;flex-direction:column;align-items:center;top:.5rem}.fd-timeline--vertical .fd-timeline__icon-wrapper{flex:0;padding-top:.75rem;padding-bottom:.25rem}.fd-timeline--vertical .fd-timeline__list{flex-direction:column;flex:1 0 calc(50% - .75rem)}.fd-timeline--vertical .fd-timeline__list--first .fd-timeline__node-container{right:-1.5rem}[dir=rtl] .fd-timeline--vertical .fd-timeline__list--first .fd-timeline__node-container,.fd-timeline--vertical .fd-timeline__list--first .fd-timeline__node-container[dir=rtl]{right:auto;left:-1.5rem}.fd-timeline--vertical .fd-timeline__list--first .fd-timeline__post{margin-right:1rem}[dir=rtl] .fd-timeline--vertical .fd-timeline__list--first .fd-timeline__post,.fd-timeline--vertical .fd-timeline__list--first .fd-timeline__post[dir=rtl]{margin-right:0;margin-left:1rem}.fd-timeline--vertical .fd-timeline__list--first .fd-timeline__post:after{transform:translate(0) translateY(0) rotate(45deg);top:1rem;right:-.4375rem}[dir=rtl] .fd-timeline--vertical .fd-timeline__list--first .fd-timeline__post:after,.fd-timeline--vertical .fd-timeline__list--first .fd-timeline__post[dir=rtl]:after{transform:translate(0) translateY(0) rotate(225deg);right:auto;left:-.4375rem}.fd-timeline--vertical .fd-timeline__list--second .fd-timeline__node-container{left:-1.5rem}[dir=rtl] .fd-timeline--vertical .fd-timeline__list--second .fd-timeline__node-container,.fd-timeline--vertical .fd-timeline__list--second .fd-timeline__node-container[dir=rtl]{left:auto;right:-1.5rem}.fd-timeline--vertical .fd-timeline__list--second .fd-timeline__post{margin-left:1rem}[dir=rtl] .fd-timeline--vertical .fd-timeline__list--second .fd-timeline__post,.fd-timeline--vertical .fd-timeline__list--second .fd-timeline__post[dir=rtl]{margin-right:1rem;margin-left:0}.fd-timeline--vertical .fd-timeline__list--second .fd-timeline__post:after{transform:translate(0) translateY(0) rotate(225deg);top:1rem;left:-.4375rem}[dir=rtl] .fd-timeline--vertical .fd-timeline__list--second .fd-timeline__post:after,.fd-timeline--vertical .fd-timeline__list--second .fd-timeline__post[dir=rtl]:after{transform:translate(0) translateY(0) rotate(45deg);left:auto;right:-.4375rem}.fd-timeline--vertical .fd-timeline__list--with-offset{padding-top:1.5rem}.fd-timeline--vertical .fd-timeline__list--empty{flex:0 0 0}\n"] }]
        }], ctorParameters: () => [{ type: i0.IterableDiffers }, { type: i0.ChangeDetectorRef }, { type: TimelinePositionControlService }, { type: i0.ElementRef }], propDecorators: { dataSource: [{
                type: Input
            }], trackBy: [{
                type: Input
            }], axis: [{
                type: Input
            }], layout: [{
                type: Input
            }], _loadingTemplate: [{
                type: ViewChild,
                args: ['loadingTemplate']
            }], _firstListOutlet: [{
                type: ViewChild,
                args: [TimelineFirstListOutletDirective, { static: true }]
            }], _secondListOutlet: [{
                type: ViewChild,
                args: [TimelineSecondListOutletDirective, { static: true }]
            }], _nodeDefs: [{
                type: ContentChildren,
                args: [TimelineNodeDefDirective, { descendants: true }]
            }] } });

class TimelineNodeBodyComponent {
    constructor() {
        /** @hidden */
        this._injector = inject(Injector);
        /** @hidden */
        this._timelinePositionControlService = inject(TimelinePositionControlService);
    }
    /** @hidden */
    calculatePositions() {
        afterNextRender(() => {
            this._timelinePositionControlService.calculatePositions();
        }, { injector: this._injector });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TimelineNodeBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: TimelineNodeBodyComponent, isStandalone: true, selector: "fd-timeline-node-body", inputs: { content: "content", maxLines: "maxLines" }, host: { classAttribute: "fd-timeline__post-content" }, ngImport: i0, template: "<fd-text\n    [maxLines]=\"maxLines || 0\"\n    [text]=\"content\"\n    [isCollapsed]=\"!!maxLines\"\n    [expandable]=\"!!maxLines\"\n    (isCollapsedChange)=\"calculatePositions()\"\n></fd-text>\n", dependencies: [{ kind: "component", type: TextComponent, selector: "fd-text", inputs: ["text", "maxLines", "whitespaces", "hyphenation", "expandable", "isCollapsed", "subline"], outputs: ["isCollapsedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TimelineNodeBodyComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fd-timeline-node-body', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                        class: 'fd-timeline__post-content'
                    }, imports: [TextComponent], template: "<fd-text\n    [maxLines]=\"maxLines || 0\"\n    [text]=\"content\"\n    [isCollapsed]=\"!!maxLines\"\n    [expandable]=\"!!maxLines\"\n    (isCollapsedChange)=\"calculatePositions()\"\n></fd-text>\n" }]
        }], propDecorators: { content: [{
                type: Input
            }], maxLines: [{
                type: Input
            }] } });

class TimelineNodeFooterComponent {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TimelineNodeFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: TimelineNodeFooterComponent, isStandalone: true, selector: "fd-timeline-node-footer", host: { classAttribute: "fd-timeline__post-actions" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".fd-timeline__post-actions button+button{margin-left:.5rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TimelineNodeFooterComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fd-timeline-node-footer', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                        class: 'fd-timeline__post-actions'
                    }, standalone: true, styles: [".fd-timeline__post-actions button+button{margin-left:.5rem}\n"] }]
        }] });

class TimelineNodeHeaderInfoDirective {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TimelineNodeHeaderInfoDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: TimelineNodeHeaderInfoDirective, isStandalone: true, selector: "fd-timeline-node-header-info", host: { classAttribute: "fd-timeline__post-header" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TimelineNodeHeaderInfoDirective, decorators: [{
            type: Directive,
            args: [{
                    // eslint-disable-next-line @angular-eslint/directive-selector
                    selector: 'fd-timeline-node-header-info',
                    host: {
                        class: 'fd-timeline__post-header'
                    },
                    standalone: true
                }]
        }] });

class TimelineHeaderInfoSubTitleDirective {
    constructor() {
        /** add/remove fd-timeline__post-subheader class*/
        this.fdTimelineNodeHeaderInfoSubTitleClass = true;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TimelineHeaderInfoSubTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: TimelineHeaderInfoSubTitleDirective, isStandalone: true, selector: "[fdTimelineHeaderInfoSubTitle], [fd-timeline-header-info-sub-title]", host: { properties: { "class.fd-timeline__post-subheader": "this.fdTimelineNodeHeaderInfoSubTitleClass" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TimelineHeaderInfoSubTitleDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fdTimelineHeaderInfoSubTitle], [fd-timeline-header-info-sub-title]',
                    standalone: true
                }]
        }], propDecorators: { fdTimelineNodeHeaderInfoSubTitleClass: [{
                type: HostBinding,
                args: ['class.fd-timeline__post-subheader']
            }] } });

class TimelineNodeHeaderInfoTextDirective {
    constructor() {
        /** add/remove fd-timeline__post-header-text class*/
        this.fdTimelineNodeHeaderInfoTextClass = true;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TimelineNodeHeaderInfoTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: TimelineNodeHeaderInfoTextDirective, isStandalone: true, selector: "[fdTimelineNodeHeaderInfoText], [fd-timeline-node-header-info-text]", host: { properties: { "class.fd-timeline__post-header-text": "this.fdTimelineNodeHeaderInfoTextClass" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TimelineNodeHeaderInfoTextDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fdTimelineNodeHeaderInfoText], [fd-timeline-node-header-info-text]',
                    standalone: true
                }]
        }], propDecorators: { fdTimelineNodeHeaderInfoTextClass: [{
                type: HostBinding,
                args: ['class.fd-timeline__post-header-text']
            }] } });

class TimelineNodeHeaderInfoTitleDirective {
    constructor() {
        /** fd-timeline__post-header-title*/
        this.fdTimelineNodeHeaderInfoTitleClass = true;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TimelineNodeHeaderInfoTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: TimelineNodeHeaderInfoTitleDirective, isStandalone: true, selector: "[fdTimelineNodeHeaderInfoTitle], [fd-timeline-node-header-info-title]", host: { properties: { "class.fd-timeline__post-header-title": "this.fdTimelineNodeHeaderInfoTitleClass" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TimelineNodeHeaderInfoTitleDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fdTimelineNodeHeaderInfoTitle], [fd-timeline-node-header-info-title]',
                    standalone: true
                }]
        }], propDecorators: { fdTimelineNodeHeaderInfoTitleClass: [{
                type: HostBinding,
                args: ['class.fd-timeline__post-header-title']
            }] } });

/**
 * @deprecated
 * Use direct imports of `TimelineComponent`,
    `TimelineNodeDefDirective`,
    `TimelineNodeHeaderComponent`,
    `TimelineNodeHeaderInfoComponent`,
    `TimelineNodeBodyComponent`,
    `TimelineNodeFooterComponent`,
    `TimelineNodeComponent`,
    `TimelineNodeHeaderInfoTitleDirective`,
    `TimelineNodeHeaderInfoTextDirective`,
    `TimelineHeaderInfoSubTitleDirective`
 */
class TimelineModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: TimelineModule, imports: [TimelineComponent,
            TimelineNodeDefDirective,
            TimelineNodeHeaderDirective,
            TimelineNodeHeaderInfoDirective,
            TimelineNodeBodyComponent,
            TimelineNodeFooterComponent,
            TimelineNodeComponent,
            TimelineNodeHeaderInfoTitleDirective,
            TimelineNodeHeaderInfoTextDirective,
            TimelineHeaderInfoSubTitleDirective], exports: [TimelineComponent,
            TimelineNodeDefDirective,
            TimelineNodeHeaderDirective,
            TimelineNodeHeaderInfoDirective,
            TimelineNodeBodyComponent,
            TimelineNodeFooterComponent,
            TimelineNodeComponent,
            TimelineNodeHeaderInfoTitleDirective,
            TimelineNodeHeaderInfoTextDirective,
            TimelineHeaderInfoSubTitleDirective] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TimelineModule, imports: [TimelineComponent,
            TimelineNodeBodyComponent,
            TimelineNodeComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TimelineModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        TimelineComponent,
                        TimelineNodeDefDirective,
                        TimelineNodeHeaderDirective,
                        TimelineNodeHeaderInfoDirective,
                        TimelineNodeBodyComponent,
                        TimelineNodeFooterComponent,
                        TimelineNodeComponent,
                        TimelineNodeHeaderInfoTitleDirective,
                        TimelineNodeHeaderInfoTextDirective,
                        TimelineHeaderInfoSubTitleDirective
                    ],
                    exports: [
                        TimelineComponent,
                        TimelineNodeDefDirective,
                        TimelineNodeHeaderDirective,
                        TimelineNodeHeaderInfoDirective,
                        TimelineNodeBodyComponent,
                        TimelineNodeFooterComponent,
                        TimelineNodeComponent,
                        TimelineNodeHeaderInfoTitleDirective,
                        TimelineNodeHeaderInfoTextDirective,
                        TimelineHeaderInfoSubTitleDirective
                    ]
                }]
        }] });

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

export { BaseStrategy, HorizontalDoubleSidesStrategy, HorizontalSingleSideStrategy, PositionStrategyFactory, TimelineComponent, TimelineFirstListOutletDirective, TimelineHeaderInfoSubTitleDirective, TimelineModule, TimelineNodeBodyComponent, TimelineNodeComponent, TimelineNodeDefDirective, TimelineNodeFooterComponent, TimelineNodeHeaderDirective, TimelineNodeHeaderInfoDirective, TimelineNodeHeaderInfoTextDirective, TimelineNodeHeaderInfoTitleDirective, TimelineNodeOutletContext, TimelinePositionControlService, TimelineSecondListOutletDirective, VerticalDoubleSidesStrategy, VerticalSingleSideStrategy };
//# sourceMappingURL=fundamental-ngx-core-timeline.mjs.map
