@sprucelabs/spruce-heartwood-utils 29.13.9 → 29.13.11
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.
|
@@ -2,10 +2,11 @@ import { ThemeManager } from '@sprucelabs/heartwood-view-controllers';
|
|
|
2
2
|
import { SkillTheme, ThemeChangeHandler } from '../types/heartwood.types';
|
|
3
3
|
export declare class ThemeManagerImpl implements ThemeManager {
|
|
4
4
|
private static instance?;
|
|
5
|
+
static Class?: new (theme: SkillTheme) => ThemeManagerImpl;
|
|
5
6
|
private currentTheme;
|
|
6
7
|
private themeCount;
|
|
7
8
|
private themeChangeHandler?;
|
|
8
|
-
|
|
9
|
+
protected constructor(theme: SkillTheme);
|
|
9
10
|
static getInstance(): ThemeManagerImpl;
|
|
10
11
|
static reset(): void;
|
|
11
12
|
static Manager(): ThemeManagerImpl;
|
|
@@ -16,7 +17,7 @@ export declare class ThemeManagerImpl implements ThemeManager {
|
|
|
16
17
|
private applyBorderRadius;
|
|
17
18
|
private deleteProp;
|
|
18
19
|
private setProps;
|
|
19
|
-
|
|
20
|
+
protected setProp(name: string, value: string): void;
|
|
20
21
|
onChangeTheme(callback: ThemeChangeHandler): void;
|
|
21
22
|
reset(): Promise<void>;
|
|
22
23
|
}
|
|
@@ -34,7 +34,8 @@ export class ThemeManagerImpl {
|
|
|
34
34
|
this.instance = undefined;
|
|
35
35
|
}
|
|
36
36
|
static Manager() {
|
|
37
|
-
|
|
37
|
+
var _a;
|
|
38
|
+
return new ((_a = this.Class) !== null && _a !== void 0 ? _a : this)(heartwoodTheme);
|
|
38
39
|
}
|
|
39
40
|
getTheme() {
|
|
40
41
|
return this.currentTheme;
|
|
@@ -47,22 +48,34 @@ export class ThemeManagerImpl {
|
|
|
47
48
|
}
|
|
48
49
|
setTheme(theme_1) {
|
|
49
50
|
return __awaiter(this, arguments, void 0, function* (theme, shouldAnimate = true) {
|
|
50
|
-
var _a, _b, _c, _d;
|
|
51
|
+
var _a, _b, _c, _d, _e;
|
|
51
52
|
if (((_a = this.currentTheme) === null || _a === void 0 ? void 0 : _a.name) === theme.name) {
|
|
52
53
|
return;
|
|
53
54
|
}
|
|
54
55
|
(_b = this.themeChangeHandler) === null || _b === void 0 ? void 0 : _b.call(this, theme);
|
|
55
56
|
this.themeCount++;
|
|
56
57
|
this.currentTheme = theme;
|
|
57
|
-
const
|
|
58
|
+
const _f = theme.props, { calendarEvents, borderRadius, cardStyles } = _f, rest = __rest(_f, ["calendarEvents", "borderRadius", "cardStyles"]);
|
|
58
59
|
this.applyBorderRadius(borderRadius);
|
|
59
|
-
//@ts-ignore
|
|
60
60
|
yield this.setProps(Object.entries(rest), shouldAnimate);
|
|
61
61
|
if (calendarEvents) {
|
|
62
62
|
yield this.setProps(Object.entries(calendarEvents), shouldAnimate);
|
|
63
63
|
}
|
|
64
|
-
(
|
|
65
|
-
|
|
64
|
+
if (cardStyles) {
|
|
65
|
+
const styles = [
|
|
66
|
+
'visual',
|
|
67
|
+
'informational',
|
|
68
|
+
'heading',
|
|
69
|
+
];
|
|
70
|
+
for (const style of styles) {
|
|
71
|
+
const visual = Object.entries((_c = cardStyles[style]) !== null && _c !== void 0 ? _c : {});
|
|
72
|
+
for (const [key, value] of visual) {
|
|
73
|
+
this.setProp(`${style}Card${key.charAt(0).toUpperCase() + key.slice(1)}`, value);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
(_d = document
|
|
78
|
+
.querySelector('meta[name="theme-color"]')) === null || _d === void 0 ? void 0 : _d.setAttribute('content', (_e = theme.props.color1Inverse) !== null && _e !== void 0 ? _e : 'white');
|
|
66
79
|
});
|
|
67
80
|
}
|
|
68
81
|
applyBorderRadius(borderRadius) {
|
|
@@ -154,7 +167,16 @@ export const heartwoodTheme = {
|
|
|
154
167
|
criticalForegroundColor: '#fafafa',
|
|
155
168
|
criticalBackgroundColor: '#f54242',
|
|
156
169
|
},
|
|
157
|
-
cardStyles: {
|
|
170
|
+
cardStyles: {
|
|
171
|
+
visual: {
|
|
172
|
+
foregroundColor: '#ffffff',
|
|
173
|
+
backgroundColor: 'transparent',
|
|
174
|
+
headerForegroundColor: '#ffffff',
|
|
175
|
+
headerBackgroundColor: 'transparent',
|
|
176
|
+
footerForegroundColor: '#ffffff',
|
|
177
|
+
footerBackgroundColor: 'transparent',
|
|
178
|
+
},
|
|
179
|
+
},
|
|
158
180
|
statusIndicators: {
|
|
159
181
|
color1: '#228B22',
|
|
160
182
|
color2: '#C4C036',
|
|
@@ -2,10 +2,11 @@ import { ThemeManager } from '@sprucelabs/heartwood-view-controllers';
|
|
|
2
2
|
import { SkillTheme, ThemeChangeHandler } from '../types/heartwood.types';
|
|
3
3
|
export declare class ThemeManagerImpl implements ThemeManager {
|
|
4
4
|
private static instance?;
|
|
5
|
+
static Class?: new (theme: SkillTheme) => ThemeManagerImpl;
|
|
5
6
|
private currentTheme;
|
|
6
7
|
private themeCount;
|
|
7
8
|
private themeChangeHandler?;
|
|
8
|
-
|
|
9
|
+
protected constructor(theme: SkillTheme);
|
|
9
10
|
static getInstance(): ThemeManagerImpl;
|
|
10
11
|
static reset(): void;
|
|
11
12
|
static Manager(): ThemeManagerImpl;
|
|
@@ -16,7 +17,7 @@ export declare class ThemeManagerImpl implements ThemeManager {
|
|
|
16
17
|
private applyBorderRadius;
|
|
17
18
|
private deleteProp;
|
|
18
19
|
private setProps;
|
|
19
|
-
|
|
20
|
+
protected setProp(name: string, value: string): void;
|
|
20
21
|
onChangeTheme(callback: ThemeChangeHandler): void;
|
|
21
22
|
reset(): Promise<void>;
|
|
22
23
|
}
|
|
@@ -17,7 +17,7 @@ class ThemeManagerImpl {
|
|
|
17
17
|
this.instance = undefined;
|
|
18
18
|
}
|
|
19
19
|
static Manager() {
|
|
20
|
-
return new this(exports.heartwoodTheme);
|
|
20
|
+
return new (this.Class ?? this)(exports.heartwoodTheme);
|
|
21
21
|
}
|
|
22
22
|
getTheme() {
|
|
23
23
|
return this.currentTheme;
|
|
@@ -35,13 +35,25 @@ class ThemeManagerImpl {
|
|
|
35
35
|
this.themeChangeHandler?.(theme);
|
|
36
36
|
this.themeCount++;
|
|
37
37
|
this.currentTheme = theme;
|
|
38
|
-
const { calendarEvents, borderRadius, ...rest } = theme.props;
|
|
38
|
+
const { calendarEvents, borderRadius, cardStyles, ...rest } = theme.props;
|
|
39
39
|
this.applyBorderRadius(borderRadius);
|
|
40
|
-
//@ts-ignore
|
|
41
40
|
await this.setProps(Object.entries(rest), shouldAnimate);
|
|
42
41
|
if (calendarEvents) {
|
|
43
42
|
await this.setProps(Object.entries(calendarEvents), shouldAnimate);
|
|
44
43
|
}
|
|
44
|
+
if (cardStyles) {
|
|
45
|
+
const styles = [
|
|
46
|
+
'visual',
|
|
47
|
+
'informational',
|
|
48
|
+
'heading',
|
|
49
|
+
];
|
|
50
|
+
for (const style of styles) {
|
|
51
|
+
const visual = Object.entries(cardStyles[style] ?? {});
|
|
52
|
+
for (const [key, value] of visual) {
|
|
53
|
+
this.setProp(`${style}Card${key.charAt(0).toUpperCase() + key.slice(1)}`, value);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
}
|
|
45
57
|
document
|
|
46
58
|
.querySelector('meta[name="theme-color"]')
|
|
47
59
|
?.setAttribute('content', theme.props.color1Inverse ?? 'white');
|
|
@@ -132,7 +144,16 @@ exports.heartwoodTheme = {
|
|
|
132
144
|
criticalForegroundColor: '#fafafa',
|
|
133
145
|
criticalBackgroundColor: '#f54242',
|
|
134
146
|
},
|
|
135
|
-
cardStyles: {
|
|
147
|
+
cardStyles: {
|
|
148
|
+
visual: {
|
|
149
|
+
foregroundColor: '#ffffff',
|
|
150
|
+
backgroundColor: 'transparent',
|
|
151
|
+
headerForegroundColor: '#ffffff',
|
|
152
|
+
headerBackgroundColor: 'transparent',
|
|
153
|
+
footerForegroundColor: '#ffffff',
|
|
154
|
+
footerBackgroundColor: 'transparent',
|
|
155
|
+
},
|
|
156
|
+
},
|
|
136
157
|
statusIndicators: {
|
|
137
158
|
color1: '#228B22',
|
|
138
159
|
color2: '#C4C036',
|