@angular-helpers/browser-web-apis 21.2.0 → 21.4.0

package/README.es.md

@@ -550,6 +550,111 @@ export class WorkerComponent {
 }
 ```
 
+## Primitivas Signal Fn
+
+Alternativas reactivas sin boilerplate a los servicios basados en RxJS. Cada funcion `inject*` retorna un objeto ref con signals de solo lectura y maneja la limpieza automaticamente via `DestroyRef`.
+
+### injectPageVisibility
+
+```typescript
+import { injectPageVisibility } from '@angular-helpers/browser-web-apis';
+
+@Component({...})
+export class MyComponent {
+  readonly visibility = injectPageVisibility();
+
+  // visibility.state()     → 'visible' | 'hidden'
+  // visibility.isVisible() → boolean
+  // visibility.isHidden()  → boolean
+}
+```
+
+### injectResizeObserver
+
+Acepta `Element`, `ElementRef`, o un **`Signal<ElementRef | undefined>`** (ej. de `viewChild`). Cuando se pasa un signal, el observer inicia automaticamente cuando el elemento esta disponible.
+
+```typescript
+import { injectResizeObserver } from '@angular-helpers/browser-web-apis';
+
+@Component({...})
+export class MyComponent {
+  readonly boxRef = viewChild<ElementRef>('box');
+  readonly resize = injectResizeObserver(this.boxRef);
+
+  // resize.width()      → number
+  // resize.height()     → number
+  // resize.inlineSize() → number (logico)
+  // resize.blockSize()  → number (logico)
+  // resize.size()       → ElementSize | null
+}
+```
+
+### injectIntersectionObserver
+
+Misma flexibilidad con `ElementInput` — funciona con signals de `viewChild` directamente.
+
+```typescript
+import { injectIntersectionObserver } from '@angular-helpers/browser-web-apis';
+
+@Component({...})
+export class MyComponent {
+  readonly targetRef = viewChild<ElementRef>('target');
+  readonly inView = injectIntersectionObserver(this.targetRef, { threshold: 0.25 });
+
+  // inView.isIntersecting() → boolean
+  // inView.isVisible()      → boolean
+}
+```
+
+### injectNetworkInformation
+
+```typescript
+import { injectNetworkInformation } from '@angular-helpers/browser-web-apis';
+
+@Component({...})
+export class MyComponent {
+  readonly net = injectNetworkInformation();
+
+  // net.online()        → boolean
+  // net.effectiveType() → '4g' | '3g' | '2g' | 'slow-2g' | undefined
+  // net.downlink()      → number | undefined (Mbps)
+  // net.rtt()           → number | undefined (ms)
+  // net.type()          → ConnectionType | undefined
+  // net.saveData()      → boolean | undefined
+}
+```
+
+### injectScreenOrientation
+
+```typescript
+import { injectScreenOrientation } from '@angular-helpers/browser-web-apis';
+
+@Component({...})
+export class MyComponent {
+  readonly orientation = injectScreenOrientation();
+
+  // orientation.type()        → OrientationType
+  // orientation.angle()       → number
+  // orientation.isPortrait()  → boolean
+  // orientation.isLandscape() → boolean
+  // orientation.lock('landscape') → Promise<void>
+  // orientation.unlock()
+}
+```
+
+### Tipo ElementInput
+
+Tanto `injectResizeObserver` como `injectIntersectionObserver` aceptan el tipo `ElementInput`:
+
+```typescript
+type ElementInput =
+  | Element
+  | ElementRef<Element>
+  | Signal<Element | ElementRef<Element> | undefined>;
+```
+
+Esto permite pasar un signal de `viewChild` directamente — la funcion usa internamente un `effect` para comenzar a observar cuando el elemento se renderiza, con limpieza automatica.
+
 ## Soporte de navegadores
 
 Los servicios validan automaticamente el soporte del navegador y el manejo de rutas no soportadas:

package/README.md

@@ -29,6 +29,8 @@ Angular services package for a structured and secure access layer over browser W
 
 - `IntersectionObserverService` - Detect when elements enter/exit viewport
 - `ResizeObserverService` - Watch for element size changes
+- `MutationObserverService` - Watch for DOM mutations
+- `PerformanceObserverService` - Monitor performance entries (LCP, CLS, etc.)
 
 ### System APIs
 
@@ -39,6 +41,9 @@ Angular services package for a structured and secure access layer over browser W
 - `FullscreenService` - Toggle fullscreen mode for elements
 - `VibrationService` - Trigger haptic feedback patterns
 - `SpeechSynthesisService` - Text-to-speech with voice selection
+- `IdleDetectorService` - Detect user idle state and screen lock
+- `GamepadService` - Game controller input polling
+- `WebAudioService` - Audio context, oscillators, and analysers
 
 ### Network APIs
 
@@ -58,6 +63,22 @@ Angular services package for a structured and secure access layer over browser W
 
 - `WebWorkerService` - Web Worker management
 
+### Device APIs
+
+- `WebBluetoothService` - Bluetooth Low Energy device communication
+- `WebUsbService` - USB device I/O from the browser
+- `WebNfcService` - NFC tag reading and writing
+
+### Detection APIs
+
+- `EyeDropperService` - Screen color picker
+- `BarcodeDetectorService` - QR code and barcode scanning
+
+### Commerce & Identity APIs
+
+- `PaymentRequestService` - Native payment flows
+- `CredentialManagementService` - Passwords, passkeys (WebAuthn)
+
 ### Security & Capabilities
 
 - `PermissionsService` - Centralized browser permissions handling
@@ -519,6 +540,175 @@ export class WorkerComponent {
 }
 ```
 
+## Signal Fn Primitives
+
+Zero-boilerplate reactive alternatives to the RxJS-based services. Each `inject*` function returns a ref object with read-only signals and handles cleanup automatically via `DestroyRef`.
+
+### injectPageVisibility
+
+```typescript
+import { injectPageVisibility } from '@angular-helpers/browser-web-apis';
+
+@Component({...})
+export class MyComponent {
+  readonly visibility = injectPageVisibility();
+
+  // visibility.state()     → 'visible' | 'hidden'
+  // visibility.isVisible() → boolean
+  // visibility.isHidden()  → boolean
+}
+```
+
+### injectResizeObserver
+
+Accepts `Element`, `ElementRef`, or a **`Signal<ElementRef | undefined>`** (e.g. from `viewChild`). When a signal is passed, the observer automatically starts when the element becomes available.
+
+```typescript
+import { injectResizeObserver } from '@angular-helpers/browser-web-apis';
+
+@Component({...})
+export class MyComponent {
+  readonly boxRef = viewChild<ElementRef>('box');
+  readonly resize = injectResizeObserver(this.boxRef);
+
+  // resize.width()      → number
+  // resize.height()     → number
+  // resize.inlineSize() → number (logical)
+  // resize.blockSize()  → number (logical)
+  // resize.size()       → ElementSize | null
+}
+```
+
+### injectIntersectionObserver
+
+Same `ElementInput` flexibility — works with `viewChild` signals out of the box.
+
+```typescript
+import { injectIntersectionObserver } from '@angular-helpers/browser-web-apis';
+
+@Component({...})
+export class MyComponent {
+  readonly targetRef = viewChild<ElementRef>('target');
+  readonly inView = injectIntersectionObserver(this.targetRef, { threshold: 0.25 });
+
+  // inView.isIntersecting() → boolean
+  // inView.isVisible()      → boolean
+}
+```
+
+### injectNetworkInformation
+
+```typescript
+import { injectNetworkInformation } from '@angular-helpers/browser-web-apis';
+
+@Component({...})
+export class MyComponent {
+  readonly net = injectNetworkInformation();
+
+  // net.online()        → boolean
+  // net.effectiveType() → '4g' | '3g' | '2g' | 'slow-2g' | undefined
+  // net.downlink()      → number | undefined (Mbps)
+  // net.rtt()           → number | undefined (ms)
+  // net.type()          → ConnectionType | undefined
+  // net.saveData()      → boolean | undefined
+}
+```
+
+### injectScreenOrientation
+
+```typescript
+import { injectScreenOrientation } from '@angular-helpers/browser-web-apis';
+
+@Component({...})
+export class MyComponent {
+  readonly orientation = injectScreenOrientation();
+
+  // orientation.type()        → OrientationType
+  // orientation.angle()       → number
+  // orientation.isPortrait()  → boolean
+  // orientation.isLandscape() → boolean
+  // orientation.lock('landscape') → Promise<void>
+  // orientation.unlock()
+}
+```
+
+### injectMutationObserver
+
+Accepts the same `ElementInput` type — works with `viewChild` signals.
+
+```typescript
+import { injectMutationObserver } from '@angular-helpers/browser-web-apis';
+
+@Component({...})
+export class MyComponent {
+  readonly targetRef = viewChild<ElementRef>('target');
+  readonly mo = injectMutationObserver(this.targetRef, { childList: true });
+
+  // mo.mutations()      → MutationRecord[]
+  // mo.mutationCount()  → number
+}
+```
+
+### injectPerformanceObserver
+
+```typescript
+import { injectPerformanceObserver } from '@angular-helpers/browser-web-apis';
+
+@Component({...})
+export class MyComponent {
+  readonly perf = injectPerformanceObserver({ type: 'navigation', buffered: true });
+
+  // perf.entries()      → PerformanceEntryList
+  // perf.entryCount()   → number
+  // perf.latestEntry()  → PerformanceEntry | undefined
+}
+```
+
+### injectIdleDetector
+
+```typescript
+import { injectIdleDetector } from '@angular-helpers/browser-web-apis';
+
+@Component({...})
+export class MyComponent {
+  readonly idle = injectIdleDetector({ threshold: 120_000 });
+
+  // idle.userState()      → 'active' | 'idle'
+  // idle.screenState()    → 'locked' | 'unlocked'
+  // idle.isUserIdle()     → boolean
+  // idle.isScreenLocked() → boolean
+}
+```
+
+### injectGamepad
+
+```typescript
+import { injectGamepad } from '@angular-helpers/browser-web-apis';
+
+@Component({...})
+export class MyComponent {
+  readonly gp = injectGamepad(0);
+
+  // gp.connected() → boolean
+  // gp.buttons()   → ReadonlyArray<{ pressed: boolean; value: number }>
+  // gp.axes()      → readonly number[]
+  // gp.state()     → GamepadState | null
+}
+```
+
+### ElementInput type
+
+Both `injectResizeObserver` and `injectIntersectionObserver` accept the `ElementInput` type:
+
+```typescript
+type ElementInput =
+  | Element
+  | ElementRef<Element>
+  | Signal<Element | ElementRef<Element> | undefined>;
+```
+
+This means you can pass a `viewChild` signal directly — the function will internally use an `effect` to start observing once the element is rendered, with automatic cleanup.
+
 ## Browser Support
 
 The services automatically validate browser support and unsupported-path handling: