@ngutil/aria 0.0.78 → 0.0.80

package/fesm2022/ngutil-aria.mjs

@@ -1,12 +1,12 @@
 import { DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, NgZone, Injectable, Inject, ElementRef, effect, Directive, input, computed, signal, untracked, NgModule } from '@angular/core';
-import { merge, fromEvent, map, share, filter, shareReplay, startWith, throttleTime, switchMap, timer, take, distinctUntilChanged, combineLatest, BehaviorSubject, of, debounceTime, Observable, EMPTY, from, tap, Subject, connect, scan, takeWhile, finalize, animationFrames } from 'rxjs';
+import { inject, NgZone, Injectable, ElementRef, effect, Directive, input, computed, signal, untracked, NgModule } from '@angular/core';
+import { merge, fromEvent, map, share, filter, shareReplay, startWith, throttleTime, switchMap, timer, take, distinctUntilChanged, BehaviorSubject, connect, Subject, tap, finalize, combineLatest, Observable, of, debounceTime, EMPTY, from, scan, takeWhile, animationFrames } from 'rxjs';
 import { FocusTrapFactory } from '@angular/cdk/a11y';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { isEqual, clamp } from 'lodash-es';
 import { focusable, isFocusable } from 'tabbable';
 import { coerceElement, Destructible, isElementInput, __zone_symbol__, isFalsy, isTruthy, deepClone, coerceBoolAttr } from '@ngutil/common';
-import { clamp } from 'lodash-es';
 
 const EVENT_OPTIONS$1 = {
     capture: true,
@@ -58,50 +58,75 @@ const EVENT_OPTIONS = {
     passive: true
 };
 class FocusService {
-    #activity = inject(ActivityService);
-    #focusTrap = inject(FocusTrapFactory);
-    constructor(document, zone) {
-        this.events = zone.runOutsideAngular(() => {
-            const focus = fromEvent(document, "focus", EVENT_OPTIONS).pipe(map(e => e.target));
-            const blur = fromEvent(document, "blur", EVENT_OPTIONS).pipe(startWith(null), map(e => e?.target || null));
-            return combineLatest({
-                activity: this.#activity.events$.pipe(filter(event => event.type !== "mousemove"), distinctUntilChanged((prev, curr) => {
-                    if (prev && curr) {
-                        return prev.origin === curr.origin && prev.node === curr.node;
-                    }
-                    else {
-                        return false;
+    constructor() {
+        this.#activity = inject(ActivityService);
+        this.#focusTrap = inject(FocusTrapFactory);
+        this.#zone = inject(NgZone);
+        this.#document = inject(DOCUMENT);
+        this.#originOverrides = new BehaviorSubject(new Map());
+        this.#focus = listener(this.#document, this.#zone, "focus", EVENT_OPTIONS).pipe(connect(focus => this.#zone.runOutsideAngular(() => {
+            let lastFocused = null;
+            const sideEffect = new Subject();
+            // if element removed form document, emit blur & focus
+            const mutation = new MutationObserver(mutations => {
+                for (const mutation of mutations) {
+                    if (mutation.type === "childList" && mutation.removedNodes.length > 0) {
+                        for (const removed of Array.from(mutation.removedNodes)) {
+                            if (removed === lastFocused || removed.contains(lastFocused)) {
+                                this.#blurSide.next(lastFocused);
+                                sideEffect.next(this.#document.activeElement);
+                                return;
+                            }
+                        }
                     }
-                })),
-                focus: focus,
-                blur: blur
-            }).pipe(takeUntilDestroyed(), map(({ activity, focus, blur }) => {
-                // console.log({ activity, focus, blur })
-                // If focus in with alt+tab
-                if (blur === document && activity.origin === "keyboard") {
-                    return { origin: "program", element: focus };
-                }
-                if (focus === document) {
-                    return { origin: "program", element: focus };
-                }
-                // If press tab button, first fire the event in the currently focused element
-                if (focus === blur) {
-                    return null;
-                }
-                // When press tab, the activity is on the current fucesd element,
-                // so when blur is changed to it, the focus change is completed
-                if (activity.origin === "keyboard" && isActivityElement(activity.node, blur)) {
-                    return { origin: "keyboard", element: focus };
                 }
-                if (isActivityElement(activity.node, focus)) {
-                    return { origin: activity.origin, element: focus };
-                }
-                else {
-                    return { origin: "program", element: focus };
-                }
-            }), filter(v => !!v), shareReplay(1));
-        });
+            });
+            mutation.observe(this.#document, { subtree: true, childList: true });
+            return merge(focus.pipe(tap(node => (lastFocused = node)), finalize(() => mutation.disconnect())), sideEffect);
+        })), distinctUntilChanged(strictEq));
+        this.#blurEvent = listener(this.#document, this.#zone, "blur", EVENT_OPTIONS).pipe(startWith(null));
+        this.#blurSide = new Subject();
+        this.#blur = merge(this.#blurEvent, this.#blurSide).pipe(distinctUntilChanged(strictEq));
+        this.events = this.#zone.runOutsideAngular(() => combineLatest({
+            activity: this.#activity.events$.pipe(filter(event => event.type !== "mousemove")),
+            focus: this.#focus,
+            blur: this.#blur.pipe(tap(el => this.#delOrigin(el))),
+            overrides: this.#originOverrides
+        }).pipe(takeUntilDestroyed(), map(({ activity, focus, blur, overrides }) => {
+            const override = overrides.get(focus);
+            // If focus in with alt+tab
+            if (blur === document && activity.origin === "keyboard") {
+                return { origin: override || "program", element: focus };
+            }
+            if (focus === document) {
+                return { origin: override || "program", element: focus };
+            }
+            // If press tab button, first fire the event in the currently focused element
+            if (focus === blur) {
+                return null;
+            }
+            // When press tab, the activity is on the current fucesd element,
+            // so when blur is changed to it, the focus change is completed
+            if (activity.origin === "keyboard" && isActivityElement(activity.node, blur)) {
+                return { origin: override || "keyboard", element: focus };
+            }
+            if (isActivityElement(activity.node, focus)) {
+                return { origin: override || activity.origin, element: focus };
+            }
+            else {
+                return { origin: override || "program", element: focus };
+            }
+        }), filter(v => !!v), distinctUntilChanged(isEqual), shareReplay({ bufferSize: 1, refCount: true })));
     }
+    #activity;
+    #focusTrap;
+    #zone;
+    #document;
+    #originOverrides;
+    #focus;
+    #blurEvent;
+    #blurSide;
+    #blur;
     watch(element) {
         const el = coerceElement(element);
         return this.events.pipe(map(event => {
@@ -112,38 +137,56 @@ class FocusService {
             return { element: el, origin: null };
         }));
     }
-    focus(node, _origin) {
-        // TODO: focus origin
-        node.focus();
+    focus(node, origin) {
+        this.#setOrigin(node, origin);
+        coerceElement(node).focus();
     }
     queryFocusable(inside) {
-        return focusable(inside, { includeContainer: false });
+        return focusable(coerceElement(inside), { includeContainer: false });
     }
     getFirstFocusable(inside) {
         return this.queryFocusable(inside)[0];
     }
     isFocusable(node) {
-        return isFocusable(node);
+        return isFocusable(coerceElement(node));
     }
     focusTrap(inside, deferCaptureElements = false) {
-        return this.#focusTrap.create(inside, deferCaptureElements);
+        return this.#focusTrap.create(coerceElement(inside), deferCaptureElements);
+    }
+    #setOrigin(el, origin) {
+        const target = coerceElement(el);
+        const map = this.#originOverrides.value;
+        map.set(target, origin);
+        this.#originOverrides.next(map);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: FocusService, deps: [{ token: DOCUMENT }, { token: NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    #delOrigin(el) {
+        const target = coerceElement(el);
+        const map = this.#originOverrides.value;
+        map.delete(target);
+        this.#originOverrides.next(map);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: FocusService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: FocusService, providedIn: "root" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: FocusService, decorators: [{
             type: Injectable,
             args: [{ providedIn: "root" }]
-        }], ctorParameters: () => [{ type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i0.NgZone, decorators: [{
-                    type: Inject,
-                    args: [NgZone]
-                }] }] });
+        }] });
 function isActivityElement(activityEl, focused) {
     return activityEl != null && focused != null && (activityEl === focused || focused.contains(activityEl));
 }
+function listener(doc, zone, type, options) {
+    return new Observable((dst) => zone.runOutsideAngular(() => {
+        const handler = (e) => {
+            dst.next(e.target);
+        };
+        document.addEventListener(type, handler, options);
+        return () => document.removeEventListener(type, handler, options);
+    }));
+}
+function strictEq(a, b) {
+    return a === b;
+}
 
 // TODO: implement
 class FocusTrap extends Destructible {
@@ -642,13 +685,14 @@ class GestureService {
             this.#enableTouchAction();
         }), filter(() => false)))), 
         // Select active watchers
-        map(event => {
-            updatePointers(event);
-            const eventTarget = event.origin.target;
+        map((detail) => {
+            updatePointers(detail);
+            const eventTarget = detail.origin.target;
+            detail.target = eventTarget;
             let includeScrollDistance = false;
             const gestures = this.#watchers
                 .filter(({ gesture, el }) => (el === eventTarget || ("contains" in el && el.contains(eventTarget))) &&
-                gesture.shouldCapture(event))
+                gesture.shouldCapture(detail))
                 .reduce((gestures, { gesture }) => {
                 if (!gestures.has(gesture)) {
                     includeScrollDistance = includeScrollDistance || gesture.includeScrollDistance;
@@ -656,7 +700,7 @@ class GestureService {
                 }
                 return gestures;
             }, new Map());
-            return { detail: event, gestures, includeScrollDistance };
+            return { detail: detail, gestures, includeScrollDistance };
         }), filter(({ gestures }) => gestures.size > 0), tap(this.#disableTouchAction)
         // finalize(() => console.log("FINALIZE BEGIN"))
         )