wacom 21.1.12 → 21.1.13

package/README.md

@@ -63,8 +63,9 @@ export const appConfig = {
 | [**`Dom`**](https://www.npmjs.com/package/wacom#dom-service)         |     Facilitates DOM manipulation and dynamic component loading      |
 | [**`Network`**](https://www.npmjs.com/package/wacom#network-service) |              Monitors network connectivity and latency              |
 | [**`RTC`**](https://www.npmjs.com/package/wacom#rtc-service)         |        Wraps WebRTC peer connections and local media streams        |
-| [**`Util`**](https://www.npmjs.com/package/wacom#util-service)       |      Utility methods for forms, validation, and CSS variables       |
-| [**`Emitter`**](#emitter-service)                                    |            Lightweight app-wide event and task signaling            |
+| [**`Util`**](https://www.npmjs.com/package/wacom#util-service)       |      Utility methods for forms, validation, and CSS variables       |
+| [**`Theme`**](#theme-service)                                       |     Manages UI theme mode, density, and radius preferences     |
+| [**`Emitter`**](#emitter-service)                                    |            Lightweight app-wide event and task signaling            |
 
 ## [Emitter Service](#emitter-service)
 
@@ -1999,7 +2000,7 @@ const weeksInMonth = timeService.getWeeksInMonth(2, 2025);
 console.log(weeksInMonth); // Output: 6 (example for March 2025)
 ```
 
-## [Dom Service](#dom-service)
+## [Dom Service](#dom-service)
 
 The `DomService` facilitates DOM manipulation and dynamic component loading in Angular applications.
 
@@ -2109,7 +2110,7 @@ export class AppComponent {
 }
 ```
 
-## [Network Service](#network-service)
+## [Network Service](#network-service)
 
 The `NetworkService` monitors network connectivity and latency using Angular signals.
 It periodically probes configurable endpoints and emits `wacom_online` or `wacom_offline`
@@ -2133,7 +2134,7 @@ Performs an immediate connectivity check and updates all signals.
 await networkService.recheckNow();
 ```
 
-## [RTC Service](#rtc-service)
+## [RTC Service](#rtc-service)
 
 The `RtcService` wraps WebRTC peer connections and local media streams.
 
@@ -2152,14 +2153,44 @@ The `RtcService` wraps WebRTC peer connections and local media streams.
 **Example**:
 
 ```Typescript
-import { RtcService } from 'wacom';
+import { RtcService } from 'wacom';
 
 constructor(private rtc: RtcService) {}
 
-async connect(id: string) {
-  await this.rtc.initLocalStream();
-  await this.rtc.createPeer(id);
-  const offer = await this.rtc.createOffer(id);
-  // send offer to remote peer...
-}
-```
+async connect(id: string) {
+  await this.rtc.initLocalStream();
+  await this.rtc.createPeer(id);
+  const offer = await this.rtc.createOffer(id);
+  // send offer to remote peer...
+}
+```
+
+## [Theme Service](#theme-service)
+
+The `ThemeService` manages UI theme preferences by setting data attributes on the
+document root and persisting them in `localStorage`.
+
+### Methods
+
+- `getMode(): ThemeMode | null` – reads `theme.mode` from `localStorage`.
+- `setMode(mode: ThemeMode): void` – sets `data-mode` and persists `theme.mode`.
+- `getDensity(): ThemeDensity | null` – reads `theme.density` from `localStorage`.
+- `setDensity(density: ThemeDensity): void` – sets `data-density` and persists `theme.density`.
+- `getRadius(): ThemeRadius | string | null` – reads `theme.radius` from `localStorage`.
+- `setRadius(radius: ThemeRadius | string): void` – sets `data-radius` and persists `theme.radius`.
+- `init(): void` – loads preferences from `localStorage` (or defaults to `light`, `comfortable`, `rounded`).
+
+### Usage Example
+
+```Typescript
+import { ThemeService } from "wacom";
+
+constructor(private theme: ThemeService) {}
+
+ngOnInit() {
+	this.theme.init();
+	this.theme.setMode("dark");
+	this.theme.setDensity("compact");
+	this.theme.setRadius("square");
+}
+```

package/fesm2022/wacom.mjs

@@ -4199,14 +4199,23 @@ class ThemeService {
     constructor() {
         this.doc = inject(DOCUMENT);
     }
+    getRadius() {
+        return localStorage.getItem('theme.radius');
+    }
     setRadius(radius) {
         this.doc.documentElement.dataset['radius'] = radius;
         localStorage.setItem('theme.radius', radius);
     }
+    getMode() {
+        return localStorage.getItem('theme.mode');
+    }
     setMode(mode) {
         this.doc.documentElement.dataset['mode'] = mode;
         localStorage.setItem('theme.mode', mode);
     }
+    getDensity() {
+        return localStorage.getItem('theme.density');
+    }
     setDensity(density) {
         this.doc.documentElement.dataset['density'] = density;
         localStorage.setItem('theme.density', density);