@skyux/theme 12.22.0 → 13.0.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/themes/modern/styles.css +18 -172
- package/fesm2022/skyux-theme.mjs +29 -30
- package/fesm2022/skyux-theme.mjs.map +1 -1
- package/index.d.ts +428 -20
- package/package.json +4 -4
- package/lib/icons/icon-manifest-glyph.d.ts +0 -1
- package/lib/icons/icon-manifest.d.ts +0 -5
- package/lib/icons/icon-manifest.service.d.ts +0 -14
- package/lib/providers/provide-initial-theme.d.ts +0 -8
- package/lib/style-loader.d.ts +0 -11
- package/lib/theme.module.d.ts +0 -9
- package/lib/theming/theme-brand.d.ts +0 -29
- package/lib/theming/theme-class.directive.d.ts +0 -29
- package/lib/theming/theme-component-class.directive.d.ts +0 -8
- package/lib/theming/theme-if.directive.d.ts +0 -21
- package/lib/theming/theme-mode.d.ts +0 -32
- package/lib/theming/theme-serialization-types.d.ts +0 -47
- package/lib/theming/theme-settings-change.d.ts +0 -15
- package/lib/theming/theme-settings.d.ts +0 -27
- package/lib/theming/theme-spacing.d.ts +0 -32
- package/lib/theming/theme.d.ts +0 -39
- package/lib/theming/theme.directive.d.ts +0 -18
- package/lib/theming/theme.service.d.ts +0 -60
- package/lib/viewport/viewport-reserve-args.d.ts +0 -22
- package/lib/viewport/viewport-reserve-position-type.d.ts +0 -4
- package/lib/viewport/viewport.service.d.ts +0 -29
package/index.d.ts
CHANGED
|
@@ -1,20 +1,428 @@
|
|
|
1
|
-
|
|
2
|
-
export { SkyThemeIconManifestGlyph } from '
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
1
|
+
import { SkyIconManifest, SkyIconManifestGlyph } from '@skyux/icons';
|
|
2
|
+
export { SkyIconManifestGlyph as SkyThemeIconManifestGlyph } from '@skyux/icons';
|
|
3
|
+
import * as i0 from '@angular/core';
|
|
4
|
+
import { Renderer2, OnDestroy, ElementRef, OnInit, TemplateRef, ViewContainerRef, ChangeDetectorRef, EnvironmentProviders } from '@angular/core';
|
|
5
|
+
import { Observable, ReplaySubject } from 'rxjs';
|
|
6
|
+
|
|
7
|
+
interface SkyThemeIconManifest extends SkyIconManifest {
|
|
8
|
+
glyphs: SkyIconManifestGlyph[];
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* Provides a method for retrieving metadata about the SKY UX icon font.
|
|
13
|
+
* @internal
|
|
14
|
+
*/
|
|
15
|
+
declare class SkyThemeIconManifestService {
|
|
16
|
+
/**
|
|
17
|
+
* Gets metadata about the SKY UX icon font.
|
|
18
|
+
*/
|
|
19
|
+
getManifest(): SkyThemeIconManifest;
|
|
20
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SkyThemeIconManifestService, never>;
|
|
21
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<SkyThemeIconManifestService>;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* Type definitions for theme serialization and deserialization.
|
|
26
|
+
*/
|
|
27
|
+
/**
|
|
28
|
+
* Serialized representation of a SkyThemeMode.
|
|
29
|
+
*/
|
|
30
|
+
interface SkyThemeModeData {
|
|
31
|
+
name: string;
|
|
32
|
+
hostClass?: string;
|
|
33
|
+
isPreset?: boolean;
|
|
34
|
+
}
|
|
35
|
+
/**
|
|
36
|
+
* Serialized representation of a SkyThemeSpacing.
|
|
37
|
+
*/
|
|
38
|
+
interface SkyThemeSpacingData {
|
|
39
|
+
name: string;
|
|
40
|
+
hostClass?: string;
|
|
41
|
+
isPreset?: boolean;
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* Serialized representation of a SkyThemeBrand.
|
|
45
|
+
*/
|
|
46
|
+
interface SkyThemeBrandData {
|
|
47
|
+
name: string;
|
|
48
|
+
version: string;
|
|
49
|
+
hostClass?: string;
|
|
50
|
+
}
|
|
51
|
+
/**
|
|
52
|
+
* Serialized representation of a SkyTheme.
|
|
53
|
+
*/
|
|
54
|
+
interface SkyThemeData {
|
|
55
|
+
name: string;
|
|
56
|
+
hostClass?: string;
|
|
57
|
+
supportedModes: SkyThemeModeData[];
|
|
58
|
+
supportedSpacing?: SkyThemeSpacingData[];
|
|
59
|
+
supportsBranding?: boolean;
|
|
60
|
+
isPreset?: boolean;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/**
|
|
64
|
+
* Defines properties of a SKY UX theme mode.
|
|
65
|
+
*/
|
|
66
|
+
declare class SkyThemeMode {
|
|
67
|
+
readonly name: string;
|
|
68
|
+
readonly hostClass: string;
|
|
69
|
+
/**
|
|
70
|
+
* The preset themes available in SKY UX.
|
|
71
|
+
*/
|
|
72
|
+
static readonly presets: {
|
|
73
|
+
light: SkyThemeMode;
|
|
74
|
+
dark: SkyThemeMode;
|
|
75
|
+
};
|
|
76
|
+
/**
|
|
77
|
+
* Creates a new theme mode.
|
|
78
|
+
* @param name The name of the theme mode.
|
|
79
|
+
* @param hostClass The class on the host element which child components should reference when
|
|
80
|
+
* adjusting for a specified theme mode.
|
|
81
|
+
*/
|
|
82
|
+
constructor(name: string, hostClass: string);
|
|
83
|
+
/**
|
|
84
|
+
* @internal
|
|
85
|
+
* Serializes the theme mode to a JSON-compatible object.
|
|
86
|
+
*/
|
|
87
|
+
serialize(): SkyThemeModeData;
|
|
88
|
+
/**
|
|
89
|
+
* @internal
|
|
90
|
+
* Deserializes a JSON object to a SkyThemeMode instance.
|
|
91
|
+
*/
|
|
92
|
+
static deserialize(data: SkyThemeModeData): SkyThemeMode;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
/**
|
|
96
|
+
* Defines properties of SKY UX theme spacing.
|
|
97
|
+
*/
|
|
98
|
+
declare class SkyThemeSpacing {
|
|
99
|
+
readonly name: string;
|
|
100
|
+
readonly hostClass: string;
|
|
101
|
+
/**
|
|
102
|
+
* The preset spacing available in SKY UX.
|
|
103
|
+
*/
|
|
104
|
+
static readonly presets: {
|
|
105
|
+
standard: SkyThemeSpacing;
|
|
106
|
+
compact: SkyThemeSpacing;
|
|
107
|
+
};
|
|
108
|
+
/**
|
|
109
|
+
* Creates a new theme spacing.
|
|
110
|
+
* @param name The name of the theme spacing.
|
|
111
|
+
* @param hostClass The class on the host element which child components should reference when
|
|
112
|
+
* adjusting for a specified theme spacing.
|
|
113
|
+
*/
|
|
114
|
+
constructor(name: string, hostClass: string);
|
|
115
|
+
/**
|
|
116
|
+
* @internal
|
|
117
|
+
* Serializes the theme spacing to a JSON-compatible object.
|
|
118
|
+
*/
|
|
119
|
+
serialize(): SkyThemeSpacingData;
|
|
120
|
+
/**
|
|
121
|
+
* @internal
|
|
122
|
+
* Deserializes a JSON object to a SkyThemeSpacing instance.
|
|
123
|
+
*/
|
|
124
|
+
static deserialize(data: SkyThemeSpacingData): SkyThemeSpacing;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
/**
|
|
128
|
+
* Defines properties of a SKY UX theme.
|
|
129
|
+
*/
|
|
130
|
+
declare class SkyTheme {
|
|
131
|
+
readonly name: string;
|
|
132
|
+
readonly hostClass: string;
|
|
133
|
+
readonly supportedModes: SkyThemeMode[];
|
|
134
|
+
readonly supportedSpacing: SkyThemeSpacing[];
|
|
135
|
+
readonly supportsBranding: boolean;
|
|
136
|
+
/**
|
|
137
|
+
* The preset themes available in SKY UX.
|
|
138
|
+
*/
|
|
139
|
+
static readonly presets: {
|
|
140
|
+
default: SkyTheme;
|
|
141
|
+
modern: SkyTheme;
|
|
142
|
+
};
|
|
143
|
+
/**
|
|
144
|
+
* Creates a new theme.
|
|
145
|
+
* @param name The name of the theme.
|
|
146
|
+
* @param hostClass The class on the host element which child components should reference when
|
|
147
|
+
* adjusting for a specified theme.
|
|
148
|
+
* @param supportedModes An array of modes supported by the theme.
|
|
149
|
+
* @param supportedSpacing An array of spacing modes supported by the theme.
|
|
150
|
+
*/
|
|
151
|
+
constructor(name: string, hostClass: string, supportedModes: SkyThemeMode[], supportedSpacing?: SkyThemeSpacing[], supportsBranding?: boolean);
|
|
152
|
+
/**
|
|
153
|
+
* @internal
|
|
154
|
+
* Serializes the theme to a JSON-compatible object.
|
|
155
|
+
*/
|
|
156
|
+
serialize(): SkyThemeData;
|
|
157
|
+
/**
|
|
158
|
+
* @internal
|
|
159
|
+
* Deserializes a JSON object to a SkyTheme instance.
|
|
160
|
+
*/
|
|
161
|
+
static deserialize(data: SkyThemeData): SkyTheme;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
/**
|
|
165
|
+
* @internal
|
|
166
|
+
* Defines properties of SKY UX theme branding.
|
|
167
|
+
*/
|
|
168
|
+
declare class SkyThemeBrand {
|
|
169
|
+
#private;
|
|
170
|
+
readonly name: string;
|
|
171
|
+
readonly version: string;
|
|
172
|
+
get hostClass(): string;
|
|
173
|
+
private set hostClass(value);
|
|
174
|
+
/**
|
|
175
|
+
* Creates a new theme brand.
|
|
176
|
+
* @param name The name of the theme brand.
|
|
177
|
+
* @param hostClass The class on the host element which child components should reference when
|
|
178
|
+
* adjusting for a specified theme brand. This defaults to `sky-theme-brand-<name>
|
|
179
|
+
*/
|
|
180
|
+
constructor(name: string, version: string, hostClass?: string);
|
|
181
|
+
/**
|
|
182
|
+
* @internal
|
|
183
|
+
* Serializes the theme brand to a JSON-compatible object.
|
|
184
|
+
*/
|
|
185
|
+
serialize(): SkyThemeBrandData;
|
|
186
|
+
/**
|
|
187
|
+
* @internal
|
|
188
|
+
* Deserializes a JSON object to a SkyThemeBrand instance.
|
|
189
|
+
*/
|
|
190
|
+
static deserialize(data: SkyThemeBrandData): SkyThemeBrand;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
/**
|
|
194
|
+
* Specifies the theme and mode to be applied to a host element.
|
|
195
|
+
*/
|
|
196
|
+
declare class SkyThemeSettings {
|
|
197
|
+
readonly theme: SkyTheme;
|
|
198
|
+
readonly mode: SkyThemeMode;
|
|
199
|
+
readonly spacing: SkyThemeSpacing;
|
|
200
|
+
readonly brand?: SkyThemeBrand | undefined;
|
|
201
|
+
/**
|
|
202
|
+
* Creates a new SkyThemeSettings instance.
|
|
203
|
+
* @param theme The theme configuration.
|
|
204
|
+
* @param mode The theme mode.
|
|
205
|
+
*/
|
|
206
|
+
constructor(theme: SkyTheme, mode: SkyThemeMode, spacing?: SkyThemeSpacing, brand?: SkyThemeBrand | undefined);
|
|
207
|
+
/**
|
|
208
|
+
* Serializes the theme settings to a string.
|
|
209
|
+
*/
|
|
210
|
+
serialize(): string;
|
|
211
|
+
/**
|
|
212
|
+
* Deserializes a string to a SkyThemeSettings instance.
|
|
213
|
+
*/
|
|
214
|
+
static deserialize(value: string): SkyThemeSettings;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
/**
|
|
218
|
+
* Describes a change to the current theme.
|
|
219
|
+
*/
|
|
220
|
+
interface SkyThemeSettingsChange {
|
|
221
|
+
/**
|
|
222
|
+
* The theme settings being applied as a result of the change.
|
|
223
|
+
*/
|
|
224
|
+
currentSettings: SkyThemeSettings;
|
|
225
|
+
/**
|
|
226
|
+
* The theme settings being replaced as a result of the change. This is undefined if the theme
|
|
227
|
+
* settings are being set for the first time.
|
|
228
|
+
*/
|
|
229
|
+
previousSettings: SkyThemeSettings | undefined;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
/**
|
|
233
|
+
* Provides methods for updating and handling changes to the current theme.
|
|
234
|
+
*/
|
|
235
|
+
declare class SkyThemeService {
|
|
236
|
+
#private;
|
|
237
|
+
/**
|
|
238
|
+
* Notifies consumers when the current theme settings have changed.
|
|
239
|
+
*/
|
|
240
|
+
get settingsChange(): Observable<SkyThemeSettingsChange>;
|
|
241
|
+
constructor();
|
|
242
|
+
/**
|
|
243
|
+
* Initializes the theme service with the specified parameters. This should only be called
|
|
244
|
+
* from a host component that provides its own theme to child components.
|
|
245
|
+
* @param hostEl The host element under which themed components are rendered.
|
|
246
|
+
* @param renderer A Renderer2 instance for updating the host element with theme changes.
|
|
247
|
+
* @param theme The initial theme.
|
|
248
|
+
*/
|
|
249
|
+
init(hostEl: any, renderer: Renderer2, theme: SkyThemeSettings): void;
|
|
250
|
+
/**
|
|
251
|
+
* Destroys the current theme service. This should only be called from a host component that
|
|
252
|
+
* provides its own theme to child components.
|
|
253
|
+
*/
|
|
254
|
+
destroy(): void;
|
|
255
|
+
/**
|
|
256
|
+
* Updates the current theme mode.
|
|
257
|
+
* @param mode The new theme mode to apply.
|
|
258
|
+
*/
|
|
259
|
+
setThemeMode(mode: SkyThemeMode): void;
|
|
260
|
+
/**
|
|
261
|
+
* Updates the current theme spacing.
|
|
262
|
+
* @param spacing The new theme spacing to apply.
|
|
263
|
+
*/
|
|
264
|
+
setThemeSpacing(spacing: SkyThemeSpacing): void;
|
|
265
|
+
/**
|
|
266
|
+
* Updates the current theme brand.
|
|
267
|
+
* @param brand The new theme brand to apply.
|
|
268
|
+
*/
|
|
269
|
+
setThemeBrand(brand: SkyThemeBrand): void;
|
|
270
|
+
/**
|
|
271
|
+
* Updates the current theme settings.
|
|
272
|
+
* @param settings The new theme settings to apply.
|
|
273
|
+
*/
|
|
274
|
+
setTheme(settings: SkyThemeSettings): void;
|
|
275
|
+
/**
|
|
276
|
+
* Updates the current theme.
|
|
277
|
+
* @param theme The new theme to apply.
|
|
278
|
+
*/
|
|
279
|
+
setTheme(theme: SkyTheme): void;
|
|
280
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SkyThemeService, never>;
|
|
281
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<SkyThemeService>;
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
declare class SkyAppStyleLoader {
|
|
285
|
+
#private;
|
|
286
|
+
static readonly LOAD_TIMEOUT = 3000;
|
|
287
|
+
isLoaded: boolean;
|
|
288
|
+
constructor(themeSvc?: SkyThemeService);
|
|
289
|
+
loadStyles(): Promise<any>;
|
|
290
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SkyAppStyleLoader, [{ optional: true; }]>;
|
|
291
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<SkyAppStyleLoader>;
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
type SkyThemeClassMap = Record<string, string>;
|
|
295
|
+
/**
|
|
296
|
+
* Component to add classes conditionally based on the current theme.
|
|
297
|
+
*
|
|
298
|
+
* If the directive is within a `skyTheme` directive, it uses settings from that directive.
|
|
299
|
+
*/
|
|
300
|
+
declare class SkyThemeClassDirective implements OnDestroy {
|
|
301
|
+
#private;
|
|
302
|
+
/**
|
|
303
|
+
* The HTML class attribute.
|
|
304
|
+
*
|
|
305
|
+
* @param value
|
|
306
|
+
*/
|
|
307
|
+
set class(value: string | undefined);
|
|
308
|
+
/**
|
|
309
|
+
* An object with class names in a string for keys, and theme names (e.g. 'default' or 'modern') as values.
|
|
310
|
+
*
|
|
311
|
+
* @param value
|
|
312
|
+
*/
|
|
313
|
+
set skyThemeClass(value: SkyThemeClassMap | undefined);
|
|
314
|
+
constructor(ngEl: ElementRef, renderer: Renderer2, themeSvc?: SkyThemeService);
|
|
315
|
+
ngOnDestroy(): void;
|
|
316
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SkyThemeClassDirective, [null, null, { optional: true; }]>;
|
|
317
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<SkyThemeClassDirective, "[skyThemeClass]", never, { "class": { "alias": "class"; "required": false; }; "skyThemeClass": { "alias": "skyThemeClass"; "required": false; }; }, {}, never, never, false, never>;
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
/**
|
|
321
|
+
* Creates a new instance of `SkyThemeService` to allow a container
|
|
322
|
+
* to have its own theme.
|
|
323
|
+
*/
|
|
324
|
+
declare class SkyThemeDirective implements OnInit, OnDestroy {
|
|
325
|
+
#private;
|
|
326
|
+
set skyTheme(value: SkyThemeSettings | undefined);
|
|
327
|
+
skyThemeOrDefault: SkyThemeSettings;
|
|
328
|
+
constructor(elRef: ElementRef, renderer: Renderer2, themeSvc: SkyThemeService);
|
|
329
|
+
ngOnInit(): void;
|
|
330
|
+
ngOnDestroy(): void;
|
|
331
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SkyThemeDirective, never>;
|
|
332
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<SkyThemeDirective, "[skyTheme]", never, { "skyTheme": { "alias": "skyTheme"; "required": false; }; }, {}, never, never, false, never>;
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
/**
|
|
336
|
+
* Component that works like `ngIf` to show markup for matching theme.
|
|
337
|
+
*
|
|
338
|
+
* If the directive is within a `skyTheme` directive, it uses settings from that directive.
|
|
339
|
+
*/
|
|
340
|
+
declare class SkyThemeIfDirective implements OnDestroy {
|
|
341
|
+
#private;
|
|
342
|
+
/**
|
|
343
|
+
* A string that should match the name of a theme, `'default'` or `'modern'`.
|
|
344
|
+
*
|
|
345
|
+
* @param value
|
|
346
|
+
*/
|
|
347
|
+
set skyThemeIf(value: 'default' | 'modern' | undefined);
|
|
348
|
+
constructor(templateRef: TemplateRef<unknown>, viewContainer: ViewContainerRef, changeDetector: ChangeDetectorRef, themeSvc?: SkyThemeService);
|
|
349
|
+
ngOnDestroy(): void;
|
|
350
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SkyThemeIfDirective, [null, null, null, { optional: true; }]>;
|
|
351
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<SkyThemeIfDirective, "[skyThemeIf]", never, { "skyThemeIf": { "alias": "skyThemeIf"; "required": false; }; }, {}, never, never, false, never>;
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
declare class SkyThemeModule {
|
|
355
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SkyThemeModule, never>;
|
|
356
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<SkyThemeModule, [typeof SkyThemeClassDirective, typeof SkyThemeDirective, typeof SkyThemeIfDirective], never, [typeof SkyThemeClassDirective, typeof SkyThemeDirective, typeof SkyThemeIfDirective]>;
|
|
357
|
+
static ɵinj: i0.ɵɵInjectorDeclaration<SkyThemeModule>;
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
declare class SkyThemeComponentClassDirective {
|
|
361
|
+
#private;
|
|
362
|
+
theme: string;
|
|
363
|
+
constructor();
|
|
364
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SkyThemeComponentClassDirective, never>;
|
|
365
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<SkyThemeComponentClassDirective, "[skyThemeClass]", never, {}, {}, never, never, true, never>;
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
/**
|
|
369
|
+
* @internal
|
|
370
|
+
*/
|
|
371
|
+
type SkyAppViewportReservedPositionType = 'left' | 'top' | 'right' | 'bottom';
|
|
372
|
+
|
|
373
|
+
/**
|
|
374
|
+
* @internal
|
|
375
|
+
*/
|
|
376
|
+
interface SkyAppViewportReserveArgs {
|
|
377
|
+
/**
|
|
378
|
+
* A unique ID for the component reserving space.
|
|
379
|
+
*/
|
|
380
|
+
id: string;
|
|
381
|
+
/**
|
|
382
|
+
* The position in the viewport where the space will be reserved.
|
|
383
|
+
*/
|
|
384
|
+
position: SkyAppViewportReservedPositionType;
|
|
385
|
+
/**
|
|
386
|
+
* The number of pixels to reserve.
|
|
387
|
+
*/
|
|
388
|
+
size: number;
|
|
389
|
+
/**
|
|
390
|
+
* Only reserve space when this element is in view.
|
|
391
|
+
*/
|
|
392
|
+
reserveForElement?: HTMLElement;
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
/**
|
|
396
|
+
* Provides information about the state of the application's viewport.
|
|
397
|
+
*/
|
|
398
|
+
declare class SkyAppViewportService {
|
|
399
|
+
#private;
|
|
400
|
+
/**
|
|
401
|
+
* Updated when the viewport becomes visible. While the page is rendered, the
|
|
402
|
+
* viewport may remain hidden as fonts and styles are loaded asynchronously;
|
|
403
|
+
* this is done to avoid a FOUC (Flash Of Unstyled Content) before the fonts
|
|
404
|
+
* and styles are ready.
|
|
405
|
+
*/
|
|
406
|
+
visible: ReplaySubject<boolean>;
|
|
407
|
+
constructor();
|
|
408
|
+
/**
|
|
409
|
+
* Reserves space for components docked to the left, top, right, or bottom of the viewport.
|
|
410
|
+
* @param args
|
|
411
|
+
*/
|
|
412
|
+
reserveSpace(args: SkyAppViewportReserveArgs): void;
|
|
413
|
+
/**
|
|
414
|
+
* Removes reserved space for a component by the ID provided when it was reserved.
|
|
415
|
+
* @param id
|
|
416
|
+
*/
|
|
417
|
+
unreserveSpace(id: string): void;
|
|
418
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SkyAppViewportService, never>;
|
|
419
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<SkyAppViewportService>;
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
declare function provideInitialTheme(name?: keyof typeof SkyTheme.presets, options?: {
|
|
423
|
+
mode?: keyof typeof SkyThemeMode.presets;
|
|
424
|
+
spacing?: keyof typeof SkyThemeSpacing.presets;
|
|
425
|
+
}): EnvironmentProviders;
|
|
426
|
+
|
|
427
|
+
export { SkyAppStyleLoader, SkyAppViewportService, SkyTheme, SkyThemeBrand, SkyThemeComponentClassDirective, SkyThemeIconManifestService, SkyThemeMode, SkyThemeModule, SkyThemeService, SkyThemeSettings, SkyThemeSpacing, provideInitialTheme, SkyThemeDirective as λ1, SkyThemeClassDirective as λ2, SkyThemeIfDirective as λ3 };
|
|
428
|
+
export type { SkyAppViewportReserveArgs, SkyAppViewportReservedPositionType, SkyThemeIconManifest, SkyThemeSettingsChange };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyux/theme",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "13.0.0-alpha.0",
|
|
4
4
|
"author": "Blackbaud, Inc.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"blackbaud",
|
|
@@ -16,11 +16,11 @@
|
|
|
16
16
|
},
|
|
17
17
|
"homepage": "https://github.com/blackbaud/skyux#readme",
|
|
18
18
|
"peerDependencies": {
|
|
19
|
-
"@angular/common": "^
|
|
20
|
-
"@angular/core": "^
|
|
19
|
+
"@angular/common": "^20.0.5",
|
|
20
|
+
"@angular/core": "^20.0.5"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@blackbaud/skyux-design-tokens": "0.0.
|
|
23
|
+
"@blackbaud/skyux-design-tokens": "0.0.69",
|
|
24
24
|
"@skyux/icons": "8.2.0",
|
|
25
25
|
"fontfaceobserver": "2.3.0",
|
|
26
26
|
"tslib": "^2.8.1"
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { SkyIconManifestGlyph as SkyThemeIconManifestGlyph } from '@skyux/icons';
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { SkyThemeIconManifest } from './icon-manifest';
|
|
2
|
-
import * as i0 from "@angular/core";
|
|
3
|
-
/**
|
|
4
|
-
* Provides a method for retrieving metadata about the SKY UX icon font.
|
|
5
|
-
* @internal
|
|
6
|
-
*/
|
|
7
|
-
export declare class SkyThemeIconManifestService {
|
|
8
|
-
/**
|
|
9
|
-
* Gets metadata about the SKY UX icon font.
|
|
10
|
-
*/
|
|
11
|
-
getManifest(): SkyThemeIconManifest;
|
|
12
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<SkyThemeIconManifestService, never>;
|
|
13
|
-
static ɵprov: i0.ɵɵInjectableDeclaration<SkyThemeIconManifestService>;
|
|
14
|
-
}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { EnvironmentProviders } from '@angular/core';
|
|
2
|
-
import { SkyTheme } from '../theming/theme';
|
|
3
|
-
import { SkyThemeMode } from '../theming/theme-mode';
|
|
4
|
-
import { SkyThemeSpacing } from '../theming/theme-spacing';
|
|
5
|
-
export declare function provideInitialTheme(name?: keyof typeof SkyTheme.presets, options?: {
|
|
6
|
-
mode?: keyof typeof SkyThemeMode.presets;
|
|
7
|
-
spacing?: keyof typeof SkyThemeSpacing.presets;
|
|
8
|
-
}): EnvironmentProviders;
|
package/lib/style-loader.d.ts
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { SkyThemeService } from './theming/theme.service';
|
|
2
|
-
import * as i0 from "@angular/core";
|
|
3
|
-
export declare class SkyAppStyleLoader {
|
|
4
|
-
#private;
|
|
5
|
-
static readonly LOAD_TIMEOUT = 3000;
|
|
6
|
-
isLoaded: boolean;
|
|
7
|
-
constructor(themeSvc?: SkyThemeService);
|
|
8
|
-
loadStyles(): Promise<any>;
|
|
9
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<SkyAppStyleLoader, [{ optional: true; }]>;
|
|
10
|
-
static ɵprov: i0.ɵɵInjectableDeclaration<SkyAppStyleLoader>;
|
|
11
|
-
}
|
package/lib/theme.module.d.ts
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import * as i0 from "@angular/core";
|
|
2
|
-
import * as i1 from "./theming/theme-class.directive";
|
|
3
|
-
import * as i2 from "./theming/theme.directive";
|
|
4
|
-
import * as i3 from "./theming/theme-if.directive";
|
|
5
|
-
export declare class SkyThemeModule {
|
|
6
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<SkyThemeModule, never>;
|
|
7
|
-
static ɵmod: i0.ɵɵNgModuleDeclaration<SkyThemeModule, [typeof i1.SkyThemeClassDirective, typeof i2.SkyThemeDirective, typeof i3.SkyThemeIfDirective], never, [typeof i1.SkyThemeClassDirective, typeof i2.SkyThemeDirective, typeof i3.SkyThemeIfDirective]>;
|
|
8
|
-
static ɵinj: i0.ɵɵInjectorDeclaration<SkyThemeModule>;
|
|
9
|
-
}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { SkyThemeBrandData } from './theme-serialization-types';
|
|
2
|
-
/**
|
|
3
|
-
* @internal
|
|
4
|
-
* Defines properties of SKY UX theme branding.
|
|
5
|
-
*/
|
|
6
|
-
export declare class SkyThemeBrand {
|
|
7
|
-
#private;
|
|
8
|
-
readonly name: string;
|
|
9
|
-
readonly version: string;
|
|
10
|
-
get hostClass(): string;
|
|
11
|
-
private set hostClass(value);
|
|
12
|
-
/**
|
|
13
|
-
* Creates a new theme brand.
|
|
14
|
-
* @param name The name of the theme brand.
|
|
15
|
-
* @param hostClass The class on the host element which child components should reference when
|
|
16
|
-
* adjusting for a specified theme brand. This defaults to `sky-theme-brand-<name>
|
|
17
|
-
*/
|
|
18
|
-
constructor(name: string, version: string, hostClass?: string);
|
|
19
|
-
/**
|
|
20
|
-
* @internal
|
|
21
|
-
* Serializes the theme brand to a JSON-compatible object.
|
|
22
|
-
*/
|
|
23
|
-
serialize(): SkyThemeBrandData;
|
|
24
|
-
/**
|
|
25
|
-
* @internal
|
|
26
|
-
* Deserializes a JSON object to a SkyThemeBrand instance.
|
|
27
|
-
*/
|
|
28
|
-
static deserialize(data: SkyThemeBrandData): SkyThemeBrand;
|
|
29
|
-
}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { ElementRef, OnDestroy, Renderer2 } from '@angular/core';
|
|
2
|
-
import { SkyThemeService } from './theme.service';
|
|
3
|
-
import * as i0 from "@angular/core";
|
|
4
|
-
type SkyThemeClassMap = Record<string, string>;
|
|
5
|
-
/**
|
|
6
|
-
* Component to add classes conditionally based on the current theme.
|
|
7
|
-
*
|
|
8
|
-
* If the directive is within a `skyTheme` directive, it uses settings from that directive.
|
|
9
|
-
*/
|
|
10
|
-
export declare class SkyThemeClassDirective implements OnDestroy {
|
|
11
|
-
#private;
|
|
12
|
-
/**
|
|
13
|
-
* The HTML class attribute.
|
|
14
|
-
*
|
|
15
|
-
* @param value
|
|
16
|
-
*/
|
|
17
|
-
set class(value: string | undefined);
|
|
18
|
-
/**
|
|
19
|
-
* An object with class names in a string for keys, and theme names (e.g. 'default' or 'modern') as values.
|
|
20
|
-
*
|
|
21
|
-
* @param value
|
|
22
|
-
*/
|
|
23
|
-
set skyThemeClass(value: SkyThemeClassMap | undefined);
|
|
24
|
-
constructor(ngEl: ElementRef, renderer: Renderer2, themeSvc?: SkyThemeService);
|
|
25
|
-
ngOnDestroy(): void;
|
|
26
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<SkyThemeClassDirective, [null, null, { optional: true; }]>;
|
|
27
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<SkyThemeClassDirective, "[skyThemeClass]", never, { "class": { "alias": "class"; "required": false; }; "skyThemeClass": { "alias": "skyThemeClass"; "required": false; }; }, {}, never, never, false, never>;
|
|
28
|
-
}
|
|
29
|
-
export {};
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import * as i0 from "@angular/core";
|
|
2
|
-
export declare class SkyThemeComponentClassDirective {
|
|
3
|
-
#private;
|
|
4
|
-
theme: string;
|
|
5
|
-
constructor();
|
|
6
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<SkyThemeComponentClassDirective, never>;
|
|
7
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<SkyThemeComponentClassDirective, "[skyThemeClass]", never, {}, {}, never, never, true, never>;
|
|
8
|
-
}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { ChangeDetectorRef, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core';
|
|
2
|
-
import { SkyThemeService } from './theme.service';
|
|
3
|
-
import * as i0 from "@angular/core";
|
|
4
|
-
/**
|
|
5
|
-
* Component that works like `ngIf` to show markup for matching theme.
|
|
6
|
-
*
|
|
7
|
-
* If the directive is within a `skyTheme` directive, it uses settings from that directive.
|
|
8
|
-
*/
|
|
9
|
-
export declare class SkyThemeIfDirective implements OnDestroy {
|
|
10
|
-
#private;
|
|
11
|
-
/**
|
|
12
|
-
* A string that should match the name of a theme, `'default'` or `'modern'`.
|
|
13
|
-
*
|
|
14
|
-
* @param value
|
|
15
|
-
*/
|
|
16
|
-
set skyThemeIf(value: 'default' | 'modern' | undefined);
|
|
17
|
-
constructor(templateRef: TemplateRef<unknown>, viewContainer: ViewContainerRef, changeDetector: ChangeDetectorRef, themeSvc?: SkyThemeService);
|
|
18
|
-
ngOnDestroy(): void;
|
|
19
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<SkyThemeIfDirective, [null, null, null, { optional: true; }]>;
|
|
20
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<SkyThemeIfDirective, "[skyThemeIf]", never, { "skyThemeIf": { "alias": "skyThemeIf"; "required": false; }; }, {}, never, never, false, never>;
|
|
21
|
-
}
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { SkyThemeModeData } from './theme-serialization-types';
|
|
2
|
-
/**
|
|
3
|
-
* Defines properties of a SKY UX theme mode.
|
|
4
|
-
*/
|
|
5
|
-
export declare class SkyThemeMode {
|
|
6
|
-
readonly name: string;
|
|
7
|
-
readonly hostClass: string;
|
|
8
|
-
/**
|
|
9
|
-
* The preset themes available in SKY UX.
|
|
10
|
-
*/
|
|
11
|
-
static readonly presets: {
|
|
12
|
-
light: SkyThemeMode;
|
|
13
|
-
dark: SkyThemeMode;
|
|
14
|
-
};
|
|
15
|
-
/**
|
|
16
|
-
* Creates a new theme mode.
|
|
17
|
-
* @param name The name of the theme mode.
|
|
18
|
-
* @param hostClass The class on the host element which child components should reference when
|
|
19
|
-
* adjusting for a specified theme mode.
|
|
20
|
-
*/
|
|
21
|
-
constructor(name: string, hostClass: string);
|
|
22
|
-
/**
|
|
23
|
-
* @internal
|
|
24
|
-
* Serializes the theme mode to a JSON-compatible object.
|
|
25
|
-
*/
|
|
26
|
-
serialize(): SkyThemeModeData;
|
|
27
|
-
/**
|
|
28
|
-
* @internal
|
|
29
|
-
* Deserializes a JSON object to a SkyThemeMode instance.
|
|
30
|
-
*/
|
|
31
|
-
static deserialize(data: SkyThemeModeData): SkyThemeMode;
|
|
32
|
-
}
|