@signality/core 0.0.1-alpha.2

package/fesm2022/signality-core-elements-active-element.mjs

@@ -0,0 +1,88 @@
+import { signal } from '@angular/core';
+import { setupContext, constSignal, getActiveElement, getShadowRoot, getEventTarget, createToken } from '@signality/core/internal';
+import { listener, setupSync } from '@signality/core/browser/listener';
+import { onDisconnect } from '@signality/core/elements/on-disconnect';
+
+/**
+ * Signal-based wrapper around the [document.activeElement](https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement) property.
+ *
+ * @param options - Optional configuration including signal options and injector
+ * @returns A signal containing the currently active element, or null
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   template: `
+ *     @if (activeEl(); as el) {
+ *       <p>Active element: {{ el.tagName }}</p>
+ *     } @else {
+ *       <p>No element is active</p>
+ *     }
+ *   `
+ * })
+ * class ActiveElementComponent {
+ *   readonly activeEl = activeElement();
+ * }
+ * ```
+ */
+function activeElement(options) {
+    const { runInContext } = setupContext(options?.injector, activeElement);
+    return runInContext(({ isServer, injector }) => {
+        if (isServer) {
+            return constSignal(null);
+        }
+        const activeEl = signal(getActiveElement(document), options);
+        let shadowFocusinListener;
+        let shadowFocusoutListener;
+        const updateActiveElement = () => {
+            activeEl.set(getActiveElement(document));
+        };
+        const cleanupShadowListeners = () => {
+            shadowFocusinListener?.destroy();
+            shadowFocusinListener = null;
+            shadowFocusoutListener?.destroy();
+            shadowFocusoutListener = null;
+        };
+        const setupShadowListeners = (target) => {
+            cleanupShadowListeners();
+            if (!target) {
+                return;
+            }
+            const shadowRoot = getShadowRoot(target);
+            if (!shadowRoot) {
+                return;
+            }
+            shadowFocusinListener = listener(shadowRoot, 'focusin', updateActiveElement, { injector });
+            shadowFocusoutListener = listener(shadowRoot, 'focusout', () => {
+                setTimeout(() => {
+                    updateActiveElement();
+                    setupShadowListeners(activeEl());
+                });
+            }, { injector });
+        };
+        setupSync(() => {
+            listener.capture(window, 'focusin', (e) => {
+                updateActiveElement();
+                setupShadowListeners(getEventTarget(e));
+            });
+            listener.capture(window, 'focusout', (e) => {
+                if (e.relatedTarget === null) {
+                    updateActiveElement();
+                }
+            });
+        });
+        onDisconnect(activeEl, () => {
+            cleanupShadowListeners();
+            updateActiveElement();
+        });
+        return activeEl.asReadonly();
+    });
+}
+const ACTIVE_ELEMENT = /* @__PURE__ */ createToken(activeElement);
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ACTIVE_ELEMENT, activeElement };
+//# sourceMappingURL=signality-core-elements-active-element.mjs.map

package/fesm2022/signality-core-elements-active-element.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"signality-core-elements-active-element.mjs","sources":["../../../projects/core/elements/active-element/index.ts","../../../projects/core/elements/active-element/signality-core-elements-active-element.ts"],"sourcesContent":["import { type CreateSignalOptions, type Signal, signal } from '@angular/core';\nimport {\n  constSignal,\n  createToken,\n  getActiveElement,\n  getEventTarget,\n  getShadowRoot,\n  setupContext,\n} from '@signality/core/internal';\nimport type { WithInjector } from '@signality/core/types';\nimport { listener, type ListenerRef, setupSync } from '@signality/core/browser/listener';\nimport { onDisconnect } from '@signality/core/elements/on-disconnect';\n\nexport type ActiveElementOptions = CreateSignalOptions<Element | null> & WithInjector;\n\n/**\n * Signal-based wrapper around the [document.activeElement](https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement) property.\n *\n * @param options - Optional configuration including signal options and injector\n * @returns A signal containing the currently active element, or null\n *\n * @example\n * ```typescript\n * @Component({\n *   template: `\n *     @if (activeEl(); as el) {\n *       <p>Active element: {{ el.tagName }}</p>\n *     } @else {\n *       <p>No element is active</p>\n *     }\n *   `\n * })\n * class ActiveElementComponent {\n *   readonly activeEl = activeElement();\n * }\n * ```\n */\nexport function activeElement(options?: ActiveElementOptions): Signal<Element | null> {\n  const { runInContext } = setupContext(options?.injector, activeElement);\n\n  return runInContext(({ isServer, injector }) => {\n    if (isServer) {\n      return constSignal(null);\n    }\n\n    const activeEl = signal<Element | null>(getActiveElement(document), options);\n\n    let shadowFocusinListener: ListenerRef | null;\n    let shadowFocusoutListener: ListenerRef | null;\n\n    const updateActiveElement = () => {\n      activeEl.set(getActiveElement(document));\n    };\n\n    const cleanupShadowListeners = () => {\n      shadowFocusinListener?.destroy();\n      shadowFocusinListener = null;\n      shadowFocusoutListener?.destroy();\n      shadowFocusoutListener = null;\n    };\n\n    const setupShadowListeners = (target: Element | null) => {\n      cleanupShadowListeners();\n\n      if (!target) {\n        return;\n      }\n\n      const shadowRoot = getShadowRoot(target);\n\n      if (!shadowRoot) {\n        return;\n      }\n\n      shadowFocusinListener = listener(shadowRoot, 'focusin', updateActiveElement, { injector });\n\n      shadowFocusoutListener = listener(\n        shadowRoot,\n        'focusout',\n        () => {\n          setTimeout(() => {\n            updateActiveElement();\n            setupShadowListeners(activeEl());\n          });\n        },\n        { injector }\n      );\n    };\n\n    setupSync(() => {\n      listener.capture(window, 'focusin', (e: FocusEvent) => {\n        updateActiveElement();\n        setupShadowListeners(getEventTarget(e));\n      });\n\n      listener.capture(window, 'focusout', (e: FocusEvent) => {\n        if (e.relatedTarget === null) {\n          updateActiveElement();\n        }\n      });\n    });\n\n    onDisconnect(activeEl, () => {\n      cleanupShadowListeners();\n      updateActiveElement();\n    });\n\n    return activeEl.asReadonly();\n  });\n}\n\nexport const ACTIVE_ELEMENT = /* @__PURE__ */ createToken(activeElement);\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAeA;;;;;;;;;;;;;;;;;;;;;AAqBG;AACG,SAAU,aAAa,CAAC,OAA8B,EAAA;AAC1D,IAAA,MAAM,EAAE,YAAY,EAAE,GAAG,YAAY,CAAC,OAAO,EAAE,QAAQ,EAAE,aAAa,CAAC;IAEvE,OAAO,YAAY,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAI;QAC7C,IAAI,QAAQ,EAAE;AACZ,YAAA,OAAO,WAAW,CAAC,IAAI,CAAC;QAC1B;QAEA,MAAM,QAAQ,GAAG,MAAM,CAAiB,gBAAgB,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;AAE5E,QAAA,IAAI,qBAAyC;AAC7C,QAAA,IAAI,sBAA0C;QAE9C,MAAM,mBAAmB,GAAG,MAAK;YAC/B,QAAQ,CAAC,GAAG,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;AAC1C,QAAA,CAAC;QAED,MAAM,sBAAsB,GAAG,MAAK;YAClC,qBAAqB,EAAE,OAAO,EAAE;YAChC,qBAAqB,GAAG,IAAI;YAC5B,sBAAsB,EAAE,OAAO,EAAE;YACjC,sBAAsB,GAAG,IAAI;AAC/B,QAAA,CAAC;AAED,QAAA,MAAM,oBAAoB,GAAG,CAAC,MAAsB,KAAI;AACtD,YAAA,sBAAsB,EAAE;YAExB,IAAI,CAAC,MAAM,EAAE;gBACX;YACF;AAEA,YAAA,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM,CAAC;YAExC,IAAI,CAAC,UAAU,EAAE;gBACf;YACF;AAEA,YAAA,qBAAqB,GAAG,QAAQ,CAAC,UAAU,EAAE,SAAS,EAAE,mBAAmB,EAAE,EAAE,QAAQ,EAAE,CAAC;YAE1F,sBAAsB,GAAG,QAAQ,CAC/B,UAAU,EACV,UAAU,EACV,MAAK;gBACH,UAAU,CAAC,MAAK;AACd,oBAAA,mBAAmB,EAAE;AACrB,oBAAA,oBAAoB,CAAC,QAAQ,EAAE,CAAC;AAClC,gBAAA,CAAC,CAAC;AACJ,YAAA,CAAC,EACD,EAAE,QAAQ,EAAE,CACb;AACH,QAAA,CAAC;QAED,SAAS,CAAC,MAAK;YACb,QAAQ,CAAC,OAAO,CAAC,MAAM,EAAE,SAAS,EAAE,CAAC,CAAa,KAAI;AACpD,gBAAA,mBAAmB,EAAE;AACrB,gBAAA,oBAAoB,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;AACzC,YAAA,CAAC,CAAC;YAEF,QAAQ,CAAC,OAAO,CAAC,MAAM,EAAE,UAAU,EAAE,CAAC,CAAa,KAAI;AACrD,gBAAA,IAAI,CAAC,CAAC,aAAa,KAAK,IAAI,EAAE;AAC5B,oBAAA,mBAAmB,EAAE;gBACvB;AACF,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC,CAAC;AAEF,QAAA,YAAY,CAAC,QAAQ,EAAE,MAAK;AAC1B,YAAA,sBAAsB,EAAE;AACxB,YAAA,mBAAmB,EAAE;AACvB,QAAA,CAAC,CAAC;AAEF,QAAA,OAAO,QAAQ,CAAC,UAAU,EAAE;AAC9B,IAAA,CAAC,CAAC;AACJ;AAEO,MAAM,cAAc,mBAAmB,WAAW,CAAC,aAAa;;AC/GvE;;AAEG;;;;"}

package/fesm2022/signality-core-elements-dropzone.mjs

@@ -0,0 +1,158 @@
+import { signal, isSignal } from '@angular/core';
+import { setupContext, constSignal, toValue, toElement, isNodeWithin } from '@signality/core/internal';
+import { listener } from '@signality/core/browser/listener';
+import { onDisconnect } from '@signality/core/elements/on-disconnect';
+import { watcher } from '@signality/core/reactivity/watcher';
+
+/**
+ * Signal-based wrapper around the [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API).
+ *
+ * @param target - Drop zone element
+ * @param options - Optional configuration
+ * @returns An object with isOver, files, data, and isDragging signals
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   template: `
+ *     <div
+ *       #zone
+ *       [class.over]="drop.isOver()"
+ *       [class.dragging]="drop.isDragging()"
+ *     >
+ *       Drop files here
+ *       @if (drop.files().length > 0) {
+ *         <ul>
+ *           @for (file of drop.files(); track file.name) {
+ *             <li>{{ file.name }} ({{ file.size }} bytes)</li>
+ *           }
+ *         </ul>
+ *       }
+ *     </div>
+ *   `
+ * })
+ * class DropzoneComponent {
+ *   readonly zone = viewChild<ElementRef>('zone');
+ *   readonly drop = dropzone(this.zone, { accept: ['image/*'], multiple: true });
+ * }
+ * ```
+ */
+function dropzone(target, options) {
+    const { runInContext } = setupContext(options?.injector, dropzone);
+    return runInContext(({ isServer }) => {
+        if (isServer) {
+            return {
+                files: signal([]),
+                isOver: constSignal(false),
+                isDragging: constSignal(false),
+            };
+        }
+        const accept = options?.accept ?? ['*'];
+        const multiple = options?.multiple ?? true;
+        const preventDocumentDrop = options?.preventDocumentDrop ?? true;
+        const files = signal([], ...(ngDevMode ? [{ debugName: "files" }] : []));
+        const isOver = signal(false, ...(ngDevMode ? [{ debugName: "isOver" }] : []));
+        const isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
+        let dragCounter = 0;
+        const isAcceptedType = (file) => {
+            const acceptTypes = toValue(accept);
+            if (acceptTypes.includes('*')) {
+                return true;
+            }
+            return acceptTypes.some(type => {
+                if (type.endsWith('/*')) {
+                    const prefix = type.slice(0, -1);
+                    return file.type.startsWith(prefix);
+                }
+                return file.type === type;
+            });
+        };
+        const filterFiles = (files) => {
+            const isMultiple = toValue(multiple);
+            const result = [];
+            for (let i = 0; i < files.length; i++) {
+                const file = files[i];
+                if (isAcceptedType(file)) {
+                    result.push(file);
+                    if (!isMultiple) {
+                        break;
+                    }
+                }
+            }
+            return result;
+        };
+        listener.prevent.capture(target, 'dragenter', () => {
+            dragCounter++;
+            isOver.set(true);
+        });
+        listener.prevent.capture(target, 'dragleave', () => {
+            dragCounter--;
+            if (dragCounter === 0) {
+                isOver.set(false);
+            }
+        });
+        listener.prevent.capture(target, 'dragover', (e) => {
+            if (e.dataTransfer) {
+                e.dataTransfer.dropEffect = 'copy';
+            }
+        });
+        listener.prevent.stop.capture(target, 'drop', (e) => {
+            dragCounter = 0;
+            isOver.set(false);
+            isDragging.set(false);
+            if (e.dataTransfer && e.dataTransfer.files.length > 0) {
+                const filtered = filterFiles(Array.from(e.dataTransfer.files));
+                files.set(filtered);
+            }
+        });
+        listener.capture(document, 'dragenter', () => {
+            isDragging.set(true);
+        });
+        listener.capture(document, 'dragleave', (e) => {
+            if (e.relatedTarget === null) {
+                isDragging.set(false);
+            }
+        });
+        listener.capture(document, 'drop', () => {
+            isDragging.set(false);
+        });
+        if (preventDocumentDrop) {
+            listener.capture(document, 'dragover', (e) => {
+                const el = toElement(target);
+                if (el && !isNodeWithin(e.target, el)) {
+                    e.preventDefault();
+                    if (e.dataTransfer) {
+                        e.dataTransfer.dropEffect = 'none';
+                    }
+                }
+            });
+            listener.capture(document, 'drop', (e) => {
+                const el = toElement(target);
+                if (el && !isNodeWithin(e.target, el)) {
+                    e.preventDefault();
+                }
+            });
+        }
+        const filters = [accept, multiple].filter(isSignal);
+        if (filters.length) {
+            watcher(filters, () => files.update(filterFiles));
+        }
+        onDisconnect(target, () => {
+            files.set([]);
+            isOver.set(false);
+            isDragging.set(false);
+        });
+        return {
+            files,
+            isOver: isOver.asReadonly(),
+            isDragging: isDragging.asReadonly(),
+        };
+    });
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { dropzone };
+//# sourceMappingURL=signality-core-elements-dropzone.mjs.map

package/fesm2022/signality-core-elements-dropzone.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"signality-core-elements-dropzone.mjs","sources":["../../../projects/core/elements/dropzone/index.ts","../../../projects/core/elements/dropzone/signality-core-elements-dropzone.ts"],"sourcesContent":["import { isSignal, type Signal, signal, type WritableSignal } from '@angular/core';\nimport {\n  constSignal,\n  isNodeWithin,\n  setupContext,\n  toElement,\n  toValue,\n} from '@signality/core/internal';\nimport type { MaybeElementSignal, MaybeSignal, WithInjector } from '@signality/core/types';\nimport { listener } from '@signality/core/browser/listener';\nimport { onDisconnect } from '@signality/core/elements/on-disconnect';\nimport { watcher } from '@signality/core/reactivity/watcher';\n\nexport interface DropzoneOptions extends WithInjector {\n  /**\n   * Accepted MIME types.\n   * @default ['*']\n   */\n  readonly accept?: MaybeSignal<string[]>;\n\n  /**\n   * Allow multiple files.\n   * @default true\n   */\n  readonly multiple?: MaybeSignal<boolean>;\n\n  /**\n   * Prevent drops outside the zone.\n   * @default true\n   */\n  readonly preventDocumentDrop?: boolean;\n}\n\nexport interface DropzoneRef {\n  /** Dropped files */\n  readonly files: WritableSignal<File[]>;\n\n  /** Whether dragging over the zone */\n  readonly isOver: Signal<boolean>;\n\n  /** Whether any drag is in progress (document-wide) */\n  readonly isDragging: Signal<boolean>;\n}\n\n/**\n * Signal-based wrapper around the [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API).\n *\n * @param target - Drop zone element\n * @param options - Optional configuration\n * @returns An object with isOver, files, data, and isDragging signals\n *\n * @example\n * ```typescript\n * @Component({\n *   template: `\n *     <div\n *       #zone\n *       [class.over]=\"drop.isOver()\"\n *       [class.dragging]=\"drop.isDragging()\"\n *     >\n *       Drop files here\n *       @if (drop.files().length > 0) {\n *         <ul>\n *           @for (file of drop.files(); track file.name) {\n *             <li>{{ file.name }} ({{ file.size }} bytes)</li>\n *           }\n *         </ul>\n *       }\n *     </div>\n *   `\n * })\n * class DropzoneComponent {\n *   readonly zone = viewChild<ElementRef>('zone');\n *   readonly drop = dropzone(this.zone, { accept: ['image/*'], multiple: true });\n * }\n * ```\n */\nexport function dropzone(\n  target: MaybeElementSignal<HTMLElement>,\n  options?: DropzoneOptions\n): DropzoneRef {\n  const { runInContext } = setupContext(options?.injector, dropzone);\n\n  return runInContext(({ isServer }) => {\n    if (isServer) {\n      return {\n        files: signal([]),\n        isOver: constSignal(false),\n        isDragging: constSignal(false),\n      };\n    }\n\n    const accept = options?.accept ?? ['*'];\n    const multiple = options?.multiple ?? true;\n    const preventDocumentDrop = options?.preventDocumentDrop ?? true;\n\n    const files = signal<File[]>([]);\n    const isOver = signal(false);\n    const isDragging = signal(false);\n\n    let dragCounter = 0;\n\n    const isAcceptedType = (file: File): boolean => {\n      const acceptTypes = toValue(accept);\n\n      if (acceptTypes.includes('*')) {\n        return true;\n      }\n\n      return acceptTypes.some(type => {\n        if (type.endsWith('/*')) {\n          const prefix = type.slice(0, -1);\n          return file.type.startsWith(prefix);\n        }\n        return file.type === type;\n      });\n    };\n\n    const filterFiles = (files: File[]): File[] => {\n      const isMultiple = toValue(multiple);\n      const result: File[] = [];\n\n      for (let i = 0; i < files.length; i++) {\n        const file = files[i];\n        if (isAcceptedType(file)) {\n          result.push(file);\n          if (!isMultiple) {\n            break;\n          }\n        }\n      }\n\n      return result;\n    };\n\n    listener.prevent.capture(target, 'dragenter', () => {\n      dragCounter++;\n      isOver.set(true);\n    });\n\n    listener.prevent.capture(target, 'dragleave', () => {\n      dragCounter--;\n      if (dragCounter === 0) {\n        isOver.set(false);\n      }\n    });\n\n    listener.prevent.capture(target, 'dragover', (e: DragEvent) => {\n      if (e.dataTransfer) {\n        e.dataTransfer.dropEffect = 'copy';\n      }\n    });\n\n    listener.prevent.stop.capture(target, 'drop', (e: DragEvent) => {\n      dragCounter = 0;\n      isOver.set(false);\n      isDragging.set(false);\n\n      if (e.dataTransfer && e.dataTransfer.files.length > 0) {\n        const filtered = filterFiles(Array.from(e.dataTransfer.files));\n        files.set(filtered);\n      }\n    });\n\n    listener.capture(document, 'dragenter', () => {\n      isDragging.set(true);\n    });\n\n    listener.capture(document, 'dragleave', (e: DragEvent) => {\n      if (e.relatedTarget === null) {\n        isDragging.set(false);\n      }\n    });\n\n    listener.capture(document, 'drop', () => {\n      isDragging.set(false);\n    });\n\n    if (preventDocumentDrop) {\n      listener.capture(document, 'dragover', (e: DragEvent) => {\n        const el = toElement(target);\n        if (el && !isNodeWithin(e.target as Node, el)) {\n          e.preventDefault();\n          if (e.dataTransfer) {\n            e.dataTransfer.dropEffect = 'none';\n          }\n        }\n      });\n\n      listener.capture(document, 'drop', (e: DragEvent) => {\n        const el = toElement(target);\n        if (el && !isNodeWithin(e.target as Node, el)) {\n          e.preventDefault();\n        }\n      });\n    }\n\n    const filters = [accept, multiple].filter(isSignal) as Signal<any>[];\n\n    if (filters.length) {\n      watcher(filters, () => files.update(filterFiles));\n    }\n\n    onDisconnect(target, () => {\n      files.set([]);\n      isOver.set(false);\n      isDragging.set(false);\n    });\n\n    return {\n      files,\n      isOver: isOver.asReadonly(),\n      isDragging: isDragging.asReadonly(),\n    };\n  });\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-element-focus-within.mjs

@@ -0,0 +1,56 @@
+import { signal } from '@angular/core';
+import { setupContext, constSignal, toElement } from '@signality/core/internal';
+import { listener } from '@signality/core/browser/listener';
+import { onDisconnect } from '@signality/core/elements/on-disconnect';
+
+/**
+ * Reactive tracking of focus-within state on an element.
+ * Detects when focus is inside an element or any of its descendants,
+ * analogous to the CSS `:focus-within` pseudo-class.
+ *
+ * @param target - The element to track focus-within state on
+ * @param options - Optional configuration including signal options and injector
+ * @returns A signal that is `true` when focus is within the element
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   template: `
+ *     <div #container [class.focused]="isFocusedWithin()">
+ *       <input placeholder="First" />
+ *       <input placeholder="Second" />
+ *     </div>
+ *   `
+ * })
+ * class FocusWithinComponent {
+ *   readonly container = viewChild<ElementRef>('container');
+ *   readonly isFocusedWithin = elementFocusWithin(this.container);
+ * }
+ * ```
+ */
+function elementFocusWithin(target, options) {
+    const { runInContext } = setupContext(options?.injector, elementFocusWithin);
+    return runInContext(({ isServer }) => {
+        if (isServer) {
+            return constSignal(false);
+        }
+        const focused = signal(false, options);
+        listener(target, 'focusin', () => focused.set(true));
+        listener(target, 'focusout', e => {
+            const el = toElement(target);
+            if (el && e.relatedTarget instanceof Node && el.contains(e.relatedTarget)) {
+                return;
+            }
+            focused.set(false);
+        });
+        onDisconnect(target, () => focused.set(false));
+        return focused.asReadonly();
+    });
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { elementFocusWithin };
+//# sourceMappingURL=signality-core-elements-element-focus-within.mjs.map

package/fesm2022/signality-core-elements-element-focus-within.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"signality-core-elements-element-focus-within.mjs","sources":["../../../projects/core/elements/element-focus-within/index.ts","../../../projects/core/elements/element-focus-within/signality-core-elements-element-focus-within.ts"],"sourcesContent":["import { type CreateSignalOptions, signal, type Signal } from '@angular/core';\nimport { constSignal, setupContext, toElement } 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 type ElementFocusWithinOptions = CreateSignalOptions<boolean> & WithInjector;\n\n/**\n * Reactive tracking of focus-within state on an element.\n * Detects when focus is inside an element or any of its descendants,\n * analogous to the CSS `:focus-within` pseudo-class.\n *\n * @param target - The element to track focus-within state on\n * @param options - Optional configuration including signal options and injector\n * @returns A signal that is `true` when focus is within the element\n *\n * @example\n * ```typescript\n * @Component({\n *   template: `\n *     <div #container [class.focused]=\"isFocusedWithin()\">\n *       <input placeholder=\"First\" />\n *       <input placeholder=\"Second\" />\n *     </div>\n *   `\n * })\n * class FocusWithinComponent {\n *   readonly container = viewChild<ElementRef>('container');\n *   readonly isFocusedWithin = elementFocusWithin(this.container);\n * }\n * ```\n */\nexport function elementFocusWithin(\n  target: MaybeElementSignal<HTMLElement>,\n  options?: ElementFocusWithinOptions\n): Signal<boolean> {\n  const { runInContext } = setupContext(options?.injector, elementFocusWithin);\n\n  return runInContext(({ isServer }) => {\n    if (isServer) {\n      return constSignal(false);\n    }\n\n    const focused = signal<boolean>(false, options);\n\n    listener(target, 'focusin', () => focused.set(true));\n\n    listener(target, 'focusout', e => {\n      const el = toElement(target);\n\n      if (el && e.relatedTarget instanceof Node && el.contains(e.relatedTarget)) {\n        return;\n      }\n\n      focused.set(false);\n    });\n\n    onDisconnect(target, () => focused.set(false));\n\n    return focused.asReadonly();\n  });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAQA;;;;;;;;;;;;;;;;;;;;;;;;AAwBG;AACG,SAAU,kBAAkB,CAChC,MAAuC,EACvC,OAAmC,EAAA;AAEnC,IAAA,MAAM,EAAE,YAAY,EAAE,GAAG,YAAY,CAAC,OAAO,EAAE,QAAQ,EAAE,kBAAkB,CAAC;AAE5E,IAAA,OAAO,YAAY,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAI;QACnC,IAAI,QAAQ,EAAE;AACZ,YAAA,OAAO,WAAW,CAAC,KAAK,CAAC;QAC3B;QAEA,MAAM,OAAO,GAAG,MAAM,CAAU,KAAK,EAAE,OAAO,CAAC;AAE/C,QAAA,QAAQ,CAAC,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;AAEpD,QAAA,QAAQ,CAAC,MAAM,EAAE,UAAU,EAAE,CAAC,IAAG;AAC/B,YAAA,MAAM,EAAE,GAAG,SAAS,CAAC,MAAM,CAAC;AAE5B,YAAA,IAAI,EAAE,IAAI,CAAC,CAAC,aAAa,YAAY,IAAI,IAAI,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,EAAE;gBACzE;YACF;AAEA,YAAA,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC;AACpB,QAAA,CAAC,CAAC;AAEF,QAAA,YAAY,CAAC,MAAM,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;AAE9C,QAAA,OAAO,OAAO,CAAC,UAAU,EAAE;AAC7B,IAAA,CAAC,CAAC;AACJ;;AC9DA;;AAEG;;;;"}

package/fesm2022/signality-core-elements-element-focus.mjs

@@ -0,0 +1,54 @@
+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 tracking of focus state on an element.
+ * Detects when an element gains or loses focus.
+ *
+ * @param target - The element to track focus state on
+ * @param options - Optional configuration including focusVisible mode and injector
+ * @returns A signal that is `true` when the element has focus
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   template: `
+ *     <input #input [class.focused]="isFocused()" />
+ *     @if (isFocused()) {
+ *       <p>Input is focused</p>
+ *     }
+ *   `
+ * })
+ * class FocusComponent {
+ *   readonly input = viewChild<ElementRef>('input');
+ *   readonly isFocused = elementFocus(this.input);
+ * }
+ * ```
+ */
+function elementFocus(target, options) {
+    const { runInContext } = setupContext(options?.injector, elementFocus);
+    return runInContext(({ isServer }) => {
+        if (isServer) {
+            return constSignal(false);
+        }
+        const focusVisible = options?.focusVisible ?? false;
+        const focused = signal(false, options);
+        listener(target, 'focus', e => {
+            focused.set(focusVisible ? e.target.matches(':focus-visible') : true);
+        });
+        listener(target, 'blur', () => {
+            focused.set(false);
+        });
+        onDisconnect(target, () => focused.set(false));
+        return focused.asReadonly();
+    });
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { elementFocus };
+//# sourceMappingURL=signality-core-elements-element-focus.mjs.map

package/fesm2022/signality-core-elements-element-focus.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"signality-core-elements-element-focus.mjs","sources":["../../../projects/core/elements/element-focus/index.ts","../../../projects/core/elements/element-focus/signality-core-elements-element-focus.ts"],"sourcesContent":["import { type CreateSignalOptions, signal, type 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\nexport interface ElementFocusOptions extends CreateSignalOptions<boolean>, WithInjector {\n  /**\n   * Track focus using the `:focus-visible` pseudo-class.\n   * The browser uses heuristics to determine when focus should be visually indicated\n   * (e.g., keyboard navigation, programmatic focus, or when the element requires user attention).\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:focus-visible MDN: :focus-visible}\n   * @default false\n   */\n  readonly focusVisible?: boolean;\n}\n\n/**\n * Reactive tracking of focus state on an element.\n * Detects when an element gains or loses focus.\n *\n * @param target - The element to track focus state on\n * @param options - Optional configuration including focusVisible mode and injector\n * @returns A signal that is `true` when the element has focus\n *\n * @example\n * ```typescript\n * @Component({\n *   template: `\n *     <input #input [class.focused]=\"isFocused()\" />\n *     @if (isFocused()) {\n *       <p>Input is focused</p>\n *     }\n *   `\n * })\n * class FocusComponent {\n *   readonly input = viewChild<ElementRef>('input');\n *   readonly isFocused = elementFocus(this.input);\n * }\n * ```\n */\nexport function elementFocus(\n  target: MaybeElementSignal<HTMLElement>,\n  options?: ElementFocusOptions\n): Signal<boolean> {\n  const { runInContext } = setupContext(options?.injector, elementFocus);\n\n  return runInContext(({ isServer }) => {\n    if (isServer) {\n      return constSignal(false);\n    }\n\n    const focusVisible = options?.focusVisible ?? false;\n    const focused = signal<boolean>(false, options);\n\n    listener(target, 'focus', e => {\n      focused.set(focusVisible ? (e.target as HTMLElement).matches(':focus-visible') : true);\n    });\n\n    listener(target, 'blur', () => {\n      focused.set(false);\n    });\n\n    onDisconnect(target, () => focused.set(false));\n\n    return focused.asReadonly();\n  });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAkBA;;;;;;;;;;;;;;;;;;;;;;;AAuBG;AACG,SAAU,YAAY,CAC1B,MAAuC,EACvC,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,WAAW,CAAC,KAAK,CAAC;QAC3B;AAEA,QAAA,MAAM,YAAY,GAAG,OAAO,EAAE,YAAY,IAAI,KAAK;QACnD,MAAM,OAAO,GAAG,MAAM,CAAU,KAAK,EAAE,OAAO,CAAC;AAE/C,QAAA,QAAQ,CAAC,MAAM,EAAE,OAAO,EAAE,CAAC,IAAG;YAC5B,OAAO,CAAC,GAAG,CAAC,YAAY,GAAI,CAAC,CAAC,MAAsB,CAAC,OAAO,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;AACxF,QAAA,CAAC,CAAC;AAEF,QAAA,QAAQ,CAAC,MAAM,EAAE,MAAM,EAAE,MAAK;AAC5B,YAAA,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC;AACpB,QAAA,CAAC,CAAC;AAEF,QAAA,YAAY,CAAC,MAAM,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;AAE9C,QAAA,OAAO,OAAO,CAAC,UAAU,EAAE;AAC7B,IAAA,CAAC,CAAC;AACJ;;ACpEA;;AAEG;;;;"}

package/fesm2022/signality-core-elements-element-hover.mjs

@@ -0,0 +1,48 @@
+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 tracking of the hover state on an element.
+ * Detects when the mouse enters or leaves an element.
+ *
+ * @param target - The element to track hover state on
+ * @param options - Optional configuration including signal options and injector
+ * @returns A signal that is `true` when the element is being hovered
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   template: `
+ *     <div #box [class.hovered]="isHovered()">
+ *       Hover over me!
+ *     </div>
+ *   `
+ * })
+ * class HoverComponent {
+ *   readonly box = viewChild<ElementRef>('box');
+ *   readonly isHovered = elementHover(this.box);
+ * }
+ * ```
+ */
+function elementHover(target, options) {
+    const { runInContext } = setupContext(options?.injector, elementHover);
+    return runInContext(({ isServer, isMobile }) => {
+        if (isServer || isMobile) {
+            return constSignal(false);
+        }
+        const hovered = signal(false, options);
+        listener(target, 'mouseenter', () => hovered.set(true));
+        listener(target, 'mouseleave', () => hovered.set(false));
+        onDisconnect(target, () => hovered.set(false));
+        return hovered.asReadonly();
+    });
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { elementHover };
+//# sourceMappingURL=signality-core-elements-element-hover.mjs.map

package/fesm2022/signality-core-elements-element-hover.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"signality-core-elements-element-hover.mjs","sources":["../../../projects/core/elements/element-hover/index.ts","../../../projects/core/elements/element-hover/signality-core-elements-element-hover.ts"],"sourcesContent":["import { type CreateSignalOptions, 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\nexport type ElementHoverOptions = CreateSignalOptions<boolean> & WithInjector;\n\n/**\n * Reactive tracking of the hover state on an element.\n * Detects when the mouse enters or leaves an element.\n *\n * @param target - The element to track hover state on\n * @param options - Optional configuration including signal options and injector\n * @returns A signal that is `true` when the element is being hovered\n *\n * @example\n * ```typescript\n * @Component({\n *   template: `\n *     <div #box [class.hovered]=\"isHovered()\">\n *       Hover over me!\n *     </div>\n *   `\n * })\n * class HoverComponent {\n *   readonly box = viewChild<ElementRef>('box');\n *   readonly isHovered = elementHover(this.box);\n * }\n * ```\n */\nexport function elementHover(\n  target: MaybeElementSignal<HTMLElement>,\n  options?: ElementHoverOptions\n): Signal<boolean> {\n  const { runInContext } = setupContext(options?.injector, elementHover);\n\n  return runInContext(({ isServer, isMobile }) => {\n    if (isServer || isMobile) {\n      return constSignal(false);\n    }\n\n    const hovered = signal<boolean>(false, options);\n\n    listener(target, 'mouseenter', () => hovered.set(true));\n    listener(target, 'mouseleave', () => hovered.set(false));\n\n    onDisconnect(target, () => hovered.set(false));\n\n    return hovered.asReadonly();\n  });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAQA;;;;;;;;;;;;;;;;;;;;;;AAsBG;AACG,SAAU,YAAY,CAC1B,MAAuC,EACvC,OAA6B,EAAA;AAE7B,IAAA,MAAM,EAAE,YAAY,EAAE,GAAG,YAAY,CAAC,OAAO,EAAE,QAAQ,EAAE,YAAY,CAAC;IAEtE,OAAO,YAAY,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAI;AAC7C,QAAA,IAAI,QAAQ,IAAI,QAAQ,EAAE;AACxB,YAAA,OAAO,WAAW,CAAC,KAAK,CAAC;QAC3B;QAEA,MAAM,OAAO,GAAG,MAAM,CAAU,KAAK,EAAE,OAAO,CAAC;AAE/C,QAAA,QAAQ,CAAC,MAAM,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;AACvD,QAAA,QAAQ,CAAC,MAAM,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;AAExD,QAAA,YAAY,CAAC,MAAM,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;AAE9C,QAAA,OAAO,OAAO,CAAC,UAAU,EAAE;AAC7B,IAAA,CAAC,CAAC;AACJ;;ACnDA;;AAEG;;;;"}

package/fesm2022/signality-core-elements-element-size.mjs

@@ -0,0 +1,73 @@
+import { signal } from '@angular/core';
+import { setupContext, constSignal, toValue } from '@signality/core/internal';
+import { resizeObserver } from '@signality/core/observers/resize-observer';
+import { onDisconnect } from '@signality/core/elements/on-disconnect';
+
+/**
+ * Signal-based wrapper around the [ResizeObserver API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
+ *
+ * @param target - The element to observe
+ * @param options - Optional configuration including signal options (equal, debugName), box model, and injector
+ * @returns A signal containing the current element dimensions
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   template: `
+ *     <div #box>
+ *       Size: {{ size().width }} × {{ size().height }}px
+ *     </div>
+ *   `
+ * })
+ * class SizeComponent {
+ *   readonly box = viewChild<ElementRef>('box');
+ *   readonly size = elementSize(this.box);
+ * }
+ * ```
+ */
+function elementSize(target, options) {
+    const { runInContext } = setupContext(options?.injector, elementSize);
+    return runInContext(({ isServer }) => {
+        if (isServer) {
+            return constSignal(DEFAULT_SIZE);
+        }
+        const size = signal(DEFAULT_SIZE, options);
+        const updateSize = ([entry]) => {
+            const contentBoxSize = entry.contentBoxSize?.[0];
+            const borderBoxSize = entry.borderBoxSize?.[0];
+            const contentWidth = contentBoxSize?.inlineSize ?? entry.contentRect.width;
+            const contentHeight = contentBoxSize?.blockSize ?? entry.contentRect.height;
+            const borderBoxWidth = borderBoxSize?.inlineSize ?? entry.contentRect.width;
+            const borderBoxHeight = borderBoxSize?.blockSize ?? entry.contentRect.height;
+            const box = toValue(options?.box) ?? 'border-box';
+            const width = box === 'content-box' ? contentWidth : borderBoxWidth;
+            const height = box === 'content-box' ? contentHeight : borderBoxHeight;
+            size.set({
+                width,
+                height,
+                contentWidth,
+                contentHeight,
+                borderBoxWidth,
+                borderBoxHeight,
+            });
+        };
+        resizeObserver(target, updateSize, options);
+        onDisconnect(target, () => size.set(DEFAULT_SIZE));
+        return size;
+    });
+}
+const DEFAULT_SIZE = {
+    width: 0,
+    height: 0,
+    contentWidth: 0,
+    contentHeight: 0,
+    borderBoxWidth: 0,
+    borderBoxHeight: 0,
+};
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { elementSize };
+//# sourceMappingURL=signality-core-elements-element-size.mjs.map

package/fesm2022/signality-core-elements-element-size.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"signality-core-elements-element-size.mjs","sources":["../../../projects/core/elements/element-size/index.ts","../../../projects/core/elements/element-size/signality-core-elements-element-size.ts"],"sourcesContent":["import { type CreateSignalOptions, signal, type Signal } from '@angular/core';\nimport { constSignal, setupContext, toValue } from '@signality/core/internal';\nimport type { MaybeElementSignal, MaybeSignal, WithInjector } from '@signality/core/types';\nimport { resizeObserver } from '@signality/core/observers/resize-observer';\nimport { onDisconnect } from '@signality/core/elements/on-disconnect';\n\nexport interface ElementSizeValue {\n  readonly width: number;\n  readonly height: number;\n  readonly contentWidth: number;\n  readonly contentHeight: number;\n  readonly borderBoxWidth: number;\n  readonly borderBoxHeight: number;\n}\n\nexport interface ElementSizeOptions extends CreateSignalOptions<ElementSizeValue>, WithInjector {\n  /**\n   * Which box model to observe. Can be a reactive signal.\n   * @default 'border-box'\n   */\n  readonly box?: MaybeSignal<ResizeObserverBoxOptions>;\n}\n\n/**\n * Signal-based wrapper around the [ResizeObserver API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).\n *\n * @param target - The element to observe\n * @param options - Optional configuration including signal options (equal, debugName), box model, and injector\n * @returns A signal containing the current element dimensions\n *\n * @example\n * ```typescript\n * @Component({\n *   template: `\n *     <div #box>\n *       Size: {{ size().width }} × {{ size().height }}px\n *     </div>\n *   `\n * })\n * class SizeComponent {\n *   readonly box = viewChild<ElementRef>('box');\n *   readonly size = elementSize(this.box);\n * }\n * ```\n */\nexport function elementSize(\n  target: MaybeElementSignal<HTMLElement>,\n  options?: ElementSizeOptions\n): Signal<ElementSizeValue> {\n  const { runInContext } = setupContext(options?.injector, elementSize);\n\n  return runInContext(({ isServer }) => {\n    if (isServer) {\n      return constSignal(DEFAULT_SIZE);\n    }\n\n    const size = signal<ElementSizeValue>(DEFAULT_SIZE, options);\n\n    const updateSize = ([entry]: readonly ResizeObserverEntry[]) => {\n      const contentBoxSize = entry.contentBoxSize?.[0];\n      const borderBoxSize = entry.borderBoxSize?.[0];\n\n      const contentWidth = contentBoxSize?.inlineSize ?? entry.contentRect.width;\n      const contentHeight = contentBoxSize?.blockSize ?? entry.contentRect.height;\n      const borderBoxWidth = borderBoxSize?.inlineSize ?? entry.contentRect.width;\n      const borderBoxHeight = borderBoxSize?.blockSize ?? entry.contentRect.height;\n\n      const box = toValue(options?.box) ?? 'border-box';\n      const width = box === 'content-box' ? contentWidth : borderBoxWidth;\n      const height = box === 'content-box' ? contentHeight : borderBoxHeight;\n\n      size.set({\n        width,\n        height,\n        contentWidth,\n        contentHeight,\n        borderBoxWidth,\n        borderBoxHeight,\n      });\n    };\n\n    resizeObserver(target, updateSize, options);\n\n    onDisconnect(target, () => size.set(DEFAULT_SIZE));\n\n    return size;\n  });\n}\n\nconst DEFAULT_SIZE: ElementSizeValue = {\n  width: 0,\n  height: 0,\n  contentWidth: 0,\n  contentHeight: 0,\n  borderBoxWidth: 0,\n  borderBoxHeight: 0,\n};\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAuBA;;;;;;;;;;;;;;;;;;;;;AAqBG;AACG,SAAU,WAAW,CACzB,MAAuC,EACvC,OAA4B,EAAA;AAE5B,IAAA,MAAM,EAAE,YAAY,EAAE,GAAG,YAAY,CAAC,OAAO,EAAE,QAAQ,EAAE,WAAW,CAAC;AAErE,IAAA,OAAO,YAAY,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAI;QACnC,IAAI,QAAQ,EAAE;AACZ,YAAA,OAAO,WAAW,CAAC,YAAY,CAAC;QAClC;QAEA,MAAM,IAAI,GAAG,MAAM,CAAmB,YAAY,EAAE,OAAO,CAAC;AAE5D,QAAA,MAAM,UAAU,GAAG,CAAC,CAAC,KAAK,CAAiC,KAAI;YAC7D,MAAM,cAAc,GAAG,KAAK,CAAC,cAAc,GAAG,CAAC,CAAC;YAChD,MAAM,aAAa,GAAG,KAAK,CAAC,aAAa,GAAG,CAAC,CAAC;YAE9C,MAAM,YAAY,GAAG,cAAc,EAAE,UAAU,IAAI,KAAK,CAAC,WAAW,CAAC,KAAK;YAC1E,MAAM,aAAa,GAAG,cAAc,EAAE,SAAS,IAAI,KAAK,CAAC,WAAW,CAAC,MAAM;YAC3E,MAAM,cAAc,GAAG,aAAa,EAAE,UAAU,IAAI,KAAK,CAAC,WAAW,CAAC,KAAK;YAC3E,MAAM,eAAe,GAAG,aAAa,EAAE,SAAS,IAAI,KAAK,CAAC,WAAW,CAAC,MAAM;YAE5E,MAAM,GAAG,GAAG,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,IAAI,YAAY;AACjD,YAAA,MAAM,KAAK,GAAG,GAAG,KAAK,aAAa,GAAG,YAAY,GAAG,cAAc;AACnE,YAAA,MAAM,MAAM,GAAG,GAAG,KAAK,aAAa,GAAG,aAAa,GAAG,eAAe;YAEtE,IAAI,CAAC,GAAG,CAAC;gBACP,KAAK;gBACL,MAAM;gBACN,YAAY;gBACZ,aAAa;gBACb,cAAc;gBACd,eAAe;AAChB,aAAA,CAAC;AACJ,QAAA,CAAC;AAED,QAAA,cAAc,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,CAAC;AAE3C,QAAA,YAAY,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;AAElD,QAAA,OAAO,IAAI;AACb,IAAA,CAAC,CAAC;AACJ;AAEA,MAAM,YAAY,GAAqB;AACrC,IAAA,KAAK,EAAE,CAAC;AACR,IAAA,MAAM,EAAE,CAAC;AACT,IAAA,YAAY,EAAE,CAAC;AACf,IAAA,aAAa,EAAE,CAAC;AAChB,IAAA,cAAc,EAAE,CAAC;AACjB,IAAA,eAAe,EAAE,CAAC;CACnB;;AChGD;;AAEG;;;;"}

package/fesm2022/signality-core-elements-element-visibility.mjs

@@ -0,0 +1,76 @@
+import { signal } from '@angular/core';
+import { setupContext, constSignal } from '@signality/core/internal';
+import { intersectionObserver } from '@signality/core/observers/intersection-observer';
+import { onDisconnect } from '@signality/core/elements/on-disconnect';
+
+/**
+ * Signal-based wrapper around the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
+ *
+ * @param target - The element to observe
+ * @param options - Optional configuration including signal options (equal, debugName), observer options (threshold, root, rootMargin, initialValue), and injector
+ * @returns A signal containing the current visibility state
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   template: `
+ *     <div #section [class.visible]="visibility().isVisible">
+ *       Visibility: {{ visibility().ratio * 100 }}%
+ *     </div>
+ *   `
+ * })
+ * class VisibilityComponent {
+ *   readonly section = viewChild<ElementRef>('section');
+ *   readonly visibility = elementVisibility(this.section);
+ * }
+ * ```
+ */
+function elementVisibility(target, options) {
+    const { runInContext } = setupContext(options?.injector, elementVisibility);
+    const initialValue = options?.initialValue ?? DEFAULT_VISIBILITY;
+    return runInContext(({ isServer }) => {
+        if (isServer) {
+            return constSignal(initialValue);
+        }
+        const visibility = signal(initialValue, options);
+        const threshold = options?.threshold ?? 0;
+        const root = options?.root ?? undefined;
+        const rootMargin = options?.rootMargin ?? '0px';
+        const update = (entries) => {
+            if (entries.length === 0) {
+                return;
+            }
+            // Find the entry with the latest time to ensure we use the most up-to-date state
+            // IntersectionObserver may batch multiple changes and call the callback once
+            // with multiple entries, and the order in the array doesn't guarantee
+            // that the last entry is the most recent one
+            let latestEntry = entries[0];
+            let latestTime = entries[0].time;
+            for (let i = 1; i < entries.length; i++) {
+                const entry = entries[i];
+                if (entry.time >= latestTime) {
+                    latestTime = entry.time;
+                    latestEntry = entry;
+                }
+            }
+            visibility.set({
+                isVisible: latestEntry.isIntersecting,
+                ratio: latestEntry.intersectionRatio,
+            });
+        };
+        intersectionObserver(target, update, { threshold, root, rootMargin });
+        onDisconnect(target, () => visibility.set(initialValue));
+        return visibility;
+    });
+}
+const DEFAULT_VISIBILITY = {
+    isVisible: true,
+    ratio: 1,
+};
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { elementVisibility };
+//# sourceMappingURL=signality-core-elements-element-visibility.mjs.map

package/fesm2022/signality-core-elements-element-visibility.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"signality-core-elements-element-visibility.mjs","sources":["../../../projects/core/elements/element-visibility/index.ts","../../../projects/core/elements/element-visibility/signality-core-elements-element-visibility.ts"],"sourcesContent":["import { type CreateSignalOptions, type Signal, signal } from '@angular/core';\nimport { constSignal, setupContext } from '@signality/core/internal';\nimport type { MaybeElementSignal, MaybeSignal, WithInjector } from '@signality/core/types';\nimport { intersectionObserver } from '@signality/core/observers/intersection-observer';\nimport { onDisconnect } from '@signality/core/elements/on-disconnect';\n\nexport interface ElementVisibilityOptions\n  extends CreateSignalOptions<ElementVisibilityValue>,\n    WithInjector {\n  /**\n   * Visibility threshold(s). A number between 0 and 1, or an array of thresholds.\n   * @default 0\n   */\n  readonly threshold?: MaybeSignal<number | number[]>;\n\n  /**\n   * Scrollable ancestor element (null = viewport).\n   * @default undefined\n   */\n  readonly root?: MaybeElementSignal<Element> | Document;\n\n  /**\n   * Margin around the root element.\n   * @default '0px'\n   */\n  readonly rootMargin?: MaybeSignal<string>;\n\n  /**\n   * Initial value for SSR.\n   * @default { isVisible: true, ratio: 1 }\n   */\n  readonly initialValue?: ElementVisibilityValue;\n}\n\nexport interface ElementVisibilityValue {\n  /** Whether the element is visible in the viewport */\n  readonly isVisible: boolean;\n\n  /** Intersection ratio (0.0 to 1.0) */\n  readonly ratio: number;\n}\n\n/**\n * Signal-based wrapper around the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).\n *\n * @param target - The element to observe\n * @param options - Optional configuration including signal options (equal, debugName), observer options (threshold, root, rootMargin, initialValue), and injector\n * @returns A signal containing the current visibility state\n *\n * @example\n * ```typescript\n * @Component({\n *   template: `\n *     <div #section [class.visible]=\"visibility().isVisible\">\n *       Visibility: {{ visibility().ratio * 100 }}%\n *     </div>\n *   `\n * })\n * class VisibilityComponent {\n *   readonly section = viewChild<ElementRef>('section');\n *   readonly visibility = elementVisibility(this.section);\n * }\n * ```\n */\nexport function elementVisibility(\n  target: MaybeElementSignal<HTMLElement>,\n  options?: ElementVisibilityOptions\n): Signal<ElementVisibilityValue> {\n  const { runInContext } = setupContext(options?.injector, elementVisibility);\n  const initialValue = options?.initialValue ?? DEFAULT_VISIBILITY;\n\n  return runInContext(({ isServer }) => {\n    if (isServer) {\n      return constSignal(initialValue);\n    }\n\n    const visibility = signal(initialValue, options);\n\n    const threshold = options?.threshold ?? 0;\n    const root = options?.root ?? undefined;\n    const rootMargin = options?.rootMargin ?? '0px';\n\n    const update = (entries: readonly IntersectionObserverEntry[]) => {\n      if (entries.length === 0) {\n        return;\n      }\n\n      // Find the entry with the latest time to ensure we use the most up-to-date state\n      // IntersectionObserver may batch multiple changes and call the callback once\n      // with multiple entries, and the order in the array doesn't guarantee\n      // that the last entry is the most recent one\n      let latestEntry = entries[0];\n      let latestTime = entries[0].time;\n\n      for (let i = 1; i < entries.length; i++) {\n        const entry = entries[i];\n        if (entry.time >= latestTime) {\n          latestTime = entry.time;\n          latestEntry = entry;\n        }\n      }\n\n      visibility.set({\n        isVisible: latestEntry.isIntersecting,\n        ratio: latestEntry.intersectionRatio,\n      });\n    };\n\n    intersectionObserver(target, update, { threshold, root, rootMargin });\n\n    onDisconnect(target, () => visibility.set(initialValue));\n\n    return visibility;\n  });\n}\n\nconst DEFAULT_VISIBILITY: ElementVisibilityValue = {\n  isVisible: true,\n  ratio: 1,\n};\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AA0CA;;;;;;;;;;;;;;;;;;;;;AAqBG;AACG,SAAU,iBAAiB,CAC/B,MAAuC,EACvC,OAAkC,EAAA;AAElC,IAAA,MAAM,EAAE,YAAY,EAAE,GAAG,YAAY,CAAC,OAAO,EAAE,QAAQ,EAAE,iBAAiB,CAAC;AAC3E,IAAA,MAAM,YAAY,GAAG,OAAO,EAAE,YAAY,IAAI,kBAAkB;AAEhE,IAAA,OAAO,YAAY,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAI;QACnC,IAAI,QAAQ,EAAE;AACZ,YAAA,OAAO,WAAW,CAAC,YAAY,CAAC;QAClC;QAEA,MAAM,UAAU,GAAG,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC;AAEhD,QAAA,MAAM,SAAS,GAAG,OAAO,EAAE,SAAS,IAAI,CAAC;AACzC,QAAA,MAAM,IAAI,GAAG,OAAO,EAAE,IAAI,IAAI,SAAS;AACvC,QAAA,MAAM,UAAU,GAAG,OAAO,EAAE,UAAU,IAAI,KAAK;AAE/C,QAAA,MAAM,MAAM,GAAG,CAAC,OAA6C,KAAI;AAC/D,YAAA,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;gBACxB;YACF;;;;;AAMA,YAAA,IAAI,WAAW,GAAG,OAAO,CAAC,CAAC,CAAC;YAC5B,IAAI,UAAU,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI;AAEhC,YAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACvC,gBAAA,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC;AACxB,gBAAA,IAAI,KAAK,CAAC,IAAI,IAAI,UAAU,EAAE;AAC5B,oBAAA,UAAU,GAAG,KAAK,CAAC,IAAI;oBACvB,WAAW,GAAG,KAAK;gBACrB;YACF;YAEA,UAAU,CAAC,GAAG,CAAC;gBACb,SAAS,EAAE,WAAW,CAAC,cAAc;gBACrC,KAAK,EAAE,WAAW,CAAC,iBAAiB;AACrC,aAAA,CAAC;AACJ,QAAA,CAAC;AAED,QAAA,oBAAoB,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;AAErE,QAAA,YAAY,CAAC,MAAM,EAAE,MAAM,UAAU,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;AAExD,QAAA,OAAO,UAAU;AACnB,IAAA,CAAC,CAAC;AACJ;AAEA,MAAM,kBAAkB,GAA2B;AACjD,IAAA,SAAS,EAAE,IAAI;AACf,IAAA,KAAK,EAAE,CAAC;CACT;;ACvHD;;AAEG;;;;"}