@seniorsistemas/angular-components 14.16.33 → 15.0.1

package/bundles/seniorsistemas-angular-components.umd.js

@@ -2875,6 +2875,12 @@
         return EmptyStateModule;
     }());
 
+
+    (function (ValidateErrors) {
+        ValidateErrors["MAX_FILE_SIZE"] = "MAX_FILE_SIZE";
+        ValidateErrors["MAX_FILE_LIMIT"] = "MAX_FILE_LIMIT";
+    })(exports.ValidateErrors || (exports.ValidateErrors = {}));
+
     var Breakpoints = {
         SM_MIN: 0,
         SM_MAX: 767,
@@ -2981,14 +2987,10 @@
         return ExportUtils;
     }());
 
-
-    (function (ValidateErrors) {
-        ValidateErrors["MAX_FILE_SIZE"] = "MAX_FILE_SIZE";
-        ValidateErrors["MAX_FILE_LIMIT"] = "MAX_FILE_LIMIT";
-    })(exports.ValidateErrors || (exports.ValidateErrors = {}));
     var FileUploadComponent = /** @class */ (function () {
         function FileUploadComponent(sanitizer) {
             this.sanitizer = sanitizer;
+            this.inputValue = "";
             this.id = "s-file-upload-" + FileUploadComponent_1.nextId++;
             this.chooseLabel = "Anexar arquivos";
             this.removeLabel = "Remover";
@@ -3001,12 +3003,10 @@
             this.cancelUpload = new core.EventEmitter();
             this.downloadFile = new core.EventEmitter();
             this.validateErros = new core.EventEmitter();
-            this.uploadedFileCount = 0;
             this._files = [];
             this.ngUsubscribe = new rxjs.Subject();
         }
         FileUploadComponent_1 = FileUploadComponent;
-        FileUploadComponent.prototype.ngOnInit = function () { };
         FileUploadComponent.prototype.ngOnDestroy = function () {
             this.ngUsubscribe.next();
             this.ngUsubscribe.complete();
@@ -3017,91 +3017,94 @@
         FileUploadComponent.prototype.onResize = function () {
             this.update();
         };
-        FileUploadComponent.prototype.update = function () {
-            var windowWidth = window.innerWidth;
-            this.isSmallDevice = windowWidth <= Breakpoints.SM_MAX;
-        };
         FileUploadComponent.prototype.onFileSelect = function (files) {
-            var previousFiles = __spread(this.files);
+            var e_1, _a;
+            var newFiles = [];
             if (!this.multiple) {
                 this.files = [];
             }
-            if (this.fileLimit) {
-                this.uploadedFileCount += files.length;
-                if (this.isFileLimitExceeded()) {
-                    this.uploadedFileCount -= this.files.length;
-                    this.validateErros.emit(exports.ValidateErrors.MAX_FILE_LIMIT);
-                    return;
-                }
+            if (this.isFileLimitExceeded(files)) {
+                this.validateErros.emit(exports.ValidateErrors.MAX_FILE_LIMIT);
+                return;
             }
-            for (var i = 0; i < files.length; i++) {
-                var file = files[i];
-                if (this.isFileSizeExceeded(file)) {
-                    this.validateErros.emit(exports.ValidateErrors.MAX_FILE_SIZE);
-                    this.files = previousFiles;
-                    return;
+            try {
+                for (var files_1 = __values(files), files_1_1 = files_1.next(); !files_1_1.done; files_1_1 = files_1.next()) {
+                    var file = files_1_1.value;
+                    if (this.isFileSizeExceeded(file)) {
+                        this.validateErros.emit(exports.ValidateErrors.MAX_FILE_SIZE);
+                        return;
+                    }
+                    newFiles.push(file);
                 }
-                else {
-                    this.files.push(file);
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (files_1_1 && !files_1_1.done && (_a = files_1.return)) _a.call(files_1);
                 }
+                finally { if (e_1) throw e_1.error; }
             }
-            if (this.hasFiles()) {
-                this.uploadHandler.emit({ files: this.files });
+            if (newFiles.length) {
+                this.files = this.files.concat(newFiles);
+                this.uploadHandler.emit({
+                    files: newFiles,
+                });
                 this.inputUpload.nativeElement.value = "";
             }
         };
-        FileUploadComponent.prototype.onRemoveFile = function (event, file) {
-            this.files.splice(this.files.indexOf(file), 1);
-            this.uploadedFileCount -= 1;
-            this.removeFile.emit({ file: file });
-            event.preventDefault();
-        };
-        FileUploadComponent.prototype.onCancelUpload = function (event, index) {
-            this.uploadedFileCount -= 1;
-            this.files.splice(index, 1);
-            this.cancelUpload.emit(index);
-            event.preventDefault();
+        FileUploadComponent.prototype.onRemoveFile = function (file) {
+            var fileIndex = this.files.indexOf(file);
+            var removedFiles = this.files.splice(fileIndex, 1);
+            if (removedFiles.length) {
+                this.removeFile.emit({ file: file });
+            }
         };
-        FileUploadComponent.prototype.onDowloadFile = function (event, index) {
-            this.downloadFile.emit({ index: index, anchor: this.anchor });
-            event.preventDefault();
+        FileUploadComponent.prototype.onCancelUpload = function (index) {
+            var removedFiles = this.files.splice(index, 1);
+            if (removedFiles.length) {
+                this.cancelUpload.emit(index);
+            }
         };
-        FileUploadComponent.prototype.hasFiles = function () {
-            return this.files && this.files.length > 0;
+        FileUploadComponent.prototype.onDowloadFile = function (index) {
+            this.downloadFile.emit({
+                index: index,
+                anchor: this.anchor,
+            });
         };
         Object.defineProperty(FileUploadComponent.prototype, "files", {
             get: function () {
                 return this._files;
             },
             set: function (files) {
-                this._files = [];
-                for (var i = 0; i < files.length; i++) {
-                    var file = files[i];
-                    if (this.isImage(file)) {
-                        file.objectURL = this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(files[i]));
+                var _this = this;
+                this._files = files.map(function (file) {
+                    if (_this.isImage(file)) {
+                        file.objectURL = _this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(file));
                     }
-                    this._files.push(files[i]);
-                }
+                    return file;
+                });
             },
             enumerable: true,
             configurable: true
         });
-        FileUploadComponent.prototype.getFileSize = function (size) {
-            return (size / 1024).toFixed(2);
+        FileUploadComponent.prototype.update = function () {
+            var windowWidth = window.innerWidth;
+            this.isSmallDevice = windowWidth <= Breakpoints.SM_MAX;
         };
         FileUploadComponent.prototype.isImage = function (file) {
             return /^image\//.test(file.type);
         };
-        FileUploadComponent.prototype.defaltCatchError = function (err, index) {
-            this.files[index].error = err;
-            this.files[index].isUploading = false;
-            throw new Error("error in upload file. Details: " + err.message);
-        };
-        FileUploadComponent.prototype.isFileLimitExceeded = function () {
-            return this.fileLimit && this.fileLimit < this.files.length + this.uploadedFileCount;
+        FileUploadComponent.prototype.isFileLimitExceeded = function (files) {
+            if (!this.fileLimit) {
+                return false;
+            }
+            return this.files.length + files.length > this.fileLimit;
         };
         FileUploadComponent.prototype.isFileSizeExceeded = function (file) {
-            return this.maxFileSize && file.size > this.maxFileSize;
+            if (!this.maxFileSize) {
+                return false;
+            }
+            return file.size > this.maxFileSize;
         };
         var FileUploadComponent_1;
         FileUploadComponent.nextId = 0;
@@ -3186,7 +3189,7 @@
         FileUploadComponent = FileUploadComponent_1 = __decorate([
             core.Component({
                 selector: "s-file-upload",
-                template: "<div class=\"s-fileupload\" [id]=\"id\">\n    <div class=\"s-fileupload-choose\">\n        <input type=\"file\" name=\"file\" [accept]=\"accept\" [multiple]=\"multiple\"\n            (change)=\"onFileSelect($event.dataTransfer ? $event.dataTransfer.files : $event.target.files)\" #inputUpload>\n        <s-button [id]=\"id + 'upload-button'\" [label]=\"chooseLabel\" (onClick)=\"inputUpload.click()\" priority=\"primary\"\n            [disabled]=\"disabled || !!formGroup?.disabled\" [auxiliary]=\"false\"></s-button>\n    </div>\n\n    <section [id]=\"id + 'fileupload-list'\" class=\"s-fileupload-list\" *ngIf=\"files.length\" role=\"grid\">\n        <ng-container *ngFor=\"let file of files; let i = index\">\n            <div class=\"s-fileupload-list-file\" role=\"row\">\n                <div [id]=\"id + '-file-' + i + '-name'\" class=\"s-fileupload-list-file-name\" role=\"gridcell\">\n                    <ng-container\n                        *ngTemplateOutlet=\"file.savedFile || file.progress === 100 ? descriptionUrl : description; context: { $implicit: file, index: i }\">\n                    </ng-container>\n                </div>\n                <div class=\"s-fileupload-list-file-status\" role=\"gridcell\">\n                    <p-progressBar *ngIf=\"file.isUploading && !isSmallDevice\"\n                        [style]=\"{ 'width': '250px', 'background-color': '#d8d8d8', 'border-radius': '0px', 'height': '14px'}\"\n                        [value]=\"file.progress\" [showValue]=\"false\" role=\"alert\" [attr.aria-label]=\"ariaLabelProgress\">\n                    </p-progressBar>\n                    <span [id]=\"id + '-file-' + i + '-spin'\" class=\"fas fa-circle-notch fa-spin\"\n                        *ngIf=\"file.isUploading && isSmallDevice\" [attr.aria-label]=\"ariaLabelProgress\"></span>\n                    <span [id]=\"id + '-file-' + i + '-check'\" class=\"fas fa-check\" role=\"alert\"\n                        *ngIf=\"!file.isUploading && !file.error && file.progress === 100\"\n                        [attr.aria-label]=\"ariaLabelSuccess || successTooltip\" [pTooltip]=\"successTooltip\"\n                        tooltipPosition=\"top\" showDelay=\"500\" [appendTo]=\"'body'\"></span>\n                    <span [id]=\"id + '-file-' + i + '-error'\" class=\"fas fa-times\" role=\"alert\"\n                        *ngIf=\"file.error?.message\" [pTooltip]=\"file.error?.message\" tooltipPosition=\"top\"\n                        showDelay=\"500\" [appendTo]=\"'body'\"></span>\n                </div>\n                <div class=\"s-fileupload-list-file-actions\" role=\"gridcell\">\n                    <a [id]=\"id + '-file-' + i + '-cancel'\" class=\"s-fileupload-list-file-actions-action\"\n                        (click)=\"onCancelUpload($event, i)\" *ngIf=\"file.isUploading\">{{cancelLabel}}</a>\n                    <a role=\"button\" tabindex=\"0\" [id]=\"id + '-file-' + i + '-remove'\"\n                        class=\"s-fileupload-list-file-actions-action\" (click)=\"onRemoveFile($event, file)\"\n                        *ngIf=\"!file.isUploading && !(disabled || !!formGroup?.disabled)\" [attr.aria-label]=\"ariaLabelRemove || removeLabel\">{{removeLabel}}</a>\n                </div>\n            </div>\n        </ng-container>\n    </section>\n</div>\n\n<ng-template #descriptionUrl let-file let-i = index>\n    <a [id]=\"id + '-file-' + i + '-name-link'\" tabindex=\"0\" (click)=\"onDowloadFile($event, i)\"\n        [attr.aria-label]=\"ariaLabelFileName || file.name\">{{file.name}}</a>\n    <a style=\"display: none;\" [href]=\"file.objectURL\" target=\"_blank\" download #anchor></a>\n</ng-template>\n\n<ng-template #description let-file>\n    <span tabindex=\"0\" [attr.aria-label]=\"ariaLabelFileName || file.name\">\n        {{file.name}}\n    </span>\n</ng-template>\n",
+                template: "<div\n    [id]=\"id\"\n    class=\"s-fileupload\">\n    <div class=\"s-fileupload-choose\">\n        <input\n            #inputUpload\n            [id]=\"id+'input-upload'\"\n            type=\"file\"\n            name=\"file\"\n            [accept]=\"accept\"\n            [multiple]=\"multiple\"\n            (change)=\"onFileSelect($event.dataTransfer\n                ? $event.dataTransfer.files\n                : $event.target.files)\">        \n        <s-button\n            [id]=\"id + 'upload-button'\"\n            [label]=\"chooseLabel\"\n            (onClick)=\"inputUpload.click()\"\n            priority=\"primary\"\n            [disabled]=\"disabled || !!formGroup?.disabled\"\n            [auxiliary]=\"false\">\n        </s-button>\n    </div>\n\n    <section\n        *ngIf=\"files.length\"    \n        [id]=\"id + 'fileupload-list'\"\n        class=\"s-fileupload-list\"\n        role=\"grid\">\n        <ng-container *ngFor=\"let file of files; let i = index\">\n            <div\n                class=\"s-fileupload-list-file\"\n                role=\"row\">\n                <div\n                    [id]=\"id + '-file-' + i + '-name'\"\n                    class=\"s-fileupload-list-file-name\"\n                    role=\"gridcell\">\n                    <ng-container *ngTemplateOutlet=\"file.savedFile || file.progress === 100\n                        ? descriptionUrl\n                        : description; context: {\n                            $implicit: file,\n                            index: i\n                        }\">\n                    </ng-container>\n                </div>\n                <div\n                    class=\"s-fileupload-list-file-status\"\n                    role=\"gridcell\">\n                    <p-progressBar\n                        *ngIf=\"file.isUploading && !isSmallDevice\"\n                        [style]=\"{ 'width': '250px', 'background-color': '#d8d8d8', 'border-radius': '0px', 'height': '14px'}\"\n                        [value]=\"file.progress\"\n                        [showValue]=\"false\"\n                        role=\"alert\"\n                        [attr.aria-label]=\"ariaLabelProgress\">\n                    </p-progressBar>\n                    <span\n                        *ngIf=\"file.isUploading && isSmallDevice\"    \n                        [id]=\"id + '-file-' + i + '-spin'\"\n                        class=\"fas fa-circle-notch fa-spin\"\n                        [attr.aria-label]=\"ariaLabelProgress\">\n                    </span>\n                    <span\n                        *ngIf=\"!file.isUploading && !file.error && file.progress === 100\"\n                        [id]=\"id + '-file-' + i + '-check'\"\n                        class=\"fas fa-check\"\n                        role=\"alert\"\n                        [attr.aria-label]=\"ariaLabelSuccess || successTooltip\"\n                        [pTooltip]=\"successTooltip\"\n                        tooltipPosition=\"top\"\n                        showDelay=\"500\"\n                        [appendTo]=\"'body'\">\n                    </span>\n                    <span\n                        *ngIf=\"file.error?.message\"    \n                        [id]=\"id + '-file-' + i + '-error'\"\n                        class=\"fas fa-times\"\n                        role=\"alert\"\n                        [pTooltip]=\"file.error?.message\"\n                        tooltipPosition=\"top\"\n                        showDelay=\"500\"\n                        [appendTo]=\"'body'\">\n                    </span>\n                </div>\n                <div\n                    class=\"s-fileupload-list-file-actions\"\n                    role=\"gridcell\">\n                    <a\n                        *ngIf=\"file.isUploading\"\n                        [id]=\"id + '-file-' + i + '-cancel'\"\n                        class=\"s-fileupload-list-file-actions-action\"\n                        (click)=\"onCancelUpload(i)\">\n                        {{cancelLabel}}\n                    </a>\n                    <a\n                        *ngIf=\"!file.isUploading && !(disabled || !!formGroup?.disabled)\"\n                        role=\"button\"\n                        tabindex=\"0\"\n                        [id]=\"id + '-file-' + i + '-remove'\"\n                        class=\"s-fileupload-list-file-actions-action\"\n                        (click)=\"onRemoveFile(file)\"\n                        [attr.aria-label]=\"ariaLabelRemove || removeLabel\">\n                        {{removeLabel}}\n                    </a>\n                </div>\n            </div>\n        </ng-container>\n    </section>\n</div>\n\n<ng-template\n    #descriptionUrl\n    let-file\n    let-i = index>\n    <a\n        [id]=\"id + '-file-' + i + '-name-link'\"\n        tabindex=\"0\"\n        (click)=\"onDowloadFile(i)\"\n        [attr.aria-label]=\"ariaLabelFileName || file.name\">{{file.name}}\n    </a>\n    <a\n        style=\"display: none;\"\n        [href]=\"file.objectURL\"\n        target=\"_blank\"\n        download\n        #anchor>\n    </a>\n</ng-template>\n\n<ng-template\n    #description\n    let-file>\n    <span\n        tabindex=\"0\"\n        [attr.aria-label]=\"ariaLabelFileName || file.name\">\n        {{file.name}}\n    </span>\n</ng-template>\n",
                 styles: [".s-fileupload .s-fileupload-choose{position:relative;margin:15px 0;width:-webkit-max-content;width:max-content}.s-fileupload input[type=file]{display:none}.s-fileupload-list{border:1px solid #ccc}.s-fileupload-list-file:not(:first-child){border-top:1px solid #ccc}.s-fileupload-list .s-fileupload-list-file{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:justify;justify-content:space-between;padding:15px}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-name{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-name>a{cursor:pointer;text-decoration:none}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-status{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}.s-fileupload-list .s-fileupload-list-file .fas.fa-circle-notch{color:#d8d8d8;font-size:12px}.s-fileupload-list .s-fileupload-list-file .fas.fa-check{color:#0c9348;font-size:12px}.s-fileupload-list .s-fileupload-list-file .fas.fa-times{color:#c13018;font-size:12px}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-actions{margin-top:15px;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;width:100%}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-actions a.s-fileupload-list-file-actions-action{text-decoration:none;color:#428bca}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-actions a.s-fileupload-list-file-actions-action :focus,.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-actions a.s-fileupload-list-file-actions-action :visited,.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-actions a.s-fileupload-list-file-actions-action:hover{text-decoration:none}@media (min-width:768px){.s-fileupload-list .s-fileupload-list-file{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-name{width:auto;-ms-flex-positive:2;flex-grow:2}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-status{margin:0 15px}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-actions{margin:0;width:auto}}"]
             })
         ], FileUploadComponent);
@@ -3199,7 +3202,12 @@
         FileUploadModule = __decorate([
             core.NgModule({
                 declarations: [FileUploadComponent],
-                imports: [common.CommonModule, ButtonModule, tooltip.TooltipModule, progressbar.ProgressBarModule],
+                imports: [
+                    common.CommonModule,
+                    ButtonModule,
+                    tooltip.TooltipModule,
+                    progressbar.ProgressBarModule,
+                ],
                 exports: [FileUploadComponent],
             })
         ], FileUploadModule);
@@ -7543,100 +7551,384 @@
         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([
             core.Input()
-        ], TimelineComponent.prototype, "id", void 0);
+        ], TimelineComponent.prototype, "items", null);
         __decorate([
             core.Input()
-        ], TimelineComponent.prototype, "steps", void 0);
+        ], TimelineComponent.prototype, "activeIndex", void 0);
         __decorate([
             core.Input()
-        ], TimelineComponent.prototype, "activeIndex", void 0);
-        TimelineComponent = TimelineComponent_1 = __decorate([
+        ], TimelineComponent.prototype, "direction", void 0);
+        __decorate([
+            core.Input()
+        ], TimelineComponent.prototype, "collapsable", void 0);
+        __decorate([
+            core.Input()
+        ], TimelineComponent.prototype, "counterLabel", void 0);
+        __decorate([
+            core.HostListener("window:resize", ["$event"])
+        ], TimelineComponent.prototype, "onResize", null);
+        TimelineComponent = __decorate([
             core.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: [
-                    animations.trigger("beforeActiveDesative", [
-                        animations.state("active", animations.style({
-                            "background-position": "left bottom",
-                        })),
-                        animations.state("desactive", animations.style({
-                            "background-position": "right bottom",
-                        })),
-                        animations.transition("active => desactive", [animations.animate("50ms 100ms linear")]),
-                        animations.transition("desactive => active", [animations.animate("50ms 250ms linear")]),
-                    ]),
-                    animations.trigger("activeDesative", [
-                        animations.state("active", animations.style({
-                            "background-position": "left bottom",
-                        })),
-                        animations.state("desactive", animations.style({
-                            "background-position": "right bottom",
-                        })),
-                        animations.transition("active => desactive", [animations.animate("100ms 150ms linear")]),
-                        animations.transition("desactive => active", [animations.animate("100ms 150ms linear")]),
-                    ]),
-                    animations.trigger("afterActiveDesative", [
-                        animations.state("active", animations.style({
-                            "background-position": "left bottom",
-                        })),
-                        animations.state("desactive", animations.style({
-                            "background-position": "right bottom",
-                        })),
-                        animations.transition("active => desactive", [animations.animate("50ms 250ms linear")]),
-                        animations.transition("desactive => active", [animations.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([
+            core.Input()
+        ], TimelineIconItemComponent.prototype, "item", void 0);
+        __decorate([
+            core.Input()
+        ], TimelineIconItemComponent.prototype, "isActive", void 0);
+        __decorate([
+            core.Input()
+        ], TimelineIconItemComponent.prototype, "isComplete", void 0);
+        TimelineIconItemComponent = __decorate([
+            core.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([
+            core.NgModule({
+                imports: [
+                    common.CommonModule,
+                    tooltip.TooltipModule,
+                ],
+                declarations: [TimelineIconItemComponent],
+                exports: [TimelineIconItemComponent],
+            })
+        ], TimelineItemModule);
+        return TimelineItemModule;
+    }());
+
+    var HorizontalTimelineComponent = /** @class */ (function () {
+        function HorizontalTimelineComponent() {
+            this.activeIndex = 0;
+        }
+        __decorate([
+            core.Input()
+        ], HorizontalTimelineComponent.prototype, "items", void 0);
+        __decorate([
+            core.Input()
+        ], HorizontalTimelineComponent.prototype, "activeIndex", void 0);
+        HorizontalTimelineComponent = __decorate([
+            core.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([
+            core.NgModule({
+                imports: [
+                    common.CommonModule,
+                    tooltip.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([
+            core.Input()
+        ], VerticalTimelineComponent.prototype, "activeIndex", null);
+        __decorate([
+            core.Input()
+        ], VerticalTimelineComponent.prototype, "items", void 0);
+        __decorate([
+            core.Input()
+        ], VerticalTimelineComponent.prototype, "counterLabel", void 0);
+        __decorate([
+            core.Input()
+        ], VerticalTimelineComponent.prototype, "collapsable", void 0);
+        VerticalTimelineComponent = __decorate([
+            core.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([
+            core.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 core.EventEmitter();
+        }
+        CollapseOptionComponent.prototype.onClick = function () {
+            this.change.emit(!this.isCollapsed);
+        };
+        __decorate([
+            core.Input()
+        ], CollapseOptionComponent.prototype, "isCollapsed", void 0);
+        __decorate([
+            core.Output()
+        ], CollapseOptionComponent.prototype, "change", void 0);
+        CollapseOptionComponent = __decorate([
+            core.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 core.EventEmitter();
+        }
+        CollapsedItemsComponent.prototype.onChange = function (event) {
+            this.isCollapsed = !this.isCollapsed;
+            this.isCollapsedChange.emit(this.isCollapsed);
+        };
+        __decorate([
+            core.Input()
+        ], CollapsedItemsComponent.prototype, "items", void 0);
+        __decorate([
+            core.Input()
+        ], CollapsedItemsComponent.prototype, "isCollapsed", void 0);
+        __decorate([
+            core.Input()
+        ], CollapsedItemsComponent.prototype, "isCompleted", void 0);
+        __decorate([
+            core.Input()
+        ], CollapsedItemsComponent.prototype, "counterLabel", void 0);
+        __decorate([
+            core.Output()
+        ], CollapsedItemsComponent.prototype, "isCollapsedChange", void 0);
+        CollapsedItemsComponent = __decorate([
+            core.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([
+            core.Input()
+        ], VerticalItemsComponent.prototype, "items", void 0);
+        __decorate([
+            core.Input()
+        ], VerticalItemsComponent.prototype, "isLast", void 0);
+        __decorate([
+            core.Input()
+        ], VerticalItemsComponent.prototype, "isActive", void 0);
+        __decorate([
+            core.Input()
+        ], VerticalItemsComponent.prototype, "isCompleted", void 0);
+        VerticalItemsComponent = __decorate([
+            core.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([
+            core.NgModule({
+                imports: [
+                    common.CommonModule,
+                    TimelineItemModule,
+                ],
+                declarations: [
+                    VerticalTimelineComponent,
+                    RangeLineComponent,
+                    CollapseOptionComponent,
+                    CollapsedItemsComponent,
+                    VerticalItemsComponent,
+                ],
+                exports: [VerticalTimelineComponent],
+            })
+        ], VerticalTimelineModule);
+        return VerticalTimelineModule;
+    }());
+
     var TimelineModule = /** @class */ (function () {
         function TimelineModule() {
         }
         TimelineModule = __decorate([
             core.NgModule({
-                imports: [common.CommonModule, tooltip.TooltipModule],
-                declarations: [TimelineComponent],
-                exports: [TimelineComponent],
+                imports: [
+                    common.CommonModule,
+                    TimelineItemModule,
+                    HorizontalTimelineModule,
+                    VerticalTimelineModule,
+                ],
+                declarations: [
+                    TimelineComponent,
+                ],
+                exports: [
+                    TimelineComponent,
+                ],
             })
         ], TimelineModule);
         return TimelineModule;
     }());
 
+
+    (function (TimelineItemSeverity) {
+        TimelineItemSeverity["Normal"] = "normal";
+        TimelineItemSeverity["Warning"] = "warning";
+        TimelineItemSeverity["Error"] = "error";
+    })(exports.TimelineItemSeverity || (exports.TimelineItemSeverity = {}));
+
+
+    (function (TimelineItemSize) {
+        TimelineItemSize["Normal"] = "normal";
+        TimelineItemSize["Small"] = "small";
+    })(exports.TimelineItemSize || (exports.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 || exports.TimelineItemSize.Normal;
+            this.severity = params.severity || exports.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++;
@@ -9613,6 +9905,7 @@
     exports.TileComponent = TileComponent;
     exports.TileModule = TileModule;
     exports.TimelineComponent = TimelineComponent;
+    exports.TimelineItem = TimelineItem;
     exports.TimelineModule = TimelineModule;
     exports.TokenListComponent = TokenListComponent;
     exports.TokenListModule = TokenListModule;
@@ -9624,12 +9917,22 @@
     exports.ɵbe = FooterComponent;
     exports.ɵbf = NumberLocaleOptions;
     exports.ɵbg = ThumbnailService;
-    exports.ɵbh = InfiniteScrollModule;
-    exports.ɵbi = InfiniteScrollDirective;
-    exports.ɵbj = CustomTranslationsModule;
-    exports.ɵbk = CodeEditorComponent;
-    exports.ɵbl = CoreFacade;
-    exports.ɵbm = CodeMirror6Core;
+    exports.ɵbh = TimelineItemModule;
+    exports.ɵbi = TimelineIconItemComponent;
+    exports.ɵbj = HorizontalTimelineModule;
+    exports.ɵbk = HorizontalTimelineComponent;
+    exports.ɵbl = VerticalTimelineModule;
+    exports.ɵbm = VerticalTimelineComponent;
+    exports.ɵbn = RangeLineComponent;
+    exports.ɵbo = CollapseOptionComponent;
+    exports.ɵbp = CollapsedItemsComponent;
+    exports.ɵbq = VerticalItemsComponent;
+    exports.ɵbr = InfiniteScrollModule;
+    exports.ɵbs = InfiniteScrollDirective;
+    exports.ɵbt = CustomTranslationsModule;
+    exports.ɵbu = CodeEditorComponent;
+    exports.ɵbv = CoreFacade;
+    exports.ɵbw = CodeMirror6Core;
     exports.ɵc = LocalizedBignumberImpurePipe;
     exports.ɵd = EmptyStateGoBackComponent;
     exports.ɵe = TableColumnsComponent;