@africanies/angular-web-sdk 0.1.3 → 0.1.5

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