@devary/ui-common 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,25 +1,40 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { signal, computed, Injectable, inject, Component } from '@angular/core';
|
|
3
|
+
import { BehaviorSubject, distinctUntilChanged } from 'rxjs';
|
|
3
4
|
|
|
4
5
|
const STORAGE_KEY = 'rz-theme';
|
|
5
|
-
class
|
|
6
|
-
|
|
6
|
+
class ThemeStore {
|
|
7
|
+
subject = new BehaviorSubject(this.resolveInitialTheme());
|
|
8
|
+
// RxJS stream — subscribe in services, effects, pipes
|
|
9
|
+
theme$ = this.subject.asObservable().pipe(distinctUntilChanged());
|
|
10
|
+
// Angular signals — bind directly in templates
|
|
11
|
+
_theme = signal(this.subject.getValue(), ...(ngDevMode ? [{ debugName: "_theme" }] : /* istanbul ignore next */ []));
|
|
7
12
|
theme = this._theme.asReadonly();
|
|
8
13
|
isDark = computed(() => this._theme() === 'dark', ...(ngDevMode ? [{ debugName: "isDark" }] : /* istanbul ignore next */ []));
|
|
9
14
|
isLight = computed(() => this._theme() === 'light', ...(ngDevMode ? [{ debugName: "isLight" }] : /* istanbul ignore next */ []));
|
|
10
15
|
constructor() {
|
|
11
|
-
this.
|
|
16
|
+
this.applyToDOM(this.subject.getValue());
|
|
17
|
+
// Keep signal in sync with BehaviorSubject
|
|
18
|
+
this.theme$.subscribe(theme => {
|
|
19
|
+
this._theme.set(theme);
|
|
20
|
+
this.applyToDOM(theme);
|
|
21
|
+
});
|
|
12
22
|
}
|
|
13
23
|
setTheme(theme) {
|
|
14
|
-
this._theme.set(theme);
|
|
15
|
-
this.applyTheme(theme);
|
|
16
24
|
localStorage.setItem(STORAGE_KEY, theme);
|
|
25
|
+
this.subject.next(theme);
|
|
17
26
|
}
|
|
18
27
|
toggle() {
|
|
19
|
-
this.setTheme(this.
|
|
28
|
+
this.setTheme(this.subject.getValue() === 'dark' ? 'light' : 'dark');
|
|
20
29
|
}
|
|
21
|
-
|
|
22
|
-
|
|
30
|
+
/** Current snapshot — useful outside reactive contexts */
|
|
31
|
+
snapshot() {
|
|
32
|
+
return this.subject.getValue();
|
|
33
|
+
}
|
|
34
|
+
applyToDOM(theme) {
|
|
35
|
+
if (typeof document !== 'undefined') {
|
|
36
|
+
document.documentElement.setAttribute('data-theme', theme);
|
|
37
|
+
}
|
|
23
38
|
}
|
|
24
39
|
resolveInitialTheme() {
|
|
25
40
|
const stored = localStorage.getItem(STORAGE_KEY);
|
|
@@ -30,16 +45,16 @@ class ThemeService {
|
|
|
30
45
|
}
|
|
31
46
|
return 'light';
|
|
32
47
|
}
|
|
33
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type:
|
|
34
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type:
|
|
48
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ThemeStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
49
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ThemeStore, providedIn: 'root' });
|
|
35
50
|
}
|
|
36
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type:
|
|
51
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ThemeStore, decorators: [{
|
|
37
52
|
type: Injectable,
|
|
38
53
|
args: [{ providedIn: 'root' }]
|
|
39
54
|
}], ctorParameters: () => [] });
|
|
40
55
|
|
|
41
56
|
class ThemeToggleComponent {
|
|
42
|
-
theme = inject(
|
|
57
|
+
theme = inject(ThemeStore);
|
|
43
58
|
isDark = this.theme.isDark;
|
|
44
59
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ThemeToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
45
60
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: ThemeToggleComponent, isStandalone: true, selector: "rz-theme-toggle", ngImport: i0, template: `
|
|
@@ -73,5 +88,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
73
88
|
* Generated bundle index. Do not edit.
|
|
74
89
|
*/
|
|
75
90
|
|
|
76
|
-
export {
|
|
91
|
+
export { ThemeStore, ThemeToggleComponent };
|
|
77
92
|
//# sourceMappingURL=devary-ui-common.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"devary-ui-common.mjs","sources":["../../../projects/ui-common/src/lib/services/theme.
|
|
1
|
+
{"version":3,"file":"devary-ui-common.mjs","sources":["../../../projects/ui-common/src/lib/services/theme.store.ts","../../../projects/ui-common/src/lib/components/theme-toggle/theme-toggle.component.ts","../../../projects/ui-common/src/public-api.ts","../../../projects/ui-common/src/devary-ui-common.ts"],"sourcesContent":["import { Injectable, signal, computed } from '@angular/core';\nimport { BehaviorSubject, distinctUntilChanged, Observable } from 'rxjs';\n\nexport type Theme = 'light' | 'dark';\n\nconst STORAGE_KEY = 'rz-theme';\n\n@Injectable({ providedIn: 'root' })\nexport class ThemeStore {\n private readonly subject = new BehaviorSubject<Theme>(this.resolveInitialTheme());\n\n // RxJS stream — subscribe in services, effects, pipes\n readonly theme$: Observable<Theme> = this.subject.asObservable().pipe(distinctUntilChanged());\n\n // Angular signals — bind directly in templates\n private readonly _theme = signal<Theme>(this.subject.getValue());\n readonly theme = this._theme.asReadonly();\n readonly isDark = computed(() => this._theme() === 'dark');\n readonly isLight = computed(() => this._theme() === 'light');\n\n constructor() {\n this.applyToDOM(this.subject.getValue());\n // Keep signal in sync with BehaviorSubject\n this.theme$.subscribe(theme => {\n this._theme.set(theme);\n this.applyToDOM(theme);\n });\n }\n\n setTheme(theme: Theme): void {\n localStorage.setItem(STORAGE_KEY, theme);\n this.subject.next(theme);\n }\n\n toggle(): void {\n this.setTheme(this.subject.getValue() === 'dark' ? 'light' : 'dark');\n }\n\n /** Current snapshot — useful outside reactive contexts */\n snapshot(): Theme {\n return this.subject.getValue();\n }\n\n private applyToDOM(theme: Theme): void {\n if (typeof document !== 'undefined') {\n document.documentElement.setAttribute('data-theme', theme);\n }\n }\n\n private resolveInitialTheme(): Theme {\n const stored = localStorage.getItem(STORAGE_KEY) as Theme | null;\n if (stored === 'light' || stored === 'dark') return stored;\n if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {\n return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n }\n return 'light';\n }\n}\n","import { Component, inject } from '@angular/core';\nimport { ThemeStore } from '../../services/theme.store';\n\n@Component({\n selector: 'rz-theme-toggle',\n standalone: true,\n template: `\n <button\n type=\"button\"\n class=\"rz-theme-toggle\"\n [attr.aria-label]=\"isDark() ? 'Switch to light mode' : 'Switch to dark mode'\"\n (click)=\"theme.toggle()\"\n >\n <span class=\"rz-theme-toggle__icon\">{{ isDark() ? '☀️' : '🌙' }}</span>\n </button>\n `,\n styles: [`\n .rz-theme-toggle {\n display: inline-grid;\n place-items: center;\n width: 2rem;\n height: 2rem;\n border-radius: var(--rz-radius-full);\n border: 1px solid var(--rz-border);\n background: var(--rz-surface-hover);\n cursor: pointer;\n font-size: 0.9rem;\n transition: background 0.18s;\n\n &:hover {\n background: var(--rz-surface-active);\n }\n }\n `]\n})\nexport class ThemeToggleComponent {\n readonly theme = inject(ThemeStore);\n readonly isDark = this.theme.isDark;\n}\n","// Services\nexport { ThemeStore } from './lib/services/theme.store';\nexport type { Theme } from './lib/services/theme.store';\n\n// Components\nexport * from './lib/components/theme-toggle/theme-toggle.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;AAKA,MAAM,WAAW,GAAG,UAAU;MAGjB,UAAU,CAAA;IACJ,OAAO,GAAG,IAAI,eAAe,CAAQ,IAAI,CAAC,mBAAmB,EAAE,CAAC;;AAGxE,IAAA,MAAM,GAAsB,IAAI,CAAC,OAAO,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC;;IAG5E,MAAM,GAAI,MAAM,CAAQ,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,QAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAC;AACxD,IAAA,KAAK,GAAK,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE;AAClC,IAAA,MAAM,GAAI,QAAQ,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,KAAK,MAAM,6EAAC;AAClD,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,KAAK,OAAO,8EAAC;AAE5D,IAAA,WAAA,GAAA;QACE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;;AAExC,QAAA,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,IAAG;AAC5B,YAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC;AACtB,YAAA,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;AACxB,QAAA,CAAC,CAAC;IACJ;AAEA,IAAA,QAAQ,CAAC,KAAY,EAAA;AACnB,QAAA,YAAY,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,CAAC;AACxC,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;IAC1B;IAEA,MAAM,GAAA;QACJ,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,KAAK,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACtE;;IAGA,QAAQ,GAAA;AACN,QAAA,OAAO,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE;IAChC;AAEQ,IAAA,UAAU,CAAC,KAAY,EAAA;AAC7B,QAAA,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE;YACnC,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,YAAY,EAAE,KAAK,CAAC;QAC5D;IACF;IAEQ,mBAAmB,GAAA;QACzB,MAAM,MAAM,GAAG,YAAY,CAAC,OAAO,CAAC,WAAW,CAAiB;AAChE,QAAA,IAAI,MAAM,KAAK,OAAO,IAAI,MAAM,KAAK,MAAM;AAAE,YAAA,OAAO,MAAM;AAC1D,QAAA,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,OAAO,MAAM,CAAC,UAAU,KAAK,UAAU,EAAE;AAC5E,YAAA,OAAO,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO;QACrF;AACA,QAAA,OAAO,OAAO;IAChB;wGAhDW,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAAV,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAU,cADG,MAAM,EAAA,CAAA;;4FACnB,UAAU,EAAA,UAAA,EAAA,CAAA;kBADtB,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE;;;MC4BrB,oBAAoB,CAAA;AACtB,IAAA,KAAK,GAAI,MAAM,CAAC,UAAU,CAAC;AAC3B,IAAA,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM;wGAFxB,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAApB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EA7BrB;;;;;;;;;AAST,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,iTAAA,CAAA,EAAA,CAAA;;4FAoBU,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAhChC,SAAS;+BACE,iBAAiB,EAAA,UAAA,EACf,IAAI,EAAA,QAAA,EACN;;;;;;;;;AAST,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,iTAAA,CAAA,EAAA;;;ACfH;;ACAA;;AAEG;;;;"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
|
+
import { Observable } from 'rxjs';
|
|
2
3
|
|
|
3
4
|
type Theme = 'light' | 'dark';
|
|
4
|
-
declare class
|
|
5
|
+
declare class ThemeStore {
|
|
6
|
+
private readonly subject;
|
|
7
|
+
readonly theme$: Observable<Theme>;
|
|
5
8
|
private readonly _theme;
|
|
6
9
|
readonly theme: _angular_core.Signal<Theme>;
|
|
7
10
|
readonly isDark: _angular_core.Signal<boolean>;
|
|
@@ -9,18 +12,20 @@ declare class ThemeService {
|
|
|
9
12
|
constructor();
|
|
10
13
|
setTheme(theme: Theme): void;
|
|
11
14
|
toggle(): void;
|
|
12
|
-
|
|
15
|
+
/** Current snapshot — useful outside reactive contexts */
|
|
16
|
+
snapshot(): Theme;
|
|
17
|
+
private applyToDOM;
|
|
13
18
|
private resolveInitialTheme;
|
|
14
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<
|
|
15
|
-
static ɵprov: _angular_core.ɵɵInjectableDeclaration<
|
|
19
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThemeStore, never>;
|
|
20
|
+
static ɵprov: _angular_core.ɵɵInjectableDeclaration<ThemeStore>;
|
|
16
21
|
}
|
|
17
22
|
|
|
18
23
|
declare class ThemeToggleComponent {
|
|
19
|
-
readonly theme:
|
|
24
|
+
readonly theme: ThemeStore;
|
|
20
25
|
readonly isDark: _angular_core.Signal<boolean>;
|
|
21
26
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThemeToggleComponent, never>;
|
|
22
27
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ThemeToggleComponent, "rz-theme-toggle", never, {}, {}, never, never, true, never>;
|
|
23
28
|
}
|
|
24
29
|
|
|
25
|
-
export {
|
|
30
|
+
export { ThemeStore, ThemeToggleComponent };
|
|
26
31
|
export type { Theme };
|