@telperion/ng-pack 1.2.2 → 1.3.1

package/README.md

@@ -60,6 +60,77 @@ export class SettingsComponent {
 
 ---
 
+### SSE Client
+
+**Import:** `@telperion/ng-pack/sse-client`
+
+Angular service for Server-Sent Events (SSE) with RxJS Observables and HttpClient-inspired interceptors.
+
+#### Key Features
+
+- 🚀 Observable-based API integrated with RxJS ecosystem
+- 🔗 HttpClient-inspired interceptor chain for request manipulation
+- 🎯 Type-safe with full generic support
+- ⚡ EventSource wrapper with automatic cleanup
+- 🔄 Real-time streaming data updates
+- 🎨 Feature-based configuration
+
+#### Quick Start
+
+```typescript
+import { ApplicationConfig } from '@angular/core';
+import { provideSseClient, withSseInterceptors } from '@telperion/ng-pack/sse-client';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideSseClient(
+      withSseInterceptors(loggingInterceptor, authInterceptor)
+    ),
+  ]
+};
+```
+
+```typescript
+import { Component, inject } from '@angular/core';
+import { SseClient } from '@telperion/ng-pack/sse-client';
+import { AsyncPipe } from '@angular/common';
+
+interface StockUpdate {
+  symbol: string;
+  price: number;
+  change: number;
+}
+
+@Component({
+  selector: 'app-stock-ticker',
+  template: `
+    <div>
+      <h2>Live Stock Prices</h2>
+      @if (stockUpdates$ | async; as update) {
+        <div class="stock-card">
+          <span>{{ update.symbol }}: \${{ update.price }}</span>
+          <span [class.positive]="update.change > 0">
+            {{ update.change > 0 ? '+' : '' }}{{ update.change }}%
+          </span>
+        </div>
+      }
+    </div>
+  `,
+  standalone: true,
+  imports: [AsyncPipe]
+})
+export class StockTickerComponent {
+  private sseClient = inject(SseClient);
+
+  // Start SSE connection and get Observable stream
+  stockUpdates$ = this.sseClient.start<StockUpdate>('/api/stocks/stream');
+}
+```
+
+[Full documentation →](https://github.com/telperiontech/telperion/tree/main/libs/ng-pack/sse-client)
+
+---
+
 ### Template Signal Forms
 
 **Import:** `@telperion/ng-pack/template-signal-forms`

package/fesm2022/telperion-ng-pack-sse-client.mjs

@@ -0,0 +1,152 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+
+/**
+ * Enum identifying different types of SSE features.
+ */
+var SseFeatureKind;
+(function (SseFeatureKind) {
+    SseFeatureKind[SseFeatureKind["InterceptorFunction"] = 0] = "InterceptorFunction";
+})(SseFeatureKind || (SseFeatureKind = {}));
+
+/**
+ * Configures functional interceptors for the SSE client.
+ * Interceptors are executed in the order they are provided.
+ *
+ * @param interceptors - One or more functional interceptor functions
+ * @returns Array of SSE features to be used with provideSseClient()
+ *
+ * @example
+ * ```typescript
+ * const loggingInterceptor: SseInterceptorFn<any> = (req, next) => {
+ *   console.log('Connecting to:', req.url);
+ *   return next(req);
+ * };
+ *
+ * provideSseClient(
+ *   withSseInterceptors(loggingInterceptor)
+ * )
+ * ```
+ */
+function withSseInterceptors(...interceptors) {
+    return interceptors.map(interceptor => ({
+        kind: SseFeatureKind.InterceptorFunction,
+        interceptor,
+    }));
+}
+
+/**
+ * Injection token for providing SSE interceptors.
+ * Use with multi: true to provide multiple interceptors.
+ */
+const SSE_INTERCEPTORS = new InjectionToken('Telperion/SSE_INTERCEPTORS');
+
+/**
+ * Angular service for managing Server-Sent Events (SSE) connections.
+ * Wraps the EventSource API with RxJS Observables and an HttpClient-inspired interceptor chain.
+ *
+ * @example
+ * ```typescript
+ * class MyComponent {
+ *   private sseClient = inject(SseClient);
+ *
+ *   messages$ = this.sseClient.start<string>('/api/events');
+ * }
+ * ```
+ */
+class SseClient {
+    #interceptors = inject(SSE_INTERCEPTORS, { optional: true }) ?? [];
+    constructor() {
+        if (!(this.#interceptors instanceof Array)) {
+            throw new Error('SSE_INTERCEPTORS must be provided as an array. Please ensure you are using multi: true when providing interceptors.');
+        }
+    }
+    /**
+     * Starts a new Server-Sent Events connection and returns an Observable stream.
+     *
+     * @param url - The URL endpoint for the SSE connection
+     * @param init - Optional EventSource initialization configuration
+     * @returns Observable stream of server-sent events
+     *
+     * @example
+     * ```typescript
+     * this.sseClient.start<MessageData>('/api/notifications', { withCredentials: true })
+     *   .subscribe(data => console.log('Received:', data));
+     * ```
+     */
+    start(url, init = {}) {
+        return this.#interceptors.reduceRight((next, interceptor) => (req) => interceptor.sseIntercept(req, next), (req) => this.#createEventSource(req))({ url, init });
+    }
+    #createEventSource(request) {
+        return new Observable((subscriber) => {
+            const eventSource = new EventSource(request.url, request.init);
+            function handleMessage(event) {
+                subscriber.next(event.data);
+            }
+            function handleError(err) {
+                subscriber.error(err);
+                eventSource.close();
+            }
+            eventSource.addEventListener('message', handleMessage);
+            eventSource.addEventListener('error', handleError);
+            return () => {
+                eventSource.removeEventListener('message', handleMessage);
+                eventSource.removeEventListener('error', handleError);
+                eventSource.close();
+            };
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SseClient, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SseClient });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SseClient, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+/**
+ * Provides the SseClient service with optional features.
+ * Configure SSE client with interceptors and other features using a functional API.
+ *
+ * @param features - Optional feature configurations (e.g., withSseInterceptors())
+ * @returns Array of Angular providers
+ *
+ * @example
+ * ```typescript
+ * import { provideSseClient, withSseInterceptors } from '@telperion/ng-pack/sse-client';
+ *
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideSseClient(
+ *       withSseInterceptors(loggingInterceptor, authInterceptor)
+ *     )
+ *   ]
+ * };
+ * ```
+ */
+function provideSseClient(...features) {
+    const interceptorFns = features
+        .flat()
+        .filter(feature => feature.kind === SseFeatureKind.InterceptorFunction)
+        .map(feature => ({
+        provide: SSE_INTERCEPTORS,
+        useValue: {
+            sseIntercept: feature.interceptor,
+        },
+        multi: true,
+    }));
+    return [
+        {
+            provide: SseClient,
+            useClass: SseClient
+        },
+        ...interceptorFns
+    ];
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SSE_INTERCEPTORS, SseClient, SseFeatureKind, provideSseClient, withSseInterceptors };
+//# sourceMappingURL=telperion-ng-pack-sse-client.mjs.map

package/fesm2022/telperion-ng-pack-sse-client.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"telperion-ng-pack-sse-client.mjs","sources":["../../sse-client/src/features/feature.ts","../../sse-client/src/features/with-interceptors.ts","../../sse-client/src/interceptor.ts","../../sse-client/src/client.ts","../../sse-client/src/provider.ts","../../sse-client/src/telperion-ng-pack-sse-client.ts"],"sourcesContent":["/**\r\n * Enum identifying different types of SSE features.\r\n */\r\nexport enum SseFeatureKind {\r\n  InterceptorFunction\r\n}\r\n\r\n/**\r\n * Base interface for SSE feature configurations.\r\n */\r\nexport interface SseFeature {\r\n  kind: SseFeatureKind;\r\n}\r\n","import { SseInterceptorFn } from \"../interceptor\";\r\nimport { SseFeature, SseFeatureKind } from \"./feature\";\r\n\r\n/**\r\n * Feature interface for functional interceptors.\r\n * @internal\r\n */\r\nexport interface SseInterceptorFunctionFeature extends SseFeature {\r\n  kind: SseFeatureKind.InterceptorFunction;\r\n  interceptor: SseInterceptorFn<unknown>;\r\n}\r\n\r\n/**\r\n * Configures functional interceptors for the SSE client.\r\n * Interceptors are executed in the order they are provided.\r\n *\r\n * @param interceptors - One or more functional interceptor functions\r\n * @returns Array of SSE features to be used with provideSseClient()\r\n *\r\n * @example\r\n * ```typescript\r\n * const loggingInterceptor: SseInterceptorFn<any> = (req, next) => {\r\n *   console.log('Connecting to:', req.url);\r\n *   return next(req);\r\n * };\r\n *\r\n * provideSseClient(\r\n *   withSseInterceptors(loggingInterceptor)\r\n * )\r\n * ```\r\n */\r\nexport function withSseInterceptors<T = unknown>(...interceptors: SseInterceptorFn<T>[]): SseFeature[] {\r\n  return interceptors.map(interceptor => ({\r\n    kind: SseFeatureKind.InterceptorFunction,\r\n    interceptor,\r\n  }));\r\n}\r\n","import { InjectionToken } from \"@angular/core\";\r\nimport type { Observable } from \"rxjs\";\r\n\r\n/**\r\n * Represents an SSE request with URL and initialization options.\r\n */\r\nexport interface SseRequest {\r\n  url: string;\r\n  init: EventSourceInit;\r\n}\r\n\r\n/**\r\n * Function type for passing the request to the next handler in the interceptor chain.\r\n */\r\nexport type SseNextFn<T> = (request: SseRequest) => Observable<T>;\r\n\r\n/**\r\n * Functional interceptor type for intercepting SSE requests.\r\n * Interceptors can modify requests, handle errors, add logging, etc.\r\n *\r\n * @example\r\n * ```typescript\r\n * const loggingInterceptor: SseInterceptorFn<any> = (req, next) => {\r\n *   console.log('SSE Request:', req.url);\r\n *   return next(req);\r\n * };\r\n * ```\r\n */\r\nexport type SseInterceptorFn<T> = (\r\n  request: SseRequest,\r\n  next: SseNextFn<T>\r\n) => Observable<T>;\r\n\r\n/**\r\n * Class-based interceptor interface for SSE requests.\r\n * Implements the same pattern as Angular's HttpInterceptor.\r\n */\r\nexport interface SseInterceptor<T = unknown> {\r\n  sseIntercept<U = T>(...args: Parameters<SseInterceptorFn<U>>): ReturnType<SseInterceptorFn<U>>;\r\n}\r\n\r\n/**\r\n * Injection token for providing SSE interceptors.\r\n * Use with multi: true to provide multiple interceptors.\r\n */\r\nexport const SSE_INTERCEPTORS = new InjectionToken<SseInterceptor<unknown>[]>('Telperion/SSE_INTERCEPTORS');\r\n","import { inject, Injectable } from \"@angular/core\";\r\nimport { Observable } from \"rxjs\";\r\n\r\nimport { SSE_INTERCEPTORS, SseRequest } from \"./interceptor\";\r\n\r\n/**\r\n * Angular service for managing Server-Sent Events (SSE) connections.\r\n * Wraps the EventSource API with RxJS Observables and an HttpClient-inspired interceptor chain.\r\n *\r\n * @example\r\n * ```typescript\r\n * class MyComponent {\r\n *   private sseClient = inject(SseClient);\r\n *\r\n *   messages$ = this.sseClient.start<string>('/api/events');\r\n * }\r\n * ```\r\n */\r\n@Injectable()\r\nexport class SseClient {\r\n  #interceptors = inject(SSE_INTERCEPTORS, { optional: true }) ?? [];\r\n\r\n  constructor() {\r\n    if (!(this.#interceptors instanceof Array)) {\r\n      throw new Error('SSE_INTERCEPTORS must be provided as an array. Please ensure you are using multi: true when providing interceptors.');\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Starts a new Server-Sent Events connection and returns an Observable stream.\r\n   *\r\n   * @param url - The URL endpoint for the SSE connection\r\n   * @param init - Optional EventSource initialization configuration\r\n   * @returns Observable stream of server-sent events\r\n   *\r\n   * @example\r\n   * ```typescript\r\n   * this.sseClient.start<MessageData>('/api/notifications', { withCredentials: true })\r\n   *   .subscribe(data => console.log('Received:', data));\r\n   * ```\r\n   */\r\n  start<T>(url: string, init: EventSourceInit = {}): Observable<T> {\r\n    return this.#interceptors.reduceRight(\r\n      (next, interceptor) => (req) => interceptor.sseIntercept(req, next),\r\n      (req: SseRequest) => this.#createEventSource(req) as Observable<T>\r\n    )({ url, init });\r\n  }\r\n\r\n  #createEventSource<T>(request: SseRequest): Observable<T> {\r\n    return new Observable<T>((subscriber) => {\r\n      const eventSource = new EventSource(request.url, request.init);\r\n\r\n      function handleMessage(event: MessageEvent) {\r\n        subscriber.next(event.data);\r\n      }\r\n\r\n      function handleError(err: Event) {\r\n        subscriber.error(err);\r\n        eventSource.close();\r\n      }\r\n\r\n      eventSource.addEventListener('message', handleMessage);\r\n      eventSource.addEventListener('error', handleError);\r\n\r\n      return () => {\r\n        eventSource.removeEventListener('message', handleMessage);\r\n        eventSource.removeEventListener('error', handleError);\r\n        eventSource.close();\r\n      };\r\n    });\r\n  }\r\n}\r\n","import { Provider } from \"@angular/core\";\r\n\r\nimport { SseClient } from \"./client\";\r\nimport { SseFeature, SseFeatureKind, SseInterceptorFunctionFeature } from \"./features\";\r\nimport { SSE_INTERCEPTORS } from \"./interceptor\";\r\n\r\n/**\r\n * Provides the SseClient service with optional features.\r\n * Configure SSE client with interceptors and other features using a functional API.\r\n *\r\n * @param features - Optional feature configurations (e.g., withSseInterceptors())\r\n * @returns Array of Angular providers\r\n *\r\n * @example\r\n * ```typescript\r\n * import { provideSseClient, withSseInterceptors } from '@telperion/ng-pack/sse-client';\r\n *\r\n * export const appConfig: ApplicationConfig = {\r\n *   providers: [\r\n *     provideSseClient(\r\n *       withSseInterceptors(loggingInterceptor, authInterceptor)\r\n *     )\r\n *   ]\r\n * };\r\n * ```\r\n */\r\nexport function provideSseClient(...features: SseFeature[][]): Provider[] {\r\n  const interceptorFns = features\r\n    .flat()\r\n    .filter(feature => feature.kind === SseFeatureKind.InterceptorFunction)\r\n    .map(feature => ({\r\n      provide: SSE_INTERCEPTORS,\r\n      useValue: {\r\n        sseIntercept: (feature as SseInterceptorFunctionFeature).interceptor,\r\n      },\r\n      multi: true,\r\n    }));\r\n\r\n  return [\r\n    {\r\n      provide: SseClient,\r\n      useClass: SseClient\r\n    },\r\n    ...interceptorFns\r\n  ];\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,29 @@
 {
   "name": "@telperion/ng-pack",
-  "version": "1.2.2",
+  "version": "1.3.1",
+  "description": "Collection of Angular utilities and libraries organized as secondary entry points. Includes signal-based storage (localStorage/sessionStorage), SSE client with HttpClient-inspired interceptors, event modifier plugins, and more. Built with TypeScript, RxJS, and Angular Signals for modern Angular applications.",
+  "keywords": [
+    "angular",
+    "angular-signals",
+    "rxjs",
+    "sse",
+    "server-sent-events",
+    "eventsource",
+    "localstorage",
+    "sessionstorage",
+    "storage",
+    "signals",
+    "interceptors",
+    "event-modifiers",
+    "utilities",
+    "typescript",
+    "reactive",
+    "real-time",
+    "httpclient",
+    "secondary-entrypoint",
+    "angular-utilities",
+    "event-manager"
+  ],
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",
@@ -40,6 +63,10 @@
       "types": "./types/telperion-ng-pack.d.ts",
       "default": "./fesm2022/telperion-ng-pack.mjs"
     },
+    "./sse-client": {
+      "types": "./types/telperion-ng-pack-sse-client.d.ts",
+      "default": "./fesm2022/telperion-ng-pack-sse-client.mjs"
+    },
     "./storage-signals": {
       "types": "./types/telperion-ng-pack-storage-signals.d.ts",
       "default": "./fesm2022/telperion-ng-pack-storage-signals.mjs"

package/sse-client/README.md

@@ -0,0 +1,719 @@
+# @telperion/ng-pack/sse-client
+
+Angular service for Server-Sent Events (SSE) with RxJS Observables and HttpClient-inspired interceptors.
+
+## Features
+
+- 🚀 **Observable-based API** - Seamlessly integrate with RxJS ecosystem
+- 🔗 **HttpClient-inspired interceptors** - Functional and class-based interceptors (shareable with HttpClient)
+- 🎯 **Type-safe** - Full TypeScript support with generic typing
+- ⚡ **EventSource wrapper** - Clean abstraction over native EventSource API
+- 🔄 **Reactive streaming** - Real-time data updates with automatic cleanup
+- 🎨 **Feature-based configuration** - Extensible architecture following modern Angular patterns
+- 🧹 **Automatic cleanup** - Proper resource management on unsubscribe
+
+## Installation
+
+This is a secondary entry point of `@telperion/ng-pack`. Import from `@telperion/ng-pack/sse-client`.
+
+```bash
+npm install @telperion/ng-pack
+```
+
+## Setup
+
+Configure the SSE client in your application config:
+
+```typescript
+import { ApplicationConfig } from '@angular/core';
+import { provideSseClient } from '@telperion/ng-pack/sse-client';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideSseClient(),
+    // ... other providers
+  ]
+};
+```
+
+## Usage
+
+### Basic Usage
+
+Create a component that connects to an SSE endpoint and displays real-time data:
+
+```typescript
+import { Component, inject } from '@angular/core';
+import { SseClient } from '@telperion/ng-pack/sse-client';
+import { AsyncPipe } from '@angular/common';
+
+interface StockUpdate {
+  symbol: string;
+  price: number;
+  change: number;
+}
+
+@Component({
+  selector: 'app-stock-ticker',
+  template: `
+    <div class="stock-ticker">
+      <h2>Live Stock Prices</h2>
+      @if (stockUpdates$ | async; as update) {
+        <div class="stock-card">
+          <span class="symbol">{{ update.symbol }}</span>
+          <span class="price">\${{ update.price }}</span>
+          <span [class.positive]="update.change > 0" [class.negative]="update.change < 0">
+            {{ update.change > 0 ? '+' : '' }}{{ update.change }}%
+          </span>
+        </div>
+      }
+    </div>
+  `,
+  standalone: true,
+  imports: [AsyncPipe]
+})
+export class StockTickerComponent {
+  private sseClient = inject(SseClient);
+
+  // Start SSE connection and get Observable stream
+  stockUpdates$ = this.sseClient.start<StockUpdate>('/api/stocks/stream');
+}
+```
+
+### Using Interceptors
+
+Interceptors allow you to modify requests, add logging, handle authentication, or implement retry logic. They work just like Angular's HttpClient interceptors.
+
+#### Logging Interceptor
+
+```typescript
+import { SseInterceptorFn } from '@telperion/ng-pack/sse-client';
+import { tap } from 'rxjs/operators';
+
+export const loggingInterceptor: SseInterceptorFn<any> = (req, next) => {
+  console.log('[SSE] Connecting to:', req.url);
+  
+  return next(req).pipe(
+    tap({
+      next: data => console.log('[SSE] Received:', data),
+      error: err => console.error('[SSE] Error:', err),
+      complete: () => console.log('[SSE] Connection closed')
+    })
+  );
+};
+```
+
+#### Authentication Interceptor
+
+```typescript
+import { SseInterceptorFn } from '@telperion/ng-pack/sse-client';
+
+export const authInterceptor: SseInterceptorFn<any> = (req, next) => {
+  // Add authentication token to URL or modify request
+  const token = localStorage.getItem('auth_token');
+  const authenticatedUrl = `${req.url}?token=${token}`;
+  
+  return next({
+    ...req,
+    url: authenticatedUrl
+  });
+};
+```
+
+#### Retry Interceptor
+
+```typescript
+import { SseInterceptorFn } from '@telperion/ng-pack/sse-client';
+import { retry, timer } from 'rxjs';
+
+export const retryInterceptor: SseInterceptorFn<any> = (req, next) => {
+  return next(req).pipe(
+    retry({
+      count: 3,
+      delay: (error, retryCount) => {
+        console.log(`[SSE] Retry attempt ${retryCount} after error:`, error);
+        return timer(1000 * retryCount); // Exponential backoff
+      }
+    })
+  );
+};
+```
+
+#### Configuring Interceptors
+
+Provide interceptors using the `withSseInterceptors()` feature function:
+
+```typescript
+import { ApplicationConfig } from '@angular/core';
+import { provideSseClient, withSseInterceptors } from '@telperion/ng-pack/sse-client';
+import { loggingInterceptor, authInterceptor, retryInterceptor } from './interceptors';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideSseClient(
+      withSseInterceptors(
+        loggingInterceptor,
+        authInterceptor,
+        retryInterceptor
+      )
+    )
+  ]
+};
+```
+
+**Interceptor execution order:** Interceptors are executed in the order they are provided. In the example above, the chain is: logging → auth → retry → EventSource connection.
+
+#### Class-based Interceptors
+
+For more complex scenarios, you can create class-based interceptors and provide them directly using the `SSE_INTERCEPTORS` token. This is particularly useful when you need dependency injection or want to share logic between HTTP and SSE interceptors.
+
+**Using SSE_INTERCEPTORS token:**
+
+```typescript
+import { Injectable } from '@angular/core';
+import { SseInterceptor, SseRequest, SseNextFn, SSE_INTERCEPTORS } from '@telperion/ng-pack/sse-client';
+import { Observable } from 'rxjs';
+
+@Injectable()
+export class ApiUrlInterceptor implements SseInterceptor<unknown> {
+  sseIntercept<T = unknown>(request: SseRequest, next: SseNextFn<T>): Observable<T> {
+    const url = request.url.replace(/^@/, 'https://api.example.com');
+    return next({ ...request, url });
+  }
+}
+
+// Provide directly using the token
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideSseClient(),
+    { provide: SSE_INTERCEPTORS, useClass: ApiUrlInterceptor, multi: true }
+  ]
+};
+```
+
+**Unified HTTP and SSE Interceptor:**
+
+You can create a single interceptor class that handles both HTTP and SSE requests, allowing you to share authentication, URL rewriting, or other common logic:
+
+```typescript
+import { Injectable } from '@angular/core';
+import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { SseInterceptor, SseRequest, SseNextFn, SSE_INTERCEPTORS } from '@telperion/ng-pack/sse-client';
+import { localStorageSignal } from '@telperion/ng-pack/storage-signals';
+import { Observable } from 'rxjs';
+
+@Injectable()
+export class BaseApiInterceptor implements HttpInterceptor, SseInterceptor<unknown> {
+
+  // Handle HTTP requests
+  intercept(req: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
+    return next.handle(req.clone({ url: this.#replaceUrl(req.url) }));
+  }
+
+  // Handle SSE requests
+  sseIntercept<T = unknown>(request: SseRequest, next: SseNextFn<T>): Observable<T> {
+    return next({ ...request, url: this.replaceUrl(request.url)});
+  }
+
+  #replaceUrl(url: string): string {
+    return `https://my-api.domain.com/${url}`;
+  }
+}
+
+// Register for both HTTP and SSE
+export const appConfig: ApplicationConfig = {
+  providers: [
+    // Provide the same interceptor for both HTTP and SSE
+    { provide: HTTP_INTERCEPTORS, useClass: BaseApiInterceptor, multi: true },
+    { provide: SSE_INTERCEPTORS, useClass: BaseApiInterceptor, multi: true },
+    
+    provideHttpClient(withFetch(), withInterceptorsFromDi()),
+    provideSseClient(),
+  ]
+};
+```
+
+This pattern is especially useful when you want to:
+- Share authentication logic between HTTP and SSE
+- Apply consistent URL transformations
+- Reuse common error handling
+- Maintain a single source of truth for API configuration
+
+**Note:** You can combine both approaches - use the `SSE_INTERCEPTORS` token for class-based interceptors and `withSseInterceptors()` for functional interceptors. Class-based interceptors provided via the token will execute before functional interceptors provided via `withSseInterceptors()`.
+
+### Advanced Usage
+
+#### Real-time Notifications
+
+```typescript
+import { Component, inject } from '@angular/core';
+import { SseClient } from '@telperion/ng-pack/sse-client';
+import { AsyncPipe } from '@angular/common';
+
+interface Notification {
+  id: string;
+  message: string;
+  type: 'info' | 'warning' | 'error';
+  timestamp: number;
+}
+
+@Component({
+  selector: 'app-notifications',
+  template: `
+    <div class="notifications">
+      @for (notification of notifications$ | async; track notification.id) {
+        <div [class]="'notification ' + notification.type">
+          <span class="message">{{ notification.message }}</span>
+          <span class="time">{{ notification.timestamp | date:'short' }}</span>
+        </div>
+      }
+    </div>
+  `,
+  standalone: true,
+  imports: [AsyncPipe]
+})
+export class NotificationsComponent {
+  private sseClient = inject(SseClient);
+  
+  notifications$ = this.sseClient.start<Notification>('/api/notifications/stream');
+}
+```
+
+#### Managing Subscriptions
+
+Always unsubscribe from SSE connections when they're no longer needed:
+
+```typescript
+import { Component, inject, OnDestroy } from '@angular/core';
+import { SseClient } from '@telperion/ng-pack/sse-client';
+import { Subscription } from 'rxjs';
+
+@Component({
+  selector: 'app-dashboard',
+  template: `
+    <div>
+      <h2>Dashboard</h2>
+      <p>Active users: {{ activeUsers }}</p>
+    </div>
+  `
+})
+export class DashboardComponent implements OnDestroy {
+  private sseClient = inject(SseClient);
+  private subscription?: Subscription;
+  
+  activeUsers = 0;
+
+  ngOnInit() {
+    // Subscribe manually for more control
+    this.subscription = this.sseClient
+      .start<{ count: number }>('/api/dashboard/active-users')
+      .subscribe({
+        next: data => this.activeUsers = data.count,
+        error: err => console.error('SSE error:', err)
+      });
+  }
+
+  ngOnDestroy() {
+    // Clean up subscription and close EventSource
+    this.subscription?.unsubscribe();
+  }
+}
+```
+
+**Best practice:** Use the `AsyncPipe` when possible to automatically handle subscription management.
+
+#### Error Handling
+
+```typescript
+import { Component, inject } from '@angular/core';
+import { SseClient } from '@telperion/ng-pack/sse-client';
+import { catchError, of } from 'rxjs';
+
+@Component({
+  selector: 'app-feed',
+  template: `
+    <div>
+      @if (error) {
+        <div class="error">{{ error }}</div>
+      } @else {
+        <div>{{ data$ | async }}</div>
+      }
+    </div>
+  `
+})
+export class FeedComponent {
+  private sseClient = inject(SseClient);
+  error?: string;
+
+  data$ = this.sseClient.start('/api/feed').pipe(
+    catchError(err => {
+      this.error = 'Failed to connect to live feed';
+      console.error('SSE connection error:', err);
+      return of(null);
+    })
+  );
+}
+```
+
+#### Custom EventSource Configuration
+
+Pass EventSource initialization options to configure credentials, CORS, etc.:
+
+```typescript
+@Component({
+  selector: 'app-secure-feed',
+  template: `<div>{{ data$ | async }}</div>`
+})
+export class SecureFeedComponent {
+  private sseClient = inject(SseClient);
+
+  data$ = this.sseClient.start('/api/secure/feed', {
+    withCredentials: true // Send cookies with the request
+  });
+}
+```
+
+## API Reference
+
+### `provideSseClient(...features: SseFeature[][]): Provider[]`
+
+Provides the SSE client service with optional feature configurations.
+
+**Parameters:**
+- `features` (optional) - Feature configurations such as `withSseInterceptors()`
+
+**Returns:** Array of Angular providers
+
+**Example:**
+```typescript
+provideSseClient(
+  withSseInterceptors(loggingInterceptor, authInterceptor)
+)
+```
+
+---
+
+### `SseClient`
+
+Injectable service for managing SSE connections.
+
+#### `start<T>(url: string, init?: EventSourceInit): Observable<T>`
+
+Starts a new Server-Sent Events connection and returns an Observable stream.
+
+**Parameters:**
+- `url` - The endpoint URL for the SSE connection
+- `init` (optional) - EventSource initialization options (e.g., `{ withCredentials: true }`)
+
+**Returns:** Observable stream of typed server-sent events
+
+**Example:**
+```typescript
+sseClient.start<MessageData>('/api/events', { withCredentials: true })
+  .subscribe(data => console.log('Received:', data));
+```
+
+---
+
+### `withSseInterceptors(...interceptors: SseInterceptorFn<T>[]): SseFeature[]`
+
+Configures functional interceptors for the SSE client.
+
+**Parameters:**
+- `interceptors` - One or more functional interceptor functions
+
+**Returns:** Array of SSE features to be used with `provideSseClient()`
+
+**Example:**
+```typescript
+withSseInterceptors(
+  loggingInterceptor,
+  authInterceptor,
+  retryInterceptor
+)
+```
+
+---
+
+### `SseInterceptorFn<T>`
+
+Type definition for functional interceptors.
+
+```typescript
+type SseInterceptorFn<T> = (
+  request: SseRequest,
+  next: SseNextFn<T>
+) => Observable<T>;
+```
+
+**Parameters:**
+- `request` - The SSE request containing `url` and `init`
+- `next` - Function to call the next interceptor in the chain
+
+**Returns:** Observable of the intercepted request
+
+---
+
+### `SseRequest`
+
+Interface representing an SSE request.
+
+```typescript
+interface SseRequest {
+  url: string;
+  init: EventSourceInit;
+}
+```
+
+---
+
+### `SseInterceptor<T>`
+
+Class-based interceptor interface (for advanced use cases).
+
+```typescript
+interface SseInterceptor<T = unknown> {
+  sseIntercept<U = T>(
+    request: SseRequest,
+    next: SseNextFn<U>
+  ): Observable<U>;
+}
+```
+
+**Example:**
+```typescript
+@Injectable()
+class MyInterceptor implements SseInterceptor<unknown> {
+  sseIntercept<T>(request: SseRequest, next: SseNextFn<T>): Observable<T> {
+    console.log('Intercepting:', request.url);
+    return next(request);
+  }
+}
+```
+
+---
+
+### `SSE_INTERCEPTORS`
+
+Injection token for providing class-based SSE interceptors directly.
+
+```typescript
+const SSE_INTERCEPTORS: InjectionToken<SseInterceptor<unknown>[]>
+```
+
+**Usage:**
+```typescript
+import { SSE_INTERCEPTORS } from '@telperion/ng-pack/sse-client';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideSseClient(),
+    { provide: SSE_INTERCEPTORS, useClass: MyInterceptor, multi: true }
+  ]
+};
+```
+
+**Note:** This token allows you to provide class-based interceptors that can leverage dependency injection. It's particularly useful for creating interceptors that implement both `HttpInterceptor` and `SseInterceptor` to share logic between HTTP and SSE requests.
+
+## Best Practices
+
+### 1. Always Unsubscribe
+
+Use the `AsyncPipe` or manually unsubscribe to prevent memory leaks and close connections:
+
+```typescript
+// ✅ Good - using AsyncPipe (automatic cleanup)
+data$ = this.sseClient.start('/api/feed');
+
+// ✅ Good - manual subscription with cleanup
+ngOnInit() {
+  this.subscription = this.sseClient.start('/api/feed').subscribe(...);
+}
+
+ngOnDestroy() {
+  this.subscription?.unsubscribe();
+}
+
+// ❌ Bad - no cleanup
+ngOnInit() {
+  this.sseClient.start('/api/feed').subscribe(...);
+}
+```
+
+### 2. Handle Errors Gracefully
+
+Always implement error handling for SSE connections:
+
+```typescript
+data$ = this.sseClient.start('/api/feed').pipe(
+  catchError(err => {
+    console.error('SSE error:', err);
+    // Return fallback value or retry
+    return of(null);
+  })
+);
+```
+
+### 3. Use Type Safety
+
+Leverage TypeScript generics for type-safe event data:
+
+```typescript
+// ✅ Good - typed
+interface StockUpdate {
+  symbol: string;
+  price: number;
+}
+data$ = this.sseClient.start<StockUpdate>('/api/stocks');
+
+// ❌ Bad - untyped
+data$ = this.sseClient.start('/api/stocks');
+```
+
+### 4. Interceptor Order Matters
+
+Place interceptors in logical order. Generally: logging → authentication → error handling → retry:
+
+```typescript
+provideSseClient(
+  withSseInterceptors(
+    loggingInterceptor,    // First: log everything
+    authInterceptor,       // Second: add auth
+    errorHandlerInterceptor, // Third: handle errors
+    retryInterceptor       // Last: retry failed connections
+  )
+)
+```
+
+### 5. Consider Reconnection Strategies
+
+For production applications, implement retry logic with exponential backoff:
+
+```typescript
+const retryInterceptor: SseInterceptorFn<any> = (req, next) => {
+  return next(req).pipe(
+    retry({
+      count: 5,
+      delay: (error, retryCount) => timer(Math.min(1000 * Math.pow(2, retryCount), 30000))
+    })
+  );
+};
+```
+
+### 6. Use Environment-Specific Configuration
+
+Configure different interceptors for development and production:
+
+```typescript
+// app.config.ts
+const interceptors = environment.production
+  ? [authInterceptor, retryInterceptor]
+  : [loggingInterceptor, authInterceptor, retryInterceptor];
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideSseClient(withSseInterceptors(...interceptors))
+  ]
+};
+```
+
+### 7. Share Logic with HTTP Interceptors
+
+When you need the same logic for both HTTP and SSE (auth, URL rewriting, etc.), create a unified interceptor class:
+
+```typescript
+@Injectable()
+class UnifiedInterceptor implements HttpInterceptor, SseInterceptor<unknown> {
+  intercept(req: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
+    // HTTP logic
+  }
+  
+  sseIntercept<T>(request: SseRequest, next: SseNextFn<T>): Observable<T> {
+    // SSE logic (can reuse same helper methods)
+  }
+}
+
+// ✅ Good - shared interceptor for both
+providers: [
+  { provide: HTTP_INTERCEPTORS, useClass: UnifiedInterceptor, multi: true },
+  { provide: SSE_INTERCEPTORS, useClass: UnifiedInterceptor, multi: true },
+]
+
+// ❌ Bad - duplicated logic in separate interceptors
+```
+
+This approach:
+- Reduces code duplication
+- Ensures consistent behavior across HTTP and SSE
+- Makes configuration and API changes easier to manage
+- Allows sharing of injected dependencies
+
+## Common Use Cases
+
+### Real-time Chat
+
+```typescript
+interface ChatMessage {
+  id: string;
+  user: string;
+  message: string;
+  timestamp: number;
+}
+
+messages$ = this.sseClient.start<ChatMessage>('/api/chat/stream');
+```
+
+### Live Dashboard Metrics
+
+```typescript
+interface Metrics {
+  cpu: number;
+  memory: number;
+  activeUsers: number;
+}
+
+metrics$ = this.sseClient.start<Metrics>('/api/dashboard/metrics');
+```
+
+### Stock Price Updates
+
+```typescript
+interface StockPrice {
+  symbol: string;
+  price: number;
+  volume: number;
+}
+
+stocks$ = this.sseClient.start<StockPrice>('/api/stocks/live');
+```
+
+### Server Logs Streaming
+
+```typescript
+interface LogEntry {
+  level: 'info' | 'warn' | 'error';
+  message: string;
+  timestamp: number;
+}
+
+logs$ = this.sseClient.start<LogEntry>('/api/logs/stream');
+```
+
+## Comparison with HttpClient
+
+The SSE client deliberately mirrors Angular's HttpClient pattern:
+
+| Feature | HttpClient | SseClient |
+|---------|------------|-----------|
+| **Return Type** | `Observable` | `Observable` |
+| **Interceptors** | `HttpInterceptor` | `SseInterceptor` |
+| **Provider** | `provideHttpClient()` | `provideSseClient()` |
+| **Features** | `withInterceptors()` | `withSseInterceptors()` |
+| **Connection** | Request/Response | Persistent stream |
+| **Use Case** | REST APIs | Real-time updates |
+
+This familiar pattern makes it easy for Angular developers to adopt SSE for real-time features.
+
+## License
+
+This library is part of the Telperion monorepo.

package/types/telperion-ng-pack-sse-client.d.ts

@@ -0,0 +1,141 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Provider } from '@angular/core';
+import { Observable } from 'rxjs';
+
+/**
+ * Enum identifying different types of SSE features.
+ */
+declare enum SseFeatureKind {
+    InterceptorFunction = 0
+}
+/**
+ * Base interface for SSE feature configurations.
+ */
+interface SseFeature {
+    kind: SseFeatureKind;
+}
+
+/**
+ * Represents an SSE request with URL and initialization options.
+ */
+interface SseRequest {
+    url: string;
+    init: EventSourceInit;
+}
+/**
+ * Function type for passing the request to the next handler in the interceptor chain.
+ */
+type SseNextFn<T> = (request: SseRequest) => Observable<T>;
+/**
+ * Functional interceptor type for intercepting SSE requests.
+ * Interceptors can modify requests, handle errors, add logging, etc.
+ *
+ * @example
+ * ```typescript
+ * const loggingInterceptor: SseInterceptorFn<any> = (req, next) => {
+ *   console.log('SSE Request:', req.url);
+ *   return next(req);
+ * };
+ * ```
+ */
+type SseInterceptorFn<T> = (request: SseRequest, next: SseNextFn<T>) => Observable<T>;
+/**
+ * Class-based interceptor interface for SSE requests.
+ * Implements the same pattern as Angular's HttpInterceptor.
+ */
+interface SseInterceptor<T = unknown> {
+    sseIntercept<U = T>(...args: Parameters<SseInterceptorFn<U>>): ReturnType<SseInterceptorFn<U>>;
+}
+/**
+ * Injection token for providing SSE interceptors.
+ * Use with multi: true to provide multiple interceptors.
+ */
+declare const SSE_INTERCEPTORS: InjectionToken<SseInterceptor<unknown>[]>;
+
+/**
+ * Feature interface for functional interceptors.
+ * @internal
+ */
+interface SseInterceptorFunctionFeature extends SseFeature {
+    kind: SseFeatureKind.InterceptorFunction;
+    interceptor: SseInterceptorFn<unknown>;
+}
+/**
+ * Configures functional interceptors for the SSE client.
+ * Interceptors are executed in the order they are provided.
+ *
+ * @param interceptors - One or more functional interceptor functions
+ * @returns Array of SSE features to be used with provideSseClient()
+ *
+ * @example
+ * ```typescript
+ * const loggingInterceptor: SseInterceptorFn<any> = (req, next) => {
+ *   console.log('Connecting to:', req.url);
+ *   return next(req);
+ * };
+ *
+ * provideSseClient(
+ *   withSseInterceptors(loggingInterceptor)
+ * )
+ * ```
+ */
+declare function withSseInterceptors<T = unknown>(...interceptors: SseInterceptorFn<T>[]): SseFeature[];
+
+/**
+ * Angular service for managing Server-Sent Events (SSE) connections.
+ * Wraps the EventSource API with RxJS Observables and an HttpClient-inspired interceptor chain.
+ *
+ * @example
+ * ```typescript
+ * class MyComponent {
+ *   private sseClient = inject(SseClient);
+ *
+ *   messages$ = this.sseClient.start<string>('/api/events');
+ * }
+ * ```
+ */
+declare class SseClient {
+    #private;
+    constructor();
+    /**
+     * Starts a new Server-Sent Events connection and returns an Observable stream.
+     *
+     * @param url - The URL endpoint for the SSE connection
+     * @param init - Optional EventSource initialization configuration
+     * @returns Observable stream of server-sent events
+     *
+     * @example
+     * ```typescript
+     * this.sseClient.start<MessageData>('/api/notifications', { withCredentials: true })
+     *   .subscribe(data => console.log('Received:', data));
+     * ```
+     */
+    start<T>(url: string, init?: EventSourceInit): Observable<T>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SseClient, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SseClient>;
+}
+
+/**
+ * Provides the SseClient service with optional features.
+ * Configure SSE client with interceptors and other features using a functional API.
+ *
+ * @param features - Optional feature configurations (e.g., withSseInterceptors())
+ * @returns Array of Angular providers
+ *
+ * @example
+ * ```typescript
+ * import { provideSseClient, withSseInterceptors } from '@telperion/ng-pack/sse-client';
+ *
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideSseClient(
+ *       withSseInterceptors(loggingInterceptor, authInterceptor)
+ *     )
+ *   ]
+ * };
+ * ```
+ */
+declare function provideSseClient(...features: SseFeature[][]): Provider[];
+
+export { SSE_INTERCEPTORS, SseClient, SseFeatureKind, provideSseClient, withSseInterceptors };
+export type { SseFeature, SseInterceptor, SseInterceptorFn, SseInterceptorFunctionFeature, SseNextFn, SseRequest };