import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@seniorsistemas/angular-components/tooltip";
import * as i3 from "../timeline-icon-item/timeline-icon-item.component";
export class HorizontalTimelineComponent {
    items;
    activeIndex = 0;
    highlightActiveItem;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HorizontalTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: HorizontalTimelineComponent, selector: "s-horizontal-timeline", inputs: { items: "items", activeIndex: "activeIndex", highlightActiveItem: "highlightActiveItem" }, ngImport: i0, template: "<div class=\"horizontal-timeline\">\n    @for (\n        item of items;\n        track item.id;\n        let i = $index;\n        let isFirst = $first;\n        let isLast = $last\n    ) {\n        <div\n            class=\"horizontal-timeline__item\"\n            [ngClass]=\"{\n                'horizontal-timeline__item--small': item.testSize('small'),\n                'horizontal-timeline__item--normal': item.testSize('normal'),\n                'horizontal-timeline__item--warning':\n                    item.testSeverity('warning'),\n                'horizontal-timeline__item--error': item.testSeverity('error'),\n                'horizontal-timeline__item--completed': i < activeIndex,\n                'horizontal-timeline__item--active': i === activeIndex,\n            }\"\n        >\n            <div class=\"horizontal-timeline__item__icon-wrapper\">\n                <div\n                    class=\"horizontal-timeline__item__icon-wrapper__line horizontal-timeline__item__icon-wrapper__line--before\"\n                    [ngStyle]=\"{ visibility: isFirst ? 'hidden' : 'visible' }\"\n                ></div>\n                <s-timeline-icon-item\n                    [item]=\"item\"\n                    [isActive]=\"i === activeIndex\"\n                    [isComplete]=\"i < activeIndex\"\n                    [highlightActive]=\"highlightActiveItem\"\n                >\n                </s-timeline-icon-item>\n                <div\n                    class=\"horizontal-timeline__item__icon-wrapper__line horizontal-timeline__item__icon-wrapper__line--after\"\n                    [ngStyle]=\"{ visibility: isLast ? 'hidden' : 'visible' }\"\n                ></div>\n            </div>\n            <div class=\"horizontal-timeline__item__info\">\n                <div\n                    class=\"horizontal-timeline__item__info__title\"\n                    [sTooltip]=\"item.title\"\n                    [showDelay]=\"1000\"\n                >\n                    {{ item.title }}\n                </div>\n                <div\n                    class=\"horizontal-timeline__item__info__description\"\n                    [sTooltip]=\"item.description\"\n                    [showDelay]=\"1000\"\n                >\n                    {{ item.description }}\n                </div>\n            </div>\n        </div>\n    }\n</div>\n", styles: [".horizontal-timeline{align-items:flex-start;display:flex;justify-content:space-between}.horizontal-timeline .horizontal-timeline__item{align-items:center;display:inline-flex;flex-direction:column;justify-content:center;width:100%}.horizontal-timeline .horizontal-timeline__item .horizontal-timeline__item__icon-wrapper{align-items:center;display:flex;height:56px;justify-content:flex-start;width:100%}.horizontal-timeline .horizontal-timeline__item .horizontal-timeline__item__icon-wrapper .horizontal-timeline__item__icon-wrapper__line{background-color:#697882;height:3px}.horizontal-timeline .horizontal-timeline__item .horizontal-timeline__item__icon-wrapper .horizontal-timeline__item__icon-wrapper__line--before{border-radius:0 2px 2px 0}.horizontal-timeline .horizontal-timeline__item .horizontal-timeline__item__icon-wrapper .horizontal-timeline__item__icon-wrapper__line--after{border-radius:2px 0 0 2px}.horizontal-timeline .horizontal-timeline__item .horizontal-timeline__item__info{width:20ch}.horizontal-timeline .horizontal-timeline__item .horizontal-timeline__item__info .horizontal-timeline__item__info__title{color:#333;font-family:Open Sans,sans-serif;font-size:14px;font-weight:700;line-height:150%;max-width:100%;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}.horizontal-timeline .horizontal-timeline__item .horizontal-timeline__item__info .horizontal-timeline__item__info__description{color:#999;display:-webkit-box;font-family:Open Sans,sans-serif;font-size:12px;font-weight:400;line-height:150%;max-height:72px;overflow:hidden;text-align:center;text-overflow:ellipsis;line-clamp:4;-webkit-line-clamp:4;-webkit-box-orient:vertical}.horizontal-timeline .horizontal-timeline__item.horizontal-timeline__item--small .horizontal-timeline__item__icon-wrapper .horizontal-timeline__item__icon-wrapper__line{width:calc(50% - 12px)}.horizontal-timeline .horizontal-timeline__item.horizontal-timeline__item--normal .horizontal-timeline__item__icon-wrapper__line{width:calc(50% - 16px)}.horizontal-timeline .horizontal-timeline__item.horizontal-timeline__item--active--highlight .horizontal-timeline__item__icon-wrapper .horizontal-timeline__item__icon-wrapper__line{width:calc(50% - 24px)}.horizontal-timeline .horizontal-timeline__item.horizontal-timeline__item--completed .horizontal-timeline__item__icon-wrapper .horizontal-timeline__item__icon-wrapper__line--before,.horizontal-timeline .horizontal-timeline__item.horizontal-timeline__item--completed .horizontal-timeline__item__icon-wrapper .horizontal-timeline__item__icon-wrapper__line--after,.horizontal-timeline .horizontal-timeline__item.horizontal-timeline__item--active .horizontal-timeline__item__icon-wrapper .horizontal-timeline__item__icon-wrapper__line--before{background-color:#0c9348}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.TooltipDirective, selector: "[sTooltip]", inputs: ["sTooltip", "tooltipPosition", "showDelay", "displayTime", "tooltipEvent", "escape", "visible", "mobileBehavior", "focusedInputRef", "checkTruncatedText"] }, { kind: "component", type: i3.TimelineIconItemComponent, selector: "s-timeline-icon-item", inputs: ["item", "isActive", "highlightActive", "isComplete"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HorizontalTimelineComponent, decorators: [{
            type: Component,
            args: [{ selector: 's-horizontal-timeline', template: "<div class=\"horizontal-timeline\">\n    @for (\n        item of items;\n        track item.id;\n        let i = $index;\n        let isFirst = $first;\n        let isLast = $last\n    ) {\n        <div\n            class=\"horizontal-timeline__item\"\n            [ngClass]=\"{\n                'horizontal-timeline__item--small': item.testSize('small'),\n                'horizontal-timeline__item--normal': item.testSize('normal'),\n                'horizontal-timeline__item--warning':\n                    item.testSeverity('warning'),\n                'horizontal-timeline__item--error': item.testSeverity('error'),\n                'horizontal-timeline__item--completed': i < activeIndex,\n                'horizontal-timeline__item--active': i === activeIndex,\n            }\"\n        >\n            <div class=\"horizontal-timeline__item__icon-wrapper\">\n                <div\n                    class=\"horizontal-timeline__item__icon-wrapper__line horizontal-timeline__item__icon-wrapper__line--before\"\n                    [ngStyle]=\"{ visibility: isFirst ? 'hidden' : 'visible' }\"\n                ></div>\n                <s-timeline-icon-item\n                    [item]=\"item\"\n                    [isActive]=\"i === activeIndex\"\n                    [isComplete]=\"i < activeIndex\"\n                    [highlightActive]=\"highlightActiveItem\"\n                >\n                </s-timeline-icon-item>\n                <div\n                    class=\"horizontal-timeline__item__icon-wrapper__line horizontal-timeline__item__icon-wrapper__line--after\"\n                    [ngStyle]=\"{ visibility: isLast ? 'hidden' : 'visible' }\"\n                ></div>\n            </div>\n            <div class=\"horizontal-timeline__item__info\">\n                <div\n                    class=\"horizontal-timeline__item__info__title\"\n                    [sTooltip]=\"item.title\"\n                    [showDelay]=\"1000\"\n                >\n                    {{ item.title }}\n                </div>\n                <div\n                    class=\"horizontal-timeline__item__info__description\"\n                    [sTooltip]=\"item.description\"\n                    [showDelay]=\"1000\"\n                >\n                    {{ item.description }}\n                </div>\n            </div>\n        </div>\n    }\n</div>\n", styles: [".horizontal-timeline{align-items:flex-start;display:flex;justify-content:space-between}.horizontal-timeline .horizontal-timeline__item{align-items:center;display:inline-flex;flex-direction:column;justify-content:center;width:100%}.horizontal-timeline .horizontal-timeline__item .horizontal-timeline__item__icon-wrapper{align-items:center;display:flex;height:56px;justify-content:flex-start;width:100%}.horizontal-timeline .horizontal-timeline__item .horizontal-timeline__item__icon-wrapper .horizontal-timeline__item__icon-wrapper__line{background-color:#697882;height:3px}.horizontal-timeline .horizontal-timeline__item .horizontal-timeline__item__icon-wrapper .horizontal-timeline__item__icon-wrapper__line--before{border-radius:0 2px 2px 0}.horizontal-timeline .horizontal-timeline__item .horizontal-timeline__item__icon-wrapper .horizontal-timeline__item__icon-wrapper__line--after{border-radius:2px 0 0 2px}.horizontal-timeline .horizontal-timeline__item .horizontal-timeline__item__info{width:20ch}.horizontal-timeline .horizontal-timeline__item .horizontal-timeline__item__info .horizontal-timeline__item__info__title{color:#333;font-family:Open Sans,sans-serif;font-size:14px;font-weight:700;line-height:150%;max-width:100%;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}.horizontal-timeline .horizontal-timeline__item .horizontal-timeline__item__info .horizontal-timeline__item__info__description{color:#999;display:-webkit-box;font-family:Open Sans,sans-serif;font-size:12px;font-weight:400;line-height:150%;max-height:72px;overflow:hidden;text-align:center;text-overflow:ellipsis;line-clamp:4;-webkit-line-clamp:4;-webkit-box-orient:vertical}.horizontal-timeline .horizontal-timeline__item.horizontal-timeline__item--small .horizontal-timeline__item__icon-wrapper .horizontal-timeline__item__icon-wrapper__line{width:calc(50% - 12px)}.horizontal-timeline .horizontal-timeline__item.horizontal-timeline__item--normal .horizontal-timeline__item__icon-wrapper__line{width:calc(50% - 16px)}.horizontal-timeline .horizontal-timeline__item.horizontal-timeline__item--active--highlight .horizontal-timeline__item__icon-wrapper .horizontal-timeline__item__icon-wrapper__line{width:calc(50% - 24px)}.horizontal-timeline .horizontal-timeline__item.horizontal-timeline__item--completed .horizontal-timeline__item__icon-wrapper .horizontal-timeline__item__icon-wrapper__line--before,.horizontal-timeline .horizontal-timeline__item.horizontal-timeline__item--completed .horizontal-timeline__item__icon-wrapper .horizontal-timeline__item__icon-wrapper__line--after,.horizontal-timeline .horizontal-timeline__item.horizontal-timeline__item--active .horizontal-timeline__item__icon-wrapper .horizontal-timeline__item__icon-wrapper__line--before{background-color:#0c9348}\n"] }]
        }], propDecorators: { items: [{
                type: Input,
                args: [{ required: true }]
            }], activeIndex: [{
                type: Input
            }], highlightActiveItem: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 