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

package/fesm2022/angular-helpers-browser-web-apis.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, DestroyRef, PLATFORM_ID, signal, makeEnvironmentProviders } from '@angular/core';
+import { Injectable, inject, DestroyRef, PLATFORM_ID, signal, computed, ElementRef, makeEnvironmentProviders } from '@angular/core';
 import { isPlatformBrowser, isPlatformServer } from '@angular/common';
-import { Observable, fromEvent, Subject } from 'rxjs';
+import { Observable, fromEvent, Subject, of, map as map$1 } from 'rxjs';
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { filter, distinctUntilChanged, map } from 'rxjs/operators';
 import { Router } from '@angular/router';
@@ -480,6 +480,19 @@ const BROWSER_CAPABILITIES = [
     { id: 'webShare', label: 'Web Share', requiresSecureContext: true },
     { id: 'battery', label: 'Battery API', requiresSecureContext: false },
     { id: 'webSocket', label: 'WebSocket API', requiresSecureContext: false },
+    { id: 'intersectionObserver', label: 'Intersection Observer', requiresSecureContext: false },
+    { id: 'resizeObserver', label: 'Resize Observer', requiresSecureContext: false },
+    { id: 'pageVisibility', label: 'Page Visibility API', requiresSecureContext: false },
+    { id: 'broadcastChannel', label: 'Broadcast Channel API', requiresSecureContext: false },
+    { id: 'networkInformation', label: 'Network Information API', requiresSecureContext: false },
+    { id: 'screenWakeLock', label: 'Screen Wake Lock API', requiresSecureContext: true },
+    { id: 'screenOrientation', label: 'Screen Orientation API', requiresSecureContext: false },
+    { id: 'fullscreen', label: 'Fullscreen API', requiresSecureContext: false },
+    { id: 'fileSystemAccess', label: 'File System Access API', requiresSecureContext: true },
+    { id: 'mediaRecorder', label: 'MediaRecorder API', requiresSecureContext: true },
+    { id: 'serverSentEvents', label: 'Server-Sent Events', requiresSecureContext: false },
+    { id: 'vibration', label: 'Vibration API', requiresSecureContext: false },
+    { id: 'speechSynthesis', label: 'Speech Synthesis API', requiresSecureContext: false },
 ];
 class BrowserCapabilityService {
     getCapabilities() {
@@ -512,6 +525,34 @@ class BrowserCapabilityService {
                 return typeof navigator !== 'undefined' && 'getBattery' in navigator;
             case 'webSocket':
                 return typeof WebSocket !== 'undefined';
+            case 'intersectionObserver':
+                return typeof IntersectionObserver !== 'undefined';
+            case 'resizeObserver':
+                return typeof ResizeObserver !== 'undefined';
+            case 'pageVisibility':
+                return typeof document !== 'undefined' && 'hidden' in document;
+            case 'broadcastChannel':
+                return typeof BroadcastChannel !== 'undefined';
+            case 'networkInformation':
+                return (typeof navigator !== 'undefined' &&
+                    ('connection' in navigator || 'mozConnection' in navigator));
+            case 'screenWakeLock':
+                return typeof navigator !== 'undefined' && 'wakeLock' in navigator;
+            case 'screenOrientation':
+                return typeof screen !== 'undefined' && 'orientation' in screen;
+            case 'fullscreen':
+                return (typeof document !== 'undefined' &&
+                    ('fullscreenEnabled' in document || 'webkitFullscreenEnabled' in document));
+            case 'fileSystemAccess':
+                return typeof window !== 'undefined' && 'showOpenFilePicker' in window;
+            case 'mediaRecorder':
+                return typeof MediaRecorder !== 'undefined';
+            case 'serverSentEvents':
+                return typeof EventSource !== 'undefined';
+            case 'vibration':
+                return typeof navigator !== 'undefined' && 'vibrate' in navigator;
+            case 'speechSynthesis':
+                return typeof window !== 'undefined' && 'speechSynthesis' in window;
             default:
                 return false;
         }
@@ -1290,8 +1331,1003 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
             type: Injectable
         }] });
 
+function isIntersectionObserverSupported() {
+    return typeof window !== 'undefined' && 'IntersectionObserver' in window;
+}
+function intersectionObserverStream(element, options = {}) {
+    return new Observable((observer) => {
+        const io = new IntersectionObserver((entries) => {
+            const entry = entries[entries.length - 1];
+            observer.next(entry.isIntersecting);
+        }, options);
+        io.observe(element);
+        return () => {
+            io.unobserve(element);
+            io.disconnect();
+        };
+    });
+}
+function intersectionObserverEntriesStream(element, options = {}) {
+    return new Observable((observer) => {
+        const io = new IntersectionObserver((entries) => observer.next(entries), options);
+        io.observe(element);
+        return () => {
+            io.unobserve(element);
+            io.disconnect();
+        };
+    });
+}
+
+class IntersectionObserverService {
+    platformId = inject(PLATFORM_ID);
+    isSupported() {
+        return isPlatformBrowser(this.platformId) && 'IntersectionObserver' in window;
+    }
+    observe(element, options = {}) {
+        if (!this.isSupported()) {
+            return new Observable((o) => o.error(new Error('IntersectionObserver API not supported')));
+        }
+        return intersectionObserverEntriesStream(element, options);
+    }
+    observeVisibility(element, options = {}) {
+        if (!this.isSupported()) {
+            return new Observable((o) => o.error(new Error('IntersectionObserver API not supported')));
+        }
+        return intersectionObserverStream(element, options);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IntersectionObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IntersectionObserverService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IntersectionObserverService, decorators: [{
+            type: Injectable
+        }] });
+
+function isResizeObserverSupported() {
+    return typeof window !== 'undefined' && 'ResizeObserver' in window;
+}
+function resizeObserverStream(element, options = {}) {
+    return new Observable((observer) => {
+        const ro = new ResizeObserver((entries) => {
+            const entry = entries[entries.length - 1];
+            const contentRect = entry.contentRect;
+            const borderBoxSize = entry.borderBoxSize?.[0];
+            observer.next({
+                width: contentRect.width,
+                height: contentRect.height,
+                inlineSize: borderBoxSize?.inlineSize ?? contentRect.width,
+                blockSize: borderBoxSize?.blockSize ?? contentRect.height,
+            });
+        });
+        ro.observe(element, options);
+        return () => {
+            ro.unobserve(element);
+            ro.disconnect();
+        };
+    });
+}
+function resizeObserverEntriesStream(element, options = {}) {
+    return new Observable((observer) => {
+        const ro = new ResizeObserver((entries) => observer.next(entries));
+        ro.observe(element, options);
+        return () => {
+            ro.unobserve(element);
+            ro.disconnect();
+        };
+    });
+}
+
+class ResizeObserverService {
+    platformId = inject(PLATFORM_ID);
+    isSupported() {
+        return isPlatformBrowser(this.platformId) && 'ResizeObserver' in window;
+    }
+    observe(element, options = {}) {
+        if (!this.isSupported()) {
+            return new Observable((o) => o.error(new Error('ResizeObserver API not supported')));
+        }
+        return resizeObserverEntriesStream(element, options);
+    }
+    observeSize(element, options = {}) {
+        if (!this.isSupported()) {
+            return new Observable((o) => o.error(new Error('ResizeObserver API not supported')));
+        }
+        return resizeObserverStream(element, options);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ResizeObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ResizeObserverService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ResizeObserverService, decorators: [{
+            type: Injectable
+        }] });
+
+function isPageVisibilitySupported() {
+    return typeof document !== 'undefined' && 'hidden' in document;
+}
+function pageVisibilityStream() {
+    if (!isPageVisibilitySupported()) {
+        return of('visible');
+    }
+    return new Observable((observer) => {
+        const handler = () => observer.next(document.visibilityState);
+        document.addEventListener('visibilitychange', handler);
+        observer.next(document.visibilityState);
+        return () => document.removeEventListener('visibilitychange', handler);
+    });
+}
+
+class PageVisibilityService {
+    platformId = inject(PLATFORM_ID);
+    isSupported() {
+        return isPlatformBrowser(this.platformId) && 'hidden' in document;
+    }
+    get isHidden() {
+        if (!this.isSupported())
+            return false;
+        return document.hidden;
+    }
+    get visibilityState() {
+        if (!this.isSupported())
+            return 'visible';
+        return document.visibilityState;
+    }
+    watch() {
+        return pageVisibilityStream();
+    }
+    watchVisibility() {
+        return pageVisibilityStream().pipe(map$1((s) => s === 'visible'));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PageVisibilityService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PageVisibilityService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PageVisibilityService, decorators: [{
+            type: Injectable
+        }] });
+
+class BroadcastChannelService {
+    destroyRef = inject(DestroyRef);
+    platformId = inject(PLATFORM_ID);
+    channels = new Map();
+    isSupported() {
+        return isPlatformBrowser(this.platformId) && 'BroadcastChannel' in window;
+    }
+    ensureSupport() {
+        if (!this.isSupported()) {
+            throw new Error('BroadcastChannel API not supported in this environment');
+        }
+    }
+    open(name) {
+        this.ensureSupport();
+        return new Observable((observer) => {
+            let channel = this.channels.get(name);
+            if (!channel) {
+                channel = new BroadcastChannel(name);
+                this.channels.set(name, channel);
+            }
+            const handler = (event) => observer.next(event.data);
+            const errorHandler = () => observer.error(new Error(`BroadcastChannel "${name}" error`));
+            channel.addEventListener('message', handler);
+            channel.addEventListener('messageerror', errorHandler);
+            const cleanup = () => {
+                channel.removeEventListener('message', handler);
+                channel.removeEventListener('messageerror', errorHandler);
+            };
+            this.destroyRef.onDestroy(() => this.close(name));
+            return cleanup;
+        });
+    }
+    post(name, data) {
+        this.ensureSupport();
+        let channel = this.channels.get(name);
+        if (!channel) {
+            channel = new BroadcastChannel(name);
+            this.channels.set(name, channel);
+            this.destroyRef.onDestroy(() => this.close(name));
+        }
+        channel.postMessage(data);
+    }
+    close(name) {
+        const channel = this.channels.get(name);
+        if (channel) {
+            channel.close();
+            this.channels.delete(name);
+        }
+    }
+    closeAll() {
+        this.channels.forEach((channel) => channel.close());
+        this.channels.clear();
+    }
+    getOpenChannels() {
+        return Array.from(this.channels.keys());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BroadcastChannelService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BroadcastChannelService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BroadcastChannelService, decorators: [{
+            type: Injectable
+        }] });
+
+function isNetworkInformationSupported() {
+    if (typeof navigator === 'undefined')
+        return false;
+    const nav = navigator;
+    return 'connection' in nav || 'mozConnection' in nav || 'webkitConnection' in nav;
+}
+function getNetworkConnection() {
+    if (typeof navigator === 'undefined')
+        return undefined;
+    const nav = navigator;
+    return nav.connection ?? nav.mozConnection ?? nav.webkitConnection;
+}
+function getNetworkSnapshot() {
+    const online = typeof navigator !== 'undefined' ? navigator.onLine : true;
+    const conn = getNetworkConnection();
+    return {
+        online,
+        type: conn?.type,
+        effectiveType: conn?.effectiveType,
+        downlink: conn?.downlink,
+        downlinkMax: conn?.downlinkMax,
+        rtt: conn?.rtt,
+        saveData: conn?.saveData,
+    };
+}
+function networkInformationStream() {
+    if (typeof window === 'undefined') {
+        return of({ online: true });
+    }
+    return new Observable((observer) => {
+        const emit = () => observer.next(getNetworkSnapshot());
+        const conn = getNetworkConnection();
+        if (conn)
+            conn.addEventListener('change', emit);
+        window.addEventListener('online', emit);
+        window.addEventListener('offline', emit);
+        emit();
+        return () => {
+            conn?.removeEventListener('change', emit);
+            window.removeEventListener('online', emit);
+            window.removeEventListener('offline', emit);
+        };
+    });
+}
+
+class NetworkInformationService {
+    platformId = inject(PLATFORM_ID);
+    isSupported() {
+        return isPlatformBrowser(this.platformId) && isNetworkInformationSupported();
+    }
+    getSnapshot() {
+        return isPlatformBrowser(this.platformId) ? getNetworkSnapshot() : { online: true };
+    }
+    watch() {
+        return networkInformationStream();
+    }
+    get isOnline() {
+        return isPlatformBrowser(this.platformId) ? navigator.onLine : true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NetworkInformationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NetworkInformationService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NetworkInformationService, decorators: [{
+            type: Injectable
+        }] });
+
+class ScreenWakeLockService extends BrowserApiBaseService {
+    sentinel = null;
+    getApiName() {
+        return 'screen-wake-lock';
+    }
+    isSupported() {
+        return isPlatformBrowser(this.platformId) && 'wakeLock' in navigator;
+    }
+    get isActive() {
+        return this.sentinel !== null && !this.sentinel.released;
+    }
+    async request(type = 'screen') {
+        if (!this.isSupported()) {
+            throw new Error('Screen Wake Lock API not supported in this browser');
+        }
+        if (!window.isSecureContext) {
+            throw new Error('Screen Wake Lock API requires a secure context (HTTPS)');
+        }
+        try {
+            this.sentinel = await navigator.wakeLock.request(type);
+            this.sentinel.addEventListener('release', () => {
+                this.sentinel = null;
+            });
+            this.destroyRef.onDestroy(() => this.release());
+            return { active: true, type, released: false };
+        }
+        catch (error) {
+            console.error('[ScreenWakeLockService] Failed to acquire wake lock:', error);
+            throw this.createError('Failed to acquire wake lock', error);
+        }
+    }
+    async release() {
+        if (this.sentinel && !this.sentinel.released) {
+            try {
+                await this.sentinel.release();
+            }
+            catch {
+                // Sentinel may already be released
+            }
+            finally {
+                this.sentinel = null;
+            }
+        }
+    }
+    watchStatus() {
+        return new Observable((observer) => {
+            const emit = () => observer.next({ active: this.isActive, released: !this.isActive });
+            const handleVisibilityChange = async () => {
+                if (document.visibilityState === 'visible' && !this.isActive) {
+                    try {
+                        await this.request();
+                    }
+                    catch {
+                        // Could not re-acquire
+                    }
+                }
+                emit();
+            };
+            document.addEventListener('visibilitychange', handleVisibilityChange);
+            emit();
+            const cleanup = () => document.removeEventListener('visibilitychange', handleVisibilityChange);
+            this.destroyRef.onDestroy(cleanup);
+            return cleanup;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ScreenWakeLockService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ScreenWakeLockService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ScreenWakeLockService, decorators: [{
+            type: Injectable
+        }] });
+
+function isScreenOrientationSupported() {
+    return typeof window !== 'undefined' && 'screen' in window && 'orientation' in screen;
+}
+function getOrientationSnapshot() {
+    if (!isScreenOrientationSupported()) {
+        return { type: 'portrait-primary', angle: 0 };
+    }
+    return {
+        type: screen.orientation.type,
+        angle: screen.orientation.angle,
+    };
+}
+function screenOrientationStream() {
+    if (!isScreenOrientationSupported()) {
+        return of({ type: 'portrait-primary', angle: 0 });
+    }
+    return new Observable((observer) => {
+        const handler = () => observer.next(getOrientationSnapshot());
+        screen.orientation.addEventListener('change', handler);
+        observer.next(getOrientationSnapshot());
+        return () => screen.orientation.removeEventListener('change', handler);
+    });
+}
+
+class ScreenOrientationService {
+    platformId = inject(PLATFORM_ID);
+    isSupported() {
+        return isPlatformBrowser(this.platformId) && 'screen' in window && 'orientation' in screen;
+    }
+    getSnapshot() {
+        return isPlatformBrowser(this.platformId)
+            ? getOrientationSnapshot()
+            : { type: 'portrait-primary', angle: 0 };
+    }
+    get isPortrait() {
+        return this.getSnapshot().type.startsWith('portrait');
+    }
+    get isLandscape() {
+        return this.getSnapshot().type.startsWith('landscape');
+    }
+    watch() {
+        return screenOrientationStream();
+    }
+    async lock(orientation) {
+        if (!this.isSupported()) {
+            throw new Error('Screen Orientation API not supported');
+        }
+        try {
+            await screen.orientation.lock(orientation);
+        }
+        catch (error) {
+            console.error('[ScreenOrientationService] Failed to lock orientation:', error);
+            throw error;
+        }
+    }
+    unlock() {
+        if (this.isSupported()) {
+            screen.orientation.unlock();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ScreenOrientationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ScreenOrientationService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ScreenOrientationService, decorators: [{
+            type: Injectable
+        }] });
+
+class FullscreenService {
+    destroyRef = inject(DestroyRef);
+    platformId = inject(PLATFORM_ID);
+    isSupported() {
+        if (!isPlatformBrowser(this.platformId))
+            return false;
+        return !!(document.fullscreenEnabled ??
+            document.webkitFullscreenEnabled);
+    }
+    get isFullscreen() {
+        if (!isPlatformBrowser(this.platformId))
+            return false;
+        return !!(document.fullscreenElement ??
+            document.webkitFullscreenElement);
+    }
+    get fullscreenElement() {
+        if (!isPlatformBrowser(this.platformId))
+            return null;
+        return (document.fullscreenElement ??
+            document.webkitFullscreenElement ??
+            null);
+    }
+    async request(element = document.documentElement) {
+        if (!this.isSupported()) {
+            throw new Error('Fullscreen API not supported in this browser');
+        }
+        try {
+            const el = element;
+            if (el.requestFullscreen) {
+                await el.requestFullscreen();
+            }
+            else if (el.webkitRequestFullscreen) {
+                await el.webkitRequestFullscreen();
+            }
+        }
+        catch (error) {
+            console.error('[FullscreenService] Failed to enter fullscreen:', error);
+            throw error;
+        }
+    }
+    async exit() {
+        if (!this.isFullscreen)
+            return;
+        try {
+            const doc = document;
+            if (doc.exitFullscreen) {
+                await doc.exitFullscreen();
+            }
+            else if (doc.webkitExitFullscreen) {
+                await doc.webkitExitFullscreen();
+            }
+        }
+        catch (error) {
+            console.error('[FullscreenService] Failed to exit fullscreen:', error);
+            throw error;
+        }
+    }
+    async toggle(element = document.documentElement) {
+        if (this.isFullscreen) {
+            await this.exit();
+        }
+        else {
+            await this.request(element);
+        }
+    }
+    watch() {
+        return new Observable((observer) => {
+            if (!isPlatformBrowser(this.platformId)) {
+                observer.next(false);
+                observer.complete();
+                return undefined;
+            }
+            const handler = () => observer.next(this.isFullscreen);
+            document.addEventListener('fullscreenchange', handler);
+            document.addEventListener('webkitfullscreenchange', handler);
+            observer.next(this.isFullscreen);
+            const cleanup = () => {
+                document.removeEventListener('fullscreenchange', handler);
+                document.removeEventListener('webkitfullscreenchange', handler);
+            };
+            this.destroyRef.onDestroy(cleanup);
+            return cleanup;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FullscreenService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FullscreenService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FullscreenService, decorators: [{
+            type: Injectable
+        }] });
+
+class FileSystemAccessService extends BrowserApiBaseService {
+    getApiName() {
+        return 'file-system-access';
+    }
+    isSupported() {
+        return this.isBrowserEnvironment() && 'showOpenFilePicker' in window && window.isSecureContext;
+    }
+    get win() {
+        return window;
+    }
+    ensureSupport() {
+        if (this.isServerEnvironment()) {
+            throw new Error('File System Access API not available in server environment');
+        }
+        if (!('showOpenFilePicker' in window)) {
+            throw new Error('File System Access API not supported in this browser');
+        }
+        if (!window.isSecureContext) {
+            throw new Error('File System Access API requires a secure context (HTTPS)');
+        }
+    }
+    async openFile(options = {}) {
+        this.ensureSupport();
+        try {
+            const handles = await this.win.showOpenFilePicker(options);
+            return Promise.all(handles.map((h) => h.getFile()));
+        }
+        catch (error) {
+            if (error instanceof DOMException && error.name === 'AbortError') {
+                return [];
+            }
+            console.error('[FileSystemAccessService] Error opening file:', error);
+            throw error;
+        }
+    }
+    async saveFile(content, options = {}) {
+        this.ensureSupport();
+        if (!this.win.showSaveFilePicker) {
+            throw new Error('showSaveFilePicker not supported');
+        }
+        try {
+            const handle = await this.win.showSaveFilePicker(options);
+            const writable = await handle.createWritable();
+            await writable.write(content);
+            await writable.close();
+        }
+        catch (error) {
+            if (error instanceof DOMException && error.name === 'AbortError') {
+                return;
+            }
+            console.error('[FileSystemAccessService] Error saving file:', error);
+            throw error;
+        }
+    }
+    async openDirectory(options = {}) {
+        this.ensureSupport();
+        if (!this.win.showDirectoryPicker) {
+            throw new Error('showDirectoryPicker not supported');
+        }
+        try {
+            return await this.win.showDirectoryPicker(options);
+        }
+        catch (error) {
+            if (error instanceof DOMException && error.name === 'AbortError') {
+                return null;
+            }
+            console.error('[FileSystemAccessService] Error opening directory:', error);
+            throw error;
+        }
+    }
+    async readFileAsText(file) {
+        return file.text();
+    }
+    async readFileAsArrayBuffer(file) {
+        return file.arrayBuffer();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FileSystemAccessService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FileSystemAccessService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FileSystemAccessService, decorators: [{
+            type: Injectable
+        }] });
+
+class MediaRecorderService extends BrowserApiBaseService {
+    recorder = null;
+    chunks = [];
+    startTime = 0;
+    dataSubject = new Subject();
+    stateSubject = new Subject();
+    getApiName() {
+        return 'media-recorder';
+    }
+    isSupported() {
+        return this.isBrowserEnvironment() && 'MediaRecorder' in window;
+    }
+    get state() {
+        return this.recorder?.state ?? 'inactive';
+    }
+    static isTypeSupported(mimeType) {
+        return typeof MediaRecorder !== 'undefined' && MediaRecorder.isTypeSupported(mimeType);
+    }
+    watchState() {
+        return this.stateSubject.asObservable();
+    }
+    watchData() {
+        return this.dataSubject.asObservable();
+    }
+    async start(stream, options = {}) {
+        if (!this.isSupported()) {
+            throw new Error('MediaRecorder API not supported in this browser');
+        }
+        if (!window.isSecureContext) {
+            throw new Error('MediaRecorder requires a secure context (HTTPS)');
+        }
+        this.stop();
+        this.chunks = [];
+        this.startTime = Date.now();
+        const { timeslice, ...recorderOptions } = options;
+        try {
+            this.recorder = new MediaRecorder(stream, recorderOptions);
+            this.recorder.ondataavailable = (event) => {
+                if (event.data.size > 0) {
+                    this.chunks.push(event.data);
+                    this.dataSubject.next(event.data);
+                }
+            };
+            this.recorder.onstart = () => this.stateSubject.next('recording');
+            this.recorder.onpause = () => this.stateSubject.next('paused');
+            this.recorder.onresume = () => this.stateSubject.next('recording');
+            this.recorder.onstop = () => this.stateSubject.next('inactive');
+            this.recorder.start(timeslice);
+        }
+        catch (error) {
+            console.error('[MediaRecorderService] Failed to start recording:', error);
+            throw this.createError('Failed to start recording', error);
+        }
+    }
+    pause() {
+        if (this.recorder?.state === 'recording') {
+            this.recorder.pause();
+        }
+    }
+    resume() {
+        if (this.recorder?.state === 'paused') {
+            this.recorder.resume();
+        }
+    }
+    stop() {
+        if (!this.recorder || this.recorder.state === 'inactive') {
+            return null;
+        }
+        this.recorder.stop();
+        const mimeType = this.recorder.mimeType;
+        const duration = Date.now() - this.startTime;
+        const blob = new Blob(this.chunks, { type: mimeType });
+        const url = URL.createObjectURL(blob);
+        this.recorder = null;
+        this.chunks = [];
+        return { blob, url, mimeType, duration };
+    }
+    getResult() {
+        if (this.chunks.length === 0)
+            return null;
+        const mimeType = this.recorder?.mimeType ?? 'video/webm';
+        const blob = new Blob(this.chunks, { type: mimeType });
+        const url = URL.createObjectURL(blob);
+        const duration = Date.now() - this.startTime;
+        return { blob, url, mimeType, duration };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MediaRecorderService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MediaRecorderService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MediaRecorderService, decorators: [{
+            type: Injectable
+        }] });
+
+class ServerSentEventsService {
+    destroyRef = inject(DestroyRef);
+    platformId = inject(PLATFORM_ID);
+    sources = new Map();
+    isSupported() {
+        return isPlatformBrowser(this.platformId) && 'EventSource' in window;
+    }
+    ensureSupport() {
+        if (!this.isSupported()) {
+            throw new Error('Server-Sent Events (EventSource) not supported in this environment');
+        }
+    }
+    connect(url, config = {}) {
+        this.ensureSupport();
+        return new Observable((observer) => {
+            const source = new EventSource(url, { withCredentials: config.withCredentials ?? false });
+            this.sources.set(url, source);
+            const messageHandler = (event) => {
+                try {
+                    observer.next({
+                        data: JSON.parse(event.data),
+                        type: event.type,
+                        lastEventId: event.lastEventId,
+                        origin: event.origin,
+                    });
+                }
+                catch {
+                    observer.next({
+                        data: event.data,
+                        type: event.type,
+                        lastEventId: event.lastEventId,
+                        origin: event.origin,
+                    });
+                }
+            };
+            const errorHandler = (event) => {
+                if (source.readyState === EventSource.CLOSED) {
+                    observer.error(new Error('SSE connection closed unexpectedly'));
+                }
+                else {
+                    console.warn('[ServerSentEventsService] SSE connection error, reconnecting...', event);
+                }
+            };
+            source.addEventListener('message', messageHandler);
+            source.addEventListener('error', errorHandler);
+            if (config.eventTypes) {
+                for (const type of config.eventTypes) {
+                    source.addEventListener(type, messageHandler);
+                }
+            }
+            const cleanup = () => {
+                this.disconnect(url);
+            };
+            this.destroyRef.onDestroy(cleanup);
+            return cleanup;
+        });
+    }
+    disconnect(url) {
+        const source = this.sources.get(url);
+        if (source) {
+            source.close();
+            this.sources.delete(url);
+        }
+    }
+    disconnectAll() {
+        this.sources.forEach((source) => source.close());
+        this.sources.clear();
+    }
+    getState(url) {
+        const source = this.sources.get(url);
+        if (!source)
+            return 'closed';
+        const states = ['connecting', 'open', 'closed'];
+        return states[source.readyState] ?? 'closed';
+    }
+    getActiveConnections() {
+        return Array.from(this.sources.keys());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ServerSentEventsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ServerSentEventsService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ServerSentEventsService, decorators: [{
+            type: Injectable
+        }] });
+
+class VibrationService {
+    platformId = inject(PLATFORM_ID);
+    presets = {
+        success: [50, 30, 50],
+        error: [100, 50, 100, 50, 100],
+        notification: [200],
+        doubleTap: [50, 100, 50],
+    };
+    isSupported() {
+        return isPlatformBrowser(this.platformId) && 'vibrate' in navigator;
+    }
+    vibrate(pattern = 200) {
+        if (!this.isSupported())
+            return false;
+        return navigator.vibrate(pattern);
+    }
+    success() {
+        return this.vibrate(this.presets.success);
+    }
+    error() {
+        return this.vibrate(this.presets.error);
+    }
+    notification() {
+        return this.vibrate(this.presets.notification);
+    }
+    doubleTap() {
+        return this.vibrate(this.presets.doubleTap);
+    }
+    stop() {
+        return this.vibrate(0);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VibrationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VibrationService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VibrationService, decorators: [{
+            type: Injectable
+        }] });
+
+class SpeechSynthesisService {
+    destroyRef = inject(DestroyRef);
+    platformId = inject(PLATFORM_ID);
+    isSupported() {
+        return isPlatformBrowser(this.platformId) && 'speechSynthesis' in window;
+    }
+    ensureSupport() {
+        if (!this.isSupported()) {
+            throw new Error('Speech Synthesis API not supported in this browser');
+        }
+    }
+    get state() {
+        if (!this.isSupported())
+            return 'idle';
+        if (speechSynthesis.speaking && !speechSynthesis.paused)
+            return 'speaking';
+        if (speechSynthesis.paused)
+            return 'paused';
+        return 'idle';
+    }
+    get isPending() {
+        return this.isSupported() && speechSynthesis.pending;
+    }
+    getVoices() {
+        if (!this.isSupported())
+            return [];
+        return speechSynthesis.getVoices();
+    }
+    watchVoices() {
+        return new Observable((observer) => {
+            if (!this.isSupported()) {
+                observer.next([]);
+                observer.complete();
+                return undefined;
+            }
+            const emit = () => observer.next(speechSynthesis.getVoices());
+            speechSynthesis.addEventListener('voiceschanged', emit);
+            emit();
+            const cleanup = () => speechSynthesis.removeEventListener('voiceschanged', emit);
+            this.destroyRef.onDestroy(cleanup);
+            return cleanup;
+        });
+    }
+    speak(text, options = {}) {
+        return new Observable((observer) => {
+            this.ensureSupport();
+            const utterance = new SpeechSynthesisUtterance(text);
+            if (options.lang)
+                utterance.lang = options.lang;
+            if (options.voice)
+                utterance.voice = options.voice;
+            if (options.volume !== undefined)
+                utterance.volume = options.volume;
+            if (options.rate !== undefined)
+                utterance.rate = options.rate;
+            if (options.pitch !== undefined)
+                utterance.pitch = options.pitch;
+            utterance.onstart = () => observer.next('speaking');
+            utterance.onpause = () => observer.next('paused');
+            utterance.onresume = () => observer.next('speaking');
+            utterance.onend = () => {
+                observer.next('idle');
+                observer.complete();
+            };
+            utterance.onerror = (event) => {
+                observer.error(new Error(`Speech synthesis error: ${event.error}`));
+            };
+            observer.next('speaking');
+            speechSynthesis.speak(utterance);
+            const cleanup = () => {
+                speechSynthesis.cancel();
+                observer.next('idle');
+            };
+            this.destroyRef.onDestroy(cleanup);
+            return cleanup;
+        });
+    }
+    pause() {
+        if (this.isSupported())
+            speechSynthesis.pause();
+    }
+    resume() {
+        if (this.isSupported())
+            speechSynthesis.resume();
+    }
+    cancel() {
+        if (this.isSupported())
+            speechSynthesis.cancel();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SpeechSynthesisService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SpeechSynthesisService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SpeechSynthesisService, decorators: [{
+            type: Injectable
+        }] });
+
 // Common types for browser APIs
 
+function injectPageVisibility() {
+    const destroyRef = inject(DestroyRef);
+    const platformId = inject(PLATFORM_ID);
+    const initial = isPlatformBrowser(platformId) && typeof document !== 'undefined'
+        ? document.visibilityState
+        : 'visible';
+    const state = signal(initial, ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    const sub = pageVisibilityStream().subscribe((s) => state.set(s));
+    destroyRef.onDestroy(() => sub.unsubscribe());
+    return {
+        state: state.asReadonly(),
+        isVisible: computed(() => state() === 'visible'),
+        isHidden: computed(() => state() !== 'visible'),
+    };
+}
+
+function injectResizeObserver(elementOrRef, options) {
+    const destroyRef = inject(DestroyRef);
+    const platformId = inject(PLATFORM_ID);
+    const size = signal(null, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    if (isPlatformBrowser(platformId) && isResizeObserverSupported()) {
+        const el = elementOrRef instanceof ElementRef ? elementOrRef.nativeElement : elementOrRef;
+        const sub = resizeObserverStream(el, options).subscribe((s) => size.set(s));
+        destroyRef.onDestroy(() => sub.unsubscribe());
+    }
+    return {
+        size: size.asReadonly(),
+        width: computed(() => size()?.width ?? 0),
+        height: computed(() => size()?.height ?? 0),
+        inlineSize: computed(() => size()?.inlineSize ?? 0),
+        blockSize: computed(() => size()?.blockSize ?? 0),
+    };
+}
+
+function injectIntersectionObserver(elementOrRef, options) {
+    const destroyRef = inject(DestroyRef);
+    const platformId = inject(PLATFORM_ID);
+    const isIntersecting = signal(false, ...(ngDevMode ? [{ debugName: "isIntersecting" }] : /* istanbul ignore next */ []));
+    if (isPlatformBrowser(platformId) && isIntersectionObserverSupported()) {
+        const el = elementOrRef instanceof ElementRef ? elementOrRef.nativeElement : elementOrRef;
+        const sub = intersectionObserverStream(el, options).subscribe((v) => isIntersecting.set(v));
+        destroyRef.onDestroy(() => sub.unsubscribe());
+    }
+    return {
+        isIntersecting: isIntersecting.asReadonly(),
+        isVisible: computed(() => isIntersecting()),
+    };
+}
+
+function injectNetworkInformation() {
+    const destroyRef = inject(DestroyRef);
+    const platformId = inject(PLATFORM_ID);
+    const snapshot = signal(isPlatformBrowser(platformId) ? getNetworkSnapshot() : { online: true }, ...(ngDevMode ? [{ debugName: "snapshot" }] : /* istanbul ignore next */ []));
+    const sub = networkInformationStream().subscribe((n) => snapshot.set(n));
+    destroyRef.onDestroy(() => sub.unsubscribe());
+    return {
+        snapshot: snapshot.asReadonly(),
+        online: computed(() => snapshot().online),
+        effectiveType: computed(() => snapshot().effectiveType),
+        downlink: computed(() => snapshot().downlink),
+        rtt: computed(() => snapshot().rtt),
+        type: computed(() => snapshot().type),
+        saveData: computed(() => snapshot().saveData),
+    };
+}
+
+function injectScreenOrientation() {
+    const destroyRef = inject(DestroyRef);
+    const platformId = inject(PLATFORM_ID);
+    const orientation = signal(isPlatformBrowser(platformId)
+        ? getOrientationSnapshot()
+        : { type: 'portrait-primary', angle: 0 }, ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    const sub = screenOrientationStream().subscribe((o) => orientation.set(o));
+    destroyRef.onDestroy(() => sub.unsubscribe());
+    return {
+        orientation: orientation.asReadonly(),
+        type: computed(() => orientation().type),
+        angle: computed(() => orientation().angle),
+        isPortrait: computed(() => orientation().type.startsWith('portrait')),
+        isLandscape: computed(() => orientation().type.startsWith('landscape')),
+        async lock(o) {
+            await screen.orientation.lock(o);
+        },
+        unlock() {
+            screen.orientation.unlock();
+        },
+    };
+}
+
 class BrowserSupportUtil {
     static isSupported(feature) {
         if (typeof window === 'undefined' || typeof navigator === 'undefined') {
@@ -1417,6 +2453,19 @@ const defaultBrowserWebApisConfig = {
     enableWebStorage: false,
     enableWebSocket: false,
     enableWebWorker: false,
+    enableIntersectionObserver: false,
+    enableResizeObserver: false,
+    enablePageVisibility: false,
+    enableBroadcastChannel: false,
+    enableNetworkInformation: false,
+    enableScreenWakeLock: false,
+    enableScreenOrientation: false,
+    enableFullscreen: false,
+    enableFileSystemAccess: false,
+    enableMediaRecorder: false,
+    enableServerSentEvents: false,
+    enableVibration: false,
+    enableSpeechSynthesis: false,
 };
 function provideBrowserWebApis(config = {}) {
     const mergedConfig = { ...defaultBrowserWebApisConfig, ...config };
@@ -1432,6 +2481,19 @@ function provideBrowserWebApis(config = {}) {
         [mergedConfig.enableWebStorage, WebStorageService],
         [mergedConfig.enableWebSocket, WebSocketService],
         [mergedConfig.enableWebWorker, WebWorkerService],
+        [mergedConfig.enableIntersectionObserver, IntersectionObserverService],
+        [mergedConfig.enableResizeObserver, ResizeObserverService],
+        [mergedConfig.enablePageVisibility, PageVisibilityService],
+        [mergedConfig.enableBroadcastChannel, BroadcastChannelService],
+        [mergedConfig.enableNetworkInformation, NetworkInformationService],
+        [mergedConfig.enableScreenWakeLock, ScreenWakeLockService],
+        [mergedConfig.enableScreenOrientation, ScreenOrientationService],
+        [mergedConfig.enableFullscreen, FullscreenService],
+        [mergedConfig.enableFileSystemAccess, FileSystemAccessService],
+        [mergedConfig.enableMediaRecorder, MediaRecorderService],
+        [mergedConfig.enableServerSentEvents, ServerSentEventsService],
+        [mergedConfig.enableVibration, VibrationService],
+        [mergedConfig.enableSpeechSynthesis, SpeechSynthesisService],
     ];
     for (const [enabled, provider] of conditionalProviders) {
         if (enabled) {
@@ -1492,6 +2554,45 @@ function provideCommunicationApis() {
         WebSocketService,
     ]);
 }
+function provideIntersectionObserver() {
+    return makeEnvironmentProviders([IntersectionObserverService]);
+}
+function provideResizeObserver() {
+    return makeEnvironmentProviders([ResizeObserverService]);
+}
+function providePageVisibility() {
+    return makeEnvironmentProviders([PageVisibilityService]);
+}
+function provideBroadcastChannel() {
+    return makeEnvironmentProviders([BroadcastChannelService]);
+}
+function provideNetworkInformation() {
+    return makeEnvironmentProviders([NetworkInformationService]);
+}
+function provideScreenWakeLock() {
+    return makeEnvironmentProviders([PermissionsService, ScreenWakeLockService]);
+}
+function provideScreenOrientation() {
+    return makeEnvironmentProviders([ScreenOrientationService]);
+}
+function provideFullscreen() {
+    return makeEnvironmentProviders([FullscreenService]);
+}
+function provideFileSystemAccess() {
+    return makeEnvironmentProviders([PermissionsService, FileSystemAccessService]);
+}
+function provideMediaRecorder() {
+    return makeEnvironmentProviders([PermissionsService, MediaRecorderService]);
+}
+function provideServerSentEvents() {
+    return makeEnvironmentProviders([ServerSentEventsService]);
+}
+function provideVibration() {
+    return makeEnvironmentProviders([VibrationService]);
+}
+function provideSpeechSynthesis() {
+    return makeEnvironmentProviders([SpeechSynthesisService]);
+}
 
 // Browser Web APIs Services
 // Version
@@ -1501,4 +2602,4 @@ const version = '0.1.0';
  * Generated bundle index. Do not edit.
  */
 
-export { BatteryService, BrowserApiBaseService, BrowserCapabilityService, BrowserSupportUtil, CameraService, ClipboardService, GeolocationService, MediaDevicesService, NotificationService, PermissionsService, WebShareService, WebSocketService, WebStorageService, WebWorkerService, permissionGuard as createPermissionGuard, defaultBrowserWebApisConfig, permissionGuard, provideBattery, provideBrowserWebApis, provideCamera, provideClipboard, provideCommunicationApis, provideGeolocation, provideLocationApis, provideMediaApis, provideMediaDevices, provideNotifications, providePermissions, provideStorageApis, provideWebShare, provideWebSocket, provideWebStorage, provideWebWorker, version };
+export { BatteryService, BroadcastChannelService, BrowserApiBaseService, BrowserCapabilityService, BrowserSupportUtil, CameraService, ClipboardService, FileSystemAccessService, FullscreenService, GeolocationService, IntersectionObserverService, MediaDevicesService, MediaRecorderService, NetworkInformationService, NotificationService, PageVisibilityService, PermissionsService, ResizeObserverService, ScreenOrientationService, ScreenWakeLockService, ServerSentEventsService, SpeechSynthesisService, VibrationService, WebShareService, WebSocketService, WebStorageService, WebWorkerService, permissionGuard as createPermissionGuard, defaultBrowserWebApisConfig, injectIntersectionObserver, injectNetworkInformation, injectPageVisibility, injectResizeObserver, injectScreenOrientation, permissionGuard, provideBattery, provideBroadcastChannel, provideBrowserWebApis, provideCamera, provideClipboard, provideCommunicationApis, provideFileSystemAccess, provideFullscreen, provideGeolocation, provideIntersectionObserver, provideLocationApis, provideMediaApis, provideMediaDevices, provideMediaRecorder, provideNetworkInformation, provideNotifications, providePageVisibility, providePermissions, provideResizeObserver, provideScreenOrientation, provideScreenWakeLock, provideServerSentEvents, provideSpeechSynthesis, provideStorageApis, provideVibration, provideWebShare, provideWebSocket, provideWebStorage, provideWebWorker, version };