@fundamental-ngx/cdk 0.57.4-rc.9 → 0.57.4

package/fesm2022/fundamental-ngx-cdk-utils.mjs

@@ -8,7 +8,7 @@ import { coerceElement, coerceBooleanProperty, coerceNumberProperty, coerceArray
 import { get, findLastIndex, escape } from 'lodash-es';
 import { createFocusTrap } from 'focus-trap';
 import * as i1$1 from '@angular/cdk/a11y';
-import { FocusKeyManager, LiveAnnouncer } from '@angular/cdk/a11y';
+import { FocusKeyManager, LiveAnnouncer, InteractivityChecker } from '@angular/cdk/a11y';
 import * as i1 from '@angular/cdk/observers';
 import * as i1$5 from '@angular/cdk/overlay';
 import { ViewportRuler, OverlayConfig, OverlayContainer } from '@angular/cdk/overlay';
@@ -355,7 +355,7 @@ class AutoCompleteDirective {
          * By ensuring that we set all properties we can proceed with stable data.
          */
         this._zone.runOutsideAngular(() => {
-            const keyupEvent = fromEvent(this._elementRef.nativeElement, 'keyup');
+            const keyupEvent = fromEvent(this._elementRef.nativeElement, 'keydown');
             const compositionStartEvent = fromEvent(this._elementRef.nativeElement, 'compositionstart');
             const compositionEndEvent = fromEvent(this._elementRef.nativeElement, 'compositionend');
             keyupEvent
@@ -2093,6 +2093,10 @@ class FocusableItemDirective {
         this.cellFocusedEventAnnouncer = this._defaultItemFocusedEventAnnouncer;
         /** Event emitted when the cell receives focus, not being emitted when focus moves between item's children. */
         this.cellFocused = new EventEmitter();
+        /** Event emitted when a focusable child element is focused. */
+        this.focusableChildElementFocused = new EventEmitter();
+        /** @hidden */
+        this._parentFocusableItemFocused = new EventEmitter();
         /** Element reference. */
         this.elementRef = inject(ElementRef);
         /** @hidden */
@@ -2118,6 +2122,8 @@ class FocusableItemDirective {
         /** @hidden */
         this._document = inject(DOCUMENT);
         /** @hidden */
+        this._checker = inject(InteractivityChecker);
+        /** @hidden */
         this.element = () => this.elementRef.nativeElement;
         this._focusableObserver
             .observe(this.elementRef, false)
@@ -2133,11 +2139,6 @@ class FocusableItemDirective {
                 .subscribe(async () => {
                 await this._onFocusin();
             });
-            fromEvent(this.elementRef.nativeElement, 'focusout')
-                .pipe(takeUntilDestroyed())
-                .subscribe(() => {
-                this._onFocusout();
-            });
             fromEvent(this.elementRef.nativeElement, 'keydown')
                 .pipe(takeUntilDestroyed())
                 .subscribe((event) => {
@@ -2155,25 +2156,35 @@ class FocusableItemDirective {
     }
     /** Set tabbable state */
     setTabbable(state) {
-        this._tabbable = state;
-        this._renderer2.setAttribute(this.elementRef.nativeElement, 'tabindex', this._tabbable ? '0' : '-1');
-        if (state) {
-            this._enableTabbableElements();
-        }
-        else {
-            this._disableTabbableElements();
+        this._zone.runOutsideAngular(() => {
+            this._tabbable = state;
+            this._renderer2.setAttribute(this.elementRef.nativeElement, 'tabindex', this._tabbable ? '0' : '-1');
+        });
+    }
+    /** @hidden */
+    enableTabbableElements() {
+        if (this._tabbableElements.size === 0) {
+            return;
         }
+        this._tabbableElements.forEach((tabIndex, element) => (element.tabIndex = tabIndex));
+        this._tabbable = false;
+    }
+    /** @hidden */
+    disableTabbableElements() {
+        // Since we cannot select by tabindex attribute (links, inputs, buttons might not have one but still can be focusable),
+        // Select all elements from the cell and filter by tabIndex property.
+        Array.from(this.elementRef.nativeElement.querySelectorAll('*'))
+            .filter((elm) => elm.tabIndex >= 0)
+            .forEach((elm) => {
+            this._tabbableElements.set(elm, elm.tabIndex);
+            elm.tabIndex = -1;
+        });
     }
     /** @hidden */
     async _onFocusin() {
         if (!this.fdkFocusableItem) {
             return;
         }
-        if (this._timerId != null) {
-            clearTimeout(this._timerId);
-            this._timerId = null;
-            return;
-        }
         if (this._position) {
             this.cellFocused.next(this._position);
             if (this.cellFocusedEventAnnouncer) {
@@ -2181,27 +2192,28 @@ class FocusableItemDirective {
                 await this._liveAnnouncer.announce(this.cellFocusedEventAnnouncer(this._position));
             }
         }
-    }
-    /** @hidden */
-    _onFocusout() {
-        if (!this.fdkFocusableItem) {
-            return;
+        const activeEl = this._document.activeElement;
+        if (activeEl === this.elementRef.nativeElement) {
+            this._parentFocusableItemFocused.emit();
+        }
+        else if (activeEl && activeEl !== this.elementRef.nativeElement && this._checker.isFocusable(activeEl)) {
+            this.focusableChildElementFocused.emit();
         }
-        // Timeout is needed to prevent focusout event from being emitted when focus moves between item's children.
-        this._timerId = setTimeout(() => (this._timerId = null));
     }
     /** @hidden */
     _onKeydown(event) {
         if (!this.fdkFocusableItem) {
             return;
         }
-        const isFocused = this._document.activeElement === this.elementRef.nativeElement;
+        const activeEl = this._document.activeElement;
+        const isFocused = activeEl === this.elementRef.nativeElement;
         const shouldFocusChild = KeyUtil.isKeyCode(event, [ENTER, MAC_ENTER, F2]) && !event.shiftKey && isFocused;
         const shouldFocusCell = ((KeyUtil.isKeyCode(event, F2) && event.shiftKey) || KeyUtil.isKeyCode(event, ESCAPE)) && !isFocused;
         if (shouldFocusChild) {
             event.stopPropagation();
             const tabbableElement = this._tabbableElementService.getTabbableElement(this.elementRef.nativeElement, false, true);
             tabbableElement?.focus();
+            this.focusableChildElementFocused.emit();
             return;
         }
         else if (shouldFocusCell) {
@@ -2214,30 +2226,11 @@ class FocusableItemDirective {
         }
     }
     /** @hidden */
-    _enableTabbableElements() {
-        if (this._tabbableElements.size === 0) {
-            return;
-        }
-        this._tabbableElements.forEach((tabIndex, element) => (element.tabIndex = tabIndex));
-        this._tabbable = false;
-    }
-    /** @hidden */
-    _disableTabbableElements() {
-        // Since we cannot select by tabindex attribute (links, inputs, buttons might not have one but still can be focusable),
-        // Select all elements from the cell and filter by tabIndex property.
-        Array.from(this.elementRef.nativeElement.querySelectorAll('*'))
-            .filter((elm) => elm.tabIndex >= 0)
-            .forEach((elm) => {
-            this._tabbableElements.set(elm, elm.tabIndex);
-            elm.tabIndex = -1;
-        });
-    }
-    /** @hidden */
     _defaultItemFocusedEventAnnouncer(position) {
         return `Column ${position.colIndex + 1} of ${position.totalCols}, row: ${position.rowIndex + 1} of ${position.totalRows}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FocusableItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.1.4", type: FocusableItemDirective, isStandalone: true, selector: "[fdkFocusableItem]", inputs: { fdkFocusableItem: ["fdkFocusableItem", "fdkFocusableItem", booleanAttribute], cellFocusedEventAnnouncer: "cellFocusedEventAnnouncer" }, outputs: { cellFocused: "cellFocused" }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.1.4", type: FocusableItemDirective, isStandalone: true, selector: "[fdkFocusableItem]", inputs: { fdkFocusableItem: ["fdkFocusableItem", "fdkFocusableItem", booleanAttribute], cellFocusedEventAnnouncer: "cellFocusedEventAnnouncer" }, outputs: { cellFocused: "cellFocused", focusableChildElementFocused: "focusableChildElementFocused", _parentFocusableItemFocused: "_parentFocusableItemFocused" }, providers: [
             {
                 provide: FDK_FOCUSABLE_ITEM_DIRECTIVE,
                 useExisting: FocusableItemDirective
@@ -2263,6 +2256,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                 type: Input
             }], cellFocused: [{
                 type: Output
+            }], focusableChildElementFocused: [{
+                type: Output
+            }], _parentFocusableItemFocused: [{
+                type: Output
             }] } });
 
 class FocusableItemModule {
@@ -2643,7 +2640,8 @@ class FocusableListDirective {
                 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                 this._gridItemFocused$.next(directiveItem._position);
             }
-            this.itemFocused.next({ index, total: items.length });
+            const id = getItemElement(item)?.id ?? null;
+            this.itemFocused.next({ index, total: items.length, id });
             this._focusableItems.forEach((i) => i.setTabbable(i === directiveItem));
             this._keyManager?.setActiveItem(index);
         }));
@@ -2761,7 +2759,21 @@ class FocusableGridDirective {
     ngAfterViewInit() {
         this._focusableLists.changes
             .pipe(startWith$1(this._focusableLists), takeUntilDestroyed(this._destroyRef))
-            .subscribe((lists) => lists.forEach((list, index) => list._setGridPosition({ rowIndex: index, totalRows: this._focusableLists.length })));
+            .subscribe((lists) => {
+            lists.forEach((list, index) => {
+                list._setGridPosition({ rowIndex: index, totalRows: this._focusableLists.length });
+                list._focusableItems.changes
+                    .pipe(startWith$1(list._focusableItems), takeUntilDestroyed(this._destroyRef))
+                    .subscribe((items) => {
+                    this._handleItemSubscriptions(items);
+                });
+            });
+        });
+        this._focusableItems.changes
+            .pipe(startWith$1(this._focusableItems), takeUntilDestroyed(this._destroyRef))
+            .subscribe((items) => {
+            this._handleItemSubscriptions(items);
+        });
         this._focusableLists.changes
             .pipe(startWith$1(this._focusableLists), switchMap((queryList) => merge(...queryList.toArray().map((list) => list._gridListFocused$))), takeUntilDestroyed(this._destroyRef))
             .subscribe((focusedEvent) => {
@@ -2861,13 +2873,38 @@ class FocusableGridDirective {
         }
         return this.shortRowFocus === 'first' ? 0 : list._focusableItems.length - 1;
     }
+    /** @hidden */
+    _handleItemSubscriptions(items) {
+        items.forEach((item) => {
+            item.focusableChildElementFocused.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
+                this._focusableLists.forEach((focusableList) => {
+                    focusableList._focusableItems.forEach((focusableItem) => {
+                        focusableItem.setTabbable(false);
+                        focusableItem.enableTabbableElements();
+                    });
+                });
+            });
+            item._parentFocusableItemFocused.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
+                this._focusableLists.forEach((focusableList) => {
+                    focusableList._focusableItems.forEach((focusableItem) => {
+                        if (item !== focusableItem) {
+                            focusableItem.disableTabbableElements();
+                        }
+                        else {
+                            focusableItem.enableTabbableElements();
+                        }
+                    });
+                });
+            });
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FocusableGridDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.1.4", type: FocusableGridDirective, isStandalone: true, selector: "[fdkFocusableGrid]", inputs: { contentDirection: "contentDirection", wrapHorizontally: ["wrapHorizontally", "wrapHorizontally", booleanAttribute], shortRowFocus: "shortRowFocus" }, outputs: { itemFocused: "itemFocused", rowFocused: "rowFocused" }, providers: [
             {
                 provide: FDK_FOCUSABLE_GRID_DIRECTIVE,
                 useExisting: FocusableGridDirective
             }
-        ], queries: [{ propertyName: "_focusableLists", predicate: FDK_FOCUSABLE_LIST_DIRECTIVE, descendants: true }], exportAs: ["fdkFocusableGrid"], ngImport: i0 }); }
+        ], queries: [{ propertyName: "_focusableLists", predicate: FDK_FOCUSABLE_LIST_DIRECTIVE, descendants: true }, { propertyName: "_focusableItems", predicate: FDK_FOCUSABLE_ITEM_DIRECTIVE, descendants: true }], exportAs: ["fdkFocusableGrid"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FocusableGridDirective, decorators: [{
             type: Directive,
@@ -2896,6 +2933,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
             }], _focusableLists: [{
                 type: ContentChildren,
                 args: [FDK_FOCUSABLE_LIST_DIRECTIVE, { descendants: true }]
+            }], _focusableItems: [{
+                type: ContentChildren,
+                args: [FDK_FOCUSABLE_ITEM_DIRECTIVE, { descendants: true }]
             }] } });
 
 class FocusableGridModule {