import { Component, Input } from '@angular/core';
import { NgClass, NgStyle } from '@angular/common';
import { TimelineIconItemComponent } from '../../../timeline-icon-item/timeline-icon-item.component';
import * as i0 from "@angular/core";
export class VerticalItemsComponent {
    items;
    isLast;
    isActive;
    highlightActive;
    isCompleted;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: VerticalItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: VerticalItemsComponent, isStandalone: true, selector: "s-vertical-items", inputs: { items: "items", isLast: "isLast", isActive: "isActive", highlightActive: "highlightActive", isCompleted: "isCompleted" }, ngImport: i0, template: "<div class=\"vertical-items\">\n    @for (item of items; track item.id; let index = $index) {\n        <div\n            class=\"vertical-items__item\"\n            [ngClass]=\"{\n                'vertical-items__item--small': item.testSize('small'),\n                'vertical-items__item--normal': item.testSize('normal'),\n                'vertical-items__item--completed': isCompleted,\n                'vertical-items__item--active': isActive,\n            }\"\n        >\n            <div class=\"vertical-items__item__icon-wrapper\">\n                <s-timeline-icon-item\n                    [item]=\"item\"\n                    [isComplete]=\"isCompleted\"\n                    [isActive]=\"isActive\"\n                    [highlightActive]=\"highlightActive\"\n                >\n                </s-timeline-icon-item>\n                <div\n                    class=\"vertical-items__item__icon-wrapper__line\"\n                    [ngStyle]=\"{ visibility: isLast ? 'hidden' : 'visible' }\"\n                ></div>\n            </div>\n            <div class=\"vertical-items__item__info\">\n                <div class=\"vertical-timeline__item__info__title\">\n                    {{ item.title }}\n                </div>\n                <div class=\"vertical-items__item__info__description\">\n                    {{ item.description }}\n                </div>\n            </div>\n        </div>\n    }\n</div>\n", styles: [".vertical-items .vertical-items__item{align-items:stretch;display:flex;margin-right:50px}.vertical-items .vertical-items__item .vertical-items__item__collapsed-option{display:flex;flex-direction:row}.vertical-items .vertical-items__item .vertical-items__item__collapsed-option .vertical-items__item__collapsed-option__line{width:3px;height:50px;background-color:#ccc}.vertical-items .vertical-items__item .vertical-items__item__icon-wrapper{align-items:center;display:flex;flex-direction:column;flex-shrink:0;justify-content:center;width:56px}.vertical-items .vertical-items__item .vertical-items__item__icon-wrapper .vertical-items__item__icon-wrapper__line{background-color:#697882;border-radius:2px;flex-grow:1;min-height:20px;width:3px}.vertical-items .vertical-items__item .vertical-items__item__info{align-items:flex-start;display:flex;flex-direction:column;justify-content:center;margin-bottom:12px}.vertical-items .vertical-items__item .vertical-items__item__info .vertical-items__item__info__title{color:#333;font-family:Open Sans,sans-serif;font-size:14px;font-weight:700;line-height:150%}.vertical-items .vertical-items__item .vertical-items__item__info .vertical-items__item__info__description{color:#999;font-family:Open Sans,sans-serif;font-size:12px;font-weight:400;line-height:150%}.vertical-items .vertical-items__item .vertical-items__item__info .vertical-items__item__info__description.vertical-items__item__info__description--link{color:#428bca}.vertical-items .vertical-items__item.vertical-items__item--small .vertical-items__item__icon-wrapper__line{height:calc(100% - 12px)}.vertical-items .vertical-items__item.vertical-items__item--medium .vertical-items__item__icon-wrapper__line{height:calc(100% - 16px)}.vertical-items .vertical-items__item.vertical-items__item--big .vertical-items__item__icon-wrapper__line{height:calc(50% - 24px)}.vertical-items .vertical-items__item.vertical-items__item--completed .vertical-items__item__icon-wrapper .vertical-items__item__icon-wrapper__line{background-color:#0c9348}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TimelineIconItemComponent, selector: "s-timeline-icon-item", inputs: ["item", "isActive", "highlightActive", "isComplete"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: VerticalItemsComponent, decorators: [{
            type: Component,
            args: [{ selector: 's-vertical-items', standalone: true, imports: [NgClass, TimelineIconItemComponent, NgStyle], template: "<div class=\"vertical-items\">\n    @for (item of items; track item.id; let index = $index) {\n        <div\n            class=\"vertical-items__item\"\n            [ngClass]=\"{\n                'vertical-items__item--small': item.testSize('small'),\n                'vertical-items__item--normal': item.testSize('normal'),\n                'vertical-items__item--completed': isCompleted,\n                'vertical-items__item--active': isActive,\n            }\"\n        >\n            <div class=\"vertical-items__item__icon-wrapper\">\n                <s-timeline-icon-item\n                    [item]=\"item\"\n                    [isComplete]=\"isCompleted\"\n                    [isActive]=\"isActive\"\n                    [highlightActive]=\"highlightActive\"\n                >\n                </s-timeline-icon-item>\n                <div\n                    class=\"vertical-items__item__icon-wrapper__line\"\n                    [ngStyle]=\"{ visibility: isLast ? 'hidden' : 'visible' }\"\n                ></div>\n            </div>\n            <div class=\"vertical-items__item__info\">\n                <div class=\"vertical-timeline__item__info__title\">\n                    {{ item.title }}\n                </div>\n                <div class=\"vertical-items__item__info__description\">\n                    {{ item.description }}\n                </div>\n            </div>\n        </div>\n    }\n</div>\n", styles: [".vertical-items .vertical-items__item{align-items:stretch;display:flex;margin-right:50px}.vertical-items .vertical-items__item .vertical-items__item__collapsed-option{display:flex;flex-direction:row}.vertical-items .vertical-items__item .vertical-items__item__collapsed-option .vertical-items__item__collapsed-option__line{width:3px;height:50px;background-color:#ccc}.vertical-items .vertical-items__item .vertical-items__item__icon-wrapper{align-items:center;display:flex;flex-direction:column;flex-shrink:0;justify-content:center;width:56px}.vertical-items .vertical-items__item .vertical-items__item__icon-wrapper .vertical-items__item__icon-wrapper__line{background-color:#697882;border-radius:2px;flex-grow:1;min-height:20px;width:3px}.vertical-items .vertical-items__item .vertical-items__item__info{align-items:flex-start;display:flex;flex-direction:column;justify-content:center;margin-bottom:12px}.vertical-items .vertical-items__item .vertical-items__item__info .vertical-items__item__info__title{color:#333;font-family:Open Sans,sans-serif;font-size:14px;font-weight:700;line-height:150%}.vertical-items .vertical-items__item .vertical-items__item__info .vertical-items__item__info__description{color:#999;font-family:Open Sans,sans-serif;font-size:12px;font-weight:400;line-height:150%}.vertical-items .vertical-items__item .vertical-items__item__info .vertical-items__item__info__description.vertical-items__item__info__description--link{color:#428bca}.vertical-items .vertical-items__item.vertical-items__item--small .vertical-items__item__icon-wrapper__line{height:calc(100% - 12px)}.vertical-items .vertical-items__item.vertical-items__item--medium .vertical-items__item__icon-wrapper__line{height:calc(100% - 16px)}.vertical-items .vertical-items__item.vertical-items__item--big .vertical-items__item__icon-wrapper__line{height:calc(50% - 24px)}.vertical-items .vertical-items__item.vertical-items__item--completed .vertical-items__item__icon-wrapper .vertical-items__item__icon-wrapper__line{background-color:#0c9348}\n"] }]
        }], propDecorators: { items: [{
                type: Input,
                args: [{ required: true }]
            }], isLast: [{
                type: Input
            }], isActive: [{
                type: Input
            }], highlightActive: [{
                type: Input
            }], isCompleted: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 