@elderbyte/ngx-starter 19.1.0-beta.2 → 19.1.0-beta.21

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 (57) hide show
  1. package/_index.scss +1 -1
  2. package/fesm2022/elderbyte-ngx-starter.mjs +1203 -1145
  3. package/fesm2022/elderbyte-ngx-starter.mjs.map +1 -1
  4. package/lib/common/utils/public_api.d.ts +1 -0
  5. package/lib/components/data-view/base/elder-data-view-base.d.ts +14 -0
  6. package/lib/components/layout/basic-pane-layout/basic-pane-layout.component.d.ts +1 -6
  7. package/lib/components/layout/pane/header/pane-actions.component.d.ts +5 -0
  8. package/lib/components/layout/pane/header/pane-header.component.d.ts +7 -0
  9. package/lib/components/layout/pane/header/pane-title.component.d.ts +5 -0
  10. package/lib/components/layout/pane/pane-content.component.d.ts +5 -0
  11. package/lib/components/layout/pane/pane.component.d.ts +1 -1
  12. package/lib/components/layout/public_api.d.ts +4 -0
  13. package/lib/components/select/single/elder-select/elder-select.component.d.ts +1 -1
  14. package/package.json +1 -1
  15. package/src/lib/components/card-organizer/card-stack/elder-card-stack.component.scss +7 -11
  16. package/src/lib/components/data-transfer/http-data-transfer-overview/http-data-transfer-overview.component.scss +6 -5
  17. package/src/lib/components/data-view/grid/elder-grid/elder-grid.component.scss +70 -82
  18. package/src/lib/components/data-view/table/elder-table/elder-table.component.scss +86 -105
  19. package/src/lib/components/files/drag-n-drop/elder-drop-zone/elder-drop-zone.component.scss +4 -4
  20. package/src/lib/components/forms/search/search-box/elder-search-box.component.scss +1 -0
  21. package/src/lib/components/navigation/nav/nav-group/elder-nav-group.component.scss +22 -3
  22. package/src/lib/components/navigation/nav/nav-link/elder-nav-link.component.scss +38 -4
  23. package/src/lib/components/panels/elder-dialog-panel/elder-dialog-panel.component.scss +2 -2
  24. package/src/lib/components/panels/toggle-panel/elder-toggle-panel.component.scss +3 -0
  25. package/src/lib/components/select/filter/elder-filter-chip-template/elder-filter-chip-template.component.scss +0 -77
  26. package/src/lib/components/select/multi/elder-multi-select-chip-options/elder-multi-select-chip-options.component.scss +0 -48
  27. package/src/lib/components/select/multi/elder-multi-select-chips/elder-multi-select-chips.component.scss +0 -60
  28. package/src/lib/components/select/single/elder-select/elder-select.component.scss +14 -51
  29. package/src/lib/components/shell/header/elder-app-header/elder-app-header.component.scss +1 -1
  30. package/src/lib/components/toasts/standard-toast/standard-toast.component.scss +1 -1
  31. package/theming/abstracts/_elder-design-tokens.scss +198 -0
  32. package/theming/{system/_elder-config.scss → abstracts/_elder-scss-variables.scss} +34 -0
  33. package/theming/{system/_elder-defaults.scss → abstracts/_elder-set-defaults-fn.scss} +8 -8
  34. package/theming/abstracts/_elder-starter-theme.scss +45 -0
  35. package/theming/abstracts/_elder-theme-main.scss +92 -0
  36. package/theming/{style-tweaks/_elder-common.scss → base/_elder-common-base.scss} +26 -11
  37. package/theming/{style-tweaks/_elder-style-fixes.scss → base/_elder-fixes-base.scss} +29 -66
  38. package/theming/{style-tweaks/_elder-form.scss → base/_elder-form-base.scss} +7 -4
  39. package/theming/components/_elder-chip-theme.scss +213 -0
  40. package/theming/components/_elder-select-theme.scss +75 -0
  41. package/theming/{utility-classes/_elder-color-helpers.scss → utilities/_elder-color-utils.scss} +7 -14
  42. package/theming/utilities/_elder-common-utils.scss +20 -0
  43. package/theming/{utility-classes/_elder-flex-layout.scss → utilities/_elder-flex-layout-utils.scss} +108 -2
  44. package/theming/{utility-classes/_elder-layout-system.scss → utilities/_elder-layout-utils.scss} +226 -201
  45. package/theming/{utility-classes/_elder-typography-helpers.scss → utilities/_elder-typography-utils.scss} +1 -1
  46. package/lib/components/m3-sidenav/m3-sidenav.component.d.ts +0 -5
  47. package/src/lib/components/chips/_elder-chip-theme.scss +0 -129
  48. package/src/lib/components/navigation/nav/_elder-nav-theme.scss +0 -66
  49. package/src/lib/components/select/_elder-select-base.scss +0 -28
  50. package/theming/style-tweaks/_elder-color-variants.scss +0 -31
  51. package/theming/style-tweaks/_elder-component-themes.scss +0 -22
  52. package/theming/style-tweaks/_elder-reset.scss +0 -13
  53. package/theming/system/_elder-design-tokens.scss +0 -101
  54. package/theming/system/_elder-m3-theme.scss +0 -156
  55. package/theming/system/_elder-starter-theme.scss +0 -45
  56. package/theming/utility-classes/_elder-common-helpers.scss +0 -8
  57. /package/theming/{style-tweaks/_elder-style-tweak-mixins.scss → base/_elder-base-mixins.scss} +0 -0
package/theming/{utility-classes/_elder-layout-system.scss → utilities/_elder-layout-utils.scss} RENAMED
@@ -1,7 +1,7 @@
1
1
  @use '@angular/material' as mat;
2
2
  @use 'sass:map';
3
3
 
4
- @mixin elder-layout-system($theme) {
4
+ @mixin elder-layout-utils($theme) {
5
5
  $common-sizes: map.get($theme, elder, common-sizes);
6
6
 
7
7
  /***************************************************************************
@@ -23,29 +23,32 @@
23
23
  * *
24
24
  **************************************************************************/
25
25
 
26
+ .p-pane {
27
+ padding: var(--elder-pane-padding);
28
+ }
29
+
26
30
  .p-xs {
27
31
  padding: $xs;
28
32
  }
29
33
 
30
- .pt-xs {
31
- padding-top: $xs;
34
+ .p-sm {
35
+ padding: $sm;
32
36
  }
33
37
 
34
- .pb-xs {
35
- padding-bottom: $xs;
38
+ .p-md {
39
+ padding: $md;
36
40
  }
37
41
 
38
- .pr-xs {
39
- padding-right: $xs;
42
+ .p-lg {
43
+ padding: $lg;
40
44
  }
41
45
 
42
- .pl-xs {
43
- padding-left: $xs;
46
+ .p-xl {
47
+ padding: $xl;
44
48
  }
45
49
 
46
- .px-xs {
47
- padding-left: $xs;
48
- padding-right: $xs;
50
+ .p-xxl {
51
+ padding: $xxl;
49
52
  }
50
53
 
51
54
  .py-xs {
@@ -53,24 +56,34 @@
53
56
  padding-bottom: $xs;
54
57
  }
55
58
 
56
- .p-sm {
57
- padding: $sm;
59
+ .py-sm {
60
+ padding-top: $sm;
61
+ padding-bottom: $sm;
58
62
  }
59
63
 
60
- .pt-sm {
61
- padding-top: $sm;
64
+ .py-md {
65
+ padding-top: $md;
66
+ padding-bottom: $md;
62
67
  }
63
68
 
64
- .pb-sm {
65
- padding-bottom: $sm;
69
+ .py-lg {
70
+ padding-top: $lg;
71
+ padding-bottom: $lg;
66
72
  }
67
73
 
68
- .pr-sm {
69
- padding-right: $sm;
74
+ .py-xl {
75
+ padding-top: $xl;
76
+ padding-bottom: $xl;
70
77
  }
71
78
 
72
- .pl-sm {
73
- padding-left: $sm;
79
+ .py-xxl {
80
+ padding-top: $xxl;
81
+ padding-bottom: $xxl;
82
+ }
83
+
84
+ .px-xs {
85
+ padding-left: $xs;
86
+ padding-right: $xs;
74
87
  }
75
88
 
76
89
  .px-sm {
@@ -78,133 +91,134 @@
78
91
  padding-right: $sm;
79
92
  }
80
93
 
81
- .py-sm {
82
- padding-top: $sm;
83
- padding-bottom: $sm;
84
- }
85
-
86
- .p-md {
87
- padding: $md;
94
+ .px-md {
95
+ padding-left: $md;
96
+ padding-right: $md;
88
97
  }
89
98
 
90
- .pt-md {
91
- padding-top: $md;
99
+ .px-lg {
100
+ padding-left: $lg;
101
+ padding-right: $lg;
92
102
  }
93
103
 
94
- .pb-md {
95
- padding-bottom: $md;
104
+ .px-xl {
105
+ padding-left: $xl;
106
+ padding-right: $xl;
96
107
  }
97
108
 
98
- .pr-md {
99
- padding-right: $md;
109
+ .px-xxl {
110
+ padding-left: $xxl;
111
+ padding-right: $xxl;
100
112
  }
101
113
 
102
- .pl-md {
103
- padding-left: $md;
114
+ .pt-xs {
115
+ padding-top: $xs;
104
116
  }
105
117
 
106
- .px-md {
107
- padding-left: $md;
108
- padding-right: $md;
118
+ .pt-sm {
119
+ padding-top: $sm;
109
120
  }
110
121
 
111
- .py-md {
122
+ .pt-md {
112
123
  padding-top: $md;
113
- padding-bottom: $md;
114
- }
115
-
116
- .p-lg {
117
- padding: $lg;
118
124
  }
119
125
 
120
126
  .pt-lg {
121
127
  padding-top: $lg;
122
128
  }
123
129
 
124
- .pb-lg {
125
- padding-bottom: $lg;
130
+ .pt-xl {
131
+ padding-top: $xl;
126
132
  }
127
133
 
128
- .pr-lg {
129
- padding-right: $lg;
134
+ .pt-xxl {
135
+ padding-top: $xxl;
130
136
  }
131
137
 
132
- .pl-lg {
133
- padding-left: $lg;
138
+ .pb-xs {
139
+ padding-bottom: $xs;
134
140
  }
135
141
 
136
- .px-lg {
137
- padding-left: $lg;
138
- padding-right: $lg;
142
+ .pb-sm {
143
+ padding-bottom: $sm;
139
144
  }
140
145
 
141
- .py-lg {
142
- padding-top: $lg;
146
+ .pb-md {
147
+ padding-bottom: $md;
148
+ }
149
+
150
+ .pb-lg {
143
151
  padding-bottom: $lg;
144
152
  }
145
153
 
146
- .p-xl {
147
- padding: $xl;
154
+ .pb-xl {
155
+ padding-bottom: $xl;
148
156
  }
149
157
 
150
- .pt-xl {
151
- padding-top: $xl;
158
+ .pb-xxl {
159
+ padding-bottom: $xxl;
152
160
  }
153
161
 
154
- .pb-xl {
155
- padding-bottom: $xl;
162
+ .pr-xs {
163
+ padding-right: $xs;
156
164
  }
157
165
 
158
- .pr-xl {
159
- padding-right: $xl;
166
+ .pr-sm {
167
+ padding-right: $sm;
160
168
  }
161
169
 
162
- .pl-xl {
163
- padding-left: $xl;
170
+ .pr-md {
171
+ padding-right: $md;
164
172
  }
165
173
 
166
- .px-xl {
167
- padding-left: $xl;
174
+ .pr-lg {
175
+ padding-right: $lg;
176
+ }
177
+
178
+ .pr-xl {
168
179
  padding-right: $xl;
169
180
  }
170
181
 
171
- .py-xl {
172
- padding-top: $xl;
173
- padding-bottom: $xl;
182
+ .pr-xxl {
183
+ padding-right: $xxl;
174
184
  }
175
185
 
176
- .p-xxl {
177
- padding: $xxl;
186
+ .pl-xs {
187
+ padding-left: $xs;
178
188
  }
179
189
 
180
- .pt-xxl {
181
- padding-top: $xxl;
190
+ .pl-sm {
191
+ padding-left: $sm;
182
192
  }
183
193
 
184
- .pb-xxl {
185
- padding-bottom: $xxl;
194
+ .pl-md {
195
+ padding-left: $md;
186
196
  }
187
197
 
188
- .pr-xxl {
189
- padding-right: $xxl;
198
+ .pl-lg {
199
+ padding-left: $lg;
200
+ }
201
+
202
+ .pl-xl {
203
+ padding-left: $xl;
190
204
  }
191
205
 
192
206
  .pl-xxl {
193
207
  padding-left: $xxl;
194
208
  }
195
209
 
196
- .px-xxl {
197
- padding-left: $xxl;
198
- padding-right: $xxl;
210
+ .p-0 {
211
+ padding: 0;
199
212
  }
200
213
 
201
- .py-xxl {
202
- padding-top: $xxl;
203
- padding-bottom: $xxl;
214
+ .px-0 {
215
+ padding-left: 0;
216
+ padding-right: 0;
204
217
  }
205
218
 
206
- .p-0 {
207
- padding: 0;
219
+ .py-0 {
220
+ padding-top: 0;
221
+ padding-bottom: 0;
208
222
  }
209
223
 
210
224
  .pt-0 {
@@ -223,16 +237,6 @@
223
237
  padding-left: 0;
224
238
  }
225
239
 
226
- .px-0 {
227
- padding-left: 0;
228
- padding-right: 0;
229
- }
230
-
231
- .py-0 {
232
- padding-top: 0;
233
- padding-bottom: 0;
234
- }
235
-
236
240
  /***************************************************************************
237
241
  * *
238
242
  * Margin *
@@ -248,59 +252,49 @@
248
252
  margin-right: auto;
249
253
  }
250
254
 
251
- .m-0 {
252
- margin: 0;
253
- }
254
-
255
- .mt-0 {
256
- margin-top: 0;
257
- }
258
-
259
- .mb-0 {
260
- margin-bottom: 0;
255
+ .my-auto {
256
+ margin-top: auto;
257
+ margin-bottom: auto;
261
258
  }
262
259
 
263
- .mr-0 {
264
- margin-right: 0;
260
+ .mt-auto {
261
+ margin-top: auto;
265
262
  }
266
263
 
267
- .ml-0 {
268
- margin-left: 0;
264
+ .mb-auto {
265
+ margin-bottom: auto;
269
266
  }
270
267
 
271
- .mx-0 {
272
- margin-left: 0;
273
- margin-right: 0;
268
+ .mr-auto {
269
+ margin-right: auto;
274
270
  }
275
271
 
276
- .my-0 {
277
- margin-top: 0;
278
- margin-bottom: 0;
272
+ .ml-auto {
273
+ margin-left: auto;
279
274
  }
280
275
 
281
276
  .m-xs {
282
277
  margin: $xs;
283
278
  }
284
279
 
285
- .mt-xs {
286
- margin-top: $xs;
280
+ .m-sm {
281
+ margin: $sm;
287
282
  }
288
283
 
289
- .mb-xs {
290
- margin-bottom: $xs;
284
+ .m-md {
285
+ margin: $md;
291
286
  }
292
287
 
293
- .mr-xs {
294
- margin-right: $xs;
288
+ .m-lg {
289
+ margin: $lg;
295
290
  }
296
291
 
297
- .ml-xs {
298
- margin-left: $xs;
292
+ .m-xl {
293
+ margin: $xl;
299
294
  }
300
295
 
301
- .mx-xs {
302
- margin-left: $xs;
303
- margin-right: $xs;
296
+ .m-xxl {
297
+ margin: $xxl;
304
298
  }
305
299
 
306
300
  .my-xs {
@@ -308,24 +302,34 @@
308
302
  margin-bottom: $xs;
309
303
  }
310
304
 
311
- .m-sm {
312
- margin: $sm;
305
+ .my-sm {
306
+ margin-top: $sm;
307
+ margin-bottom: $sm;
313
308
  }
314
309
 
315
- .mt-sm {
316
- margin-top: $sm;
310
+ .my-md {
311
+ margin-top: $md;
312
+ margin-bottom: $md;
317
313
  }
318
314
 
319
- .mb-sm {
320
- margin-bottom: $sm;
315
+ .my-lg {
316
+ margin-top: $lg;
317
+ margin-bottom: $lg;
321
318
  }
322
319
 
323
- .mr-sm {
324
- margin-right: $sm;
320
+ .my-xl {
321
+ margin-top: $xl;
322
+ margin-bottom: $xl;
325
323
  }
326
324
 
327
- .ml-sm {
328
- margin-left: $sm;
325
+ .my-xxl {
326
+ margin-top: $xxl;
327
+ margin-bottom: $xxl;
328
+ }
329
+
330
+ .mx-xs {
331
+ margin-left: $xs;
332
+ margin-right: $xs;
329
333
  }
330
334
 
331
335
  .mx-sm {
@@ -333,129 +337,150 @@
333
337
  margin-right: $sm;
334
338
  }
335
339
 
336
- .my-sm {
337
- margin-top: $sm;
338
- margin-bottom: $sm;
340
+ .mx-md {
341
+ margin-left: $md;
342
+ margin-right: $md;
339
343
  }
340
344
 
341
- .m-md {
342
- margin: $md;
345
+ .mx-lg {
346
+ margin-left: $lg;
347
+ margin-right: $lg;
348
+ }
349
+
350
+ .mx-xl {
351
+ margin-left: $xl;
352
+ margin-right: $xl;
353
+ }
354
+
355
+ .mx-xxl {
356
+ margin-left: $xxl;
357
+ margin-right: $xxl;
358
+ }
359
+
360
+ .mt-xs {
361
+ margin-top: $xs;
362
+ }
363
+
364
+ .mt-sm {
365
+ margin-top: $sm;
343
366
  }
344
367
 
345
368
  .mt-md {
346
369
  margin-top: $md;
347
370
  }
348
371
 
349
- .mb-md {
350
- margin-bottom: $md;
372
+ .mt-lg {
373
+ margin-top: $lg;
351
374
  }
352
375
 
353
- .mr-md {
354
- margin-right: $md;
376
+ .mt-xl {
377
+ margin-top: $xl;
355
378
  }
356
379
 
357
- .ml-md {
358
- margin-left: $md;
380
+ .mt-xxl {
381
+ margin-top: $xxl;
359
382
  }
360
383
 
361
- .mx-md {
362
- margin-left: $md;
363
- margin-right: $md;
384
+ .mb-xs {
385
+ margin-bottom: $xs;
364
386
  }
365
387
 
366
- .my-md {
367
- margin-top: $md;
388
+ .mb-sm {
389
+ margin-bottom: $sm;
390
+ }
391
+
392
+ .mb-md {
368
393
  margin-bottom: $md;
369
394
  }
370
395
 
371
- .m-lg {
372
- margin: $lg;
396
+ .mb-lg {
397
+ margin-bottom: $lg;
373
398
  }
374
399
 
375
- .mt-lg {
376
- margin-top: $lg;
400
+ .mb-xl {
401
+ margin-bottom: $xl;
377
402
  }
378
403
 
379
- .mb-lg {
380
- margin-bottom: $lg;
404
+ .mb-xxl {
405
+ margin-bottom: $xxl;
381
406
  }
382
407
 
383
- .mr-lg {
384
- margin-right: $lg;
408
+ .mr-xs {
409
+ margin-right: $xs;
385
410
  }
386
411
 
387
- .ml-lg {
388
- margin-left: $lg;
412
+ .mr-sm {
413
+ margin-right: $sm;
389
414
  }
390
415
 
391
- .mx-lg {
392
- margin-left: $lg;
416
+ .mr-md {
417
+ margin-right: $md;
418
+ }
419
+
420
+ .mr-lg {
393
421
  margin-right: $lg;
394
422
  }
395
423
 
396
- .my-lg {
397
- margin-top: $lg;
398
- margin-bottom: $lg;
424
+ .mr-xl {
425
+ margin-right: $xl;
399
426
  }
400
427
 
401
- .m-xl {
402
- margin: $xl;
428
+ .mr-xxl {
429
+ margin-right: $xxl;
403
430
  }
404
431
 
405
- .mt-xl {
406
- margin-top: $xl;
432
+ .ml-xs {
433
+ margin-left: $xs;
407
434
  }
408
435
 
409
- .mb-xl {
410
- margin-bottom: $xl;
436
+ .ml-sm {
437
+ margin-left: $sm;
411
438
  }
412
439
 
413
- .mr-xl {
414
- margin-right: $xl;
440
+ .ml-md {
441
+ margin-left: $md;
415
442
  }
416
443
 
417
- .ml-xl {
418
- margin-left: $xl;
444
+ .ml-lg {
445
+ margin-left: $lg;
419
446
  }
420
447
 
421
- .mx-xl {
448
+ .ml-xl {
422
449
  margin-left: $xl;
423
- margin-right: $xl;
424
450
  }
425
451
 
426
- .my-xl {
427
- margin-top: $xl;
428
- margin-bottom: $xl;
452
+ .ml-xxl {
453
+ margin-left: $xxl;
429
454
  }
430
455
 
431
- .m-xxl {
432
- margin: $xxl;
456
+ .m-0 {
457
+ margin: 0;
433
458
  }
434
459
 
435
- .mt-xxl {
436
- margin-top: $xxl;
460
+ .mx-0 {
461
+ margin-left: 0;
462
+ margin-right: 0;
437
463
  }
438
464
 
439
- .mb-xxl {
440
- margin-bottom: $xxl;
465
+ .my-0 {
466
+ margin-top: 0;
467
+ margin-bottom: 0;
441
468
  }
442
469
 
443
- .mr-xxl {
444
- margin-right: $xxl;
470
+ .mt-0 {
471
+ margin-top: 0;
445
472
  }
446
473
 
447
- .ml-xxl {
448
- margin-left: $xxl;
474
+ .mb-0 {
475
+ margin-bottom: 0;
449
476
  }
450
477
 
451
- .mx-xxl {
452
- margin-left: $xxl;
453
- margin-right: $xxl;
478
+ .mr-0 {
479
+ margin-right: 0;
454
480
  }
455
481
 
456
- .my-xxl {
457
- margin-top: $xxl;
458
- margin-bottom: $xxl;
482
+ .ml-0 {
483
+ margin-left: 0;
459
484
  }
460
485
 
461
486
  /***************************************************************************
package/theming/{utility-classes/_elder-typography-helpers.scss → utilities/_elder-typography-utils.scss} RENAMED
@@ -1,4 +1,4 @@
1
- @mixin elder-typography-helpers() {
1
+ @mixin elder-typography-utils() {
2
2
  .text-display-large {
3
3
  font: var(--md-sys-typescale-display-large);
4
4
  }
package/lib/components/m3-sidenav/m3-sidenav.component.d.ts DELETED
@@ -1,5 +0,0 @@
1
- import * as i0 from "@angular/core";
2
- export declare class M3SidenavComponent {
3
- static ɵfac: i0.ɵɵFactoryDeclaration<M3SidenavComponent, never>;
4
- static ɵcmp: i0.ɵɵComponentDeclaration<M3SidenavComponent, "elder-m3-sidenav", never, {}, {}, never, never, true, never>;
5
- }