@africanies/angular-web-sdk 0.1.9 → 0.1.10

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.
Files changed (55) hide show
  1. package/.nx/cache/1149535958171016935/dist/libs/africanies-theme/README.md +46 -0
  2. package/.nx/cache/1149535958171016935/dist/libs/africanies-theme/fesm2022/africanies-africanies-theme.mjs +243 -0
  3. package/.nx/cache/1149535958171016935/dist/libs/africanies-theme/fesm2022/africanies-africanies-theme.mjs.map +1 -0
  4. package/.nx/cache/1149535958171016935/dist/libs/africanies-theme/package.json +35 -0
  5. package/.nx/cache/1149535958171016935/dist/libs/africanies-theme/tailwind-preset.cjs +330 -0
  6. package/.nx/cache/1149535958171016935/dist/libs/africanies-theme/types/africanies-africanies-theme.d.ts +178 -0
  7. package/.nx/cache/3735952477975556635/dist/libs/africanies-ui/README.md +68 -0
  8. package/.nx/cache/3735952477975556635/dist/libs/africanies-ui/assets/brand/africanies-logo-mini.png +0 -0
  9. package/.nx/cache/3735952477975556635/dist/libs/africanies-ui/assets/brand/africanies-logo.png +0 -0
  10. package/.nx/cache/3735952477975556635/dist/libs/africanies-ui/assets/brand/africanies-logo.svg +5 -0
  11. package/.nx/cache/3735952477975556635/dist/libs/africanies-ui/assets/carriers/dhl.svg +7 -0
  12. package/.nx/cache/3735952477975556635/dist/libs/africanies-ui/fesm2022/africanies-africanies-ui.mjs +19998 -0
  13. package/.nx/cache/3735952477975556635/dist/libs/africanies-ui/fesm2022/africanies-africanies-ui.mjs.map +1 -0
  14. package/.nx/cache/3735952477975556635/dist/libs/africanies-ui/package.json +35 -0
  15. package/.nx/cache/3735952477975556635/dist/libs/africanies-ui/types/africanies-africanies-ui.d.ts +5616 -0
  16. package/.nx/cache/run.json +17 -17
  17. package/.nx/cache/terminalOutputs/1149535958171016935 +21 -0
  18. package/.nx/cache/terminalOutputs/3735952477975556635 +21 -0
  19. package/.nx/workspace-data/0091ABA9-5C90-580D-953C-8C94E763ADB5-v3.db +0 -0
  20. package/.nx/workspace-data/0091ABA9-5C90-580D-953C-8C94E763ADB5-v3.db-shm +0 -0
  21. package/.nx/workspace-data/0091ABA9-5C90-580D-953C-8C94E763ADB5-v3.db-wal +0 -0
  22. package/.nx/workspace-data/d/daemon.log +1430 -0
  23. package/.nx/workspace-data/d/server-process.json +2 -2
  24. package/.nx/workspace-data/file-map.json +3332 -3334
  25. package/.nx/workspace-data/nx_files.nxt +0 -0
  26. package/.nx/workspace-data/project-graph.json +2 -2
  27. package/apps/playground/src/app/pages/chip-page.ts +11 -1
  28. package/apps/playground/src/app/pages/tokens-page.ts +2 -2
  29. package/apps/playground/src/app/snippets/chip.snippets.ts +5 -0
  30. package/dist/libs/africanies-theme/fesm2022/africanies-africanies-theme.mjs +8 -8
  31. package/dist/libs/africanies-theme/fesm2022/africanies-africanies-theme.mjs.map +1 -1
  32. package/dist/libs/africanies-theme/tailwind-preset.cjs +3 -3
  33. package/dist/libs/africanies-theme/types/africanies-africanies-theme.d.ts +5 -3
  34. package/dist/libs/africanies-ui/fesm2022/africanies-africanies-ui.mjs +869 -371
  35. package/dist/libs/africanies-ui/fesm2022/africanies-africanies-ui.mjs.map +1 -1
  36. package/dist/libs/africanies-ui/types/africanies-africanies-ui.d.ts +135 -40
  37. package/libs/africanies-theme/src/lib/mode-color.safelist.ts +2 -2
  38. package/libs/africanies-theme/src/lib/mode-color.service.spec.ts +9 -7
  39. package/libs/africanies-theme/src/lib/mode-color.service.ts +9 -7
  40. package/libs/africanies-theme/tailwind-preset.cjs +3 -3
  41. package/libs/africanies-ui/src/lib/avatar/avatar-menu.component.ts +25 -21
  42. package/libs/africanies-ui/src/lib/button/button.component.spec.ts +13 -8
  43. package/libs/africanies-ui/src/lib/chip/chip.component.ts +74 -6
  44. package/libs/africanies-ui/src/lib/layout/app-shell-header.component.ts +35 -12
  45. package/libs/africanies-ui/src/lib/layout/header-greeting.util.ts +2 -0
  46. package/libs/africanies-ui/src/lib/layout/header-weather.spec.ts +120 -9
  47. package/libs/africanies-ui/src/lib/layout/header-weather.ts +79 -18
  48. package/libs/africanies-ui/src/lib/navigation/segment/segment.component.ts +98 -22
  49. package/libs/africanies-ui/src/lib/navigation/shipping-mode-switch/shipping-mode-switch.component.ts +193 -65
  50. package/libs/africanies-ui/src/lib/navigation/side-nav/africanies-side-nav.component.html +4 -2
  51. package/libs/africanies-ui/src/lib/navigation/side-nav/africanies-side-nav.component.ts +3 -1
  52. package/libs/africanies-ui/src/lib/table/table.component.spec.ts +3 -0
  53. package/libs/africanies-ui/src/lib/table/table.component.ts +197 -57
  54. package/package.json +1 -1
  55. package/tools/build-icon-sprite.mjs +1 -1
@@ -0,0 +1,46 @@
1
+ # @africanies/africanies-theme
2
+
3
+ AFRICANIES design tokens (Tailwind preset), light/dark {@link ThemeService}, and shipping-mode accent helpers ({@link ModeColorService}).
4
+
5
+ ## Install
6
+
7
+ ```bash
8
+ npm install @africanies/africanies-theme @africanies/africanies-storage @africanies/africanies-core
9
+ ```
10
+
11
+ ## Tailwind
12
+
13
+ ```js
14
+ // tailwind.config.js
15
+ module.exports = {
16
+ presets: [require('@africanies/africanies-theme/tailwind-preset')],
17
+ content: [
18
+ './src/**/*.{html,ts}',
19
+ './node_modules/@africanies/africanies-ui/**/*.{js,mjs}',
20
+ ],
21
+ };
22
+ ```
23
+
24
+ > The preset file is published as `tailwind-preset.cjs` (package is ESM) but resolved via the `./tailwind-preset` export above.
25
+
26
+ See [THEME.md](./THEME.md) for the full palette, provisional typography scale, and legacy `$border-gray` mapping notes.
27
+
28
+ ## ThemeService
29
+
30
+ ```ts
31
+ import { inject, provideAppInitializer } from '@angular/core';
32
+ import { ThemeService } from '@africanies/africanies-theme';
33
+
34
+ provideAppInitializer(() => {
35
+ inject(ThemeService);
36
+ });
37
+ ```
38
+
39
+ ## ModeColorService
40
+
41
+ ```ts
42
+ const modeColor = inject(ModeColorService);
43
+ const { text, bg, bgSubtle } = modeColor.classes();
44
+ ```
45
+
46
+ Class strings are literals so Tailwind does not purge them.
@@ -0,0 +1,243 @@
1
+ import * as i0 from '@angular/core';
2
+ import { inject, computed, Injectable, signal } from '@angular/core';
3
+ import { ShippingModeService } from '@africanies/africanies-core';
4
+ import { DOCUMENT } from '@angular/common';
5
+ import { STORAGE_TOKEN, AFRICANIES_THEME_KEY } from '@africanies/africanies-storage';
6
+
7
+ /**
8
+ * Tailwind safelist side-effect for shipping-mode color utilities.
9
+ *
10
+ * WHY this file exists: JIT/content scanning only keeps class names that appear
11
+ * as *literal strings* in scanned sources. {@link ModeColorService} already
12
+ * returns these literals, but keeping a dedicated comment list makes the
13
+ * contract obvious for consumers who configure `safelist` or purge plugins.
14
+ *
15
+ * Do not rename these strings without updating ModeColorService and THEME.md.
16
+ *
17
+ * SFN (export / green):
18
+ * text-export-strong bg-export-strong hover:bg-export-hover border-export-strong
19
+ * text-export bg-export bg-export-subtle bg-export-light border-export
20
+ * hover:bg-export-light hover:bg-export-subtle dark:bg-export/15 dark:hover:bg-export/15
21
+ * dark:bg-[color-mix(in_srgb,#26bd5d_15%,#212529)] dark:bg-export dark:text-export dark:border-export
22
+ *
23
+ * STN (import / orange):
24
+ * text-import-strong bg-import-strong hover:bg-import-hover border-import-strong
25
+ * text-import bg-import bg-import-subtle bg-import-light border-import
26
+ * hover:bg-import-light hover:bg-import-subtle dark:bg-import/15 dark:hover:bg-import/15
27
+ * dark:bg-[color-mix(in_srgb,#f08829_15%,#212529)] dark:bg-import dark:text-import dark:border-import
28
+ */
29
+ const MODE_COLOR_SAFELIST = [
30
+ 'text-export',
31
+ 'text-export-strong',
32
+ 'bg-export',
33
+ 'bg-export-strong',
34
+ 'bg-export-subtle',
35
+ 'bg-export-light',
36
+ 'border-export',
37
+ 'border-export-strong',
38
+ 'hover:bg-export-hover',
39
+ 'hover:bg-export-light',
40
+ 'hover:bg-export-subtle',
41
+ 'dark:bg-export/15',
42
+ 'dark:hover:bg-export/15',
43
+ 'dark:hover:bg-export-light',
44
+ 'dark:bg-[color-mix(in_srgb,#26bd5d_15%,#212529)]',
45
+ 'dark:bg-export',
46
+ 'dark:text-export',
47
+ 'dark:border-export',
48
+ 'text-import',
49
+ 'text-import-strong',
50
+ 'bg-import',
51
+ 'bg-import-strong',
52
+ 'bg-import-subtle',
53
+ 'bg-import-light',
54
+ 'border-import',
55
+ 'border-import-strong',
56
+ 'hover:bg-import-hover',
57
+ 'hover:bg-import-light',
58
+ 'hover:bg-import-subtle',
59
+ 'dark:bg-import/15',
60
+ 'dark:hover:bg-import/15',
61
+ 'dark:hover:bg-import-light',
62
+ 'dark:bg-[color-mix(in_srgb,#f08829_15%,#212529)]',
63
+ 'dark:bg-import',
64
+ 'dark:text-import',
65
+ 'dark:border-import',
66
+ ];
67
+
68
+ /**
69
+ * Maps {@link ShippingModeService} to mode-accent Tailwind classes.
70
+ *
71
+ * - **SFN** → export green is primary
72
+ * - **STN** → import orange is primary
73
+ *
74
+ * WHY literal class strings: Tailwind's scanner cannot see dynamically built
75
+ * names like `` `text-${token}` ``. Returning full literals (`text-export`, …)
76
+ * keeps utilities in the compiled CSS. See {@link MODE_COLOR_SAFELIST}.
77
+ *
78
+ * @example
79
+ * ```html
80
+ * @let colors = modeColor.classes();
81
+ * <button type="button" [class]="colors.primary">Save</button>
82
+ * <span [class]="colors.text">Mode accent</span>
83
+ * ```
84
+ */
85
+ class ModeColorService {
86
+ shippingMode = inject(ShippingModeService);
87
+ /**
88
+ * Mode-dependent utility classes. Recomputes when shipping mode changes.
89
+ */
90
+ classes = computed(() => {
91
+ // Literal strings required for Tailwind content detection — do not interpolate.
92
+ if (this.shippingMode.mode() === 'sfn') {
93
+ return {
94
+ text: 'text-export dark:text-export',
95
+ bg: 'bg-export',
96
+ bgSubtle: 'bg-export-subtle',
97
+ border: 'border-export',
98
+ primary: 'bg-export text-white border-transparent hover:bg-export-strong dark:bg-export dark:hover:bg-export-light',
99
+ ghostPrimary: 'bg-transparent text-export border-transparent hover:bg-export-subtle dark:text-export dark:hover:bg-export/15',
100
+ soft: 'bg-export-subtle dark:bg-export/15',
101
+ softSolid: 'bg-export-subtle dark:bg-[color-mix(in_srgb,#26bd5d_15%,#212529)]',
102
+ softHover: 'hover:bg-export-subtle dark:hover:bg-export/15',
103
+ activeFill: 'bg-export text-white border-transparent hover:bg-export-strong dark:bg-export dark:text-white dark:hover:bg-export-light',
104
+ stroked: 'bg-surface text-export border-export hover:bg-export-subtle dark:bg-ink-950 dark:text-export dark:border-export dark:hover:bg-export/15',
105
+ };
106
+ }
107
+ return {
108
+ text: 'text-import-strong dark:text-import',
109
+ bg: 'bg-import',
110
+ bgSubtle: 'bg-import-subtle',
111
+ border: 'border-import',
112
+ primary: 'bg-import-strong text-white border-transparent hover:bg-import-hover dark:bg-import dark:hover:bg-import-light',
113
+ ghostPrimary: 'bg-transparent text-import-strong border-transparent hover:bg-import-subtle dark:text-import dark:hover:bg-import/15',
114
+ soft: 'bg-import-subtle dark:bg-import/15',
115
+ softSolid: 'bg-import-subtle dark:bg-[color-mix(in_srgb,#f08829_15%,#212529)]',
116
+ softHover: 'hover:bg-import-subtle dark:hover:bg-import/15',
117
+ activeFill: 'bg-import-strong text-white border-transparent hover:bg-import-hover dark:bg-import dark:text-white dark:hover:bg-import-light',
118
+ stroked: 'bg-surface text-import-strong border-import-strong hover:bg-import-subtle dark:bg-ink-950 dark:text-import dark:border-import dark:hover:bg-import/15',
119
+ };
120
+ }, /* @ts-ignore */
121
+ ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
122
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ModeColorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
123
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ModeColorService, providedIn: 'root' });
124
+ }
125
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ModeColorService, decorators: [{
126
+ type: Injectable,
127
+ args: [{ providedIn: 'root' }]
128
+ }] });
129
+
130
+ /**
131
+ * Application light/dark theme preference.
132
+ *
133
+ * WHY signals (not BehaviorSubject): theme is synchronous UI state read from
134
+ * templates and other services; a signal avoids RxJS subscription boilerplate
135
+ * and matches Angular 22 change detection. Persistence goes through
136
+ * {@link STORAGE_TOKEN} so tests can swap storage without touching `localStorage`.
137
+ *
138
+ * Applies the Tailwind `darkMode: 'class'` contract by toggling `dark` on
139
+ * `document.documentElement`, and sets `color-scheme` so native UI (date
140
+ * pickers, scrollbars, form controls) matches the app theme — class-based
141
+ * dark mode alone does not restyle browser chrome.
142
+ *
143
+ * @example
144
+ * ```ts
145
+ * // app.config.ts
146
+ * import { inject, provideAppInitializer } from '@angular/core';
147
+ * import { ThemeService } from '@africanies/africanies-theme';
148
+ *
149
+ * export const appConfig = {
150
+ * providers: [
151
+ * provideAppInitializer(() => {
152
+ * inject(ThemeService); // applies stored / system theme once
153
+ * }),
154
+ * ],
155
+ * };
156
+ *
157
+ * // In a component
158
+ * const theme = inject(ThemeService);
159
+ * theme.toggle();
160
+ * theme.setTheme('dark');
161
+ * const current = theme.theme(); // 'light' | 'dark'
162
+ * ```
163
+ */
164
+ class ThemeService {
165
+ storage = inject(STORAGE_TOKEN);
166
+ document = inject(DOCUMENT);
167
+ /**
168
+ * Current theme. Prefer reading via `theme()` in templates / computed values
169
+ * rather than caching the string, so dark-class consumers stay in sync.
170
+ */
171
+ theme = signal(this.resolveInitialTheme(), /* @ts-ignore */
172
+ ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
173
+ constructor() {
174
+ this.applyToDocument(this.theme());
175
+ }
176
+ /**
177
+ * Sets and persists the theme, updating the `dark` class and `color-scheme`
178
+ * on `<html>`.
179
+ *
180
+ * @param theme - Absolute preference to store.
181
+ */
182
+ setTheme(theme) {
183
+ this.theme.set(theme);
184
+ this.applyToDocument(theme);
185
+ try {
186
+ this.storage.set(AFRICANIES_THEME_KEY, theme);
187
+ }
188
+ catch {
189
+ // Persistence failure must not block the in-session visual toggle —
190
+ // private browsing / quota issues are transient for theme preference.
191
+ }
192
+ }
193
+ /**
194
+ * Flips between light and dark.
195
+ *
196
+ * @returns The theme after the toggle.
197
+ */
198
+ toggle() {
199
+ const next = this.theme() === 'light' ? 'dark' : 'light';
200
+ this.setTheme(next);
201
+ return next;
202
+ }
203
+ resolveInitialTheme() {
204
+ try {
205
+ const stored = this.storage.get(AFRICANIES_THEME_KEY);
206
+ if (stored === 'light' || stored === 'dark') {
207
+ return stored;
208
+ }
209
+ }
210
+ catch {
211
+ // Fall through to system preference when storage is unavailable.
212
+ }
213
+ return this.prefersDark() ? 'dark' : 'light';
214
+ }
215
+ prefersDark() {
216
+ const win = this.document.defaultView;
217
+ return !!win?.matchMedia?.('(prefers-color-scheme: dark)').matches;
218
+ }
219
+ applyToDocument(theme) {
220
+ const root = this.document.documentElement;
221
+ if (theme === 'dark') {
222
+ root.classList.add('dark');
223
+ }
224
+ else {
225
+ root.classList.remove('dark');
226
+ }
227
+ // Native date/time pickers follow `color-scheme`, not Tailwind's `dark` class.
228
+ root.style.colorScheme = theme;
229
+ }
230
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
231
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ThemeService, providedIn: 'root' });
232
+ }
233
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ThemeService, decorators: [{
234
+ type: Injectable,
235
+ args: [{ providedIn: 'root' }]
236
+ }], ctorParameters: () => [] });
237
+
238
+ /**
239
+ * Generated bundle index. Do not edit.
240
+ */
241
+
242
+ export { MODE_COLOR_SAFELIST, ModeColorService, ThemeService };
243
+ //# sourceMappingURL=africanies-africanies-theme.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"africanies-africanies-theme.mjs","sources":["../../../../libs/africanies-theme/src/lib/mode-color.safelist.ts","../../../../libs/africanies-theme/src/lib/mode-color.service.ts","../../../../libs/africanies-theme/src/lib/theme.service.ts","../../../../libs/africanies-theme/src/africanies-africanies-theme.ts"],"sourcesContent":["/**\n * Tailwind safelist side-effect for shipping-mode color utilities.\n *\n * WHY this file exists: JIT/content scanning only keeps class names that appear\n * as *literal strings* in scanned sources. {@link ModeColorService} already\n * returns these literals, but keeping a dedicated comment list makes the\n * contract obvious for consumers who configure `safelist` or purge plugins.\n *\n * Do not rename these strings without updating ModeColorService and THEME.md.\n *\n * SFN (export / green):\n * text-export-strong bg-export-strong hover:bg-export-hover border-export-strong\n * text-export bg-export bg-export-subtle bg-export-light border-export\n * hover:bg-export-light hover:bg-export-subtle dark:bg-export/15 dark:hover:bg-export/15\n * dark:bg-[color-mix(in_srgb,#26bd5d_15%,#212529)] dark:bg-export dark:text-export dark:border-export\n *\n * STN (import / orange):\n * text-import-strong bg-import-strong hover:bg-import-hover border-import-strong\n * text-import bg-import bg-import-subtle bg-import-light border-import\n * hover:bg-import-light hover:bg-import-subtle dark:bg-import/15 dark:hover:bg-import/15\n * dark:bg-[color-mix(in_srgb,#f08829_15%,#212529)] dark:bg-import dark:text-import dark:border-import\n */\nexport const MODE_COLOR_SAFELIST = [\n 'text-export',\n 'text-export-strong',\n 'bg-export',\n 'bg-export-strong',\n 'bg-export-subtle',\n 'bg-export-light',\n 'border-export',\n 'border-export-strong',\n 'hover:bg-export-hover',\n 'hover:bg-export-light',\n 'hover:bg-export-subtle',\n 'dark:bg-export/15',\n 'dark:hover:bg-export/15',\n 'dark:hover:bg-export-light',\n 'dark:bg-[color-mix(in_srgb,#26bd5d_15%,#212529)]',\n 'dark:bg-export',\n 'dark:text-export',\n 'dark:border-export',\n 'text-import',\n 'text-import-strong',\n 'bg-import',\n 'bg-import-strong',\n 'bg-import-subtle',\n 'bg-import-light',\n 'border-import',\n 'border-import-strong',\n 'hover:bg-import-hover',\n 'hover:bg-import-light',\n 'hover:bg-import-subtle',\n 'dark:bg-import/15',\n 'dark:hover:bg-import/15',\n 'dark:hover:bg-import-light',\n 'dark:bg-[color-mix(in_srgb,#f08829_15%,#212529)]',\n 'dark:bg-import',\n 'dark:text-import',\n 'dark:border-import',\n] as const;\n","import { computed, inject, Injectable } from '@angular/core';\n\nimport { ShippingModeService } from '@africanies/africanies-core';\n\n/**\n * Tailwind class bundle for the active shipping mode (SFN export / STN import).\n *\n * Use these for **primary** product chrome: CTAs, selected controls, progress,\n * and accent text. Semantic colors (danger / warning) stay mode-independent.\n */\nexport interface ModeColorClasses {\n /**\n * Accessible accent text — mode brand color in light and dark.\n */\n text: string;\n /** Solid background utility, e.g. `bg-export`. */\n bg: string;\n /** Soft background utility, e.g. `bg-export-subtle`. */\n bgSubtle: string;\n /** Border matching the mode accent, e.g. `border-export`. */\n border: string;\n /**\n * Filled primary CTA — `variant=\"primary\"` on buttons.\n * Includes hover utility as a literal so Tailwind keeps it.\n */\n primary: string;\n /**\n * Transparent / text-only CTA — `variant=\"ghost-primary\"` on buttons.\n * Mode accent text + soft hover fill.\n */\n ghostPrimary: string;\n /**\n * Soft highlight for selected / active rows (works in dark mode).\n * Dark uses a translucent tint — fine over solid surfaces, not for\n * sticky overlays (see {@link softSolid}).\n */\n soft: string;\n /**\n * Opaque soft fill — same tint as {@link soft}, but dark mode mixes into\n * ink so scrolled content cannot show through (sticky table headers/cells).\n */\n softSolid: string;\n /**\n * Soft hover highlight for menus and lists.\n */\n softHover: string;\n /**\n * Active nav leaf / collapsed rail — solid mode fill + white text.\n */\n activeFill: string;\n /**\n * Stroked secondary CTA — white fill, mode border + text (portal `.btn-stroked`).\n */\n stroked: string;\n}\n\n/**\n * Maps {@link ShippingModeService} to mode-accent Tailwind classes.\n *\n * - **SFN** → export green is primary\n * - **STN** → import orange is primary\n *\n * WHY literal class strings: Tailwind's scanner cannot see dynamically built\n * names like `` `text-${token}` ``. Returning full literals (`text-export`, …)\n * keeps utilities in the compiled CSS. See {@link MODE_COLOR_SAFELIST}.\n *\n * @example\n * ```html\n * @let colors = modeColor.classes();\n * <button type=\"button\" [class]=\"colors.primary\">Save</button>\n * <span [class]=\"colors.text\">Mode accent</span>\n * ```\n */\n@Injectable({ providedIn: 'root' })\nexport class ModeColorService {\n private readonly shippingMode = inject(ShippingModeService);\n\n /**\n * Mode-dependent utility classes. Recomputes when shipping mode changes.\n */\n readonly classes = computed<ModeColorClasses>(() => {\n // Literal strings required for Tailwind content detection — do not interpolate.\n if (this.shippingMode.mode() === 'sfn') {\n return {\n text: 'text-export dark:text-export',\n bg: 'bg-export',\n bgSubtle: 'bg-export-subtle',\n border: 'border-export',\n primary:\n 'bg-export text-white border-transparent hover:bg-export-strong dark:bg-export dark:hover:bg-export-light',\n ghostPrimary:\n 'bg-transparent text-export border-transparent hover:bg-export-subtle dark:text-export dark:hover:bg-export/15',\n soft: 'bg-export-subtle dark:bg-export/15',\n softSolid:\n 'bg-export-subtle dark:bg-[color-mix(in_srgb,#26bd5d_15%,#212529)]',\n softHover: 'hover:bg-export-subtle dark:hover:bg-export/15',\n activeFill:\n 'bg-export text-white border-transparent hover:bg-export-strong dark:bg-export dark:text-white dark:hover:bg-export-light',\n stroked:\n 'bg-surface text-export border-export hover:bg-export-subtle dark:bg-ink-950 dark:text-export dark:border-export dark:hover:bg-export/15',\n };\n }\n return {\n text: 'text-import-strong dark:text-import',\n bg: 'bg-import',\n bgSubtle: 'bg-import-subtle',\n border: 'border-import',\n primary:\n 'bg-import-strong text-white border-transparent hover:bg-import-hover dark:bg-import dark:hover:bg-import-light',\n ghostPrimary:\n 'bg-transparent text-import-strong border-transparent hover:bg-import-subtle dark:text-import dark:hover:bg-import/15',\n soft: 'bg-import-subtle dark:bg-import/15',\n softSolid:\n 'bg-import-subtle dark:bg-[color-mix(in_srgb,#f08829_15%,#212529)]',\n softHover: 'hover:bg-import-subtle dark:hover:bg-import/15',\n activeFill:\n 'bg-import-strong text-white border-transparent hover:bg-import-hover dark:bg-import dark:text-white dark:hover:bg-import-light',\n stroked:\n 'bg-surface text-import-strong border-import-strong hover:bg-import-subtle dark:bg-ink-950 dark:text-import dark:border-import dark:hover:bg-import/15',\n };\n });\n}\n","import { DOCUMENT } from '@angular/common';\nimport { inject, Injectable, signal } from '@angular/core';\n\nimport { AFRICANIES_THEME_KEY, STORAGE_TOKEN } from '@africanies/africanies-storage';\n\nimport type { Theme } from './theme.types';\n\n/**\n * Application light/dark theme preference.\n *\n * WHY signals (not BehaviorSubject): theme is synchronous UI state read from\n * templates and other services; a signal avoids RxJS subscription boilerplate\n * and matches Angular 22 change detection. Persistence goes through\n * {@link STORAGE_TOKEN} so tests can swap storage without touching `localStorage`.\n *\n * Applies the Tailwind `darkMode: 'class'` contract by toggling `dark` on\n * `document.documentElement`, and sets `color-scheme` so native UI (date\n * pickers, scrollbars, form controls) matches the app theme — class-based\n * dark mode alone does not restyle browser chrome.\n *\n * @example\n * ```ts\n * // app.config.ts\n * import { inject, provideAppInitializer } from '@angular/core';\n * import { ThemeService } from '@africanies/africanies-theme';\n *\n * export const appConfig = {\n * providers: [\n * provideAppInitializer(() => {\n * inject(ThemeService); // applies stored / system theme once\n * }),\n * ],\n * };\n *\n * // In a component\n * const theme = inject(ThemeService);\n * theme.toggle();\n * theme.setTheme('dark');\n * const current = theme.theme(); // 'light' | 'dark'\n * ```\n */\n@Injectable({ providedIn: 'root' })\nexport class ThemeService {\n private readonly storage = inject(STORAGE_TOKEN);\n private readonly document = inject(DOCUMENT);\n\n /**\n * Current theme. Prefer reading via `theme()` in templates / computed values\n * rather than caching the string, so dark-class consumers stay in sync.\n */\n readonly theme = signal<Theme>(this.resolveInitialTheme());\n\n constructor() {\n this.applyToDocument(this.theme());\n }\n\n /**\n * Sets and persists the theme, updating the `dark` class and `color-scheme`\n * on `<html>`.\n *\n * @param theme - Absolute preference to store.\n */\n setTheme(theme: Theme): void {\n this.theme.set(theme);\n this.applyToDocument(theme);\n try {\n this.storage.set(AFRICANIES_THEME_KEY, theme);\n } catch {\n // Persistence failure must not block the in-session visual toggle —\n // private browsing / quota issues are transient for theme preference.\n }\n }\n\n /**\n * Flips between light and dark.\n *\n * @returns The theme after the toggle.\n */\n toggle(): Theme {\n const next: Theme = this.theme() === 'light' ? 'dark' : 'light';\n this.setTheme(next);\n return next;\n }\n\n private resolveInitialTheme(): Theme {\n try {\n const stored = this.storage.get<Theme>(AFRICANIES_THEME_KEY);\n if (stored === 'light' || stored === 'dark') {\n return stored;\n }\n } catch {\n // Fall through to system preference when storage is unavailable.\n }\n return this.prefersDark() ? 'dark' : 'light';\n }\n\n private prefersDark(): boolean {\n const win = this.document.defaultView;\n return !!win?.matchMedia?.('(prefers-color-scheme: dark)').matches;\n }\n\n private applyToDocument(theme: Theme): void {\n const root = this.document.documentElement;\n if (theme === 'dark') {\n root.classList.add('dark');\n } else {\n root.classList.remove('dark');\n }\n // Native date/time pickers follow `color-scheme`, not Tailwind's `dark` class.\n root.style.colorScheme = theme;\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
@@ -0,0 +1,35 @@
1
+ {
2
+ "name": "@africanies/africanies-theme",
3
+ "version": "0.0.2",
4
+ "peerDependencies": {
5
+ "@angular/common": "^22.0.0",
6
+ "@angular/core": "^22.0.0",
7
+ "@africanies/africanies-core": ">=0.0.2 <0.1.0",
8
+ "@africanies/africanies-storage": ">=0.0.1 <0.1.0"
9
+ },
10
+ "sideEffects": false,
11
+ "publishConfig": {
12
+ "access": "public"
13
+ },
14
+ "exports": {
15
+ "./tailwind-preset": "./tailwind-preset.cjs",
16
+ "./package.json": {
17
+ "default": "./package.json"
18
+ },
19
+ ".": {
20
+ "types": "./types/africanies-africanies-theme.d.ts",
21
+ "default": "./fesm2022/africanies-africanies-theme.mjs"
22
+ }
23
+ },
24
+ "files": [
25
+ "**/*",
26
+ "tailwind-preset.cjs",
27
+ "THEME.md"
28
+ ],
29
+ "module": "fesm2022/africanies-africanies-theme.mjs",
30
+ "typings": "types/africanies-africanies-theme.d.ts",
31
+ "type": "module",
32
+ "dependencies": {
33
+ "tslib": "^2.3.0"
34
+ }
35
+ }