@seniorsistemas/angular-components 17.7.3 → 17.7.4

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

@@ -16119,27 +16119,6 @@
             this.closeItemMenuEvent = new core.EventEmitter();
             this.createMenuEvent = new core.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([
             core.Injectable()
         ], TieredMenuEventService);
@@ -16148,22 +16127,26 @@
 
     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);
                 }
@@ -16171,16 +16154,22 @@
                 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([
             core.Injectable()
         ], TieredMenuService);
@@ -16192,9 +16181,44 @@
             this.tieredMenuService = tieredMenuService;
             this._tieredMenuEventService = _tieredMenuEventService;
             this.top = 0;
-            this.maxHeight = 0;
+            this.left = 0;
             this._unsubscribe$ = new rxjs.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();
@@ -16275,7 +16299,7 @@
                 if (item.command) {
                     item.command();
                     // Close all menus after the item was selected.
-                    _this._tieredMenuEventService.emitCloseAllMenusEvent();
+                    _this._tieredMenuEventService.closeAllMenusEvent.emit();
                 }
             });
             this._tieredMenuEventService.openItemMenuEvent
@@ -16287,7 +16311,7 @@
                     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);
@@ -16304,20 +16328,30 @@
             { type: TieredMenuService },
             { type: TieredMenuEventService }
         ]; };
+        __decorate([
+            core.HostListener("window:resize")
+        ], TieredMenuNestedComponent.prototype, "onResize", null);
+        __decorate([
+            core.HostListener("document:click", ["$event"])
+        ], TieredMenuNestedComponent.prototype, "onDocumentClick", null);
+        __decorate([
+            core.HostListener("document:keydown", ["$event"])
+        ], TieredMenuNestedComponent.prototype, "onKeydownHandler", null);
         TieredMenuNestedComponent = __decorate([
             core.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;
@@ -16328,6 +16362,54 @@
             this.destroyRequest = new core.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();
@@ -16387,8 +16469,7 @@
                 // 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");
@@ -16408,14 +16489,23 @@
             }
         };
         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;
                 }
@@ -16423,85 +16513,77 @@
                     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(operators.takeUntil(this._unsubscribe$))
-                .subscribe(function () {
+            this._tieredMenuEventService.incrementCurrentItemEvent.pipe(operators.takeUntil(this._unsubscribe$)).subscribe(function () {
                 _this._incrementCurItem();
             });
             // Decrement current item event.
-            this._tieredMenuEventService.decrementCurrentItemEvent
-                .pipe(operators.takeUntil(this._unsubscribe$))
-                .subscribe(function () {
+            this._tieredMenuEventService.decrementCurrentItemEvent.pipe(operators.takeUntil(this._unsubscribe$)).subscribe(function () {
                 _this._decrementCurItem();
             });
             // Select item event.
-            this._tieredMenuEventService.selectItemEvent
-                .pipe(operators.takeUntil(this._unsubscribe$))
-                .subscribe(function (item) {
+            this._tieredMenuEventService.selectItemEvent.pipe(operators.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(operators.takeUntil(this._unsubscribe$))
-                .subscribe(function () {
+            this._tieredMenuEventService.closeAllMenusEvent.pipe(operators.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(operators.takeUntil(this._unsubscribe$))
-                .subscribe(function (item) {
-                item.isOpen = false;
+            this._tieredMenuEventService.openItemMenuEvent.pipe(operators.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(operators.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);
@@ -16513,108 +16595,106 @@
             { type: core.ApplicationRef },
             { type: core.ComponentFactoryResolver },
             { type: core.Injector },
+            { type: core.ChangeDetectorRef },
             { type: TieredMenuService },
             { type: TieredMenuEventService }
         ]; };
         __decorate([
             core.Output()
         ], TieredMenuComponent.prototype, "destroyRequest", void 0);
+        __decorate([
+            core.HostListener("window:resize")
+        ], TieredMenuComponent.prototype, "onResize", null);
+        __decorate([
+            core.HostListener("document:click", ["$event"])
+        ], TieredMenuComponent.prototype, "onDocumentClick", null);
+        __decorate([
+            core.HostListener("document:keydown", ["$event"])
+        ], TieredMenuComponent.prototype, "onKeydownHandler", null);
         TieredMenuComponent = TieredMenuComponent_1 = __decorate([
             core.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([
+            core.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 rxjs.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();
@@ -16622,145 +16702,176 @@
         };
         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(operators.takeUntil(this._unsubscribe$))
-                    .subscribe(function () {
+                this._componentRef.instance.destroyRequest.pipe(operators.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 {
-                    // 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;
                 }
             }
         };
         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(operators.takeUntil(this._unsubscribe$))
-                .subscribe(function () {
-                _this.items = _this._tieredMenuService.markAllItemsAsClosed(_this.items);
+            this._tieredMenuEventService.closeAllMenusEvent.pipe(operators.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: core.ElementRef },
             { type: core.ApplicationRef },
             { type: core.ComponentFactoryResolver },
             { type: core.Injector },
             { type: TieredMenuEventService },
-            { type: TieredMenuService }
+            { type: TieredMenuService },
+            { type: TieredMenuGlobalService },
+            { type: core.ChangeDetectorRef }
         ]; };
         __decorate([
             core.Input()
         ], TieredMenuDirective.prototype, "items", void 0);
-        __decorate([
-            core.Input()
-        ], TieredMenuDirective.prototype, "alwaysOpen", void 0);
         __decorate([
             core.Input()
         ], TieredMenuDirective.prototype, "triggerEvent", void 0);
-        __decorate([
-            core.HostListener("window:resize")
-        ], TieredMenuDirective.prototype, "onResize", null);
-        __decorate([
-            core.HostListener("document:keydown", ["$event"])
-        ], TieredMenuDirective.prototype, "onKeydownHandler", null);
         __decorate([
             core.HostListener("click", ["$event"])
         ], TieredMenuDirective.prototype, "onClick", null);
-        __decorate([
-            core.HostListener("document:click", ["$event"])
-        ], TieredMenuDirective.prototype, "onDocumentClick", null);
         TieredMenuDirective = __decorate([
             core.Directive({
                 selector: "[sTieredMenu]",
+                providers: [TieredMenuEventService, TieredMenuService],
             })
         ], TieredMenuDirective);
         return TieredMenuDirective;
     }());
 
+    var TieredMenuDividerComponent = /** @class */ (function () {
+        function TieredMenuDividerComponent() {
+        }
+        TieredMenuDividerComponent = __decorate([
+            core.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);
             }
         };
@@ -16776,6 +16887,9 @@
         __decorate([
             core.Input()
         ], TieredMenuItemComponent.prototype, "focused", void 0);
+        __decorate([
+            core.Input()
+        ], TieredMenuItemComponent.prototype, "highlight", void 0);
         __decorate([
             core.Input()
         ], TieredMenuItemComponent.prototype, "triggerEvent", void 0);
@@ -16795,26 +16909,13 @@
         TieredMenuItemComponent = __decorate([
             core.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([
-            core.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() {
         }
@@ -16831,10 +16932,7 @@
                     TieredMenuDividerComponent,
                 ],
                 exports: [TieredMenuDirective],
-                providers: [
-                    TieredMenuEventService,
-                    TieredMenuService,
-                ],
+                providers: [TieredMenuGlobalService],
             })
         ], TieredMenuModule);
         return TieredMenuModule;
@@ -18006,20 +18104,21 @@
     exports.ɵcz = TieredMenuEventService;
     exports.ɵd = TemplateModule;
     exports.ɵda = TieredMenuService;
-    exports.ɵdb = TieredMenuComponent;
-    exports.ɵdc = TieredMenuNestedComponent;
-    exports.ɵdd = TieredMenuItemComponent;
-    exports.ɵde = TieredMenuDividerComponent;
-    exports.ɵdf = TimelineItemModule;
-    exports.ɵdg = TimelineIconItemComponent;
-    exports.ɵdh = HorizontalTimelineModule;
-    exports.ɵdi = HorizontalTimelineComponent;
-    exports.ɵdj = VerticalTimelineModule;
-    exports.ɵdk = VerticalTimelineComponent;
-    exports.ɵdl = RangeLineComponent;
-    exports.ɵdm = CollapseOptionComponent;
-    exports.ɵdn = CollapsedItemsComponent;
-    exports.ɵdo = VerticalItemsComponent;
+    exports.ɵdb = TieredMenuGlobalService;
+    exports.ɵdc = TieredMenuComponent;
+    exports.ɵdd = TieredMenuNestedComponent;
+    exports.ɵde = TieredMenuItemComponent;
+    exports.ɵdf = TieredMenuDividerComponent;
+    exports.ɵdg = TimelineItemModule;
+    exports.ɵdh = TimelineIconItemComponent;
+    exports.ɵdi = HorizontalTimelineModule;
+    exports.ɵdj = HorizontalTimelineComponent;
+    exports.ɵdk = VerticalTimelineModule;
+    exports.ɵdl = VerticalTimelineComponent;
+    exports.ɵdm = RangeLineComponent;
+    exports.ɵdn = CollapseOptionComponent;
+    exports.ɵdo = CollapsedItemsComponent;
+    exports.ɵdp = VerticalItemsComponent;
     exports.ɵe = CustomTranslationsModule;
     exports.ɵf = CodeEditorComponent;
     exports.ɵg = CoreFacade;