@seniorsistemas/angular-components 17.7.2 → 17.7.4

package/fesm5/seniorsistemas-angular-components.js

@@ -15973,27 +15973,6 @@ var TieredMenuEventService = /** @class */ (function () {
         this.closeItemMenuEvent = new EventEmitter();
         this.createMenuEvent = new EventEmitter();
     }
-    TieredMenuEventService.prototype.emitIncrementCurrentItemEvent = function () {
-        this.incrementCurrentItemEvent.emit();
-    };
-    TieredMenuEventService.prototype.emitDecrementCurrentItemEvent = function () {
-        this.decrementCurrentItemEvent.emit();
-    };
-    TieredMenuEventService.prototype.emitCloseAllMenusEvent = function () {
-        this.closeAllMenusEvent.emit();
-    };
-    TieredMenuEventService.prototype.emitSelectItemEvent = function (item) {
-        this.selectItemEvent.emit(item);
-    };
-    TieredMenuEventService.prototype.emitOpenItemMenuEvent = function (item) {
-        this.openItemMenuEvent.emit(item);
-    };
-    TieredMenuEventService.prototype.emitCloseItemMenuEvent = function (item) {
-        this.closeItemMenuEvent.emit(item);
-    };
-    TieredMenuEventService.prototype.emitCreateMenuEvent = function (item) {
-        this.createMenuEvent.emit(item);
-    };
     TieredMenuEventService = __decorate([
         Injectable()
     ], TieredMenuEventService);
@@ -16002,22 +15981,26 @@ var TieredMenuEventService = /** @class */ (function () {
 
 var TieredMenuService = /** @class */ (function () {
     function TieredMenuService() {
+        this.currentItems = [];
+        this.items = [];
     }
     TieredMenuService.prototype.normalizeData = function (items, parent) {
         var _this = this;
         return items.map(function (i) {
-            if (i.submenu) {
-                i.submenu = _this.normalizeData(i.submenu, i);
+            var item = __assign({}, i);
+            if (item.submenu) {
+                item.submenu = _this.normalizeData(item.submenu, item);
             }
-            i.id = "id-" + Math.random().toString(36).substring(2, 9) + "-" + Date.now().toString(36);
-            i.parent = parent;
-            i.isOpen = false;
-            return i;
+            item.id = _this._generateId();
+            item.parent = parent;
+            item.isOpen = false;
+            return item;
         });
     };
     TieredMenuService.prototype.markAllItemsAsClosed = function (items) {
         var _this = this;
-        return items.map(function (item) {
+        return items.map(function (i) {
+            var item = __assign({}, i);
             if (item.submenu) {
                 item.submenu = _this.markAllItemsAsClosed(item.submenu);
             }
@@ -16025,16 +16008,22 @@ var TieredMenuService = /** @class */ (function () {
             return item;
         });
     };
-    TieredMenuService.prototype.searchTheHierarchy = function (item1, item2) {
-        var itemAux = item2;
-        while (itemAux) {
-            if (itemAux === item1) {
+    TieredMenuService.prototype.searchTheHierarchy = function (itemA, itemB) {
+        var item = itemB;
+        while (item) {
+            if (item === itemA) {
                 return true;
             }
-            itemAux = itemAux.parent;
+            item = item.parent;
         }
         return false;
     };
+    TieredMenuService.prototype.cloneItems = function (items) {
+        return JSON.parse(JSON.stringify(items));
+    };
+    TieredMenuService.prototype._generateId = function () {
+        return "id-" + Math.random().toString(36).substring(2, 9) + "-" + Math.random().toString(36).substring(2, 9) + "-" + Math.random().toString(36).substring(2, 9);
+    };
     TieredMenuService = __decorate([
         Injectable()
     ], TieredMenuService);
@@ -16046,9 +16035,44 @@ var TieredMenuNestedComponent = /** @class */ (function () {
         this.tieredMenuService = tieredMenuService;
         this._tieredMenuEventService = _tieredMenuEventService;
         this.top = 0;
-        this.maxHeight = 0;
+        this.left = 0;
         this._unsubscribe$ = new Subject();
     }
+    TieredMenuNestedComponent.prototype.onResize = function () {
+        this._tieredMenuEventService.closeAllMenusEvent.emit();
+    };
+    TieredMenuNestedComponent.prototype.onDocumentClick = function (event) {
+        // Closing menu when clicked outside.
+        var target = event.target;
+        var clickedInside = target.closest("s-tiered-menu-item") || target.closest("s-tiered-menu-divider");
+        if (!clickedInside) {
+            this._tieredMenuEventService.closeAllMenusEvent.emit();
+        }
+    };
+    TieredMenuNestedComponent.prototype.onKeydownHandler = function (event) {
+        switch (event.key) {
+            case "Escape":
+                this._tieredMenuEventService.closeAllMenusEvent.emit();
+                break;
+            case " ":
+            case "Enter":
+                this._tieredMenuEventService.selectItemEvent.emit(this.tieredMenuService.currentItem);
+                break;
+            case "ArrowLeft":
+                // When nested I need a reference to the current item's parent item, otherwise just the current item.
+                this._tieredMenuEventService.closeItemMenuEvent.emit(this.tieredMenuService.currentItem.parent);
+                break;
+            case "ArrowRight":
+                this._tieredMenuEventService.openItemMenuEvent.emit(this.tieredMenuService.currentItem);
+                break;
+            case "ArrowUp":
+                this._tieredMenuEventService.decrementCurrentItemEvent.emit();
+                break;
+            case "ArrowDown":
+                this._tieredMenuEventService.incrementCurrentItemEvent.emit();
+                break;
+        }
+    };
     TieredMenuNestedComponent.prototype.ngOnInit = function () {
         this.tieredMenuService.currentItems = this.items;
         this._subscribeEvents();
@@ -16129,7 +16153,7 @@ var TieredMenuNestedComponent = /** @class */ (function () {
             if (item.command) {
                 item.command();
                 // Close all menus after the item was selected.
-                _this._tieredMenuEventService.emitCloseAllMenusEvent();
+                _this._tieredMenuEventService.closeAllMenusEvent.emit();
             }
         });
         this._tieredMenuEventService.openItemMenuEvent
@@ -16141,7 +16165,7 @@ var TieredMenuNestedComponent = /** @class */ (function () {
                 while ((_a = itemAux === null || itemAux === void 0 ? void 0 : itemAux.parent) === null || _a === void 0 ? void 0 : _a.parent) {
                     itemAux = itemAux.parent;
                 }
-                _this._tieredMenuEventService.emitCloseItemMenuEvent((_b = itemAux.parent) !== null && _b !== void 0 ? _b : itemAux);
+                _this._tieredMenuEventService.closeItemMenuEvent.emit((_b = itemAux.parent) !== null && _b !== void 0 ? _b : itemAux);
             }
             _this._lastOpenItem = item;
             _this._openItem(item);
@@ -16158,20 +16182,30 @@ var TieredMenuNestedComponent = /** @class */ (function () {
         { type: TieredMenuService },
         { type: TieredMenuEventService }
     ]; };
+    __decorate([
+        HostListener("window:resize")
+    ], TieredMenuNestedComponent.prototype, "onResize", null);
+    __decorate([
+        HostListener("document:click", ["$event"])
+    ], TieredMenuNestedComponent.prototype, "onDocumentClick", null);
+    __decorate([
+        HostListener("document:keydown", ["$event"])
+    ], TieredMenuNestedComponent.prototype, "onKeydownHandler", null);
     TieredMenuNestedComponent = __decorate([
         Component({
-            template: "<div\n    class=\"menu menu--nested\"\n    [ngStyle]=\"{\n        'top': top + 'px',\n        'max-height': maxHeight + 'px'\n    }\">\n    <ng-container *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: items }\"></ng-container>\n</div>\n\n<ng-template #itemsTemplate let-items>\n    <div *ngFor=\"let item of items\">\n        <s-tiered-menu-item\n            *ngIf=\"!item.divider\"\n            [item]=\"item\"\n            [focused]=\"item === tieredMenuService.currentItem\"\n            [closeOnClick]=\"true\">\n        </s-tiered-menu-item>\n\n        <s-tiered-menu-divider *ngIf=\"item.divider\"></s-tiered-menu-divider>\n\n        <div *ngIf=\"item.submenu && item.isOpen\">\n            <div class=\"submenu\">\n                <ng-container *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: item.submenu }\"></ng-container>\n            </div>\n        </div>\n    </div>\n</ng-template>\n",
-            styles: [".menu{background-color:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column;min-width:176px;padding:4px 0;position:fixed;z-index:9999;overflow:auto}.menu--nested{width:90vw;margin:0 5vw}.menu .submenu{margin-left:24px}"]
+            template: "<div\n    class=\"menu menu--nested\"\n    [ngStyle]=\"{\n        'top': top + 'px',\n        'left': left + 'px'\n    }\">\n    <ng-container *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: items }\"></ng-container>\n</div>\n\n<ng-template #itemsTemplate let-items>\n    <div *ngFor=\"let item of items\">\n        <s-tiered-menu-item\n            *ngIf=\"!item.divider\"\n            [item]=\"item\"\n            [focused]=\"item === tieredMenuService.currentItem\"\n            [closeOnClick]=\"true\">\n        </s-tiered-menu-item>\n\n        <s-tiered-menu-divider *ngIf=\"item.divider\"></s-tiered-menu-divider>\n\n        <div *ngIf=\"item.submenu && item.isOpen\">\n            <div class=\"submenu\">\n                <ng-container *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: item.submenu }\"></ng-container>\n            </div>\n        </div>\n    </div>\n</ng-template>\n",
+            styles: [".menu{background-color:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column;min-width:176px;padding:4px 0;position:absolute;z-index:9999;overflow:auto;width:calc(100vw - 8px)}.menu .submenu{margin-left:24px}"]
         })
     ], TieredMenuNestedComponent);
     return TieredMenuNestedComponent;
 }());
 
 var TieredMenuComponent = /** @class */ (function () {
-    function TieredMenuComponent(_appRef, _componentFactoryResolver, _injector, tieredMenuService, _tieredMenuEventService) {
+    function TieredMenuComponent(_appRef, _componentFactoryResolver, _injector, _changeDetectorRef, tieredMenuService, _tieredMenuEventService) {
         this._appRef = _appRef;
         this._componentFactoryResolver = _componentFactoryResolver;
         this._injector = _injector;
+        this._changeDetectorRef = _changeDetectorRef;
         this.tieredMenuService = tieredMenuService;
         this._tieredMenuEventService = _tieredMenuEventService;
         this.top = 0;
@@ -16182,6 +16216,54 @@ var TieredMenuComponent = /** @class */ (function () {
         this.destroyRequest = new EventEmitter();
     }
     TieredMenuComponent_1 = TieredMenuComponent;
+    TieredMenuComponent.prototype.onResize = function () {
+        this._tieredMenuEventService.closeAllMenusEvent.emit();
+    };
+    TieredMenuComponent.prototype.onDocumentClick = function (event) {
+        // Closing menu when clicked outside.
+        var target = event.target;
+        var clickedInside = target.closest("s-tiered-menu-item") || target.closest("s-tiered-menu-divider");
+        if (!clickedInside) {
+            this._tieredMenuEventService.closeAllMenusEvent.emit();
+        }
+    };
+    TieredMenuComponent.prototype.onKeydownHandler = function (event) {
+        switch (event.key) {
+            case "Escape":
+                this._tieredMenuEventService.closeAllMenusEvent.emit();
+                break;
+            case " ":
+            case "Enter":
+                if (!this.tieredMenuService.currentItem.disabled) {
+                    this._tieredMenuEventService.selectItemEvent.emit(this.tieredMenuService.currentItem);
+                }
+                break;
+            case "ArrowLeft":
+                if (this.items.includes(this.tieredMenuService.currentItem)) {
+                    this._tieredMenuEventService.closeItemMenuEvent.emit(this.tieredMenuService.currentItem);
+                    this._changeDetectorRef.detectChanges();
+                }
+                break;
+            case "ArrowRight":
+                if (!this.tieredMenuService.currentItem.disabled && this.items.includes(this.tieredMenuService.currentItem)) {
+                    this._tieredMenuEventService.openItemMenuEvent.emit(this.tieredMenuService.currentItem);
+                    event.stopImmediatePropagation();
+                }
+                break;
+            case "ArrowUp":
+                if (!this.tieredMenuService.currentItem || this.items.includes(this.tieredMenuService.currentItem)) {
+                    this._tieredMenuEventService.decrementCurrentItemEvent.emit();
+                    event.stopImmediatePropagation();
+                }
+                break;
+            case "ArrowDown":
+                if (!this.tieredMenuService.currentItem || this.items.includes(this.tieredMenuService.currentItem)) {
+                    this._tieredMenuEventService.incrementCurrentItemEvent.emit();
+                    event.stopImmediatePropagation();
+                }
+                break;
+        }
+    };
     TieredMenuComponent.prototype.ngOnInit = function () {
         this.tieredMenuService.currentItems = this.items;
         this._subscribeEvents();
@@ -16241,8 +16323,7 @@ var TieredMenuComponent = /** @class */ (function () {
             // Setting the menu items.
             this._componentRef.instance.items = items;
             // Subscribe menu events.
-            this._componentRef.instance.destroyRequest
-                .subscribe(function (propagate) {
+            this._componentRef.instance.destroyRequest.subscribe(function (propagate) {
                 _this._destroy(propagate);
             });
             this._menuDivElement = domElem.querySelector(".menu");
@@ -16262,14 +16343,23 @@ var TieredMenuComponent = /** @class */ (function () {
         }
     };
     TieredMenuComponent.prototype._setMenuPosition = function (position) {
-        var _a;
+        var _a, _b;
+        var ITEM_HEIGHT = 37;
+        var DIVIDER_HEIGHT = 5;
+        var PADDING = 8;
         if (this._componentRef !== null) {
             var top_1 = position.top, right = position.right, bottom = position.bottom, left = position.left;
+            var itemsCount = (_a = this._componentRef.instance.items) === null || _a === void 0 ? void 0 : _a.reduce(function (count, item) {
+                return !item.divider ? count + 1 : count;
+            }, 0);
+            var dividersCount = (_b = this._componentRef.instance.items) === null || _b === void 0 ? void 0 : _b.reduce(function (count, item) {
+                return item.divider ? count + 1 : count;
+            }, 0);
             // I need to calculate the height of the component because the internal elements have not been created yet.
-            var menuHeight = ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) * 40;
+            var menuHeight = itemsCount * ITEM_HEIGHT + dividersCount * DIVIDER_HEIGHT + PADDING + 8;
             var menuWidth = this._menuDivElement.getBoundingClientRect().width;
-            var rightFreeSpace = document.body.clientWidth - right;
-            var bottomFreeSpace = document.body.clientHeight - bottom;
+            var rightFreeSpace = window.innerWidth - right;
+            var bottomFreeSpace = window.innerHeight - bottom;
             if (rightFreeSpace > menuWidth) {
                 this._componentRef.instance.left = right;
             }
@@ -16277,85 +16367,77 @@ var TieredMenuComponent = /** @class */ (function () {
                 this._componentRef.instance.left = left - menuWidth;
             }
             if (bottomFreeSpace <= menuHeight) {
-                this._componentRef.instance.top = top_1 - menuHeight;
+                this._componentRef.instance.top = Math.max(window.innerHeight - menuHeight, window.scrollY);
             }
             else {
-                this._componentRef.instance.top = top_1;
+                this._componentRef.instance.top = window.scrollY + top_1;
             }
         }
     };
     TieredMenuComponent.prototype._subscribeEvents = function () {
         var _this = this;
         // Increment current item event.
-        this._tieredMenuEventService.incrementCurrentItemEvent
-            .pipe(takeUntil(this._unsubscribe$))
-            .subscribe(function () {
+        this._tieredMenuEventService.incrementCurrentItemEvent.pipe(takeUntil(this._unsubscribe$)).subscribe(function () {
             _this._incrementCurItem();
         });
         // Decrement current item event.
-        this._tieredMenuEventService.decrementCurrentItemEvent
-            .pipe(takeUntil(this._unsubscribe$))
-            .subscribe(function () {
+        this._tieredMenuEventService.decrementCurrentItemEvent.pipe(takeUntil(this._unsubscribe$)).subscribe(function () {
             _this._decrementCurItem();
         });
         // Select item event.
-        this._tieredMenuEventService.selectItemEvent
-            .pipe(takeUntil(this._unsubscribe$))
-            .subscribe(function (item) {
+        this._tieredMenuEventService.selectItemEvent.pipe(takeUntil(this._unsubscribe$)).subscribe(function (item) {
             if (item.submenu) {
-                _this._tieredMenuEventService.emitOpenItemMenuEvent(item);
+                _this._tieredMenuEventService.openItemMenuEvent.emit(item);
             }
             else if (item.command) {
-                _this._tieredMenuEventService.emitCloseAllMenusEvent();
+                _this._tieredMenuEventService.closeAllMenusEvent.emit();
                 item.command();
             }
         });
         // Close all menus event.
-        this._tieredMenuEventService.closeAllMenusEvent
-            .pipe(takeUntil(this._unsubscribe$))
-            .subscribe(function () {
+        this._tieredMenuEventService.closeAllMenusEvent.pipe(takeUntil(this._unsubscribe$)).subscribe(function () {
             _this._destroy();
             _this.tieredMenuService.currentItem = null;
             _this.tieredMenuService.currentItems = _this.tieredMenuService.items;
+            _this.tieredMenuService.markAllItemsAsClosed(_this.tieredMenuService.items);
         });
         // Open item menu event.
-        this._tieredMenuEventService.openItemMenuEvent
-            .pipe(takeUntil(this._unsubscribe$))
-            .subscribe(function (item) {
-            item.isOpen = false;
+        this._tieredMenuEventService.openItemMenuEvent.pipe(takeUntil(this._unsubscribe$)).subscribe(function (item) {
             if (_this.tieredMenuService.currentItem) {
                 if (_this.tieredMenuService.currentItem.parent === item) {
                     return;
                 }
                 if (!_this.tieredMenuService.searchTheHierarchy(_this.tieredMenuService.currentItem.parent, item)) {
-                    var itemAux = _this.tieredMenuService.currentItem;
-                    while (itemAux.parent !== item.parent) {
-                        _this._tieredMenuEventService.emitCloseItemMenuEvent(itemAux);
-                        itemAux = itemAux.parent;
+                    var current = _this.tieredMenuService.currentItem;
+                    current.isOpen = false;
+                    while ((current === null || current === void 0 ? void 0 : current.parent) !== item.parent) {
+                        _this._tieredMenuEventService.closeItemMenuEvent.emit(current);
+                        _this._changeDetectorRef.detectChanges();
+                        current = current.parent;
                     }
-                }
-            }
-            if (item.submenu) {
-                if (!item.isOpen) {
-                    var _a = document
-                        .querySelector("#" + item.id)
-                        .getBoundingClientRect(), top_2 = _a.top, right = _a.right, left = _a.left, bottom = _a.bottom;
-                    var position = { top: top_2, right: right, left: left, bottom: bottom };
-                    if (_this.items.includes(item)) {
-                        _this._createMenu(item.submenu, position);
-                        _this.tieredMenuService.currentItems = item.submenu;
-                        _this.tieredMenuService.currentItem = item.submenu[0];
+                    if (current) {
+                        current.isOpen = false;
                     }
                 }
             }
+            if (item.submenu && !item.isOpen && _this.items.includes(item)) {
+                var _a = document.querySelector("#" + item.id).getBoundingClientRect(), top_2 = _a.top, right = _a.right, left = _a.left, bottom = _a.bottom;
+                var position = { top: top_2, right: right, left: left, bottom: bottom };
+                _this._createMenu(item.submenu, position);
+                _this.tieredMenuService.currentItems = item.submenu;
+                _this.tieredMenuService.currentItem = item.submenu[0];
+                item.isOpen = true;
+            }
         });
         // Close item menu event.
         this._tieredMenuEventService.closeItemMenuEvent
             .pipe(takeUntil(this._unsubscribe$))
             .subscribe(function (item) {
             var _a, _b;
-            if (_this.items.includes(item)) {
-                item.isOpen = false;
+            if (_this.items.some(function (i) { return i.id === item.id; })) {
+                if (item.parent) {
+                    item.parent.isOpen = false;
+                }
                 _this.tieredMenuService.currentItems = ((_b = (_a = item === null || item === void 0 ? void 0 : item.parent) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.submenu) || _this.tieredMenuService.items;
                 _this.tieredMenuService.currentItem = item.parent;
                 _this.destroyRequest.emit(false);
@@ -16367,108 +16449,106 @@ var TieredMenuComponent = /** @class */ (function () {
         { type: ApplicationRef },
         { type: ComponentFactoryResolver },
         { type: Injector },
+        { type: ChangeDetectorRef },
         { type: TieredMenuService },
         { type: TieredMenuEventService }
     ]; };
     __decorate([
         Output()
     ], TieredMenuComponent.prototype, "destroyRequest", void 0);
+    __decorate([
+        HostListener("window:resize")
+    ], TieredMenuComponent.prototype, "onResize", null);
+    __decorate([
+        HostListener("document:click", ["$event"])
+    ], TieredMenuComponent.prototype, "onDocumentClick", null);
+    __decorate([
+        HostListener("document:keydown", ["$event"])
+    ], TieredMenuComponent.prototype, "onKeydownHandler", null);
     TieredMenuComponent = TieredMenuComponent_1 = __decorate([
         Component({
             selector: "s-tiered-menu",
-            template: "<div class=\"menu\" [ngStyle]=\"{\n        'left': left + 'px',\n        'top': top + 'px'\n    }\">\n\n    <div *ngFor=\"let item of items\">\n        <s-tiered-menu-item\n            *ngIf=\"!item.divider\"\n            [item]=\"item\"\n            [focused]=\"item === tieredMenuService.currentItem\"\n            triggerEvent=\"hover\"\n            [closeOnClick]=\"false\">\n        </s-tiered-menu-item>\n        <s-tiered-menu-divider *ngIf=\"item.divider\"></s-tiered-menu-divider>\n    </div>\n</div>",
-            styles: [".menu{background-color:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column;min-width:176px;padding:4px 0;position:fixed;z-index:9999}"]
+            template: "<div\n    class=\"menu\"\n    [ngStyle]=\"{\n        'left': left + 'px',\n        'top': top + 'px'\n    }\">\n\n    <div *ngFor=\"let item of items\">\n        <s-tiered-menu-item\n            *ngIf=\"!item.divider\"\n            [item]=\"item\"\n            [focused]=\"item === tieredMenuService.currentItem\"\n            [highlight]=\"item.isOpen\"\n            triggerEvent=\"hover\"\n            [closeOnClick]=\"false\">\n        </s-tiered-menu-item>\n        <s-tiered-menu-divider *ngIf=\"item.divider\"></s-tiered-menu-divider>\n    </div>\n</div>",
+            styles: [".menu{background-color:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column;max-height:100vh;min-width:176px;padding:4px 0;overflow-y:auto;position:absolute;z-index:9999}"]
         })
     ], TieredMenuComponent);
     return TieredMenuComponent;
 }());
 
+var TieredMenuGlobalService = /** @class */ (function () {
+    function TieredMenuGlobalService() {
+    }
+    TieredMenuGlobalService = __decorate([
+        Injectable()
+    ], TieredMenuGlobalService);
+    return TieredMenuGlobalService;
+}());
+
 var TieredMenuDirective = /** @class */ (function () {
-    function TieredMenuDirective(_elementRef, _appRef, _componentFactoryResolver, _injector, _tieredMenuEventService, _tieredMenuService) {
+    function TieredMenuDirective(_elementRef, _appRef, _componentFactoryResolver, _injector, _tieredMenuEventService, _tieredMenuService, _tieredMenuGlobalService, _changeDetectorRef) {
         this._elementRef = _elementRef;
         this._appRef = _appRef;
         this._componentFactoryResolver = _componentFactoryResolver;
         this._injector = _injector;
         this._tieredMenuEventService = _tieredMenuEventService;
         this._tieredMenuService = _tieredMenuService;
+        this._tieredMenuGlobalService = _tieredMenuGlobalService;
+        this._changeDetectorRef = _changeDetectorRef;
+        this.items = [];
+        this.triggerEvent = "click";
         this._componentRef = null;
         this._isNested = false;
         this._isOpen = false;
         this._unsubscribe$ = new Subject();
-        this.alwaysOpen = false;
-        this.triggerEvent = "click";
     }
+    TieredMenuDirective.prototype.onClick = function (event) {
+        var _a;
+        if (this.triggerEvent === "click" && ((_a = this._tieredMenuService.items) === null || _a === void 0 ? void 0 : _a.length) > 0 && !this._isOpen) {
+            this._lastActiveElement = document.activeElement;
+            this._createMenu();
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    };
     TieredMenuDirective.prototype.ngOnInit = function () {
-        this._tieredMenuService.items = this._tieredMenuService.normalizeData(this.items);
-        this._tieredMenuService.currentItems = this._tieredMenuService.items;
-        this._tieredMenuService.currentItem = this._tieredMenuService.items[0];
+        this._updateServiceItems();
         this._subscribeEvents();
     };
-    TieredMenuDirective.prototype.ngAfterViewInit = function () {
-        var _this = this;
-        // setTimeout to create the menu after creating the elements.
-        if (this.alwaysOpen) {
-            setTimeout(function () {
-                _this._createMenu();
-            }, 0);
+    TieredMenuDirective.prototype.ngDoCheck = function () {
+        if (!this.previousItems) {
+            this.previousItems = this._tieredMenuService.cloneItems(this.items);
+        }
+        ;
+        var hasChanges = false;
+        if (this.items.length !== this.previousItems.length) {
+            hasChanges = true;
+        }
+        else {
+            for (var i = 0; i < this.items.length; i++) {
+                if (!this._compareItems(this.items[i], this.previousItems[i])) {
+                    hasChanges = true;
+                    break;
+                }
+            }
         }
+        if (hasChanges) {
+            this._updateServiceItems();
+            this._changeDetectorRef.detectChanges();
+            this._rebuildMenu();
+        }
+        this.previousItems = this._tieredMenuService.cloneItems(this.items);
     };
     TieredMenuDirective.prototype.ngOnDestroy = function () {
         this._unsubscribe$.next();
         this._unsubscribe$.complete();
         this._destroy();
     };
-    TieredMenuDirective.prototype.onResize = function () {
-        if (!this.alwaysOpen) {
-            this._tieredMenuEventService.emitCloseAllMenusEvent();
-        }
-    };
-    TieredMenuDirective.prototype.onKeydownHandler = function (event) {
-        if (!this._isOpen)
-            return;
-        switch (event.key) {
-            case "Escape":
-                this._tieredMenuEventService.emitCloseAllMenusEvent();
-                break;
-            case " ":
-            case "Enter":
-                this._tieredMenuEventService.emitSelectItemEvent(this._tieredMenuService.currentItem);
-                break;
-            case "ArrowLeft":
-                // When nested I need a reference to the current item's parent item, otherwise just the current item.
-                this._tieredMenuEventService.emitCloseItemMenuEvent(this._isNested ? this._tieredMenuService.currentItem.parent : this._tieredMenuService.currentItem);
-                break;
-            case "ArrowRight":
-                this._tieredMenuEventService.emitOpenItemMenuEvent(this._tieredMenuService.currentItem);
-                break;
-            case "ArrowUp":
-                this._tieredMenuEventService.emitDecrementCurrentItemEvent();
-                break;
-            case "ArrowDown":
-                this._tieredMenuEventService.emitIncrementCurrentItemEvent();
-                break;
-        }
-    };
-    TieredMenuDirective.prototype.onClick = function (event) {
-        if (this.triggerEvent === "click" && this.items && this.items && !this._isOpen) {
-            this._lastActiveElement = document.activeElement;
-            this._createMenu();
-            event.preventDefault();
-            event.stopPropagation();
-        }
-    };
-    TieredMenuDirective.prototype.onDocumentClick = function (event) {
-        // Closing menu when clicked outside.
-        var target = event.target;
-        var clickedInside = target.closest("s-tiered-menu-item") || target.closest("s-tiered-menu-divider");
-        if (!clickedInside) {
-            this._tieredMenuEventService.emitCloseAllMenusEvent();
-        }
-    };
     TieredMenuDirective.prototype._createMenu = function () {
-        var _a;
-        if (!this._componentRef && this.items) {
-            (_a = this._lastActiveElement) === null || _a === void 0 ? void 0 : _a.blur();
+        var _a, _b, _c;
+        if (!this._componentRef && ((_a = this._tieredMenuService.items) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            (_b = this._tieredMenuGlobalService.lastInstance) === null || _b === void 0 ? void 0 : _b._destroy();
+            this._tieredMenuGlobalService.lastInstance = this;
+            (_c = this._lastActiveElement) === null || _c === void 0 ? void 0 : _c.blur();
             this._isOpen = true;
             this._isNested = document.body.clientWidth < 600;
             this._isNested ? this._createNestedMenu() : this._createTieredMenu();
@@ -16476,145 +16556,176 @@ var TieredMenuDirective = /** @class */ (function () {
     };
     TieredMenuDirective.prototype._createTieredMenu = function () {
         var _this = this;
-        if (!this._componentRef && this.items) {
+        var _a;
+        if (!this._componentRef && ((_a = this._tieredMenuService.items) === null || _a === void 0 ? void 0 : _a.length) > 0) {
             var componentFactory = this._componentFactoryResolver.resolveComponentFactory(TieredMenuComponent);
             this._componentRef = componentFactory.create(this._injector);
             this._appRef.attachView(this._componentRef.hostView);
             var domElem = this._componentRef.hostView.rootNodes[0];
             document.body.appendChild(domElem);
             this._setMenuComponentProperties();
-            this._componentRef.instance.destroyRequest
-                .pipe(takeUntil(this._unsubscribe$))
-                .subscribe(function () {
+            this._componentRef.instance.destroyRequest.pipe(takeUntil(this._unsubscribe$)).subscribe(function () {
                 _this._destroy();
             });
-            this._menuDivElement = domElem.querySelector(".menu");
             this._setMenuPosition();
         }
     };
     TieredMenuDirective.prototype._createNestedMenu = function () {
-        if (!this._componentRef && this.items) {
+        var _a;
+        if (!this._componentRef && ((_a = this._tieredMenuService.items) === null || _a === void 0 ? void 0 : _a.length) > 0) {
             var componentFactory = this._componentFactoryResolver.resolveComponentFactory(TieredMenuNestedComponent);
             this._componentRef = componentFactory.create(this._injector);
             this._appRef.attachView(this._componentRef.hostView);
             var domElem = this._componentRef.hostView.rootNodes[0];
             document.body.appendChild(domElem);
             this._setMenuComponentProperties();
-            this._menuDivElement = domElem.querySelector(".menu");
             this._setMenuPosition();
         }
     };
     TieredMenuDirective.prototype._destroy = function () {
-        var _a;
-        if (this._componentRef !== null && !this.alwaysOpen) {
+        if (this._componentRef) {
             this._isOpen = false;
             window.clearTimeout(this._showTimeout);
             this._appRef.detachView(this._componentRef.hostView);
             this._componentRef.destroy();
             this._componentRef = null;
-            this._menuDivElement = null;
-            (_a = this._lastActiveElement) === null || _a === void 0 ? void 0 : _a.focus();
             this._tieredMenuService.currentItems = this._tieredMenuService.items;
             this._tieredMenuService.currentItem = this._tieredMenuService.items[0];
+            this._tieredMenuEventService.closeAllMenusEvent.emit();
         }
     };
     TieredMenuDirective.prototype._setMenuPosition = function () {
+        var _a, _b;
+        var ITEM_HEIGHT = 37;
+        var ITEM_WIDTH = 176;
+        var DIVIDER_HEIGHT = 5;
+        var PADDING = 8;
+        var MARGIN = 4;
         if (this._componentRef !== null) {
-            var _a = this._elementRef.nativeElement.getBoundingClientRect(), right = _a.right, bottom = _a.bottom, left = _a.left;
-            var menuWidth = this._menuDivElement.getBoundingClientRect().width;
-            var rightFreeSpace = document.body.clientWidth - right;
-            var topPosition = bottom + 2;
-            this._componentRef.instance.top = topPosition;
-            if (!this._isNested) {
-                if (rightFreeSpace > menuWidth) {
-                    this._componentRef.instance.left = left;
-                }
-                else {
-                    this._componentRef.instance.left = left - menuWidth;
-                }
+            this._componentRef.instance.top = 8;
+            var _c = this._elementRef.nativeElement.getBoundingClientRect(), bottom = _c.bottom, left = _c.left, right = _c.right;
+            var itemsCount = (_a = this._componentRef.instance.items) === null || _a === void 0 ? void 0 : _a.reduce(function (count, item) {
+                return !item.divider ? count + 1 : count;
+            }, 0);
+            var dividersCount = (_b = this._componentRef.instance.items) === null || _b === void 0 ? void 0 : _b.reduce(function (count, item) {
+                return item.divider ? count + 1 : count;
+            }, 0);
+            var menuHeight = itemsCount * ITEM_HEIGHT + dividersCount * DIVIDER_HEIGHT + PADDING + MARGIN;
+            var rightFreeSpace = window.innerWidth - right;
+            var bottomFreeSpace = window.innerHeight - bottom;
+            this._componentRef.instance.top = bottom;
+            this._componentRef.instance.left = left;
+            if (bottomFreeSpace <= menuHeight) {
+                this._componentRef.instance.top = Math.max(bottom - menuHeight, 0);
+            }
+            else {
+                this._componentRef.instance.top = bottom + MARGIN;
+            }
+            if (rightFreeSpace > 176) {
+                this._componentRef.instance.left = left;
             }
             else {
-                // setting the maximum menu size to ensure its content is always visible. 10px margin.
-                this._componentRef.instance.maxHeight = window.innerHeight - topPosition - 10;
+                this._componentRef.instance.left = right - ITEM_WIDTH;
+            }
+            if (this._isNested) {
+                this._componentRef.instance.left = MARGIN;
             }
         }
     };
     TieredMenuDirective.prototype._setMenuComponentProperties = function () {
         if (this._componentRef != null) {
-            this._componentRef.instance.items = this.items;
+            this._componentRef.instance.items = this._tieredMenuService.items;
         }
     };
     TieredMenuDirective.prototype._subscribeEvents = function () {
         var _this = this;
-        this._tieredMenuEventService.closeAllMenusEvent
-            .pipe(takeUntil(this._unsubscribe$))
-            .subscribe(function () {
-            _this.items = _this._tieredMenuService.markAllItemsAsClosed(_this.items);
+        this._tieredMenuEventService.closeAllMenusEvent.pipe(takeUntil(this._unsubscribe$)).subscribe(function () {
+            _this._tieredMenuService.items = _this._tieredMenuService.markAllItemsAsClosed(_this._tieredMenuService.items);
             _this._destroy();
         });
     };
+    TieredMenuDirective.prototype._compareItems = function (item1, item2) {
+        return JSON.stringify(item1) === JSON.stringify(item2);
+    };
+    TieredMenuDirective.prototype._rebuildMenu = function () {
+        this._destroy();
+    };
+    TieredMenuDirective.prototype._updateServiceItems = function () {
+        this._tieredMenuService.items = this._tieredMenuService.normalizeData(this.items);
+        this._tieredMenuService.currentItems = this._tieredMenuService.items;
+        this._tieredMenuService.currentItem = this._tieredMenuService.items[0];
+    };
     TieredMenuDirective.ctorParameters = function () { return [
         { type: ElementRef },
         { type: ApplicationRef },
         { type: ComponentFactoryResolver },
         { type: Injector },
         { type: TieredMenuEventService },
-        { type: TieredMenuService }
+        { type: TieredMenuService },
+        { type: TieredMenuGlobalService },
+        { type: ChangeDetectorRef }
     ]; };
     __decorate([
         Input()
     ], TieredMenuDirective.prototype, "items", void 0);
-    __decorate([
-        Input()
-    ], TieredMenuDirective.prototype, "alwaysOpen", void 0);
     __decorate([
         Input()
     ], TieredMenuDirective.prototype, "triggerEvent", void 0);
-    __decorate([
-        HostListener("window:resize")
-    ], TieredMenuDirective.prototype, "onResize", null);
-    __decorate([
-        HostListener("document:keydown", ["$event"])
-    ], TieredMenuDirective.prototype, "onKeydownHandler", null);
     __decorate([
         HostListener("click", ["$event"])
     ], TieredMenuDirective.prototype, "onClick", null);
-    __decorate([
-        HostListener("document:click", ["$event"])
-    ], TieredMenuDirective.prototype, "onDocumentClick", null);
     TieredMenuDirective = __decorate([
         Directive({
             selector: "[sTieredMenu]",
+            providers: [TieredMenuEventService, TieredMenuService],
         })
     ], TieredMenuDirective);
     return TieredMenuDirective;
 }());
 
+var TieredMenuDividerComponent = /** @class */ (function () {
+    function TieredMenuDividerComponent() {
+    }
+    TieredMenuDividerComponent = __decorate([
+        Component({
+            selector: "s-tiered-menu-divider",
+            template: "<div class=\"divider\"></div>",
+            styles: [".divider{margin:2px 0;height:1px;background-color:#ccc}"]
+        })
+    ], TieredMenuDividerComponent);
+    return TieredMenuDividerComponent;
+}());
+
 var TieredMenuItemComponent = /** @class */ (function () {
     function TieredMenuItemComponent(_tieredMenuEventService) {
         this._tieredMenuEventService = _tieredMenuEventService;
         this.focused = false;
+        this.highlight = false;
         this.triggerEvent = "click";
         this.closeOnClick = false;
     }
     TieredMenuItemComponent.prototype.onClick = function () {
+        if (this.item.disabled)
+            return;
         if (this.item.submenu) {
             if (!this.item.isOpen) {
-                this._tieredMenuEventService.emitOpenItemMenuEvent(this.item);
+                this._tieredMenuEventService.openItemMenuEvent.emit(this.item);
             }
             else if (this.closeOnClick) {
-                this._tieredMenuEventService.emitCloseItemMenuEvent(this.item);
+                this._tieredMenuEventService.closeItemMenuEvent.emit(this.item);
             }
         }
         else {
-            this._tieredMenuEventService.emitSelectItemEvent(this.item);
+            this._tieredMenuEventService.selectItemEvent.emit(this.item);
         }
     };
     TieredMenuItemComponent.prototype.onMouseEnter = function () {
         var _this = this;
+        if (this.item.disabled)
+            return;
         if (this.triggerEvent === "hover" && !this.item.isOpen) {
             this._showTimeout = window.setTimeout(function () {
-                _this._tieredMenuEventService.emitOpenItemMenuEvent(_this.item);
+                _this._tieredMenuEventService.openItemMenuEvent.emit(_this.item);
             }, 300);
         }
     };
@@ -16630,6 +16741,9 @@ var TieredMenuItemComponent = /** @class */ (function () {
     __decorate([
         Input()
     ], TieredMenuItemComponent.prototype, "focused", void 0);
+    __decorate([
+        Input()
+    ], TieredMenuItemComponent.prototype, "highlight", void 0);
     __decorate([
         Input()
     ], TieredMenuItemComponent.prototype, "triggerEvent", void 0);
@@ -16649,26 +16763,13 @@ var TieredMenuItemComponent = /** @class */ (function () {
     TieredMenuItemComponent = __decorate([
         Component({
             selector: "s-tiered-menu-item",
-            template: "<div\n    [id]=\"item.id\"\n    class=\"tiered-menu-item\"\n    [ngClass]=\"{\n        'tiered-menu-item--open': item.isOpen,\n        'tiered-menu-item--focused': focused\n    }\">\n    <div class=\"tiered-menu-item-content\">\n        <span class=\"icon\" [ngClass]=\"item.iconClass\"></span>\n        <span class=\"label\">{{ item.label }}</span>\n    </div>\n    <span\n        *ngIf=\"item.submenu\"\n        class=\"submenu-icon\"\n        [ngClass]=\"{\n            'fas': true,\n            'fa-chevron-left': item.isOpen,\n            'fa-chevron-right': !item.isOpen\n        }\">\n    </span>\n</div>",
-            styles: [".tiered-menu-item{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding:8px 16px;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.tiered-menu-item .tiered-menu-item-content .label{margin:0 12px}.tiered-menu-item:hover{background-color:#e9e6e6}.tiered-menu-item--focused{background-color:#ccc!important}.tiered-menu-item--open{background-color:#e4e2e2}"]
+            template: "<div\n    [id]=\"item.id\"\n    class=\"tiered-menu-item\"\n    [ngClass]=\"{\n        'tiered-menu-item--open': item.isOpen,\n        'tiered-menu-item--focused': focused,\n        'tiered-menu-item--disabled': item.disabled\n    }\">\n    <div class=\"tiered-menu-item-content\">\n        <span class=\"icon\" [ngClass]=\"item.iconClass\"></span>\n        <span class=\"label\">{{ item.label }}</span>\n    </div>\n    <span\n        *ngIf=\"item.submenu\"\n        class=\"submenu-icon\"\n        [ngClass]=\"{\n            'fas': true,\n            'fa-chevron-left': item.isOpen,\n            'fa-chevron-right': !item.isOpen\n        }\">\n    </span>\n</div>",
+            styles: [".tiered-menu-item{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding:8px 16px;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.tiered-menu-item .tiered-menu-item-content .label{margin:0 12px}.tiered-menu-item:hover{background-color:#e9e6e6}.tiered-menu-item--focused{background-color:#ccc!important}.tiered-menu-item--open{background-color:#e4e2e2}.tiered-menu-item--disabled{opacity:50%;cursor:default}"]
         })
     ], TieredMenuItemComponent);
     return TieredMenuItemComponent;
 }());
 
-var TieredMenuDividerComponent = /** @class */ (function () {
-    function TieredMenuDividerComponent() {
-    }
-    TieredMenuDividerComponent = __decorate([
-        Component({
-            selector: "s-tiered-menu-divider",
-            template: "<div class=\"divider\"></div>",
-            styles: [".divider{margin:2px 0;height:1px;background-color:#ccc}"]
-        })
-    ], TieredMenuDividerComponent);
-    return TieredMenuDividerComponent;
-}());
-
 var TieredMenuModule = /** @class */ (function () {
     function TieredMenuModule() {
     }
@@ -16685,10 +16786,7 @@ var TieredMenuModule = /** @class */ (function () {
                 TieredMenuDividerComponent,
             ],
             exports: [TieredMenuDirective],
-            providers: [
-                TieredMenuEventService,
-                TieredMenuService,
-            ],
+            providers: [TieredMenuGlobalService],
         })
     ], TieredMenuModule);
     return TieredMenuModule;
@@ -16789,6 +16887,7 @@ var VERTICAL = "vertical";
 var MIN_ITEM_SIZE = 200;
 var TimelineComponent = /** @class */ (function () {
     function TimelineComponent() {
+        this.highlightActiveItem = true;
         this.direction = HORIZONTAL;
         this.collapsable = true;
         this.counterLabel = "items";
@@ -16827,6 +16926,9 @@ var TimelineComponent = /** @class */ (function () {
     __decorate([
         Input()
     ], TimelineComponent.prototype, "activeIndex", void 0);
+    __decorate([
+        Input()
+    ], TimelineComponent.prototype, "highlightActiveItem", void 0);
     __decorate([
         Input()
     ], TimelineComponent.prototype, "direction", void 0);
@@ -16842,7 +16944,7 @@ var TimelineComponent = /** @class */ (function () {
     TimelineComponent = __decorate([
         Component({
             selector: "s-timeline",
-            template: "<div *ngIf=\"changeToVertical(); then vertical else horizontal\"></div>\n\n<ng-template #horizontal>\n   <s-horizontal-timeline *ngIf=\"items?.length\"\n      [items]=\"items\"\n      [activeIndex]=\"activeIndex\">\n   </s-horizontal-timeline>\n</ng-template>\n\n<ng-template #vertical>\n   <s-vertical-timeline *ngIf=\"items?.length\"\n      [items]=\"items\"\n      [activeIndex]=\"activeIndex\"\n      [counterLabel]=\"counterLabel\"\n      [collapsable]=\"collapsable\">\n   </s-vertical-timeline>\n</ng-template>"
+            template: "<div *ngIf=\"changeToVertical(); then vertical else horizontal\"></div>\n\n<ng-template #horizontal>\n   <s-horizontal-timeline *ngIf=\"items?.length\"\n      [items]=\"items\"\n      [activeIndex]=\"activeIndex\"\n      [highlightActiveItem]=\"highlightActiveItem\">\n   </s-horizontal-timeline>\n</ng-template>\n\n<ng-template #vertical>\n   <s-vertical-timeline *ngIf=\"items?.length\"\n      [items]=\"items\"\n      [activeIndex]=\"activeIndex\"\n      highlightActiveItem=\"hi\"\n      [counterLabel]=\"counterLabel\"\n      [collapsable]=\"collapsable\"\n      [highlightActiveItem]=\"highlightActiveItem\">\n   </s-vertical-timeline>\n</ng-template>"
         })
     ], TimelineComponent);
     return TimelineComponent;
@@ -16857,14 +16959,17 @@ var TimelineIconItemComponent = /** @class */ (function () {
     __decorate([
         Input()
     ], TimelineIconItemComponent.prototype, "isActive", void 0);
+    __decorate([
+        Input()
+    ], TimelineIconItemComponent.prototype, "highlightActive", 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         [ngStyle]=\"{ backgroundColor: item.color }\">\n         <ng-content *ngIf=\"item.icon; then icon_content; else label_text_content\"></ng-content>\n         <ng-template #icon_content>\n            <span [ngClass]=\"item.icon\"></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}"]
+            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         'timeline__icon-item--active--highlight': isActive && highlightActive\n      }\">\n      <div\n         class=\"timeline__icon-item__icon\"\n         [pTooltip]=\"item.tooltip\"\n         tooltipPosition=\"top\"\n         [ngStyle]=\"{ backgroundColor: item.color }\">\n         <ng-content *ngIf=\"item.icon; then icon_content; else label_text_content\"></ng-content>\n         <ng-template #icon_content>\n            <span [ngClass]=\"item.icon\"></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--highlight .timeline__icon-item__icon{font-size:20px;height:40px;padding:10px;width:40px}.timeline__icon-item.timeline__icon-item--active--highlight .timeline__icon-item__icon .timeline__icon-item__icon__label{font-size:22px}.timeline__icon-item.timeline__icon-item--active .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;
@@ -16896,11 +17001,14 @@ var HorizontalTimelineComponent = /** @class */ (function () {
     __decorate([
         Input()
     ], HorizontalTimelineComponent.prototype, "activeIndex", void 0);
+    __decorate([
+        Input()
+    ], HorizontalTimelineComponent.prototype, "highlightActiveItem", 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}"]
+            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               [highlightActive]=\"highlightActiveItem\">\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;line-clamp:4;-webkit-line-clamp:4;-webkit-box-orient:vertical}.horizontal-timeline .horizontal-timeline__item.horizontal-timeline__item--small .horizontal-timeline__item__icon-wrapper .horizontal-timeline__item__icon-wrapper__line{width:calc(50% - 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--highlight .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;
@@ -16956,6 +17064,9 @@ var VerticalTimelineComponent = /** @class */ (function () {
     __decorate([
         Input()
     ], VerticalTimelineComponent.prototype, "activeIndex", null);
+    __decorate([
+        Input()
+    ], VerticalTimelineComponent.prototype, "highlightActiveItem", void 0);
     __decorate([
         Input()
     ], VerticalTimelineComponent.prototype, "items", void 0);
@@ -16968,7 +17079,7 @@ var VerticalTimelineComponent = /** @class */ (function () {
     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>",
+            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         [highlightActive]=\"highlightActiveItem\"\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);
@@ -17057,13 +17168,16 @@ var VerticalItemsComponent = /** @class */ (function () {
     __decorate([
         Input()
     ], VerticalItemsComponent.prototype, "isActive", void 0);
+    __decorate([
+        Input()
+    ], VerticalItemsComponent.prototype, "highlightActive", 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>",
+            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               [highlightActive]=\"highlightActive\">\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);
@@ -17632,5 +17746,5 @@ var fallback = {
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionModule, AccordionPanelComponent, AngularComponentsModule, AutocompleteField, BadgeColors, BadgeComponent, BadgeModule, BaseFieldComponent, BignumberField, BignumberInputDirective, BignumberInputModule, BooleanField, BooleanOptionsLabel, BreadcrumbComponent, BreadcrumbModule, Breakpoints, ButtonComponent, ButtonModule, ButtonPriority, ButtonSize, CalendarField, CalendarLocaleOptions, CalendarMaskDirective, CalendarMaskModule, CardComponent, CardModule, CardTemplateTypes, ChipsField, CodeEditorModule, CollapseLinkComponent, CollapseLinkModule, ControlErrorsComponent, ControlErrorsModule, CountryPhonePickerComponent, CountryPhonePickerModule, CurrencyField, CustomFieldsComponent, CustomFieldsModule, CustomFieldsService, DEFAULT_CALENDAR_LOCALE_OPTIONS, DEFAULT_LOCALE_OPTIONS, DEFAULT_NUMBER_LOCALE_OPTIONS, DebounceUtils, DoubleClickDirective, DynamicConfig, DynamicFormComponent, DynamicFormModule, DynamicType, EditableOverlayDirective, EditableOverlayModule, EmptyStateComponent, EmptyStateModule, EnumBadgeColors, EnumColumnFieldType, EnumSeverity, ExportUtils, Field, FieldType, Fieldset, FileUploadComponent, FileUploadModule, FileValidation, FormField, GanttComponent, GanttModule, GlobalSearchComponent, GlobalSearchDropdownItemComponent, GlobalSearchModule, GlobalSearchSizeEnum, HostProjectConfigsInjectionToken, IAInsightComponent, IAInsightModule, IAInsightTemplateTypes, ImageCropperComponent, ImageCropperModule, ImageCropperService, InfoSignDirective, InfoSignModule, KanbanComponent, KanbanModule, KanbanTemplateTypes, 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, Ordination, PanelComponent, PanelModule, PasswordField, PasswordStrengthComponent, PasswordStrengthDirective, PasswordStrengthModule, PasswordStrengthPositions, PasswordStrengths, ProductHeaderComponent, ProductHeaderModule, ProfilePicturePickerComponent, ProfilePicturePickerModule, ProgressBarColors, ProgressBarComponent, ProgressBarModule, RadioButtonField, RatingScaleComponent, RatingScaleModule, RationButtonOption, RowTogllerDirective, SVGFactoryDirective, SVGFactoryModule, Section, SelectButtonComponent, SelectButtonModule, SelectField, SelectOption, SidebarComponent, SidebarModule, SlidePanelComponent, SlidePanelModule, SplitButtonComponent, SplitButtonModule, SplitButtonType, StatsCardComponent, StatsCardModule, StepState, StepsComponent, StepsModule, Structure, SwitchComponent, SwitchModule, TableFrozenPositionDirective, TableHeaderCheckboxComponent, TableHeaderCheckboxModule, TableModule, TaxCalculationLanguageConfigs, TextAreaField, TextField, Themes, ThumbnailComponent, ThumbnailModule, ThumbnailSize, TieredMenuDirective, TieredMenuModule, TileComponent, TileModule, TimelineComponent, TimelineItem, TimelineItemSeverity, TimelineItemSize, TimelineModule, TokenListComponent, TokenListModule, TooltipModule, TooltipPosition, ValidateErrors, ViewMode, WorkspaceSwitchComponent, WorkspaceSwitchModule, countries, fallback, TooltipComponent as ɵa, TooltipDirective as ɵb, LocalizedNumberInputModule as ɵba, NumberInputModule as ɵbb, NumberFieldComponent as ɵbc, CurrencyFieldModule as ɵbd, CurrencyFieldComponent as ɵbe, NumberFieldModule$1 as ɵbf, BignumberInputModule as ɵbg, BignumberFieldComponent as ɵbh, AutocompleteFieldComponent as ɵbi, BooleanFieldComponent as ɵbj, BooleanSwitchFieldComponent as ɵbk, CalendarFieldComponent as ɵbl, ChipsFieldComponent as ɵbm, CountryPhonePickerFieldComponent as ɵbn, DynamicFieldComponent as ɵbo, DynamicFormDirective as ɵbp, FieldsetComponent as ɵbq, FileUploadComponent$1 as ɵbr, LookupFieldComponent as ɵbs, PasswordFieldComponent as ɵbt, RadioButtonComponent as ɵbu, RowComponent as ɵbv, SectionComponent as ɵbw, SelectFieldComponent as ɵbx, SliderFieldComponent as ɵby, TextAreaFieldComponent as ɵbz, TemplateDirective as ɵc, TextAreaIAFieldComponent as ɵca, IAssistService as ɵcb, DecimalField as ɵcd, SideTableComponent as ɵce, ThumbnailService as ɵcf, InfiniteScrollModule as ɵcg, InfiniteScrollDirective as ɵch, IAInsightSidebarComponent as ɵci, IAInsightCardComponent as ɵcj, IAInsightCardLoaderComponent as ɵck, StructureModule as ɵcl, HeaderComponent as ɵcm, FooterComponent as ɵcn, KanbanEventService as ɵco, KanbanItemComponent as ɵcp, KanbanColumnComponent as ɵcq, KanbanItemDraggingComponent as ɵcr, NumberLocaleOptions as ɵcs, BorderButtonModule as ɵct, BorderButtonComponent as ɵcu, ProgressBarDeterminateComponent as ɵcv, ProgressBarIndeterminateComponent as ɵcw, SelectButtonItemComponent as ɵcx, SlidePanelService as ɵcy, TieredMenuEventService as ɵcz, TemplateModule as ɵd, TieredMenuService as ɵda, TieredMenuComponent as ɵdb, TieredMenuNestedComponent as ɵdc, TieredMenuItemComponent as ɵdd, TieredMenuDividerComponent as ɵde, TimelineItemModule as ɵdf, TimelineIconItemComponent as ɵdg, HorizontalTimelineModule as ɵdh, HorizontalTimelineComponent as ɵdi, VerticalTimelineModule as ɵdj, VerticalTimelineComponent as ɵdk, RangeLineComponent as ɵdl, CollapseOptionComponent as ɵdm, CollapsedItemsComponent as ɵdn, VerticalItemsComponent as ɵdo, CustomTranslationsModule as ɵe, CodeEditorComponent as ɵf, CoreFacade as ɵg, CodeMirror6Core as ɵh, CountryPhonePickerService as ɵi, LocalizedCurrencyImpurePipe as ɵj, LocalizedBignumberPipe as ɵk, LocalizedBignumberImpurePipe as ɵl, NumericPipe as ɵm, NumericService as ɵn, EmptyStateGoBackComponent as ɵo, IAssistIconComponent as ɵp, SeniorIconComponent as ɵq, DotsIndicatorComponent as ɵr, LoadingIndicatorComponent as ɵs, FileUploadService as ɵt, InfoSignComponent as ɵu, TableColumnsComponent as ɵv, TablePagingComponent as ɵw, TextFieldModule as ɵx, TextFieldComponent as ɵy, NumberFieldModule as ɵz };
+export { AccordionComponent, AccordionModule, AccordionPanelComponent, AngularComponentsModule, AutocompleteField, BadgeColors, BadgeComponent, BadgeModule, BaseFieldComponent, BignumberField, BignumberInputDirective, BignumberInputModule, BooleanField, BooleanOptionsLabel, BreadcrumbComponent, BreadcrumbModule, Breakpoints, ButtonComponent, ButtonModule, ButtonPriority, ButtonSize, CalendarField, CalendarLocaleOptions, CalendarMaskDirective, CalendarMaskModule, CardComponent, CardModule, CardTemplateTypes, ChipsField, CodeEditorModule, CollapseLinkComponent, CollapseLinkModule, ControlErrorsComponent, ControlErrorsModule, CountryPhonePickerComponent, CountryPhonePickerModule, CurrencyField, CustomFieldsComponent, CustomFieldsModule, CustomFieldsService, DEFAULT_CALENDAR_LOCALE_OPTIONS, DEFAULT_LOCALE_OPTIONS, DEFAULT_NUMBER_LOCALE_OPTIONS, DebounceUtils, DoubleClickDirective, DynamicConfig, DynamicFormComponent, DynamicFormModule, DynamicType, EditableOverlayDirective, EditableOverlayModule, EmptyStateComponent, EmptyStateModule, EnumBadgeColors, EnumColumnFieldType, EnumSeverity, ExportUtils, Field, FieldType, Fieldset, FileUploadComponent, FileUploadModule, FileValidation, FormField, GanttComponent, GanttModule, GlobalSearchComponent, GlobalSearchDropdownItemComponent, GlobalSearchModule, GlobalSearchSizeEnum, HostProjectConfigsInjectionToken, IAInsightComponent, IAInsightModule, IAInsightTemplateTypes, ImageCropperComponent, ImageCropperModule, ImageCropperService, InfoSignDirective, InfoSignModule, KanbanComponent, KanbanModule, KanbanTemplateTypes, 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, Ordination, PanelComponent, PanelModule, PasswordField, PasswordStrengthComponent, PasswordStrengthDirective, PasswordStrengthModule, PasswordStrengthPositions, PasswordStrengths, ProductHeaderComponent, ProductHeaderModule, ProfilePicturePickerComponent, ProfilePicturePickerModule, ProgressBarColors, ProgressBarComponent, ProgressBarModule, RadioButtonField, RatingScaleComponent, RatingScaleModule, RationButtonOption, RowTogllerDirective, SVGFactoryDirective, SVGFactoryModule, Section, SelectButtonComponent, SelectButtonModule, SelectField, SelectOption, SidebarComponent, SidebarModule, SlidePanelComponent, SlidePanelModule, SplitButtonComponent, SplitButtonModule, SplitButtonType, StatsCardComponent, StatsCardModule, StepState, StepsComponent, StepsModule, Structure, SwitchComponent, SwitchModule, TableFrozenPositionDirective, TableHeaderCheckboxComponent, TableHeaderCheckboxModule, TableModule, TaxCalculationLanguageConfigs, TextAreaField, TextField, Themes, ThumbnailComponent, ThumbnailModule, ThumbnailSize, TieredMenuDirective, TieredMenuModule, TileComponent, TileModule, TimelineComponent, TimelineItem, TimelineItemSeverity, TimelineItemSize, TimelineModule, TokenListComponent, TokenListModule, TooltipModule, TooltipPosition, ValidateErrors, ViewMode, WorkspaceSwitchComponent, WorkspaceSwitchModule, countries, fallback, TooltipComponent as ɵa, TooltipDirective as ɵb, LocalizedNumberInputModule as ɵba, NumberInputModule as ɵbb, NumberFieldComponent as ɵbc, CurrencyFieldModule as ɵbd, CurrencyFieldComponent as ɵbe, NumberFieldModule$1 as ɵbf, BignumberInputModule as ɵbg, BignumberFieldComponent as ɵbh, AutocompleteFieldComponent as ɵbi, BooleanFieldComponent as ɵbj, BooleanSwitchFieldComponent as ɵbk, CalendarFieldComponent as ɵbl, ChipsFieldComponent as ɵbm, CountryPhonePickerFieldComponent as ɵbn, DynamicFieldComponent as ɵbo, DynamicFormDirective as ɵbp, FieldsetComponent as ɵbq, FileUploadComponent$1 as ɵbr, LookupFieldComponent as ɵbs, PasswordFieldComponent as ɵbt, RadioButtonComponent as ɵbu, RowComponent as ɵbv, SectionComponent as ɵbw, SelectFieldComponent as ɵbx, SliderFieldComponent as ɵby, TextAreaFieldComponent as ɵbz, TemplateDirective as ɵc, TextAreaIAFieldComponent as ɵca, IAssistService as ɵcb, DecimalField as ɵcd, SideTableComponent as ɵce, ThumbnailService as ɵcf, InfiniteScrollModule as ɵcg, InfiniteScrollDirective as ɵch, IAInsightSidebarComponent as ɵci, IAInsightCardComponent as ɵcj, IAInsightCardLoaderComponent as ɵck, StructureModule as ɵcl, HeaderComponent as ɵcm, FooterComponent as ɵcn, KanbanEventService as ɵco, KanbanItemComponent as ɵcp, KanbanColumnComponent as ɵcq, KanbanItemDraggingComponent as ɵcr, NumberLocaleOptions as ɵcs, BorderButtonModule as ɵct, BorderButtonComponent as ɵcu, ProgressBarDeterminateComponent as ɵcv, ProgressBarIndeterminateComponent as ɵcw, SelectButtonItemComponent as ɵcx, SlidePanelService as ɵcy, TieredMenuEventService as ɵcz, TemplateModule as ɵd, TieredMenuService as ɵda, TieredMenuGlobalService as ɵdb, TieredMenuComponent as ɵdc, TieredMenuNestedComponent as ɵdd, TieredMenuItemComponent as ɵde, TieredMenuDividerComponent as ɵdf, TimelineItemModule as ɵdg, TimelineIconItemComponent as ɵdh, HorizontalTimelineModule as ɵdi, HorizontalTimelineComponent as ɵdj, VerticalTimelineModule as ɵdk, VerticalTimelineComponent as ɵdl, RangeLineComponent as ɵdm, CollapseOptionComponent as ɵdn, CollapsedItemsComponent as ɵdo, VerticalItemsComponent as ɵdp, CustomTranslationsModule as ɵe, CodeEditorComponent as ɵf, CoreFacade as ɵg, CodeMirror6Core as ɵh, CountryPhonePickerService as ɵi, LocalizedCurrencyImpurePipe as ɵj, LocalizedBignumberPipe as ɵk, LocalizedBignumberImpurePipe as ɵl, NumericPipe as ɵm, NumericService as ɵn, EmptyStateGoBackComponent as ɵo, IAssistIconComponent as ɵp, SeniorIconComponent as ɵq, DotsIndicatorComponent as ɵr, LoadingIndicatorComponent as ɵs, FileUploadService as ɵt, InfoSignComponent as ɵu, TableColumnsComponent as ɵv, TablePagingComponent as ɵw, TextFieldModule as ɵx, TextFieldComponent as ɵy, NumberFieldModule as ɵz };
 //# sourceMappingURL=seniorsistemas-angular-components.js.map