@seniorsistemas/angular-components 19.7.3-bugfix-ptfgap-1271-ddfd6e7b → 19.7.4

package/fesm2022/seniorsistemas-angular-components-timeline.mjs

@@ -1,9 +1,7 @@
 import * as i0 from '@angular/core';
 import { Component, Input, EventEmitter, Output, HostListener, NgModule } from '@angular/core';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i2 from '@seniorsistemas/angular-components/tooltip';
-import { TooltipModule } from '@seniorsistemas/angular-components/tooltip';
+import { NgClass, NgStyle } from '@angular/common';
+import { TooltipDirective } from '@seniorsistemas/angular-components/tooltip';
 
 class TimelineIconItemComponent {
     item;
@@ -11,11 +9,11 @@ class TimelineIconItemComponent {
     highlightActive;
     isComplete;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineIconItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TimelineIconItemComponent, selector: "s-timeline-icon-item", inputs: { item: "item", isActive: "isActive", highlightActive: "highlightActive", isComplete: "isComplete" }, ngImport: i0, template: "@if (item) {\n    <div\n        class=\"timeline__icon-item\"\n        [ngClass]=\"{\n            'timeline__icon-item--small': item.testSize('small'),\n            'timeline__icon-item--normal': item.testSize('normal'),\n            'timeline__icon-item--warning': item.testSeverity('warning'),\n            'timeline__icon-item--error': item.testSeverity('error'),\n            'timeline__icon-item--completed': isComplete,\n            'timeline__icon-item--active': isActive,\n            'timeline__icon-item--active--highlight':\n                isActive && highlightActive,\n        }\"\n    >\n        <div\n            class=\"timeline__icon-item__icon\"\n            [sTooltip]=\"item.tooltip\"\n            [ngStyle]=\"{ backgroundColor: item.color }\"\n        >\n            @if (item.icon) {\n                <span [ngClass]=\"item.icon\"></span>\n            } @else {\n            <span class=\"timeline__icon-item__icon__label\" [class.large_label]=\"(item.label?.length ?? 0) > 2\">\n               {{ item.label }}\n            </span>\n            }\n        </div>\n    </div>\n}\n", styles: [".timeline__icon-item .timeline__icon-item__icon{align-items:center;background-color:#697882;border-radius:50%;color:#fff;display:flex;justify-content:center;margin:4px;-webkit-user-select:none;user-select:none}.timeline__icon-item .timeline__icon-item__icon .timeline__icon-item__icon__label{font-family:Open Sans,sans-serif}.timeline__icon-item.timeline__icon-item--small .timeline__icon-item__icon{font-size:0;height:16px;width:16px}.timeline__icon-item.timeline__icon-item--normal .timeline__icon-item__icon{font-size:10px;height:24px;padding:8px;width:24px}.timeline__icon-item.timeline__icon-item--normal .timeline__icon-item__icon .timeline__icon-item__icon__label{font-size:14px}.timeline__icon-item.timeline__icon-item--normal .timeline__icon-item__icon .timeline__icon-item__icon__label.large_label{font-size:12px}.timeline__icon-item.timeline__icon-item--active--highlight .timeline__icon-item__icon{font-size:20px;height:40px;padding:10px;width:40px}.timeline__icon-item.timeline__icon-item--active--highlight .timeline__icon-item__icon .timeline__icon-item__icon__label{font-size:22px}.timeline__icon-item.timeline__icon-item--active--highlight .timeline__icon-item__icon .timeline__icon-item__icon__label.large_label{font-size:18px}.timeline__icon-item.timeline__icon-item--completed .timeline__icon-item__icon,.timeline__icon-item.timeline__icon-item--active .timeline__icon-item__icon{background-color:#0c9348}.timeline__icon-item.timeline__icon-item--warning.timeline__icon-item--active .timeline__icon-item__icon{background-color:#fcbf10;color:#333}.timeline__icon-item.timeline__icon-item--danger.timeline__icon-item--active .timeline__icon-item__icon{background-color:#f8931f;color:#333}.timeline__icon-item.timeline__icon-item--error.timeline__icon-item--active .timeline__icon-item__icon{background-color:#c13018}\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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TimelineIconItemComponent, isStandalone: true, selector: "s-timeline-icon-item", inputs: { item: "item", isActive: "isActive", highlightActive: "highlightActive", isComplete: "isComplete" }, ngImport: i0, template: "@if (item) {\n    <div\n        class=\"timeline__icon-item\"\n        [ngClass]=\"{\n            'timeline__icon-item--small': item.testSize('small'),\n            'timeline__icon-item--normal': item.testSize('normal'),\n            'timeline__icon-item--warning': item.testSeverity('warning'),\n            'timeline__icon-item--error': item.testSeverity('error'),\n            'timeline__icon-item--completed': isComplete,\n            'timeline__icon-item--active': isActive,\n            'timeline__icon-item--active--highlight':\n                isActive && highlightActive,\n        }\"\n    >\n        <div\n            class=\"timeline__icon-item__icon\"\n            [sTooltip]=\"item.tooltip\"\n            [ngStyle]=\"{ backgroundColor: item.color }\"\n        >\n            @if (item.icon) {\n                <span [ngClass]=\"item.icon\"></span>\n            } @else {\n            <span class=\"timeline__icon-item__icon__label\" [class.large_label]=\"(item.label?.length ?? 0) > 2\">\n               {{ item.label }}\n            </span>\n            }\n        </div>\n    </div>\n}\n", styles: [".timeline__icon-item .timeline__icon-item__icon{align-items:center;background-color:#697882;border-radius:50%;color:#fff;display:flex;justify-content:center;margin:4px;-webkit-user-select:none;user-select:none}.timeline__icon-item .timeline__icon-item__icon .timeline__icon-item__icon__label{font-family:Open Sans,sans-serif}.timeline__icon-item.timeline__icon-item--small .timeline__icon-item__icon{font-size:0;height:16px;width:16px}.timeline__icon-item.timeline__icon-item--normal .timeline__icon-item__icon{font-size:10px;height:24px;padding:8px;width:24px}.timeline__icon-item.timeline__icon-item--normal .timeline__icon-item__icon .timeline__icon-item__icon__label{font-size:14px}.timeline__icon-item.timeline__icon-item--normal .timeline__icon-item__icon .timeline__icon-item__icon__label.large_label{font-size:12px}.timeline__icon-item.timeline__icon-item--active--highlight .timeline__icon-item__icon{font-size:20px;height:40px;padding:10px;width:40px}.timeline__icon-item.timeline__icon-item--active--highlight .timeline__icon-item__icon .timeline__icon-item__icon__label{font-size:22px}.timeline__icon-item.timeline__icon-item--active--highlight .timeline__icon-item__icon .timeline__icon-item__icon__label.large_label{font-size:18px}.timeline__icon-item.timeline__icon-item--completed .timeline__icon-item__icon,.timeline__icon-item.timeline__icon-item--active .timeline__icon-item__icon{background-color:#0c9348}.timeline__icon-item.timeline__icon-item--warning.timeline__icon-item--active .timeline__icon-item__icon{background-color:#fcbf10;color:#333}.timeline__icon-item.timeline__icon-item--danger.timeline__icon-item--active .timeline__icon-item__icon{background-color:#f8931f;color:#333}.timeline__icon-item.timeline__icon-item--error.timeline__icon-item--active .timeline__icon-item__icon{background-color:#c13018}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TooltipDirective, selector: "[sTooltip]", inputs: ["sTooltip", "tooltipPosition", "showDelay", "displayTime", "tooltipEvent", "escape", "visible", "mobileBehavior", "focusedInputRef", "checkTruncatedText"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineIconItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-timeline-icon-item', template: "@if (item) {\n    <div\n        class=\"timeline__icon-item\"\n        [ngClass]=\"{\n            'timeline__icon-item--small': item.testSize('small'),\n            'timeline__icon-item--normal': item.testSize('normal'),\n            'timeline__icon-item--warning': item.testSeverity('warning'),\n            'timeline__icon-item--error': item.testSeverity('error'),\n            'timeline__icon-item--completed': isComplete,\n            'timeline__icon-item--active': isActive,\n            'timeline__icon-item--active--highlight':\n                isActive && highlightActive,\n        }\"\n    >\n        <div\n            class=\"timeline__icon-item__icon\"\n            [sTooltip]=\"item.tooltip\"\n            [ngStyle]=\"{ backgroundColor: item.color }\"\n        >\n            @if (item.icon) {\n                <span [ngClass]=\"item.icon\"></span>\n            } @else {\n            <span class=\"timeline__icon-item__icon__label\" [class.large_label]=\"(item.label?.length ?? 0) > 2\">\n               {{ item.label }}\n            </span>\n            }\n        </div>\n    </div>\n}\n", styles: [".timeline__icon-item .timeline__icon-item__icon{align-items:center;background-color:#697882;border-radius:50%;color:#fff;display:flex;justify-content:center;margin:4px;-webkit-user-select:none;user-select:none}.timeline__icon-item .timeline__icon-item__icon .timeline__icon-item__icon__label{font-family:Open Sans,sans-serif}.timeline__icon-item.timeline__icon-item--small .timeline__icon-item__icon{font-size:0;height:16px;width:16px}.timeline__icon-item.timeline__icon-item--normal .timeline__icon-item__icon{font-size:10px;height:24px;padding:8px;width:24px}.timeline__icon-item.timeline__icon-item--normal .timeline__icon-item__icon .timeline__icon-item__icon__label{font-size:14px}.timeline__icon-item.timeline__icon-item--normal .timeline__icon-item__icon .timeline__icon-item__icon__label.large_label{font-size:12px}.timeline__icon-item.timeline__icon-item--active--highlight .timeline__icon-item__icon{font-size:20px;height:40px;padding:10px;width:40px}.timeline__icon-item.timeline__icon-item--active--highlight .timeline__icon-item__icon .timeline__icon-item__icon__label{font-size:22px}.timeline__icon-item.timeline__icon-item--active--highlight .timeline__icon-item__icon .timeline__icon-item__icon__label.large_label{font-size:18px}.timeline__icon-item.timeline__icon-item--completed .timeline__icon-item__icon,.timeline__icon-item.timeline__icon-item--active .timeline__icon-item__icon{background-color:#0c9348}.timeline__icon-item.timeline__icon-item--warning.timeline__icon-item--active .timeline__icon-item__icon{background-color:#fcbf10;color:#333}.timeline__icon-item.timeline__icon-item--danger.timeline__icon-item--active .timeline__icon-item__icon{background-color:#f8931f;color:#333}.timeline__icon-item.timeline__icon-item--error.timeline__icon-item--active .timeline__icon-item__icon{background-color:#c13018}\n"] }]
+            args: [{ selector: 's-timeline-icon-item', standalone: true, imports: [NgClass, TooltipDirective, NgStyle], template: "@if (item) {\n    <div\n        class=\"timeline__icon-item\"\n        [ngClass]=\"{\n            'timeline__icon-item--small': item.testSize('small'),\n            'timeline__icon-item--normal': item.testSize('normal'),\n            'timeline__icon-item--warning': item.testSeverity('warning'),\n            'timeline__icon-item--error': item.testSeverity('error'),\n            'timeline__icon-item--completed': isComplete,\n            'timeline__icon-item--active': isActive,\n            'timeline__icon-item--active--highlight':\n                isActive && highlightActive,\n        }\"\n    >\n        <div\n            class=\"timeline__icon-item__icon\"\n            [sTooltip]=\"item.tooltip\"\n            [ngStyle]=\"{ backgroundColor: item.color }\"\n        >\n            @if (item.icon) {\n                <span [ngClass]=\"item.icon\"></span>\n            } @else {\n            <span class=\"timeline__icon-item__icon__label\" [class.large_label]=\"(item.label?.length ?? 0) > 2\">\n               {{ item.label }}\n            </span>\n            }\n        </div>\n    </div>\n}\n", styles: [".timeline__icon-item .timeline__icon-item__icon{align-items:center;background-color:#697882;border-radius:50%;color:#fff;display:flex;justify-content:center;margin:4px;-webkit-user-select:none;user-select:none}.timeline__icon-item .timeline__icon-item__icon .timeline__icon-item__icon__label{font-family:Open Sans,sans-serif}.timeline__icon-item.timeline__icon-item--small .timeline__icon-item__icon{font-size:0;height:16px;width:16px}.timeline__icon-item.timeline__icon-item--normal .timeline__icon-item__icon{font-size:10px;height:24px;padding:8px;width:24px}.timeline__icon-item.timeline__icon-item--normal .timeline__icon-item__icon .timeline__icon-item__icon__label{font-size:14px}.timeline__icon-item.timeline__icon-item--normal .timeline__icon-item__icon .timeline__icon-item__icon__label.large_label{font-size:12px}.timeline__icon-item.timeline__icon-item--active--highlight .timeline__icon-item__icon{font-size:20px;height:40px;padding:10px;width:40px}.timeline__icon-item.timeline__icon-item--active--highlight .timeline__icon-item__icon .timeline__icon-item__icon__label{font-size:22px}.timeline__icon-item.timeline__icon-item--active--highlight .timeline__icon-item__icon .timeline__icon-item__icon__label.large_label{font-size:18px}.timeline__icon-item.timeline__icon-item--completed .timeline__icon-item__icon,.timeline__icon-item.timeline__icon-item--active .timeline__icon-item__icon{background-color:#0c9348}.timeline__icon-item.timeline__icon-item--warning.timeline__icon-item--active .timeline__icon-item__icon{background-color:#fcbf10;color:#333}.timeline__icon-item.timeline__icon-item--danger.timeline__icon-item--active .timeline__icon-item__icon{background-color:#f8931f;color:#333}.timeline__icon-item.timeline__icon-item--error.timeline__icon-item--active .timeline__icon-item__icon{background-color:#c13018}\n"] }]
         }], propDecorators: { item: [{
                 type: Input,
                 args: [{ required: true }]
@@ -27,34 +25,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }] } });
 
-class HorizontalTimelineComponent {
+class VerticalItemsComponent {
     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: TimelineIconItemComponent, selector: "s-timeline-icon-item", inputs: ["item", "isActive", "highlightActive", "isComplete"] }] });
+    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: HorizontalTimelineComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: VerticalItemsComponent, 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"] }]
+            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 }]
-            }], activeIndex: [{
+            }], isLast: [{
                 type: Input
-            }], highlightActiveItem: [{
+            }], isActive: [{
+                type: Input
+            }], highlightActive: [{
+                type: Input
+            }], isCompleted: [{
                 type: Input
             }] } });
 
-class RangeLineComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RangeLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RangeLineComponent, selector: "s-range-line", ngImport: i0, template: "<div class=\"range-line\">\n    <div class=\"range-line__horizontal\"></div>\n    <div class=\"range-line__vertical\"></div>\n    <div class=\"range-line__horizontal\"></div>\n</div>\n", styles: [".range-line{align-self:stretch;display:flex;flex-direction:column;width:20px;height:100%}.range-line .range-line__horizontal{background-color:#ccc;height:3px;width:100%}.range-line .range-line__vertical{background-color:#ccc;height:100%;width:3px}s-range-line{background-color:#add8e6}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RangeLineComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 's-range-line', template: "<div class=\"range-line\">\n    <div class=\"range-line__horizontal\"></div>\n    <div class=\"range-line__vertical\"></div>\n    <div class=\"range-line__horizontal\"></div>\n</div>\n", styles: [".range-line{align-self:stretch;display:flex;flex-direction:column;width:20px;height:100%}.range-line .range-line__horizontal{background-color:#ccc;height:3px;width:100%}.range-line .range-line__vertical{background-color:#ccc;height:100%;width:3px}s-range-line{background-color:#add8e6}\n"] }]
-        }] });
-
 class CollapseOptionComponent {
     isCollapsed = false;
     toggleCollapsed = new EventEmitter();
@@ -62,17 +57,26 @@ class CollapseOptionComponent {
         this.toggleCollapsed.emit(!this.isCollapsed);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CollapseOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CollapseOptionComponent, selector: "s-collapse-option", inputs: { isCollapsed: "isCollapsed" }, outputs: { toggleCollapsed: "toggleCollapsed" }, ngImport: i0, template: "<div\n    class=\"collapse-option\"\n    (click)=\"onClick()\"\n>\n    <div class=\"collapse-option__icon\">\n        <span\n            class=\"fas\"\n            [ngClass]=\"{\n                'fa-minus': !isCollapsed,\n                'fa-plus': isCollapsed,\n            }\"\n        >\n        </span>\n    </div>\n</div>\n", styles: [".collapse-option{align-items:center;background-color:#428bca;border-radius:50%;cursor:pointer;display:flex;height:24px;justify-content:center;margin:4px;width:24px}.collapse-option .collapse-option__icon{color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CollapseOptionComponent, isStandalone: true, selector: "s-collapse-option", inputs: { isCollapsed: "isCollapsed" }, outputs: { toggleCollapsed: "toggleCollapsed" }, ngImport: i0, template: "<div\n    class=\"collapse-option\"\n    (click)=\"onClick()\"\n>\n    <div class=\"collapse-option__icon\">\n        <span\n            class=\"fas\"\n            [ngClass]=\"{\n                'fa-minus': !isCollapsed,\n                'fa-plus': isCollapsed,\n            }\"\n        >\n        </span>\n    </div>\n</div>\n", styles: [".collapse-option{align-items:center;background-color:#428bca;border-radius:50%;cursor:pointer;display:flex;height:24px;justify-content:center;margin:4px;width:24px}.collapse-option .collapse-option__icon{color:#fff}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CollapseOptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-collapse-option', template: "<div\n    class=\"collapse-option\"\n    (click)=\"onClick()\"\n>\n    <div class=\"collapse-option__icon\">\n        <span\n            class=\"fas\"\n            [ngClass]=\"{\n                'fa-minus': !isCollapsed,\n                'fa-plus': isCollapsed,\n            }\"\n        >\n        </span>\n    </div>\n</div>\n", styles: [".collapse-option{align-items:center;background-color:#428bca;border-radius:50%;cursor:pointer;display:flex;height:24px;justify-content:center;margin:4px;width:24px}.collapse-option .collapse-option__icon{color:#fff}\n"] }]
+            args: [{ selector: 's-collapse-option', standalone: true, imports: [NgClass], template: "<div\n    class=\"collapse-option\"\n    (click)=\"onClick()\"\n>\n    <div class=\"collapse-option__icon\">\n        <span\n            class=\"fas\"\n            [ngClass]=\"{\n                'fa-minus': !isCollapsed,\n                'fa-plus': isCollapsed,\n            }\"\n        >\n        </span>\n    </div>\n</div>\n", styles: [".collapse-option{align-items:center;background-color:#428bca;border-radius:50%;cursor:pointer;display:flex;height:24px;justify-content:center;margin:4px;width:24px}.collapse-option .collapse-option__icon{color:#fff}\n"] }]
         }], propDecorators: { isCollapsed: [{
                 type: Input
             }], toggleCollapsed: [{
                 type: Output
             }] } });
 
+class RangeLineComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RangeLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RangeLineComponent, isStandalone: true, selector: "s-range-line", ngImport: i0, template: "<div class=\"range-line\">\n    <div class=\"range-line__horizontal\"></div>\n    <div class=\"range-line__vertical\"></div>\n    <div class=\"range-line__horizontal\"></div>\n</div>\n", styles: [".range-line{align-self:stretch;display:flex;flex-direction:column;width:20px;height:100%}.range-line .range-line__horizontal{background-color:#ccc;height:3px;width:100%}.range-line .range-line__vertical{background-color:#ccc;height:100%;width:3px}s-range-line{background-color:#add8e6}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RangeLineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's-range-line', standalone: true, template: "<div class=\"range-line\">\n    <div class=\"range-line__horizontal\"></div>\n    <div class=\"range-line__vertical\"></div>\n    <div class=\"range-line__horizontal\"></div>\n</div>\n", styles: [".range-line{align-self:stretch;display:flex;flex-direction:column;width:20px;height:100%}.range-line .range-line__horizontal{background-color:#ccc;height:3px;width:100%}.range-line .range-line__vertical{background-color:#ccc;height:100%;width:3px}s-range-line{background-color:#add8e6}\n"] }]
+        }] });
+
 class CollapsedItemsComponent {
     items;
     isCollapsed = false;
@@ -84,11 +88,11 @@ class CollapsedItemsComponent {
         this.isCollapsedChange.emit(this.isCollapsed);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CollapsedItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CollapsedItemsComponent, selector: "s-collapsed-items", inputs: { items: "items", isCollapsed: "isCollapsed", isCompleted: "isCompleted", counterLabel: "counterLabel" }, outputs: { isCollapsedChange: "isCollapsedChange" }, ngImport: i0, template: "<div class=\"collapsed-items\">\n    <div\n        class=\"collapsed-items__item\"\n        [ngClass]=\"{ 'collapsed-items__item--completed': isCompleted }\"\n    >\n        <div class=\"collapsed-items__item__icon-wrapper\">\n            <s-collapse-option\n                [isCollapsed]=\"isCollapsed\"\n                (toggleCollapsed)=\"onChange($event)\"\n            >\n            </s-collapse-option>\n            <div class=\"collapsed-items__item__icon-wrapper__line\"></div>\n        </div>\n        <div\n            class=\"collapsed-items__item__info\"\n            (click)=\"onChange(!isCollapsed)\"\n        >\n            <div class=\"collapsed-items__item__info__description\">\n                {{ items.length }} {{ counterLabel }}\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".collapsed-items .collapsed-items__item{align-items:stretch;display:flex}.collapsed-items .collapsed-items__item .collapsed-items__item__icon-wrapper{align-items:center;display:flex;flex-direction:column;flex-shrink:0;justify-content:center;width:56px}.collapsed-items .collapsed-items__item .collapsed-items__item__icon-wrapper .collapsed-items__item__icon-wrapper__line{background-color:#697882;border-radius:2px;flex-grow:1;min-height:20px;width:3px}.collapsed-items .collapsed-items__item .collapsed-items__item__info{align-items:flex-start;display:flex;flex-direction:column;justify-content:center;margin-bottom:20px;-webkit-user-select:none;user-select:none;cursor:pointer}.collapsed-items .collapsed-items__item .collapsed-items__item__info .collapsed-items__item__info__description{color:#428bca;font-family:Open Sans,sans-serif;font-size:12px;font-weight:400;line-height:150%}.collapsed-items .collapsed-items__item.collapsed-items__item--completed .collapsed-items__item__icon-wrapper .collapsed-items__item__icon-wrapper__line{background-color:#0c9348}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CollapseOptionComponent, selector: "s-collapse-option", inputs: ["isCollapsed"], outputs: ["toggleCollapsed"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CollapsedItemsComponent, isStandalone: true, selector: "s-collapsed-items", inputs: { items: "items", isCollapsed: "isCollapsed", isCompleted: "isCompleted", counterLabel: "counterLabel" }, outputs: { isCollapsedChange: "isCollapsedChange" }, ngImport: i0, template: "<div class=\"collapsed-items\">\n    <div\n        class=\"collapsed-items__item\"\n        [ngClass]=\"{ 'collapsed-items__item--completed': isCompleted }\"\n    >\n        <div class=\"collapsed-items__item__icon-wrapper\">\n            <s-collapse-option\n                [isCollapsed]=\"isCollapsed\"\n                (toggleCollapsed)=\"onChange($event)\"\n            >\n            </s-collapse-option>\n            <div class=\"collapsed-items__item__icon-wrapper__line\"></div>\n        </div>\n        <div\n            class=\"collapsed-items__item__info\"\n            (click)=\"onChange(!isCollapsed)\"\n        >\n            <div class=\"collapsed-items__item__info__description\">\n                {{ items.length }} {{ counterLabel }}\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".collapsed-items .collapsed-items__item{align-items:stretch;display:flex}.collapsed-items .collapsed-items__item .collapsed-items__item__icon-wrapper{align-items:center;display:flex;flex-direction:column;flex-shrink:0;justify-content:center;width:56px}.collapsed-items .collapsed-items__item .collapsed-items__item__icon-wrapper .collapsed-items__item__icon-wrapper__line{background-color:#697882;border-radius:2px;flex-grow:1;min-height:20px;width:3px}.collapsed-items .collapsed-items__item .collapsed-items__item__info{align-items:flex-start;display:flex;flex-direction:column;justify-content:center;margin-bottom:20px;-webkit-user-select:none;user-select:none;cursor:pointer}.collapsed-items .collapsed-items__item .collapsed-items__item__info .collapsed-items__item__info__description{color:#428bca;font-family:Open Sans,sans-serif;font-size:12px;font-weight:400;line-height:150%}.collapsed-items .collapsed-items__item.collapsed-items__item--completed .collapsed-items__item__icon-wrapper .collapsed-items__item__icon-wrapper__line{background-color:#0c9348}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CollapseOptionComponent, selector: "s-collapse-option", inputs: ["isCollapsed"], outputs: ["toggleCollapsed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CollapsedItemsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-collapsed-items', template: "<div class=\"collapsed-items\">\n    <div\n        class=\"collapsed-items__item\"\n        [ngClass]=\"{ 'collapsed-items__item--completed': isCompleted }\"\n    >\n        <div class=\"collapsed-items__item__icon-wrapper\">\n            <s-collapse-option\n                [isCollapsed]=\"isCollapsed\"\n                (toggleCollapsed)=\"onChange($event)\"\n            >\n            </s-collapse-option>\n            <div class=\"collapsed-items__item__icon-wrapper__line\"></div>\n        </div>\n        <div\n            class=\"collapsed-items__item__info\"\n            (click)=\"onChange(!isCollapsed)\"\n        >\n            <div class=\"collapsed-items__item__info__description\">\n                {{ items.length }} {{ counterLabel }}\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".collapsed-items .collapsed-items__item{align-items:stretch;display:flex}.collapsed-items .collapsed-items__item .collapsed-items__item__icon-wrapper{align-items:center;display:flex;flex-direction:column;flex-shrink:0;justify-content:center;width:56px}.collapsed-items .collapsed-items__item .collapsed-items__item__icon-wrapper .collapsed-items__item__icon-wrapper__line{background-color:#697882;border-radius:2px;flex-grow:1;min-height:20px;width:3px}.collapsed-items .collapsed-items__item .collapsed-items__item__info{align-items:flex-start;display:flex;flex-direction:column;justify-content:center;margin-bottom:20px;-webkit-user-select:none;user-select:none;cursor:pointer}.collapsed-items .collapsed-items__item .collapsed-items__item__info .collapsed-items__item__info__description{color:#428bca;font-family:Open Sans,sans-serif;font-size:12px;font-weight:400;line-height:150%}.collapsed-items .collapsed-items__item.collapsed-items__item--completed .collapsed-items__item__icon-wrapper .collapsed-items__item__icon-wrapper__line{background-color:#0c9348}\n"] }]
+            args: [{ selector: 's-collapsed-items', standalone: true, imports: [NgClass, CollapseOptionComponent], template: "<div class=\"collapsed-items\">\n    <div\n        class=\"collapsed-items__item\"\n        [ngClass]=\"{ 'collapsed-items__item--completed': isCompleted }\"\n    >\n        <div class=\"collapsed-items__item__icon-wrapper\">\n            <s-collapse-option\n                [isCollapsed]=\"isCollapsed\"\n                (toggleCollapsed)=\"onChange($event)\"\n            >\n            </s-collapse-option>\n            <div class=\"collapsed-items__item__icon-wrapper__line\"></div>\n        </div>\n        <div\n            class=\"collapsed-items__item__info\"\n            (click)=\"onChange(!isCollapsed)\"\n        >\n            <div class=\"collapsed-items__item__info__description\">\n                {{ items.length }} {{ counterLabel }}\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".collapsed-items .collapsed-items__item{align-items:stretch;display:flex}.collapsed-items .collapsed-items__item .collapsed-items__item__icon-wrapper{align-items:center;display:flex;flex-direction:column;flex-shrink:0;justify-content:center;width:56px}.collapsed-items .collapsed-items__item .collapsed-items__item__icon-wrapper .collapsed-items__item__icon-wrapper__line{background-color:#697882;border-radius:2px;flex-grow:1;min-height:20px;width:3px}.collapsed-items .collapsed-items__item .collapsed-items__item__info{align-items:flex-start;display:flex;flex-direction:column;justify-content:center;margin-bottom:20px;-webkit-user-select:none;user-select:none;cursor:pointer}.collapsed-items .collapsed-items__item .collapsed-items__item__info .collapsed-items__item__info__description{color:#428bca;font-family:Open Sans,sans-serif;font-size:12px;font-weight:400;line-height:150%}.collapsed-items .collapsed-items__item.collapsed-items__item--completed .collapsed-items__item__icon-wrapper .collapsed-items__item__icon-wrapper__line{background-color:#0c9348}\n"] }]
         }], propDecorators: { items: [{
                 type: Input,
                 args: [{ required: true }]
@@ -102,31 +106,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }] } });
 
-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, 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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TimelineIconItemComponent, selector: "s-timeline-icon-item", inputs: ["item", "isActive", "highlightActive", "isComplete"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: VerticalItemsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 's-vertical-items', 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
-            }] } });
-
 class VerticalTimelineComponent {
     static nextId = 0;
     _activeIndex = 0;
@@ -162,11 +141,11 @@ class VerticalTimelineComponent {
         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, 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: RangeLineComponent, selector: "s-range-line" }, { kind: "component", type: CollapseOptionComponent, selector: "s-collapse-option", inputs: ["isCollapsed"], outputs: ["toggleCollapsed"] }, { kind: "component", type: CollapsedItemsComponent, selector: "s-collapsed-items", inputs: ["items", "isCollapsed", "isCompleted", "counterLabel"], outputs: ["isCollapsedChange"] }, { kind: "component", type: VerticalItemsComponent, selector: "s-vertical-items", inputs: ["items", "isLast", "isActive", "highlightActive", "isCompleted"] }] });
+    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', 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"] }]
+            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 }]
@@ -181,6 +160,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }] } });
 
+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, isStandalone: true, 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TimelineIconItemComponent, selector: "s-timeline-icon-item", inputs: ["item", "isActive", "highlightActive", "isComplete"] }, { kind: "directive", type: TooltipDirective, selector: "[sTooltip]", inputs: ["sTooltip", "tooltipPosition", "showDelay", "displayTime", "tooltipEvent", "escape", "visible", "mobileBehavior", "focusedInputRef", "checkTruncatedText"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HorizontalTimelineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's-horizontal-timeline', standalone: true, imports: [NgClass, NgStyle, TimelineIconItemComponent, TooltipDirective], 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
+            }] } });
+
 const HORIZONTAL = 'horizontal';
 const VERTICAL = 'vertical';
 const MIN_ITEM_SIZE = 200;
@@ -241,11 +239,11 @@ class TimelineComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TimelineComponent, selector: "s-timeline", inputs: { items: "items", activeIndex: "activeIndex", highlightActiveItem: "highlightActiveItem", direction: "direction", collapsable: "collapsable", counterLabel: "counterLabel" }, host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0, template: "<div>\n    @if (changeToVertical()) {\n        <s-vertical-timeline\n            *ngIf=\"items?.length\"\n            [items]=\"items\"\n            [activeIndex]=\"activeIndex\"\n            [highlightActiveItem]=\"highlightActiveItem\"\n            [counterLabel]=\"counterLabel\"\n            [collapsable]=\"collapsable\"\n            [highlightActiveItem]=\"highlightActiveItem\"\n        >\n        </s-vertical-timeline>\n    } @else {\n        <s-horizontal-timeline\n            *ngIf=\"items?.length\"\n            [items]=\"items\"\n            [activeIndex]=\"activeIndex\"\n            [highlightActiveItem]=\"highlightActiveItem\"\n        >\n        </s-horizontal-timeline>\n    }\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HorizontalTimelineComponent, selector: "s-horizontal-timeline", inputs: ["items", "activeIndex", "highlightActiveItem"] }, { kind: "component", type: VerticalTimelineComponent, selector: "s-vertical-timeline", inputs: ["activeIndex", "highlightActiveItem", "items", "counterLabel", "collapsable"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TimelineComponent, isStandalone: true, selector: "s-timeline", inputs: { items: "items", activeIndex: "activeIndex", highlightActiveItem: "highlightActiveItem", direction: "direction", collapsable: "collapsable", counterLabel: "counterLabel" }, host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0, template: "<div>\r\n    @if (changeToVertical()) {\r\n        @if (items.length) {\r\n            <s-vertical-timeline\r\n                [items]=\"items\"\r\n                [activeIndex]=\"activeIndex\"\r\n                [highlightActiveItem]=\"highlightActiveItem\"\r\n                [counterLabel]=\"counterLabel\"\r\n                [collapsable]=\"collapsable\"\r\n                [highlightActiveItem]=\"highlightActiveItem\"\r\n            >\r\n            </s-vertical-timeline>\r\n        }\r\n    } @else {\r\n        @if (items.length) {\r\n            <s-horizontal-timeline\r\n                [items]=\"items\"\r\n                [activeIndex]=\"activeIndex\"\r\n                [highlightActiveItem]=\"highlightActiveItem\"\r\n            >\r\n            </s-horizontal-timeline>\r\n        }\r\n    }\r\n</div>\r\n", dependencies: [{ kind: "component", type: VerticalTimelineComponent, selector: "s-vertical-timeline", inputs: ["activeIndex", "highlightActiveItem", "items", "counterLabel", "collapsable"] }, { kind: "component", type: HorizontalTimelineComponent, selector: "s-horizontal-timeline", inputs: ["items", "activeIndex", "highlightActiveItem"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-timeline', template: "<div>\n    @if (changeToVertical()) {\n        <s-vertical-timeline\n            *ngIf=\"items?.length\"\n            [items]=\"items\"\n            [activeIndex]=\"activeIndex\"\n            [highlightActiveItem]=\"highlightActiveItem\"\n            [counterLabel]=\"counterLabel\"\n            [collapsable]=\"collapsable\"\n            [highlightActiveItem]=\"highlightActiveItem\"\n        >\n        </s-vertical-timeline>\n    } @else {\n        <s-horizontal-timeline\n            *ngIf=\"items?.length\"\n            [items]=\"items\"\n            [activeIndex]=\"activeIndex\"\n            [highlightActiveItem]=\"highlightActiveItem\"\n        >\n        </s-horizontal-timeline>\n    }\n</div>\n" }]
+            args: [{ selector: 's-timeline', standalone: true, imports: [VerticalTimelineComponent, HorizontalTimelineComponent], template: "<div>\r\n    @if (changeToVertical()) {\r\n        @if (items.length) {\r\n            <s-vertical-timeline\r\n                [items]=\"items\"\r\n                [activeIndex]=\"activeIndex\"\r\n                [highlightActiveItem]=\"highlightActiveItem\"\r\n                [counterLabel]=\"counterLabel\"\r\n                [collapsable]=\"collapsable\"\r\n                [highlightActiveItem]=\"highlightActiveItem\"\r\n            >\r\n            </s-vertical-timeline>\r\n        }\r\n    } @else {\r\n        @if (items.length) {\r\n            <s-horizontal-timeline\r\n                [items]=\"items\"\r\n                [activeIndex]=\"activeIndex\"\r\n                [highlightActiveItem]=\"highlightActiveItem\"\r\n            >\r\n            </s-horizontal-timeline>\r\n        }\r\n    }\r\n</div>\r\n" }]
         }], propDecorators: { items: [{
                 type: Input,
                 args: [{ required: true }]
@@ -265,79 +263,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['window:resize', ['$event']]
             }] } });
 
-class TimelineItemModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineItemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: TimelineItemModule, declarations: [TimelineIconItemComponent], imports: [CommonModule, TooltipModule], exports: [TimelineIconItemComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineItemModule, imports: [CommonModule, TooltipModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineItemModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, TooltipModule],
-                    declarations: [TimelineIconItemComponent],
-                    exports: [TimelineIconItemComponent],
-                }]
-        }] });
-
-class HorizontalTimelineModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HorizontalTimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: HorizontalTimelineModule, declarations: [HorizontalTimelineComponent], imports: [CommonModule, TooltipModule, TimelineItemModule], exports: [HorizontalTimelineComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HorizontalTimelineModule, imports: [CommonModule, TooltipModule, TimelineItemModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HorizontalTimelineModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, TooltipModule, TimelineItemModule],
-                    declarations: [HorizontalTimelineComponent],
-                    exports: [HorizontalTimelineComponent],
-                }]
-        }] });
-
-class VerticalTimelineModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: VerticalTimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: VerticalTimelineModule, declarations: [VerticalTimelineComponent,
-            RangeLineComponent,
-            CollapseOptionComponent,
-            CollapsedItemsComponent,
-            VerticalItemsComponent], imports: [CommonModule, TimelineItemModule], exports: [VerticalTimelineComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: VerticalTimelineModule, imports: [CommonModule, TimelineItemModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: VerticalTimelineModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, TimelineItemModule],
-                    declarations: [
-                        VerticalTimelineComponent,
-                        RangeLineComponent,
-                        CollapseOptionComponent,
-                        CollapsedItemsComponent,
-                        VerticalItemsComponent,
-                    ],
-                    exports: [VerticalTimelineComponent],
-                }]
-        }] });
-
 class TimelineModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: TimelineModule, declarations: [TimelineComponent], imports: [CommonModule,
-            TimelineItemModule,
-            HorizontalTimelineModule,
-            VerticalTimelineModule], exports: [TimelineComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineModule, imports: [CommonModule,
-            TimelineItemModule,
-            HorizontalTimelineModule,
-            VerticalTimelineModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: TimelineModule, imports: [TimelineComponent], exports: [TimelineComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineModule });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        CommonModule,
-                        TimelineItemModule,
-                        HorizontalTimelineModule,
-                        VerticalTimelineModule,
-                    ],
-                    declarations: [TimelineComponent],
+                    imports: [TimelineComponent],
                     exports: [TimelineComponent],
                 }]
         }] });