import { Component, Input } from '@angular/core';
import { VerticalItemsComponent } from './components/vertical-items/vertical-items.component';
import { CollapseOptionComponent } from './components/collapse-option/collapse-option.component';
import { RangeLineComponent } from './components/range-line/range-line.component';
import { CollapsedItemsComponent } from './components/collapsed-items/collapsed-items.component';
import * as i0 from "@angular/core";
export class VerticalTimelineComponent {
    static nextId = 0;
    _activeIndex = 0;
    isG1Collapsed = true;
    isG2Collapsed = true;
    firstItem = [];
    g1Items = [];
    activeItem = [];
    g2Items = [];
    lastItem = [];
    set activeIndex(index) {
        this._activeIndex = index;
        this.groupItems();
    }
    get activeIndex() {
        return this._activeIndex;
    }
    highlightActiveItem;
    items;
    counterLabel;
    collapsable;
    onChangeG1(event) {
        this.isG1Collapsed = event;
    }
    onChangeG2(event) {
        this.isG2Collapsed = event;
    }
    groupItems() {
        this.firstItem = this.activeIndex <= 0 ? [] : [this.items[0]];
        this.g1Items = this.items.slice(1, this.activeIndex < 0 ? 0 : this.activeIndex);
        this.activeItem = this.activeIndex >= 0 ? [this.items[this.activeIndex]] : [];
        this.g2Items = this.items.slice(this.activeIndex + 1, this.items.length - 1);
        this.lastItem = this.activeIndex === this.items.length - 1 ? [] : [this.items[this.items.length - 1]];
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: VerticalTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: VerticalTimelineComponent, isStandalone: true, selector: "s-vertical-timeline", inputs: { activeIndex: "activeIndex", highlightActiveItem: "highlightActiveItem", items: "items", counterLabel: "counterLabel", collapsable: "collapsable" }, ngImport: i0, template: "<div class=\"vertical-timeline\">\n    @if (firstItem.length) {\n        <div class=\"vertical-timeline__block\">\n            <div class=\"vertical-timeline__block__prefix\"></div>\n            <s-vertical-items\n                [items]=\"firstItem\"\n                [isLast]=\"false\"\n                [isActive]=\"false\"\n                [isCompleted]=\"true\"\n            >\n            </s-vertical-items>\n        </div>\n    }\n\n    @if (g1Items.length) {\n        <div class=\"vertical-timeline__block\">\n            <div class=\"vertical-timeline__block__prefix\">\n                @if (g1Items.length > 1 && !isG1Collapsed) {\n                    @if (collapsable) {\n                        <s-collapse-option\n                            [isCollapsed]=\"isG1Collapsed\"\n                            (toggleCollapsed)=\"onChangeG1($event)\"\n                        >\n                        </s-collapse-option>\n                    }\n                    <s-range-line\n                        class=\"vertical-timeline__block__prefix__line\"\n                    ></s-range-line>\n                }\n            </div>\n\n            @if (isG1Collapsed && g1Items.length > 1 && collapsable) {\n                <s-collapsed-items\n                    [items]=\"g1Items\"\n                    [(isCollapsed)]=\"isG1Collapsed\"\n                    [isCompleted]=\"true\"\n                    [counterLabel]=\"counterLabel\"\n                >\n                </s-collapsed-items>\n            } @else {\n                <s-vertical-items\n                    [items]=\"g1Items\"\n                    [isLast]=\"false\"\n                    [isActive]=\"false\"\n                    [isCompleted]=\"true\"\n                >\n                </s-vertical-items>\n            }\n        </div>\n    }\n\n    @if (activeItem.length) {\n        <div class=\"vertical-timeline__block\">\n            <div class=\"vertical-timeline__block__prefix\"></div>\n            <s-vertical-items\n                [items]=\"activeItem\"\n                [isLast]=\"!lastItem.length\"\n                [isActive]=\"true\"\n                [highlightActive]=\"highlightActiveItem\"\n                [isCompleted]=\"false\"\n            >\n            </s-vertical-items>\n        </div>\n    }\n\n    @if (g2Items.length) {\n        <div class=\"vertical-timeline__block\">\n            <div class=\"vertical-timeline__block__prefix\">\n                @if (g2Items.length > 1 && !isG2Collapsed) {\n                    @if (collapsable) {\n                        <s-collapse-option\n                            [isCollapsed]=\"isG2Collapsed\"\n                            (toggleCollapsed)=\"onChangeG2($event)\"\n                        >\n                        </s-collapse-option>\n                    }\n                    <s-range-line\n                        class=\"vertical-timeline__block__prefix__line\"\n                    ></s-range-line>\n                }\n            </div>\n\n            @if (isG2Collapsed && g2Items.length > 1 && collapsable) {\n                <s-collapsed-items\n                    [items]=\"g2Items\"\n                    [(isCollapsed)]=\"isG2Collapsed\"\n                    [isCompleted]=\"false\"\n                    [counterLabel]=\"counterLabel\"\n                >\n                </s-collapsed-items>\n            } @else {\n                <s-vertical-items\n                    [items]=\"g2Items\"\n                    [isLast]=\"false\"\n                    [isActive]=\"false\"\n                    [isCompleted]=\"false\"\n                >\n                </s-vertical-items>\n            }\n        </div>\n    }\n\n    @if (lastItem.length) {\n        <div class=\"vertical-timeline__block\">\n            <div class=\"vertical-timeline__block__prefix\"></div>\n            <s-vertical-items\n                [items]=\"lastItem\"\n                [isLast]=\"true\"\n                [isActive]=\"false\"\n                [isCompleted]=\"false\"\n            >\n            </s-vertical-items>\n        </div>\n    }\n</div>\n", styles: [".vertical-timeline{display:flex;flex-direction:column}.vertical-timeline .vertical-timeline__block{display:flex;align-items:stretch}.vertical-timeline .vertical-timeline__block .vertical-timeline__block__prefix{width:60px;display:flex;align-items:center;flex-shrink:0}.vertical-timeline .vertical-timeline__block .vertical-timeline__block__prefix .vertical-timeline__block__prefix__line{height:100%}\n"], dependencies: [{ kind: "component", type: VerticalItemsComponent, selector: "s-vertical-items", inputs: ["items", "isLast", "isActive", "highlightActive", "isCompleted"] }, { kind: "component", type: CollapseOptionComponent, selector: "s-collapse-option", inputs: ["isCollapsed"], outputs: ["toggleCollapsed"] }, { kind: "component", type: RangeLineComponent, selector: "s-range-line" }, { kind: "component", type: CollapsedItemsComponent, selector: "s-collapsed-items", inputs: ["items", "isCollapsed", "isCompleted", "counterLabel"], outputs: ["isCollapsedChange"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: VerticalTimelineComponent, decorators: [{
            type: Component,
            args: [{ selector: 's-vertical-timeline', standalone: true, imports: [VerticalItemsComponent, CollapseOptionComponent, RangeLineComponent, CollapsedItemsComponent], template: "<div class=\"vertical-timeline\">\n    @if (firstItem.length) {\n        <div class=\"vertical-timeline__block\">\n            <div class=\"vertical-timeline__block__prefix\"></div>\n            <s-vertical-items\n                [items]=\"firstItem\"\n                [isLast]=\"false\"\n                [isActive]=\"false\"\n                [isCompleted]=\"true\"\n            >\n            </s-vertical-items>\n        </div>\n    }\n\n    @if (g1Items.length) {\n        <div class=\"vertical-timeline__block\">\n            <div class=\"vertical-timeline__block__prefix\">\n                @if (g1Items.length > 1 && !isG1Collapsed) {\n                    @if (collapsable) {\n                        <s-collapse-option\n                            [isCollapsed]=\"isG1Collapsed\"\n                            (toggleCollapsed)=\"onChangeG1($event)\"\n                        >\n                        </s-collapse-option>\n                    }\n                    <s-range-line\n                        class=\"vertical-timeline__block__prefix__line\"\n                    ></s-range-line>\n                }\n            </div>\n\n            @if (isG1Collapsed && g1Items.length > 1 && collapsable) {\n                <s-collapsed-items\n                    [items]=\"g1Items\"\n                    [(isCollapsed)]=\"isG1Collapsed\"\n                    [isCompleted]=\"true\"\n                    [counterLabel]=\"counterLabel\"\n                >\n                </s-collapsed-items>\n            } @else {\n                <s-vertical-items\n                    [items]=\"g1Items\"\n                    [isLast]=\"false\"\n                    [isActive]=\"false\"\n                    [isCompleted]=\"true\"\n                >\n                </s-vertical-items>\n            }\n        </div>\n    }\n\n    @if (activeItem.length) {\n        <div class=\"vertical-timeline__block\">\n            <div class=\"vertical-timeline__block__prefix\"></div>\n            <s-vertical-items\n                [items]=\"activeItem\"\n                [isLast]=\"!lastItem.length\"\n                [isActive]=\"true\"\n                [highlightActive]=\"highlightActiveItem\"\n                [isCompleted]=\"false\"\n            >\n            </s-vertical-items>\n        </div>\n    }\n\n    @if (g2Items.length) {\n        <div class=\"vertical-timeline__block\">\n            <div class=\"vertical-timeline__block__prefix\">\n                @if (g2Items.length > 1 && !isG2Collapsed) {\n                    @if (collapsable) {\n                        <s-collapse-option\n                            [isCollapsed]=\"isG2Collapsed\"\n                            (toggleCollapsed)=\"onChangeG2($event)\"\n                        >\n                        </s-collapse-option>\n                    }\n                    <s-range-line\n                        class=\"vertical-timeline__block__prefix__line\"\n                    ></s-range-line>\n                }\n            </div>\n\n            @if (isG2Collapsed && g2Items.length > 1 && collapsable) {\n                <s-collapsed-items\n                    [items]=\"g2Items\"\n                    [(isCollapsed)]=\"isG2Collapsed\"\n                    [isCompleted]=\"false\"\n                    [counterLabel]=\"counterLabel\"\n                >\n                </s-collapsed-items>\n            } @else {\n                <s-vertical-items\n                    [items]=\"g2Items\"\n                    [isLast]=\"false\"\n                    [isActive]=\"false\"\n                    [isCompleted]=\"false\"\n                >\n                </s-vertical-items>\n            }\n        </div>\n    }\n\n    @if (lastItem.length) {\n        <div class=\"vertical-timeline__block\">\n            <div class=\"vertical-timeline__block__prefix\"></div>\n            <s-vertical-items\n                [items]=\"lastItem\"\n                [isLast]=\"true\"\n                [isActive]=\"false\"\n                [isCompleted]=\"false\"\n            >\n            </s-vertical-items>\n        </div>\n    }\n</div>\n", styles: [".vertical-timeline{display:flex;flex-direction:column}.vertical-timeline .vertical-timeline__block{display:flex;align-items:stretch}.vertical-timeline .vertical-timeline__block .vertical-timeline__block__prefix{width:60px;display:flex;align-items:center;flex-shrink:0}.vertical-timeline .vertical-timeline__block .vertical-timeline__block__prefix .vertical-timeline__block__prefix__line{height:100%}\n"] }]
        }], propDecorators: { activeIndex: [{
                type: Input,
                args: [{ required: true }]
            }], highlightActiveItem: [{
                type: Input
            }], items: [{
                type: Input,
                args: [{ required: true }]
            }], counterLabel: [{
                type: Input
            }], collapsable: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 