@signality/core 0.0.1-alpha.2

package/fesm2022/signality-core-elements-mouse-position.mjs

@@ -0,0 +1,109 @@
+import { signal } from '@angular/core';
+import { setupContext, constSignal, isWindow } from '@signality/core/internal';
+import { listener } from '@signality/core/browser/listener';
+import { onDisconnect } from '@signality/core/elements/on-disconnect';
+
+/**
+ * Reactive tracking of mouse position.
+ * Track cursor coordinates globally or relative to an element.
+ *
+ * @param options - Optional configuration
+ * @returns A signal containing the current mouse position
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   template: `
+ *     <p>Mouse position: X={{ position().x }}, Y={{ position().y }}</p>
+ *   `
+ * })
+ * class MouseTracker {
+ *   readonly position = mousePosition();
+ * }
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Track mouse position on a specific element
+ * @Component({
+ *   template: `
+ *     <div #box>
+ *       <p>Position: X={{ position().x }}, Y={{ position().y }}</p>
+ *     </div>
+ *   `
+ * })
+ * class MouseElementTracker {
+ *   readonly box = viewChild<ElementRef>('box');
+ *   readonly position = mousePosition({ target: this.box });
+ * }
+ * ```
+ */
+function mousePosition(options) {
+    const { runInContext } = setupContext(options?.injector, mousePosition);
+    return runInContext(({ isServer }) => {
+        const initialValue = options?.initialValue ?? DEFAULT_POSITION;
+        if (isServer) {
+            return constSignal(initialValue);
+        }
+        const target = options?.target ?? window;
+        const targetIsWindow = isWindow(target);
+        const coordinateType = options?.type ?? 'page';
+        const trackTouch = options?.touch ?? true;
+        const trackScroll = coordinateType === 'page';
+        const extractor = EXTRACTORS[coordinateType];
+        const position = signal(initialValue, ...(ngDevMode ? [{ debugName: "position" }] : []));
+        let prevMouseEvent = null;
+        let prevScrollX = 0;
+        let prevScrollY = 0;
+        const handleMouse = (e) => {
+            prevMouseEvent = e;
+            position.set(extractor(e));
+            if (trackScroll) {
+                prevScrollX = window.scrollX;
+                prevScrollY = window.scrollY;
+            }
+        };
+        listener(target, 'mousemove', handleMouse);
+        listener(target, 'dragover', handleMouse);
+        if (trackTouch) {
+            listener.passive(target, 'touchmove', (e) => {
+                if (e.touches.length === 0) {
+                    return;
+                }
+                position.set(extractor(e.touches[0]));
+            });
+        }
+        if (trackScroll) {
+            listener(window, 'scroll', () => {
+                if (!prevMouseEvent) {
+                    return;
+                }
+                const pos = extractor(prevMouseEvent);
+                position.set({
+                    x: pos.x + window.scrollX - prevScrollX,
+                    y: pos.y + window.scrollY - prevScrollY,
+                });
+            });
+        }
+        if (!targetIsWindow) {
+            onDisconnect(target, () => position.set(DEFAULT_POSITION));
+        }
+        return position.asReadonly();
+    });
+}
+const DEFAULT_POSITION = {
+    x: 0,
+    y: 0,
+};
+const EXTRACTORS = {
+    page: e => ({ x: e.pageX, y: e.pageY }),
+    client: e => ({ x: e.clientX, y: e.clientY }),
+    screen: e => ({ x: e.screenX, y: e.screenY }),
+};
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { mousePosition };
+//# sourceMappingURL=signality-core-elements-mouse-position.mjs.map

package/fesm2022/signality-core-elements-mouse-position.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"signality-core-elements-mouse-position.mjs","sources":["../../../projects/core/elements/mouse-position/index.ts","../../../projects/core/elements/mouse-position/signality-core-elements-mouse-position.ts"],"sourcesContent":["import { type Signal, signal } from '@angular/core';\nimport { constSignal, isWindow, setupContext } from '@signality/core/internal';\nimport type { MaybeElementSignal, WithInjector } from '@signality/core/types';\nimport { listener } from '@signality/core/browser/listener';\nimport { onDisconnect } from '@signality/core/elements/on-disconnect';\n\nexport interface MousePosition {\n  readonly x: number;\n  readonly y: number;\n}\n\nexport type MouseCoordinateType = 'page' | 'client' | 'screen';\n\nexport interface MousePositionOptions extends WithInjector {\n  /**\n   * Element or window to track mouse position on.\n   * @default window\n   */\n  readonly target?: MaybeElementSignal<Element> | Window;\n\n  /**\n   * Coordinate type to use.\n   * @default 'page'\n   */\n  readonly type?: MouseCoordinateType;\n\n  /**\n   * Whether to track touch events as well.\n   * @default true\n   */\n  readonly touch?: boolean;\n\n  /**\n   * Initial mouse position.\n   */\n  readonly initialValue?: MousePosition;\n}\n\n/**\n * Reactive tracking of mouse position.\n * Track cursor coordinates globally or relative to an element.\n *\n * @param options - Optional configuration\n * @returns A signal containing the current mouse position\n *\n * @example\n * ```typescript\n * @Component({\n *   template: `\n *     <p>Mouse position: X={{ position().x }}, Y={{ position().y }}</p>\n *   `\n * })\n * class MouseTracker {\n *   readonly position = mousePosition();\n * }\n * ```\n *\n * @example\n * ```typescript\n * // Track mouse position on a specific element\n * @Component({\n *   template: `\n *     <div #box>\n *       <p>Position: X={{ position().x }}, Y={{ position().y }}</p>\n *     </div>\n *   `\n * })\n * class MouseElementTracker {\n *   readonly box = viewChild<ElementRef>('box');\n *   readonly position = mousePosition({ target: this.box });\n * }\n * ```\n */\nexport function mousePosition(options?: MousePositionOptions): Signal<MousePosition> {\n  const { runInContext } = setupContext(options?.injector, mousePosition);\n\n  return runInContext(({ isServer }) => {\n    const initialValue = options?.initialValue ?? DEFAULT_POSITION;\n\n    if (isServer) {\n      return constSignal(initialValue);\n    }\n\n    const target = options?.target ?? window;\n    const targetIsWindow = isWindow(target);\n    const coordinateType = options?.type ?? 'page';\n    const trackTouch = options?.touch ?? true;\n    const trackScroll = coordinateType === 'page';\n    const extractor = EXTRACTORS[coordinateType];\n\n    const position = signal<MousePosition>(initialValue);\n\n    let prevMouseEvent: MouseEvent | null = null;\n    let prevScrollX = 0;\n    let prevScrollY = 0;\n\n    const handleMouse = (e: MouseEvent): void => {\n      prevMouseEvent = e;\n\n      position.set(extractor(e));\n\n      if (trackScroll) {\n        prevScrollX = window.scrollX;\n        prevScrollY = window.scrollY;\n      }\n    };\n\n    listener(target, 'mousemove', handleMouse);\n    listener(target, 'dragover', handleMouse);\n\n    if (trackTouch) {\n      listener.passive(target, 'touchmove', (e: TouchEvent) => {\n        if (e.touches.length === 0) {\n          return;\n        }\n\n        position.set(extractor(e.touches[0]));\n      });\n    }\n\n    if (trackScroll) {\n      listener(window, 'scroll', () => {\n        if (!prevMouseEvent) {\n          return;\n        }\n\n        const pos = extractor(prevMouseEvent);\n\n        position.set({\n          x: pos.x + window.scrollX - prevScrollX,\n          y: pos.y + window.scrollY - prevScrollY,\n        });\n      });\n    }\n\n    if (!targetIsWindow) {\n      onDisconnect(target, () => position.set(DEFAULT_POSITION));\n    }\n\n    return position.asReadonly();\n  });\n}\n\nconst DEFAULT_POSITION: MousePosition = {\n  x: 0,\n  y: 0,\n};\n\nconst EXTRACTORS: Record<MouseCoordinateType, (e: MouseEvent | Touch) => MousePosition> = {\n  page: e => ({ x: e.pageX, y: e.pageY }),\n  client: e => ({ x: e.clientX, y: e.clientY }),\n  screen: e => ({ x: e.screenX, y: e.screenY }),\n};\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/signality-core-elements-on-click-outside.mjs

@@ -0,0 +1,97 @@
+import { setupContext, NOOP_EFFECT_REF, toElement } from '@signality/core/internal';
+import { setupSync, listener } from '@signality/core/browser/listener';
+
+/**
+ * Detects clicks outside a target element and invokes a callback.
+ * Useful for closing dropdowns, modals, and popovers when the user clicks elsewhere.
+ *
+ * @param target - Element to detect clicks outside of
+ * @param handler - Callback invoked when a click outside the target is detected
+ * @param options - Optional configuration including ignore list and injector
+ * @returns An OnClickOutsideRef with a destroy method to stop detection
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   template: `
+ *     <div #dropdown class="dropdown">
+ *       <p>Dropdown content</p>
+ *     </div>
+ *   `
+ * })
+ * class DropdownComponent {
+ *   readonly dropdown = viewChild<ElementRef>('dropdown');
+ *   readonly isOpen = signal(true);
+ *
+ *   constructor() {
+ *     onClickOutside(this.dropdown, () => {
+ *       this.isOpen.set(false);
+ *     });
+ *   }
+ * }
+ * ```
+ */
+function onClickOutside(target, handler, options) {
+    const { runInContext } = setupContext(options?.injector, onClickOutside);
+    return runInContext(({ isServer }) => {
+        if (isServer) {
+            return NOOP_EFFECT_REF;
+        }
+        const ignoreList = options?.ignore ?? [];
+        let shouldFire = false;
+        function isOutside(event) {
+            const el = toElement(target);
+            const path = event.composedPath();
+            if (el && path.includes(el)) {
+                return false;
+            }
+            if (ignoreList.length) {
+                return !ignoreList.some(ignored => {
+                    const ignoredEl = toElement(ignored);
+                    return ignoredEl && path.includes(ignoredEl);
+                });
+            }
+            return true;
+        }
+        const pointerDownListener = setupSync(() => listener.capture(window, 'pointerdown', (e) => {
+            shouldFire = isOutside(e);
+        }));
+        const clickListener = setupSync(() => listener.capture(window, 'pointerup', (e) => {
+            if (!shouldFire) {
+                return;
+            }
+            shouldFire = false;
+            if (!isOutside(e)) {
+                return;
+            }
+            handler(e);
+        }));
+        const blurListener = setupSync(() => listener(window, 'blur', (e) => {
+            setTimeout(() => {
+                const active = document.activeElement;
+                if (active?.tagName !== 'IFRAME') {
+                    return;
+                }
+                const el = toElement(target);
+                if (el?.contains(active)) {
+                    return;
+                }
+                handler(e);
+            }, 0);
+        }));
+        return {
+            destroy: () => {
+                pointerDownListener.destroy();
+                clickListener.destroy();
+                blurListener.destroy();
+            },
+        };
+    });
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { onClickOutside };
+//# sourceMappingURL=signality-core-elements-on-click-outside.mjs.map

package/fesm2022/signality-core-elements-on-click-outside.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"signality-core-elements-on-click-outside.mjs","sources":["../../../projects/core/elements/on-click-outside/index.ts","../../../projects/core/elements/on-click-outside/signality-core-elements-on-click-outside.ts"],"sourcesContent":["import { NOOP_EFFECT_REF, setupContext, toElement } from '@signality/core/internal';\nimport type { MaybeElementSignal, WithInjector } from '@signality/core/types';\nimport { listener, setupSync } from '@signality/core/browser/listener';\n\nexport interface OnClickOutsideOptions extends WithInjector {\n  /**\n   * Elements that should not trigger the outside click handler.\n   */\n  readonly ignore?: MaybeElementSignal<Element>[];\n}\n\nexport interface OnClickOutsideRef {\n  /** Stops listening for outside clicks. */\n  readonly destroy: () => void;\n}\n\n/**\n * Detects clicks outside a target element and invokes a callback.\n * Useful for closing dropdowns, modals, and popovers when the user clicks elsewhere.\n *\n * @param target - Element to detect clicks outside of\n * @param handler - Callback invoked when a click outside the target is detected\n * @param options - Optional configuration including ignore list and injector\n * @returns An OnClickOutsideRef with a destroy method to stop detection\n *\n * @example\n * ```typescript\n * @Component({\n *   template: `\n *     <div #dropdown class=\"dropdown\">\n *       <p>Dropdown content</p>\n *     </div>\n *   `\n * })\n * class DropdownComponent {\n *   readonly dropdown = viewChild<ElementRef>('dropdown');\n *   readonly isOpen = signal(true);\n *\n *   constructor() {\n *     onClickOutside(this.dropdown, () => {\n *       this.isOpen.set(false);\n *     });\n *   }\n * }\n * ```\n */\nexport function onClickOutside(\n  target: MaybeElementSignal<HTMLElement>,\n  handler: (event: PointerEvent | FocusEvent) => void,\n  options?: OnClickOutsideOptions\n): OnClickOutsideRef {\n  const { runInContext } = setupContext(options?.injector, onClickOutside);\n\n  return runInContext(({ isServer }) => {\n    if (isServer) {\n      return NOOP_EFFECT_REF;\n    }\n\n    const ignoreList = options?.ignore ?? [];\n\n    let shouldFire = false;\n\n    function isOutside(event: Event): boolean {\n      const el = toElement(target);\n      const path = event.composedPath();\n\n      if (el && path.includes(el)) {\n        return false;\n      }\n\n      if (ignoreList.length) {\n        return !ignoreList.some(ignored => {\n          const ignoredEl = toElement(ignored);\n          return ignoredEl && path.includes(ignoredEl);\n        });\n      }\n\n      return true;\n    }\n\n    const pointerDownListener = setupSync(() =>\n      listener.capture(window, 'pointerdown', (e: PointerEvent) => {\n        shouldFire = isOutside(e);\n      })\n    );\n\n    const clickListener = setupSync(() =>\n      listener.capture(window, 'pointerup', (e: PointerEvent) => {\n        if (!shouldFire) {\n          return;\n        }\n\n        shouldFire = false;\n\n        if (!isOutside(e)) {\n          return;\n        }\n\n        handler(e);\n      })\n    );\n\n    const blurListener = setupSync(() =>\n      listener(window, 'blur', (e: FocusEvent) => {\n        setTimeout(() => {\n          const active = document.activeElement;\n\n          if (active?.tagName !== 'IFRAME') {\n            return;\n          }\n\n          const el = toElement(target);\n\n          if (el?.contains(active)) {\n            return;\n          }\n\n          handler(e);\n        }, 0);\n      })\n    );\n\n    return {\n      destroy: () => {\n        pointerDownListener.destroy();\n        clickListener.destroy();\n        blurListener.destroy();\n      },\n    };\n  });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAgBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BG;SACa,cAAc,CAC5B,MAAuC,EACvC,OAAmD,EACnD,OAA+B,EAAA;AAE/B,IAAA,MAAM,EAAE,YAAY,EAAE,GAAG,YAAY,CAAC,OAAO,EAAE,QAAQ,EAAE,cAAc,CAAC;AAExE,IAAA,OAAO,YAAY,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAI;QACnC,IAAI,QAAQ,EAAE;AACZ,YAAA,OAAO,eAAe;QACxB;AAEA,QAAA,MAAM,UAAU,GAAG,OAAO,EAAE,MAAM,IAAI,EAAE;QAExC,IAAI,UAAU,GAAG,KAAK;QAEtB,SAAS,SAAS,CAAC,KAAY,EAAA;AAC7B,YAAA,MAAM,EAAE,GAAG,SAAS,CAAC,MAAM,CAAC;AAC5B,YAAA,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE;YAEjC,IAAI,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE;AAC3B,gBAAA,OAAO,KAAK;YACd;AAEA,YAAA,IAAI,UAAU,CAAC,MAAM,EAAE;AACrB,gBAAA,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,IAAG;AAChC,oBAAA,MAAM,SAAS,GAAG,SAAS,CAAC,OAAO,CAAC;oBACpC,OAAO,SAAS,IAAI,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC;AAC9C,gBAAA,CAAC,CAAC;YACJ;AAEA,YAAA,OAAO,IAAI;QACb;AAEA,QAAA,MAAM,mBAAmB,GAAG,SAAS,CAAC,MACpC,QAAQ,CAAC,OAAO,CAAC,MAAM,EAAE,aAAa,EAAE,CAAC,CAAe,KAAI;AAC1D,YAAA,UAAU,GAAG,SAAS,CAAC,CAAC,CAAC;QAC3B,CAAC,CAAC,CACH;AAED,QAAA,MAAM,aAAa,GAAG,SAAS,CAAC,MAC9B,QAAQ,CAAC,OAAO,CAAC,MAAM,EAAE,WAAW,EAAE,CAAC,CAAe,KAAI;YACxD,IAAI,CAAC,UAAU,EAAE;gBACf;YACF;YAEA,UAAU,GAAG,KAAK;AAElB,YAAA,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;gBACjB;YACF;YAEA,OAAO,CAAC,CAAC,CAAC;QACZ,CAAC,CAAC,CACH;AAED,QAAA,MAAM,YAAY,GAAG,SAAS,CAAC,MAC7B,QAAQ,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAa,KAAI;YACzC,UAAU,CAAC,MAAK;AACd,gBAAA,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa;AAErC,gBAAA,IAAI,MAAM,EAAE,OAAO,KAAK,QAAQ,EAAE;oBAChC;gBACF;AAEA,gBAAA,MAAM,EAAE,GAAG,SAAS,CAAC,MAAM,CAAC;AAE5B,gBAAA,IAAI,EAAE,EAAE,QAAQ,CAAC,MAAM,CAAC,EAAE;oBACxB;gBACF;gBAEA,OAAO,CAAC,CAAC,CAAC;YACZ,CAAC,EAAE,CAAC,CAAC;QACP,CAAC,CAAC,CACH;QAED,OAAO;YACL,OAAO,EAAE,MAAK;gBACZ,mBAAmB,CAAC,OAAO,EAAE;gBAC7B,aAAa,CAAC,OAAO,EAAE;gBACvB,YAAY,CAAC,OAAO,EAAE;YACxB,CAAC;SACF;AACH,IAAA,CAAC,CAAC;AACJ;;AClIA;;AAEG;;;;"}

package/fesm2022/signality-core-elements-on-disconnect.mjs

@@ -0,0 +1,99 @@
+import { inject, ElementRef, DestroyRef, afterRenderEffect, afterEveryRender } from '@angular/core';
+import { setupContext, NOOP_EFFECT_REF, toElement, isQuerySignal } from '@signality/core/internal';
+
+/**
+ * Executes a callback when an element is disconnected from the DOM.
+ *
+ * @param target - The element to watch for disconnection
+ * @param callback - Callback to execute when the element is disconnected
+ * @param options - Optional configuration including injector
+ * @returns OnDisconnectRef with a destroy method to stop watching for disconnection
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   template: `
+ *     <div #box>Content</div>
+ *     <button (click)="remove()">Remove</button>
+ *   `
+ * })
+ * class DisconnectComponent {
+ *   readonly box = viewChild<ElementRef>('box');
+ *
+ *   constructor() {
+ *     onDisconnect(this.box, el => {
+ *       console.log('Element disconnected: ', el.tagName);
+ *       // perform cleanup without storing the reference
+ *     });
+ *   }
+ * }
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Manual cleanup
+ * const disconnectRef = onDisconnect(element, () => {
+ *   console.log('Disconnected');
+ * });
+ *
+ * // Stop watching before disconnection
+ * disconnectRef.destroy();
+ * ```
+ */
+function onDisconnect(target, callback, options) {
+    const { runInContext } = setupContext(options?.injector, onDisconnect);
+    return runInContext(({ isServer }) => {
+        if (isServer) {
+            return NOOP_EFFECT_REF;
+        }
+        // (1) Host element check
+        // if we are inside a directive and the target element is its host,
+        // then we hook into the directive's lifecycle via its DestroyRef
+        const hostElRef = inject(ElementRef, { optional: true, self: true });
+        if (hostElRef) {
+            const targetEl = toElement(target);
+            if (targetEl && hostElRef.nativeElement === targetEl) {
+                return {
+                    destroy: inject(DestroyRef).onDestroy(() => callback(targetEl)),
+                };
+            }
+        }
+        // (2) Query signal check (viewChild/contentChild)
+        // if target is a query signal, we rely on its automatic state transition
+        // managed by Angular's change detection, calling callback at render completion timing
+        if (isQuerySignal(target)) {
+            const effectRef = afterRenderEffect({
+                read: onCleanup => {
+                    const targetEl = toElement(target);
+                    if (targetEl) {
+                        onCleanup(() => {
+                            if (!targetEl.isConnected)
+                                callback(targetEl);
+                        });
+                    }
+                },
+            });
+            return { destroy: () => effectRef.destroy() };
+        }
+        // (3) Fallback
+        // for any DOM target (reactive or non-reactive), we assume the value was
+        // manually read from the DOM. Therefore, we perform isConnected check after
+        // every render cycle to detect disconnection
+        // @TODO: document the behavior of state transitions when the target is reactive
+        const afterRenderRef = afterEveryRender({
+            read: () => {
+                const targetEl = toElement(target);
+                if (targetEl && !targetEl.isConnected)
+                    callback(targetEl);
+            },
+        });
+        return { destroy: () => afterRenderRef.destroy() };
+    });
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { onDisconnect };
+//# sourceMappingURL=signality-core-elements-on-disconnect.mjs.map

package/fesm2022/signality-core-elements-on-disconnect.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"signality-core-elements-on-disconnect.mjs","sources":["../../../projects/core/elements/on-disconnect/index.ts","../../../projects/core/elements/on-disconnect/signality-core-elements-on-disconnect.ts"],"sourcesContent":["import { afterEveryRender, afterRenderEffect, DestroyRef, ElementRef, inject } from '@angular/core';\nimport { isQuerySignal, NOOP_EFFECT_REF, setupContext, toElement } from '@signality/core/internal';\nimport type { MaybeElementSignal, WithInjector } from '@signality/core/types';\n\nexport type OnDisconnectOptions = WithInjector;\n\nexport interface OnDisconnectRef {\n  readonly destroy: () => void;\n}\n\n/**\n * Executes a callback when an element is disconnected from the DOM.\n *\n * @param target - The element to watch for disconnection\n * @param callback - Callback to execute when the element is disconnected\n * @param options - Optional configuration including injector\n * @returns OnDisconnectRef with a destroy method to stop watching for disconnection\n *\n * @example\n * ```typescript\n * @Component({\n *   template: `\n *     <div #box>Content</div>\n *     <button (click)=\"remove()\">Remove</button>\n *   `\n * })\n * class DisconnectComponent {\n *   readonly box = viewChild<ElementRef>('box');\n *\n *   constructor() {\n *     onDisconnect(this.box, el => {\n *       console.log('Element disconnected: ', el.tagName);\n *       // perform cleanup without storing the reference\n *     });\n *   }\n * }\n * ```\n *\n * @example\n * ```typescript\n * // Manual cleanup\n * const disconnectRef = onDisconnect(element, () => {\n *   console.log('Disconnected');\n * });\n *\n * // Stop watching before disconnection\n * disconnectRef.destroy();\n * ```\n */\nexport function onDisconnect<T extends Element>(\n  target: MaybeElementSignal<T>,\n  callback: (element: T) => void,\n  options?: OnDisconnectOptions\n): OnDisconnectRef {\n  const { runInContext } = setupContext(options?.injector, onDisconnect);\n\n  return runInContext(({ isServer }) => {\n    if (isServer) {\n      return NOOP_EFFECT_REF;\n    }\n\n    // (1) Host element check\n    // if we are inside a directive and the target element is its host,\n    // then we hook into the directive's lifecycle via its DestroyRef\n    const hostElRef = inject(ElementRef, { optional: true, self: true });\n    if (hostElRef) {\n      const targetEl = toElement(target);\n      if (targetEl && hostElRef.nativeElement === targetEl) {\n        return {\n          destroy: inject(DestroyRef).onDestroy(() => callback(targetEl)),\n        };\n      }\n    }\n\n    // (2) Query signal check (viewChild/contentChild)\n    // if target is a query signal, we rely on its automatic state transition\n    // managed by Angular's change detection, calling callback at render completion timing\n    if (isQuerySignal(target)) {\n      const effectRef = afterRenderEffect({\n        read: onCleanup => {\n          const targetEl = toElement(target);\n\n          if (targetEl) {\n            onCleanup(() => {\n              if (!targetEl.isConnected) callback(targetEl);\n            });\n          }\n        },\n      });\n\n      return { destroy: () => effectRef.destroy() };\n    }\n\n    // (3) Fallback\n    // for any DOM target (reactive or non-reactive), we assume the value was\n    // manually read from the DOM. Therefore, we perform isConnected check after\n    // every render cycle to detect disconnection\n    // @TODO: document the behavior of state transitions when the target is reactive\n    const afterRenderRef = afterEveryRender({\n      read: () => {\n        const targetEl = toElement(target);\n        if (targetEl && !targetEl.isConnected) callback(targetEl);\n      },\n    });\n\n    return { destroy: () => afterRenderRef.destroy() };\n  });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCG;SACa,YAAY,CAC1B,MAA6B,EAC7B,QAA8B,EAC9B,OAA6B,EAAA;AAE7B,IAAA,MAAM,EAAE,YAAY,EAAE,GAAG,YAAY,CAAC,OAAO,EAAE,QAAQ,EAAE,YAAY,CAAC;AAEtE,IAAA,OAAO,YAAY,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAI;QACnC,IAAI,QAAQ,EAAE;AACZ,YAAA,OAAO,eAAe;QACxB;;;;AAKA,QAAA,MAAM,SAAS,GAAG,MAAM,CAAC,UAAU,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;QACpE,IAAI,SAAS,EAAE;AACb,YAAA,MAAM,QAAQ,GAAG,SAAS,CAAC,MAAM,CAAC;YAClC,IAAI,QAAQ,IAAI,SAAS,CAAC,aAAa,KAAK,QAAQ,EAAE;gBACpD,OAAO;AACL,oBAAA,OAAO,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,MAAM,QAAQ,CAAC,QAAQ,CAAC,CAAC;iBAChE;YACH;QACF;;;;AAKA,QAAA,IAAI,aAAa,CAAC,MAAM,CAAC,EAAE;YACzB,MAAM,SAAS,GAAG,iBAAiB,CAAC;gBAClC,IAAI,EAAE,SAAS,IAAG;AAChB,oBAAA,MAAM,QAAQ,GAAG,SAAS,CAAC,MAAM,CAAC;oBAElC,IAAI,QAAQ,EAAE;wBACZ,SAAS,CAAC,MAAK;4BACb,IAAI,CAAC,QAAQ,CAAC,WAAW;gCAAE,QAAQ,CAAC,QAAQ,CAAC;AAC/C,wBAAA,CAAC,CAAC;oBACJ;gBACF,CAAC;AACF,aAAA,CAAC;YAEF,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC,OAAO,EAAE,EAAE;QAC/C;;;;;;QAOA,MAAM,cAAc,GAAG,gBAAgB,CAAC;YACtC,IAAI,EAAE,MAAK;AACT,gBAAA,MAAM,QAAQ,GAAG,SAAS,CAAC,MAAM,CAAC;AAClC,gBAAA,IAAI,QAAQ,IAAI,CAAC,QAAQ,CAAC,WAAW;oBAAE,QAAQ,CAAC,QAAQ,CAAC;YAC3D,CAAC;AACF,SAAA,CAAC;QAEF,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC,OAAO,EAAE,EAAE;AACpD,IAAA,CAAC,CAAC;AACJ;;AC3GA;;AAEG;;;;"}

package/fesm2022/signality-core-elements-on-long-press.mjs

@@ -0,0 +1,84 @@
+import { setupContext, NOOP_EFFECT_REF, toValue } from '@signality/core/internal';
+import { listener } from '@signality/core/browser/listener';
+
+/**
+ * Detect long press gestures on an element.
+ * Calls a callback after a configurable delay if the pointer stays down
+ * without moving beyond the distance threshold.
+ *
+ * @param target - The element to detect long presses on
+ * @param handler - Callback invoked when a long press is detected
+ * @param options - Optional configuration including delay, distance threshold, and injector
+ * @returns A OnLongPressRef with a destroy method to stop detection
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   template: `<button #btn>Hold me</button>`
+ * })
+ * class LongPressComponent {
+ *   readonly btn = viewChild<ElementRef>('btn');
+ *
+ *   constructor() {
+ *     onLongPress(this.btn, () => {
+ *       console.log('Long press detected!');
+ *     });
+ *   }
+ * }
+ * ```
+ */
+function onLongPress(target, handler, options) {
+    const { runInContext } = setupContext(options?.injector, onLongPress);
+    return runInContext(({ isServer, onCleanup }) => {
+        if (isServer) {
+            return NOOP_EFFECT_REF;
+        }
+        const distanceThreshold = options?.distanceThreshold;
+        let startX = 0;
+        let startY = 0;
+        let longPressTimeout;
+        function abortPendingPress() {
+            clearTimeout(longPressTimeout);
+            longPressTimeout = undefined;
+        }
+        const downListener = listener(target, 'pointerdown', (e) => {
+            startX = e.clientX;
+            startY = e.clientY;
+            const delay = toValue(options?.delay) ?? 500;
+            longPressTimeout = setTimeout(() => {
+                handler(e);
+                longPressTimeout = undefined;
+            }, delay);
+        });
+        const moveListener = listener(target, 'pointermove', (e) => {
+            if (!longPressTimeout || distanceThreshold === false) {
+                return;
+            }
+            const threshold = distanceThreshold ?? 10;
+            const dx = e.clientX - startX;
+            const dy = e.clientY - startY;
+            if (Math.sqrt(dx * dx + dy * dy) > threshold) {
+                abortPendingPress();
+            }
+        });
+        const upListener = listener(target, 'pointerup', abortPendingPress);
+        const leaveListener = listener(target, 'pointerleave', abortPendingPress);
+        onCleanup(abortPendingPress);
+        return {
+            destroy: () => {
+                abortPendingPress();
+                upListener.destroy();
+                downListener.destroy();
+                moveListener.destroy();
+                leaveListener.destroy();
+            },
+        };
+    });
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { onLongPress };
+//# sourceMappingURL=signality-core-elements-on-long-press.mjs.map

package/fesm2022/signality-core-elements-on-long-press.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"signality-core-elements-on-long-press.mjs","sources":["../../../projects/core/elements/on-long-press/index.ts","../../../projects/core/elements/on-long-press/signality-core-elements-on-long-press.ts"],"sourcesContent":["import { NOOP_EFFECT_REF, setupContext, type Timer, toValue } from '@signality/core/internal';\nimport type { MaybeElementSignal, MaybeSignal, WithInjector } from '@signality/core/types';\nimport { listener } from '@signality/core/browser/listener';\n\nexport interface OnLongPressOptions extends WithInjector {\n  /**\n   * Time in ms before the callback is triggered.\n   * @default 500\n   */\n  readonly delay?: MaybeSignal<number>;\n\n  /**\n   * Maximum distance (in pixels) the pointer can move before cancelling.\n   * Set to `false` to disable distance checking.\n   * @default 10\n   */\n  readonly distanceThreshold?: number | false;\n}\n\nexport interface OnLongPressRef {\n  readonly destroy: () => void;\n}\n\n/**\n * Detect long press gestures on an element.\n * Calls a callback after a configurable delay if the pointer stays down\n * without moving beyond the distance threshold.\n *\n * @param target - The element to detect long presses on\n * @param handler - Callback invoked when a long press is detected\n * @param options - Optional configuration including delay, distance threshold, and injector\n * @returns A OnLongPressRef with a destroy method to stop detection\n *\n * @example\n * ```typescript\n * @Component({\n *   template: `<button #btn>Hold me</button>`\n * })\n * class LongPressComponent {\n *   readonly btn = viewChild<ElementRef>('btn');\n *\n *   constructor() {\n *     onLongPress(this.btn, () => {\n *       console.log('Long press detected!');\n *     });\n *   }\n * }\n * ```\n */\nexport function onLongPress(\n  target: MaybeElementSignal<HTMLElement>,\n  handler: (event: PointerEvent) => void,\n  options?: OnLongPressOptions\n): OnLongPressRef {\n  const { runInContext } = setupContext(options?.injector, onLongPress);\n\n  return runInContext(({ isServer, onCleanup }) => {\n    if (isServer) {\n      return NOOP_EFFECT_REF;\n    }\n\n    const distanceThreshold = options?.distanceThreshold;\n\n    let startX = 0;\n    let startY = 0;\n    let longPressTimeout: Timer;\n\n    function abortPendingPress(): void {\n      clearTimeout(longPressTimeout);\n      longPressTimeout = undefined;\n    }\n\n    const downListener = listener(target, 'pointerdown', (e: PointerEvent) => {\n      startX = e.clientX;\n      startY = e.clientY;\n\n      const delay = toValue(options?.delay) ?? 500;\n\n      longPressTimeout = setTimeout(() => {\n        handler(e);\n        longPressTimeout = undefined;\n      }, delay);\n    });\n\n    const moveListener = listener(target, 'pointermove', (e: PointerEvent) => {\n      if (!longPressTimeout || distanceThreshold === false) {\n        return;\n      }\n\n      const threshold = distanceThreshold ?? 10;\n      const dx = e.clientX - startX;\n      const dy = e.clientY - startY;\n\n      if (Math.sqrt(dx * dx + dy * dy) > threshold) {\n        abortPendingPress();\n      }\n    });\n\n    const upListener = listener(target, 'pointerup', abortPendingPress);\n    const leaveListener = listener(target, 'pointerleave', abortPendingPress);\n\n    onCleanup(abortPendingPress);\n\n    return {\n      destroy: () => {\n        abortPendingPress();\n        upListener.destroy();\n        downListener.destroy();\n        moveListener.destroy();\n        leaveListener.destroy();\n      },\n    };\n  });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAuBA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBG;SACa,WAAW,CACzB,MAAuC,EACvC,OAAsC,EACtC,OAA4B,EAAA;AAE5B,IAAA,MAAM,EAAE,YAAY,EAAE,GAAG,YAAY,CAAC,OAAO,EAAE,QAAQ,EAAE,WAAW,CAAC;IAErE,OAAO,YAAY,CAAC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAI;QAC9C,IAAI,QAAQ,EAAE;AACZ,YAAA,OAAO,eAAe;QACxB;AAEA,QAAA,MAAM,iBAAiB,GAAG,OAAO,EAAE,iBAAiB;QAEpD,IAAI,MAAM,GAAG,CAAC;QACd,IAAI,MAAM,GAAG,CAAC;AACd,QAAA,IAAI,gBAAuB;AAE3B,QAAA,SAAS,iBAAiB,GAAA;YACxB,YAAY,CAAC,gBAAgB,CAAC;YAC9B,gBAAgB,GAAG,SAAS;QAC9B;QAEA,MAAM,YAAY,GAAG,QAAQ,CAAC,MAAM,EAAE,aAAa,EAAE,CAAC,CAAe,KAAI;AACvE,YAAA,MAAM,GAAG,CAAC,CAAC,OAAO;AAClB,YAAA,MAAM,GAAG,CAAC,CAAC,OAAO;YAElB,MAAM,KAAK,GAAG,OAAO,CAAC,OAAO,EAAE,KAAK,CAAC,IAAI,GAAG;AAE5C,YAAA,gBAAgB,GAAG,UAAU,CAAC,MAAK;gBACjC,OAAO,CAAC,CAAC,CAAC;gBACV,gBAAgB,GAAG,SAAS;YAC9B,CAAC,EAAE,KAAK,CAAC;AACX,QAAA,CAAC,CAAC;QAEF,MAAM,YAAY,GAAG,QAAQ,CAAC,MAAM,EAAE,aAAa,EAAE,CAAC,CAAe,KAAI;AACvE,YAAA,IAAI,CAAC,gBAAgB,IAAI,iBAAiB,KAAK,KAAK,EAAE;gBACpD;YACF;AAEA,YAAA,MAAM,SAAS,GAAG,iBAAiB,IAAI,EAAE;AACzC,YAAA,MAAM,EAAE,GAAG,CAAC,CAAC,OAAO,GAAG,MAAM;AAC7B,YAAA,MAAM,EAAE,GAAG,CAAC,CAAC,OAAO,GAAG,MAAM;AAE7B,YAAA,IAAI,IAAI,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,GAAG,SAAS,EAAE;AAC5C,gBAAA,iBAAiB,EAAE;YACrB;AACF,QAAA,CAAC,CAAC;QAEF,MAAM,UAAU,GAAG,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,iBAAiB,CAAC;QACnE,MAAM,aAAa,GAAG,QAAQ,CAAC,MAAM,EAAE,cAAc,EAAE,iBAAiB,CAAC;QAEzE,SAAS,CAAC,iBAAiB,CAAC;QAE5B,OAAO;YACL,OAAO,EAAE,MAAK;AACZ,gBAAA,iBAAiB,EAAE;gBACnB,UAAU,CAAC,OAAO,EAAE;gBACpB,YAAY,CAAC,OAAO,EAAE;gBACtB,YAAY,CAAC,OAAO,EAAE;gBACtB,aAAa,CAAC,OAAO,EAAE;YACzB,CAAC;SACF;AACH,IAAA,CAAC,CAAC;AACJ;;ACjHA;;AAEG;;;;"}

package/fesm2022/signality-core-elements-pointer-swipe.mjs

@@ -0,0 +1,116 @@
+import { signal } from '@angular/core';
+import { setupContext, constSignal } from '@signality/core/internal';
+import { listener } from '@signality/core/browser/listener';
+import { onDisconnect } from '@signality/core/elements/on-disconnect';
+
+/**
+ * Reactive pointer-swipe detection on an element.
+ * Tracks swipe gestures using Pointer Events and provides direction and distance signals.
+ * Works with mouse, touch, and pen input.
+ *
+ * @param target - Element to detect swipe gestures on
+ * @param options - Optional configuration including threshold, pointer types, and injector
+ * @returns A PointerSwipeRef with reactive signals for swipe state
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   template: `
+ *     <div #area>
+ *       <p>Swiping: {{ sw.isSwiping() }}</p>
+ *       <p>Direction: {{ sw.direction() }}</p>
+ *     </div>
+ *   `
+ * })
+ * class PointerSwipeComponent {
+ *   readonly area = viewChild<ElementRef>('area');
+ *   readonly sw = pointerSwipe(this.area);
+ * }
+ * ```
+ */
+function pointerSwipe(target, options) {
+    const { runInContext } = setupContext(options?.injector, pointerSwipe);
+    return runInContext(({ isServer }) => {
+        if (isServer) {
+            return {
+                isSwiping: constSignal(false),
+                direction: constSignal('none'),
+                distanceX: constSignal(0),
+                distanceY: constSignal(0),
+            };
+        }
+        const threshold = options?.threshold ?? 50;
+        const pointerTypes = options?.pointerTypes;
+        const isSwiping = signal(false, ...(ngDevMode ? [{ debugName: "isSwiping" }] : []));
+        const direction = signal('none', ...(ngDevMode ? [{ debugName: "direction" }] : []));
+        const distanceX = signal(0, ...(ngDevMode ? [{ debugName: "distanceX" }] : []));
+        const distanceY = signal(0, ...(ngDevMode ? [{ debugName: "distanceY" }] : []));
+        let startX = 0;
+        let startY = 0;
+        let isPointerDown = false;
+        function isAllowedPointerType(e) {
+            return !pointerTypes || pointerTypes.includes(e.pointerType);
+        }
+        listener.passive(target, 'pointerdown', (e) => {
+            if (!isAllowedPointerType(e)) {
+                return;
+            }
+            isPointerDown = true;
+            e.target?.setPointerCapture(e.pointerId);
+            startX = e.clientX;
+            startY = e.clientY;
+            isSwiping.set(false);
+            direction.set('none');
+            distanceX.set(0);
+            distanceY.set(0);
+        });
+        listener.passive(target, 'pointermove', (e) => {
+            if (!isPointerDown || !isAllowedPointerType(e)) {
+                return;
+            }
+            const dx = startX - e.clientX;
+            const dy = startY - e.clientY;
+            distanceX.set(dx);
+            distanceY.set(dy);
+            const absDx = Math.abs(dx);
+            const absDy = Math.abs(dy);
+            if (Math.max(absDx, absDy) >= threshold) {
+                if (!isSwiping()) {
+                    isSwiping.set(true);
+                }
+                if (absDx > absDy) {
+                    direction.set(dx > 0 ? 'left' : 'right');
+                }
+                else {
+                    direction.set(dy > 0 ? 'up' : 'down');
+                }
+            }
+        });
+        const onPointerEnd = () => {
+            isPointerDown = false;
+            isSwiping.set(false);
+        };
+        listener.passive(target, 'pointerup', onPointerEnd);
+        listener.passive(target, 'pointercancel', onPointerEnd);
+        onDisconnect(target, () => {
+            isPointerDown = false;
+            isSwiping.set(false);
+            direction.set('none');
+            distanceX.set(0);
+            distanceY.set(0);
+        });
+        return {
+            isSwiping: isSwiping.asReadonly(),
+            direction: direction.asReadonly(),
+            distanceX: distanceX.asReadonly(),
+            distanceY: distanceY.asReadonly(),
+        };
+    });
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { pointerSwipe };
+//# sourceMappingURL=signality-core-elements-pointer-swipe.mjs.map

package/fesm2022/signality-core-elements-pointer-swipe.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"signality-core-elements-pointer-swipe.mjs","sources":["../../../projects/core/elements/pointer-swipe/index.ts","../../../projects/core/elements/pointer-swipe/signality-core-elements-pointer-swipe.ts"],"sourcesContent":["import { type Signal, signal } from '@angular/core';\nimport { constSignal, setupContext } from '@signality/core/internal';\nimport type { MaybeElementSignal, WithInjector } from '@signality/core/types';\nimport { listener } from '@signality/core/browser/listener';\nimport { onDisconnect } from '@signality/core/elements/on-disconnect';\n\n/**\n * Pointer type that triggered the event.\n */\nexport type PointerType = 'mouse' | 'touch' | 'pen';\n\n/**\n * Possible swipe direction values.\n */\nexport type PointerSwipeDirection = 'up' | 'down' | 'left' | 'right' | 'none';\n\nexport interface PointerSwipeOptions extends WithInjector {\n  /**\n   * Minimum distance in pixels before a swipe is recognized.\n   * @default 50\n   */\n  readonly threshold?: number;\n\n  /**\n   * Pointer types to listen for.\n   * @default ['mouse', 'touch', 'pen']\n   */\n  readonly pointerTypes?: PointerType[];\n}\n\nexport interface PointerSwipeRef {\n  /** Whether a swipe gesture is currently in progress. */\n  readonly isSwiping: Signal<boolean>;\n\n  /** Current swipe direction, or `'none'` if a threshold has not been exceeded. */\n  readonly direction: Signal<PointerSwipeDirection>;\n\n  /** Horizontal distance from start (positive = swiped left). */\n  readonly distanceX: Signal<number>;\n\n  /** Vertical distance from start (positive = swiped up). */\n  readonly distanceY: Signal<number>;\n}\n\n/**\n * Reactive pointer-swipe detection on an element.\n * Tracks swipe gestures using Pointer Events and provides direction and distance signals.\n * Works with mouse, touch, and pen input.\n *\n * @param target - Element to detect swipe gestures on\n * @param options - Optional configuration including threshold, pointer types, and injector\n * @returns A PointerSwipeRef with reactive signals for swipe state\n *\n * @example\n * ```typescript\n * @Component({\n *   template: `\n *     <div #area>\n *       <p>Swiping: {{ sw.isSwiping() }}</p>\n *       <p>Direction: {{ sw.direction() }}</p>\n *     </div>\n *   `\n * })\n * class PointerSwipeComponent {\n *   readonly area = viewChild<ElementRef>('area');\n *   readonly sw = pointerSwipe(this.area);\n * }\n * ```\n */\nexport function pointerSwipe(\n  target: MaybeElementSignal<HTMLElement>,\n  options?: PointerSwipeOptions\n): PointerSwipeRef {\n  const { runInContext } = setupContext(options?.injector, pointerSwipe);\n\n  return runInContext(({ isServer }) => {\n    if (isServer) {\n      return {\n        isSwiping: constSignal(false),\n        direction: constSignal('none'),\n        distanceX: constSignal(0),\n        distanceY: constSignal(0),\n      };\n    }\n\n    const threshold = options?.threshold ?? 50;\n    const pointerTypes = options?.pointerTypes;\n\n    const isSwiping = signal(false);\n    const direction = signal<PointerSwipeDirection>('none');\n    const distanceX = signal(0);\n    const distanceY = signal(0);\n\n    let startX = 0;\n    let startY = 0;\n    let isPointerDown = false;\n\n    function isAllowedPointerType(e: PointerEvent): boolean {\n      return !pointerTypes || pointerTypes.includes(e.pointerType as PointerType);\n    }\n\n    listener.passive(target, 'pointerdown', (e: PointerEvent) => {\n      if (!isAllowedPointerType(e)) {\n        return;\n      }\n\n      isPointerDown = true;\n\n      (e.target as HTMLElement | undefined)?.setPointerCapture(e.pointerId);\n\n      startX = e.clientX;\n      startY = e.clientY;\n\n      isSwiping.set(false);\n      direction.set('none');\n      distanceX.set(0);\n      distanceY.set(0);\n    });\n\n    listener.passive(target, 'pointermove', (e: PointerEvent) => {\n      if (!isPointerDown || !isAllowedPointerType(e)) {\n        return;\n      }\n\n      const dx = startX - e.clientX;\n      const dy = startY - e.clientY;\n\n      distanceX.set(dx);\n      distanceY.set(dy);\n\n      const absDx = Math.abs(dx);\n      const absDy = Math.abs(dy);\n\n      if (Math.max(absDx, absDy) >= threshold) {\n        if (!isSwiping()) {\n          isSwiping.set(true);\n        }\n\n        if (absDx > absDy) {\n          direction.set(dx > 0 ? 'left' : 'right');\n        } else {\n          direction.set(dy > 0 ? 'up' : 'down');\n        }\n      }\n    });\n\n    const onPointerEnd = () => {\n      isPointerDown = false;\n      isSwiping.set(false);\n    };\n\n    listener.passive(target, 'pointerup', onPointerEnd);\n    listener.passive(target, 'pointercancel', onPointerEnd);\n\n    onDisconnect(target, () => {\n      isPointerDown = false;\n      isSwiping.set(false);\n      direction.set('none');\n      distanceX.set(0);\n      distanceY.set(0);\n    });\n\n    return {\n      isSwiping: isSwiping.asReadonly(),\n      direction: direction.asReadonly(),\n      distanceX: distanceX.asReadonly(),\n      distanceY: distanceY.asReadonly(),\n    };\n  });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}