@telperion/ng-pack 1.3.2 → 1.4.1

package/fesm2022/telperion-ng-pack-storage-signals.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"telperion-ng-pack-storage-signals.mjs","sources":["../../storage-signals/src/storage.ts","../../storage-signals/src/local-storage.ts","../../storage-signals/src/session-storage.ts","../../storage-signals/src/telperion-ng-pack-storage-signals.ts"],"sourcesContent":["import { WritableSignal } from \"@angular/core\";\r\nimport { toSignal } from \"@angular/core/rxjs-interop\";\r\nimport { ReactiveStorage } from '@thalesrc/reactive-storage';\r\n\r\nexport interface StorageSignal<T> extends WritableSignal<T | null | undefined> {\r\n  delete(): void;\r\n}\r\n\r\nexport function storageSignal<T>(storage: ReactiveStorage, store: string, key: string): StorageSignal<T> {\r\n  const source = toSignal(storage.get<T>(store, key));\r\n\r\n  function setter(value: T | null | undefined) {\r\n    storage.set(store, key, value);\r\n  }\r\n\r\n  function updater(updaterFn: (value: T | null | undefined) => T | null | undefined) {\r\n    const currentValue = source();\r\n    const newValue = updaterFn(currentValue);\r\n\r\n    storage.set(store, key, newValue);\r\n  }\r\n\r\n  function deleter() {\r\n    storage.delete(store, key);\r\n  }\r\n\r\n  return new Proxy(source as StorageSignal<T>, {\r\n    apply() {\r\n      return source();\r\n    },\r\n    get(target, prop, receiver) {\r\n      switch (prop) {\r\n        case 'set':\r\n          return setter;\r\n        case 'update':\r\n          return updater;\r\n        case 'delete':\r\n          return deleter;\r\n        default:\r\n          return Reflect.get(target, prop, receiver);\r\n      }\r\n    }\r\n  })\r\n}\r\n","import { inject, InjectionToken, Provider } from \"@angular/core\";\r\nimport { ReactiveWebLocalStorage } from '@thalesrc/reactive-storage';\r\n\r\nimport { StorageSignal, storageSignal } from \"./storage\";\r\n\r\nconst LOCAL_STORAGE = new InjectionToken<ReactiveWebLocalStorage>('Telperion Local Storage');\r\n\r\nexport function provideLocalStorage(appName?: string): Provider {\r\n  return {\r\n    provide: LOCAL_STORAGE,\r\n    useValue: new ReactiveWebLocalStorage(appName)\r\n  };\r\n}\r\n\r\nexport function localStorageSignal<T>(store: string, key: string): StorageSignal<T> {\r\n  const storage = inject(LOCAL_STORAGE);\r\n\r\n  return storageSignal(storage, store, key);\r\n}\r\n","import { inject, InjectionToken, Provider } from \"@angular/core\";\r\nimport { ReactiveWebSessionStorage } from '@thalesrc/reactive-storage';\r\n\r\nimport { StorageSignal, storageSignal } from \"./storage\";\r\n\r\nconst SESSION_STORAGE = new InjectionToken<ReactiveWebSessionStorage>('Telperion Session Storage');\r\n\r\nexport function provideSessionStorage(appName?: string): Provider {\r\n  return {\r\n    provide: SESSION_STORAGE,\r\n    useValue: new ReactiveWebSessionStorage(appName)\r\n  };\r\n}\r\n\r\nexport function sessionStorageSignal<T>(store: string, key: string): StorageSignal<T> {\r\n  const storage = inject(SESSION_STORAGE);\r\n\r\n  return storageSignal(storage, store, key);\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;SAQgB,aAAa,CAAI,OAAwB,EAAE,KAAa,EAAE,GAAW,EAAA;AACnF,IAAA,MAAM,MAAM,GAAG,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAI,KAAK,EAAE,GAAG,CAAC,CAAC;IAEnD,SAAS,MAAM,CAAC,KAA2B,EAAA;QACzC,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC;IAChC;IAEA,SAAS,OAAO,CAAC,SAAgE,EAAA;AAC/E,QAAA,MAAM,YAAY,GAAG,MAAM,EAAE;AAC7B,QAAA,MAAM,QAAQ,GAAG,SAAS,CAAC,YAAY,CAAC;QAExC,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,CAAC;IACnC;AAEA,IAAA,SAAS,OAAO,GAAA;AACd,QAAA,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC;IAC5B;AAEA,IAAA,OAAO,IAAI,KAAK,CAAC,MAA0B,EAAE;QAC3C,KAAK,GAAA;YACH,OAAO,MAAM,EAAE;QACjB,CAAC;AACD,QAAA,GAAG,CAAC,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAA;YACxB,QAAQ,IAAI;AACV,gBAAA,KAAK,KAAK;AACR,oBAAA,OAAO,MAAM;AACf,gBAAA,KAAK,QAAQ;AACX,oBAAA,OAAO,OAAO;AAChB,gBAAA,KAAK,QAAQ;AACX,oBAAA,OAAO,OAAO;AAChB,gBAAA;oBACE,OAAO,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,EAAE,QAAQ,CAAC;;QAEhD;AACD,KAAA,CAAC;AACJ;;ACtCA,MAAM,aAAa,GAAG,IAAI,cAAc,CAA0B,yBAAyB,CAAC;AAEtF,SAAU,mBAAmB,CAAC,OAAgB,EAAA;IAClD,OAAO;AACL,QAAA,OAAO,EAAE,aAAa;AACtB,QAAA,QAAQ,EAAE,IAAI,uBAAuB,CAAC,OAAO;KAC9C;AACH;AAEM,SAAU,kBAAkB,CAAI,KAAa,EAAE,GAAW,EAAA;AAC9D,IAAA,MAAM,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC;IAErC,OAAO,aAAa,CAAC,OAAO,EAAE,KAAK,EAAE,GAAG,CAAC;AAC3C;;ACbA,MAAM,eAAe,GAAG,IAAI,cAAc,CAA4B,2BAA2B,CAAC;AAE5F,SAAU,qBAAqB,CAAC,OAAgB,EAAA;IACpD,OAAO;AACL,QAAA,OAAO,EAAE,eAAe;AACxB,QAAA,QAAQ,EAAE,IAAI,yBAAyB,CAAC,OAAO;KAChD;AACH;AAEM,SAAU,oBAAoB,CAAI,KAAa,EAAE,GAAW,EAAA;AAChE,IAAA,MAAM,OAAO,GAAG,MAAM,CAAC,eAAe,CAAC;IAEvC,OAAO,aAAa,CAAC,OAAO,EAAE,KAAK,EAAE,GAAG,CAAC;AAC3C;;AClBA;;AAEG;;;;"}
+{"version":3,"file":"telperion-ng-pack-storage-signals.mjs","sources":["../../storage-signals/src/storage.ts","../../storage-signals/src/local-storage.ts","../../storage-signals/src/session-storage.ts","../../storage-signals/src/cookie-storage.ts","../../storage-signals/src/telperion-ng-pack-storage-signals.ts"],"sourcesContent":["import { toSignal } from \"@angular/core/rxjs-interop\";\r\nimport { ReactiveStorage } from '@telperion/reactive-storage';\r\nimport { StorageSignal } from \"./storage-signal\";\r\n\r\n/**\r\n * Creates a StorageSignal from a ReactiveStorage instance.\r\n *\r\n * @template T - The type of value stored\r\n * @param storage - The ReactiveStorage instance (localStorage, sessionStorage, or cookie storage)\r\n * @param store - The storage namespace/store name\r\n * @param key - The key within the store\r\n * @returns A StorageSignal that provides reactive access to the stored value\r\n *\r\n * @remarks\r\n * This is a low-level factory function that bridges Angular signals with ReactiveStorage.\r\n * Most applications should use the higher-level functions:\r\n * - {@link localStorageSignal} for localStorage\r\n * - {@link sessionStorageSignal} for sessionStorage\r\n * - {@link cookieStorageSignal} for cookies\r\n *\r\n * The function:\r\n * 1. Converts the ReactiveStorage Observable into an Angular signal using `toSignal`\r\n * 2. Creates a Proxy that intercepts calls to add `set`, `update`, and `delete` methods\r\n * 3. Ensures all storage operations propagate to both the underlying storage and the signal\r\n *\r\n * **Proxy Pattern:**\r\n * The returned signal is a Proxy that:\r\n * - Delegates reading to the underlying signal\r\n * - Provides `set()` to write values\r\n * - Provides `update()` for functional updates\r\n * - Provides `delete()` to remove the value\r\n *\r\n * @example\r\n * ```typescript\r\n * // Typically used internally by specialized signal creators\r\n * import { ReactiveWebLocalStorage } from '@telperion/reactive-storage';\r\n *\r\n * const storage = new ReactiveWebLocalStorage('my-app');\r\n * const userSignal = storageSignal<User>(storage, 'users', 'current');\r\n *\r\n * userSignal.set({ id: 1, name: 'Alice' });\r\n * console.log(userSignal()); // { id: 1, name: 'Alice' }\r\n *\r\n * userSignal.update(user => ({ ...user, name: 'Bob' }));\r\n * userSignal.delete();\r\n * ```\r\n *\r\n * @internal This is primarily for internal use. Use the specialized signal creators instead.\r\n */\r\nexport function storageSignal<T>(storage: ReactiveStorage, store: string, key: string): StorageSignal<T> {\r\n  const source = toSignal(storage.get<T>(store, key));\r\n\r\n  function setter(value: T | null | undefined) {\r\n    storage.set(store, key, value);\r\n  }\r\n\r\n  function updater(updaterFn: (value: T | null | undefined) => T | null | undefined) {\r\n    const currentValue = source();\r\n    const newValue = updaterFn(currentValue);\r\n\r\n    storage.set(store, key, newValue);\r\n  }\r\n\r\n  function deleter() {\r\n    storage.delete(store, key);\r\n  }\r\n\r\n  return new Proxy(source as StorageSignal<T>, {\r\n    apply() {\r\n      return source();\r\n    },\r\n    get(target, prop, receiver) {\r\n      switch (prop) {\r\n        case 'set':\r\n          return setter;\r\n        case 'update':\r\n          return updater;\r\n        case 'delete':\r\n          return deleter;\r\n        default:\r\n          return Reflect.get(target, prop, receiver);\r\n      }\r\n    }\r\n  })\r\n}\r\n","import { inject, InjectionToken, Provider } from \"@angular/core\";\r\nimport { ReactiveWebLocalStorage } from '@telperion/reactive-storage';\r\n\r\nimport { storageSignal } from \"./storage\";\r\nimport { StorageSignal } from \"./storage-signal\";\r\n\r\n/**\r\n * Injection token for the ReactiveWebLocalStorage singleton.\r\n * @internal\r\n */\r\nconst LOCAL_STORAGE = new InjectionToken<ReactiveWebLocalStorage>('Telperion Local Storage');\r\n\r\n/**\r\n * Provides a ReactiveWebLocalStorage instance for dependency injection.\r\n *\r\n * @param appName - Optional application name for namespacing localStorage keys\r\n * @returns An Angular provider configuration\r\n *\r\n * @remarks\r\n * This provider creates a singleton ReactiveWebLocalStorage instance that can be injected\r\n * throughout your application. All `localStorageSignal` calls will use this shared instance,\r\n * ensuring consistent storage access and change detection.\r\n *\r\n * **Namespacing:**\r\n * The `appName` parameter prefixes all localStorage keys to prevent conflicts:\r\n * - With appName: `my-app:store:key`\r\n * - Without appName: `store:key`\r\n *\r\n * **Singleton Pattern:**\r\n * Only one instance is created per application, ensuring:\r\n * - Consistent storage access across components\r\n * - Efficient memory usage\r\n * - Reliable cross-component synchronization\r\n *\r\n * @example\r\n * ```typescript\r\n * // app.config.ts\r\n * import { ApplicationConfig } from '@angular/core';\r\n * import { provideLocalStorage } from '@telperion/ng-pack/storage-signals';\r\n *\r\n * export const appConfig: ApplicationConfig = {\r\n *   providers: [\r\n *     provideLocalStorage('my-app'),\r\n *     // ... other providers\r\n *   ]\r\n * };\r\n * ```\r\n *\r\n * @example\r\n * ```typescript\r\n * // Without namespace (keys are not prefixed)\r\n * export const appConfig: ApplicationConfig = {\r\n *   providers: [\r\n *     provideLocalStorage(),\r\n *   ]\r\n * };\r\n * ```\r\n *\r\n * @public\r\n */\r\nexport function provideLocalStorage(appName?: string): Provider {\r\n  return {\r\n    provide: LOCAL_STORAGE,\r\n    useValue: new ReactiveWebLocalStorage(appName)\r\n  };\r\n}\r\n\r\n/**\r\n * Creates a reactive signal connected to browser's localStorage.\r\n *\r\n * @template T - The type of value stored\r\n * @param store - The storage namespace/store name\r\n * @param key - The key within the store\r\n * @returns A StorageSignal that reactively tracks the localStorage value\r\n *\r\n * @remarks\r\n * This function creates an Angular signal that automatically syncs with localStorage.\r\n * Any changes to the value (via `set`, `update`, or `delete`) are immediately persisted\r\n * to localStorage and propagate to all components using the same signal.\r\n *\r\n * **Requirements:**\r\n * Must call {@link provideLocalStorage} in application config before using this function.\r\n *\r\n * **Storage Key:**\r\n * The actual localStorage key is formed as:\r\n * - With app name: `appName:store:key`\r\n * - Without app name: `store:key`\r\n *\r\n * **Type Safety:**\r\n * Values are automatically serialized/deserialized as JSON:\r\n * - Objects and arrays are preserved\r\n * - Primitives (string, number, boolean) work correctly\r\n * - Functions and undefined values are not supported\r\n *\r\n * **Cross-Component Sync:**\r\n * All components using the same `store` and `key` share the same signal state.\r\n * Changes in one component immediately reflect in others.\r\n *\r\n * @example\r\n * ```typescript\r\n * import { Component } from '@angular/core';\r\n * import { localStorageSignal } from '@telperion/ng-pack/storage-signals';\r\n *\r\n * @Component({\r\n *   selector: 'app-settings',\r\n *   template: `\r\n *     <div>\r\n *       <p>Theme: {{ theme() }}</p>\r\n *       <button (click)=\"theme.set('dark')\">Dark</button>\r\n *       <button (click)=\"theme.set('light')\">Light</button>\r\n *       <button (click)=\"theme.delete()\">Reset</button>\r\n *     </div>\r\n *   `\r\n * })\r\n * export class SettingsComponent {\r\n *   theme = localStorageSignal<string>('settings', 'theme');\r\n * }\r\n * ```\r\n *\r\n * @example\r\n * ```typescript\r\n * // Complex types\r\n * interface UserPreferences {\r\n *   theme: 'light' | 'dark';\r\n *   fontSize: number;\r\n *   notifications: boolean;\r\n * }\r\n *\r\n * const prefs = localStorageSignal<UserPreferences>('user', 'preferences');\r\n *\r\n * // Set entire object\r\n * prefs.set({ theme: 'dark', fontSize: 14, notifications: true });\r\n *\r\n * // Update specific property\r\n * prefs.update(current => ({\r\n *   ...current,\r\n *   theme: current?.theme === 'dark' ? 'light' : 'dark'\r\n * }));\r\n * ```\r\n *\r\n * @throws Error if {@link provideLocalStorage} was not called in application config\r\n *\r\n * @public\r\n */\r\nexport function localStorageSignal<T>(store: string, key: string): StorageSignal<T> {\r\n  const storage = inject(LOCAL_STORAGE);\r\n\r\n  return storageSignal(storage, store, key);\r\n}\r\n","import { inject, InjectionToken, Provider } from \"@angular/core\";\r\nimport { ReactiveWebSessionStorage } from '@telperion/reactive-storage';\r\n\r\nimport { storageSignal } from \"./storage\";\r\nimport { StorageSignal } from \"./storage-signal\";\r\n\r\n/**\r\n * Injection token for the ReactiveWebSessionStorage singleton.\r\n * @internal\r\n */\r\nconst SESSION_STORAGE = new InjectionToken<ReactiveWebSessionStorage>('Telperion Session Storage');\r\n\r\n/**\r\n * Provides a ReactiveWebSessionStorage instance for dependency injection.\r\n *\r\n * @param appName - Optional application name for namespacing sessionStorage keys\r\n * @returns An Angular provider configuration\r\n *\r\n * @remarks\r\n * This provider creates a singleton ReactiveWebSessionStorage instance that can be injected\r\n * throughout your application. All `sessionStorageSignal` calls will use this shared instance,\r\n * ensuring consistent storage access and change detection.\r\n *\r\n * **SessionStorage vs LocalStorage:**\r\n * - **sessionStorage**: Data persists only for the browser tab/window session (cleared on close)\r\n * - **localStorage**: Data persists indefinitely until explicitly cleared\r\n *\r\n * **Use Cases for sessionStorage:**\r\n * - Multi-step form wizards\r\n * - Temporary authentication tokens\r\n * - Per-session user preferences\r\n * - Shopping cart for current session\r\n * - Tab-specific state isolation\r\n *\r\n * **Namespacing:**\r\n * The `appName` parameter prefixes all sessionStorage keys to prevent conflicts:\r\n * - With appName: `my-app:store:key`\r\n * - Without appName: `store:key`\r\n *\r\n * **Singleton Pattern:**\r\n * Only one instance is created per application, ensuring:\r\n * - Consistent storage access across components\r\n * - Efficient memory usage\r\n * - Reliable cross-component synchronization\r\n *\r\n * @example\r\n * ```typescript\r\n * // app.config.ts\r\n * import { ApplicationConfig } from '@angular/core';\r\n * import { provideSessionStorage } from '@telperion/ng-pack/storage-signals';\r\n *\r\n * export const appConfig: ApplicationConfig = {\r\n *   providers: [\r\n *     provideSessionStorage('my-app'),\r\n *     // ... other providers\r\n *   ]\r\n * };\r\n * ```\r\n *\r\n * @example\r\n * ```typescript\r\n * // Without namespace\r\n * export const appConfig: ApplicationConfig = {\r\n *   providers: [\r\n *     provideSessionStorage(),\r\n *   ]\r\n * };\r\n * ```\r\n *\r\n * @public\r\n */\r\nexport function provideSessionStorage(appName?: string): Provider {\r\n  return {\r\n    provide: SESSION_STORAGE,\r\n    useValue: new ReactiveWebSessionStorage(appName)\r\n  };\r\n}\r\n\r\n/**\r\n * Creates a reactive signal connected to browser's sessionStorage.\r\n *\r\n * @template T - The type of value stored\r\n * @param store - The storage namespace/store name\r\n * @param key - The key within the store\r\n * @returns A StorageSignal that reactively tracks the sessionStorage value\r\n *\r\n * @remarks\r\n * This function creates an Angular signal that automatically syncs with sessionStorage.\r\n * Any changes to the value (via `set`, `update`, or `delete`) are immediately persisted\r\n * to sessionStorage and propagate to all components using the same signal.\r\n *\r\n * **Session Lifecycle:**\r\n * - Data is cleared when the browser tab/window is closed\r\n * - Each tab has its own independent sessionStorage\r\n * - Opening a page in a new tab creates fresh sessionStorage (even for same URL)\r\n * - Refreshing the page preserves sessionStorage data\r\n *\r\n * **Requirements:**\r\n * Must call {@link provideSessionStorage} in application config before using this function.\r\n *\r\n * **Storage Key:**\r\n * The actual sessionStorage key is formed as:\r\n * - With app name: `appName:store:key`\r\n * - Without app name: `store:key`\r\n *\r\n * **Type Safety:**\r\n * Values are automatically serialized/deserialized as JSON:\r\n * - Objects and arrays are preserved\r\n * - Primitives (string, number, boolean) work correctly\r\n * - Functions and undefined values are not supported\r\n *\r\n * **Cross-Component Sync:**\r\n * All components in the same tab using the same `store` and `key` share the same signal state.\r\n * Changes in one component immediately reflect in others within the same tab.\r\n * Different tabs do NOT share sessionStorage.\r\n *\r\n * @example\r\n * ```typescript\r\n * import { Component } from '@angular/core';\r\n * import { sessionStorageSignal } from '@telperion/ng-pack/storage-signals';\r\n *\r\n * @Component({\r\n *   selector: 'app-wizard',\r\n *   template: `\r\n *     <div>\r\n *       <p>Current Step: {{ currentStep() }}</p>\r\n *       <button (click)=\"nextStep()\">Next</button>\r\n *       <button (click)=\"currentStep.delete()\">Reset</button>\r\n *     </div>\r\n *   `\r\n * })\r\n * export class WizardComponent {\r\n *   currentStep = sessionStorageSignal<number>('wizard', 'step');\r\n *\r\n *   nextStep() {\r\n *     this.currentStep.update(step => (step ?? 0) + 1);\r\n *   }\r\n * }\r\n * ```\r\n *\r\n * @example\r\n * ```typescript\r\n * // Form data that shouldn't persist across sessions\r\n * interface FormData {\r\n *   email: string;\r\n *   message: string;\r\n * }\r\n *\r\n * const formData = sessionStorageSignal<FormData>('contact', 'draft');\r\n *\r\n * // Auto-save form data (cleared when tab closes)\r\n * formData.set({ email: 'user@example.com', message: 'Hello!' });\r\n *\r\n * // Update specific field\r\n * formData.update(current => ({\r\n *   ...current,\r\n *   message: 'Updated message'\r\n * }));\r\n * ```\r\n *\r\n * @throws Error if {@link provideSessionStorage} was not called in application config\r\n *\r\n * @public\r\n */\r\nexport function sessionStorageSignal<T>(store: string, key: string): StorageSignal<T> {\r\n  const storage = inject(SESSION_STORAGE);\r\n\r\n  return storageSignal(storage, store, key);\r\n}\r\n","import { inject, Provider } from '@angular/core';\r\nimport { ReactiveCookieStorage, ReactiveCookieStorageOptions } from '@telperion/reactive-storage';\r\nimport { storageSignal } from './storage';\r\n\r\n/**\r\n * Internal provider that manages ReactiveCookieStorage instances with different configurations.\r\n *\r\n * @remarks\r\n * This class implements a registry pattern to ensure that cookie storages with identical\r\n * configurations share the same underlying ReactiveCookieStorage instance. This is critical for:\r\n * - Preventing duplicate cookie writes\r\n * - Ensuring consistent change detection across components\r\n * - Optimizing memory usage\r\n *\r\n * **Linker Pattern:**\r\n * All instances created by this provider share a common linker (Symbol) to enable\r\n * cross-instance synchronization even when using different option combinations.\r\n *\r\n * **Instance Deduplication:**\r\n * Two `cookieStorageSignal` calls with the same options will reuse the same storage instance,\r\n * preventing redundant cookie operations.\r\n *\r\n * @internal This class is not exported publicly\r\n */\r\nclass CookieStorageProvider {\r\n  /**\r\n   * Valid cookie option keys that can be used to configure cookie storage.\r\n   * Filters out any invalid properties from being passed to cookie operations.\r\n   */\r\n  static #VALID_OPTIONS = ['path', 'domain', 'secure', 'sameSite', 'expires', 'maxAge'] as (keyof ReactiveCookieStorageOptions)[];\r\n\r\n  /**\r\n   * Shared linker symbol used to synchronize all cookie storage instances\r\n   * created by this provider, enabling cross-instance change notifications.\r\n   */\r\n  #linker = Symbol('ReactiveCookieStorage Linker');\r\n\r\n  /**\r\n   * Registry of ReactiveCookieStorage instances keyed by their configuration options.\r\n   * Ensures instances with identical options are reused.\r\n   */\r\n  #stores = new Map<ReactiveCookieStorageOptions, ReactiveCookieStorage>();\r\n\r\n  /**\r\n   * Creates a new CookieStorageProvider with base configuration.\r\n   *\r\n   * @param appName - Optional application name for namespacing cookie keys\r\n   * @param baseOptions - Default cookie options applied to all storage instances\r\n   */\r\n  constructor(\r\n    private appName?: string,\r\n    private baseOptions: ReactiveCookieStorageOptions = {}\r\n  ) {\r\n    const parsedOptions = this.#parseOptions(baseOptions);\r\n\r\n    this.#stores.set(parsedOptions, new ReactiveCookieStorage(appName, parsedOptions, this.#linker));\r\n  }\r\n\r\n  /**\r\n   * Gets or creates a ReactiveCookieStorage instance with the specified options.\r\n   *\r\n   * @param options - Cookie options to override base options\r\n   * @returns A ReactiveCookieStorage instance (reused if options match existing instance)\r\n   *\r\n   * @remarks\r\n   * This method implements option merging and instance deduplication:\r\n   * 1. Merges provided options with base options (provided options take precedence)\r\n   * 2. Checks if an instance with these exact options already exists\r\n   * 3. Returns existing instance if found, otherwise creates and caches a new one\r\n   *\r\n   * All instances share the same linker for cross-instance synchronization.\r\n   */\r\n  getStore(options: ReactiveCookieStorageOptions = {}): ReactiveCookieStorage {\r\n    const parsedOptions = this.#parseOptions({...this.baseOptions, ...options});\r\n    let existingKey = this.#getStoredOptions(parsedOptions);\r\n\r\n    if (!existingKey) {\r\n      this.#stores.set(parsedOptions, new ReactiveCookieStorage(this.appName, parsedOptions, this.#linker));\r\n      existingKey = parsedOptions;\r\n    }\r\n\r\n    return this.#stores.get(existingKey)!;\r\n  }\r\n\r\n  /**\r\n   * Filters cookie options to include only valid properties.\r\n   *\r\n   * @param options - Raw options object that may contain invalid properties\r\n   * @returns Filtered options containing only valid cookie configuration properties\r\n   */\r\n  #parseOptions(options: ReactiveCookieStorageOptions) {\r\n    return Object.fromEntries(\r\n      Object.entries(options).filter(([key]) => CookieStorageProvider.#VALID_OPTIONS.includes(key as keyof ReactiveCookieStorageOptions))\r\n    ) as ReactiveCookieStorageOptions;\r\n  }\r\n\r\n  /**\r\n   * Searches the registry for an existing options object that matches the provided options.\r\n   *\r\n   * @param options - Cookie options to search for\r\n   * @returns The stored options object if found, undefined otherwise\r\n   *\r\n   * @remarks\r\n   * Two options objects are considered equal if all valid cookie properties have identical values.\r\n   */\r\n  #getStoredOptions(options: ReactiveCookieStorageOptions): ReactiveCookieStorageOptions | undefined {\r\n    const stored = this.#stores.keys();\r\n\r\n    return stored.find(storedOpts => {\r\n      return CookieStorageProvider.#VALID_OPTIONS.every(key => storedOpts[key] === options[key]);\r\n    });\r\n  }\r\n}\r\n\r\n/**\r\n * Provides a CookieStorageProvider instance for dependency injection.\r\n *\r\n * @param appName - Optional application name for namespacing cookie keys\r\n * @param options - Default cookie options applied to all cookie storage signals\r\n * @returns An Angular provider configuration\r\n *\r\n * @remarks\r\n * This provider creates a singleton CookieStorageProvider that manages all cookie storage\r\n * instances in your application. All `cookieStorageSignal` calls will use this shared provider.\r\n *\r\n * **Cookie Namespacing:**\r\n * The `appName` parameter prefixes all cookie names to prevent conflicts:\r\n * - With appName: `my-app:store:key`\r\n * - Without appName: `store:key`\r\n *\r\n * **Base Options:**\r\n * The `options` parameter provides default cookie configuration for all signals.\r\n * Individual signals can override these options when created.\r\n *\r\n * **Common Options:**\r\n * - `path` - Cookie path (default: current path)\r\n * - `domain` - Cookie domain (default: current domain)\r\n * - `secure` - Require HTTPS (recommended for production)\r\n * - `sameSite` - CSRF protection ('strict' | 'lax' | 'none')\r\n * - `maxAge` - Expiry time in seconds\r\n * - `expires` - Expiry as Date object\r\n *\r\n * **Instance Management:**\r\n * The provider automatically deduplicates storage instances:\r\n * - Signals with identical options share the same storage instance\r\n * - All instances are linked for cross-instance synchronization\r\n * - Memory-efficient for applications with many cookie signals\r\n *\r\n * @example\r\n * ```typescript\r\n * // app.config.ts\r\n * import { ApplicationConfig } from '@angular/core';\r\n * import { provideCookieStorage } from '@telperion/ng-pack/storage-signals';\r\n *\r\n * export const appConfig: ApplicationConfig = {\r\n *   providers: [\r\n *     provideCookieStorage('my-app', {\r\n *       path: '/',\r\n *       secure: true,\r\n *       sameSite: 'strict',\r\n *       maxAge: 86400 // 24 hours\r\n *     }),\r\n *   ]\r\n * };\r\n * ```\r\n *\r\n * @example\r\n * ```typescript\r\n * // Minimal configuration\r\n * export const appConfig: ApplicationConfig = {\r\n *   providers: [\r\n *     provideCookieStorage('my-app'),\r\n *   ]\r\n * };\r\n * ```\r\n *\r\n * @public\r\n */\r\nexport function provideCookieStorage(\r\n  appName?: string,\r\n  options?: ReactiveCookieStorageOptions\r\n): Provider {\r\n  return {\r\n    provide: CookieStorageProvider,\r\n    useValue: new CookieStorageProvider(appName, options)\r\n  };\r\n}\r\n\r\n/**\r\n * Creates a reactive signal connected to browser cookies.\r\n *\r\n * @template T - The type of value stored\r\n * @param store - The cookie namespace/store name\r\n * @param key - The cookie key within the store\r\n * @param options - Optional cookie-specific options that override provider defaults\r\n * @returns A StorageSignal that reactively tracks the cookie value\r\n *\r\n * @remarks\r\n * This function creates an Angular signal that automatically syncs with browser cookies.\r\n * Any changes to the value (via `set`, `update`, or `delete`) are immediately written\r\n * to cookies and propagate to all components using the same signal.\r\n *\r\n * **Requirements:**\r\n * Must call {@link provideCookieStorage} in application config before using this function.\r\n *\r\n * **Cookie Name:**\r\n * The actual cookie name is formed as:\r\n * - With app name: `appName:store:key`\r\n * - Without app name: `store:key`\r\n *\r\n * **Size Limitations:**\r\n * Cookies have a ~4KB size limit. The underlying ReactiveCookieStorage enforces a 4000 byte\r\n * limit and throws an error if exceeded. Use localStorage for larger data.\r\n *\r\n * **Options Merging:**\r\n * Cookie options are merged in this order (later overrides earlier):\r\n * 1. Provider base options (from `provideCookieStorage`)\r\n * 2. Signal-specific options (from this function's `options` parameter)\r\n *\r\n * **Instance Deduplication:**\r\n * Signals with identical merged options share the same underlying storage instance:\r\n * ```typescript\r\n * // These share the same storage instance\r\n * const token1 = cookieStorageSignal('auth', 'token', { secure: true });\r\n * const token2 = cookieStorageSignal('auth', 'token', { secure: true });\r\n *\r\n * // These use different instances (different options)\r\n * const temp = cookieStorageSignal('auth', 'token', { maxAge: 300 });\r\n * ```\r\n *\r\n * **Type Safety:**\r\n * Values are automatically serialized/deserialized as JSON:\r\n * - Objects and arrays are preserved\r\n * - Primitives (string, number, boolean) work correctly\r\n * - Functions and undefined values are not supported\r\n *\r\n * **Security Best Practices:**\r\n * - Use `secure: true` in production (HTTPS only)\r\n * - Use `sameSite: 'strict'` for CSRF protection\r\n * - Set appropriate `maxAge` or `expires` for sensitive data\r\n * - Never store sensitive data in cookies without encryption\r\n *\r\n * @example\r\n * ```typescript\r\n * import { Component } from '@angular/core';\r\n * import { cookieStorageSignal } from '@telperion/ng-pack/storage-signals';\r\n *\r\n * @Component({\r\n *   selector: 'app-auth',\r\n *   template: `\r\n *     <div>\r\n *       <p>Token: {{ authToken() }}</p>\r\n *       <button (click)=\"login()\">Login</button>\r\n *       <button (click)=\"logout()\">Logout</button>\r\n *     </div>\r\n *   `\r\n * })\r\n * export class AuthComponent {\r\n *   // Secure cookie with 1 hour expiry\r\n *   authToken = cookieStorageSignal<string>('auth', 'token', {\r\n *     secure: true,\r\n *     sameSite: 'strict',\r\n *     maxAge: 3600\r\n *   });\r\n *\r\n *   login() {\r\n *     this.authToken.set('abc123');\r\n *   }\r\n *\r\n *   logout() {\r\n *     this.authToken.delete();\r\n *   }\r\n * }\r\n * ```\r\n *\r\n * @example\r\n * ```typescript\r\n * // User preferences with different cookie lifetimes\r\n * const theme = cookieStorageSignal<string>('prefs', 'theme', {\r\n *   maxAge: 31536000 // 1 year\r\n * });\r\n *\r\n * const tempSetting = cookieStorageSignal<boolean>('prefs', 'banner-dismissed', {\r\n *   maxAge: 86400 // 1 day\r\n * });\r\n *\r\n * theme.set('dark');\r\n * tempSetting.set(true);\r\n * ```\r\n *\r\n * @throws Error if {@link provideCookieStorage} was not called in application config\r\n * @throws Error if the serialized value exceeds 4000 bytes\r\n *\r\n * @public\r\n */\r\nexport function cookieStorageSignal<T>(store: string, key: string, options?: ReactiveCookieStorageOptions) {\r\n  const provider = inject(CookieStorageProvider);\r\n  const storage = provider.getStore(options);\r\n\r\n  return storageSignal(storage, store, key);\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,7 +1,7 @@
 {
   "name": "@telperion/ng-pack",
-  "version": "1.3.2",
-  "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.",
+  "version": "1.4.1",
+  "description": "Collection of Angular utilities and libraries organized as secondary entry points. Includes signal-based storage (localStorage/sessionStorage/cookieStorage), 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",
@@ -11,6 +11,7 @@
     "eventsource",
     "localstorage",
     "sessionstorage",
+    "cookie",
     "storage",
     "signals",
     "interceptors",
@@ -33,7 +34,7 @@
   "dependencies": {
     "@thalesrc/extra-ts-types": "^1.4.0",
     "@thalesrc/js-utils": "^3.4.0",
-    "@thalesrc/reactive-storage": "^1.0.5",
+    "@telperion/reactive-storage": "^1.2.0",
     "tslib": "^2.3.0"
   },
   "sideEffects": false,

package/storage-signals/README.md

@@ -1,16 +1,18 @@
 # @telperion/ng-pack/storage-signals
 
-Angular signals-based wrapper for browser's localStorage and sessionStorage with reactive updates.
+Angular signals-based wrapper for browser's localStorage, sessionStorage, and cookies with reactive updates.
 
 ## Features
 
 - 🚀 **Signal-based API** - Seamlessly integrate with Angular's signal system
 - 🔄 **Reactive updates** - Automatically sync changes across components
 - 🎯 **Type-safe** - Full TypeScript support with generic typing
-- 🏪 **Dual storage support** - Works with both localStorage and sessionStorage
+- 🏪 **Triple storage support** - Works with localStorage, sessionStorage, and cookies
 - 🔑 **Namespaced storage** - Organize storage with app names and store names
 - 🎯 **Nested property access** - Access deep object properties using dot notation
 - 🧹 **Simple API** - Signal interface with `set()`, `update()`, and `delete()` methods
+- 🍪 **Cookie configuration** - Full control over cookie options (secure, sameSite, maxAge, etc.)
+- 🔗 **Cross-instance sync** - Cookie signals support instance synchronization
 
 ## Installation
 
@@ -54,6 +56,35 @@ export const appConfig: ApplicationConfig = {
 };
 ```
 
+### Cookie Storage
+
+Configure cookie storage in your application config:
+
+```typescript
+import { ApplicationConfig } from '@angular/core';
+import { provideCookieStorage } from '@telperion/ng-pack/storage-signals';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideCookieStorage('my-app', {
+      path: '/',
+      secure: true,
+      sameSite: 'strict',
+      maxAge: 86400 // 24 hours
+    }),
+    // ... other providers
+  ]
+};
+```
+
+**Cookie Options:**
+- `path` - Cookie path (default: current path)
+- `domain` - Cookie domain (default: current domain)
+- `secure` - Require HTTPS (recommended for production)
+- `sameSite` - CSRF protection: `'strict'` | `'lax'` | `'none'`
+- `maxAge` - Expiry time in seconds
+- `expires` - Expiry as Date object
+
 ## Usage
 
 ### Basic Usage
@@ -110,6 +141,45 @@ export class WizardComponent {
 }
 ```
 
+### Cookie Storage
+
+```typescript
+import { Component } from '@angular/core';
+import { cookieStorageSignal } from '@telperion/ng-pack/storage-signals';
+
+@Component({
+  selector: 'app-auth',
+  template: `
+    <div>
+      @if (authToken()) {
+        <p>Authenticated</p>
+        <button (click)="logout()">Logout</button>
+      } @else {
+        <button (click)="login()">Login</button>
+      }
+    </div>
+  `
+})
+export class AuthComponent {
+  // Create a signal connected to cookies with custom options
+  authToken = cookieStorageSignal<string>('auth', 'token', {
+    secure: true,
+    sameSite: 'strict',
+    maxAge: 3600 // 1 hour
+  });
+
+  login() {
+    this.authToken.set('abc123token');
+  }
+
+  logout() {
+    this.authToken.delete();
+  }
+}
+```
+
+**Important:** Cookies have a ~4KB size limit. The library enforces a 4000-byte limit and throws an error if exceeded. Use localStorage for larger data.
+
 ### Nested Property Access
 
 One of the most powerful features is the ability to access nested object properties using dot notation:
@@ -237,6 +307,47 @@ Creates a signal connected to sessionStorage. Must be called within an injection
 
 ---
 
+### `provideCookieStorage(appName?: string, options?: ReactiveCookieStorageOptions): Provider`
+
+Creates a provider for cookie storage integration.
+
+**Parameters:**
+- `appName` (optional) - Namespace prefix for all cookie names
+- `options` (optional) - Default cookie options applied to all signals
+  - `path` - Cookie path
+  - `domain` - Cookie domain
+  - `secure` - Require HTTPS
+  - `sameSite` - CSRF protection (`'strict'` | `'lax'` | `'none'`)
+  - `maxAge` - Expiry time in seconds
+  - `expires` - Expiry as Date object
+
+**Returns:** Angular Provider
+
+---
+
+### `cookieStorageSignal<T>(store: string, key: string, options?: ReactiveCookieStorageOptions): StorageSignal<T>`
+
+Creates a signal connected to browser cookies. Must be called within an injection context.
+
+**Parameters:**
+- `store` - Storage namespace/category (e.g., 'auth', 'preferences')
+- `key` - Unique key within the store
+- `options` (optional) - Cookie-specific options that override provider defaults
+
+**Returns:** `StorageSignal<T>`
+
+**Limitations:**
+- Maximum ~4KB per cookie (enforced at 4000 bytes)
+- Throws error if value exceeds size limit
+
+**Security Best Practices:**
+- Use `secure: true` in production (HTTPS only)
+- Use `sameSite: 'strict'` for CSRF protection
+- Set appropriate `maxAge` for sensitive data
+- Never store unencrypted sensitive data
+
+---
+
 ### `StorageSignal<T>`
 
 A signal interface extending Angular's `WritableSignal` with additional storage methods.
@@ -249,7 +360,7 @@ A signal interface extending Angular's `WritableSignal` with additional storage
 
 ## Storage Organization
 
-The library uses a hierarchical storage structure:
+The library uses a hierarchical storage structure for all storage types:
 
 ```
 [appName]:[store]:[key] = value
@@ -259,14 +370,35 @@ Example:
 ```typescript
 // With provideLocalStorage('my-app')
 localStorageSignal<string>('settings', 'theme');
-// Creates key: "my-app:settings:theme"
+// Creates localStorage key: "my-app:settings:theme"
+
+// With provideSessionStorage('my-app')
+sessionStorageSignal<number>('user', 'id');
+// Creates sessionStorage key: "my-app:user:id"
 
-localStorageSignal<number>('user', 'id');
-// Creates key: "my-app:user:id"
+// With provideCookieStorage('my-app')
+cookieStorageSignal<string>('auth', 'token');
+// Creates cookie name: "my-app:auth:token"
 ```
 
 This organization helps prevent key collisions and makes storage management cleaner.
 
+## Storage Type Comparison
+
+| Feature | localStorage | sessionStorage | Cookies |
+|---------|--------------|----------------|---------|
+| **Persistence** | Until explicitly cleared | Until tab/window closes | Until expiry (configurable) |
+| **Capacity** | ~10MB | ~10MB | ~4KB per cookie |
+| **Scope** | All tabs/windows | Single tab/window | All tabs/windows |
+| **Server Access** | No | No | Yes (sent with requests) |
+| **Best For** | Long-term app state | Per-session state | Auth tokens, small settings |
+| **Security** | Client-side only | Client-side only | HttpOnly, Secure, SameSite options |
+
+**When to use:**
+- **localStorage**: User preferences, app settings, cached data
+- **sessionStorage**: Multi-step forms, temporary UI state, wizard flows
+- **cookies**: Authentication tokens, session IDs, small persistent preferences
+
 ## TypeScript Support
 
 The library is fully typed with TypeScript generics:
@@ -330,6 +462,37 @@ user.set({ id: 1, name: 'Alice' }); // ✓ OK
    const formDraft = sessionStorageSignal('form', 'draft');
    ```
 
+6. **Use cookies for security-sensitive small data** - Auth tokens with proper options
+   ```typescript
+   const authToken = cookieStorageSignal<string>('auth', 'token', {
+     secure: true,      // HTTPS only
+     sameSite: 'strict', // CSRF protection
+     maxAge: 3600       // 1 hour expiry
+   });
+   ```
+
+7. **Mind the cookie size limit** - Keep cookie data under 4KB
+   ```typescript
+   // Good: Small auth token
+   cookieStorageSignal<string>('auth', 'token');
+   
+   // Bad: Large data (use localStorage instead)
+   // cookieStorageSignal<LargeObject>('data', 'large');
+   ```
+
+8. **Override cookie options per signal** - Different cookies need different lifetimes
+   ```typescript
+   // Long-lived preference
+   const theme = cookieStorageSignal<string>('prefs', 'theme', {
+     maxAge: 31536000 // 1 year
+   });
+   
+   // Short-lived session token
+   const token = cookieStorageSignal<string>('auth', 'token', {
+     maxAge: 3600 // 1 hour
+   });
+   ```
+
 ## License
 
 This library is part of the Telperion monorepo.