@seniorsistemas/angular-components 17.7.2 → 17.7.4

package/fesm2015/seniorsistemas-angular-components.js

@@ -14952,46 +14952,31 @@ let TieredMenuEventService = class TieredMenuEventService {
         this.closeItemMenuEvent = new EventEmitter();
         this.createMenuEvent = new EventEmitter();
     }
-    emitIncrementCurrentItemEvent() {
-        this.incrementCurrentItemEvent.emit();
-    }
-    emitDecrementCurrentItemEvent() {
-        this.decrementCurrentItemEvent.emit();
-    }
-    emitCloseAllMenusEvent() {
-        this.closeAllMenusEvent.emit();
-    }
-    emitSelectItemEvent(item) {
-        this.selectItemEvent.emit(item);
-    }
-    emitOpenItemMenuEvent(item) {
-        this.openItemMenuEvent.emit(item);
-    }
-    emitCloseItemMenuEvent(item) {
-        this.closeItemMenuEvent.emit(item);
-    }
-    emitCreateMenuEvent(item) {
-        this.createMenuEvent.emit(item);
-    }
 };
 TieredMenuEventService = __decorate([
     Injectable()
 ], TieredMenuEventService);
 
 let TieredMenuService = class TieredMenuService {
+    constructor() {
+        this.currentItems = [];
+        this.items = [];
+    }
     normalizeData(items, parent) {
         return items.map((i) => {
-            if (i.submenu) {
-                i.submenu = this.normalizeData(i.submenu, i);
+            const item = Object.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;
         });
     }
     markAllItemsAsClosed(items) {
-        return items.map((item) => {
+        return items.map((i) => {
+            const item = Object.assign({}, i);
             if (item.submenu) {
                 item.submenu = this.markAllItemsAsClosed(item.submenu);
             }
@@ -14999,16 +14984,22 @@ let TieredMenuService = class TieredMenuService {
             return item;
         });
     }
-    searchTheHierarchy(item1, item2) {
-        let itemAux = item2;
-        while (itemAux) {
-            if (itemAux === item1) {
+    searchTheHierarchy(itemA, itemB) {
+        let item = itemB;
+        while (item) {
+            if (item === itemA) {
                 return true;
             }
-            itemAux = itemAux.parent;
+            item = item.parent;
         }
         return false;
     }
+    cloneItems(items) {
+        return JSON.parse(JSON.stringify(items));
+    }
+    _generateId() {
+        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()
@@ -15019,9 +15010,44 @@ let TieredMenuNestedComponent = class TieredMenuNestedComponent {
         this.tieredMenuService = tieredMenuService;
         this._tieredMenuEventService = _tieredMenuEventService;
         this.top = 0;
-        this.maxHeight = 0;
+        this.left = 0;
         this._unsubscribe$ = new Subject();
     }
+    onResize() {
+        this._tieredMenuEventService.closeAllMenusEvent.emit();
+    }
+    onDocumentClick(event) {
+        // Closing menu when clicked outside.
+        const target = event.target;
+        const clickedInside = target.closest("s-tiered-menu-item") || target.closest("s-tiered-menu-divider");
+        if (!clickedInside) {
+            this._tieredMenuEventService.closeAllMenusEvent.emit();
+        }
+    }
+    onKeydownHandler(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;
+        }
+    }
     ngOnInit() {
         this.tieredMenuService.currentItems = this.items;
         this._subscribeEvents();
@@ -15101,7 +15127,7 @@ let TieredMenuNestedComponent = class TieredMenuNestedComponent {
             if (item.command) {
                 item.command();
                 // Close all menus after the item was selected.
-                this._tieredMenuEventService.emitCloseAllMenusEvent();
+                this._tieredMenuEventService.closeAllMenusEvent.emit();
             }
         });
         this._tieredMenuEventService.openItemMenuEvent
@@ -15113,7 +15139,7 @@ let TieredMenuNestedComponent = class TieredMenuNestedComponent {
                 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);
@@ -15131,19 +15157,29 @@ TieredMenuNestedComponent.ctorParameters = () => [
     { 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);
 
 var TieredMenuComponent_1;
 let TieredMenuComponent = TieredMenuComponent_1 = class TieredMenuComponent {
-    constructor(_appRef, _componentFactoryResolver, _injector, tieredMenuService, _tieredMenuEventService) {
+    constructor(_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;
@@ -15153,6 +15189,54 @@ let TieredMenuComponent = TieredMenuComponent_1 = class TieredMenuComponent {
         this._unsubscribe$ = new Subject();
         this.destroyRequest = new EventEmitter();
     }
+    onResize() {
+        this._tieredMenuEventService.closeAllMenusEvent.emit();
+    }
+    onDocumentClick(event) {
+        // Closing menu when clicked outside.
+        const target = event.target;
+        const clickedInside = target.closest("s-tiered-menu-item") || target.closest("s-tiered-menu-divider");
+        if (!clickedInside) {
+            this._tieredMenuEventService.closeAllMenusEvent.emit();
+        }
+    }
+    onKeydownHandler(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;
+        }
+    }
     ngOnInit() {
         this.tieredMenuService.currentItems = this.items;
         this._subscribeEvents();
@@ -15211,8 +15295,7 @@ let TieredMenuComponent = TieredMenuComponent_1 = class TieredMenuComponent {
             // Setting the menu items.
             this._componentRef.instance.items = items;
             // Subscribe menu events.
-            this._componentRef.instance.destroyRequest
-                .subscribe((propagate) => {
+            this._componentRef.instance.destroyRequest.subscribe((propagate) => {
                 this._destroy(propagate);
             });
             this._menuDivElement = domElem.querySelector(".menu");
@@ -15231,14 +15314,23 @@ let TieredMenuComponent = TieredMenuComponent_1 = class TieredMenuComponent {
         }
     }
     _setMenuPosition(position) {
-        var _a;
+        var _a, _b;
+        const ITEM_HEIGHT = 37;
+        const DIVIDER_HEIGHT = 5;
+        const PADDING = 8;
         if (this._componentRef !== null) {
             const { top, right, bottom, left } = position;
+            const itemsCount = (_a = this._componentRef.instance.items) === null || _a === void 0 ? void 0 : _a.reduce((count, item) => {
+                return !item.divider ? count + 1 : count;
+            }, 0);
+            const dividersCount = (_b = this._componentRef.instance.items) === null || _b === void 0 ? void 0 : _b.reduce((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.
-            const menuHeight = ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) * 40;
+            const menuHeight = itemsCount * ITEM_HEIGHT + dividersCount * DIVIDER_HEIGHT + PADDING + 8;
             const menuWidth = this._menuDivElement.getBoundingClientRect().width;
-            const rightFreeSpace = document.body.clientWidth - right;
-            const bottomFreeSpace = document.body.clientHeight - bottom;
+            const rightFreeSpace = window.innerWidth - right;
+            const bottomFreeSpace = window.innerHeight - bottom;
             if (rightFreeSpace > menuWidth) {
                 this._componentRef.instance.left = right;
             }
@@ -15246,84 +15338,76 @@ let TieredMenuComponent = TieredMenuComponent_1 = class TieredMenuComponent {
                 this._componentRef.instance.left = left - menuWidth;
             }
             if (bottomFreeSpace <= menuHeight) {
-                this._componentRef.instance.top = top - menuHeight;
+                this._componentRef.instance.top = Math.max(window.innerHeight - menuHeight, window.scrollY);
             }
             else {
-                this._componentRef.instance.top = top;
+                this._componentRef.instance.top = window.scrollY + top;
             }
         }
     }
     _subscribeEvents() {
         // Increment current item event.
-        this._tieredMenuEventService.incrementCurrentItemEvent
-            .pipe(takeUntil(this._unsubscribe$))
-            .subscribe(() => {
+        this._tieredMenuEventService.incrementCurrentItemEvent.pipe(takeUntil(this._unsubscribe$)).subscribe(() => {
             this._incrementCurItem();
         });
         // Decrement current item event.
-        this._tieredMenuEventService.decrementCurrentItemEvent
-            .pipe(takeUntil(this._unsubscribe$))
-            .subscribe(() => {
+        this._tieredMenuEventService.decrementCurrentItemEvent.pipe(takeUntil(this._unsubscribe$)).subscribe(() => {
             this._decrementCurItem();
         });
         // Select item event.
-        this._tieredMenuEventService.selectItemEvent
-            .pipe(takeUntil(this._unsubscribe$))
-            .subscribe((item) => {
+        this._tieredMenuEventService.selectItemEvent.pipe(takeUntil(this._unsubscribe$)).subscribe((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(() => {
+        this._tieredMenuEventService.closeAllMenusEvent.pipe(takeUntil(this._unsubscribe$)).subscribe(() => {
             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((item) => {
-            item.isOpen = false;
+        this._tieredMenuEventService.openItemMenuEvent.pipe(takeUntil(this._unsubscribe$)).subscribe((item) => {
             if (this.tieredMenuService.currentItem) {
                 if (this.tieredMenuService.currentItem.parent === item) {
                     return;
                 }
                 if (!this.tieredMenuService.searchTheHierarchy(this.tieredMenuService.currentItem.parent, item)) {
-                    let itemAux = this.tieredMenuService.currentItem;
-                    while (itemAux.parent !== item.parent) {
-                        this._tieredMenuEventService.emitCloseItemMenuEvent(itemAux);
-                        itemAux = itemAux.parent;
+                    let 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) {
-                    const { top, right, left, bottom } = document
-                        .querySelector(`#${item.id}`)
-                        .getBoundingClientRect();
-                    const position = { top, right, left, 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)) {
+                const { top, right, left, bottom } = document.querySelector(`#${item.id}`).getBoundingClientRect();
+                const position = { top, right, left, 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((item) => {
             var _a, _b;
-            if (this.items.includes(item)) {
-                item.isOpen = false;
+            if (this.items.some((i) => 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);
@@ -15335,187 +15419,205 @@ TieredMenuComponent.ctorParameters = () => [
     { 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);
 
+let TieredMenuGlobalService = class TieredMenuGlobalService {
+};
+TieredMenuGlobalService = __decorate([
+    Injectable()
+], TieredMenuGlobalService);
+
 let TieredMenuDirective = class TieredMenuDirective {
-    constructor(_elementRef, _appRef, _componentFactoryResolver, _injector, _tieredMenuEventService, _tieredMenuService) {
+    constructor(_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";
+    }
+    onClick(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();
+        }
     }
     ngOnInit() {
-        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();
     }
-    ngAfterViewInit() {
-        // setTimeout to create the menu after creating the elements.
-        if (this.alwaysOpen) {
-            setTimeout(() => {
-                this._createMenu();
-            }, 0);
+    ngDoCheck() {
+        if (!this.previousItems) {
+            this.previousItems = this._tieredMenuService.cloneItems(this.items);
+        }
+        ;
+        let hasChanges = false;
+        if (this.items.length !== this.previousItems.length) {
+            hasChanges = true;
         }
+        else {
+            for (let 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);
     }
     ngOnDestroy() {
         this._unsubscribe$.next();
         this._unsubscribe$.complete();
         this._destroy();
     }
-    onResize() {
-        if (!this.alwaysOpen) {
-            this._tieredMenuEventService.emitCloseAllMenusEvent();
-        }
-    }
-    onKeydownHandler(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;
-        }
-    }
-    onClick(event) {
-        if (this.triggerEvent === "click" && this.items && this.items && !this._isOpen) {
-            this._lastActiveElement = document.activeElement;
-            this._createMenu();
-            event.preventDefault();
-            event.stopPropagation();
-        }
-    }
-    onDocumentClick(event) {
-        // Closing menu when clicked outside.
-        const target = event.target;
-        const clickedInside = target.closest("s-tiered-menu-item") || target.closest("s-tiered-menu-divider");
-        if (!clickedInside) {
-            this._tieredMenuEventService.emitCloseAllMenusEvent();
-        }
-    }
     _createMenu() {
-        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();
         }
     }
     _createTieredMenu() {
-        if (!this._componentRef && this.items) {
+        var _a;
+        if (!this._componentRef && ((_a = this._tieredMenuService.items) === null || _a === void 0 ? void 0 : _a.length) > 0) {
             const componentFactory = this._componentFactoryResolver.resolveComponentFactory(TieredMenuComponent);
             this._componentRef = componentFactory.create(this._injector);
             this._appRef.attachView(this._componentRef.hostView);
             const domElem = this._componentRef.hostView.rootNodes[0];
             document.body.appendChild(domElem);
             this._setMenuComponentProperties();
-            this._componentRef.instance.destroyRequest
-                .pipe(takeUntil(this._unsubscribe$))
-                .subscribe(() => {
+            this._componentRef.instance.destroyRequest.pipe(takeUntil(this._unsubscribe$)).subscribe(() => {
                 this._destroy();
             });
-            this._menuDivElement = domElem.querySelector(".menu");
             this._setMenuPosition();
         }
     }
     _createNestedMenu() {
-        if (!this._componentRef && this.items) {
+        var _a;
+        if (!this._componentRef && ((_a = this._tieredMenuService.items) === null || _a === void 0 ? void 0 : _a.length) > 0) {
             const componentFactory = this._componentFactoryResolver.resolveComponentFactory(TieredMenuNestedComponent);
             this._componentRef = componentFactory.create(this._injector);
             this._appRef.attachView(this._componentRef.hostView);
             const domElem = this._componentRef.hostView.rootNodes[0];
             document.body.appendChild(domElem);
             this._setMenuComponentProperties();
-            this._menuDivElement = domElem.querySelector(".menu");
             this._setMenuPosition();
         }
     }
     _destroy() {
-        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();
         }
     }
     _setMenuPosition() {
+        var _a, _b;
+        const ITEM_HEIGHT = 37;
+        const ITEM_WIDTH = 176;
+        const DIVIDER_HEIGHT = 5;
+        const PADDING = 8;
+        const MARGIN = 4;
         if (this._componentRef !== null) {
-            const { right, bottom, left } = this._elementRef.nativeElement.getBoundingClientRect();
-            const menuWidth = this._menuDivElement.getBoundingClientRect().width;
-            const rightFreeSpace = document.body.clientWidth - right;
-            const 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;
+            const { bottom, left, right } = this._elementRef.nativeElement.getBoundingClientRect();
+            const itemsCount = (_a = this._componentRef.instance.items) === null || _a === void 0 ? void 0 : _a.reduce((count, item) => {
+                return !item.divider ? count + 1 : count;
+            }, 0);
+            const dividersCount = (_b = this._componentRef.instance.items) === null || _b === void 0 ? void 0 : _b.reduce((count, item) => {
+                return item.divider ? count + 1 : count;
+            }, 0);
+            const menuHeight = itemsCount * ITEM_HEIGHT + dividersCount * DIVIDER_HEIGHT + PADDING + MARGIN;
+            const rightFreeSpace = window.innerWidth - right;
+            const 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 {
-                // 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.top = bottom + MARGIN;
+            }
+            if (rightFreeSpace > 176) {
+                this._componentRef.instance.left = left;
+            }
+            else {
+                this._componentRef.instance.left = right - ITEM_WIDTH;
+            }
+            if (this._isNested) {
+                this._componentRef.instance.left = MARGIN;
             }
         }
     }
     _setMenuComponentProperties() {
         if (this._componentRef != null) {
-            this._componentRef.instance.items = this.items;
+            this._componentRef.instance.items = this._tieredMenuService.items;
         }
     }
     _subscribeEvents() {
-        this._tieredMenuEventService.closeAllMenusEvent
-            .pipe(takeUntil(this._unsubscribe$))
-            .subscribe(() => {
-            this.items = this._tieredMenuService.markAllItemsAsClosed(this.items);
+        this._tieredMenuEventService.closeAllMenusEvent.pipe(takeUntil(this._unsubscribe$)).subscribe(() => {
+            this._tieredMenuService.items = this._tieredMenuService.markAllItemsAsClosed(this._tieredMenuService.items);
             this._destroy();
         });
     }
+    _compareItems(item1, item2) {
+        return JSON.stringify(item1) === JSON.stringify(item2);
+    }
+    _rebuildMenu() {
+        this._destroy();
+    }
+    _updateServiceItems() {
+        this._tieredMenuService.items = this._tieredMenuService.normalizeData(this.items);
+        this._tieredMenuService.currentItems = this._tieredMenuService.items;
+        this._tieredMenuService.currentItem = this._tieredMenuService.items[0];
+    }
 };
 TieredMenuDirective.ctorParameters = () => [
     { type: ElementRef },
@@ -15523,59 +15625,65 @@ TieredMenuDirective.ctorParameters = () => [
     { 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);
 
+let TieredMenuDividerComponent = class 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);
+
 let TieredMenuItemComponent = class TieredMenuItemComponent {
     constructor(_tieredMenuEventService) {
         this._tieredMenuEventService = _tieredMenuEventService;
         this.focused = false;
+        this.highlight = false;
         this.triggerEvent = "click";
         this.closeOnClick = false;
     }
     onClick() {
+        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);
         }
     }
     onMouseEnter() {
+        if (this.item.disabled)
+            return;
         if (this.triggerEvent === "hover" && !this.item.isOpen) {
             this._showTimeout = window.setTimeout(() => {
-                this._tieredMenuEventService.emitOpenItemMenuEvent(this.item);
+                this._tieredMenuEventService.openItemMenuEvent.emit(this.item);
             }, 300);
         }
     }
@@ -15592,6 +15700,9 @@ __decorate([
 __decorate([
     Input()
 ], TieredMenuItemComponent.prototype, "focused", void 0);
+__decorate([
+    Input()
+], TieredMenuItemComponent.prototype, "highlight", void 0);
 __decorate([
     Input()
 ], TieredMenuItemComponent.prototype, "triggerEvent", void 0);
@@ -15611,21 +15722,11 @@ __decorate([
 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);
 
-let TieredMenuDividerComponent = class 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);
-
 let TieredMenuModule = class TieredMenuModule {
 };
 TieredMenuModule = __decorate([
@@ -15641,10 +15742,7 @@ TieredMenuModule = __decorate([
             TieredMenuDividerComponent,
         ],
         exports: [TieredMenuDirective],
-        providers: [
-            TieredMenuEventService,
-            TieredMenuService,
-        ],
+        providers: [TieredMenuGlobalService],
     })
 ], TieredMenuModule);
 
@@ -15734,6 +15832,7 @@ const VERTICAL = "vertical";
 const MIN_ITEM_SIZE = 200;
 let TimelineComponent = class TimelineComponent {
     constructor() {
+        this.highlightActiveItem = true;
         this.direction = HORIZONTAL;
         this.collapsable = true;
         this.counterLabel = "items";
@@ -15769,6 +15868,9 @@ __decorate([
 __decorate([
     Input()
 ], TimelineComponent.prototype, "activeIndex", void 0);
+__decorate([
+    Input()
+], TimelineComponent.prototype, "highlightActiveItem", void 0);
 __decorate([
     Input()
 ], TimelineComponent.prototype, "direction", void 0);
@@ -15784,7 +15886,7 @@ __decorate([
 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);
 
@@ -15796,14 +15898,17 @@ __decorate([
 __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);
 
@@ -15831,11 +15936,14 @@ __decorate([
 __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);
 
@@ -15883,6 +15991,9 @@ VerticalTimelineComponent.nextId = 0;
 __decorate([
     Input()
 ], VerticalTimelineComponent.prototype, "activeIndex", null);
+__decorate([
+    Input()
+], VerticalTimelineComponent.prototype, "highlightActiveItem", void 0);
 __decorate([
     Input()
 ], VerticalTimelineComponent.prototype, "items", void 0);
@@ -15895,7 +16006,7 @@ __decorate([
 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);
@@ -15976,13 +16087,16 @@ __decorate([
 __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);
@@ -16534,5 +16648,5 @@ const 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