@dataworkz/crystal 0.1.0-beta.1 → 0.1.0-beta.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.
Files changed (20) hide show
  1. package/CHANGELOG.md +134 -0
  2. package/fesm2022/dataworkz-crystal-icons.mjs +1 -1
  3. package/fesm2022/dataworkz-crystal-icons.mjs.map +1 -1
  4. package/fesm2022/dataworkz-crystal-primeng.mjs +3 -272
  5. package/fesm2022/dataworkz-crystal-primeng.mjs.map +1 -1
  6. package/fesm2022/dataworkz-crystal.mjs +2866 -209
  7. package/fesm2022/dataworkz-crystal.mjs.map +1 -1
  8. package/icons/index.d.ts +4 -2
  9. package/index.d.ts +1817 -38
  10. package/package.json +5 -7
  11. package/primeng/index.d.ts +1 -623
  12. package/styles/components/button.css +3 -0
  13. package/styles/components/content.css +100 -0
  14. package/styles/components/data.css +23 -0
  15. package/styles/components/form.css +128 -13
  16. package/styles/components/navigation.css +35 -1
  17. package/styles/components/overlay.css +16 -1
  18. package/styles/components/surface.css +36 -0
  19. package/styles/crystal-no-fonts.css +2 -0
  20. package/styles/icons.css +6 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dataworkz/crystal",
3
- "version": "0.1.0-beta.1",
3
+ "version": "0.1.0-beta.11",
4
4
  "description": "Dataworkz core UI for Angular: dw-* components, icons, toasts, design tokens, theme CSS and bundled fonts.",
5
5
  "license": "MIT",
6
6
  "author": "Dataworkz",
@@ -19,21 +19,19 @@
19
19
  "@angular/forms": "^20.3.0",
20
20
  "@angular/platform-browser": "^20.3.0",
21
21
  "@angular/router": "^20.3.0",
22
- "@primeng/themes": "^21.0.0",
23
22
  "ngx-markdown": "^20.0.0",
24
- "primeicons": "^7.0.0",
25
- "primeng": "^20.4.0",
26
23
  "rxjs": "~7.8.0"
27
24
  },
28
25
  "peerDependenciesMeta": {
29
- "@primeng/themes": {
30
- "optional": true
31
- },
32
26
  "ngx-markdown": {
33
27
  "optional": true
34
28
  }
35
29
  },
36
30
  "dependencies": {
31
+ "@primeng/themes": "^21.0.0",
32
+ "chart.js": "^4.5.1",
33
+ "primeicons": "^7.0.0",
34
+ "primeng": "~20.4.0",
37
35
  "tslib": "^2.8.1"
38
36
  },
39
37
  "exports": {
package/primeng/index.d.ts CHANGED
@@ -1,623 +1 @@
1
- import * as _primeuix_themes_types from '@primeuix/themes/types';
2
- import * as _primeuix_themes_aura_base from '@primeuix/themes/aura/base';
3
- import { EnvironmentProviders } from '@angular/core';
4
- import { PrimeNGConfigType } from 'primeng/config';
5
-
6
- /**
7
- * Azure Electric primary ramp. Same hex values as `--dw-primary-*` in
8
- * tokens/primitives.css — PrimeNG needs literal hex for the
9
- * primitive ramp because it derives other tokens from it at build time.
10
- */
11
- declare const AZURE_PRIMARY_RAMP: {
12
- readonly 50: "#ecf3ff";
13
- readonly 100: "#d6e5ff";
14
- readonly 200: "#b0ccff";
15
- readonly 300: "#82abff";
16
- readonly 400: "#4d84ff";
17
- readonly 500: "#2463f5";
18
- readonly 600: "#144ce6";
19
- readonly 700: "#113dc2";
20
- readonly 800: "#16359b";
21
- readonly 900: "#19327b";
22
- readonly 950: "#101d49";
23
- };
24
- /**
25
- * PrimeNG color scheme, used for both light and dark. Every value points at a
26
- * design-system CSS variable, so PrimeNG follows the semantic tokens (tokens/semantic.css
27
- * and semantic-dark.css): switching theme re-points the variables, the preset
28
- * never changes. (The surface ramp is the raw neutral scale, light → dark,
29
- * which is the order Aura's own light and dark schemes expect.)
30
- */
31
- declare const DW_COLOR_SCHEME: {
32
- surface: {
33
- 0: string;
34
- 50: string;
35
- 100: string;
36
- 200: string;
37
- 300: string;
38
- 400: string;
39
- 500: string;
40
- 600: string;
41
- 700: string;
42
- 800: string;
43
- 900: string;
44
- 950: string;
45
- };
46
- primary: {
47
- color: string;
48
- contrastColor: string;
49
- hoverColor: string;
50
- activeColor: string;
51
- };
52
- highlight: {
53
- background: string;
54
- focusBackground: string;
55
- color: string;
56
- focusColor: string;
57
- };
58
- mask: {
59
- background: string;
60
- color: string;
61
- };
62
- formField: {
63
- background: string;
64
- disabledBackground: string;
65
- filledBackground: string;
66
- filledHoverBackground: string;
67
- filledFocusBackground: string;
68
- borderColor: string;
69
- hoverBorderColor: string;
70
- focusBorderColor: string;
71
- invalidBorderColor: string;
72
- color: string;
73
- disabledColor: string;
74
- placeholderColor: string;
75
- invalidPlaceholderColor: string;
76
- floatLabelColor: string;
77
- floatLabelFocusColor: string;
78
- floatLabelActiveColor: string;
79
- floatLabelInvalidColor: string;
80
- iconColor: string;
81
- shadow: string;
82
- };
83
- text: {
84
- color: string;
85
- hoverColor: string;
86
- mutedColor: string;
87
- hoverMutedColor: string;
88
- };
89
- content: {
90
- background: string;
91
- hoverBackground: string;
92
- borderColor: string;
93
- color: string;
94
- hoverColor: string;
95
- };
96
- overlay: {
97
- select: {
98
- background: string;
99
- borderColor: string;
100
- color: string;
101
- };
102
- popover: {
103
- background: string;
104
- borderColor: string;
105
- color: string;
106
- };
107
- modal: {
108
- background: string;
109
- borderColor: string;
110
- color: string;
111
- };
112
- };
113
- list: {
114
- option: {
115
- focusBackground: string;
116
- selectedBackground: string;
117
- selectedFocusBackground: string;
118
- color: string;
119
- focusColor: string;
120
- selectedColor: string;
121
- selectedFocusColor: string;
122
- icon: {
123
- color: string;
124
- focusColor: string;
125
- };
126
- };
127
- optionGroup: {
128
- background: string;
129
- color: string;
130
- };
131
- };
132
- navigation: {
133
- item: {
134
- focusBackground: string;
135
- activeBackground: string;
136
- color: string;
137
- focusColor: string;
138
- activeColor: string;
139
- icon: {
140
- color: string;
141
- focusColor: string;
142
- activeColor: string;
143
- };
144
- };
145
- submenuLabel: {
146
- background: string;
147
- color: string;
148
- };
149
- submenuIcon: {
150
- color: string;
151
- focusColor: string;
152
- activeColor: string;
153
- };
154
- };
155
- };
156
- /**
157
- * Overrides layered on top of Aura. Aura's `blue` primitive is replaced with
158
- * the Azure ramp so every `{primary.*}` resolves to Azure; semantic and
159
- * component tokens are bound to the `--dw-*` CSS variables.
160
- */
161
- declare const DW_PRESET_OVERRIDES: {
162
- primitive: {
163
- blue: {
164
- 50: "#ecf3ff";
165
- 100: "#d6e5ff";
166
- 200: "#b0ccff";
167
- 300: "#82abff";
168
- 400: "#4d84ff";
169
- 500: "#2463f5";
170
- 600: "#144ce6";
171
- 700: "#113dc2";
172
- 800: "#16359b";
173
- 900: "#19327b";
174
- 950: "#101d49";
175
- };
176
- };
177
- semantic: {
178
- primary: Record<50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950, string>;
179
- transitionDuration: string;
180
- disabledOpacity: string;
181
- focusRing: {
182
- width: string;
183
- style: string;
184
- color: string;
185
- offset: string;
186
- shadow: string;
187
- };
188
- formField: {
189
- paddingX: string;
190
- paddingY: string;
191
- sm: {
192
- fontSize: string;
193
- paddingX: string;
194
- paddingY: string;
195
- };
196
- borderRadius: string;
197
- focusRing: {
198
- width: string;
199
- style: string;
200
- color: string;
201
- offset: string;
202
- shadow: string;
203
- };
204
- };
205
- list: {
206
- option: {
207
- borderRadius: string;
208
- };
209
- };
210
- content: {
211
- borderRadius: string;
212
- };
213
- navigation: {
214
- item: {
215
- borderRadius: string;
216
- };
217
- };
218
- overlay: {
219
- select: {
220
- borderRadius: string;
221
- shadow: string;
222
- };
223
- popover: {
224
- borderRadius: string;
225
- padding: string;
226
- shadow: string;
227
- };
228
- modal: {
229
- borderRadius: string;
230
- padding: string;
231
- shadow: string;
232
- };
233
- navigation: {
234
- shadow: string;
235
- };
236
- };
237
- colorScheme: {
238
- light: {
239
- surface: {
240
- 0: string;
241
- 50: string;
242
- 100: string;
243
- 200: string;
244
- 300: string;
245
- 400: string;
246
- 500: string;
247
- 600: string;
248
- 700: string;
249
- 800: string;
250
- 900: string;
251
- 950: string;
252
- };
253
- primary: {
254
- color: string;
255
- contrastColor: string;
256
- hoverColor: string;
257
- activeColor: string;
258
- };
259
- highlight: {
260
- background: string;
261
- focusBackground: string;
262
- color: string;
263
- focusColor: string;
264
- };
265
- mask: {
266
- background: string;
267
- color: string;
268
- };
269
- formField: {
270
- background: string;
271
- disabledBackground: string;
272
- filledBackground: string;
273
- filledHoverBackground: string;
274
- filledFocusBackground: string;
275
- borderColor: string;
276
- hoverBorderColor: string;
277
- focusBorderColor: string;
278
- invalidBorderColor: string;
279
- color: string;
280
- disabledColor: string;
281
- placeholderColor: string;
282
- invalidPlaceholderColor: string;
283
- floatLabelColor: string;
284
- floatLabelFocusColor: string;
285
- floatLabelActiveColor: string;
286
- floatLabelInvalidColor: string;
287
- iconColor: string;
288
- shadow: string;
289
- };
290
- text: {
291
- color: string;
292
- hoverColor: string;
293
- mutedColor: string;
294
- hoverMutedColor: string;
295
- };
296
- content: {
297
- background: string;
298
- hoverBackground: string;
299
- borderColor: string;
300
- color: string;
301
- hoverColor: string;
302
- };
303
- overlay: {
304
- select: {
305
- background: string;
306
- borderColor: string;
307
- color: string;
308
- };
309
- popover: {
310
- background: string;
311
- borderColor: string;
312
- color: string;
313
- };
314
- modal: {
315
- background: string;
316
- borderColor: string;
317
- color: string;
318
- };
319
- };
320
- list: {
321
- option: {
322
- focusBackground: string;
323
- selectedBackground: string;
324
- selectedFocusBackground: string;
325
- color: string;
326
- focusColor: string;
327
- selectedColor: string;
328
- selectedFocusColor: string;
329
- icon: {
330
- color: string;
331
- focusColor: string;
332
- };
333
- };
334
- optionGroup: {
335
- background: string;
336
- color: string;
337
- };
338
- };
339
- navigation: {
340
- item: {
341
- focusBackground: string;
342
- activeBackground: string;
343
- color: string;
344
- focusColor: string;
345
- activeColor: string;
346
- icon: {
347
- color: string;
348
- focusColor: string;
349
- activeColor: string;
350
- };
351
- };
352
- submenuLabel: {
353
- background: string;
354
- color: string;
355
- };
356
- submenuIcon: {
357
- color: string;
358
- focusColor: string;
359
- activeColor: string;
360
- };
361
- };
362
- };
363
- dark: {
364
- surface: {
365
- 0: string;
366
- 50: string;
367
- 100: string;
368
- 200: string;
369
- 300: string;
370
- 400: string;
371
- 500: string;
372
- 600: string;
373
- 700: string;
374
- 800: string;
375
- 900: string;
376
- 950: string;
377
- };
378
- primary: {
379
- color: string;
380
- contrastColor: string;
381
- hoverColor: string;
382
- activeColor: string;
383
- };
384
- highlight: {
385
- background: string;
386
- focusBackground: string;
387
- color: string;
388
- focusColor: string;
389
- };
390
- mask: {
391
- background: string;
392
- color: string;
393
- };
394
- formField: {
395
- background: string;
396
- disabledBackground: string;
397
- filledBackground: string;
398
- filledHoverBackground: string;
399
- filledFocusBackground: string;
400
- borderColor: string;
401
- hoverBorderColor: string;
402
- focusBorderColor: string;
403
- invalidBorderColor: string;
404
- color: string;
405
- disabledColor: string;
406
- placeholderColor: string;
407
- invalidPlaceholderColor: string;
408
- floatLabelColor: string;
409
- floatLabelFocusColor: string;
410
- floatLabelActiveColor: string;
411
- floatLabelInvalidColor: string;
412
- iconColor: string;
413
- shadow: string;
414
- };
415
- text: {
416
- color: string;
417
- hoverColor: string;
418
- mutedColor: string;
419
- hoverMutedColor: string;
420
- };
421
- content: {
422
- background: string;
423
- hoverBackground: string;
424
- borderColor: string;
425
- color: string;
426
- hoverColor: string;
427
- };
428
- overlay: {
429
- select: {
430
- background: string;
431
- borderColor: string;
432
- color: string;
433
- };
434
- popover: {
435
- background: string;
436
- borderColor: string;
437
- color: string;
438
- };
439
- modal: {
440
- background: string;
441
- borderColor: string;
442
- color: string;
443
- };
444
- };
445
- list: {
446
- option: {
447
- focusBackground: string;
448
- selectedBackground: string;
449
- selectedFocusBackground: string;
450
- color: string;
451
- focusColor: string;
452
- selectedColor: string;
453
- selectedFocusColor: string;
454
- icon: {
455
- color: string;
456
- focusColor: string;
457
- };
458
- };
459
- optionGroup: {
460
- background: string;
461
- color: string;
462
- };
463
- };
464
- navigation: {
465
- item: {
466
- focusBackground: string;
467
- activeBackground: string;
468
- color: string;
469
- focusColor: string;
470
- activeColor: string;
471
- icon: {
472
- color: string;
473
- focusColor: string;
474
- activeColor: string;
475
- };
476
- };
477
- submenuLabel: {
478
- background: string;
479
- color: string;
480
- };
481
- submenuIcon: {
482
- color: string;
483
- focusColor: string;
484
- activeColor: string;
485
- };
486
- };
487
- };
488
- };
489
- };
490
- components: {
491
- button: {
492
- root: {
493
- borderRadius: string;
494
- label: {
495
- fontWeight: string;
496
- };
497
- };
498
- };
499
- datatable: {
500
- headerCell: {
501
- padding: string;
502
- background: string;
503
- color: string;
504
- selectedBackground: string;
505
- selectedColor: string;
506
- };
507
- bodyCell: {
508
- padding: string;
509
- };
510
- colorScheme: {
511
- light: {
512
- root: {
513
- borderColor: string;
514
- };
515
- row: {
516
- stripedBackground: string;
517
- };
518
- };
519
- dark: {
520
- root: {
521
- borderColor: string;
522
- };
523
- row: {
524
- stripedBackground: string;
525
- };
526
- };
527
- };
528
- };
529
- paginator: {
530
- root: {
531
- padding: string;
532
- gap: string;
533
- };
534
- navButton: {
535
- width: string;
536
- height: string;
537
- borderRadius: string;
538
- };
539
- };
540
- dialog: {
541
- title: {
542
- fontSize: string;
543
- fontWeight: string;
544
- };
545
- };
546
- drawer: {
547
- title: {
548
- fontSize: string;
549
- fontWeight: string;
550
- };
551
- };
552
- tooltip: {
553
- colorScheme: {
554
- light: {
555
- root: {
556
- background: string;
557
- color: string;
558
- };
559
- };
560
- dark: {
561
- root: {
562
- background: string;
563
- color: string;
564
- };
565
- };
566
- };
567
- };
568
- tabs: {
569
- tab: {
570
- padding: string;
571
- fontWeight: string;
572
- };
573
- };
574
- toggleswitch: {
575
- colorScheme: {
576
- light: {
577
- root: {
578
- checkedBackground: string;
579
- checkedHoverBackground: string;
580
- };
581
- };
582
- dark: {
583
- root: {
584
- checkedBackground: string;
585
- checkedHoverBackground: string;
586
- };
587
- };
588
- };
589
- };
590
- skeleton: {
591
- colorScheme: {
592
- light: {
593
- root: {
594
- background: string;
595
- animationBackground: string;
596
- };
597
- };
598
- dark: {
599
- root: {
600
- background: string;
601
- animationBackground: string;
602
- };
603
- };
604
- };
605
- };
606
- };
607
- };
608
- /** Dataworkz PrimeNG preset: Aura retargeted to the design system. */
609
- declare const DwPreset: _primeuix_themes_types.Preset<_primeuix_themes_aura_base.AuraBaseDesignTokens>;
610
-
611
- /** PrimeNG's dark mode follows the attribute ThemeService (and provideCrystal()) put on <html>. */
612
- declare const DW_DARK_MODE_SELECTOR = "[data-theme=\"dark\"]";
613
- /**
614
- * PrimeNG with the Dataworkz preset, dark mode on `[data-theme="dark"]`. Pass app-specific PrimeNG settings
615
- * (ripple, zIndex, translation…) as `config`; its `theme.options` are merged over crystal's.
616
- *
617
- * ```ts
618
- * providers: [provideCrystal(), provideCrystalPrimeNG({ ripple: false })]
619
- * ```
620
- */
621
- declare function provideCrystalPrimeNG(config?: PrimeNGConfigType): EnvironmentProviders;
622
-
623
- export { AZURE_PRIMARY_RAMP, DW_COLOR_SCHEME, DW_DARK_MODE_SELECTOR, DW_PRESET_OVERRIDES, DwPreset, provideCrystalPrimeNG };
1
+ export { AZURE_PRIMARY_RAMP, DW_COLOR_SCHEME, DW_DARK_MODE_SELECTOR, DW_PRESET_OVERRIDES, DW_PRIMENG_PT, DW_PRIMENG_Z_INDEX, DW_SELECT_PANEL_SM, DwPreset, provideCrystalPrimeNG } from '@dataworkz/crystal';
package/styles/components/button.css CHANGED
@@ -325,6 +325,9 @@
325
325
  .dw-icon-btn.is-active { background: var(--dw-accent-tint); color: var(--dw-accent); }
326
326
  /* Hovering the active (selected) button keeps it accented, a step stronger */
327
327
  .dw-icon-btn.is-active:hover:not(:disabled) { background: var(--dw-accent-tint-strong); color: var(--dw-accent); }
328
+ /* A selected danger toggle (e.g. a "not helpful" rating) keeps its danger colour instead of the accent. */
329
+ .dw-icon-btn--danger.is-active,
330
+ .dw-icon-btn--danger.is-active:hover:not(:disabled) { background: var(--dw-danger-tint); color: var(--dw-danger-solid); }
328
331
  .dw-icon-btn--inverse { color: var(--dw-text-muted); }
329
332
  .dw-icon-btn--inverse:hover:not(:disabled),
330
333
  .dw-icon-btn--inverse.is-active { background: color-mix(in srgb, var(--dw-text-inverse) 12%, transparent); color: var(--dw-text-inverse); }