@furystack/shades 13.2.2 → 15.0.0

package/esm/services/spatial-navigation-service.js

@@ -1,13 +1,4 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-import { Injectable } from '@furystack/inject';
+import { defineService } from '@furystack/inject';
 import { ObservableValue } from '@furystack/utils';
 const DEFAULT_FOCUSABLE_SELECTOR = [
     '[tabindex]:not([tabindex="-1"])',
@@ -193,331 +184,307 @@ const shouldPassthroughArrowKeys = (element, key) => {
     return false;
 };
 /**
- * Service for D-pad / arrow-key spatial navigation across interactive elements.
- *
- * Intercepts arrow key events and moves focus spatially based on element geometry.
- * Supports section boundaries via `data-nav-section` attributes and optional
- * cross-section navigation.
- *
- * @example
- * ```typescript
- * // Opt in to spatial navigation
- * const spatialNav = injector.getInstance(SpatialNavigationService)
- *
- * // Disable during video playback
- * spatialNav.enabled.setValue(false)
- *
- * // Re-enable
- * spatialNav.enabled.setValue(true)
- * ```
+ * Configuration token for {@link SpatialNavigationService}. Override via
+ * {@link configureSpatialNavigation} before the service is first resolved.
  */
-let SpatialNavigationService = class SpatialNavigationService {
-    /** Toggle spatial navigation on/off at runtime */
-    enabled;
-    /** The currently active section name (from data-nav-section), or null if none */
-    activeSection = new ObservableValue(null);
-    /** Remembered last-focused element per section for focus restoration */
-    focusMemory = new Map();
-    focusTrapStack = [];
-    focusableSelector;
-    crossSectionNavigation;
-    backspaceGoesBack;
-    escapeGoesToParentSection;
-    constructor(options = {}) {
-        this.enabled = new ObservableValue(options.initiallyEnabled ?? true);
-        this.focusableSelector = options.focusableSelector ?? DEFAULT_FOCUSABLE_SELECTOR;
-        this.crossSectionNavigation = options.crossSectionNavigation ?? true;
-        this.backspaceGoesBack = options.backspaceGoesBack ?? false;
-        this.escapeGoesToParentSection = options.escapeGoesToParentSection ?? false;
-        window.addEventListener('keydown', this.handleKeyDown);
-    }
-    [Symbol.dispose]() {
-        window.removeEventListener('keydown', this.handleKeyDown);
-        this.enabled[Symbol.dispose]();
-        this.activeSection[Symbol.dispose]();
-        this.focusMemory.clear();
-        this.focusTrapStack.length = 0;
-    }
-    /**
-     * Push a focus trap onto the stack. While the trap is active, cross-section
-     * navigation is blocked and `activeSection` is locked to `sectionName`.
-     * Supports nesting — only the topmost trap is enforced.
-     */
-    pushFocusTrap(sectionName) {
-        this.focusTrapStack.push(sectionName);
-        this.activeSection.setValue(sectionName);
-    }
-    /**
-     * Remove a focus trap from the stack. If other traps remain, the topmost
-     * one becomes active. Otherwise `activeSection` reverts to `previousSection`.
-     */
-    popFocusTrap(sectionName, previousSection) {
-        const idx = this.focusTrapStack.lastIndexOf(sectionName);
-        if (idx !== -1) {
-            this.focusTrapStack.splice(idx, 1);
-        }
-        const top = this.focusTrapStack[this.focusTrapStack.length - 1];
-        this.activeSection.setValue(top ?? previousSection ?? null);
-    }
-    get activeTrap() {
-        return this.focusTrapStack[this.focusTrapStack.length - 1] ?? null;
-    }
-    /** Programmatically move focus in a direction */
-    moveFocus(direction) {
-        const activeElement = document.activeElement;
-        if (!activeElement || activeElement === document.body) {
-            this.focusFirstElement();
-            return;
-        }
-        const currentSection = this.findContainingSection(activeElement);
-        const currentSectionName = currentSection?.getAttribute('data-nav-section') ?? null;
-        this.activeSection.setValue(currentSectionName);
-        const searchRoot = currentSection ?? document;
-        const candidates = this.getFocusableCandidates(searchRoot, activeElement);
-        const currentRect = activeElement.getBoundingClientRect();
-        let target = this.findNearestInDirection(currentRect, candidates, direction);
-        if (!target) {
-            const relaxedCandidates = this.getFocusableCandidates(searchRoot, activeElement, {
-                skipScrollVisibility: true,
+export const SpatialNavigationSettings = defineService({
+    name: '@furystack/shades/SpatialNavigationSettings',
+    lifetime: 'singleton',
+    factory: () => ({}),
+});
+export const SpatialNavigationService = defineService({
+    name: '@furystack/shades/SpatialNavigationService',
+    lifetime: 'singleton',
+    factory: ({ inject, onDispose }) => {
+        const options = inject(SpatialNavigationSettings);
+        const enabled = new ObservableValue(options.initiallyEnabled ?? true);
+        const activeSection = new ObservableValue(null);
+        const focusMemory = new Map();
+        const focusTrapStack = [];
+        const focusableSelector = options.focusableSelector ?? DEFAULT_FOCUSABLE_SELECTOR;
+        const crossSectionNavigation = options.crossSectionNavigation ?? true;
+        const backspaceGoesBack = options.backspaceGoesBack ?? false;
+        const escapeGoesToParentSection = options.escapeGoesToParentSection ?? false;
+        const getActiveTrap = () => focusTrapStack[focusTrapStack.length - 1] ?? null;
+        const pushFocusTrap = (sectionName) => {
+            focusTrapStack.push(sectionName);
+            activeSection.setValue(sectionName);
+        };
+        const popFocusTrap = (sectionName, previousSection) => {
+            const idx = focusTrapStack.lastIndexOf(sectionName);
+            if (idx !== -1) {
+                focusTrapStack.splice(idx, 1);
+            }
+            const top = focusTrapStack[focusTrapStack.length - 1];
+            activeSection.setValue(top ?? previousSection ?? null);
+        };
+        const findContainingSection = (element) => element.closest('[data-nav-section]');
+        const isVisibleInScrollContainers = (el, rect) => {
+            const centerX = rect.left + rect.width / 2;
+            const centerY = rect.top + rect.height / 2;
+            const hasOverflow = (val) => val !== '' && val !== 'visible';
+            let ancestor = el.parentElement;
+            while (ancestor) {
+                const style = getComputedStyle(ancestor);
+                if (hasOverflow(style.overflow) || hasOverflow(style.overflowX) || hasOverflow(style.overflowY)) {
+                    const containerRect = ancestor.getBoundingClientRect();
+                    if (centerX < containerRect.left ||
+                        centerX > containerRect.right ||
+                        centerY < containerRect.top ||
+                        centerY > containerRect.bottom) {
+                        return false;
+                    }
+                }
+                ancestor = ancestor.parentElement;
+            }
+            return true;
+        };
+        const getFocusableCandidates = (root, exclude, candidateOptions) => {
+            return Array.from(root.querySelectorAll(focusableSelector)).filter((el) => {
+                if (el === exclude)
+                    return false;
+                if (!el.hasAttribute('data-spatial-nav-target') && el.closest('[data-spatial-nav-target]'))
+                    return false;
+                const rect = el.getBoundingClientRect();
+                if (rect.width <= 0 || rect.height <= 0)
+                    return false;
+                if (candidateOptions?.skipScrollVisibility)
+                    return true;
+                return isVisibleInScrollContainers(el, rect);
             });
-            target = this.findNearestInDirection(currentRect, relaxedCandidates, direction);
-        }
-        if (target) {
-            this.storeFocusMemory(currentSectionName, activeElement);
-            target.focus();
-            target.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-            const targetSection = this.findContainingSection(target);
-            this.activeSection.setValue(targetSection?.getAttribute('data-nav-section') ?? null);
-            return;
-        }
-        if (this.crossSectionNavigation && currentSection && !this.activeTrap) {
-            this.navigateCrossSection(activeElement, currentSection, direction);
-        }
-    }
-    /** Programmatically activate (click) the currently focused element */
-    activateFocused() {
-        const { activeElement } = document;
-        if (activeElement && activeElement !== document.body) {
-            ;
-            activeElement.click();
-        }
-    }
-    handleKeyDown = (ev) => {
-        if (!this.enabled.getValue())
-            return;
-        if (ev.defaultPrevented)
-            return;
-        const { activeElement } = document;
-        if (activeElement && isInsidePassthrough(activeElement))
-            return;
-        if (activeElement && shouldPassthroughArrowKeys(activeElement, ev.key)) {
-            return;
-        }
-        switch (ev.key) {
-            case 'ArrowUp':
-                ev.preventDefault();
-                this.moveFocus('up');
-                break;
-            case 'ArrowDown':
-                ev.preventDefault();
-                this.moveFocus('down');
-                break;
-            case 'ArrowLeft':
-                ev.preventDefault();
-                this.moveFocus('left');
-                break;
-            case 'ArrowRight':
-                ev.preventDefault();
-                this.moveFocus('right');
-                break;
-            case 'Enter':
-                if (activeElement && isTextInput(activeElement))
-                    break;
-                ev.preventDefault();
-                this.activateFocused();
-                break;
-            case 'Backspace':
-                if (this.backspaceGoesBack && !(activeElement && isTextInput(activeElement))) {
-                    ev.preventDefault();
-                    history.back();
+        };
+        const findNearestInDirection = (currentRect, candidates, direction) => {
+            const currentCenter = getElementCenter(currentRect);
+            let nearest = null;
+            let nearestDistance = Infinity;
+            for (const candidate of candidates) {
+                const candidateRect = candidate.getBoundingClientRect();
+                if (!isInDirection(currentRect, candidateRect, direction))
+                    continue;
+                const candidateCenter = getElementCenter(candidateRect);
+                const distance = spatialDistance(currentCenter, candidateCenter, direction);
+                if (distance < nearestDistance) {
+                    nearestDistance = distance;
+                    nearest = candidate;
                 }
-                break;
-            case 'Escape':
-                if (activeElement && activeElement !== document.body && shouldEscapeBlurElement(activeElement)) {
-                    ev.preventDefault();
-                    activeElement.blur();
-                    break;
+            }
+            return nearest;
+        };
+        const storeFocusMemory = (sectionName, element) => {
+            if (sectionName) {
+                focusMemory.set(sectionName, new WeakRef(element));
+            }
+        };
+        const navigateCrossSection = (activeElement, currentSection, direction) => {
+            const currentSectionName = currentSection.getAttribute('data-nav-section');
+            const allFocusable = Array.from(document.querySelectorAll(focusableSelector)).filter((el) => {
+                if (el === activeElement)
+                    return false;
+                if (currentSection.contains(el))
+                    return false;
+                if (!el.hasAttribute('data-spatial-nav-target') && el.closest('[data-spatial-nav-target]'))
+                    return false;
+                const rect = el.getBoundingClientRect();
+                return rect.width > 0 && rect.height > 0 && isVisibleInScrollContainers(el, rect);
+            });
+            const currentRect = activeElement.getBoundingClientRect();
+            const nearest = findNearestInDirection(currentRect, allFocusable, direction);
+            if (nearest) {
+                storeFocusMemory(currentSectionName, activeElement);
+                const targetSection = findContainingSection(nearest);
+                const targetSectionName = targetSection?.getAttribute('data-nav-section') ?? null;
+                const remembered = targetSectionName ? focusMemory.get(targetSectionName)?.deref() : null;
+                if (remembered &&
+                    remembered !== activeElement &&
+                    targetSection?.contains(remembered) &&
+                    remembered.matches(focusableSelector)) {
+                    const rememberedRect = remembered.getBoundingClientRect();
+                    if (rememberedRect.width > 0 &&
+                        rememberedRect.height > 0 &&
+                        isVisibleInScrollContainers(remembered, rememberedRect)) {
+                        ;
+                        remembered.focus();
+                        remembered.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+                        activeSection.setValue(targetSectionName);
+                        return;
+                    }
                 }
-                if (this.escapeGoesToParentSection) {
-                    this.moveToParentSection();
+                nearest.focus();
+                nearest.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+                activeSection.setValue(targetSectionName);
+            }
+        };
+        const focusFirstElement = () => {
+            const trap = getActiveTrap();
+            if (trap) {
+                const trapSection = document.querySelector(`[data-nav-section="${escapeCssString(trap)}"]`);
+                if (trapSection) {
+                    const firstFocusable = trapSection.querySelector(focusableSelector);
+                    if (firstFocusable) {
+                        ;
+                        firstFocusable.focus();
+                        activeSection.setValue(trap);
+                        return;
+                    }
                 }
-                break;
-            default:
-                break;
-        }
-    };
-    focusFirstElement() {
-        const trap = this.activeTrap;
-        if (trap) {
-            const trapSection = document.querySelector(`[data-nav-section="${escapeCssString(trap)}"]`);
-            if (trapSection) {
-                const firstFocusable = trapSection.querySelector(this.focusableSelector);
+            }
+            const sections = document.querySelectorAll('[data-nav-section]');
+            if (sections.length > 0) {
+                const firstFocusable = sections[0].querySelector(focusableSelector);
                 if (firstFocusable) {
                     ;
                     firstFocusable.focus();
-                    this.activeSection.setValue(trap);
+                    activeSection.setValue(sections[0].getAttribute('data-nav-section'));
                     return;
                 }
             }
-        }
-        const sections = document.querySelectorAll('[data-nav-section]');
-        if (sections.length > 0) {
-            const firstFocusable = sections[0].querySelector(this.focusableSelector);
+            const firstFocusable = document.querySelector(focusableSelector);
             if (firstFocusable) {
                 ;
                 firstFocusable.focus();
-                this.activeSection.setValue(sections[0].getAttribute('data-nav-section'));
+            }
+        };
+        const moveFocus = (direction) => {
+            const activeElement = document.activeElement;
+            if (!activeElement || activeElement === document.body) {
+                focusFirstElement();
                 return;
             }
-        }
-        const firstFocusable = document.querySelector(this.focusableSelector);
-        if (firstFocusable) {
-            ;
-            firstFocusable.focus();
-        }
-    }
-    findContainingSection(element) {
-        return element.closest('[data-nav-section]');
-    }
-    isVisibleInScrollContainers(el, rect) {
-        const centerX = rect.left + rect.width / 2;
-        const centerY = rect.top + rect.height / 2;
-        const hasOverflow = (val) => val !== '' && val !== 'visible';
-        let ancestor = el.parentElement;
-        while (ancestor) {
-            const style = getComputedStyle(ancestor);
-            if (hasOverflow(style.overflow) || hasOverflow(style.overflowX) || hasOverflow(style.overflowY)) {
-                const containerRect = ancestor.getBoundingClientRect();
-                if (centerX < containerRect.left ||
-                    centerX > containerRect.right ||
-                    centerY < containerRect.top ||
-                    centerY > containerRect.bottom) {
-                    return false;
-                }
+            const currentSection = findContainingSection(activeElement);
+            const currentSectionName = currentSection?.getAttribute('data-nav-section') ?? null;
+            activeSection.setValue(currentSectionName);
+            const searchRoot = currentSection ?? document;
+            const candidates = getFocusableCandidates(searchRoot, activeElement);
+            const currentRect = activeElement.getBoundingClientRect();
+            let target = findNearestInDirection(currentRect, candidates, direction);
+            if (!target) {
+                const relaxedCandidates = getFocusableCandidates(searchRoot, activeElement, {
+                    skipScrollVisibility: true,
+                });
+                target = findNearestInDirection(currentRect, relaxedCandidates, direction);
             }
-            ancestor = ancestor.parentElement;
-        }
-        return true;
-    }
-    getFocusableCandidates(root, exclude, options) {
-        return Array.from(root.querySelectorAll(this.focusableSelector)).filter((el) => {
-            if (el === exclude)
-                return false;
-            if (!el.hasAttribute('data-spatial-nav-target') && el.closest('[data-spatial-nav-target]'))
-                return false;
-            const rect = el.getBoundingClientRect();
-            if (rect.width <= 0 || rect.height <= 0)
-                return false;
-            if (options?.skipScrollVisibility)
-                return true;
-            return this.isVisibleInScrollContainers(el, rect);
-        });
-    }
-    findNearestInDirection(currentRect, candidates, direction) {
-        const currentCenter = getElementCenter(currentRect);
-        let nearest = null;
-        let nearestDistance = Infinity;
-        for (const candidate of candidates) {
-            const candidateRect = candidate.getBoundingClientRect();
-            if (!isInDirection(currentRect, candidateRect, direction))
-                continue;
-            const candidateCenter = getElementCenter(candidateRect);
-            const distance = spatialDistance(currentCenter, candidateCenter, direction);
-            if (distance < nearestDistance) {
-                nearestDistance = distance;
-                nearest = candidate;
+            if (target) {
+                storeFocusMemory(currentSectionName, activeElement);
+                target.focus();
+                target.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+                const targetSection = findContainingSection(target);
+                activeSection.setValue(targetSection?.getAttribute('data-nav-section') ?? null);
+                return;
             }
-        }
-        return nearest;
-    }
-    navigateCrossSection(activeElement, currentSection, direction) {
-        const currentSectionName = currentSection.getAttribute('data-nav-section');
-        const allFocusable = Array.from(document.querySelectorAll(this.focusableSelector)).filter((el) => {
-            if (el === activeElement)
-                return false;
-            if (currentSection.contains(el))
-                return false;
-            if (!el.hasAttribute('data-spatial-nav-target') && el.closest('[data-spatial-nav-target]'))
-                return false;
-            const rect = el.getBoundingClientRect();
-            return rect.width > 0 && rect.height > 0 && this.isVisibleInScrollContainers(el, rect);
-        });
-        const currentRect = activeElement.getBoundingClientRect();
-        const nearest = this.findNearestInDirection(currentRect, allFocusable, direction);
-        if (nearest) {
-            this.storeFocusMemory(currentSectionName, activeElement);
-            const targetSection = this.findContainingSection(nearest);
-            const targetSectionName = targetSection?.getAttribute('data-nav-section') ?? null;
-            const remembered = targetSectionName ? this.focusMemory.get(targetSectionName)?.deref() : null;
-            if (remembered &&
-                remembered !== activeElement &&
-                targetSection?.contains(remembered) &&
-                remembered.matches(this.focusableSelector)) {
-                const rememberedRect = remembered.getBoundingClientRect();
-                if (rememberedRect.width > 0 &&
-                    rememberedRect.height > 0 &&
-                    this.isVisibleInScrollContainers(remembered, rememberedRect)) {
-                    ;
-                    remembered.focus();
-                    remembered.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-                    this.activeSection.setValue(targetSectionName);
-                    return;
-                }
+            if (crossSectionNavigation && currentSection && !getActiveTrap()) {
+                navigateCrossSection(activeElement, currentSection, direction);
             }
-            nearest.focus();
-            nearest.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-            this.activeSection.setValue(targetSectionName);
-        }
-    }
-    storeFocusMemory(sectionName, element) {
-        if (sectionName) {
-            this.focusMemory.set(sectionName, new WeakRef(element));
-        }
-    }
-    moveToParentSection() {
-        const { activeElement } = document;
-        if (!activeElement || activeElement === document.body)
-            return;
-        const currentSection = this.findContainingSection(activeElement);
-        if (!currentSection)
-            return;
-        const parentSection = currentSection.parentElement?.closest('[data-nav-section]');
-        if (!parentSection)
-            return;
-        const firstFocusable = parentSection.querySelector(this.focusableSelector);
-        if (firstFocusable) {
-            ;
-            firstFocusable.focus();
-            this.activeSection.setValue(parentSection.getAttribute('data-nav-section'));
-        }
-    }
-};
-SpatialNavigationService = __decorate([
-    Injectable({ lifetime: 'singleton' }),
-    __metadata("design:paramtypes", [Object])
-], SpatialNavigationService);
-export { SpatialNavigationService };
+        };
+        const activateFocused = () => {
+            const { activeElement } = document;
+            if (activeElement && activeElement !== document.body) {
+                ;
+                activeElement.click();
+            }
+        };
+        const moveToParentSection = () => {
+            const { activeElement } = document;
+            if (!activeElement || activeElement === document.body)
+                return;
+            const currentSection = findContainingSection(activeElement);
+            if (!currentSection)
+                return;
+            const parentSection = currentSection.parentElement?.closest('[data-nav-section]');
+            if (!parentSection)
+                return;
+            const firstFocusable = parentSection.querySelector(focusableSelector);
+            if (firstFocusable) {
+                ;
+                firstFocusable.focus();
+                activeSection.setValue(parentSection.getAttribute('data-nav-section'));
+            }
+        };
+        const handleKeyDown = (ev) => {
+            if (!enabled.getValue())
+                return;
+            if (ev.defaultPrevented)
+                return;
+            const { activeElement } = document;
+            if (activeElement && isInsidePassthrough(activeElement))
+                return;
+            if (activeElement && shouldPassthroughArrowKeys(activeElement, ev.key)) {
+                return;
+            }
+            switch (ev.key) {
+                case 'ArrowUp':
+                    ev.preventDefault();
+                    moveFocus('up');
+                    break;
+                case 'ArrowDown':
+                    ev.preventDefault();
+                    moveFocus('down');
+                    break;
+                case 'ArrowLeft':
+                    ev.preventDefault();
+                    moveFocus('left');
+                    break;
+                case 'ArrowRight':
+                    ev.preventDefault();
+                    moveFocus('right');
+                    break;
+                case 'Enter':
+                    if (activeElement && isTextInput(activeElement))
+                        break;
+                    ev.preventDefault();
+                    activateFocused();
+                    break;
+                case 'Backspace':
+                    if (backspaceGoesBack && !(activeElement && isTextInput(activeElement))) {
+                        ev.preventDefault();
+                        history.back();
+                    }
+                    break;
+                case 'Escape':
+                    if (activeElement && activeElement !== document.body && shouldEscapeBlurElement(activeElement)) {
+                        ev.preventDefault();
+                        activeElement.blur();
+                        break;
+                    }
+                    if (escapeGoesToParentSection) {
+                        moveToParentSection();
+                    }
+                    break;
+                default:
+                    break;
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        onDispose(() => {
+            window.removeEventListener('keydown', handleKeyDown);
+            // eslint-disable-next-line furystack/prefer-using-wrapper -- Disposal is deferred to the injector's onDispose hook.
+            enabled[Symbol.dispose]();
+            // eslint-disable-next-line furystack/prefer-using-wrapper -- Disposal is deferred to the injector's onDispose hook.
+            activeSection[Symbol.dispose]();
+            focusMemory.clear();
+            focusTrapStack.length = 0;
+        });
+        return {
+            enabled,
+            activeSection,
+            pushFocusTrap,
+            popFocusTrap,
+            moveFocus,
+            activateFocused,
+        };
+    },
+});
 /**
  * Configures spatial navigation options before the service is first instantiated.
- * Must be called **before** `SpatialNavigationService` is first resolved from the injector.
- * @param injector The root injector
- * @param options Configuration options for spatial navigation
+ * Rebinds {@link SpatialNavigationSettings} and invalidates the cached
+ * {@link SpatialNavigationService}. Must be called **before** the service is
+ * first resolved — calling afterwards drops the cached instance without
+ * disposing it (listeners leak until the injector is disposed).
+ * @param injector The root injector.
+ * @param options Configuration options for spatial navigation.
  */
 export const configureSpatialNavigation = (injector, options) => {
-    if (injector.cachedSingletons.has(SpatialNavigationService)) {
-        throw new Error('configureSpatialNavigation must be called before the SpatialNavigationService is instantiated');
-    }
-    const service = new SpatialNavigationService(options);
-    injector.setExplicitInstance(service, SpatialNavigationService);
+    injector.bind(SpatialNavigationSettings, () => options);
+    injector.invalidate(SpatialNavigationSettings);
+    injector.invalidate(SpatialNavigationService);
 };
 //# sourceMappingURL=spatial-navigation-service.js.map