@seniorsistemas/angular-components 14.16.32 → 15.0.0

package/fesm5/seniorsistemas-angular-components.js

@@ -282,7 +282,7 @@ var ButtonComponent = /** @class */ (function () {
         Component({
             selector: "s-button",
             template: "<p-tieredMenu [id]=\"id + '-menu'\" [popup]=\"true\" appendTo=\"body\" [baseZIndex]=\"baseZIndex\"></p-tieredMenu>\n\n<button\n    [id]=\"id\"\n    [type]=\"type\"\n    [class]=\"styleClass\"\n    [ngClass]=\"{\n        's-button-auxiliary': auxiliary,\n        's-button-with-icon': iconClass,\n        's-button-with-text': label,\n        's-button-empty': !iconClass && !label,\n        's-button-size-default': size === 'default',\n        's-button-size-small': size === 'small',\n        's-button-priority-default': priority === 'default',\n        's-button-priority-primary': priority === 'primary',\n        's-button-priority-secondary': priority === 'secondary',\n        's-button-priority-link': priority === 'link',\n        's-button-multiple': (caret && (model && model.length)) || rightIconClass,\n        's-button-active': isOpen(),\n        's-button--slide': validateSlideButton(),\n        's-button--rotate-animation': isRotateAnimation()\n    }\"\n    [disabled]=\"disabled\"\n    [pTooltip]=\"tooltip\"\n    tooltipPosition=\"top\"\n    showDelay=\"500\"\n    [tooltipZIndex]=\"tooltipZIndex\"\n    (click)=\"onClick.emit($event)\"\n    (mouseenter)=\"updateTooltipZIndex()\"\n>\n    <span \n        *ngIf=\"iconClass\" \n        [class]=\"iconClass\" \n        [ngClass]=\"{ \n            's-button-icon': true,\n            's-button-icon-margin-right': !label && model && model.length\n        }\" \n        aria-hidden=\"true\">\n    </span>\n    <span \n        *ngIf=\"label\" \n        class=\"s-button-text\"\n        [ngClass]=\"{\n            's-button-icon-margin-right': !!rightIconClass || (model && model.length),\n            's-button-icon-margin-left': !!iconClass\n        }\">\n        {{ label }}\n    </span>\n    <ng-content></ng-content>\n    <span \n        *ngIf=\"rightIconClass\" \n        [class]=\"rightIconClass\" \n        [ngClass]=\"{ 's-button-right-icon': true }\" \n        aria-hidden=\"true\">\n    </span>\n    <span\n        *ngIf=\"caret && (model && model.length)\" \n        class=\"fa fa-fw fa-caret-down\"\n        aria-hidden=\"true\">\n    </span>\n</button>\n",
-            styles: ["button{-ms-flex-align:center;align-items:center;border-radius:4px;border:1px solid;cursor:pointer;font-family:\"Open Sans\",sans-serif;font-size:14px;height:34px;max-width:100%;min-width:40px;outline:0;overflow:visible;padding:5px 10px;position:relative;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;text-decoration:none;text-transform:none;vertical-align:bottom;transition:background-color .2s ease-out,color .2s ease-out,border-color .2s ease-out}button:disabled{opacity:.5;filter:Alpha(Opacity=50);background-image:none}button:disabled,button:disabled *{cursor:text!important}button.s-button-auxiliary{border-radius:20px}button.s-button-size-small{padding:0 20px;height:25px}button.s-button-with-icon.s-button-multiple,button.s-button-with-text{min-width:80px}button.s-button-with-icon.s-button-with-text.s-button-multiple{min-width:100px}button .s-button-icon,button .s-button-menu-icon,button .s-button-right-icon,button.s-button-with-icon.s-button-multiple:not(.s-button-with-text) .s-button-icon{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}button.s-button-multiple .s-button-text{display:-ms-flexbox;display:flex;-ms-flex-pack:left;justify-content:left;-ms-flex-align:left;align-items:left}button.s-button-with-icon .s-button-text{display:-ms-flexbox;display:flex;-ms-flex-pack:right;justify-content:right;-ms-flex-align:right;align-items:right}.s-button-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.s-button-menu-icon{right:10px;transition:transform .2s ease-out}.s-button-icon-margin-left{margin-left:10px}.s-button-icon-margin-right{margin-right:10px}.s-button-active .s-button-menu-icon{transform:rotateX(180deg)}button,button.s-button-priority-primary{background-color:#428bca;border-color:#428bca}button .s-button-icon,button .s-button-menu-icon,button .s-button-right-icon,button .s-button-text,button.s-button-priority-primary .s-button-icon,button.s-button-priority-primary .s-button-menu-icon,button.s-button-priority-primary .s-button-right-icon,button.s-button-priority-primary .s-button-text{color:#fff}button.s-button-priority-primary:hover,button:hover{background-color:#2a6496}button.s-button-priority-primary:focus,button:focus{background-color:#2a6496;border-color:#22dce6}button.s-button-active:not(:disabled),button.s-button-priority-primary.s-button-active:not(:disabled),button.s-button-priority-primary:active:not(:disabled),button:active:not(:disabled){background-color:#245682;border-color:#245682}button.s-button-priority-secondary{background-color:#7892a1;border-color:#7892a1}button.s-button-priority-secondary .s-button-icon,button.s-button-priority-secondary .s-button-menu-icon,button.s-button-priority-secondary .s-button-right-icon,button.s-button-priority-secondary .s-button-text{color:#fff}button.s-button-priority-secondary:hover{background-color:#546b79}button.s-button-priority-secondary:focus{background-color:#546b79;border-color:#22dce6}button.s-button-priority-secondary.s-button-active:not(:disabled),button.s-button-priority-secondary:active:not(:disabled){background-color:#495e6a;border-color:#495e6a}button.s-button-priority-default{background-color:#fff;border-color:#ccc}button.s-button-priority-default .s-button-icon,button.s-button-priority-default .s-button-menu-icon,button.s-button-priority-default .s-button-right-icon,button.s-button-priority-default .s-button-text{color:#333}button.s-button-priority-default:hover{background-color:#d9d9d9}button.s-button-priority-default:focus{background-color:#d9d9d9;border-color:#22dce6}button.s-button-priority-default.s-button-active:not(:disabled),button.s-button-priority-default:active:not(:disabled){background-color:#ccc;border-color:#ccc}button.s-button-priority-link{background-color:transparent;border-color:transparent}button.s-button-priority-link .s-button-icon,button.s-button-priority-link .s-button-menu-icon,button.s-button-priority-link .s-button-right-icon,button.s-button-priority-link .s-button-text{color:#428bca}button.s-button-priority-link:hover{background-color:transparent}button.s-button-priority-link:hover .s-button-icon,button.s-button-priority-link:hover .s-button-menu-icon,button.s-button-priority-link:hover .s-button-right-icon,button.s-button-priority-link:hover .s-button-text{color:#2a6496}button.s-button-priority-link:focus{border-color:#22dce6;background-color:transparent}button.s-button-priority-link:focus .s-button-icon,button.s-button-priority-link:focus .s-button-menu-icon,button.s-button-priority-link:focus .s-button-right-icon,button.s-button-priority-link:focus .s-button-text{color:#2a6496}button.s-button-priority-link.s-button-active:not(:disabled),button.s-button-priority-link:active:not(:disabled){background-color:transparent;border-color:transparent}button.s-button-priority-link.s-button-active:not(:disabled) .s-button-icon,button.s-button-priority-link.s-button-active:not(:disabled) .s-button-menu-icon,button.s-button-priority-link.s-button-active:not(:disabled) .s-button-right-icon,button.s-button-priority-link.s-button-active:not(:disabled) .s-button-text,button.s-button-priority-link:active:not(:disabled) .s-button-icon,button.s-button-priority-link:active:not(:disabled) .s-button-menu-icon,button.s-button-priority-link:active:not(:disabled) .s-button-right-icon,button.s-button-priority-link:active:not(:disabled) .s-button-text{color:#245682}.s-button--slide.s-button-with-icon.s-button-multiple,.s-button--slide.s-button-with-text{min-width:40px}.s-button--slide .s-button-text{position:absolute;opacity:0}.s-button--slide:hover .s-button-text{transition:1s;position:relative;opacity:1}.s-button--slide:hover.s-button--rotate-animation .s-button-icon,.s-button--slide:hover.s-button--rotate-animation .s-button-right-icon{transition:1.5s;transform:rotate(360deg)}"]
+            styles: ["button{-ms-flex-align:center;align-items:center;border-radius:4px;border:1px solid;cursor:pointer;font-family:\"Open Sans\",sans-serif;font-size:14px;height:34px;max-width:100%;min-width:40px;outline:0;overflow:visible;padding:5px 10px;position:relative;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;text-decoration:none;text-transform:none;vertical-align:bottom;transition:background-color .2s ease-out,color .2s ease-out,border-color .2s ease-out}button:disabled{opacity:.5;filter:Alpha(Opacity=50);background-image:none}button:disabled,button:disabled *{cursor:text!important}button.s-button-auxiliary{border-radius:20px}button.s-button-size-small{padding:0 20px;height:25px}button.s-button-with-icon.s-button-multiple,button.s-button-with-text{min-width:80px}button.s-button-with-icon.s-button-with-text.s-button-multiple{min-width:100px}button .s-button-icon,button .s-button-menu-icon,button .s-button-right-icon,button.s-button-with-icon.s-button-multiple:not(.s-button-with-text) .s-button-icon{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}button.s-button-multiple .s-button-text{display:-ms-flexbox;display:flex;-ms-flex-pack:left;justify-content:left;-ms-flex-align:left;align-items:left}button.s-button-with-icon .s-button-text{display:-ms-flexbox;display:flex;-ms-flex-pack:right;justify-content:right;-ms-flex-align:right;align-items:right}.s-button-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.s-button-menu-icon{right:10px;transition:transform .2s ease-out}.s-button-icon-margin-left{margin-left:10px}.s-button-icon-margin-right{margin-right:10px}.s-button-active .s-button-menu-icon{transform:rotateX(180deg)}button,button.s-button-priority-primary{background-color:#428bca;border-color:#428bca}button .s-button-icon,button .s-button-menu-icon,button .s-button-right-icon,button .s-button-text,button.s-button-priority-primary .s-button-icon,button.s-button-priority-primary .s-button-menu-icon,button.s-button-priority-primary .s-button-right-icon,button.s-button-priority-primary .s-button-text{color:#fff}button.s-button-priority-primary:hover,button:hover{background-color:#2a6496}button.s-button-priority-primary:focus,button:focus{background-color:#2a6496;border-color:#22dce6}button.s-button-active:not(:disabled),button.s-button-priority-primary.s-button-active:not(:disabled),button.s-button-priority-primary:active:not(:disabled),button:active:not(:disabled){background-color:#245682;border-color:#245682}button.s-button-priority-secondary{background-color:#7892a1;border-color:#7892a1}button.s-button-priority-secondary .s-button-icon,button.s-button-priority-secondary .s-button-menu-icon,button.s-button-priority-secondary .s-button-right-icon,button.s-button-priority-secondary .s-button-text{color:#fff}button.s-button-priority-secondary:hover{background-color:#546b79}button.s-button-priority-secondary:focus{background-color:#546b79;border-color:#22dce6}button.s-button-priority-secondary.s-button-active:not(:disabled),button.s-button-priority-secondary:active:not(:disabled){background-color:#495e6a;border-color:#495e6a}button.s-button-priority-default{background-color:#fff;border-color:#ccc}button.s-button-priority-default .s-button-icon,button.s-button-priority-default .s-button-menu-icon,button.s-button-priority-default .s-button-right-icon,button.s-button-priority-default .s-button-text{color:#333}button.s-button-priority-default:hover{background-color:#d9d9d9}button.s-button-priority-default:focus{background-color:#d9d9d9;border-color:#22dce6}button.s-button-priority-default.s-button-active:not(:disabled),button.s-button-priority-default:active:not(:disabled){background-color:#ccc;border-color:#ccc}button.s-button-priority-link{background-color:transparent;border-color:transparent}button.s-button-priority-link .s-button-icon,button.s-button-priority-link .s-button-menu-icon,button.s-button-priority-link .s-button-right-icon,button.s-button-priority-link .s-button-text{color:#428bca}button.s-button-priority-link:hover{background-color:transparent}button.s-button-priority-link:hover .s-button-icon,button.s-button-priority-link:hover .s-button-menu-icon,button.s-button-priority-link:hover .s-button-right-icon,button.s-button-priority-link:hover .s-button-text{color:#2a6496}button.s-button-priority-link:focus{border-color:#22dce6;background-color:transparent}button.s-button-priority-link:focus .s-button-icon,button.s-button-priority-link:focus .s-button-menu-icon,button.s-button-priority-link:focus .s-button-right-icon,button.s-button-priority-link:focus .s-button-text{color:#2a6496}button.s-button-priority-link.s-button-active:not(:disabled),button.s-button-priority-link:active:not(:disabled){background-color:transparent;border-color:transparent}button.s-button-priority-link.s-button-active:not(:disabled) .s-button-icon,button.s-button-priority-link.s-button-active:not(:disabled) .s-button-menu-icon,button.s-button-priority-link.s-button-active:not(:disabled) .s-button-right-icon,button.s-button-priority-link.s-button-active:not(:disabled) .s-button-text,button.s-button-priority-link:active:not(:disabled) .s-button-icon,button.s-button-priority-link:active:not(:disabled) .s-button-menu-icon,button.s-button-priority-link:active:not(:disabled) .s-button-right-icon,button.s-button-priority-link:active:not(:disabled) .s-button-text{color:#245682}.s-button--slide.s-button-with-icon.s-button-multiple,.s-button--slide.s-button-with-text{min-width:40px}.s-button--slide .s-button-text{position:absolute;opacity:0;width:0}.s-button--slide:hover .s-button-text{transition:1s;position:relative;opacity:1;width:auto}.s-button--slide:hover.s-button--rotate-animation .s-button-icon,.s-button--slide:hover.s-button--rotate-animation .s-button-right-icon{transition:1.5s;transform:rotate(360deg)}"]
         })
     ], ButtonComponent);
     return ButtonComponent;
@@ -7370,100 +7370,384 @@ var StepsModule = /** @class */ (function () {
     return StepsModule;
 }());
 
+var HORIZONTAL = "horizontal";
+var VERTICAL = "vertical";
+var MIN_ITEM_SIZE = 200;
 var TimelineComponent = /** @class */ (function () {
     function TimelineComponent() {
-        this.id = "s-timeline-" + TimelineComponent_1.nextId++;
-        this.activeIndex = 0;
+        this.direction = HORIZONTAL;
+        this.collapsable = true;
+        this.counterLabel = "items";
     }
-    TimelineComponent_1 = TimelineComponent;
-    TimelineComponent.prototype.barAnimation = function (index, activeIndex) {
-        var visited = index < activeIndex;
-        var activated = index === activeIndex;
-        return visited || activated;
-    };
-    TimelineComponent.prototype.afterBarAnimation = function (index, activeIndex) {
-        var visited = index < activeIndex;
-        var activated = index === activeIndex - 1;
-        return visited || activated;
-    };
-    Object.defineProperty(TimelineComponent.prototype, "visibledStep", {
+    Object.defineProperty(TimelineComponent.prototype, "items", {
         get: function () {
-            return this.steps.filter(function (step) { return !step.hidden; });
+            return this._items;
+        },
+        set: function (items) {
+            this._items = items;
+            this.checkDuplicateIds();
         },
         enumerable: true,
         configurable: true
     });
-    var TimelineComponent_1;
-    TimelineComponent.nextId = 0;
+    TimelineComponent.prototype.ngOnInit = function () {
+        this._innerWidth = window.innerWidth;
+    };
+    TimelineComponent.prototype.onResize = function (_) {
+        this._innerWidth = window.innerWidth;
+    };
+    TimelineComponent.prototype.changeToVertical = function () {
+        return this.direction === VERTICAL || this._innerWidth / this.items.length < MIN_ITEM_SIZE;
+    };
+    TimelineComponent.prototype.checkDuplicateIds = function () {
+        var ids = this.items.map(function (item) {
+            return item.id;
+        });
+        if ((new Set(ids)).size !== ids.length) {
+            throw new Error("A duplicate id was found in the items list");
+        }
+    };
     __decorate([
         Input()
-    ], TimelineComponent.prototype, "id", void 0);
+    ], TimelineComponent.prototype, "items", null);
     __decorate([
         Input()
-    ], TimelineComponent.prototype, "steps", void 0);
+    ], TimelineComponent.prototype, "activeIndex", void 0);
     __decorate([
         Input()
-    ], TimelineComponent.prototype, "activeIndex", void 0);
-    TimelineComponent = TimelineComponent_1 = __decorate([
+    ], TimelineComponent.prototype, "direction", void 0);
+    __decorate([
+        Input()
+    ], TimelineComponent.prototype, "collapsable", void 0);
+    __decorate([
+        Input()
+    ], TimelineComponent.prototype, "counterLabel", void 0);
+    __decorate([
+        HostListener("window:resize", ["$event"])
+    ], TimelineComponent.prototype, "onResize", null);
+    TimelineComponent = __decorate([
         Component({
             selector: "s-timeline",
-            template: "<div [id]=\"id\" class=\"s-timeline-container\">\n    <ng-container *ngFor=\"let step of visibledStep; let i = index; let isFirst = first; let isLast = last\">\n        <div *ngIf=\"!isFirst\" class=\"s-timeline-progress-bar\"\n            [@activeDesative]=\"barAnimation(i, activeIndex) ? 'active': 'desactive'\" [ngClass]=\"{\n            's-timeline-step-completed': (i < activeIndex),\n            's-timeline-step-active': (i === activeIndex)\n        }\"></div>\n        <div [id]=\"id + '-step-' + (step.id || i)\" class=\"s-timeline-step-header\" role=\"tab\"\n            tabindex=\"0\" [attr.aria-label]=\"step.ariaLabel || null\" [attr.aria-controls]=\"step.ariaControls\"\n            [attr.aria-labelledby]=\"!step.ariaLabel ? 'step-label-' + i : null\" [attr.aria-posinset]=\"i + 1\"\n            [attr.aria-setsize]=\"visibledStep.length\" [attr.aria-selected]=\"activeIndex == i\" [ngClass]=\"{\n            's-timeline-step-completed': (i < activeIndex),\n            's-timeline-step-active': (i === activeIndex)\n        }\">\n            <div *ngIf=\"!isFirst\"\n                [@beforeActiveDesative]=\"barAnimation(i, activeIndex) ? 'active': 'desactive'\"\n                class=\"s-timeline-progress-bar-before\" [ngClass]=\"{\n                's-timeline-step-completed': (i < activeIndex),\n                's-timeline-step-active': (i === activeIndex)\n            }\"></div>\n            <div *ngIf=\"!isLast\"\n                [@afterActiveDesative]=\"afterBarAnimation(i, activeIndex) ? 'active': 'desactive'\"\n                class=\"s-timeline-progress-bar-after\" [ngClass]=\"{\n                's-timeline-step-completed': ((i + 1) < activeIndex),\n                's-timeline-step-active': (i === (activeIndex - 1))\n            }\"></div>\n            <div\n                class=\"s-timeline-index\"\n                [pTooltip]=\"step.tooltip\"\n                tooltipPosition=\"top\">\n                <div class=\"s-timeline-index-content\">\n                    <span\n                        class=\"fas\"\n                        [ngClass]=\"step.stepIcon\"\n                        aria-hidden=\"true\"\n                        [attr.aria-label]=\"i + 1\"></span>\n                </div>\n            </div>\n            <div\n                [id]=\"'step-label-' + i\"\n                class=\"s-timeline-label\">\n                <span>\n                    {{step.label}}\n                </span>\n            </div>\n            <div\n                [id]=\"'step-help-label-' + i\"\n                class=\"s-timeline-help-label\">\n                <span>\n                    {{step.helpLabel}}\n                </span>\n            </div>\n        </div>\n    </ng-container>\n</div>\n",
-            host: {
-                "aria-orientation": "horizontal",
-                role: "tablist",
-                "tab-index": "0",
-            },
-            animations: [
-                trigger("beforeActiveDesative", [
-                    state("active", style$7({
-                        "background-position": "left bottom",
-                    })),
-                    state("desactive", style$7({
-                        "background-position": "right bottom",
-                    })),
-                    transition("active => desactive", [animate("50ms 100ms linear")]),
-                    transition("desactive => active", [animate("50ms 250ms linear")]),
-                ]),
-                trigger("activeDesative", [
-                    state("active", style$7({
-                        "background-position": "left bottom",
-                    })),
-                    state("desactive", style$7({
-                        "background-position": "right bottom",
-                    })),
-                    transition("active => desactive", [animate("100ms 150ms linear")]),
-                    transition("desactive => active", [animate("100ms 150ms linear")]),
-                ]),
-                trigger("afterActiveDesative", [
-                    state("active", style$7({
-                        "background-position": "left bottom",
-                    })),
-                    state("desactive", style$7({
-                        "background-position": "right bottom",
-                    })),
-                    transition("active => desactive", [animate("50ms 250ms linear")]),
-                    transition("desactive => active", [animate("50ms 100ms linear")]),
-                ]),
-            ],
-            styles: ["@keyframes scale-up-center{0%{transform:scale(.5)}100%{transform:scale(1)}}.s-timeline-container{display:-ms-flexbox;display:flex;white-space:nowrap;-ms-flex-align:start;align-items:flex-start;overflow:hidden;padding:15px 10px}.s-timeline-step-header{box-sizing:border-box;-ms-flex-direction:column;flex-direction:column;height:auto;position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:72px;max-height:98px;min-width:60px;width:100%}.s-timeline-step-header .s-timeline-help-label,.s-timeline-step-header .s-timeline-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all;color:#999;font-size:14px;font-weight:400;padding-top:5px}.s-timeline-step-header .s-timeline-progress-bar-before{margin:0;position:absolute;top:20px;-ms-flex:auto;flex:auto;height:3px;overflow:hidden;width:calc(50% - 20px);background-color:#697882;background-image:linear-gradient(to right,#0c9348 50%,#697882 50%);background-position:right bottom;background-size:300% 100%;left:-10px}.s-timeline-step-header .s-timeline-progress-bar-before.s-timeline-step-active,.s-timeline-step-header .s-timeline-progress-bar-before.s-timeline-step-completed{background-position:left bottom}.s-timeline-step-header .s-timeline-progress-bar-after{margin:0;position:absolute;top:20px;-ms-flex:auto;flex:auto;height:3px;overflow:hidden;width:calc(50% - 20px);background-color:#697882;background-image:linear-gradient(to right,#0c9348 50%,#697882 50%);background-position:right bottom;background-size:300% 100%;right:-10px}.s-timeline-step-header .s-timeline-progress-bar-after.s-timeline-step-active,.s-timeline-step-header .s-timeline-progress-bar-after.s-timeline-step-completed{background-position:left bottom}.s-timeline-progress-bar{margin:0;position:relative;top:20px;-ms-flex:auto;flex:auto;height:3px;overflow:hidden;width:100%;background-color:#697882;background-image:linear-gradient(to right,#0c9348 50%,#697882 50%);background-position:right bottom;background-size:300% 100%}.s-timeline-index{background-color:#697882;border:3px solid #697882;border-radius:50%;color:#fff;display:inline-block;font-weight:700;position:relative;transition:background-color .2s ease-out;height:46px;width:46px;-ms-flex:none;flex:none}.s-timeline-index .s-timeline-index-content{line-height:18px;font-size:18px;padding-top:8.5px;text-align:center;position:relative}.s-timeline-step-active .s-timeline-index,.s-timeline-step-completed .s-timeline-index{border-color:#0c9348;animation:.1s ease-out alternate scale-up-center;background-color:#0c9348}.s-timeline-step-active.s-timeline-progress-bar,.s-timeline-step-completed.s-timeline-progress-bar{background-position:left bottom}.s-timeline-step-active .s-timeline-label,.s-timeline-step-completed .s-timeline-label{color:#333;font-weight:700}@media (max-width:767px){.s-timeline-help-label,.s-timeline-label{display:none}}"]
+            template: "<div *ngIf=\"changeToVertical(); then vertical else horizontal\"></div>\n\n<ng-template #horizontal>\n   <s-horizontal-timeline\n      [items]=\"items\"\n      [activeIndex]=\"activeIndex\">\n   </s-horizontal-timeline>\n</ng-template>\n\n<ng-template #vertical>\n   <s-vertical-timeline\n      [items]=\"items\"\n      [activeIndex]=\"activeIndex\"\n      [counterLabel]=\"counterLabel\"\n      [collapsable]=\"collapsable\">\n   </s-vertical-timeline>\n</ng-template>"
         })
     ], TimelineComponent);
     return TimelineComponent;
 }());
 
+var TimelineIconItemComponent = /** @class */ (function () {
+    function TimelineIconItemComponent() {
+    }
+    __decorate([
+        Input()
+    ], TimelineIconItemComponent.prototype, "item", void 0);
+    __decorate([
+        Input()
+    ], TimelineIconItemComponent.prototype, "isActive", void 0);
+    __decorate([
+        Input()
+    ], TimelineIconItemComponent.prototype, "isComplete", void 0);
+    TimelineIconItemComponent = __decorate([
+        Component({
+            selector: "s-timeline-icon-item",
+            template: "<ng-container *ngIf=\"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      }\">\n      <div\n         class=\"timeline__icon-item__icon\"\n         [pTooltip]=\"item.tooltip\"\n         tooltipPosition=\"top\">\n         <ng-content *ngIf=\"item.icon; then icon_content; else label_text_content\"></ng-content>\n         <ng-template #icon_content>\n            <span\n               class=\"fas\"\n               [ngClass]=\"item.icon\">\n            </span>\n         </ng-template>\n         <ng-template #label_text_content>\n            <span class=\"timeline__icon-item__icon__label\">\n               {{ item.label }}\n            </span>\n         </ng-template>\n      </div>\n   </div>\n</ng-container>\n",
+            styles: [".timeline__icon-item .timeline__icon-item__icon{-ms-flex-align:center;align-items:center;background-color:#697882;border-radius:50%;color:#fff;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;margin:4px;-webkit-user-select:none;-ms-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--active .timeline__icon-item__icon{font-size:20px;height:40px;padding:10px;width:40px}.timeline__icon-item.timeline__icon-item--active .timeline__icon-item__icon .timeline__icon-item__icon__label{font-size:22px}.timeline__icon-item.timeline__icon-item--active .timeline__icon-item__icon,.timeline__icon-item.timeline__icon-item--completed .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}"]
+        })
+    ], TimelineIconItemComponent);
+    return TimelineIconItemComponent;
+}());
+
+var TimelineItemModule = /** @class */ (function () {
+    function TimelineItemModule() {
+    }
+    TimelineItemModule = __decorate([
+        NgModule({
+            imports: [
+                CommonModule,
+                TooltipModule,
+            ],
+            declarations: [TimelineIconItemComponent],
+            exports: [TimelineIconItemComponent],
+        })
+    ], TimelineItemModule);
+    return TimelineItemModule;
+}());
+
+var HorizontalTimelineComponent = /** @class */ (function () {
+    function HorizontalTimelineComponent() {
+        this.activeIndex = 0;
+    }
+    __decorate([
+        Input()
+    ], HorizontalTimelineComponent.prototype, "items", void 0);
+    __decorate([
+        Input()
+    ], HorizontalTimelineComponent.prototype, "activeIndex", void 0);
+    HorizontalTimelineComponent = __decorate([
+        Component({
+            selector: "s-horizontal-timeline",
+            template: "<div class=\"horizontal-timeline\">\n   <ng-container\n      *ngFor=\"let item of items;\n         let i = index;\n         let isFirst = first;\n         let isLast = last\">\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': 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         <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            </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               [pTooltip]=\"item.title\"\n               tooltipPosition=\"top\"\n               [showDelay]=\"1000\">\n               {{ item.title }}\n            </div>\n            <div\n               class=\"horizontal-timeline__item__info__description\"\n               [pTooltip]=\"item.description\"\n               tooltipPosition=\"top\"\n               [showDelay]=\"1000\">\n               {{ item.description }}\n            </div>\n         </div>\n      </div>\n   </ng-container>\n</div>",
+            styles: ["@keyframes scale-up-center{0%{transform:scale(.5)}100%{transform:scale(1)}}.horizontal-timeline{-ms-flex-align:start;align-items:flex-start;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.horizontal-timeline .horizontal-timeline__item{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;width:100%}.horizontal-timeline .horizontal-timeline__item .horizontal-timeline__item__icon-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;height:56px;-ms-flex-pack:start;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:calc(12px * 1.5 * 4);overflow:hidden;text-align:center;text-overflow:ellipsis;-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% - 4px - 8px)}.horizontal-timeline .horizontal-timeline__item.horizontal-timeline__item--normal .horizontal-timeline__item__icon-wrapper__line{width:calc(50% - 4px - 12px)}.horizontal-timeline .horizontal-timeline__item.horizontal-timeline__item--active .horizontal-timeline__item__icon-wrapper .horizontal-timeline__item__icon-wrapper__line{width:calc(50% - 4px - 20px)}.horizontal-timeline .horizontal-timeline__item.horizontal-timeline__item--active .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--completed .horizontal-timeline__item__icon-wrapper .horizontal-timeline__item__icon-wrapper__line--before{background-color:#0c9348}"]
+        })
+    ], HorizontalTimelineComponent);
+    return HorizontalTimelineComponent;
+}());
+
+var HorizontalTimelineModule = /** @class */ (function () {
+    function HorizontalTimelineModule() {
+    }
+    HorizontalTimelineModule = __decorate([
+        NgModule({
+            imports: [
+                CommonModule,
+                TooltipModule,
+                TimelineItemModule,
+            ],
+            declarations: [HorizontalTimelineComponent],
+            exports: [HorizontalTimelineComponent],
+        })
+    ], HorizontalTimelineModule);
+    return HorizontalTimelineModule;
+}());
+
+var VerticalTimelineComponent = /** @class */ (function () {
+    function VerticalTimelineComponent() {
+        this.isG1Collapsed = true;
+        this.isG2Collapsed = true;
+    }
+    Object.defineProperty(VerticalTimelineComponent.prototype, "activeIndex", {
+        get: function () {
+            return this._activeIndex;
+        },
+        set: function (index) {
+            this._activeIndex = index;
+            this.groupItems();
+        },
+        enumerable: true,
+        configurable: true
+    });
+    VerticalTimelineComponent.prototype.onChangeG1 = function (event) {
+        this.isG1Collapsed = event;
+    };
+    VerticalTimelineComponent.prototype.onChangeG2 = function (event) {
+        this.isG2Collapsed = event;
+    };
+    VerticalTimelineComponent.prototype.groupItems = function () {
+        this.firstItem = this.activeIndex === 0 ? [] : [this.items[0]];
+        this.g1Items = this.items.slice(1, this.activeIndex);
+        this.activeItem = [this.items[this.activeIndex]];
+        this.g2Items = this.items.slice(this.activeIndex + 1, this.items.length - 1);
+        this.lastItem = this.activeIndex === this.items.length - 1 ? [] : [this.items[this.items.length - 1]];
+    };
+    VerticalTimelineComponent.nextId = 0;
+    __decorate([
+        Input()
+    ], VerticalTimelineComponent.prototype, "activeIndex", null);
+    __decorate([
+        Input()
+    ], VerticalTimelineComponent.prototype, "items", void 0);
+    __decorate([
+        Input()
+    ], VerticalTimelineComponent.prototype, "counterLabel", void 0);
+    __decorate([
+        Input()
+    ], VerticalTimelineComponent.prototype, "collapsable", void 0);
+    VerticalTimelineComponent = __decorate([
+        Component({
+            selector: "s-vertical-timeline",
+            template: "<div class=\"vertical-timeline\">\n   <div\n      *ngIf=\"firstItem.length\"\n      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      </s-vertical-items>\n   </div>\n\n   <div\n      *ngIf=\"g1Items.length\"\n      class=\"vertical-timeline__block\">\n      <div class=\"vertical-timeline__block__prefix\">\n         <ng-container *ngIf=\"g1Items.length > 1 && !isG1Collapsed\">\n            <s-collapse-option\n               *ngIf=\"collapsable\"\n               [isCollapsed]=\"isG1Collapsed\"\n               (change)=\"onChangeG1($event)\">\n            </s-collapse-option>\n            <s-range-line class=\"vertical-timeline__block__prefix__line\"></s-range-line>\n         </ng-container>\n      </div>\n\n      <div *ngIf=\"isG1Collapsed && g1Items.length > 1 && collapsable; then g1_collapsed; else g1_items\"></div>\n\n      <ng-template #g1_collapsed>\n         <s-collapsed-items\n            [items]=\"g1Items\"\n            [(isCollapsed)]=\"isG1Collapsed\"\n            [isCompleted]=\"true\"\n            [counterLabel]=\"counterLabel\">\n         </s-collapsed-items>\n      </ng-template>\n\n      <ng-template #g1_items>\n         <s-vertical-items\n            [items]=\"g1Items\"\n            [isLast]=\"false\"\n            [isActive]=\"false\"\n            [isCompleted]=\"true\">\n         </s-vertical-items>\n      </ng-template>\n   </div>\n\n   <div\n      *ngIf=\"activeItem.length\"\n      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         [isCompleted]=\"false\">\n      </s-vertical-items>\n   </div>\n\n   <div\n      *ngIf=\"g2Items.length\"\n      class=\"vertical-timeline__block\">\n      <div class=\"vertical-timeline__block__prefix\">\n         <ng-container *ngIf=\"g2Items.length > 1 && !isG2Collapsed\">\n            <s-collapse-option\n               *ngIf=\"collapsable\"\n               [isCollapsed]=\"isG2Collapsed\"\n               (change)=\"onChangeG2($event)\">\n            </s-collapse-option>\n            <s-range-line class=\"vertical-timeline__block__prefix__line\"></s-range-line>\n         </ng-container>\n      </div>\n\n      <div *ngIf=\"isG2Collapsed && g2Items.length > 1 && collapsable; then g2_collapsed; else g2_items\"></div>\n\n      <ng-template #g2_collapsed>\n         <s-collapsed-items\n            [items]=\"g2Items\"\n            [(isCollapsed)]=\"isG2Collapsed\"\n            [isCompleted]=\"false\"\n            [counterLabel]=\"counterLabel\">\n         </s-collapsed-items>\n      </ng-template>\n\n      <ng-template #g2_items>\n         <s-vertical-items\n            [items]=\"g2Items\"\n            [isLast]=\"false\"\n            [isActive]=\"false\"\n            [isCompleted]=\"false\">\n         </s-vertical-items>\n      </ng-template>\n   </div>\n\n   <div\n      *ngIf=\"lastItem.length\"\n      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      </s-vertical-items>\n   </div>\n</div>",
+            styles: [".vertical-timeline{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.vertical-timeline .vertical-timeline__block{display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch}.vertical-timeline .vertical-timeline__block .vertical-timeline__block__prefix{width:60px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-negative:0;flex-shrink:0}.vertical-timeline .vertical-timeline__block .vertical-timeline__block__prefix .vertical-timeline__block__prefix__line{height:100%}"]
+        })
+    ], VerticalTimelineComponent);
+    return VerticalTimelineComponent;
+}());
+
+var RangeLineComponent = /** @class */ (function () {
+    function RangeLineComponent() {
+    }
+    RangeLineComponent = __decorate([
+        Component({
+            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{-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;display:-ms-flexbox;display:flex;-ms-flex-direction:column;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}"]
+        })
+    ], RangeLineComponent);
+    return RangeLineComponent;
+}());
+
+var CollapseOptionComponent = /** @class */ (function () {
+    function CollapseOptionComponent() {
+        this.isCollapsed = false;
+        this.change = new EventEmitter();
+    }
+    CollapseOptionComponent.prototype.onClick = function () {
+        this.change.emit(!this.isCollapsed);
+    };
+    __decorate([
+        Input()
+    ], CollapseOptionComponent.prototype, "isCollapsed", void 0);
+    __decorate([
+        Output()
+    ], CollapseOptionComponent.prototype, "change", void 0);
+    CollapseOptionComponent = __decorate([
+        Component({
+            selector: "s-collapse-option",
+            template: "<div\n   class=\"collapse-option\"\n   (click)=\"onClick()\">\n   <div class=\"collapse-option__icon\">\n      <span\n         class=\"fas\"\n         [ngClass]=\"{\n            'fa-minus': !isCollapsed,\n            'fa-plus': isCollapsed\n         }\">\n      </span>\n   </div>\n</div>",
+            styles: [".collapse-option{-ms-flex-align:center;align-items:center;background-color:#428bca;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:24px;-ms-flex-pack:center;justify-content:center;margin:4px;width:24px}.collapse-option .collapse-option__icon{color:#fff}"]
+        })
+    ], CollapseOptionComponent);
+    return CollapseOptionComponent;
+}());
+
+var CollapsedItemsComponent = /** @class */ (function () {
+    function CollapsedItemsComponent() {
+        this.isCollapsedChange = new EventEmitter();
+    }
+    CollapsedItemsComponent.prototype.onChange = function (event) {
+        this.isCollapsed = !this.isCollapsed;
+        this.isCollapsedChange.emit(this.isCollapsed);
+    };
+    __decorate([
+        Input()
+    ], CollapsedItemsComponent.prototype, "items", void 0);
+    __decorate([
+        Input()
+    ], CollapsedItemsComponent.prototype, "isCollapsed", void 0);
+    __decorate([
+        Input()
+    ], CollapsedItemsComponent.prototype, "isCompleted", void 0);
+    __decorate([
+        Input()
+    ], CollapsedItemsComponent.prototype, "counterLabel", void 0);
+    __decorate([
+        Output()
+    ], CollapsedItemsComponent.prototype, "isCollapsedChange", void 0);
+    CollapsedItemsComponent = __decorate([
+        Component({
+            selector: "s-collapsed-items",
+            template: "<div class=\"collapsed-items\">\n   <div\n      class=\"collapsed-items__item\"\n      [ngClass]=\"{ 'collapsed-items__item--completed' : isCompleted }\">\n      <div class=\"collapsed-items__item__icon-wrapper\">\n         <s-collapse-option\n            [isCollapsed]=\"isCollapsed\"\n            (change)=\"onChange($event)\">\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         <div\n            class=\"collapsed-items__item__info__description\">\n            {{ items.length }} {{ counterLabel }}\n         </div>\n      </div>\n   </div>\n</div>",
+            styles: [".collapsed-items .collapsed-items__item{-ms-flex-align:stretch;align-items:stretch;display:-ms-flexbox;display:flex}.collapsed-items .collapsed-items__item .collapsed-items__item__icon-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-negative:0;flex-shrink:0;-ms-flex-pack:center;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;-ms-flex-positive:1;flex-grow:1;min-height:20px;width:3px}.collapsed-items .collapsed-items__item .collapsed-items__item__info{-ms-flex-align:start;align-items:flex-start;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;margin-bottom:20px;-webkit-user-select:none;-ms-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}"]
+        })
+    ], CollapsedItemsComponent);
+    return CollapsedItemsComponent;
+}());
+
+var VerticalItemsComponent = /** @class */ (function () {
+    function VerticalItemsComponent() {
+    }
+    __decorate([
+        Input()
+    ], VerticalItemsComponent.prototype, "items", void 0);
+    __decorate([
+        Input()
+    ], VerticalItemsComponent.prototype, "isLast", void 0);
+    __decorate([
+        Input()
+    ], VerticalItemsComponent.prototype, "isActive", void 0);
+    __decorate([
+        Input()
+    ], VerticalItemsComponent.prototype, "isCompleted", void 0);
+    VerticalItemsComponent = __decorate([
+        Component({
+            selector: "s-vertical-items",
+            template: "<div class=\"vertical-items\">\n   <ng-container *ngFor=\"let item of items; 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         <div class=\"vertical-items__item__icon-wrapper\">\n            <s-timeline-icon-item\n               [item]=\"item\"\n               [isComplete]=\"isCompleted\"\n               [isActive]=\"isActive\">\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   </ng-container>\n</div>",
+            styles: [".vertical-items .vertical-items__item{-ms-flex-align:stretch;align-items:stretch;display:-ms-flexbox;display:flex;margin-right:50px}.vertical-items .vertical-items__item .vertical-items__item__collapsed-option{display:-ms-flexbox;display:flex;-ms-flex-direction:row;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{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-negative:0;flex-shrink:0;-ms-flex-pack:center;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;-ms-flex-positive:1;flex-grow:1;min-height:20px;width:3px}.vertical-items .vertical-items__item .vertical-items__item__info{-ms-flex-align:start;align-items:flex-start;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;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% - 4px - 8px)}.vertical-items .vertical-items__item.vertical-items__item--medium .vertical-items__item__icon-wrapper__line{height:calc(100% - 4px - 12px)}.vertical-items .vertical-items__item.vertical-items__item--big .vertical-items__item__icon-wrapper__line{height:calc(50% - 4px - 20px)}.vertical-items .vertical-items__item.vertical-items__item--completed .vertical-items__item__icon-wrapper .vertical-items__item__icon-wrapper__line{background-color:#0c9348}"]
+        })
+    ], VerticalItemsComponent);
+    return VerticalItemsComponent;
+}());
+
+var VerticalTimelineModule = /** @class */ (function () {
+    function VerticalTimelineModule() {
+    }
+    VerticalTimelineModule = __decorate([
+        NgModule({
+            imports: [
+                CommonModule,
+                TimelineItemModule,
+            ],
+            declarations: [
+                VerticalTimelineComponent,
+                RangeLineComponent,
+                CollapseOptionComponent,
+                CollapsedItemsComponent,
+                VerticalItemsComponent,
+            ],
+            exports: [VerticalTimelineComponent],
+        })
+    ], VerticalTimelineModule);
+    return VerticalTimelineModule;
+}());
+
 var TimelineModule = /** @class */ (function () {
     function TimelineModule() {
     }
     TimelineModule = __decorate([
         NgModule({
-            imports: [CommonModule, TooltipModule],
-            declarations: [TimelineComponent],
-            exports: [TimelineComponent],
+            imports: [
+                CommonModule,
+                TimelineItemModule,
+                HorizontalTimelineModule,
+                VerticalTimelineModule,
+            ],
+            declarations: [
+                TimelineComponent,
+            ],
+            exports: [
+                TimelineComponent,
+            ],
         })
     ], TimelineModule);
     return TimelineModule;
 }());
 
+var TimelineItemSeverity;
+(function (TimelineItemSeverity) {
+    TimelineItemSeverity["Normal"] = "normal";
+    TimelineItemSeverity["Warning"] = "warning";
+    TimelineItemSeverity["Error"] = "error";
+})(TimelineItemSeverity || (TimelineItemSeverity = {}));
+
+var TimelineItemSize;
+(function (TimelineItemSize) {
+    TimelineItemSize["Normal"] = "normal";
+    TimelineItemSize["Small"] = "small";
+})(TimelineItemSize || (TimelineItemSize = {}));
+
+var LABEL_MAX_LENGTH = 2;
+var TimelineItem = /** @class */ (function () {
+    function TimelineItem(params) {
+        this.id = params.id;
+        this.title = params.title;
+        this.description = params.description;
+        this.icon = params.icon;
+        this.label = params.label;
+        this.tooltip = params.tooltip;
+        this.size = params.size || TimelineItemSize.Normal;
+        this.severity = params.severity || TimelineItemSeverity.Normal;
+        this.checkItemIconContent();
+    }
+    TimelineItem.prototype.checkItemIconContent = function () {
+        var _a;
+        if (!this.icon && !this.label) {
+            throw new Error("No icon or label string was passed for the item. Enter an icon or label text");
+        }
+        if (this.icon && this.label) {
+            throw new Error("An icon and label string were passed to the item. Enter an icon or label text");
+        }
+        if (((_a = this.label) === null || _a === void 0 ? void 0 : _a.length) > LABEL_MAX_LENGTH) {
+            throw new Error("Label text is expected to be a maximum of two characters long");
+        }
+    };
+    TimelineItem.prototype.testSize = function (value) {
+        return this.size.valueOf() === value;
+    };
+    TimelineItem.prototype.testSeverity = function (value) {
+        var _a;
+        return ((_a = this.severity) === null || _a === void 0 ? void 0 : _a.valueOf()) === value;
+    };
+    return TimelineItem;
+}());
+
 var TileComponent = /** @class */ (function () {
     function TileComponent() {
         this.id = "s-tile-" + TileComponent_1.nextId++;
@@ -9333,5 +9617,5 @@ var CodeEditorModule = /** @class */ (function () {
  * Generated bundle index. Do not edit.
  */
 
-export { AngularComponentsModule, AutocompleteField, BaseFieldComponent, BignumberField, BignumberInputDirective, BignumberInputModule, BooleanField, BooleanOptionsLabel, BreadcrumbComponent, BreadcrumbModule, Breakpoints, ButtonComponent, ButtonModule, ButtonPriority, ButtonSize, CalendarField, CalendarLocaleOptions, CalendarMaskDirective, CalendarMaskModule, ChipsField, CodeEditorModule, CollapseLinkComponent, CollapseLinkModule, ControlErrorsComponent, ControlErrorsModule, CurrencyField, CustomFieldsComponent, CustomFieldsModule, CustomFieldsService, DEFAULT_CALENDAR_LOCALE_OPTIONS, DEFAULT_LOCALE_OPTIONS, DEFAULT_NUMBER_LOCALE_OPTIONS, DoubleClickDirective, DynamicConfig, DynamicFormComponent, DynamicFormModule, DynamicType, EditableOverlayDirective, EditableOverlayModule, EmptyStateComponent, EmptyStateModule, EnumBadgeColors, EnumColumnFieldType, ExportUtils, Field, FieldType, Fieldset, FileUploadComponent, FileUploadModule, FormField, GlobalSearchComponent, GlobalSearchDropdownItemComponent, GlobalSearchModule, GlobalSearchSizeEnum, HostProjectConfigsInjectionToken, ImageCropperComponent, ImageCropperModule, ImageCropperService, InfoSignDirective, InfoSignModule, Languages, LoadingStateComponent, LoadingStateDirective, LoadingStateModule, LocaleModule, LocaleOptions, LocaleService, LocalizedCurrencyPipe, LocalizedCurrencyPipeOptions, LocalizedDateImpurePipe, LocalizedDatePipe, LocalizedNumberInputDirective, LocalizedNumberInputModule, LocalizedNumberPipe, LocalizedTimeImpurePipe, LocalizedTimePipe, LongPressDirective, LookupComponent, LookupField, MaskFormatterModule, MaskFormatterPipe, MouseEventsModule, NavigationDirective, NumberAlignmentOption, NumberField, NumberInputDirective, NumberInputModule, NumberLocaleOptions, ObjectCardComponent, ObjectCardFieldComponent, ObjectCardMainComponent, ObjectCardModule, Option, ProductHeaderComponent, ProductHeaderModule, RadioButtonField, RationButtonOption, RowTogllerDirective, Section, SelectField, SelectOption, SidebarComponent, SidebarModule, StatsCardComponent, StatsCardModule, StepState, StepsComponent, StepsModule, Structure, TableFrozenPositionDirective, TableHeaderCheckboxComponent, TableHeaderCheckboxModule, TableModule, TaxCalculationLanguageConfigs, TextAreaField, TextField, Themes, ThumbnailComponent, ThumbnailModule, ThumbnailSize, TileComponent, TileModule, TimelineComponent, TimelineModule, TokenListComponent, TokenListModule, ValidateErrors, LocalizedCurrencyImpurePipe as ɵa, LocalizedBignumberPipe as ɵb, DecimalField as ɵbb, StructureModule as ɵbc, HeaderComponent as ɵbd, FooterComponent as ɵbe, NumberLocaleOptions as ɵbf, ThumbnailService as ɵbg, InfiniteScrollModule as ɵbh, InfiniteScrollDirective as ɵbi, CustomTranslationsModule as ɵbj, CodeEditorComponent as ɵbk, CoreFacade as ɵbl, CodeMirror6Core as ɵbm, LocalizedBignumberImpurePipe as ɵc, EmptyStateGoBackComponent as ɵd, TableColumnsComponent as ɵe, TablePagingComponent as ɵf, InfoSignComponent as ɵg, AutocompleteFieldComponent as ɵh, BooleanFieldComponent as ɵi, CalendarFieldComponent as ɵj, ChipsFieldComponent as ɵk, CurrencyFieldComponent as ɵl, DynamicFieldComponent as ɵm, DynamicFormDirective as ɵn, FieldsetComponent as ɵo, FileUploadComponent$1 as ɵp, LookupFieldComponent as ɵq, NumberFieldComponent as ɵr, BignumberFieldComponent as ɵs, RadioButtonComponent as ɵt, RowComponent as ɵu, SectionComponent as ɵv, SelectFieldComponent as ɵw, TextAreaFieldComponent as ɵx, TextFieldComponent as ɵy, BooleanSwitchFieldComponent as ɵz };
+export { AngularComponentsModule, AutocompleteField, BaseFieldComponent, BignumberField, BignumberInputDirective, BignumberInputModule, BooleanField, BooleanOptionsLabel, BreadcrumbComponent, BreadcrumbModule, Breakpoints, ButtonComponent, ButtonModule, ButtonPriority, ButtonSize, CalendarField, CalendarLocaleOptions, CalendarMaskDirective, CalendarMaskModule, ChipsField, CodeEditorModule, CollapseLinkComponent, CollapseLinkModule, ControlErrorsComponent, ControlErrorsModule, CurrencyField, CustomFieldsComponent, CustomFieldsModule, CustomFieldsService, DEFAULT_CALENDAR_LOCALE_OPTIONS, DEFAULT_LOCALE_OPTIONS, DEFAULT_NUMBER_LOCALE_OPTIONS, DoubleClickDirective, DynamicConfig, DynamicFormComponent, DynamicFormModule, DynamicType, EditableOverlayDirective, EditableOverlayModule, EmptyStateComponent, EmptyStateModule, EnumBadgeColors, EnumColumnFieldType, ExportUtils, Field, FieldType, Fieldset, FileUploadComponent, FileUploadModule, FormField, GlobalSearchComponent, GlobalSearchDropdownItemComponent, GlobalSearchModule, GlobalSearchSizeEnum, HostProjectConfigsInjectionToken, ImageCropperComponent, ImageCropperModule, ImageCropperService, InfoSignDirective, InfoSignModule, Languages, LoadingStateComponent, LoadingStateDirective, LoadingStateModule, LocaleModule, LocaleOptions, LocaleService, LocalizedCurrencyPipe, LocalizedCurrencyPipeOptions, LocalizedDateImpurePipe, LocalizedDatePipe, LocalizedNumberInputDirective, LocalizedNumberInputModule, LocalizedNumberPipe, LocalizedTimeImpurePipe, LocalizedTimePipe, LongPressDirective, LookupComponent, LookupField, MaskFormatterModule, MaskFormatterPipe, MouseEventsModule, NavigationDirective, NumberAlignmentOption, NumberField, NumberInputDirective, NumberInputModule, NumberLocaleOptions, ObjectCardComponent, ObjectCardFieldComponent, ObjectCardMainComponent, ObjectCardModule, Option, ProductHeaderComponent, ProductHeaderModule, RadioButtonField, RationButtonOption, RowTogllerDirective, Section, SelectField, SelectOption, SidebarComponent, SidebarModule, StatsCardComponent, StatsCardModule, StepState, StepsComponent, StepsModule, Structure, TableFrozenPositionDirective, TableHeaderCheckboxComponent, TableHeaderCheckboxModule, TableModule, TaxCalculationLanguageConfigs, TextAreaField, TextField, Themes, ThumbnailComponent, ThumbnailModule, ThumbnailSize, TileComponent, TileModule, TimelineComponent, TimelineItem, TimelineItemSeverity, TimelineItemSize, TimelineModule, TokenListComponent, TokenListModule, ValidateErrors, LocalizedCurrencyImpurePipe as ɵa, LocalizedBignumberPipe as ɵb, DecimalField as ɵbb, StructureModule as ɵbc, HeaderComponent as ɵbd, FooterComponent as ɵbe, NumberLocaleOptions as ɵbf, ThumbnailService as ɵbg, TimelineItemModule as ɵbh, TimelineIconItemComponent as ɵbi, HorizontalTimelineModule as ɵbj, HorizontalTimelineComponent as ɵbk, VerticalTimelineModule as ɵbl, VerticalTimelineComponent as ɵbm, RangeLineComponent as ɵbn, CollapseOptionComponent as ɵbo, CollapsedItemsComponent as ɵbp, VerticalItemsComponent as ɵbq, InfiniteScrollModule as ɵbr, InfiniteScrollDirective as ɵbs, CustomTranslationsModule as ɵbt, CodeEditorComponent as ɵbu, CoreFacade as ɵbv, CodeMirror6Core as ɵbw, LocalizedBignumberImpurePipe as ɵc, EmptyStateGoBackComponent as ɵd, TableColumnsComponent as ɵe, TablePagingComponent as ɵf, InfoSignComponent as ɵg, AutocompleteFieldComponent as ɵh, BooleanFieldComponent as ɵi, CalendarFieldComponent as ɵj, ChipsFieldComponent as ɵk, CurrencyFieldComponent as ɵl, DynamicFieldComponent as ɵm, DynamicFormDirective as ɵn, FieldsetComponent as ɵo, FileUploadComponent$1 as ɵp, LookupFieldComponent as ɵq, NumberFieldComponent as ɵr, BignumberFieldComponent as ɵs, RadioButtonComponent as ɵt, RowComponent as ɵu, SectionComponent as ɵv, SelectFieldComponent as ɵw, TextAreaFieldComponent as ɵx, TextFieldComponent as ɵy, BooleanSwitchFieldComponent as ɵz };
 //# sourceMappingURL=seniorsistemas-angular-components.js.map