@fundamental-ngx/core 0.65.0-rc.9 → 0.65.0

package/fesm2022/fundamental-ngx-core-menu.mjs

@@ -7,7 +7,7 @@ import { IconComponent } from '@fundamental-ngx/core/icon';
 import { Subject, combineLatest, tap, first, map, Subscription, fromEvent, defer, timer, BehaviorSubject, of, switchMap as switchMap$1, merge, delay } from 'rxjs';
 import { distinctUntilChanged, takeUntil, filter, switchMap, startWith } from 'rxjs/operators';
 import { NgTemplateOutlet } from '@angular/common';
-import { RIGHT_ARROW, LEFT_ARROW, DOWN_ARROW, UP_ARROW, ESCAPE, SPACE, ENTER } from '@angular/cdk/keycodes';
+import { RIGHT_ARROW, LEFT_ARROW, DOWN_ARROW, UP_ARROW, HOME, END, ESCAPE, SPACE, ENTER } from '@angular/cdk/keycodes';
 import { RtlService, KeyUtil, TemplateDirective, InitialFocusDirective, DynamicComponentService, InitialFocusModule } from '@fundamental-ngx/cdk/utils';
 import * as i1 from '@fundamental-ngx/cdk/forms';
 import { CvaControl, FD_FORM_FIELD_CONTROL, CvaDirective } from '@fundamental-ngx/cdk/forms';
@@ -577,6 +577,18 @@ class MenuService {
                 this.setFocused(closest.item);
             }
         }
+        else if (KeyUtil.isKeyCode(event, HOME)) {
+            const firstEnabled = this._boundaryEnabled(this.focusedNode, 'start');
+            if (firstEnabled) {
+                this.setFocused(firstEnabled.item);
+            }
+        }
+        else if (KeyUtil.isKeyCode(event, END)) {
+            const lastEnabled = this._boundaryEnabled(this.focusedNode, 'end');
+            if (lastEnabled) {
+                this.setFocused(lastEnabled.item);
+            }
+        }
         else if (KeyUtil.isKeyCode(event, ESCAPE) && this.menuComponent.closeOnEscapeKey()) {
             this.menuComponent.close();
         }
@@ -617,6 +629,15 @@ class MenuService {
         }
         return null;
     }
+    /** @hidden Returns first/last enabled sibling for Home/End keyboard support */
+    _boundaryEnabled(node, position) {
+        const siblings = this._nodeSiblings(node);
+        if (!siblings?.length) {
+            return null;
+        }
+        const items = position === 'start' ? siblings : [...siblings].reverse();
+        return items.find((sibling) => sibling.item && !sibling.item.disabled) ?? null;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MenuService }); }
 }
@@ -2026,7 +2047,8 @@ class MenuKeyboardService {
     }
     /** Function that should be called every time, keydown event is used on some menu item,
      * it provides whole functionality for handling
-     * ArrowDown - focus, ArrowUp - focus, Space bar - simulate click, Enter key - simulate click.
+     * ArrowDown - focus, ArrowUp - focus, Home - focus first enabled item, End - focus last enabled item,
+     * Space bar - simulate click, Enter key - simulate click.
      * @param event KeyboardEvent
      * @param index index of items starts from 0
      * @param menuItems array of menu item directives
@@ -2063,6 +2085,20 @@ class MenuKeyboardService {
             }
             event.preventDefault();
         }
+        else if (KeyUtil.isKeyCode(event, HOME)) {
+            const firstEnabled = this._findBoundaryEnabledIndex(menuItems, 'start');
+            if (firstEnabled !== -1) {
+                menuItems[firstEnabled].focus();
+            }
+            event.preventDefault();
+        }
+        else if (KeyUtil.isKeyCode(event, END)) {
+            const lastEnabled = this._findBoundaryEnabledIndex(menuItems, 'end');
+            if (lastEnabled !== -1) {
+                menuItems[lastEnabled].focus();
+            }
+            event.preventDefault();
+        }
         else if (KeyUtil.isKeyCode(event, [SPACE, ENTER])) {
             if (menuItems[index]) {
                 menuItems[index].click();
@@ -2070,6 +2106,31 @@ class MenuKeyboardService {
             }
         }
     }
+    /** @hidden Returns index of first/last enabled item. Falls back to first/last if disabled state is unavailable. */
+    _findBoundaryEnabledIndex(menuItems, position) {
+        if (!menuItems.length) {
+            return -1;
+        }
+        if (position === 'start') {
+            for (let i = 0; i < menuItems.length; i++) {
+                if (!this._isItemDisabled(menuItems[i])) {
+                    return i;
+                }
+            }
+            return -1;
+        }
+        for (let i = menuItems.length - 1; i >= 0; i--) {
+            if (!this._isItemDisabled(menuItems[i])) {
+                return i;
+            }
+        }
+        return -1;
+    }
+    /** @hidden Detects disabled state if supported by the item implementation. */
+    _isItemDisabled(menuItem) {
+        const maybeDisabled = menuItem.disabled;
+        return maybeDisabled === true;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MenuKeyboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MenuKeyboardService }); }
 }