@tmdjr/ngx-theme-picker 0.0.1
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.
- package/README.md +63 -0
- package/fesm2022/tmdjr-ngx-theme-picker.mjs +259 -0
- package/fesm2022/tmdjr-ngx-theme-picker.mjs.map +1 -0
- package/index.d.ts +41 -0
- package/package.json +26 -0
package/README.md
ADDED
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
# NgxThemePicker
|
|
2
|
+
|
|
3
|
+
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.2.0.
|
|
4
|
+
|
|
5
|
+
## Code scaffolding
|
|
6
|
+
|
|
7
|
+
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
ng generate component component-name
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
ng generate --help
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Building
|
|
20
|
+
|
|
21
|
+
To build the library, run:
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
ng build ngx-theme-picker
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
|
|
28
|
+
|
|
29
|
+
### Publishing the Library
|
|
30
|
+
|
|
31
|
+
Once the project is built, you can publish your library by following these steps:
|
|
32
|
+
|
|
33
|
+
1. Navigate to the `dist` directory:
|
|
34
|
+
```bash
|
|
35
|
+
cd dist/ngx-theme-picker
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
2. Run the `npm publish` command to publish your library to the npm registry:
|
|
39
|
+
```bash
|
|
40
|
+
npm publish
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## Running unit tests
|
|
44
|
+
|
|
45
|
+
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
|
46
|
+
|
|
47
|
+
```bash
|
|
48
|
+
ng test
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## Running end-to-end tests
|
|
52
|
+
|
|
53
|
+
For end-to-end (e2e) testing, run:
|
|
54
|
+
|
|
55
|
+
```bash
|
|
56
|
+
ng e2e
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
|
|
60
|
+
|
|
61
|
+
## Additional Resources
|
|
62
|
+
|
|
63
|
+
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
|
|
@@ -0,0 +1,259 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { signal, resource, linkedSignal, Injectable, input, Component, inject } from '@angular/core';
|
|
3
|
+
import { MatIconButton } from '@angular/material/button';
|
|
4
|
+
import { MatIcon } from '@angular/material/icon';
|
|
5
|
+
import { MatMenuItem, MatMenu, MatMenuTrigger } from '@angular/material/menu';
|
|
6
|
+
import { MatSlideToggle } from '@angular/material/slide-toggle';
|
|
7
|
+
import { MatTooltip } from '@angular/material/tooltip';
|
|
8
|
+
|
|
9
|
+
class ThemePickerService {
|
|
10
|
+
static THEME_EXAMPLE_ICON = 'assets/img/theme-demo-icon.svg';
|
|
11
|
+
static DEFAULT_THEME = 'cyan-palette';
|
|
12
|
+
static THEME_STRORAGE_KEY = 'theme-picker-current-name';
|
|
13
|
+
static DARK_MODE_STRORAGE_KEY = 'dark-mode';
|
|
14
|
+
static THEMES = [
|
|
15
|
+
{
|
|
16
|
+
displayName: 'Red Palette',
|
|
17
|
+
name: 'red-palette',
|
|
18
|
+
color: '#ffd9d4',
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
displayName: 'Green Palette',
|
|
22
|
+
name: 'green-palette',
|
|
23
|
+
color: '#76ff61',
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
displayName: 'Blue Palette',
|
|
27
|
+
name: 'blue-palette',
|
|
28
|
+
color: '#e0e0fe',
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
displayName: 'Yellow Palette',
|
|
32
|
+
name: 'yellow-palette',
|
|
33
|
+
color: '#eaea01',
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
displayName: 'Cyan Palette',
|
|
37
|
+
name: 'cyan-palette',
|
|
38
|
+
color: '#00fbfb',
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
displayName: 'Magenta Palette',
|
|
42
|
+
name: 'magenta-palette',
|
|
43
|
+
color: '#ffd6f5',
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
displayName: 'Orange Palette',
|
|
47
|
+
name: 'orange-palette',
|
|
48
|
+
color: '#ffdcc7',
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
displayName: 'Chartreuse Palette',
|
|
52
|
+
name: 'chartreuse-palette',
|
|
53
|
+
color: '#82ff0d',
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
displayName: 'Spring-Green Palette',
|
|
57
|
+
name: 'spring-green-palette',
|
|
58
|
+
color: '#62ff93',
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
displayName: 'Azure Palette',
|
|
62
|
+
name: 'azure-palette',
|
|
63
|
+
color: '#d6e3fe',
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
color: '#810081',
|
|
67
|
+
displayName: 'Violet Palette',
|
|
68
|
+
name: 'violet-palette',
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
displayName: 'Rose Palette',
|
|
72
|
+
name: 'rose-palette',
|
|
73
|
+
color: '#ffd8e1',
|
|
74
|
+
},
|
|
75
|
+
];
|
|
76
|
+
darkMode = signal(localStorage.getItem(ThemePickerService.DARK_MODE_STRORAGE_KEY) === 'true', ...(ngDevMode ? [{ debugName: "darkMode" }] : []));
|
|
77
|
+
darkModeResource = resource({
|
|
78
|
+
params: () => this.darkMode(),
|
|
79
|
+
loader: async ({ params: darkMode }) => {
|
|
80
|
+
await localStorage.setItem(ThemePickerService.DARK_MODE_STRORAGE_KEY, darkMode.toString());
|
|
81
|
+
},
|
|
82
|
+
});
|
|
83
|
+
userSelectedTheme = signal(localStorage.getItem(ThemePickerService.THEME_STRORAGE_KEY) ??
|
|
84
|
+
ThemePickerService.DEFAULT_THEME, ...(ngDevMode ? [{ debugName: "userSelectedTheme" }] : []));
|
|
85
|
+
currentTheme = linkedSignal({
|
|
86
|
+
source: this.userSelectedTheme,
|
|
87
|
+
computation: (newTheme, previous) => {
|
|
88
|
+
return this.setThemeStyleAndLocalStorage(newTheme)
|
|
89
|
+
? newTheme
|
|
90
|
+
: previous?.value ?? ThemePickerService.DEFAULT_THEME;
|
|
91
|
+
},
|
|
92
|
+
});
|
|
93
|
+
setThemeStyleAndLocalStorage(newTheme) {
|
|
94
|
+
localStorage.setItem(ThemePickerService.THEME_STRORAGE_KEY, newTheme);
|
|
95
|
+
document.body.className = `${newTheme} ${this.darkMode() ? 'dark-mode' : 'light-mode'}`;
|
|
96
|
+
return true;
|
|
97
|
+
}
|
|
98
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ThemePickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
99
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ThemePickerService, providedIn: 'root' });
|
|
100
|
+
}
|
|
101
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ThemePickerService, decorators: [{
|
|
102
|
+
type: Injectable,
|
|
103
|
+
args: [{
|
|
104
|
+
providedIn: 'root',
|
|
105
|
+
}]
|
|
106
|
+
}] });
|
|
107
|
+
|
|
108
|
+
// Menu Item
|
|
109
|
+
class ThemePickerMenuItemComponent {
|
|
110
|
+
theme = input.required(...(ngDevMode ? [{ debugName: "theme" }] : []));
|
|
111
|
+
isCurrentTheme = input.required(...(ngDevMode ? [{ debugName: "isCurrentTheme" }] : []));
|
|
112
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ThemePickerMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
113
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: ThemePickerMenuItemComponent, isStandalone: true, selector: "ngx-theme-picker-menu-item", inputs: { theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: true, transformFunction: null }, isCurrentTheme: { classPropertyName: "isCurrentTheme", publicName: "isCurrentTheme", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
|
|
114
|
+
<button mat-menu-item>
|
|
115
|
+
@if (isCurrentTheme(); as isCurrentTheme) {
|
|
116
|
+
<mat-icon class="docs-theme-selected-icon">radio_button_checked</mat-icon>
|
|
117
|
+
} @else {
|
|
118
|
+
<mat-icon>radio_button_unchecked</mat-icon>
|
|
119
|
+
}
|
|
120
|
+
<span>{{ theme().displayName }}</span>
|
|
121
|
+
<svg
|
|
122
|
+
matMenuItemIcon
|
|
123
|
+
class="theme-example-icon"
|
|
124
|
+
width="80"
|
|
125
|
+
height="80"
|
|
126
|
+
viewBox="0 0 80 80"
|
|
127
|
+
>
|
|
128
|
+
<path
|
|
129
|
+
class="theme-example-background"
|
|
130
|
+
d="M77.87 0C79.05 0 80 .95 80 2.13v75.74c0 1.17-.95 2.13-2.13 2.13H2.13C.96 80 0 79.04 0 77.87V2.13C0 .95.96 0 2.13 0h75.74z"
|
|
131
|
+
/>
|
|
132
|
+
<path
|
|
133
|
+
[attr.fill]="theme().color"
|
|
134
|
+
d="M54 40c3.32 0 6 2.69 6 6 0 1.2 0-1.2 0 0 0 3.31-2.68 6-6 6H26c-3.31 0-6-2.69-6-6 0-1.2 0 1.2 0 0 0-3.31 2.69-6 6-6h28z"
|
|
135
|
+
/>
|
|
136
|
+
<path [attr.fill]="theme().color" d="M0 0h80v17.24H0V0z" />
|
|
137
|
+
</svg>
|
|
138
|
+
</button>
|
|
139
|
+
`, isInline: true, styles: [":host .theme-example-icon{margin-right:0;margin-left:24px;order:1;width:24px;height:24px;border-radius:4px;border:solid 1px color-mix(in srgb,var(--mat-sys-outline-variant) 50%,transparent)}:host .theme-example-icon .theme-example-background{fill:var(--mat-sys-surface-container-lowest)}\n"], dependencies: [{ kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
140
|
+
}
|
|
141
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ThemePickerMenuItemComponent, decorators: [{
|
|
142
|
+
type: Component,
|
|
143
|
+
args: [{ selector: 'ngx-theme-picker-menu-item', imports: [MatMenuItem, MatIcon], template: `
|
|
144
|
+
<button mat-menu-item>
|
|
145
|
+
@if (isCurrentTheme(); as isCurrentTheme) {
|
|
146
|
+
<mat-icon class="docs-theme-selected-icon">radio_button_checked</mat-icon>
|
|
147
|
+
} @else {
|
|
148
|
+
<mat-icon>radio_button_unchecked</mat-icon>
|
|
149
|
+
}
|
|
150
|
+
<span>{{ theme().displayName }}</span>
|
|
151
|
+
<svg
|
|
152
|
+
matMenuItemIcon
|
|
153
|
+
class="theme-example-icon"
|
|
154
|
+
width="80"
|
|
155
|
+
height="80"
|
|
156
|
+
viewBox="0 0 80 80"
|
|
157
|
+
>
|
|
158
|
+
<path
|
|
159
|
+
class="theme-example-background"
|
|
160
|
+
d="M77.87 0C79.05 0 80 .95 80 2.13v75.74c0 1.17-.95 2.13-2.13 2.13H2.13C.96 80 0 79.04 0 77.87V2.13C0 .95.96 0 2.13 0h75.74z"
|
|
161
|
+
/>
|
|
162
|
+
<path
|
|
163
|
+
[attr.fill]="theme().color"
|
|
164
|
+
d="M54 40c3.32 0 6 2.69 6 6 0 1.2 0-1.2 0 0 0 3.31-2.68 6-6 6H26c-3.31 0-6-2.69-6-6 0-1.2 0 1.2 0 0 0-3.31 2.69-6 6-6h28z"
|
|
165
|
+
/>
|
|
166
|
+
<path [attr.fill]="theme().color" d="M0 0h80v17.24H0V0z" />
|
|
167
|
+
</svg>
|
|
168
|
+
</button>
|
|
169
|
+
`, styles: [":host .theme-example-icon{margin-right:0;margin-left:24px;order:1;width:24px;height:24px;border-radius:4px;border:solid 1px color-mix(in srgb,var(--mat-sys-outline-variant) 50%,transparent)}:host .theme-example-icon .theme-example-background{fill:var(--mat-sys-surface-container-lowest)}\n"] }]
|
|
170
|
+
}] });
|
|
171
|
+
// Menu
|
|
172
|
+
class NgxThemePicker {
|
|
173
|
+
themePickerService = inject(ThemePickerService);
|
|
174
|
+
themes = ThemePickerService.THEMES;
|
|
175
|
+
currentTheme = this.themePickerService.currentTheme;
|
|
176
|
+
darkMode = this.themePickerService.darkMode;
|
|
177
|
+
selectTheme(theme) {
|
|
178
|
+
this.themePickerService.userSelectedTheme.set(theme);
|
|
179
|
+
}
|
|
180
|
+
toggleDarkMode() {
|
|
181
|
+
this.themePickerService.darkMode.set(!this.darkMode());
|
|
182
|
+
}
|
|
183
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NgxThemePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
184
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: NgxThemePicker, isStandalone: true, selector: "ngx-theme-picker", ngImport: i0, template: `
|
|
185
|
+
<button
|
|
186
|
+
mat-icon-button
|
|
187
|
+
[mat-menu-trigger-for]="themeMenu"
|
|
188
|
+
matTooltip="Select a theme for the documentation"
|
|
189
|
+
>
|
|
190
|
+
<mat-icon>format_color_fill</mat-icon>
|
|
191
|
+
</button>
|
|
192
|
+
|
|
193
|
+
<mat-menu #themeMenu="matMenu" xPosition="before">
|
|
194
|
+
<div mat-menu-item>
|
|
195
|
+
<mat-slide-toggle
|
|
196
|
+
[checked]="darkMode()"
|
|
197
|
+
(toggleChange)="toggleDarkMode()"
|
|
198
|
+
>Dark Mode</mat-slide-toggle
|
|
199
|
+
>
|
|
200
|
+
</div>
|
|
201
|
+
@for (theme of themes; track $index) {
|
|
202
|
+
<ngx-theme-picker-menu-item
|
|
203
|
+
[theme]="theme"
|
|
204
|
+
[isCurrentTheme]="theme.name === currentTheme()"
|
|
205
|
+
(click)="selectTheme(theme.name)"
|
|
206
|
+
></ngx-theme-picker-menu-item>
|
|
207
|
+
}
|
|
208
|
+
</mat-menu>
|
|
209
|
+
`, isInline: true, styles: ["@use \"@angular/material\" as mat;:host button{@include mat.icon-overrides((color: var(--mat-sys-primary),));}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: ThemePickerMenuItemComponent, selector: "ngx-theme-picker-menu-item", inputs: ["theme", "isCurrentTheme"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }] });
|
|
210
|
+
}
|
|
211
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NgxThemePicker, decorators: [{
|
|
212
|
+
type: Component,
|
|
213
|
+
args: [{ selector: 'ngx-theme-picker', imports: [
|
|
214
|
+
MatIconButton,
|
|
215
|
+
MatMenu,
|
|
216
|
+
MatMenuTrigger,
|
|
217
|
+
MatIcon,
|
|
218
|
+
MatTooltip,
|
|
219
|
+
MatSlideToggle,
|
|
220
|
+
ThemePickerMenuItemComponent,
|
|
221
|
+
MatMenuItem,
|
|
222
|
+
], template: `
|
|
223
|
+
<button
|
|
224
|
+
mat-icon-button
|
|
225
|
+
[mat-menu-trigger-for]="themeMenu"
|
|
226
|
+
matTooltip="Select a theme for the documentation"
|
|
227
|
+
>
|
|
228
|
+
<mat-icon>format_color_fill</mat-icon>
|
|
229
|
+
</button>
|
|
230
|
+
|
|
231
|
+
<mat-menu #themeMenu="matMenu" xPosition="before">
|
|
232
|
+
<div mat-menu-item>
|
|
233
|
+
<mat-slide-toggle
|
|
234
|
+
[checked]="darkMode()"
|
|
235
|
+
(toggleChange)="toggleDarkMode()"
|
|
236
|
+
>Dark Mode</mat-slide-toggle
|
|
237
|
+
>
|
|
238
|
+
</div>
|
|
239
|
+
@for (theme of themes; track $index) {
|
|
240
|
+
<ngx-theme-picker-menu-item
|
|
241
|
+
[theme]="theme"
|
|
242
|
+
[isCurrentTheme]="theme.name === currentTheme()"
|
|
243
|
+
(click)="selectTheme(theme.name)"
|
|
244
|
+
></ngx-theme-picker-menu-item>
|
|
245
|
+
}
|
|
246
|
+
</mat-menu>
|
|
247
|
+
`, styles: ["@use \"@angular/material\" as mat;:host button{@include mat.icon-overrides((color: var(--mat-sys-primary),));}\n"] }]
|
|
248
|
+
}] });
|
|
249
|
+
|
|
250
|
+
/*
|
|
251
|
+
* Public API Surface of ngx-theme-picker
|
|
252
|
+
*/
|
|
253
|
+
|
|
254
|
+
/**
|
|
255
|
+
* Generated bundle index. Do not edit.
|
|
256
|
+
*/
|
|
257
|
+
|
|
258
|
+
export { NgxThemePicker, ThemePickerMenuItemComponent, ThemePickerService };
|
|
259
|
+
//# sourceMappingURL=tmdjr-ngx-theme-picker.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tmdjr-ngx-theme-picker.mjs","sources":["../../../projects/ngx-theme-picker/src/lib/theme-picker.service.ts","../../../projects/ngx-theme-picker/src/lib/ngx-theme-picker.ts","../../../projects/ngx-theme-picker/src/public-api.ts","../../../projects/ngx-theme-picker/src/tmdjr-ngx-theme-picker.ts"],"sourcesContent":["import {\n Injectable,\n linkedSignal,\n resource,\n signal,\n} from '@angular/core';\n\nexport interface DocsSiteTheme {\n name: string;\n displayName: string;\n color: string;\n}\n\n@Injectable({\n providedIn: 'root',\n})\nexport class ThemePickerService {\n static THEME_EXAMPLE_ICON = 'assets/img/theme-demo-icon.svg';\n static DEFAULT_THEME = 'cyan-palette';\n static THEME_STRORAGE_KEY: string = 'theme-picker-current-name';\n static DARK_MODE_STRORAGE_KEY: string = 'dark-mode';\n static THEMES: DocsSiteTheme[] = [\n {\n displayName: 'Red Palette',\n name: 'red-palette',\n color: '#ffd9d4',\n },\n {\n displayName: 'Green Palette',\n name: 'green-palette',\n color: '#76ff61',\n },\n {\n displayName: 'Blue Palette',\n name: 'blue-palette',\n color: '#e0e0fe',\n },\n {\n displayName: 'Yellow Palette',\n name: 'yellow-palette',\n color: '#eaea01',\n },\n {\n displayName: 'Cyan Palette',\n name: 'cyan-palette',\n color: '#00fbfb',\n },\n {\n displayName: 'Magenta Palette',\n name: 'magenta-palette',\n color: '#ffd6f5',\n },\n {\n displayName: 'Orange Palette',\n name: 'orange-palette',\n color: '#ffdcc7',\n },\n {\n displayName: 'Chartreuse Palette',\n name: 'chartreuse-palette',\n color: '#82ff0d',\n },\n {\n displayName: 'Spring-Green Palette',\n name: 'spring-green-palette',\n color: '#62ff93',\n },\n {\n displayName: 'Azure Palette',\n name: 'azure-palette',\n color: '#d6e3fe',\n },\n {\n color: '#810081',\n displayName: 'Violet Palette',\n name: 'violet-palette',\n },\n {\n displayName: 'Rose Palette',\n name: 'rose-palette',\n color: '#ffd8e1',\n },\n ];\n\n darkMode = signal<boolean>(\n localStorage.getItem(\n ThemePickerService.DARK_MODE_STRORAGE_KEY\n ) === 'true'\n );\n darkModeResource = resource({\n params: () => this.darkMode(),\n loader: async ({ params: darkMode }) => {\n await localStorage.setItem(\n ThemePickerService.DARK_MODE_STRORAGE_KEY,\n darkMode.toString()\n );\n },\n });\n\n userSelectedTheme = signal<string>(\n localStorage.getItem(ThemePickerService.THEME_STRORAGE_KEY) ??\n ThemePickerService.DEFAULT_THEME\n );\n currentTheme = linkedSignal<string, string>({\n source: this.userSelectedTheme,\n computation: (newTheme, previous) => {\n return this.setThemeStyleAndLocalStorage(newTheme)\n ? newTheme\n : previous?.value ?? ThemePickerService.DEFAULT_THEME;\n },\n });\n\n setThemeStyleAndLocalStorage(newTheme: string) {\n localStorage.setItem(\n ThemePickerService.THEME_STRORAGE_KEY,\n newTheme\n );\n document.body.className = `${newTheme} ${\n this.darkMode() ? 'dark-mode' : 'light-mode'\n }`;\n return true;\n }\n}\n","import { Component, inject, input } from '@angular/core';\nimport { MatIconButton } from '@angular/material/button';\nimport { MatIcon } from '@angular/material/icon';\nimport { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';\nimport { MatSlideToggle } from '@angular/material/slide-toggle';\nimport { MatTooltip } from '@angular/material/tooltip';\nimport { DocsSiteTheme, ThemePickerService } from './theme-picker.service';\n\n// Menu Item\n@Component({\n selector: 'ngx-theme-picker-menu-item',\n imports: [MatMenuItem, MatIcon],\n template: `\n <button mat-menu-item>\n @if (isCurrentTheme(); as isCurrentTheme) {\n <mat-icon class=\"docs-theme-selected-icon\">radio_button_checked</mat-icon>\n } @else {\n <mat-icon>radio_button_unchecked</mat-icon>\n }\n <span>{{ theme().displayName }}</span>\n <svg\n matMenuItemIcon\n class=\"theme-example-icon\"\n width=\"80\"\n height=\"80\"\n viewBox=\"0 0 80 80\"\n >\n <path\n class=\"theme-example-background\"\n d=\"M77.87 0C79.05 0 80 .95 80 2.13v75.74c0 1.17-.95 2.13-2.13 2.13H2.13C.96 80 0 79.04 0 77.87V2.13C0 .95.96 0 2.13 0h75.74z\"\n />\n <path\n [attr.fill]=\"theme().color\"\n d=\"M54 40c3.32 0 6 2.69 6 6 0 1.2 0-1.2 0 0 0 3.31-2.68 6-6 6H26c-3.31 0-6-2.69-6-6 0-1.2 0 1.2 0 0 0-3.31 2.69-6 6-6h28z\"\n />\n <path [attr.fill]=\"theme().color\" d=\"M0 0h80v17.24H0V0z\" />\n </svg>\n </button>\n `,\n styles: [\n `\n :host {\n .theme-example-icon {\n margin-right: 0;\n margin-left: 24px;\n order: 1;\n width: 24px;\n height: 24px;\n border-radius: 4px;\n border: solid 1px\n color-mix(in srgb, var(--mat-sys-outline-variant) 50%, transparent);\n\n .theme-example-background {\n fill: var(--mat-sys-surface-container-lowest);\n }\n }\n }\n `,\n ],\n})\nexport class ThemePickerMenuItemComponent {\n theme = input.required<DocsSiteTheme>();\n isCurrentTheme = input.required<boolean>();\n}\n// Menu\n@Component({\n selector: 'ngx-theme-picker',\n imports: [\n MatIconButton,\n MatMenu,\n MatMenuTrigger,\n MatIcon,\n MatTooltip,\n MatSlideToggle,\n ThemePickerMenuItemComponent,\n MatMenuItem,\n ],\n template: `\n <button\n mat-icon-button\n [mat-menu-trigger-for]=\"themeMenu\"\n matTooltip=\"Select a theme for the documentation\"\n >\n <mat-icon>format_color_fill</mat-icon>\n </button>\n\n <mat-menu #themeMenu=\"matMenu\" xPosition=\"before\">\n <div mat-menu-item>\n <mat-slide-toggle\n [checked]=\"darkMode()\"\n (toggleChange)=\"toggleDarkMode()\"\n >Dark Mode</mat-slide-toggle\n >\n </div>\n @for (theme of themes; track $index) {\n <ngx-theme-picker-menu-item\n [theme]=\"theme\"\n [isCurrentTheme]=\"theme.name === currentTheme()\"\n (click)=\"selectTheme(theme.name)\"\n ></ngx-theme-picker-menu-item>\n }\n </mat-menu>\n `,\n styles: [\n `\n @use '@angular/material' as mat;\n :host {\n button {\n @include mat.icon-overrides(\n (\n color: var(--mat-sys-primary),\n )\n );\n }\n }\n `,\n ],\n})\nexport class NgxThemePicker {\n themePickerService = inject(ThemePickerService);\n themes = ThemePickerService.THEMES;\n currentTheme = this.themePickerService.currentTheme;\n darkMode = this.themePickerService.darkMode;\n\n selectTheme(theme: string): void {\n this.themePickerService.userSelectedTheme.set(theme);\n }\n\n toggleDarkMode(): void {\n this.themePickerService.darkMode.set(!this.darkMode());\n }\n}\n","/*\n * Public API Surface of ngx-theme-picker\n */\n\nexport * from './lib/ngx-theme-picker';\nexport * from './lib/theme-picker.service';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
package/index.d.ts
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import * as _angular_core from '@angular/core';
|
|
2
|
+
|
|
3
|
+
interface DocsSiteTheme {
|
|
4
|
+
name: string;
|
|
5
|
+
displayName: string;
|
|
6
|
+
color: string;
|
|
7
|
+
}
|
|
8
|
+
declare class ThemePickerService {
|
|
9
|
+
static THEME_EXAMPLE_ICON: string;
|
|
10
|
+
static DEFAULT_THEME: string;
|
|
11
|
+
static THEME_STRORAGE_KEY: string;
|
|
12
|
+
static DARK_MODE_STRORAGE_KEY: string;
|
|
13
|
+
static THEMES: DocsSiteTheme[];
|
|
14
|
+
darkMode: _angular_core.WritableSignal<boolean>;
|
|
15
|
+
darkModeResource: _angular_core.ResourceRef<void | undefined>;
|
|
16
|
+
userSelectedTheme: _angular_core.WritableSignal<string>;
|
|
17
|
+
currentTheme: _angular_core.WritableSignal<string>;
|
|
18
|
+
setThemeStyleAndLocalStorage(newTheme: string): boolean;
|
|
19
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThemePickerService, never>;
|
|
20
|
+
static ɵprov: _angular_core.ɵɵInjectableDeclaration<ThemePickerService>;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
declare class ThemePickerMenuItemComponent {
|
|
24
|
+
theme: _angular_core.InputSignal<DocsSiteTheme>;
|
|
25
|
+
isCurrentTheme: _angular_core.InputSignal<boolean>;
|
|
26
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThemePickerMenuItemComponent, never>;
|
|
27
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ThemePickerMenuItemComponent, "ngx-theme-picker-menu-item", never, { "theme": { "alias": "theme"; "required": true; "isSignal": true; }; "isCurrentTheme": { "alias": "isCurrentTheme"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
28
|
+
}
|
|
29
|
+
declare class NgxThemePicker {
|
|
30
|
+
themePickerService: ThemePickerService;
|
|
31
|
+
themes: DocsSiteTheme[];
|
|
32
|
+
currentTheme: _angular_core.WritableSignal<string>;
|
|
33
|
+
darkMode: _angular_core.WritableSignal<boolean>;
|
|
34
|
+
selectTheme(theme: string): void;
|
|
35
|
+
toggleDarkMode(): void;
|
|
36
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxThemePicker, never>;
|
|
37
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgxThemePicker, "ngx-theme-picker", never, {}, {}, never, never, true, never>;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
export { NgxThemePicker, ThemePickerMenuItemComponent, ThemePickerService };
|
|
41
|
+
export type { DocsSiteTheme };
|
package/package.json
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@tmdjr/ngx-theme-picker",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"peerDependencies": {
|
|
5
|
+
"@angular/animations": "20.1.6",
|
|
6
|
+
"@angular/cdk": "20.1.5",
|
|
7
|
+
"@angular/common": "^20.2.0",
|
|
8
|
+
"@angular/core": "^20.2.0",
|
|
9
|
+
"@angular/material": "20.1.5"
|
|
10
|
+
},
|
|
11
|
+
"dependencies": {
|
|
12
|
+
"tslib": "^2.3.0"
|
|
13
|
+
},
|
|
14
|
+
"sideEffects": false,
|
|
15
|
+
"module": "fesm2022/tmdjr-ngx-theme-picker.mjs",
|
|
16
|
+
"typings": "index.d.ts",
|
|
17
|
+
"exports": {
|
|
18
|
+
"./package.json": {
|
|
19
|
+
"default": "./package.json"
|
|
20
|
+
},
|
|
21
|
+
".": {
|
|
22
|
+
"types": "./index.d.ts",
|
|
23
|
+
"default": "./fesm2022/tmdjr-ngx-theme-picker.mjs"
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
}
|