@telperion/ng-pack 0.1.3

package/README.md

@@ -0,0 +1,95 @@
+# @telperion/ng-pack
+
+A collection of Angular utilities and libraries
+
+## Installation
+
+```bash
+npm install @telperion/ng-pack
+```
+
+## Available Modules
+
+### Storage Signals
+
+**Import:** `@telperion/ng-pack/storage-signals`
+
+Angular signals-based wrapper for browser's localStorage and sessionStorage with reactive updates.
+
+#### Key Features
+
+- 🚀 Signal-based API integrated with Angular's signal system
+- 🔄 Reactive updates automatically synced across components
+- 🎯 Nested property access using dot notation
+- 🏪 Support for both localStorage and sessionStorage
+- 🔑 Namespaced storage organization
+
+#### Quick Start
+
+```typescript
+import { ApplicationConfig } from '@angular/core';
+import { provideLocalStorage } from '@telperion/ng-pack/storage-signals';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideLocalStorage('my-app'),
+  ]
+};
+```
+
+```typescript
+import { Component } from '@angular/core';
+import { localStorageSignal } from '@telperion/ng-pack/storage-signals';
+
+@Component({
+  selector: 'app-settings',
+  template: `
+    <div>
+      <p>Theme: {{ theme() }}</p>
+      <button (click)="theme.set('dark')">Dark Mode</button>
+    </div>
+  `
+})
+export class SettingsComponent {
+  // Access nested properties with dot notation
+  theme = localStorageSignal<string>('settings', 'ui.theme');
+}
+```
+
+[Full documentation →](./storage-signals/README.md)
+
+---
+
+### Template Signal Forms
+
+**Import:** `@telperion/ng-pack/template-signal-forms`
+
+🚧 **Under Construction**
+
+Signal-based forms utilities for Angular template-driven forms.
+
+---
+
+### Utils
+
+**Import:** `@telperion/ng-pack/utils`
+
+🚧 **Under Construction**
+
+Common Angular utilities and helpers.
+
+---
+
+## Development
+
+### Running Unit Tests
+
+Run `pnpm nx test ng-pack` to execute the unit tests.
+
+### Building
+
+Run `pnpm nx build ng-pack` to build the library.
+
+## License
+
+This library is part of the Telperion monorepo.

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

@@ -0,0 +1,66 @@
+import { InjectionToken, inject } from '@angular/core';
+import { ReactiveWebLocalStorage, ReactiveWebSessionStorage } from '@thalesrc/reactive-storage';
+import { toSignal } from '@angular/core/rxjs-interop';
+
+function storageSignal(storage, store, key) {
+    const source = toSignal(storage.get(store, key));
+    function setter(value) {
+        storage.set(store, key, value);
+    }
+    function updater(updaterFn) {
+        const currentValue = source();
+        const newValue = updaterFn(currentValue);
+        storage.set(store, key, newValue);
+    }
+    function deleter() {
+        storage.delete(store, key);
+    }
+    return new Proxy(source, {
+        apply() {
+            return source();
+        },
+        get(target, prop, receiver) {
+            switch (prop) {
+                case 'set':
+                    return setter;
+                case 'update':
+                    return updater;
+                case 'delete':
+                    return deleter;
+                default:
+                    return Reflect.get(target, prop, receiver);
+            }
+        }
+    });
+}
+
+const LOCAL_STORAGE = new InjectionToken('Telperion Local Storage');
+function provideLocalStorage(appName) {
+    return {
+        provide: LOCAL_STORAGE,
+        useValue: new ReactiveWebLocalStorage(appName)
+    };
+}
+function localStorageSignal(store, key) {
+    const storage = inject(LOCAL_STORAGE);
+    return storageSignal(storage, store, key);
+}
+
+const SESSION_STORAGE = new InjectionToken('Telperion Session Storage');
+function provideSessionStorage(appName) {
+    return {
+        provide: SESSION_STORAGE,
+        useValue: new ReactiveWebSessionStorage(appName)
+    };
+}
+function sessionStorageSignal(store, key) {
+    const storage = inject(SESSION_STORAGE);
+    return storageSignal(storage, store, key);
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { localStorageSignal, provideLocalStorage, provideSessionStorage, sessionStorageSignal };
+//# sourceMappingURL=telperion-ng-pack-storage-signals.mjs.map

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

@@ -0,0 +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;;;;"}

package/fesm2022/telperion-ng-pack-utils.mjs

@@ -0,0 +1,69 @@
+import * as i0 from '@angular/core';
+import { NgModule, forwardRef } from '@angular/core';
+
+class UtilsModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UtilsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.5", ngImport: i0, type: UtilsModule });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UtilsModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UtilsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [],
+                }]
+        }] });
+
+/**
+ * Utility function to create a provider for a directive/component that can be injected as a service.
+ * This is useful for cases where you want to inject a directive/component instance into another directive/component.
+ *
+ * Example usage:
+ *
+ * files:
+ * - parent.directive.ts
+ * - child.directive.ts
+ * - parent.service.ts
+ *
+ * parent.service.ts:
+ * ```
+ * import { InjectionToken } from "@angular/core";
+ * import type { ParentDirective } from "./parent.directive";
+ *
+ * export const ParentService = new InjectionToken<ParentDirective>("ParentService");
+ * ```
+ *
+ * parent.directive.ts:
+ * ```
+ * @Directive({
+ *   selector: 'parent',
+ *   providers: [provideServiceDirective(ParentService, ParentDirective)],
+ * })
+ * export class ParentDirective {...}
+ * ```
+ * child.directive.ts:
+ * ```
+ * @Directive({
+ *   selector: 'child',
+ * })
+ * export class ChildDirective {
+ *   #parent = inject(ParentService);
+ * }
+ * ```
+ *
+ * @param token - The injection token to provide.
+ * @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.
+ */
+function provideServiceDirective(token, directive) {
+    return {
+        provide: token,
+        useExisting: forwardRef(() => directive)
+    };
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { UtilsModule, provideServiceDirective };
+//# sourceMappingURL=telperion-ng-pack-utils.mjs.map

package/fesm2022/telperion-ng-pack-utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"telperion-ng-pack-utils.mjs","sources":["../../utils/src/lib/utils-module.ts","../../utils/src/lib/provide-service-directive.ts","../../utils/src/telperion-ng-pack-utils.ts"],"sourcesContent":["import { NgModule } from '@angular/core';\n\n@NgModule({\n  imports: [],\n})\nexport class UtilsModule {}\n","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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAKa,WAAW,CAAA;uGAAX,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;wGAAX,WAAW,EAAA,CAAA;wGAAX,WAAW,EAAA,CAAA;;2FAAX,WAAW,EAAA,UAAA,EAAA,CAAA;kBAHvB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE,EAAE;AACZ,iBAAA;;;ACFD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCG;AACG,SAAU,uBAAuB,CACrC,KAAwB,EACxB,SAAY,EAAA;IAEZ,OAAO;AACL,QAAA,OAAO,EAAE,KAAK;AACd,QAAA,WAAW,EAAE,UAAU,CAAC,MAAM,SAAS;KACxC;AACH;;ACnDA;;AAEG;;;;"}

package/fesm2022/telperion-ng-pack.mjs

@@ -0,0 +1,19 @@
+import * as i0 from '@angular/core';
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+class NgPack {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NgPack, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: NgPack, isStandalone: true, selector: "tng-ng-pack", ngImport: i0, template: `<p>NgPack works!</p>`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NgPack, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-ng-pack', imports: [CommonModule], template: `<p>NgPack works!</p>` }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgPack };
+//# sourceMappingURL=telperion-ng-pack.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"telperion-ng-pack.mjs","sources":["../../src/lib/ng-pack/ng-pack.ts","../../src/telperion-ng-pack.ts"],"sourcesContent":["import { Component } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n  selector: 'tng-ng-pack',\n  imports: [CommonModule],\n  template: `<p>NgPack works!</p>`,\n  styles: ``,\n})\nexport class NgPack {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MASa,MAAM,CAAA;uGAAN,MAAM,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAN,MAAM,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAHP,CAAA,oBAAA,CAAsB,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EADtB,YAAY,EAAA,CAAA,EAAA,CAAA;;2FAIX,MAAM,EAAA,UAAA,EAAA,CAAA;kBANlB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EAAA,OAAA,EACd,CAAC,YAAY,CAAC,YACb,CAAA,oBAAA,CAAsB,EAAA;;;ACNlC;;AAEG;;;;"}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@telperion/ng-pack",
+  "version": "0.1.3",
+  "peerDependencies": {
+    "@angular/common": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/forms": "^21.0.0",
+    "rxjs": "^7.8.1"
+  },
+  "dependencies": {
+    "@thalesrc/reactive-storage": "^1.0.5",
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "bugs": "https://github.com/telperiontech/telperion/issues",
+  "license": "MIT",
+  "homepage": "https://open-source.telperion.tr",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/telperiontech/telperion.git"
+  },
+  "author": {
+    "name": "Ali Şahin Özçelik",
+    "email": "alisahinozcelik@gmail.com",
+    "url": "https://alisah.in"
+  },
+  "funding": {
+    "type": "patreon",
+    "url": "https://www.patreon.com/alisahin"
+  },
+  "module": "fesm2022/telperion-ng-pack.mjs",
+  "typings": "types/telperion-ng-pack.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/telperion-ng-pack.d.ts",
+      "default": "./fesm2022/telperion-ng-pack.mjs"
+    },
+    "./storage-signals": {
+      "types": "./types/telperion-ng-pack-storage-signals.d.ts",
+      "default": "./fesm2022/telperion-ng-pack-storage-signals.mjs"
+    },
+    "./utils": {
+      "types": "./types/telperion-ng-pack-utils.d.ts",
+      "default": "./fesm2022/telperion-ng-pack-utils.mjs"
+    }
+  }
+}

package/storage-signals/README.md

@@ -0,0 +1,335 @@
+# @telperion/ng-pack/storage-signals
+
+Angular signals-based wrapper for browser's localStorage and sessionStorage 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
+- 🔑 **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
+
+## Installation
+
+This is a secondary entry point of `@telperion/ng-pack`. Import from `@telperion/ng-pack/storage-signals`.
+
+```bash
+npm install @telperion/ng-pack
+```
+
+## Setup
+
+### Local Storage
+
+Configure localStorage in your application config:
+
+```typescript
+import { ApplicationConfig } from '@angular/core';
+import { provideLocalStorage } from '@telperion/ng-pack/storage-signals';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideLocalStorage('my-app'), // Optional app name for namespacing
+    // ... other providers
+  ]
+};
+```
+
+### Session Storage
+
+Configure sessionStorage in your application config:
+
+```typescript
+import { ApplicationConfig } from '@angular/core';
+import { provideSessionStorage } from '@telperion/ng-pack/storage-signals';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideSessionStorage('my-app'), // Optional app name for namespacing
+    // ... other providers
+  ]
+};
+```
+
+## Usage
+
+### Basic Usage
+
+```typescript
+import { Component } from '@angular/core';
+import { localStorageSignal } from '@telperion/ng-pack/storage-signals';
+
+@Component({
+  selector: 'app-user-settings',
+  template: `
+    <div>
+      <p>Theme: {{ theme() }}</p>
+      <button (click)="toggleTheme()">Toggle Theme</button>
+      <button (click)="resetTheme()">Reset</button>
+    </div>
+  `
+})
+export class UserSettingsComponent {
+  // Create a signal connected to localStorage
+  theme = localStorageSignal<string>('settings', 'theme');
+
+  toggleTheme() {
+    this.theme.update(current => current === 'dark' ? 'light' : 'dark');
+  }
+
+  resetTheme() {
+    this.theme.delete();
+  }
+}
+```
+
+### Session Storage
+
+```typescript
+import { Component } from '@angular/core';
+import { sessionStorageSignal } from '@telperion/ng-pack/storage-signals';
+
+@Component({
+  selector: 'app-wizard',
+  template: `
+    <div>
+      <p>Current Step: {{ currentStep() }}</p>
+      <button (click)="nextStep()">Next</button>
+    </div>
+  `
+})
+export class WizardComponent {
+  currentStep = sessionStorageSignal<number>('wizard', 'currentStep');
+
+  nextStep() {
+    this.currentStep.update(step => (step ?? 0) + 1);
+  }
+}
+```
+
+### Nested Property Access
+
+One of the most powerful features is the ability to access nested object properties using dot notation:
+
+```typescript
+@Component({
+  selector: 'app-preferences',
+  template: `
+    <div>
+      <p>Theme: {{ theme() }}</p>
+      <p>Language: {{ language() }}</p>
+      <p>Notifications: {{ notifications() }}</p>
+      <button (click)="updateLanguage('es')">Spanish</button>
+      <button (click)="toggleNotifications()">Toggle Notifications</button>
+    </div>
+  `
+})
+export class PreferencesComponent {
+  // Access nested properties directly with dot notation
+  theme = localStorageSignal<string>('user', 'preferences.theme');
+  language = localStorageSignal<string>('user', 'preferences.language');
+  notifications = localStorageSignal<boolean>('user', 'preferences.notifications');
+
+  ngOnInit() {
+    // Initialize with default values if not set
+    if (!this.theme()) this.theme.set('light');
+    if (!this.language()) this.language.set('en');
+    if (this.notifications() === undefined) this.notifications.set(true);
+  }
+
+  updateLanguage(language: string) {
+    this.language.set(language);
+  }
+
+  toggleNotifications() {
+    this.notifications.update(enabled => !enabled);
+  }
+}
+```
+
+This approach provides several benefits:
+- Each property has its own reactive signal
+- No need for optional chaining or null checks in templates
+- Updates to one property don't trigger re-renders for components using other properties
+- More granular control and better performance
+
+### Cross-Component Synchronization
+
+Changes to storage signals are automatically synchronized across all components:
+
+```typescript
+// Component A
+@Component({
+  selector: 'app-sidebar',
+  template: `<p>Count: {{ count() }}</p>`
+})
+export class SidebarComponent {
+  count = localStorageSignal<number>('app', 'count');
+}
+
+// Component B
+@Component({
+  selector: 'app-header',
+  template: `
+    <button (click)="increment()">
+      Count: {{ count() }}
+    </button>
+  `
+})
+export class HeaderComponent {
+  count = localStorageSignal<number>('app', 'count');
+
+  increment() {
+    this.count.update(n => (n ?? 0) + 1);
+  }
+}
+// Both components will show the same value and update together!
+```
+
+## API Reference
+
+### `provideLocalStorage(appName?: string): Provider`
+
+Creates a provider for localStorage integration.
+
+**Parameters:**
+- `appName` (optional) - Namespace prefix for all storage keys
+
+**Returns:** Angular Provider
+
+---
+
+### `provideSessionStorage(appName?: string): Provider`
+
+Creates a provider for sessionStorage integration.
+
+**Parameters:**
+- `appName` (optional) - Namespace prefix for all storage keys
+
+**Returns:** Angular Provider
+
+---
+
+### `localStorageSignal<T>(store: string, key: string): StorageSignal<T>`
+
+Creates a signal connected to localStorage. Must be called within an injection context.
+
+**Parameters:**
+- `store` - Storage namespace/category (e.g., 'settings', 'user')
+- `key` - Unique key within the store
+
+**Returns:** `StorageSignal<T>`
+
+---
+
+### `sessionStorageSignal<T>(store: string, key: string): StorageSignal<T>`
+
+Creates a signal connected to sessionStorage. Must be called within an injection context.
+
+**Parameters:**
+- `store` - Storage namespace/category (e.g., 'wizard', 'form-data')
+- `key` - Unique key within the store
+
+**Returns:** `StorageSignal<T>`
+
+---
+
+### `StorageSignal<T>`
+
+A signal interface extending Angular's `WritableSignal` with additional storage methods.
+
+**Methods:**
+- `()` - Read the current value
+- `set(value: T | null | undefined)` - Set a new value
+- `update(fn: (value: T | null | undefined) => T | null | undefined)` - Update using a function
+- `delete()` - Remove the value from storage
+
+## Storage Organization
+
+The library uses a hierarchical storage structure:
+
+```
+[appName]:[store]:[key] = value
+```
+
+Example:
+```typescript
+// With provideLocalStorage('my-app')
+localStorageSignal<string>('settings', 'theme');
+// Creates key: "my-app:settings:theme"
+
+localStorageSignal<number>('user', 'id');
+// Creates key: "my-app:user:id"
+```
+
+This organization helps prevent key collisions and makes storage management cleaner.
+
+## TypeScript Support
+
+The library is fully typed with TypeScript generics:
+
+```typescript
+// Type-safe signals
+const theme = localStorageSignal<'light' | 'dark'>('settings', 'theme');
+theme.set('light'); // ✓ OK
+theme.set('blue');  // ✗ Type error
+
+const count = localStorageSignal<number>('app', 'count');
+count.set(42);      // ✓ OK
+count.set('42');    // ✗ Type error
+
+// Complex types
+interface User {
+  id: number;
+  name: string;
+}
+
+const user = localStorageSignal<User>('auth', 'currentUser');
+user.set({ id: 1, name: 'Alice' }); // ✓ OK
+```
+
+## Best Practices
+
+1. **Use dot notation for nested properties** - Access deep object properties directly
+   ```typescript
+   // Instead of managing the whole object
+   const user = localStorageSignal<User>('app', 'user');
+   const name = user()?.profile?.name;
+   
+   // Access nested properties directly
+   const userName = localStorageSignal<string>('app', 'user.profile.name');
+   const userEmail = localStorageSignal<string>('app', 'user.profile.email');
+   ```
+
+2. **Use meaningful store names** - Group related keys together
+   ```typescript
+   localStorageSignal('user-preferences', 'theme');
+   localStorageSignal('user-preferences', 'language');
+   ```
+
+3. **Initialize with defaults** - Check for null/undefined initial values
+   ```typescript
+   const theme = localStorageSignal<string>('settings', 'theme');
+   if (!theme()) {
+     theme.set('light');
+   }
+   ```
+
+4. **Clean up sensitive data** - Use `delete()` when appropriate
+   ```typescript
+   onLogout() {
+     this.authToken.delete();
+   }
+   ```
+
+5. **Use sessionStorage for temporary data** - Forms, wizards, temporary state
+   ```typescript
+   const formDraft = sessionStorageSignal('form', 'draft');
+   ```
+
+## License
+
+This library is part of the Telperion monorepo.

package/types/telperion-ng-pack-storage-signals.d.ts

@@ -0,0 +1,13 @@
+import { WritableSignal, Provider } from '@angular/core';
+
+interface StorageSignal<T> extends WritableSignal<T | null | undefined> {
+    delete(): void;
+}
+
+declare function provideLocalStorage(appName?: string): Provider;
+declare function localStorageSignal<T>(store: string, key: string): StorageSignal<T>;
+
+declare function provideSessionStorage(appName?: string): Provider;
+declare function sessionStorageSignal<T>(store: string, key: string): StorageSignal<T>;
+
+export { localStorageSignal, provideLocalStorage, provideSessionStorage, sessionStorageSignal };

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

@@ -0,0 +1,53 @@
+import * as i0 from '@angular/core';
+import { Type, InjectionToken, Provider } from '@angular/core';
+
+declare class UtilsModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<UtilsModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<UtilsModule, never, never, never>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<UtilsModule>;
+}
+
+/**
+ * Utility function to create a provider for a directive/component that can be injected as a service.
+ * This is useful for cases where you want to inject a directive/component instance into another directive/component.
+ *
+ * Example usage:
+ *
+ * files:
+ * - parent.directive.ts
+ * - child.directive.ts
+ * - parent.service.ts
+ *
+ * parent.service.ts:
+ * ```
+ * import { InjectionToken } from "@angular/core";
+ * import type { ParentDirective } from "./parent.directive";
+ *
+ * export const ParentService = new InjectionToken<ParentDirective>("ParentService");
+ * ```
+ *
+ * parent.directive.ts:
+ * ```
+ * @Directive({
+ *   selector: 'parent',
+ *   providers: [provideServiceDirective(ParentService, ParentDirective)],
+ * })
+ * export class ParentDirective {...}
+ * ```
+ * child.directive.ts:
+ * ```
+ * @Directive({
+ *   selector: 'child',
+ * })
+ * export class ChildDirective {
+ *   #parent = inject(ParentService);
+ * }
+ * ```
+ *
+ * @param token - The injection token to provide.
+ * @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;
+
+export { UtilsModule, provideServiceDirective };

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

@@ -0,0 +1,8 @@
+import * as i0 from '@angular/core';
+
+declare class NgPack {
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgPack, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgPack, "tng-ng-pack", never, {}, {}, never, never, true, never>;
+}
+
+export { NgPack };

package/utils/README.md

@@ -0,0 +1,3 @@
+# @telperion/ng-pack/utils
+
+Secondary entry point of `@telperion/ng-pack`. It can be used by importing from `@telperion/ng-pack/utils`.