ng-primitives 0.0.7 → 0.2.0

package/fesm2022/ng-primitives-interactions.mjs

@@ -1,8 +1,10 @@
 import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, PLATFORM_ID, Injectable, input, booleanAttribute, signal, output, Directive, HostListener, ElementRef } from '@angular/core';
+import { injectDisabled } from 'ng-primitives/internal';
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { injectDisposables } from 'ng-primitives/utils';
 
 /**
  * Copyright © 2024 Angular Primitives.
@@ -60,10 +62,10 @@ class GlobalPointerEvents {
             this.setGlobalIgnoreEmulatedMouseEvents();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: GlobalPointerEvents, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: GlobalPointerEvents, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: GlobalPointerEvents, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: GlobalPointerEvents, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: GlobalPointerEvents, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: GlobalPointerEvents, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -88,6 +90,10 @@ class NgpHover {
             alias: 'ngpHoverDisabled',
             transform: booleanAttribute,
         });
+        /**
+         * Access the disabled state from any parent.
+         */
+        this.isDisabled = injectDisabled(this.disabled);
         /**
          * Store the current hover state.
          */
@@ -107,7 +113,7 @@ class NgpHover {
         /**
          * Emit an event when the hover state changes.
          */
-        this.hoverChange = output({ alias: 'ngpHoverChange' });
+        this.hoverChange = output({ alias: 'ngpHover' });
     }
     ngOnChanges(changes) {
         if ('disabled' in changes) {
@@ -124,7 +130,7 @@ class NgpHover {
      * @param pointerType
      */
     onHoverStart(event, pointerType) {
-        if (this.disabled() ||
+        if (this.isDisabled() ||
             pointerType === 'touch' ||
             this.hovered() ||
             !event.currentTarget?.contains(event.target)) {
@@ -153,7 +159,7 @@ class NgpHover {
         this.onHoverStart(event, event.pointerType);
     }
     onPointerLeave(event) {
-        if (!this.disabled() && event.currentTarget?.contains(event.target)) {
+        if (!this.isDisabled() && event.currentTarget?.contains(event.target)) {
             this.onHoverEnd(event.pointerType);
         }
     }
@@ -167,14 +173,14 @@ class NgpHover {
         this.ignoreEmulatedMouseEvents = false;
     }
     onMouseLeave(event) {
-        if (!this.disabled() && event.currentTarget?.contains(event.target)) {
+        if (!this.isDisabled() && event.currentTarget?.contains(event.target)) {
             this.onHoverEnd('mouse');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: NgpHover, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.0.2", type: NgpHover, isStandalone: true, selector: "[ngpHover]", inputs: { disabled: { classPropertyName: "disabled", publicName: "ngpHoverDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hoverStart: "ngpHoverStart", hoverEnd: "ngpHoverEnd", hoverChange: "ngpHoverChange" }, host: { listeners: { "pointerenter": "onPointerEnter($event)", "pointerleave": "onPointerLeave($event)", "touchstart": "onTouchStart()", "mouseenter": "onMouseEnter($event)", "mouseleave": "onMouseLeave($event)" }, properties: { "attr.data-hover": "hovered()" } }, providers: [{ provide: NgpHoverToken, useExisting: NgpHover }], exportAs: ["ngpHover"], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: NgpHover, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.1.1", type: NgpHover, isStandalone: true, selector: "[ngpHover]", inputs: { disabled: { classPropertyName: "disabled", publicName: "ngpHoverDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hoverStart: "ngpHoverStart", hoverEnd: "ngpHoverEnd", hoverChange: "ngpHover" }, host: { listeners: { "pointerenter": "onPointerEnter($event)", "pointerleave": "onPointerLeave($event)", "touchstart": "onTouchStart()", "mouseenter": "onMouseEnter($event)", "mouseleave": "onMouseLeave($event)" }, properties: { "attr.data-hover": "hovered()" } }, providers: [{ provide: NgpHoverToken, useExisting: NgpHover }], exportAs: ["ngpHover"], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: NgpHover, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: NgpHover, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -234,23 +240,27 @@ class NgpFocus {
             alias: 'ngpFocusDisabled',
             transform: booleanAttribute,
         });
+        /**
+         * Access the disabled state from any parent.
+         */
+        this.isDisabled = injectDisabled(this.disabled);
         /**
          * Emit when the focus state changes.
          */
-        this.stateChange = output({ alias: 'ngpFocusChange' });
+        this.focus = output({ alias: 'ngpFocus' });
     }
     /**
      * Listen for focus events.
      * @param event
      */
     onFocus(event) {
-        if (this.disabled()) {
+        if (this.isDisabled()) {
             return;
         }
         const ownerDocument = event.target?.ownerDocument ?? document;
         // ensure this element is still focused
         if (ownerDocument.activeElement === event.target && event.currentTarget === event.target) {
-            this.stateChange.emit(true);
+            this.focus.emit(true);
             this.isFocused.set(true);
         }
     }
@@ -259,18 +269,18 @@ class NgpFocus {
      * @param event
      */
     onBlur(event) {
-        if (this.disabled()) {
+        if (this.isDisabled()) {
             return;
         }
         if (event.currentTarget === event.target) {
-            this.stateChange.emit(false);
+            this.focus.emit(false);
             this.isFocused.set(false);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: NgpFocus, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.0.2", type: NgpFocus, isStandalone: true, selector: "[ngpFocus]", inputs: { disabled: { classPropertyName: "disabled", publicName: "ngpFocusDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stateChange: "ngpFocusChange" }, host: { listeners: { "focus": "onFocus($event)", "blur": "onBlur($event)" }, properties: { "attr.data-focused": "isFocused()" } }, providers: [{ provide: NgpFocusToken, useExisting: NgpFocus }], exportAs: ["ngpFocus"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: NgpFocus, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.1.1", type: NgpFocus, isStandalone: true, selector: "[ngpFocus]", inputs: { disabled: { classPropertyName: "disabled", publicName: "ngpFocusDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focus: "ngpFocus" }, host: { listeners: { "focus": "onFocus($event)", "blur": "onBlur($event)" }, properties: { "attr.data-focus": "isFocused()" } }, providers: [{ provide: NgpFocusToken, useExisting: NgpFocus }], exportAs: ["ngpFocus"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: NgpFocus, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: NgpFocus, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -278,7 +288,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                     exportAs: 'ngpFocus',
                     providers: [{ provide: NgpFocusToken, useExisting: NgpFocus }],
                     host: {
-                        '[attr.data-focused]': 'isFocused()',
+                        '[attr.data-focus]': 'isFocused()',
                     },
                 }]
         }], propDecorators: { onFocus: [{
@@ -328,11 +338,15 @@ class NgpFocusVisible {
             alias: 'ngpFocusVisibleDisabled',
             transform: booleanAttribute,
         });
+        /**
+         * Access the disabled state from any parent.
+         */
+        this.isDisabled = injectDisabled(this.disabled);
         /**
          * Emit when the element is visually focused.
          */
         this.focusChange = output({
-            alias: 'ngpFocusVisibleChange',
+            alias: 'ngpFocusVisible',
         });
         /**
          * Whether the element is currently focused.
@@ -344,7 +358,7 @@ class NgpFocusVisible {
             .subscribe(origin => this.onFocus(origin));
     }
     onFocus(origin) {
-        if (this.disabled() || this.isFocused()) {
+        if (this.isDisabled() || this.isFocused()) {
             return;
         }
         // for some elements the focus visible state should always appear on focus
@@ -364,7 +378,7 @@ class NgpFocusVisible {
      * Listen for blur events.
      */
     onBlur() {
-        if (this.disabled() || !this.isFocused()) {
+        if (this.isDisabled() || !this.isFocused()) {
             return;
         }
         this.isFocused.set(false);
@@ -398,10 +412,10 @@ class NgpFocusVisible {
         }
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: NgpFocusVisible, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.0.2", type: NgpFocusVisible, isStandalone: true, selector: "[ngpFocusVisible]", inputs: { disabled: { classPropertyName: "disabled", publicName: "ngpFocusVisibleDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focusChange: "ngpFocusVisibleChange" }, host: { listeners: { "blur": "onBlur()" }, properties: { "attr.data-focus-visible": "isFocused()" } }, providers: [{ provide: NgpFocusVisibleToken, useExisting: NgpFocusVisible }], exportAs: ["ngpFocusVisible"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: NgpFocusVisible, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.1.1", type: NgpFocusVisible, isStandalone: true, selector: "[ngpFocusVisible]", inputs: { disabled: { classPropertyName: "disabled", publicName: "ngpFocusVisibleDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focusChange: "ngpFocusVisible" }, host: { listeners: { "blur": "onBlur()" }, properties: { "attr.data-focus-visible": "isFocused()" } }, providers: [{ provide: NgpFocusVisibleToken, useExisting: NgpFocusVisible }], exportAs: ["ngpFocusVisible"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: NgpFocusVisible, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: NgpFocusVisible, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -417,6 +431,360 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                 args: ['blur']
             }] } });
 
+/**
+ * Copyright © 2024 Angular Primitives.
+ * https://github.com/ng-primitives/ng-primitives
+ *
+ * This source code is licensed under the CC BY-ND 4.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const NgpPressToken = new InjectionToken('NgpPressToken');
+/**
+ * Inject the Press directive instance
+ */
+function injectPress() {
+    return inject(NgpPressToken);
+}
+
+/**
+ * This was inpsired by Headless UI's active-press hook:
+ * https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-react/src/hooks/use-active-press.tsx
+ */
+class NgpPress {
+    constructor() {
+        /**
+         * Access the HTML Element.
+         */
+        this.element = inject(ElementRef);
+        /**
+         * Access the disposables.
+         */
+        this.disposables = injectDisposables();
+        /**
+         * Whether listening for press events is disabled.
+         */
+        this.disabled = input(false, {
+            alias: 'ngpPressDisabled',
+            transform: booleanAttribute,
+        });
+        /**
+         * Access the disabled state from any parent.
+         */
+        this.isDisabled = injectDisabled(this.disabled);
+        /**
+         * Emit when the press begins.
+         */
+        this.pressStart = output({
+            alias: 'ngpPressStart',
+        });
+        /**
+         * Emit when the press ends.
+         */
+        this.pressEnd = output({
+            alias: 'ngpPressEnd',
+        });
+        /**
+         * Emit when the press changes.
+         */
+        this.pressChange = output({
+            alias: 'ngpPress',
+        });
+        /**
+         * The press state.
+         */
+        this.pressed = signal(false);
+        /**
+         * Store the list of disposables.
+         */
+        this.disposableListeners = [];
+    }
+    /**
+     * Reset the press state.
+     */
+    reset() {
+        // if we are not pressing, then do nothing
+        if (!this.pressed()) {
+            return;
+        }
+        // clear any existing disposables
+        this.disposableListeners.forEach(dispose => dispose());
+        this.pressed.set(false);
+        this.pressEnd.emit();
+        this.pressChange.emit(false);
+    }
+    onPointerDown() {
+        if (this.isDisabled()) {
+            return;
+        }
+        // clear any existing disposables
+        this.disposableListeners.forEach(dispose => dispose());
+        // update the press state
+        this.pressed.set(true);
+        this.pressStart.emit();
+        this.pressChange.emit(true);
+        // setup global event listeners to catch events on elements outside the directive
+        const ownerDocument = this.element.nativeElement.ownerDocument ?? document;
+        // if the pointer up event happens on any elements, then we are no longer pressing on this element
+        const pointerUp = this.disposables.addEventListener(ownerDocument, 'pointerup', this.reset.bind(this), 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 = this.disposables.addEventListener(ownerDocument, 'pointermove', this.onPointerMove.bind(this), false);
+        // if the pointer is cancelled, then we are no longer pressing on this element
+        const pointerCancel = this.disposables.addEventListener(ownerDocument, 'pointercancel', this.reset.bind(this), false);
+        this.disposableListeners = [pointerUp, pointerMove, pointerCancel];
+    }
+    onPointerMove(event) {
+        if (this.element.nativeElement !== event.target &&
+            !this.element.nativeElement.contains(event.target)) {
+            this.reset();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: NgpPress, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.1.1", type: NgpPress, isStandalone: true, selector: "[ngpPress]", inputs: { disabled: { classPropertyName: "disabled", publicName: "ngpPressDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pressStart: "ngpPressStart", pressEnd: "ngpPressEnd", pressChange: "ngpPress" }, host: { listeners: { "pointerdown": "onPointerDown()" }, properties: { "attr.data-press": "pressed()" } }, providers: [{ provide: NgpPressToken, useExisting: NgpPress }], exportAs: ["ngpPress"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: NgpPress, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[ngpPress]',
+                    exportAs: 'ngpPress',
+                    providers: [{ provide: NgpPressToken, useExisting: NgpPress }],
+                    host: {
+                        '[attr.data-press]': 'pressed()',
+                    },
+                }]
+        }], propDecorators: { onPointerDown: [{
+                type: HostListener,
+                args: ['pointerdown']
+            }] } });
+
+/**
+ * Copyright © 2024 Angular Primitives.
+ * https://github.com/ng-primitives/ng-primitives
+ *
+ * This source code is licensed under the CC BY-ND 4.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const NgpMoveToken = new InjectionToken('NgpMoveToken');
+/**
+ * Inject the Move directive instance
+ */
+function injectMove() {
+    return inject(NgpMoveToken);
+}
+
+/**
+ * Inspired by react-aria useMove hook:
+ * https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/interactions/src/useMove.ts
+ */
+class NgpMove {
+    constructor() {
+        /**
+         * Access the disposable helper.
+         */
+        this.disposables = injectDisposables();
+        /**
+         * Whether movement is disabled.
+         */
+        this.disabled = input(false, {
+            alias: 'ngpMoveDisabled',
+            transform: booleanAttribute,
+        });
+        /**
+         * Access the disabled state from any parent.
+         */
+        this.isDisabled = injectDisabled(this.disabled);
+        /**
+         * Emit when the move event begins.
+         */
+        this.start = output({
+            alias: 'ngpMoveStart',
+        });
+        /**
+         * Emit when the element is moved.
+         */
+        this.move = output({
+            alias: 'ngpMove',
+        });
+        /**
+         * Emit when the move event ends.
+         */
+        this.end = output({
+            alias: 'ngpMoveEnd',
+        });
+        /**
+         * Whether the element is currently being moved.
+         */
+        this.isMoving = signal(false);
+        /**
+         * Store the last x position of the element.
+         */
+        this.x = null;
+        /**
+         * Store the last y position of the element.
+         */
+        this.y = null;
+        /**
+         * Store the id of the last pointer.
+         */
+        this.pointerId = null;
+        /**
+         * Store the disposable event listeners.
+         */
+        this.disposableListeners = [];
+    }
+    /**
+     * Handle a move start.
+     */
+    onMoveStart(event, pointerType) {
+        this.start.emit({
+            pointerType,
+            shiftKey: event.shiftKey,
+            ctrlKey: event.ctrlKey,
+            metaKey: event.metaKey,
+            altKey: event.altKey,
+        });
+        this.isMoving.set(true);
+    }
+    /**
+     * Handle a move event.
+     */
+    onMove(event, pointerType, deltaX, deltaY) {
+        if (deltaX === 0 && deltaY === 0) {
+            return;
+        }
+        this.move.emit({
+            deltaX,
+            deltaY,
+            pointerType,
+            shiftKey: event.shiftKey,
+            ctrlKey: event.ctrlKey,
+            metaKey: event.metaKey,
+            altKey: event.altKey,
+        });
+    }
+    /**
+     * Handle a move end.
+     */
+    onMoveEnd(event, pointerType) {
+        this.end.emit({
+            pointerType,
+            shiftKey: event.shiftKey,
+            ctrlKey: event.ctrlKey,
+            metaKey: event.metaKey,
+            altKey: event.altKey,
+        });
+        this.isMoving.set(false);
+    }
+    /**
+     * Handle the pointer down event.
+     */
+    onPointerDown(event) {
+        // ignore right-click or additional pointers
+        if (event.button !== 0 || this.pointerId !== null || this.isDisabled()) {
+            return;
+        }
+        // prevent the default behavior
+        event.preventDefault();
+        event.stopPropagation();
+        this.onMoveStart(event, event.pointerType);
+        // store the pointer id and initial position
+        this.pointerId = event.pointerId;
+        this.x = event.pageX;
+        this.y = event.pageY;
+        // add global event listeners
+        const pointerMove = this.disposables.addEventListener(window, 'pointermove', this.onPointerMove.bind(this), false);
+        const pointerUp = this.disposables.addEventListener(window, 'pointerup', this.onPointerUp.bind(this), false);
+        const pointerCancel = this.disposables.addEventListener(window, 'pointercancel', this.onPointerUp.bind(this), false);
+        // store the disposable event listeners
+        this.disposableListeners = [pointerMove, pointerUp, pointerCancel];
+    }
+    /**
+     * Handle the pointer up event.
+     */
+    onPointerUp(event) {
+        if (this.pointerId !== event.pointerId) {
+            return;
+        }
+        const pointerType = (event.pointerType ?? 'mouse');
+        this.onMoveEnd(event, pointerType);
+        this.pointerId = null;
+        this.disposableListeners.forEach(dispose => dispose());
+    }
+    /**
+     * Handle the pointer move event.
+     */
+    onPointerMove(event) {
+        if (this.pointerId !== event.pointerId) {
+            return;
+        }
+        // Problems with PointerEvent#movementX/movementY:
+        // 1. it is always 0 on macOS Safari.
+        // 2. On Chrome Android, it's scaled by devicePixelRatio, but not on Chrome macOS
+        this.onMove(event, event.pointerType, event.pageX - (this.x ?? 0), event.pageY - (this.y ?? 0));
+        this.x = event.pageX;
+        this.y = event.pageY;
+    }
+    triggerKeyboardMove(event, deltaX, deltaY) {
+        if (this.isDisabled()) {
+            return;
+        }
+        this.onMoveStart(event, 'keyboard');
+        this.onMove(event, 'keyboard', deltaX, deltaY);
+        this.onMoveEnd(event, 'keyboard');
+    }
+    onArrowUp(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.triggerKeyboardMove(event, 0, -1);
+    }
+    onArrowDown(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.triggerKeyboardMove(event, 0, 1);
+    }
+    onArrowLeft(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.triggerKeyboardMove(event, -1, 0);
+    }
+    onArrowRight(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.triggerKeyboardMove(event, 1, 0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: NgpMove, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.1.1", type: NgpMove, isStandalone: true, selector: "[ngpMove]", inputs: { disabled: { classPropertyName: "disabled", publicName: "ngpMoveDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { start: "ngpMoveStart", move: "ngpMove", end: "ngpMoveEnd" }, host: { listeners: { "pointerdown": "onPointerDown($event)", "keydown.ArrowUp": "onArrowUp($event)", "keydown.ArrowDown": "onArrowDown($event)", "keydown.ArrowLeft": "onArrowLeft($event)", "keydown.ArrowRight": "onArrowRight($event)" }, properties: { "attr.data-move": "isMoving()" } }, providers: [{ provide: NgpMoveToken, useExisting: NgpMove }], exportAs: ["ngpMove"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: NgpMove, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[ngpMove]',
+                    exportAs: 'ngpMove',
+                    providers: [{ provide: NgpMoveToken, useExisting: NgpMove }],
+                    host: {
+                        '[attr.data-move]': 'isMoving()',
+                    },
+                }]
+        }], propDecorators: { onPointerDown: [{
+                type: HostListener,
+                args: ['pointerdown', ['$event']]
+            }], onArrowUp: [{
+                type: HostListener,
+                args: ['keydown.ArrowUp', ['$event']]
+            }], onArrowDown: [{
+                type: HostListener,
+                args: ['keydown.ArrowDown', ['$event']]
+            }], onArrowLeft: [{
+                type: HostListener,
+                args: ['keydown.ArrowLeft', ['$event']]
+            }], onArrowRight: [{
+                type: HostListener,
+                args: ['keydown.ArrowRight', ['$event']]
+            }] } });
+
 /**
  * Copyright © 2024 Angular Primitives.
  * https://github.com/ng-primitives/ng-primitives
@@ -429,5 +797,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NgpFocus, NgpFocusToken, NgpFocusVisible, NgpFocusVisibleToken, NgpHover, NgpHoverToken, injectHover };
+export { NgpFocus, NgpFocusToken, NgpFocusVisible, NgpFocusVisibleToken, NgpHover, NgpHoverToken, NgpMove, NgpMoveToken, NgpPress, NgpPressToken, injectHover };
 //# sourceMappingURL=ng-primitives-interactions.mjs.map