igniteui-angular 17.2.0-rc.1 → 17.2.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.
Files changed (44) hide show
  1. package/esm2022/lib/calendar/month-picker/month-picker.component.mjs +224 -6
  2. package/esm2022/lib/core/utils.mjs +3 -1
  3. package/esm2022/lib/directives/button/button-base.mjs +39 -2
  4. package/esm2022/lib/directives/button/button.directive.mjs +2 -1
  5. package/esm2022/lib/directives/toggle/toggle.directive.mjs +18 -6
  6. package/fesm2022/igniteui-angular.mjs +276 -8
  7. package/fesm2022/igniteui-angular.mjs.map +1 -1
  8. package/lib/calendar/month-picker/month-picker.component.d.ts +83 -2
  9. package/lib/core/styles/components/button/_button-component.scss +16 -0
  10. package/lib/core/styles/components/button/_button-theme.scss +203 -273
  11. package/lib/core/styles/components/button-group/_button-group-theme.scss +314 -85
  12. package/lib/core/styles/components/icon-button/_icon-button-theme.scss +27 -51
  13. package/lib/core/styles/components/overlay/_overlay-component.scss +4 -0
  14. package/lib/core/styles/components/overlay/_overlay-theme.scss +17 -1
  15. package/lib/core/utils.d.ts +2 -0
  16. package/lib/directives/button/button-base.d.ts +21 -0
  17. package/lib/directives/toggle/toggle.directive.d.ts +5 -3
  18. package/package.json +3 -3
  19. package/styles/igniteui-angular-dark.css +1 -1
  20. package/styles/igniteui-angular.css +1 -1
  21. package/styles/igniteui-bootstrap-dark.css +1 -1
  22. package/styles/igniteui-bootstrap-light.css +1 -1
  23. package/styles/igniteui-dark-green.css +1 -1
  24. package/styles/igniteui-fluent-dark-excel.css +1 -1
  25. package/styles/igniteui-fluent-dark-word.css +1 -1
  26. package/styles/igniteui-fluent-dark.css +1 -1
  27. package/styles/igniteui-fluent-light-excel.css +1 -1
  28. package/styles/igniteui-fluent-light-word.css +1 -1
  29. package/styles/igniteui-fluent-light.css +1 -1
  30. package/styles/igniteui-indigo-dark.css +1 -1
  31. package/styles/igniteui-indigo-light.css +1 -1
  32. package/styles/maps/igniteui-angular-dark.css.map +1 -1
  33. package/styles/maps/igniteui-angular.css.map +1 -1
  34. package/styles/maps/igniteui-bootstrap-dark.css.map +1 -1
  35. package/styles/maps/igniteui-bootstrap-light.css.map +1 -1
  36. package/styles/maps/igniteui-dark-green.css.map +1 -1
  37. package/styles/maps/igniteui-fluent-dark-excel.css.map +1 -1
  38. package/styles/maps/igniteui-fluent-dark-word.css.map +1 -1
  39. package/styles/maps/igniteui-fluent-dark.css.map +1 -1
  40. package/styles/maps/igniteui-fluent-light-excel.css.map +1 -1
  41. package/styles/maps/igniteui-fluent-light-word.css.map +1 -1
  42. package/styles/maps/igniteui-fluent-light.css.map +1 -1
  43. package/styles/maps/igniteui-indigo-dark.css.map +1 -1
  44. package/styles/maps/igniteui-indigo-light.css.map +1 -1
package/lib/core/styles/components/button-group/_button-group-theme.scss CHANGED
@@ -30,6 +30,7 @@
30
30
  /// @param {Color} $item-focused-text-color [null] - The focused text color for button group items.
31
31
  /// @param {Color} $item-focused-background [null] - The focused background color for button group items.
32
32
  /// @param {Color} $item-focused-border-color [null] - The focused border color for an item from the button group.
33
+ /// @param {Color} $item-focused-hover-background [null] - The focused & hover background color for button group items.
33
34
  /// @param {Color} $idle-shadow-color [null] - The outline color of focused button group items.
34
35
  /// @param {Color} $selected-shadow-color [null] - The outline color of focused/selected button group items.
35
36
  ///
@@ -44,8 +45,10 @@
44
45
  ///
45
46
  /// @param {Color} $item-selected-hover-text-color [null] - The text color for a selected item in hover state in the button group.
46
47
  /// @param {Color} $item-selected-hover-icon-color [null] - The icon color for a selected item in hover state in the button group.
47
- /// @param {Color} $item-selected-hover-background [null] - The background color for a selected item in hover or focus state in the button group.
48
+ /// @param {Color} $item-selected-hover-background [null] - The background color for a selected item in hover state in the button group.
48
49
  /// @param {Color} $item-selected-hover-border-color [null] - The border color for a selected item in hover state in the button group.
50
+ /// @param {Color} $item-selected-focus-background [null] - The background color for a selected item in focused state in the button group.
51
+ /// @param {Color} $item-selected-focus-hover-background [null] - The background color for a selected item in focused & hover state in the button group.
49
52
  ///
50
53
  /// @param {Color} $disabled-selected-text-color [null] - The disabled text color for a selected item in the button group.
51
54
  /// @param {Color} $disabled-selected-icon-color [null] - The disabled icon color for a selected item in the button group.
@@ -82,6 +85,7 @@
82
85
  $item-focused-text-color: null,
83
86
  $item-focused-border-color: null,
84
87
  $item-focused-background: null,
88
+ $item-focused-hover-background: null,
85
89
  $idle-shadow-color: null,
86
90
  $selected-shadow-color: null,
87
91
  $border-radius: null,
@@ -99,6 +103,8 @@
99
103
  $item-selected-hover-icon-color: null,
100
104
  $item-selected-hover-background: null,
101
105
  $item-selected-hover-border-color: null,
106
+ $item-selected-focus-background: null,
107
+ $item-selected-focus-hover-background: null,
102
108
 
103
109
  $disabled-selected-text-color: null,
104
110
  $disabled-selected-icon-color: null,
@@ -175,6 +181,7 @@
175
181
  item-focused-text-color: $item-focused-text-color,
176
182
  item-focused-background: $item-focused-background,
177
183
  item-focused-border-color: $item-focused-border-color,
184
+ item-focused-hover-background: $item-focused-hover-background,
178
185
  border-radius: $border-radius,
179
186
  item-hover-text-color: $item-hover-text-color,
180
187
  item-hover-icon-color: $item-hover-icon-color,
@@ -191,6 +198,8 @@
191
198
  item-selected-hover-icon-color: $item-selected-hover-icon-color,
192
199
  item-selected-hover-background: $item-selected-hover-background,
193
200
  item-selected-hover-border-color: $item-selected-hover-border-color,
201
+ item-selected-focus-background: $item-selected-focus-background,
202
+ item-selected-focus-hover-background: $item-selected-focus-hover-background,
194
203
  disabled-selected-text-color: $disabled-selected-text-color,
195
204
  disabled-selected-icon-color: $disabled-selected-icon-color,
196
205
  disabled-selected-background: $disabled-selected-background,
@@ -210,7 +219,7 @@
210
219
  /// @param {Map} $theme - The theme used to style the component.
211
220
  @mixin button-group($theme) {
212
221
  @include css-vars($theme);
213
- $group-item-min-width: rem(24px);
222
+
214
223
  $group-item-border-thickness: rem(1px);
215
224
  $group-items-margin: rem(10px, 16px);
216
225
  $outline-btn-indent: rem(2px);
@@ -218,6 +227,24 @@
218
227
  $variant: map.get($theme, '_meta', 'variant');
219
228
  $bootstrap-theme: $variant == 'bootstrap';
220
229
  $indigo-theme: $variant == 'indigo-design';
230
+ $group-item-min-width: map.get((
231
+ material: rem(42px),
232
+ fluent: rem(42px),
233
+ bootstrap: rem(42px),
234
+ indigo-design: rem(32px),
235
+ ), $variant);
236
+
237
+ %item-overlay {
238
+ &::before {
239
+ content: '';
240
+ z-index: -1;
241
+ position: absolute;
242
+ pointer-events: none;
243
+ width: 100%;
244
+ height: 100%;
245
+ background: var-get($theme, 'item-focused-background');
246
+ }
247
+ }
221
248
 
222
249
  %igx-group-display {
223
250
  display: flex;
@@ -285,45 +312,50 @@
285
312
  }
286
313
  }
287
314
 
288
- &:hover,
289
- &:focus {
315
+ &:hover {
290
316
  color: var-get($theme, 'item-hover-text-color');
291
317
  background: var-get($theme, 'item-hover-background');
292
-
318
+ border-color: var-get($theme, 'item-hover-border-color');
319
+
293
320
  igx-icon {
294
321
  color: var-get($theme, 'item-hover-icon-color');
295
322
  }
296
323
  }
297
324
 
298
- &:focus {
299
- @if $bootstrap-theme or $indigo-theme {
300
- box-shadow: 0 0 0 rem(3px) var-get($theme, 'idle-shadow-color');
301
- }
302
-
303
- @if $indigo-theme {
304
- z-index: 2;
305
- }
325
+ @if $variant != 'fluent' {
326
+ &:active {
327
+ color: var-get($theme, 'item-hover-text-color');
328
+ background: var-get($theme, 'item-hover-background');
329
+ border-color: var-get($theme, 'item-hover-border-color');
306
330
 
307
- &:hover {
308
331
  igx-icon {
309
332
  color: var-get($theme, 'item-hover-icon-color');
310
333
  }
311
334
  }
312
335
  }
313
336
 
314
- @if $variant != 'fluent' {
315
- &:focus,
316
- &:focus-visible {
317
- &:hover {
318
- color: var-get($theme, 'item-hover-text-color');
337
+ @if $variant == 'material' {
338
+ &:hover,
339
+ &:active {
340
+ @extend %item-overlay;
341
+
342
+ background: var-get($theme, 'item-background');
343
+ }
344
+
345
+ &:hover {
346
+ &::before {
319
347
  background: var-get($theme, 'item-hover-background');
320
348
  }
321
349
  }
322
350
  }
323
351
 
324
- @if $variant == 'fluent' {
325
- min-width: rem(50px);
352
+ @if $variant == 'bootstrap' {
353
+ &:active {
354
+ @extend %item-overlay;
355
+ }
356
+ }
326
357
 
358
+ @if $variant == 'fluent' {
327
359
  igx-icon {
328
360
  $icon-size: rem(18px);
329
361
 
@@ -331,20 +363,108 @@
331
363
  --igx-icon-size: #{$icon-size};
332
364
  }
333
365
 
334
- &:focus,
335
- &:focus-visible {
366
+ &:active {
367
+ background: var-get($theme, 'item-focused-background');
368
+ color: var-get($theme, 'item-text-color');
369
+ }
370
+ }
371
+
372
+ @if $variant == 'indigo-design' {
373
+ padding-inline: pad-inline(rem(8px));
374
+
375
+ igx-icon {
376
+ $icon-size: rem(16px);
377
+
378
+ --ig-icon-size: #{$icon-size};
379
+ --igx-icon-size: #{$icon-size};
380
+ }
381
+
382
+ &:hover {
383
+ border-color: var-get($theme, 'item-hover-border-color');
384
+ z-index: 1;
385
+ }
386
+
387
+ &:active {
388
+ color: var-get($theme, 'item-hover-text-color');
389
+ background: var-get($theme, 'item-hover-background');
390
+ border-color: var-get($theme, 'item-hover-border-color');
391
+ z-index: 2;
392
+ }
393
+ }
394
+
395
+ &[igxButton].igx-button--focused {
396
+ &:hover {
397
+ color: var-get($theme, 'item-hover-text-color');
398
+ background: var-get($theme, 'item-hover-background');
399
+
400
+ igx-icon {
401
+ color: var-get($theme, 'item-hover-icon-color');
402
+ }
403
+ }
404
+
405
+ @if $variant != 'fluent' {
406
+ color: var-get($theme, 'item-hover-text-color');
407
+ background: var-get($theme, 'item-hover-background');
408
+ border-color: var-get($theme, 'item-hover-border-color');
409
+
410
+ igx-icon {
411
+ color: var-get($theme, 'item-hover-icon-color');
412
+ }
413
+ }
414
+
415
+ @if $variant == 'material' {
416
+ @extend %item-overlay;
417
+
336
418
  background: var-get($theme, 'item-background');
337
419
 
338
- &:hover {
420
+ &::before {
339
421
  background: var-get($theme, 'item-hover-background');
340
422
  }
341
423
 
424
+ &:hover {
425
+ background: var-get($theme, 'item-background');
426
+
427
+ &::before {
428
+ background: var-get($theme, 'item-focused-hover-background');
429
+ }
430
+ }
431
+
342
432
  &:active {
343
- background: var-get($theme, 'item-focused-background');
433
+ background: var-get($theme, 'item-background');
434
+ color: var-get($theme, 'item-hover-text-color');
435
+
436
+ igx-icon {
437
+ color: var-get($theme, 'item-hover-icon-color');
438
+ }
439
+
440
+ &::before {
441
+ background: var-get($theme, 'item-focused-background');
442
+ }
443
+ }
444
+ }
445
+
446
+ @if $variant == 'bootstrap' {
447
+ background: var-get($theme, 'item-background');
448
+ z-index: 1;
449
+
450
+ &:active {
451
+ background: var-get($theme, 'item-hover-background');
452
+ color: var-get($theme, 'item-hover-text-color');
453
+
454
+ igx-icon {
455
+ color: var-get($theme, 'item-hover-icon-color');
456
+ }
344
457
  }
345
458
  }
346
459
 
347
- &:focus-visible {
460
+ @if $variant == 'fluent' {
461
+ background: var-get($theme, 'item-background');
462
+ color: var-get($theme, 'item-text-color');
463
+
464
+ igx-icon {
465
+ color: var-get($theme, 'item-icon-color');
466
+ }
467
+
348
468
  &::after {
349
469
  content: '';
350
470
  position: absolute;
@@ -355,48 +475,34 @@
355
475
  height: calc(100% - (#{$outline-btn-indent} * 2));
356
476
  box-shadow: 0 0 0 rem(1px) var-get($theme, 'item-focused-border-color');
357
477
  }
358
- }
359
- }
360
-
361
- @if $variant == 'indigo-design' {
362
- padding-inline: pad-inline(rem(8px));
363
-
364
- igx-icon {
365
- $icon-size: rem(16px);
366
-
367
- --ig-icon-size: #{$icon-size};
368
- --igx-icon-size: #{$icon-size};
369
- }
370
478
 
371
- &:hover {
372
- border-color: var-get($theme, 'item-hover-border-color');
373
- z-index: 1;
479
+ &:active {
480
+ background: var-get($theme, 'item-focused-background');
481
+ }
374
482
  }
375
483
 
376
- &:focus {
484
+ @if $variant == 'indigo-design' {
377
485
  color: var-get($theme, 'item-focused-text-color');
378
486
  background: var-get($theme, 'item-focused-background');
487
+ border-color: var-get($theme, 'item-focused-border-color');
488
+ z-index: 2;
379
489
 
380
490
  igx-icon {
381
491
  color: var-get($theme, 'item-icon-color');
382
492
  }
383
493
 
384
494
  &:hover {
385
- color: var-get($theme, 'item-hover-text-color');
386
- background: var-get($theme, 'item-hover-background');
387
495
  border-color: var-get($theme, 'item-hover-border-color');
388
496
  }
389
- }
390
497
 
391
- &:active {
392
- color: var-get($theme, 'item-hover-text-color');
393
- background: var-get($theme, 'item-hover-background');
394
- border-color: var-get($theme, 'item-hover-border-color');
395
- box-shadow: 0 0 0 rem(3px) var-get($theme, 'idle-shadow-color');
396
- z-index: 2;
498
+ &:active {
499
+ color: var-get($theme, 'item-hover-text-color');
500
+ background: var-get($theme, 'item-hover-background');
501
+ border-color: var-get($theme, 'item-hover-border-color');
397
502
 
398
- igx-icon {
399
- color: var-get($theme, 'item-hover-icon-color');
503
+ igx-icon {
504
+ color: var-get($theme, 'item-hover-icon-color');
505
+ }
400
506
  }
401
507
  }
402
508
  }
@@ -430,14 +536,6 @@
430
536
  position: relative;
431
537
  z-index: 1;
432
538
 
433
- &:hover,
434
- &:focus {
435
- @if $variant != 'fluent' {
436
- color: var-get($theme, 'item-selected-text-color');
437
- background: var-get($theme, 'item-selected-hover-background');
438
- }
439
- }
440
-
441
539
  &[igxButton] {
442
540
  border-color: var-get($theme, 'item-selected-border-color');
443
541
  }
@@ -449,25 +547,82 @@
449
547
  &:hover {
450
548
  border-color: var-get($theme, 'item-selected-hover-border-color');
451
549
  color: var-get($theme, 'item-selected-hover-text-color');
550
+ background: var-get($theme, 'item-selected-hover-background');
452
551
 
453
552
  igx-icon {
454
553
  color: var-get($theme, 'item-selected-hover-icon-color');
455
554
  }
456
555
  }
457
556
 
458
- &:focus {
459
- z-index: 3;
460
- background: var-get($theme, 'item-selected-background');
461
- box-shadow: 0 0 0 rem(3px) var-get($theme, 'selected-shadow-color');
557
+ @if $variant == 'material' {
558
+ &:hover {
559
+ @extend %item-overlay;
462
560
 
463
- igx-icon {
464
- color: var-get($theme, 'item-selected-icon-color');
561
+ background: var-get($theme, 'item-selected-background');
562
+
563
+ &::before {
564
+ background: var-get($theme, 'item-selected-hover-background');
565
+ }
566
+ }
567
+
568
+ &:active {
569
+ @extend %item-overlay;
570
+
571
+ color: var-get($theme, 'item-selected-text-color');
572
+ background: var-get($theme, 'item-selected-background');
573
+ border-color: var-get($theme, 'item-selected-border-color');
574
+
575
+ igx-icon {
576
+ color: var-get($theme, 'item-selected-icon-color');
577
+ }
578
+
579
+ &::before {
580
+ background: var-get($theme, 'item-selected-focus-background');
581
+ }
465
582
  }
466
-
583
+ }
584
+
585
+ @if $variant == 'bootstrap' {
586
+ &:active {
587
+ @extend %item-overlay;
588
+
589
+ color: var-get($theme, 'item-selected-text-color');
590
+ border-color: var-get($theme, 'item-selected-border-color');
591
+ background: var-get($theme, 'item-selected-hover-background');
592
+
593
+ &::before {
594
+ background: var-get($theme, 'item-selected-focus-background');
595
+ }
596
+ }
597
+ }
598
+
599
+ @if $variant == 'fluent' {
467
600
  &:hover {
468
- border-color: var-get($theme, 'item-selected-hover-border-color');
469
- color: var-get($theme, 'item-selected-hover-text-color');
601
+ background: var-get($theme, 'item-selected-background');
602
+ color: var-get($theme, 'item-selected-text-color');
603
+
604
+ @extend %item-overlay;
605
+
606
+ &::before {
607
+ background: var-get($theme, 'item-selected-hover-background');
608
+ }
609
+ }
610
+
611
+ &:active {
612
+ background: var-get($theme, 'item-selected-focus-background');
613
+ color: var-get($theme, 'item-selected-text-color');
614
+
615
+ igx-icon {
616
+ color: var-get($theme, 'item-selected-icon-color');
617
+ }
618
+ }
619
+ }
620
+
621
+ @if $variant == 'indigo-design' {
622
+ &:active {
470
623
  background: var-get($theme, 'item-selected-hover-background');
624
+ color: var-get($theme, 'item-selected-hover-text-color');
625
+ border-color: var-get($theme, 'item-selected-hover-border-color');
471
626
 
472
627
  igx-icon {
473
628
  color: var-get($theme, 'item-selected-hover-icon-color');
@@ -475,39 +630,113 @@
475
630
  }
476
631
  }
477
632
 
478
- @if $variant != 'fluent' {
479
- &:focus,
480
- &:focus-visible {
633
+ &[igxButton].igx-button--focused {
634
+ @if $variant != 'fluent' {
481
635
  &:hover {
482
- color: var-get($theme, 'item-selected-text-color');
636
+ color: var-get($theme, 'item-selected-hover-text-color');
483
637
  background: var-get($theme, 'item-selected-hover-background');
638
+ border-color: var-get($theme, 'item-selected-hover-border-color');
484
639
  }
485
640
 
486
641
  &:active {
487
642
  background: var-get($theme, 'item-selected-hover-background');
643
+ color: var-get($theme, 'item-selected-hover-text-color');
644
+
645
+ &::before {
646
+ background: var-get($theme, 'item-selected-focus-background');
647
+ }
648
+
649
+ igx-icon {
650
+ color: var-get($theme, 'item-selected-hover-icon-color');
651
+ }
488
652
  }
489
653
  }
490
- }
491
654
 
492
- @if $variant == 'fluent' {
493
- &:hover,
494
- &:focus,
495
- &:focus-visible {
655
+ @if $variant == 'material' or $variant == 'fluent' {
656
+ &:hover {
657
+ @extend %item-overlay;
658
+
659
+ &::before {
660
+ background: var-get($theme, 'item-selected-focus-hover-background');
661
+ }
662
+ }
663
+ }
664
+
665
+ @if $variant == 'material' {
496
666
  background: var-get($theme, 'item-selected-background');
667
+ color: var-get($theme, 'item-selected-hover-text-color');
668
+ border-color: var-get($theme, 'item-selected-hover-border-color');
669
+
670
+ &::before {
671
+ background: var-get($theme, 'item-selected-hover-background');
672
+ }
673
+
674
+ igx-icon {
675
+ color: var-get($theme, 'item-selected-hover-icon-color');
676
+ }
677
+
678
+ &:hover {
679
+ background: var-get($theme, 'item-selected-background');
680
+
681
+ igx-icon {
682
+ color: var-get($theme, 'item-selected-hover-icon-color');
683
+ }
684
+ }
685
+
686
+ &:active {
687
+ background: var-get($theme, 'item-selected-background');
688
+ }
497
689
  }
498
690
 
499
- &:active {
500
- background: var-get($theme, 'item-selected-hover-background');
691
+ @if $variant == 'bootstrap' {
692
+ color: var-get($theme, 'item-selected-text-color');
693
+ border-color: var-get($theme, 'item-selected-border-color');
694
+ background: var-get($theme, 'item-selected-background');
695
+
696
+ igx-icon {
697
+ color: var-get($theme, 'item-selected-icon-color');
698
+ }
501
699
  }
502
700
 
503
- &:focus,
504
- &:focus-visible {
701
+ @if $variant == 'fluent' {
702
+ background: var-get($theme, 'item-selected-background');
703
+ color: var-get($theme, 'item-selected-text-color');
704
+
705
+ igx-icon {
706
+ color: var-get($theme, 'item-selected-icon-color');
707
+ }
708
+
505
709
  &:hover {
506
710
  background: var-get($theme, 'item-selected-background');
711
+ color: var-get($theme, 'item-selected-text-color');
712
+
713
+ igx-icon {
714
+ color: var-get($theme, 'item-selected-hover-icon-color');
715
+ }
507
716
  }
508
717
 
509
718
  &:active {
510
- background: var-get($theme, 'item-selected-hover-background');
719
+ background: var-get($theme, 'item-selected-focus-background');
720
+ }
721
+ }
722
+
723
+ @if $variant == 'indigo-design' {
724
+ box-shadow: 0 0 0 rem(3px) var-get($theme, 'selected-shadow-color');
725
+ border-color: var-get($theme, 'item-selected-border-color');
726
+ background: var-get($theme, 'item-selected-background');
727
+ color: var-get($theme, 'item-selected-text-color');
728
+
729
+ igx-icon {
730
+ color: var-get($theme, 'item-selected-icon-color');
731
+ }
732
+
733
+ &:hover,
734
+ &:active {
735
+ border-color: var-get($theme, 'item-selected-hover-border-color');
736
+
737
+ igx-icon {
738
+ color: var-get($theme, 'item-selected-hover-icon-color');
739
+ }
511
740
  }
512
741
  }
513
742
  }
@@ -522,7 +751,7 @@
522
751
  bottom: 0;
523
752
  inset-inline-end: 0;
524
753
  inset-inline-start: 0;
525
- background: color($color: 'gray', $variant: 500, $opacity: .12);
754
+ background: var-get($theme, 'disabled-selected-background');
526
755
  }
527
756
 
528
757
  @if $variant == 'indigo-design' {