Content
+ `,
+})
+export class ExampleComponent {
+ target = viewChildContent
+ `,
+})
+export class ExampleComponent {
+ target = viewChildContent
+
+ `,
+})
+export class ExampleComponent {
+ target = viewChild
+ Resize me!
+
+ Width: {{ size.width() }}px
+Height: {{ size.height() }}px
+ `, +}) +export class ElementSizeComponent { + resizableElement = viewChildContent
+ Width: {{ size.width() }}px
+Height: {{ size.height() }}px
+ `, +}) +export class ElementSizeComponent { + myElement = viewChildContent
+
+
+ `,
+})
+export class ElementSizeComponent {
+ myElement = viewChildContent Box - Width: {{ contentBoxSize.width() }}px
+Border Box - Width: {{ borderBoxSize.width() }}px
+Dynamic Content
+ }
+
+ Width: {{ size.width() }}px
+Height: {{ size.height() }}px
+ `, +}) +export class DynamicElementComponent { + showElement = signal(false); + elementRef = signalSVG Width: {{ size.width() }}px
+SVG Height: {{ size.height() }}px
+ `, +}) +export class SVGSizeComponent { + svgElement = viewChildLoading...
+ }
+ `,
+})
+export class LazyImageComponent {
+ isVisible = injectElementVisibility();
+ imageUrl = 'https://example.com/image.jpg';
+
+ constructor() {
+ effect(() => {
+ console.log('Element is visible:', this.isVisible());
+ });
+ }
+}
+```
+
+### Usage with a specific element
+
+You can track visibility of a specific element by passing it as an option:
+
+```ts
+import { Component, viewChild, ElementRef } from '@angular/core';
+import { injectElementVisibility } from 'ngxtension/inject-element-visibility';
+
+@Component({
+ selector: 'app-scroll-tracker',
+ standalone: true,
+ template: `
+
+
+ `,
+})
+export class ScrollTrackerComponent {
+ targetElement = viewChild.requiredTrack this section
+Visibility: {{ isVisible() ? 'Visible' : 'Hidden' }}
+
+ @for (item of items(); track item.id) {
+
+
+ `,
+})
+export class InfiniteScrollComponent {
+ items = signal{{ item.name }}
+ }
+ Error: {{ bluetooth.error() }}
+
+ Connected to: {{ bluetooth.device()?.name }}
+
+ `,
+})
+export class BluetoothComponent {
+ bluetooth = injectBluetooth({
+ acceptAllDevices: true,
+ });
+
+ constructor() {
+ effect(() => {
+ console.log('Supported:', this.bluetooth.supported());
+ console.log('Connected:', this.bluetooth.isConnected());
+ console.log('Device:', this.bluetooth.device());
+ });
+ }
+
+ requestDevice() {
+ this.bluetooth.requestDevice();
+ }
+}
+```
+
+### Battery Level Example
+
+This example illustrates how to read battery level and be notified of changes from a nearby Bluetooth Device advertising Battery information with Bluetooth Low Energy.
+
+```typescript
+import { Component, effect, signal } from '@angular/core';
+import { injectBluetooth } from 'ngxtension/inject-bluetooth';
+import { fromEvent } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+@Component({
+ selector: 'app-battery-monitor',
+ standalone: true,
+ template: `
+
+
+ Battery Level: {{ batteryPercent() }}%
+
+ `,
+})
+export class BatteryMonitorComponent {
+ bluetooth = injectBluetooth({
+ acceptAllDevices: true,
+ optionalServices: ['battery_service'],
+ });
+
+ batteryPercent = signal{{ bluetooth.supported() }}
+ {{ bluetooth.isConnected() }}
+ {{ bluetooth.device()?.name || 'none' }}
+ {{ bluetooth.error() || 'none' }}
+ `,
+ })
+ class TestComponent {
+ bluetooth = injectBluetooth();
+ }
+
+ function setup() {
+ const fixture = TestBed.createComponent(TestComponent);
+ fixture.detectChanges();
+ return fixture.componentInstance;
+ }
+
+ it('should initialize with default values', () => {
+ const cmp = setup();
+ expect(cmp.bluetooth.isConnected()).toBe(false);
+ expect(cmp.bluetooth.device()).toBeUndefined();
+ expect(cmp.bluetooth.server()).toBeUndefined();
+ expect(cmp.bluetooth.error()).toBeNull();
+ });
+
+ it('should detect bluetooth support', () => {
+ const cmp = setup();
+ const hasBluetoothApi = 'bluetooth' in navigator;
+ expect(cmp.bluetooth.supported()).toBe(hasBluetoothApi);
+ });
+
+ it('should handle acceptAllDevices option', () => {
+ @Component({
+ standalone: true,
+ template: '',
+ })
+ class TestAcceptAllComponent {
+ bluetooth = injectBluetooth({ acceptAllDevices: true });
+ }
+
+ const fixture = TestBed.createComponent(TestAcceptAllComponent);
+ const cmp = fixture.componentInstance;
+ expect(cmp.bluetooth).toBeDefined();
+ });
+
+ it('should handle filters option', () => {
+ @Component({
+ standalone: true,
+ template: '',
+ })
+ class TestFiltersComponent {
+ bluetooth = injectBluetooth({
+ filters: [{ services: ['battery_service'] }],
+ });
+ }
+
+ const fixture = TestBed.createComponent(TestFiltersComponent);
+ const cmp = fixture.componentInstance;
+ expect(cmp.bluetooth).toBeDefined();
+ });
+
+ it('should handle optionalServices option', () => {
+ @Component({
+ standalone: true,
+ template: '',
+ })
+ class TestOptionalServicesComponent {
+ bluetooth = injectBluetooth({
+ optionalServices: ['battery_service', 'heart_rate'],
+ });
+ }
+
+ const fixture = TestBed.createComponent(TestOptionalServicesComponent);
+ const cmp = fixture.componentInstance;
+ expect(cmp.bluetooth).toBeDefined();
+ });
+
+ it('should expose requestDevice function', () => {
+ const cmp = setup();
+ expect(typeof cmp.bluetooth.requestDevice).toBe('function');
+ });
+
+ it('should return readonly signals', () => {
+ const cmp = setup();
+ expect(() => {
+ // @ts-expect-error - Testing runtime readonly
+ cmp.bluetooth.isConnected.set(true);
+ }).toThrow();
+ });
+});
diff --git a/libs/ngxtension/inject-bluetooth/src/inject-bluetooth.ts b/libs/ngxtension/inject-bluetooth/src/inject-bluetooth.ts
new file mode 100644
index 00000000..9cbebe8e
--- /dev/null
+++ b/libs/ngxtension/inject-bluetooth/src/inject-bluetooth.ts
@@ -0,0 +1,276 @@
+import { DOCUMENT } from '@angular/common';
+import { effect, inject, Injector, signal, type Signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { assertInjector } from 'ngxtension/assert-injector';
+import { fromEvent } from 'rxjs';
+
+// Ported from https://vueuse.org/core/useBluetooth/
+
+// Type definitions for Web Bluetooth API
+// These types are minimal definitions for the Bluetooth API
+// For full type definitions, install @types/web-bluetooth
+declare global {
+ interface Navigator {
+ bluetooth?: Bluetooth;
+ }
+
+ interface Bluetooth {
+ requestDevice(options?: RequestDeviceOptions): Promise
+
+ `,
+ })
+ class TestComponent {
+ channel = injectBroadcastChannelSupported: {{ channel.isSupported() }}
+Data: {{ channel.data() }}
+Closed: {{ channel.isClosed() }}
+
+
+
+
+ + Your browser does not support Clipboard API +
+ `, +}) +export class TextCopyComponent { + clipboard = injectClipboardItems(); + + constructor() { + effect(() => { + if (this.clipboard.copied()) { + console.log('Content copied successfully!'); + } + }); + } + + async copyText(text: string) { + const blob = new Blob([text], { type: 'text/plain' }); + const item = new ClipboardItem({ 'text/plain': blob }); + await this.clipboard.copy([item]); + } +} +``` + +### Copy HTML Content + +```ts +import { Component } from '@angular/core'; +import { injectClipboardItems } from 'ngxtension/inject-clipboard-items'; + +@Component({ + selector: 'app-html-copy', + standalone: true, + template: ` + + `, +}) +export class HtmlCopyComponent { + clipboard = injectClipboardItems(); + + async copyHtml() { + const htmlContent = 'Hello
This is bold text
'; + const plainText = 'Hello\nThis is bold text'; + + const htmlBlob = new Blob([htmlContent], { type: 'text/html' }); + const textBlob = new Blob([plainText], { type: 'text/plain' }); + + const item = new ClipboardItem({ + 'text/html': htmlBlob, + 'text/plain': textBlob, + }); + + await this.clipboard.copy([item]); + } +} +``` + +### Copy Images + +```ts +import { Component } from '@angular/core'; +import { injectClipboardItems } from 'ngxtension/inject-clipboard-items'; + +@Component({ + selector: 'app-image-copy', + standalone: true, + template: ` +
+
+ `,
+})
+export class ImageCopyComponent {
+ clipboard = injectClipboardItems();
+
+ async copyImage(imgElement: HTMLImageElement) {
+ try {
+ const response = await fetch(imgElement.src);
+ const blob = await response.blob();
+ const item = new ClipboardItem({ [blob.type]: blob });
+ await this.clipboard.copy([item]);
+ } catch (error) {
+ console.error('Failed to copy image:', error);
+ }
+ }
+}
+```
+
+### With Source Option
+
+```ts
+import { Component, signal } from '@angular/core';
+import { injectClipboardItems } from 'ngxtension/inject-clipboard-items';
+
+@Component({
+ selector: 'app-with-source',
+ standalone: true,
+ template: `
+
+ `,
+})
+export class WithSourceComponent {
+ source = signal
+
+ `,
+})
+export class MonitorClipboardComponent {
+ clipboard = injectClipboardItems({ read: true });
+ contentPreview = signalClipboard content:
+{{ contentPreview() }}
+
+
+
+ `,
+})
+export class AppComponent {
+ colorMode = injectColorMode();
+}
+```
+
+By default, `injectColorMode` will:
+- Initialize with `auto` mode (follows system preference)
+- Add `light` or `dark` class to the `` element
+- Persist the selected mode to localStorage
+- Sync changes across browser tabs
+
+### Reading Values
+
+The returned object provides four signal properties:
+
+```ts
+const colorMode = injectColorMode();
+
+// The current mode (writable signal)
+console.log(colorMode.mode()); // 'dark' | 'light' | 'auto'
+
+// The stored value (readonly signal, includes 'auto')
+console.log(colorMode.store()); // 'dark' | 'light' | 'auto'
+
+// The system preference (readonly signal)
+console.log(colorMode.system()); // 'dark' | 'light'
+
+// The resolved state (readonly signal, never 'auto')
+console.log(colorMode.state()); // 'dark' | 'light'
+```
+
+### Changing Mode
+
+```ts
+const colorMode = injectColorMode();
+
+// Set to dark mode
+colorMode.mode.set('dark');
+
+// Set to light mode
+colorMode.mode.set('light');
+
+// Set to auto (follow system preference)
+colorMode.mode.set('auto');
+
+// Toggle between light and dark
+colorMode.mode.update((current) => (current === 'light' ? 'dark' : 'light'));
+```
+
+## Configuration
+
+### Custom Attribute
+
+Use a data attribute instead of class:
+
+```ts
+const colorMode = injectColorMode({
+ attribute: 'data-theme',
+});
+// Sets:
+```
+
+### Custom Selector
+
+Apply the mode to a different element:
+
+```ts
+const colorMode = injectColorMode({
+ selector: '#app',
+});
+// Applies class to #app instead of
+```
+
+### Custom Storage Key
+
+```ts
+const colorMode = injectColorMode({
+ storageKey: 'my-app-theme',
+});
+```
+
+### Disable Persistence
+
+```ts
+const colorMode = injectColorMode({
+ storageKey: null,
+});
+// Mode changes won't be saved to localStorage
+```
+
+### Initial Value
+
+```ts
+const colorMode = injectColorMode({
+ initialValue: 'dark',
+});
+// Starts with dark mode if no saved preference exists
+```
+
+### Custom Modes
+
+Define custom color modes beyond light/dark:
+
+```ts
+const colorMode = injectColorMode<'light' | 'dark' | 'dim' | 'cafe'>({
+ modes: {
+ auto: '',
+ light: 'light',
+ dark: 'dark',
+ dim: 'dim',
+ cafe: 'cafe',
+ },
+});
+
+colorMode.mode.set('dim');
+colorMode.mode.set('cafe');
+```
+
+### Multiple Classes
+
+Apply multiple CSS classes for a mode:
+
+```ts
+const colorMode = injectColorMode({
+ modes: {
+ light: 'light theme-light',
+ dark: 'dark theme-dark',
+ },
+});
+// Sets:
+```
+
+### Custom Change Handler
+
+Override or extend the default behavior:
+
+```ts
+const colorMode = injectColorMode({
+ onChanged: (mode, defaultHandler) => {
+ console.log(`Color mode changed to: ${mode}`);
+
+ // Call default handler to update HTML
+ defaultHandler(mode);
+
+ // Add custom logic
+ document.body.style.backgroundColor = mode === 'dark' ? '#000' : '#fff';
+ },
+});
+```
+
+### Disable Transitions
+
+By default, CSS transitions are disabled during mode changes to prevent flash effects. You can enable transitions:
+
+```ts
+const colorMode = injectColorMode({
+ disableTransition: false,
+});
+```
+
+### Disable Cross-Tab Sync
+
+```ts
+const colorMode = injectColorMode({
+ storageSync: false,
+});
+// Changes won't sync across browser tabs
+```
+
+## Advanced Usage
+
+### Accessing System Preference
+
+You can access the system preference directly:
+
+```ts
+const colorMode = injectColorMode();
+
+effect(() => {
+ console.log(`System prefers: ${colorMode.system()}`);
+});
+```
+
+### Distinguishing Store from State
+
+- `store`: The actual stored value (can be 'auto')
+- `state`: The resolved value ('auto' becomes 'light' or 'dark')
+
+```ts
+const colorMode = injectColorMode();
+
+colorMode.mode.set('auto');
+console.log(colorMode.store()); // 'auto'
+console.log(colorMode.state()); // 'dark' or 'light' (based on system)
+```
+
+### Using with Effects
+
+```ts
+const colorMode = injectColorMode();
+
+effect(() => {
+ const mode = colorMode.state();
+ console.log(`Current resolved mode: ${mode}`);
+ // Perform side effects based on mode
+});
+```
+
+### Complete Example
+
+```ts
+import { Component, effect } from '@angular/core';
+import { injectColorMode } from 'ngxtension/inject-color-mode';
+
+@Component({
+ selector: 'app-theme-switcher',
+ standalone: true,
+ template: `
+ Current mode: {{ colorMode.mode() }}
+System preference: {{ colorMode.system() }}
+ + + +
+
+ `,
+ styles: [`
+ .theme-switcher {
+ padding: 20px;
+ border-radius: 8px;
+ background: var(--surface);
+ }
+
+ .controls button {
+ margin: 5px;
+ padding: 10px 20px;
+ border: 2px solid var(--border);
+ background: var(--button-bg);
+ color: var(--text);
+ cursor: pointer;
+ }
+
+ .controls button.active {
+ border-color: var(--primary);
+ background: var(--primary);
+ color: white;
+ }
+ `]
+})
+export class ThemeSwitcherComponent {
+ colorMode = injectColorMode();
+
+ constructor() {
+ // React to mode changes
+ effect(() => {
+ const mode = this.colorMode.state();
+ console.log(`Theme changed to: ${mode}`);
+
+ // Update meta theme-color
+ this.updateMetaThemeColor(mode);
+ });
+ }
+
+ setMode(mode: 'light' | 'dark' | 'auto') {
+ this.colorMode.mode.set(mode);
+ }
+
+ private updateMetaThemeColor(mode: string) {
+ const metaThemeColor = document.querySelector('meta[name="theme-color"]');
+ if (metaThemeColor) {
+ metaThemeColor.setAttribute(
+ 'content',
+ mode === 'dark' ? '#1a1a1a' : '#ffffff'
+ );
+ }
+ }
+}
+```
+
+## CSS Integration
+
+Your CSS can respond to the applied classes:
+
+```css
+/* Default light theme */
+:root {
+ --bg: #ffffff;
+ --text: #000000;
+ --primary: #0066cc;
+}
+
+/* Dark theme */
+html.dark {
+ --bg: #1a1a1a;
+ --text: #ffffff;
+ --primary: #4da6ff;
+}
+
+body {
+ background-color: var(--bg);
+ color: var(--text);
+}
+```
+
+Or with data attributes:
+
+```css
+html[data-theme="light"] {
+ --bg: #ffffff;
+ --text: #000000;
+}
+
+html[data-theme="dark"] {
+ --bg: #1a1a1a;
+ --text: #ffffff;
+}
+```
+
+## API
+
+### `injectColorModeTheme Settings
+ +
+
+
+ Current Mode: {{ colorMode.mode() }}
+System Preference: {{ colorMode.system() }}
+Resolved State: {{ colorMode.state() }}
+Stored Value: {{ colorMode.store() }}
+
+
+
+
+
+
+ Target Element
+
+
+ Width: {{ bounding.width() }} Height: {{ bounding.height() }} Top:
+ {{ bounding.top() }} Left: {{ bounding.left() }} Right:
+ {{ bounding.right() }} Bottom: {{ bounding.bottom() }} X:
+ {{ bounding.x() }} Y: {{ bounding.y() }}
+
+ `,
+ })
+ class Test {
+ target = viewChildTarget
+ }
+ `,
+ })
+ class TestWithConditional {
+ showElement = signal(true);
+ target = viewChildTarget
+ }
+ `,
+ })
+ class TestWithConditional {
+ showElement = signal(true);
+ target = viewChildTarget
+ `,
+ })
+ class TestWithRawElement {
+ target = viewChildTest Element
+ `,
+ })
+ class TestComponent {
+ testElement = viewChild
+ Dynamic Element
+
+ `,
+ })
+ class DynamicSizeComponent {
+ width = signal(150);
+ height = signal(75);
+ dynamicElement = viewChild
+ Box Element
+
+ `,
+ })
+ class BoxModelComponent {
+ boxElement = viewChildTarget Element
+ Visibility: {{ isVisible() }}
+ `,
+ })
+ class TestComponent {
+ targetElement = viewChild.requiredTest
+ `,
+ })
+ class Test {
+ visibility = injectElementVisibility({
+ element: document.createElement('div'),
+ });
+ }
+
+ const fixture = TestBed.createComponent(Test);
+ fixture.detectChanges();
+ const cmp = fixture.componentInstance;
+
+ expect(cmp.visibility()).toBe(false);
+ });
+
+ it('should allow setting initial value to true', () => {
+ @Component({
+ standalone: true,
+ template: `
+ Test
+ `,
+ })
+ class Test {
+ visibility = injectElementVisibility({
+ element: document.createElement('div'),
+ initialValue: true,
+ });
+ }
+
+ const fixture = TestBed.createComponent(Test);
+ fixture.detectChanges();
+ const cmp = fixture.componentInstance;
+
+ expect(cmp.visibility()).toBe(true);
+ });
+
+ it('should return false when element is null', () => {
+ @Component({
+ standalone: true,
+ template: `
+ Test
+ `,
+ })
+ class Test {
+ visibility = injectElementVisibility({
+ element: null as any,
+ });
+ }
+
+ const fixture = TestBed.createComponent(Test);
+ fixture.detectChanges();
+ const cmp = fixture.componentInstance;
+
+ expect(cmp.visibility()).toBe(false);
+ });
+
+ it('should return false when window is null', () => {
+ @Component({
+ standalone: true,
+ template: `
+ Test
+ `,
+ })
+ class Test {
+ visibility = injectElementVisibility({
+ element: document.createElement('div'),
+ window: null as any,
+ });
+ }
+
+ const fixture = TestBed.createComponent(Test);
+ fixture.detectChanges();
+ const cmp = fixture.componentInstance;
+
+ expect(cmp.visibility()).toBe(false);
+ });
+
+ it('should work with ElementRef', () => {
+ @Component({
+ standalone: true,
+ template: `
+ Test
+ `,
+ })
+ class Test {
+ elementRef = viewChild.requiredTest
+ `,
+ })
+ class Test {
+ visibility = injectElementVisibility({
+ element: document.createElement('div'),
+ threshold: 0.5,
+ });
+ }
+
+ const fixture = TestBed.createComponent(Test);
+ fixture.detectChanges();
+ const cmp = fixture.componentInstance;
+
+ // Should not throw
+ expect(typeof cmp.visibility()).toBe('boolean');
+ });
+
+ it('should accept threshold as array', () => {
+ @Component({
+ standalone: true,
+ template: `
+ Test
+ `,
+ })
+ class Test {
+ visibility = injectElementVisibility({
+ element: document.createElement('div'),
+ threshold: [0, 0.25, 0.5, 0.75, 1],
+ });
+ }
+
+ const fixture = TestBed.createComponent(Test);
+ fixture.detectChanges();
+ const cmp = fixture.componentInstance;
+
+ // Should not throw
+ expect(typeof cmp.visibility()).toBe('boolean');
+ });
+
+ it('should accept rootMargin option', () => {
+ @Component({
+ standalone: true,
+ template: `
+ Test
+ `,
+ })
+ class Test {
+ visibility = injectElementVisibility({
+ element: document.createElement('div'),
+ rootMargin: '10px',
+ });
+ }
+
+ const fixture = TestBed.createComponent(Test);
+ fixture.detectChanges();
+ const cmp = fixture.componentInstance;
+
+ // Should not throw
+ expect(typeof cmp.visibility()).toBe('boolean');
+ });
+
+ it('should accept scrollTarget option', () => {
+ const scrollContainer = document.createElement('div');
+
+ @Component({
+ standalone: true,
+ template: `
+ Test
+ `,
+ })
+ class Test {
+ visibility = injectElementVisibility({
+ element: document.createElement('div'),
+ scrollTarget: scrollContainer,
+ });
+ }
+
+ const fixture = TestBed.createComponent(Test);
+ fixture.detectChanges();
+ const cmp = fixture.componentInstance;
+
+ // Should not throw
+ expect(typeof cmp.visibility()).toBe('boolean');
+ });
+
+ it('should work with once option', () => {
+ @Component({
+ standalone: true,
+ template: `
+ Test
+ `,
+ })
+ class Test {
+ visibility = injectElementVisibility({
+ element: document.createElement('div'),
+ once: true,
+ });
+ }
+
+ const fixture = TestBed.createComponent(Test);
+ fixture.detectChanges();
+ const cmp = fixture.componentInstance;
+
+ // Should not throw
+ expect(typeof cmp.visibility()).toBe('boolean');
+ });
+
+ it('should inject ElementRef when no element is provided', () => {
+ @Component({
+ standalone: true,
+ template: `
+ Test
+ `,
+ })
+ class Test {
+ visibility = injectElementVisibility();
+ }
+
+ const fixture = TestBed.createComponent(Test);
+ fixture.detectChanges();
+ const cmp = fixture.componentInstance;
+
+ // Should not throw and should return a signal
+ expect(typeof cmp.visibility()).toBe('boolean');
+ });
+});
diff --git a/libs/ngxtension/inject-element-visibility/src/inject-element-visibility.ts b/libs/ngxtension/inject-element-visibility/src/inject-element-visibility.ts
new file mode 100644
index 00000000..d5b98f3e
--- /dev/null
+++ b/libs/ngxtension/inject-element-visibility/src/inject-element-visibility.ts
@@ -0,0 +1,158 @@
+import { DOCUMENT } from '@angular/common';
+import {
+ DestroyRef,
+ type ElementRef,
+ type Injector,
+ type Signal,
+ inject,
+ signal,
+} from '@angular/core';
+import { assertInjector } from 'ngxtension/assert-injector';
+
+// Ported from https://vueuse.org/core/useElementVisibility/
+
+export interface InjectElementVisibilityOptions {
+ /**
+ * Custom injector instance for dependency injection.
+ */
+ injector?: Injector;
+ /**
+ * The element to track visibility for. If not provided, will attempt to inject ElementRef.
+ */
+ element?: Element | ElementRef
+ *
+ * @if (eyeDropper.sRGBHex()) {
+ *
+ * `,
+ * })
+ * export class ColorPickerComponent {
+ * eyeDropper = injectEyeDropper();
+ *
+ * async pickColor() {
+ * await this.eyeDropper.open();
+ * }
+ * }
+ * ```
+ *
+ * @example
+ * ```ts
+ * // With initial value
+ * const eyeDropper = injectEyeDropper({ initialValue: '#ff0000' });
+ * ```
+ *
+ * @example
+ * ```ts
+ * // With AbortSignal to cancel the operation
+ * const eyeDropper = injectEyeDropper();
+ * const controller = new AbortController();
+ *
+ * // Start color picking
+ * eyeDropper.open({ signal: controller.signal });
+ *
+ * // Cancel after 5 seconds
+ * setTimeout(() => controller.abort(), 5000);
+ * ```
+ *
+ * @param options - Configuration options
+ * @returns An object containing the eye dropper state and operations
+ */
+export function injectEyeDropper(
+ options: InjectEyeDropperOptions = {},
+): InjectEyeDropperReturn {
+ return assertInjector(injectEyeDropper, options.injector, () => {
+ const document = inject(DOCUMENT);
+ const { initialValue = '' } = options;
+
+ const window = document.defaultView;
+ const isSupported = computed(
+ () => window != null && 'EyeDropper' in window,
+ );
+
+ const sRGBHex = signal(initialValue);
+
+ async function open(
+ openOptions?: EyeDropperOpenOptions,
+ ): Promise<{ sRGBHex: string } | undefined> {
+ if (!isSupported()) {
+ return undefined;
+ }
+
+ const eyeDropper: EyeDropper = new (window as any).EyeDropper();
+ const result = await eyeDropper.open(openOptions);
+ sRGBHex.set(result.sRGBHex);
+ return result;
+ }
+
+ return {
+ isSupported: isSupported,
+ sRGBHex: sRGBHex.asReadonly(),
+ open,
+ };
+ });
+}
diff --git a/libs/ngxtension/inject-file-dialog/README.md b/libs/ngxtension/inject-file-dialog/README.md
new file mode 100644
index 00000000..74912506
--- /dev/null
+++ b/libs/ngxtension/inject-file-dialog/README.md
@@ -0,0 +1,3 @@
+# ngxtension/inject-file-dialog
+
+Secondary entry point of `ngxtension`. It can be used by importing from `ngxtension/inject-file-dialog`.
diff --git a/libs/ngxtension/inject-file-dialog/ng-package.json b/libs/ngxtension/inject-file-dialog/ng-package.json
new file mode 100644
index 00000000..b3e53d69
--- /dev/null
+++ b/libs/ngxtension/inject-file-dialog/ng-package.json
@@ -0,0 +1,5 @@
+{
+ "lib": {
+ "entryFile": "src/index.ts"
+ }
+}
diff --git a/libs/ngxtension/inject-file-dialog/project.json b/libs/ngxtension/inject-file-dialog/project.json
new file mode 100644
index 00000000..6f77c9fa
--- /dev/null
+++ b/libs/ngxtension/inject-file-dialog/project.json
@@ -0,0 +1,27 @@
+{
+ "name": "ngxtension/inject-file-dialog",
+ "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+ "projectType": "library",
+ "sourceRoot": "libs/ngxtension/inject-file-dialog/src",
+ "targets": {
+ "test": {
+ "executor": "@nx/jest:jest",
+ "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+ "options": {
+ "jestConfig": "libs/ngxtension/jest.config.ts",
+ "testPathPattern": ["inject-file-dialog"],
+ "passWithNoTests": true
+ },
+ "configurations": {
+ "ci": {
+ "ci": true,
+ "codeCoverage": true
+ }
+ }
+ },
+ "lint": {
+ "executor": "@nx/eslint:lint",
+ "outputs": ["{options.outputFile}"]
+ }
+ }
+}
diff --git a/libs/ngxtension/inject-file-dialog/src/index.ts b/libs/ngxtension/inject-file-dialog/src/index.ts
new file mode 100644
index 00000000..f412eb7c
--- /dev/null
+++ b/libs/ngxtension/inject-file-dialog/src/index.ts
@@ -0,0 +1 @@
+export * from './inject-file-dialog';
diff --git a/libs/ngxtension/inject-file-dialog/src/inject-file-dialog.spec.ts b/libs/ngxtension/inject-file-dialog/src/inject-file-dialog.spec.ts
new file mode 100644
index 00000000..d03c74b8
--- /dev/null
+++ b/libs/ngxtension/inject-file-dialog/src/inject-file-dialog.spec.ts
@@ -0,0 +1,223 @@
+import { Component } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { injectFileDialog } from './inject-file-dialog';
+
+describe(injectFileDialog.name, () => {
+ @Component({
+ standalone: true,
+ template: ``,
+ })
+ class Test {
+ fileDialog = injectFileDialog();
+ }
+
+ function setup(options = {}) {
+ @Component({
+ standalone: true,
+ template: ``,
+ })
+ class TestWithOptions {
+ fileDialog = injectFileDialog(options);
+ }
+
+ const fixture = TestBed.createComponent(TestWithOptions);
+ fixture.detectChanges();
+ return fixture.componentInstance;
+ }
+
+ it('should initialize with null files', () => {
+ const fixture = TestBed.createComponent(Test);
+ fixture.detectChanges();
+ const cmp = fixture.componentInstance;
+
+ expect(cmp.fileDialog.files()).toBeNull();
+ });
+
+ it('should handle file selection', () => {
+ const cmp = setup();
+ const mockFile = new File(['content'], 'test.txt', { type: 'text/plain' });
+ const dataTransfer = new DataTransfer();
+ dataTransfer.items.add(mockFile);
+
+ let selectedFiles: FileList | null = null;
+ cmp.fileDialog.onChange((files) => {
+ selectedFiles = files;
+ });
+
+ // Simulate file selection by creating an input element and triggering change
+ const inputElement = document.createElement('input');
+ inputElement.type = 'file';
+ inputElement.files = dataTransfer.files;
+
+ // Manually trigger the change that would happen internally
+ Object.defineProperty(inputElement, 'files', {
+ value: dataTransfer.files,
+ writable: false,
+ });
+
+ const changeEvent = new Event('change', { bubbles: true });
+ Object.defineProperty(changeEvent, 'target', {
+ value: inputElement,
+ enumerable: true,
+ });
+
+ // Access the internal input through open() which creates it
+ cmp.fileDialog.open();
+ // The input is now created, simulate the change
+ const input = document.querySelector(
+ 'input[type="file"]',
+ ) as HTMLInputElement;
+ if (input) {
+ Object.defineProperty(input, 'files', {
+ value: dataTransfer.files,
+ writable: false,
+ });
+ input.dispatchEvent(changeEvent);
+ }
+
+ // Wait a tick for the change to propagate
+ setTimeout(() => {
+ expect(cmp.fileDialog.files()?.length).toBe(1);
+ expect(cmp.fileDialog.files()?.[0].name).toBe('test.txt');
+ });
+ });
+
+ it('should reset files', () => {
+ const cmp = setup();
+ const mockFile = new File(['content'], 'test.txt', { type: 'text/plain' });
+ const dataTransfer = new DataTransfer();
+ dataTransfer.items.add(mockFile);
+
+ // Set initial files through the reset functionality
+ cmp.fileDialog.reset();
+ expect(cmp.fileDialog.files()).toBeNull();
+ });
+
+ it('should call onChange callback when files are selected', (done) => {
+ const cmp = setup();
+
+ cmp.fileDialog.onChange((files) => {
+ expect(files).toBeDefined();
+ done();
+ });
+
+ // Create a mock file
+ const mockFile = new File(['content'], 'test.txt', { type: 'text/plain' });
+ const dataTransfer = new DataTransfer();
+ dataTransfer.items.add(mockFile);
+
+ // Open dialog to create input element
+ cmp.fileDialog.open();
+
+ // Simulate file selection
+ const input = document.querySelector(
+ 'input[type="file"]',
+ ) as HTMLInputElement;
+ if (input) {
+ Object.defineProperty(input, 'files', {
+ value: dataTransfer.files,
+ configurable: true,
+ });
+ const event = new Event('change');
+ input.dispatchEvent(event);
+ }
+ });
+
+ it('should call onCancel callback when dialog is cancelled', (done) => {
+ const cmp = setup();
+
+ cmp.fileDialog.onCancel(() => {
+ expect(true).toBe(true);
+ done();
+ });
+
+ // Open dialog to create input element
+ cmp.fileDialog.open();
+
+ // Simulate cancel
+ const input = document.querySelector(
+ 'input[type="file"]',
+ ) as HTMLInputElement;
+ if (input) {
+ const event = new Event('cancel');
+ input.dispatchEvent(event);
+ }
+ });
+
+ it('should accept custom options', () => {
+ const cmp = setup({
+ accept: 'image/*',
+ multiple: false,
+ directory: false,
+ });
+
+ // Open to create the input
+ cmp.fileDialog.open();
+
+ const input = document.querySelector(
+ 'input[type="file"]',
+ ) as HTMLInputElement;
+ expect(input).toBeTruthy();
+ expect(input.accept).toBe('image/*');
+ expect(input.multiple).toBe(false);
+ });
+
+ it('should handle directory selection', () => {
+ const cmp = setup({
+ directory: true,
+ });
+
+ cmp.fileDialog.open();
+
+ const input = document.querySelector(
+ 'input[type="file"]',
+ ) as HTMLInputElement;
+ expect(input).toBeTruthy();
+ expect((input as any).webkitdirectory).toBe(true);
+ });
+
+ it('should support local options in open()', () => {
+ const cmp = setup({
+ accept: 'image/*',
+ });
+
+ // Override accept in open call
+ cmp.fileDialog.open({
+ accept: 'video/*',
+ });
+
+ const input = document.querySelector(
+ 'input[type="file"]',
+ ) as HTMLInputElement;
+ expect(input).toBeTruthy();
+ expect(input.accept).toBe('video/*');
+ });
+
+ it('should initialize with initial files', () => {
+ const mockFile = new File(['content'], 'initial.txt', {
+ type: 'text/plain',
+ });
+ const cmp = setup({
+ initialFiles: [mockFile],
+ });
+
+ expect(cmp.fileDialog.files()).toBeTruthy();
+ expect(cmp.fileDialog.files()?.length).toBe(1);
+ expect(cmp.fileDialog.files()?.[0].name).toBe('initial.txt');
+ });
+
+ it('should reset files when reset option is true', () => {
+ const mockFile = new File(['content'], 'test.txt', { type: 'text/plain' });
+ const cmp = setup({
+ initialFiles: [mockFile],
+ });
+
+ expect(cmp.fileDialog.files()?.length).toBe(1);
+
+ // Open with reset: true
+ cmp.fileDialog.open({ reset: true });
+
+ // After reset, files should be cleared
+ expect(cmp.fileDialog.files()).toBeNull();
+ });
+});
diff --git a/libs/ngxtension/inject-file-dialog/src/inject-file-dialog.ts b/libs/ngxtension/inject-file-dialog/src/inject-file-dialog.ts
new file mode 100644
index 00000000..57dda92e
--- /dev/null
+++ b/libs/ngxtension/inject-file-dialog/src/inject-file-dialog.ts
@@ -0,0 +1,204 @@
+import { DOCUMENT } from '@angular/common';
+import { inject, type Injector, signal } from '@angular/core';
+import { assertInjector } from 'ngxtension/assert-injector';
+
+// Ported from https://vueuse.org/core/useFileDialog/
+
+export interface InjectFileDialogOptions {
+ injector?: Injector;
+ /**
+ * @default true
+ */
+ multiple?: boolean;
+ /**
+ * @default '*'
+ */
+ accept?: string;
+ /**
+ * Select the input source for the capture file.
+ * @see [HTMLInputElement Capture](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)
+ */
+ capture?: string;
+ /**
+ * Reset when open file dialog.
+ * @default false
+ */
+ reset?: boolean;
+ /**
+ * Select directories instead of files.
+ * @see [HTMLInputElement webkitdirectory](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory)
+ * @default false
+ */
+ directory?: boolean;
+ /**
+ * Initial files to set.
+ * @default null
+ */
+ initialFiles?: Array
+ * Selected: {{ eyeDropper.sRGBHex() }}
+ *
+ * }
+ *
+
+ {{ controls.currentTime() | number:'1.0-0' }} / {{ controls.duration() | number:'1.0-0' }}
+
+
+ `,
+})
+export class VideoPlayerComponent {
+ videoRef = viewChild
+
+ `,
+})
+export class AppComponent {
+ isLargeScreen = injectMediaQuery('(min-width: 1024px)');
+ isPreferredDark = injectMediaQuery('(prefers-color-scheme: dark)');
+
+ constructor() {
+ effect(() => {
+ console.log('Large screen:', this.isLargeScreen());
+ console.log('Prefers dark:', this.isPreferredDark());
+ });
+ }
+}
+```
+
+### Dynamic Media Queries
+
+You can use signals to dynamically change the media query:
+
+```ts
+import { Component, signal } from '@angular/core';
+import { injectMediaQuery } from 'ngxtension/inject-media-query';
+
+@Component({
+ selector: 'app-responsive',
+ standalone: true,
+ template: `
+ Screen is {{ isLargeScreen() ? 'large' : 'small' }}
+Theme: {{ isPreferredDark() ? 'dark' : 'light' }}
+
+
+
+ `,
+})
+export class ResponsiveComponent {
+ breakpoint = signal('(min-width: 768px)');
+ matches = injectMediaQuery(this.breakpoint);
+
+ toggleBreakpoint() {
+ const current = this.breakpoint();
+ this.breakpoint.set(
+ current === '(min-width: 768px)'
+ ? '(min-width: 1024px)'
+ : '(min-width: 768px)'
+ );
+ }
+}
+```
+
+### Common Media Queries
+
+```ts
+@Component({
+ selector: 'app-media-queries',
+ standalone: true,
+ template: `...`,
+})
+export class MediaQueriesComponent {
+ // Screen sizes
+ isMobile = injectMediaQuery('(max-width: 767px)');
+ isTablet = injectMediaQuery('(min-width: 768px) and (max-width: 1023px)');
+ isDesktop = injectMediaQuery('(min-width: 1024px)');
+
+ // Orientation
+ isPortrait = injectMediaQuery('(orientation: portrait)');
+ isLandscape = injectMediaQuery('(orientation: landscape)');
+
+ // Color scheme preference
+ prefersDark = injectMediaQuery('(prefers-color-scheme: dark)');
+ prefersLight = injectMediaQuery('(prefers-color-scheme: light)');
+
+ // Reduced motion preference
+ prefersReducedMotion = injectMediaQuery('(prefers-reduced-motion: reduce)');
+
+ // Hover capability
+ canHover = injectMediaQuery('(hover: hover)');
+
+ // Print media
+ isPrint = injectMediaQuery('print');
+}
+```
+
+### Responsive Component
+
+Build responsive components that adapt to screen size:
+
+```ts
+import { Component, computed } from '@angular/core';
+import { injectMediaQuery } from 'ngxtension/inject-media-query';
+
+@Component({
+ selector: 'app-gallery',
+ standalone: true,
+ template: `
+ Matches: {{ matches() }}
+
+
+ `,
+ styles: [
+ `
+ [data-columns='1'] { grid-template-columns: 1fr; }
+ [data-columns='2'] { grid-template-columns: repeat(2, 1fr); }
+ [data-columns='3'] { grid-template-columns: repeat(3, 1fr); }
+ [data-columns='4'] { grid-template-columns: repeat(4, 1fr); }
+ `,
+ ],
+})
+export class GalleryComponent {
+ isMobile = injectMediaQuery('(max-width: 767px)');
+ isTablet = injectMediaQuery('(min-width: 768px) and (max-width: 1023px)');
+ isDesktop = injectMediaQuery('(min-width: 1024px)');
+ isLargeDesktop = injectMediaQuery('(min-width: 1440px)');
+
+ columns = computed(() => {
+ if (this.isLargeDesktop()) return 4;
+ if (this.isDesktop()) return 3;
+ if (this.isTablet()) return 2;
+ return 1;
+ });
+
+ items = Array.from({ length: 12 }, (_, i) => `Item ${i + 1}`);
+}
+```
+
+### Dark Mode Support
+
+```ts
+import { Component, effect } from '@angular/core';
+import { injectMediaQuery } from 'ngxtension/inject-media-query';
+
+@Component({
+ selector: 'app-theme',
+ standalone: true,
+ template: `
+ {{ item }}
+
+
+ `,
+})
+export class ThemeComponent {
+ prefersDark = injectMediaQuery('(prefers-color-scheme: dark)');
+
+ constructor() {
+ effect(() => {
+ document.documentElement.classList.toggle('dark', this.prefersDark());
+ });
+ }
+}
+```
+
+### Conditional Rendering
+
+```ts
+import { Component } from '@angular/core';
+import { injectMediaQuery } from 'ngxtension/inject-media-query';
+
+@Component({
+ selector: 'app-navigation',
+ standalone: true,
+ template: `
+ @if (isDesktop()) {
+
+ } @else {
+
+ }
+ `,
+})
+export class NavigationComponent {
+ isDesktop = injectMediaQuery('(min-width: 768px)');
+
+ toggleMenu() {
+ // Mobile menu logic
+ }
+}
+```
+
+### Custom Window
+
+For SSR or testing, you can provide a custom window object:
+
+```ts
+@Component({
+ selector: 'app-custom-window',
+ standalone: true,
+ template: `...`,
+})
+export class CustomWindowComponent {
+ customWindow = {
+ matchMedia: (query: string) => ({
+ matches: false,
+ media: query,
+ addEventListener: () => {},
+ removeEventListener: () => {},
+ }),
+ } as unknown as Window;
+
+ matches = injectMediaQuery('(min-width: 1024px)', {
+ window: this.customWindow,
+ });
+}
+```
+
+## API
+
+### Options
+
+```ts
+interface InjectMediaQueryOptions {
+ /**
+ * Custom injector for dependency injection
+ */
+ injector?: Injector;
+
+ /**
+ * Custom window object (useful for SSR/testing)
+ */
+ window?: Window;
+}
+```
+
+### Return Value
+
+Returns a **readonly** `SignalAuto Dark Mode
+This component automatically adapts to system theme preference
+