ng-primitives 0.82.0 → 0.84.0

package/fesm2022/ng-primitives-interactions.mjs

@@ -1,7 +1,456 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, output, Directive, signal, HostListener } from '@angular/core';
-import { setupFocusVisible, setupFocus, setupHover, setupPress, injectElementRef } from 'ng-primitives/internal';
-import { injectDisposables } from 'ng-primitives/utils';
+import { InjectionToken, inject, signal, ElementRef, Renderer2, PLATFORM_ID, Injectable, effect, input, booleanAttribute, output, Directive, HostListener } from '@angular/core';
+import { onDomRemoval, injectElementRef } from 'ng-primitives/internal';
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { safeTakeUntilDestroyed, onBooleanChange, injectDisposables } from 'ng-primitives/utils';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+
+const defaultInteractionsConfig = {
+    disabled: false,
+    hover: true,
+    focus: true,
+    focusVisible: true,
+    press: true,
+};
+const NgpInteractionsConfigToken = new InjectionToken('NgpInteractionsConfigToken');
+/**
+ * Provide the default Interactions configuration
+ * @param config The Interactions configuration
+ * @returns The provider
+ */
+function provideInteractionsConfig(config) {
+    return [
+        {
+            provide: NgpInteractionsConfigToken,
+            useValue: { ...defaultInteractionsConfig, ...config },
+        },
+    ];
+}
+/**
+ * Inject the Interactions configuration
+ * @returns The global Interactions configuration
+ */
+function injectInteractionsConfig() {
+    return inject(NgpInteractionsConfigToken, { optional: true }) ?? defaultInteractionsConfig;
+}
+function isHoverEnabled() {
+    const config = injectInteractionsConfig();
+    return !config.disabled && !!config.hover;
+}
+function isFocusEnabled() {
+    const config = injectInteractionsConfig();
+    return !config.disabled && !!config.focus;
+}
+function isFocusVisibleEnabled() {
+    const config = injectInteractionsConfig();
+    return !config.disabled && !!config.focusVisible;
+}
+function isPressEnabled() {
+    const config = injectInteractionsConfig();
+    return !config.disabled && !!config.press;
+}
+
+/**
+ * @internal
+ */
+function ngpFocusVisibleInteraction({ focusChange, disabled = signal(false), }) {
+    const canFocusVisible = isFocusVisibleEnabled();
+    if (!canFocusVisible) {
+        return { isFocused: signal(false) };
+    }
+    const elementRef = inject(ElementRef);
+    const renderer = inject(Renderer2);
+    const focusMonitor = inject(FocusMonitor);
+    // Whether the element is currently focused.
+    const isFocused = signal(false);
+    // handle focus state
+    focusMonitor
+        .monitor(elementRef.nativeElement)
+        .pipe(safeTakeUntilDestroyed())
+        .subscribe(origin => 
+    // null indicates the element was blurred
+    origin === null ? onBlur() : onFocus(origin));
+    // if the component becomes disabled and it is focused, hide the focus
+    onBooleanChange(disabled, () => focus(false));
+    function onFocus(origin) {
+        if (disabled() || isFocused()) {
+            return;
+        }
+        // for some elements the focus visible state should always appear on focus
+        if (alwaysShowFocus()) {
+            focus(true);
+            return;
+        }
+        // if the focus origin is keyboard or program(focused programmatically), then the focus is visible
+        if (origin === 'keyboard') {
+            focus(true);
+            return;
+        }
+    }
+    function onBlur() {
+        if (disabled() || !isFocused()) {
+            return;
+        }
+        focus(false);
+    }
+    /**
+     * Trigger the focus signal along with the focusChange event.
+     */
+    function focus(value) {
+        if (isFocused() === value) {
+            return;
+        }
+        isFocused.set(value);
+        focusChange?.(value);
+        if (value) {
+            renderer.setAttribute(elementRef.nativeElement, 'data-focus-visible', '');
+        }
+        else {
+            renderer.removeAttribute(elementRef.nativeElement, 'data-focus-visible');
+        }
+    }
+    function alwaysShowFocus() {
+        const nonTextInputTypes = [
+            'checkbox',
+            'radio',
+            'range',
+            'color',
+            'file',
+            'image',
+            'button',
+            'submit',
+            'reset',
+        ];
+        // if this is an input element and it is a text input
+        if (elementRef.nativeElement instanceof HTMLInputElement &&
+            !nonTextInputTypes.includes(elementRef.nativeElement.type)) {
+            return true;
+        }
+        // if this is a textarea
+        if (elementRef.nativeElement instanceof HTMLTextAreaElement) {
+            return true;
+        }
+        // if this is an element with contenteditable
+        if (elementRef.nativeElement.isContentEditable ||
+            elementRef.nativeElement.hasAttribute('contenteditable')) {
+            return true;
+        }
+        return false;
+    }
+    return {
+        isFocused,
+    };
+}
+
+/**
+ * @internal
+ */
+function ngpFocusInteraction({ focus, blur, focusWithin = false, disabled = signal(false), }) {
+    const canFocus = isFocusEnabled();
+    if (!canFocus) {
+        return { isFocused: signal(false) };
+    }
+    /**
+     * Access the element reference.
+     */
+    const elementRef = inject(ElementRef);
+    /**
+     * Access the focus monitor.
+     */
+    const focusMonitor = inject(FocusMonitor);
+    /**
+     * Access the renderer.
+     */
+    const renderer = inject(Renderer2);
+    /**
+     * Whether the element is currently focused.
+     */
+    const isFocused = signal(false);
+    focusMonitor
+        .monitor(elementRef, focusWithin)
+        .pipe(safeTakeUntilDestroyed())
+        .subscribe(focusOrigin => {
+        if (disabled()) {
+            return;
+        }
+        isFocused.set(focusOrigin !== null);
+        if (focusOrigin !== null) {
+            if (focus) {
+                focus();
+            }
+            renderer.setAttribute(elementRef.nativeElement, 'data-focus', '');
+        }
+        else {
+            if (blur) {
+                blur();
+            }
+            renderer.removeAttribute(elementRef.nativeElement, 'data-focus');
+        }
+    });
+    return { isFocused };
+}
+
+/**
+ * We use a service here as this value is a singleton
+ * and allows us to register the dom events once.
+ */
+class GlobalPointerEvents {
+    constructor() {
+        /**
+         * Whether global mouse events should be ignored.
+         */
+        this.ignoreEmulatedMouseEvents = false;
+        /**
+         * Access the document.
+         */
+        this.document = inject(DOCUMENT);
+        /**
+         * Determine the platform id.
+         */
+        this.platformId = inject(PLATFORM_ID);
+        // we only want to setup events on the client
+        if (isPlatformBrowser(this.platformId)) {
+            this.setupGlobalTouchEvents();
+        }
+    }
+    setupGlobalTouchEvents() {
+        this.document.addEventListener('pointerup', this.handleGlobalPointerEvent.bind(this));
+        this.document.addEventListener('touchend', this.setGlobalIgnoreEmulatedMouseEvents.bind(this));
+    }
+    setGlobalIgnoreEmulatedMouseEvents() {
+        this.ignoreEmulatedMouseEvents = true;
+        // Clear globalIgnoreEmulatedMouseEvents after a short timeout. iOS fires onPointerEnter
+        // with pointerType="mouse" immediately after onPointerUp and before onFocus. On other
+        // devices that don't have this quirk, we don't want to ignore a mouse hover sometime in
+        // the distant future because a user previously touched the element.
+        setTimeout(() => (this.ignoreEmulatedMouseEvents = false), 50);
+    }
+    handleGlobalPointerEvent(event) {
+        if (event.pointerType === 'touch') {
+            this.setGlobalIgnoreEmulatedMouseEvents();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: GlobalPointerEvents, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: GlobalPointerEvents, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: GlobalPointerEvents, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * Programatically add the hover functionality to an element.
+ * This is useful in cases where we can't necessarily use a HostDirective,
+ * because there is a chance the directive has already been used.
+ * @internal
+ */
+function ngpHoverInteraction({ hoverStart, hoverEnd, disabled = signal(false), }) {
+    const canHover = isHoverEnabled();
+    if (!canHover) {
+        return { hovered: signal(false) };
+    }
+    /**
+     * Access the element.
+     */
+    const elementRef = inject(ElementRef);
+    /**
+     * Access the global pointer events handler.
+     */
+    const globalPointerEvents = inject(GlobalPointerEvents);
+    /**
+     * Access the disposable helper.
+     */
+    const disposables = injectDisposables();
+    /**
+     * Store the current hover state.
+     */
+    const hovered = signal(false);
+    /**
+     * Whether this element should ignore emulated mouse events.
+     */
+    let ignoreEmulatedMouseEvents = false;
+    /**
+     * Setup event listeners.
+     */
+    disposables.addEventListener(elementRef.nativeElement, 'pointerenter', onPointerEnter);
+    disposables.addEventListener(elementRef.nativeElement, 'pointerleave', onPointerLeave);
+    disposables.addEventListener(elementRef.nativeElement, 'touchstart', onTouchStart);
+    disposables.addEventListener(elementRef.nativeElement, 'mouseenter', onMouseEnter);
+    disposables.addEventListener(elementRef.nativeElement, 'mouseleave', onMouseLeave);
+    // anytime the disabled state changes to true, we must reset the hover state
+    if (disabled) {
+        onBooleanChange(disabled, reset);
+    }
+    // if the element is removed from the dom, we want to reset the hover state
+    onDomRemoval(elementRef.nativeElement, reset);
+    // anytime the hover state changes we want to update the attribute
+    effect(() => hovered()
+        ? elementRef.nativeElement.setAttribute('data-hover', '')
+        : elementRef.nativeElement.removeAttribute('data-hover'));
+    /**
+     * Reset the hover state.
+     */
+    function reset() {
+        onHoverEnd('mouse');
+    }
+    /**
+     * Trigger the hover start events.
+     * @param event
+     * @param pointerType
+     */
+    function onHoverStart(event, pointerType) {
+        if (disabled() ||
+            pointerType === 'touch' ||
+            hovered() ||
+            !event.currentTarget?.contains(event.target)) {
+            return;
+        }
+        hovered.set(true);
+        hoverStart?.();
+    }
+    /**
+     * Trigger the hover end events.
+     * @param pointerType
+     */
+    function onHoverEnd(pointerType) {
+        if (pointerType === 'touch' || !hovered()) {
+            return;
+        }
+        hovered.set(false);
+        hoverEnd?.();
+    }
+    function onPointerEnter(event) {
+        if (globalPointerEvents.ignoreEmulatedMouseEvents && event.pointerType === 'mouse') {
+            return;
+        }
+        onHoverStart(event, event.pointerType);
+    }
+    function onPointerLeave(event) {
+        if (!disabled() && event.currentTarget?.contains(event.target)) {
+            onHoverEnd(event.pointerType);
+        }
+    }
+    function onTouchStart() {
+        ignoreEmulatedMouseEvents = true;
+    }
+    function onMouseEnter(event) {
+        if (!ignoreEmulatedMouseEvents && !globalPointerEvents.ignoreEmulatedMouseEvents) {
+            onHoverStart(event, 'mouse');
+        }
+        ignoreEmulatedMouseEvents = false;
+    }
+    function onMouseLeave(event) {
+        if (!disabled() && event.currentTarget?.contains(event.target)) {
+            onHoverEnd('mouse');
+        }
+    }
+    return { hovered };
+}
+
+/**
+ * @internal
+ */
+function ngpPressInteraction({ pressStart, pressEnd, disabled = signal(false), }) {
+    const canPress = isPressEnabled();
+    if (!canPress) {
+        return { pressed: signal(false) };
+    }
+    const elementRef = inject(ElementRef);
+    const disposables = injectDisposables();
+    /**
+     * Whether the element is currently pressed.
+     */
+    const pressed = signal(false);
+    // setup event listeners
+    disposables.addEventListener(elementRef.nativeElement, 'pointerdown', onPointerDown);
+    // anytime the press state changes we want to update the attribute
+    effect(() => pressed() && !disabled()
+        ? elementRef.nativeElement.setAttribute('data-press', '')
+        : elementRef.nativeElement.removeAttribute('data-press'));
+    /**
+     * Reset the press state.
+     */
+    function reset() {
+        // if we are not pressing, then do nothing
+        if (!pressed()) {
+            return;
+        }
+        // clear any existing disposables
+        disposableListeners.forEach(dispose => dispose());
+        pressed.set(false);
+        pressEnd?.();
+    }
+    /**
+     * Store the list of disposables.
+     */
+    let disposableListeners = [];
+    function onPointerDown() {
+        if (disabled()) {
+            return;
+        }
+        // clear any existing disposables
+        disposableListeners.forEach(dispose => dispose());
+        // update the press state
+        pressed.set(true);
+        pressStart?.();
+        // setup global event listeners to catch events on elements outside the directive
+        const ownerDocument = elementRef.nativeElement.ownerDocument ?? document;
+        // if the pointer up event happens on any elements, then we are no longer pressing on this element
+        const pointerUp = disposables.addEventListener(ownerDocument, 'pointerup', () => reset(), false);
+        // Instead of relying on the `pointerleave` event, which is not consistently called on iOS Safari,
+        // we use the `pointermove` event to determine if we are still "pressing".
+        // By checking if the target is still within the element, we can determine if the press is ongoing.
+        const pointerMove = disposables.addEventListener(ownerDocument, 'pointermove', () => onPointerMove, false);
+        // if the pointer is cancelled, then we are no longer pressing on this element
+        const pointerCancel = disposables.addEventListener(ownerDocument, 'pointercancel', () => reset(), false);
+        disposableListeners = [pointerUp, pointerMove, pointerCancel];
+    }
+    function onPointerMove(event) {
+        if (elementRef.nativeElement !== event.target &&
+            !elementRef.nativeElement.contains(event.target)) {
+            reset();
+        }
+    }
+    return { pressed };
+}
+
+/**
+ * Setup the interactions without relying on HostDirectives.
+ * @internal
+ */
+function ngpInteractions({ focus, hover, press, focusWithin, focusVisible, disabled = signal(false), }) {
+    const elementRef = injectElementRef();
+    // If the interaction has already been setup, we can skip the setup.
+    if (hasInteraction(elementRef.nativeElement, 'interactions')) {
+        return;
+    }
+    if (hover) {
+        ngpHoverInteraction({ disabled });
+    }
+    if (press) {
+        ngpPressInteraction({ disabled });
+    }
+    if (focus) {
+        ngpFocusInteraction({ focusWithin, disabled });
+    }
+    if (focusVisible) {
+        ngpFocusVisibleInteraction({ disabled });
+    }
+}
+/**
+ * This function checks to see if a given interaction has already been setup on a given element.
+ * If it has, it returns the existing interaction state.
+ * If it has not, it sets up the interaction state for future checks.
+ */
+function hasInteraction(element, interaction) {
+    const hasInteraction = `__ngp-${interaction}` in element;
+    // if the interaction has not been setup, we mark it as setup for future checks
+    if (!hasInteraction) {
+        element[`__ngp-${interaction}`] = true;
+    }
+    return hasInteraction;
+}
 
 /**
  * Apply the `ngpFocusVisible` directive to an element that should be visually focused. This is similar to `ngpFocus`
@@ -23,7 +472,7 @@ class NgpFocusVisible {
             alias: 'ngpFocusVisible',
         });
         // setup the focus visible listener
-        setupFocusVisible({
+        ngpFocusVisibleInteraction({
             disabled: this.disabled,
             focusChange: value => this.focusChange.emit(value),
         });
@@ -57,7 +506,7 @@ class NgpFocus {
          */
         this.focus = output({ alias: 'ngpFocus' });
         // setup the focus listener
-        setupFocus({
+        ngpFocusInteraction({
             disabled: this.disabled,
             focus: () => this.focus.emit(true),
             blur: () => this.focus.emit(false),
@@ -105,7 +554,7 @@ class NgpHover {
          */
         this.hoverChange = output({ alias: 'ngpHover' });
         // setup the hover listener
-        setupHover({
+        ngpHoverInteraction({
             hoverStart: () => {
                 this.hoverStart.emit();
                 this.hoverChange.emit(true);
@@ -365,7 +814,7 @@ class NgpPress {
             alias: 'ngpPress',
         });
         // setup the press listener
-        setupPress({
+        ngpPressInteraction({
             pressStart: () => {
                 this.pressStart.emit();
                 this.pressChange.emit(true);
@@ -388,46 +837,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
-/**
- * This function checks to see if a given interaction has already been setup on a given element.
- * If it has, it returns the existing interaction state.
- * If it has not, it sets up the interaction state for future checks.
- */
-function hasInteraction(element, interaction) {
-    const hasInteraction = `__ngp-${interaction}` in element;
-    // if the interaction has not been setup, we mark it as setup for future checks
-    if (!hasInteraction) {
-        element[`__ngp-${interaction}`] = true;
-    }
-    return hasInteraction;
-}
-
-/**
- * Setup the interactions without relying on HostDirectives.
- */
-function setupInteractions({ focus, hover, press, focusWithin, focusVisible, disabled = signal(false), }) {
-    const elementRef = injectElementRef();
-    // If the interaction has already been setup, we can skip the setup.
-    if (hasInteraction(elementRef.nativeElement, 'interactions')) {
-        return;
-    }
-    if (hover) {
-        setupHover({ disabled });
-    }
-    if (press) {
-        setupPress({ disabled });
-    }
-    if (focus) {
-        setupFocus({ focusWithin, disabled });
-    }
-    if (focusVisible) {
-        setupFocusVisible({ disabled });
-    }
-}
+// re-export ngpInteractions as setupInteractions for backwards compatibility
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NgpFocus, NgpFocusVisible, NgpHover, NgpMove, NgpPress, setupInteractions };
+export { NgpFocus, NgpFocusVisible, NgpHover, NgpMove, NgpPress, ngpFocusInteraction, ngpFocusVisibleInteraction, ngpHoverInteraction, ngpInteractions, ngpPressInteraction, provideInteractionsConfig, ngpInteractions as setupInteractions };
 //# sourceMappingURL=ng-primitives-interactions.mjs.map