@telperion/ng-pack 1.2.1 → 1.3.0

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 →](./sse-client/README.md)
+
+---
+
 ### 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/fesm2022/telperion-ng-pack-utils.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"telperion-ng-pack-utils.mjs","sources":["../../utils/src/provide-service-directive.ts","../../utils/src/event-modifiers.plugin.ts","../../utils/src/construct-fetcher.ts","../../utils/src/telperion-ng-pack-utils.ts"],"sourcesContent":["import { forwardRef, InjectionToken, Provider, Type } from \"@angular/core\";\r\n\r\n/**\r\n * Utility function to create a provider for a directive/component that can be injected as a service.\r\n * This is useful for cases where you want to inject a directive/component instance into another directive/component.\r\n *\r\n * Example usage:\r\n *\r\n * files:\r\n * - parent.directive.ts\r\n * - child.directive.ts\r\n * - parent.service.ts\r\n *\r\n * parent.service.ts:\r\n * ```\r\n * import { InjectionToken } from \"@angular/core\";\r\n * import type { ParentDirective } from \"./parent.directive\";\r\n *\r\n * export const ParentService = new InjectionToken<ParentDirective>(\"ParentService\");\r\n * ```\r\n *\r\n * parent.directive.ts:\r\n * ```\r\n * @Directive({\r\n *   selector: 'parent',\r\n *   providers: [provideServiceDirective(ParentService, ParentDirective)],\r\n * })\r\n * export class ParentDirective {...}\r\n * ```\r\n * child.directive.ts:\r\n * ```\r\n * @Directive({\r\n *   selector: 'child',\r\n * })\r\n * export class ChildDirective {\r\n *   #parent = inject(ParentService);\r\n * }\r\n * ```\r\n *\r\n * @param token - The injection token to provide.\r\n * @param directive - The directive/component class that will be provided.\r\n * @returns A provider object that can be used in the providers array of an Angular module or component.\r\n */\r\nexport function provideServiceDirective<T extends Type<unknown>>(\r\n  token: InjectionToken<T>,\r\n  directive: T\r\n): Provider {\r\n  return {\r\n    provide: token,\r\n    useExisting: forwardRef(() => directive)\r\n  }\r\n}\r\n","/**\r\n * Angular Event Manager Plugin that enables event modifier syntax in templates.\r\n *\r\n * @example\r\n * ```html\r\n * <form (submit.pd)=\"onSubmit()\">...</form>\r\n * <div (click.sp)=\"handleClick()\">...</div>\r\n * <button (click.pd.sp)=\"handleButtonClick()\">Click me</button>\r\n * ```\r\n */\r\n\r\nimport { DOCUMENT } from '@angular/common';\r\nimport { Inject, Injectable, Provider } from '@angular/core';\r\nimport { EVENT_MANAGER_PLUGINS, EventManagerPlugin } from '@angular/platform-browser';\r\n\r\n/**\r\n * Event Manager Plugin that adds support for event modifiers.\r\n * @internal\r\n */\r\n@Injectable()\r\nexport class EventModifiersPlugin extends EventManagerPlugin {\r\n  /**\r\n   * Supported modifiers: `pd` (preventDefault), `sp` (stopPropagation)\r\n   */\r\n  private static modifierMap: { [key: string]: (e: Event) => void } = {\r\n    'pd': (e: Event) => e.preventDefault(),\r\n    'sp': (e: Event) => e.stopPropagation(),\r\n  };\r\n\r\n  constructor(@Inject(DOCUMENT) doc: Document) {\r\n    super(doc);\r\n  }\r\n\r\n  supports(eventName: string): boolean {\r\n    return eventName.includes('.') &&\r\n      eventName.split('.').some(part => part in EventModifiersPlugin.modifierMap);\r\n  }\r\n\r\n  addEventListener(element: HTMLElement, eventName: string, handler: (event: Event) => void): () => void {\r\n    const parts = eventName.split('.');\r\n    const domEventName = parts[0];\r\n    const modifiers = parts.slice(1).filter(m => m in EventModifiersPlugin.modifierMap);\r\n\r\n    const wrappedHandler = (event: Event) => {\r\n      modifiers.forEach(mod => EventModifiersPlugin.modifierMap[mod](event));\r\n\r\n      return handler(event);\r\n    };\r\n\r\n    element.addEventListener(domEventName, wrappedHandler);\r\n\r\n    return () => element.removeEventListener(domEventName, wrappedHandler);\r\n  }\r\n}\r\n\r\n/**\r\n * Provides the Event Modifiers Plugin.\r\n *\r\n * @example\r\n * ```typescript\r\n * bootstrapApplication(AppComponent, {\r\n *   providers: [provideEventModifiersPlugin()]\r\n * });\r\n * ```\r\n */\r\nexport function provideEventModifiersPlugin(): Provider {\r\n  return {\r\n    provide: EVENT_MANAGER_PLUGINS,\r\n    useClass: EventModifiersPlugin,\r\n    multi: true\r\n  };\r\n}\r\n","import { HttpClient } from \"@angular/common/http\";\nimport { inject } from \"@angular/core\";\nimport { AnyFunction } from '@thalesrc/extra-ts-types';\nimport { tryCatch } from \"@thalesrc/js-utils/promise/try-catch\";\nimport { firstValueFrom, Observable } from 'rxjs';\n\nexport type Fetcher = {\n  [P in keyof HttpClient]: HttpClient[P] extends (...args: infer A) => Observable<unknown> ? <T>(...args: A) => Promise<[unknown, T]> : never;\n}\n\n/**\n * Constructs a Fetcher that proxies HttpClient methods and returns a tuple of [error, response].\n * If the HttpClient method throws an error, it will be caught and returned as the first element of the tuple.\n * If the HttpClient method succeeds, the response will be returned as the second element of the tuple.\n * Example usage:\n * ```\n * @Component({\n *   selector: 'app-example',\n *   template: `<button (click)=\"fetchData()\">Fetch Data</button>`,\n * })\n * export class ExampleComponent {\n *   private fetcher = constructFetcher();\n *\n *   async fetchData() {\n *    const [error, response] = await this.fetcher.get('/api/data');\n *\n*     if (error) {\n*       console.error('Error fetching data:', error);\n*     } else {\n*       console.log('Fetched data:', response);\n*     }\n *   }\n * }\n * ```\n */\nexport function constructFetcher() {\n  const client = inject(HttpClient);\n\n  return new Proxy({} as Fetcher, {\n    get(target, prop) {\n      if (prop in client) {\n        return (...args: any[]) => {\n          const method = (client as any)[prop] as AnyFunction;\n\n          return tryCatch(firstValueFrom(method.apply(client, args)));\n        }\n      }\n\n      throw new Error(`HttpClient does not have method ${String(prop)}`);\n    }\n  });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"telperion-ng-pack-utils.mjs","sources":["../../utils/src/provide-service-directive.ts","../../utils/src/event-modifiers.plugin.ts","../../utils/src/construct-fetcher.ts","../../utils/src/telperion-ng-pack-utils.ts"],"sourcesContent":["import { forwardRef, InjectionToken, Provider, Type } from \"@angular/core\";\r\n\r\n/**\r\n * Utility function to create a provider for a directive/component that can be injected as a service.\r\n * This is useful for cases where you want to inject a directive/component instance into another directive/component.\r\n *\r\n * Example usage:\r\n *\r\n * files:\r\n * - parent.directive.ts\r\n * - child.directive.ts\r\n * - parent.service.ts\r\n *\r\n * parent.service.ts:\r\n * ```\r\n * import { InjectionToken } from \"@angular/core\";\r\n * import type { ParentDirective } from \"./parent.directive\";\r\n *\r\n * export const ParentService = new InjectionToken<ParentDirective>(\"ParentService\");\r\n * ```\r\n *\r\n * parent.directive.ts:\r\n * ```\r\n * @Directive({\r\n *   selector: 'parent',\r\n *   providers: [provideServiceDirective(ParentService, ParentDirective)],\r\n * })\r\n * export class ParentDirective {...}\r\n * ```\r\n * child.directive.ts:\r\n * ```\r\n * @Directive({\r\n *   selector: 'child',\r\n * })\r\n * export class ChildDirective {\r\n *   #parent = inject(ParentService);\r\n * }\r\n * ```\r\n *\r\n * @param token - The injection token to provide.\r\n * @param directive - The directive/component class that will be provided.\r\n * @returns A provider object that can be used in the providers array of an Angular module or component.\r\n */\r\nexport function provideServiceDirective<T>(\r\n  token: InjectionToken<T>,\r\n  directive: Type<NoInfer<T>>\r\n): Provider {\r\n  return {\r\n    provide: token,\r\n    useExisting: forwardRef(() => directive)\r\n  }\r\n}\r\n","/**\r\n * Angular Event Manager Plugin that enables event modifier syntax in templates.\r\n *\r\n * @example\r\n * ```html\r\n * <form (submit.pd)=\"onSubmit()\">...</form>\r\n * <div (click.sp)=\"handleClick()\">...</div>\r\n * <button (click.pd.sp)=\"handleButtonClick()\">Click me</button>\r\n * ```\r\n */\r\n\r\nimport { DOCUMENT } from '@angular/common';\r\nimport { Inject, Injectable, Provider } from '@angular/core';\r\nimport { EVENT_MANAGER_PLUGINS, EventManagerPlugin } from '@angular/platform-browser';\r\n\r\n/**\r\n * Event Manager Plugin that adds support for event modifiers.\r\n * @internal\r\n */\r\n@Injectable()\r\nexport class EventModifiersPlugin extends EventManagerPlugin {\r\n  /**\r\n   * Supported modifiers: `pd` (preventDefault), `sp` (stopPropagation)\r\n   */\r\n  private static modifierMap: { [key: string]: (e: Event) => void } = {\r\n    'pd': (e: Event) => e.preventDefault(),\r\n    'sp': (e: Event) => e.stopPropagation(),\r\n  };\r\n\r\n  constructor(@Inject(DOCUMENT) doc: Document) {\r\n    super(doc);\r\n  }\r\n\r\n  supports(eventName: string): boolean {\r\n    return eventName.includes('.') &&\r\n      eventName.split('.').some(part => part in EventModifiersPlugin.modifierMap);\r\n  }\r\n\r\n  addEventListener(element: HTMLElement, eventName: string, handler: (event: Event) => void): () => void {\r\n    const parts = eventName.split('.');\r\n    const domEventName = parts[0];\r\n    const modifiers = parts.slice(1).filter(m => m in EventModifiersPlugin.modifierMap);\r\n\r\n    const wrappedHandler = (event: Event) => {\r\n      modifiers.forEach(mod => EventModifiersPlugin.modifierMap[mod](event));\r\n\r\n      return handler(event);\r\n    };\r\n\r\n    element.addEventListener(domEventName, wrappedHandler);\r\n\r\n    return () => element.removeEventListener(domEventName, wrappedHandler);\r\n  }\r\n}\r\n\r\n/**\r\n * Provides the Event Modifiers Plugin.\r\n *\r\n * @example\r\n * ```typescript\r\n * bootstrapApplication(AppComponent, {\r\n *   providers: [provideEventModifiersPlugin()]\r\n * });\r\n * ```\r\n */\r\nexport function provideEventModifiersPlugin(): Provider {\r\n  return {\r\n    provide: EVENT_MANAGER_PLUGINS,\r\n    useClass: EventModifiersPlugin,\r\n    multi: true\r\n  };\r\n}\r\n","import { HttpClient } from \"@angular/common/http\";\nimport { inject } from \"@angular/core\";\nimport { AnyFunction } from '@thalesrc/extra-ts-types';\nimport { tryCatch } from \"@thalesrc/js-utils/promise/try-catch\";\nimport { firstValueFrom, Observable } from 'rxjs';\n\nexport type Fetcher = {\n  [P in keyof HttpClient]: HttpClient[P] extends (...args: infer A) => Observable<unknown> ? <T>(...args: A) => Promise<[unknown, T]> : never;\n}\n\n/**\n * Constructs a Fetcher that proxies HttpClient methods and returns a tuple of [error, response].\n * If the HttpClient method throws an error, it will be caught and returned as the first element of the tuple.\n * If the HttpClient method succeeds, the response will be returned as the second element of the tuple.\n * Example usage:\n * ```\n * @Component({\n *   selector: 'app-example',\n *   template: `<button (click)=\"fetchData()\">Fetch Data</button>`,\n * })\n * export class ExampleComponent {\n *   private fetcher = constructFetcher();\n *\n *   async fetchData() {\n *    const [error, response] = await this.fetcher.get('/api/data');\n *\n*     if (error) {\n*       console.error('Error fetching data:', error);\n*     } else {\n*       console.log('Fetched data:', response);\n*     }\n *   }\n * }\n * ```\n */\nexport function constructFetcher() {\n  const client = inject(HttpClient);\n\n  return new Proxy({} as Fetcher, {\n    get(target, prop) {\n      if (prop in client) {\n        return (...args: any[]) => {\n          const method = (client as any)[prop] as AnyFunction;\n\n          return tryCatch(firstValueFrom(method.apply(client, args)));\n        }\n      }\n\n      throw new Error(`HttpClient does not have method ${String(prop)}`);\n    }\n  });\n}\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,6 @@
 {
   "name": "@telperion/ng-pack",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",
@@ -40,6 +40,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,575 @@
+# @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** - Familiar pattern for request/response manipulation
+- 🎯 **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.
+
+### 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>;
+}
+```
+
+## 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))
+  ]
+};
+```
+
+## 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 };

package/types/telperion-ng-pack-utils.d.ts

@@ -1,4 +1,4 @@
-import { Type, InjectionToken, Provider } from '@angular/core';
+import { InjectionToken, Type, Provider } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 
@@ -43,7 +43,7 @@ import { Observable } from 'rxjs';
  * @param directive - The directive/component class that will be provided.
  * @returns A provider object that can be used in the providers array of an Angular module or component.
  */
-declare function provideServiceDirective<T extends Type<unknown>>(token: InjectionToken<T>, directive: T): Provider;
+declare function provideServiceDirective<T>(token: InjectionToken<T>, directive: Type<NoInfer<T>>): Provider;
 
 /**
  * Provides the Event Modifiers Plugin.