@seniorsistemas/angular-components 19.0.4 → 19.0.6

package/fesm2022/seniorsistemas-angular-components-tiered-menu.mjs

@@ -121,11 +121,11 @@ class TieredMenuItemComponent {
         window.clearTimeout(this._showTimeout);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuItemComponent, deps: [{ token: TieredMenuEventService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TieredMenuItemComponent, selector: "s-tiered-menu-item", inputs: { item: "item", focused: "focused", highlight: "highlight", triggerEvent: "triggerEvent", closeOnClick: "closeOnClick" }, host: { listeners: { "click": "onClick()", "touchend": "onClick()", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0, template: "<div\n    [id]=\"item.id\"\n    class=\"tiered-menu-item\"\n    [attr.data-key]=\"item.dataKey\"\n    [ngClass]=\"{\n        'tiered-menu-item--open': item.isOpen,\n        'tiered-menu-item--focused': focused,\n        'tiered-menu-item--disabled': item.disabled,\n    }\"\n>\n    <div class=\"tiered-menu-item-content\">\n        <span\n            class=\"icon\"\n            [ngClass]=\"item.iconClass\"\n        ></span>\n        <span class=\"label\">{{ item.label }}</span>\n    </div>\n    @if (item.submenu) {\n        <span\n            class=\"submenu-icon fas\"\n            [class.fa-chevron-left]=\"item.isOpen\"\n            [class.fa-chevron-right]=\"!item.isOpen\"\n        >\n        </span>\n    }\n</div>\n", styles: [".tiered-menu-item{align-items:center;display:flex;justify-content:space-between;padding:8px 16px;-webkit-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}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TieredMenuItemComponent, selector: "s-tiered-menu-item", inputs: { item: "item", focused: "focused", highlight: "highlight", triggerEvent: "triggerEvent", closeOnClick: "closeOnClick" }, host: { listeners: { "click": "onClick()", "touchend": "onClick()", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0, template: "<div\n    [id]=\"item.id\"\n    class=\"tiered-menu-item\"\n    role=\"menuitem\"\n    [tabindex]=\"focused && !item.disabled ? 0 : -1\"\n    [attr.aria-disabled]=\"item.disabled || null\"\n    [attr.aria-haspopup]=\"item.submenu ? 'menu' : null\"\n    [attr.aria-expanded]=\"item.submenu ? item.isOpen : null\"\n    [attr.data-key]=\"item.dataKey\"\n    [ngClass]=\"{\n        'tiered-menu-item--open': item.isOpen,\n        'tiered-menu-item--focused': focused,\n        'tiered-menu-item--disabled': item.disabled,\n    }\"\n>\n    <div class=\"tiered-menu-item-content\">\n        <span\n            class=\"icon\"\n            [ngClass]=\"item.iconClass\"\n        ></span>\n        <span class=\"label\">{{ item.label }}</span>\n    </div>\n    @if (item.submenu) {\n        <span\n            class=\"submenu-icon fas\"\n            [class.fa-chevron-left]=\"item.isOpen\"\n            [class.fa-chevron-right]=\"!item.isOpen\"\n        >\n        </span>\n    }\n</div>\n", styles: [".tiered-menu-item{align-items:center;display:flex;justify-content:space-between;padding:8px 16px;-webkit-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}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-tiered-menu-item', template: "<div\n    [id]=\"item.id\"\n    class=\"tiered-menu-item\"\n    [attr.data-key]=\"item.dataKey\"\n    [ngClass]=\"{\n        'tiered-menu-item--open': item.isOpen,\n        'tiered-menu-item--focused': focused,\n        'tiered-menu-item--disabled': item.disabled,\n    }\"\n>\n    <div class=\"tiered-menu-item-content\">\n        <span\n            class=\"icon\"\n            [ngClass]=\"item.iconClass\"\n        ></span>\n        <span class=\"label\">{{ item.label }}</span>\n    </div>\n    @if (item.submenu) {\n        <span\n            class=\"submenu-icon fas\"\n            [class.fa-chevron-left]=\"item.isOpen\"\n            [class.fa-chevron-right]=\"!item.isOpen\"\n        >\n        </span>\n    }\n</div>\n", styles: [".tiered-menu-item{align-items:center;display:flex;justify-content:space-between;padding:8px 16px;-webkit-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}\n"] }]
+            args: [{ selector: 's-tiered-menu-item', template: "<div\n    [id]=\"item.id\"\n    class=\"tiered-menu-item\"\n    role=\"menuitem\"\n    [tabindex]=\"focused && !item.disabled ? 0 : -1\"\n    [attr.aria-disabled]=\"item.disabled || null\"\n    [attr.aria-haspopup]=\"item.submenu ? 'menu' : null\"\n    [attr.aria-expanded]=\"item.submenu ? item.isOpen : null\"\n    [attr.data-key]=\"item.dataKey\"\n    [ngClass]=\"{\n        'tiered-menu-item--open': item.isOpen,\n        'tiered-menu-item--focused': focused,\n        'tiered-menu-item--disabled': item.disabled,\n    }\"\n>\n    <div class=\"tiered-menu-item-content\">\n        <span\n            class=\"icon\"\n            [ngClass]=\"item.iconClass\"\n        ></span>\n        <span class=\"label\">{{ item.label }}</span>\n    </div>\n    @if (item.submenu) {\n        <span\n            class=\"submenu-icon fas\"\n            [class.fa-chevron-left]=\"item.isOpen\"\n            [class.fa-chevron-right]=\"!item.isOpen\"\n        >\n        </span>\n    }\n</div>\n", styles: [".tiered-menu-item{align-items:center;display:flex;justify-content:space-between;padding:8px 16px;-webkit-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}\n"] }]
         }], ctorParameters: () => [{ type: TieredMenuEventService }], propDecorators: { item: [{
                 type: Input,
                 args: [{ required: true }]
@@ -336,6 +336,7 @@ class TieredMenuComponent {
     _changeDetectorRef;
     tieredMenuService;
     _tieredMenuEventService;
+    ariaLabel;
     items = [];
     top = 0;
     left = 0;
@@ -364,58 +365,72 @@ class TieredMenuComponent {
         }
     }
     onKeydownHandler(event) {
-        if (this.tieredMenuService.currentItem) {
-            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;
-            }
-        }
-        else {
-            switch (event.key) {
-                case 'ArrowUp':
-                    if (this.items.includes(this.tieredMenuService.currentItem)) {
-                        this._tieredMenuEventService.decrementCurrentItemEvent.emit();
-                        event.stopImmediatePropagation();
-                    }
-                    break;
-                case 'ArrowDown':
-                    if (this.items.includes(this.tieredMenuService.currentItem)) {
-                        this._tieredMenuEventService.incrementCurrentItemEvent.emit();
-                        event.stopImmediatePropagation();
-                    }
-                    break;
-            }
+        switch (event.key) {
+            case 'Escape':
+                this._tieredMenuEventService.closeAllMenusEvent.emit();
+                event.preventDefault();
+                break;
+            case 'Tab':
+                this._tieredMenuEventService.closeAllMenusEvent.emit();
+                break;
+            case ' ':
+            case 'Enter':
+                if (this.tieredMenuService.currentItem &&
+                    !this.tieredMenuService.currentItem.disabled &&
+                    this.items.includes(this.tieredMenuService.currentItem)) {
+                    this._tieredMenuEventService.selectItemEvent.emit(this.tieredMenuService.currentItem);
+                    event.preventDefault();
+                }
+                break;
+            case 'ArrowUp':
+                this._tieredMenuEventService.decrementCurrentItemEvent.emit();
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                break;
+            case 'ArrowDown':
+                this._tieredMenuEventService.incrementCurrentItemEvent.emit();
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                break;
+            case 'ArrowLeft':
+                if (this.tieredMenuService.currentItem && this.items.includes(this.tieredMenuService.currentItem)) {
+                    this._tieredMenuEventService.closeItemMenuEvent.emit(this.tieredMenuService.currentItem);
+                    this._changeDetectorRef.detectChanges();
+                    event.preventDefault();
+                }
+                break;
+            case 'ArrowRight':
+                if (this.tieredMenuService.currentItem &&
+                    !this.tieredMenuService.currentItem.disabled &&
+                    this.items.includes(this.tieredMenuService.currentItem)) {
+                    this._tieredMenuEventService.openItemMenuEvent.emit(this.tieredMenuService.currentItem);
+                    event.preventDefault();
+                    event.stopImmediatePropagation();
+                }
+                break;
         }
     }
     ngOnInit() {
         this.tieredMenuService.currentItems = this.items;
+        this.tieredMenuService.currentItem = this.items[0] ?? null;
         this._subscribeEvents();
         disableScroll();
+        requestAnimationFrame(() => {
+            const firstItem = document.querySelector('.menu [role="menuitem"]');
+            firstItem?.focus();
+        });
     }
     ngOnDestroy() {
         this._unsubscribe$.next();
         this._unsubscribe$.complete();
     }
+    _focusCurrentItem() {
+        const id = this.tieredMenuService.currentItem?.id;
+        if (!id) {
+            return;
+        }
+        document.getElementById(id)?.focus();
+    }
     _incrementCurItem() {
         if (!this.tieredMenuService.currentItem) {
             this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[0];
@@ -520,10 +535,12 @@ class TieredMenuComponent {
         // Increment current item event.
         this._tieredMenuEventService.incrementCurrentItemEvent.pipe(takeUntil(this._unsubscribe$)).subscribe(() => {
             this._incrementCurItem();
+            this._focusCurrentItem();
         });
         // Decrement current item event.
         this._tieredMenuEventService.decrementCurrentItemEvent.pipe(takeUntil(this._unsubscribe$)).subscribe(() => {
             this._decrementCurItem();
+            this._focusCurrentItem();
         });
         // Select item event.
         this._tieredMenuEventService.selectItemEvent
@@ -604,12 +621,14 @@ class TieredMenuComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuComponent, deps: [{ token: i0.ApplicationRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: TieredMenuService }, { token: TieredMenuEventService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TieredMenuComponent, selector: "s-tiered-menu", outputs: { destroyRequest: "destroyRequest" }, host: { listeners: { "window:resize": "onResize()", "document:click": "onDocumentClick($event)", "document:keydown": "onKeydownHandler($event)" } }, ngImport: i0, 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.visible && !item.divider\"\n            [item]=\"item\"\n            [focused]=\"item === tieredMenuService.currentItem\"\n            [highlight]=\"item.isOpen\"\n            fieldUtils.triggerEvent=\"hover\"\n            [closeOnClick]=\"false\"\n        >\n        </s-tiered-menu-item>\n        <s-tiered-menu-divider *ngIf=\"item.divider\"></s-tiered-menu-divider>\n    </div> -->\n    @for (item of items; track $index) {\n        @if (item.visible && !item.divider) {\n            <s-tiered-menu-item\n                [item]=\"item\"\n                [focused]=\"item === tieredMenuService.currentItem\"\n                [highlight]=\"item.isOpen\"\n                fieldUtils.triggerEvent=\"hover\"\n                [closeOnClick]=\"false\"\n            />\n        }\n        @if (item.divider) {\n            <s-tiered-menu-divider />\n        }\n    }\n</div>\n\n", styles: [".menu{background-color:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 2px 12px #0000001a;display:inline-flex;flex-direction:column;max-height:100vh;min-width:176px;padding:4px 0;overflow-y:auto;position:absolute;z-index:9999}\n"], dependencies: [{ kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TieredMenuItemComponent, selector: "s-tiered-menu-item", inputs: ["item", "focused", "highlight", "triggerEvent", "closeOnClick"] }, { kind: "component", type: TieredMenuDividerComponent, selector: "s-tiered-menu-divider" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TieredMenuComponent, selector: "s-tiered-menu", inputs: { ariaLabel: "ariaLabel" }, outputs: { destroyRequest: "destroyRequest" }, host: { listeners: { "window:resize": "onResize()", "document:click": "onDocumentClick($event)", "document:keydown": "onKeydownHandler($event)" } }, ngImport: i0, template: "<div\n    class=\"menu\"\n    role=\"application\"\n    [attr.aria-label]=\"ariaLabel\"\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.visible && !item.divider\"\n            [item]=\"item\"\n            [focused]=\"item === tieredMenuService.currentItem\"\n            [highlight]=\"item.isOpen\"\n            fieldUtils.triggerEvent=\"hover\"\n            [closeOnClick]=\"false\"\n        >\n        </s-tiered-menu-item>\n        <s-tiered-menu-divider *ngIf=\"item.divider\"></s-tiered-menu-divider>\n    </div> -->\n    @for (item of items; track $index) {\n        @if (item.visible && !item.divider) {\n            <s-tiered-menu-item\n                [item]=\"item\"\n                [focused]=\"item === tieredMenuService.currentItem\"\n                [highlight]=\"item.isOpen\"\n                fieldUtils.triggerEvent=\"hover\"\n                [closeOnClick]=\"false\"\n            />\n        }\n        @if (item.divider) {\n            <s-tiered-menu-divider />\n        }\n    }\n</div>\n", styles: [".menu{background-color:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 2px 12px #0000001a;display:inline-flex;flex-direction:column;max-height:100vh;min-width:176px;padding:4px 0;overflow-y:auto;position:absolute;z-index:9999}\n"], dependencies: [{ kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TieredMenuItemComponent, selector: "s-tiered-menu-item", inputs: ["item", "focused", "highlight", "triggerEvent", "closeOnClick"] }, { kind: "component", type: TieredMenuDividerComponent, selector: "s-tiered-menu-divider" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-tiered-menu', 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.visible && !item.divider\"\n            [item]=\"item\"\n            [focused]=\"item === tieredMenuService.currentItem\"\n            [highlight]=\"item.isOpen\"\n            fieldUtils.triggerEvent=\"hover\"\n            [closeOnClick]=\"false\"\n        >\n        </s-tiered-menu-item>\n        <s-tiered-menu-divider *ngIf=\"item.divider\"></s-tiered-menu-divider>\n    </div> -->\n    @for (item of items; track $index) {\n        @if (item.visible && !item.divider) {\n            <s-tiered-menu-item\n                [item]=\"item\"\n                [focused]=\"item === tieredMenuService.currentItem\"\n                [highlight]=\"item.isOpen\"\n                fieldUtils.triggerEvent=\"hover\"\n                [closeOnClick]=\"false\"\n            />\n        }\n        @if (item.divider) {\n            <s-tiered-menu-divider />\n        }\n    }\n</div>\n\n", styles: [".menu{background-color:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 2px 12px #0000001a;display:inline-flex;flex-direction:column;max-height:100vh;min-width:176px;padding:4px 0;overflow-y:auto;position:absolute;z-index:9999}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: TieredMenuService }, { type: TieredMenuEventService }], propDecorators: { destroyRequest: [{
+            args: [{ selector: 's-tiered-menu', template: "<div\n    class=\"menu\"\n    role=\"application\"\n    [attr.aria-label]=\"ariaLabel\"\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.visible && !item.divider\"\n            [item]=\"item\"\n            [focused]=\"item === tieredMenuService.currentItem\"\n            [highlight]=\"item.isOpen\"\n            fieldUtils.triggerEvent=\"hover\"\n            [closeOnClick]=\"false\"\n        >\n        </s-tiered-menu-item>\n        <s-tiered-menu-divider *ngIf=\"item.divider\"></s-tiered-menu-divider>\n    </div> -->\n    @for (item of items; track $index) {\n        @if (item.visible && !item.divider) {\n            <s-tiered-menu-item\n                [item]=\"item\"\n                [focused]=\"item === tieredMenuService.currentItem\"\n                [highlight]=\"item.isOpen\"\n                fieldUtils.triggerEvent=\"hover\"\n                [closeOnClick]=\"false\"\n            />\n        }\n        @if (item.divider) {\n            <s-tiered-menu-divider />\n        }\n    }\n</div>\n", styles: [".menu{background-color:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 2px 12px #0000001a;display:inline-flex;flex-direction:column;max-height:100vh;min-width:176px;padding:4px 0;overflow-y:auto;position:absolute;z-index:9999}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: TieredMenuService }, { type: TieredMenuEventService }], propDecorators: { ariaLabel: [{
+                type: Input
+            }], destroyRequest: [{
                 type: Output
             }], onResize: [{
                 type: HostListener,
@@ -622,6 +641,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['document:keydown', ['$event']]
             }] } });
 
+/**
+ * @description Diretiva que anexa um menu multinível (tiered menu) a qualquer elemento do DOM.
+ * Ao disparar o evento configurado no elemento hospedeiro, exibe um painel flutuante
+ * com itens de menu hierárquicos, suportando submenus aninhados e divisores.
+ * Em telas estreitas (< 600px), o menu é exibido em modo aninhado fullscreen.
+ *
+ * @example
+ * ```html
+ * <s-button [sTieredMenu]="menuItems" triggerEvent="click">Abrir menu</s-button>
+ * ```
+ *
+ * @category Navegação
+ */
 class TieredMenuDirective {
     _elementRef;
     _appRef;
@@ -631,9 +663,26 @@ class TieredMenuDirective {
     _tieredMenuService;
     _tieredMenuGlobalService;
     _changeDetectorRef;
+    /**
+     * @description Lista de itens exibidos no menu. Cada item pode conter um array de `children`
+     * para criar submenus aninhados, além de propriedades como `label`, `icon`,
+     * `disabled`, `command` e `divider`.
+     */
     items = [];
+    /**
+     * @description Item que receberá o foco inicial ao abrir o menu.
+     * Útil para destacar uma opção pré-selecionada ou contextual.
+     */
     focusedItem = undefined;
+    /**
+     * @description Define o evento do elemento hospedeiro que dispara a abertura do menu.
+     * - `'click'`: abre o menu ao clicar no elemento (padrão).
+     * - `'hover'`: abre o menu ao passar o mouse sobre o elemento.
+     *
+     * @default 'click'
+     */
     triggerEvent = 'click';
+    ariaLabel;
     _componentRef = null;
     _showTimeout;
     _isNested = false;
@@ -802,6 +851,7 @@ class TieredMenuDirective {
     _setMenuComponentProperties() {
         if (this._componentRef != null) {
             this._componentRef.instance.items = this._tieredMenuService.items;
+            this._componentRef.instance.ariaLabel = this.ariaLabel;
         }
     }
     _subscribeEvents() {
@@ -825,7 +875,7 @@ class TieredMenuDirective {
                 this._tieredMenuService.items[0];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuDirective, deps: [{ token: i0.ElementRef }, { token: i0.ApplicationRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: TieredMenuEventService }, { token: TieredMenuService }, { token: TieredMenuGlobalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: TieredMenuDirective, selector: "[sTieredMenu]", inputs: { items: "items", focusedItem: "focusedItem", triggerEvent: "triggerEvent" }, host: { listeners: { "click": "onClick($event)" } }, providers: [TieredMenuEventService, TieredMenuService], usesOnChanges: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: TieredMenuDirective, selector: "[sTieredMenu]", inputs: { items: "items", focusedItem: "focusedItem", triggerEvent: "triggerEvent", ariaLabel: "ariaLabel" }, host: { listeners: { "click": "onClick($event)" } }, providers: [TieredMenuEventService, TieredMenuService], usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuDirective, decorators: [{
             type: Directive,
@@ -839,6 +889,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], triggerEvent: [{
                 type: Input
+            }], ariaLabel: [{
+                type: Input
             }], onClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]