igniteui-angular 18.2.3 → 18.2.4

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 (93) hide show
  1. package/esm2022/lib/avatar/avatar.component.mjs +17 -2
  2. package/esm2022/lib/checkbox/checkbox.component.mjs +73 -9
  3. package/esm2022/lib/core/utils.mjs +8 -1
  4. package/esm2022/lib/date-picker/date-picker.component.mjs +7 -3
  5. package/esm2022/lib/date-range-picker/date-range-picker.component.mjs +2 -2
  6. package/esm2022/lib/query-builder/query-builder.component.mjs +11 -6
  7. package/fesm2022/igniteui-angular.mjs +110 -15
  8. package/fesm2022/igniteui-angular.mjs.map +1 -1
  9. package/lib/avatar/avatar.component.d.ts +3 -1
  10. package/lib/checkbox/checkbox.component.d.ts +42 -2
  11. package/lib/core/styles/components/action-strip/_action-strip-component.scss +1 -1
  12. package/lib/core/styles/components/action-strip/_action-strip-theme.scss +1 -0
  13. package/lib/core/styles/components/avatar/_avatar-theme.scss +1 -0
  14. package/lib/core/styles/components/badge/_badge-theme.scss +1 -0
  15. package/lib/core/styles/components/banner/_banner-theme.scss +1 -0
  16. package/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss +1 -0
  17. package/lib/core/styles/components/button/_button-theme.scss +1 -0
  18. package/lib/core/styles/components/button-group/_button-group-theme.scss +1 -0
  19. package/lib/core/styles/components/calendar/_calendar-theme.scss +1 -0
  20. package/lib/core/styles/components/card/_card-theme.scss +1 -0
  21. package/lib/core/styles/components/carousel/_carousel-theme.scss +6 -5
  22. package/lib/core/styles/components/checkbox/_checkbox-component.scss +76 -14
  23. package/lib/core/styles/components/checkbox/_checkbox-theme.scss +98 -109
  24. package/lib/core/styles/components/chip/_chip-theme.scss +1 -0
  25. package/lib/core/styles/components/column-actions/_column-actions-theme.scss +1 -0
  26. package/lib/core/styles/components/combo/_combo-theme.scss +1 -0
  27. package/lib/core/styles/components/dialog/_dialog-theme.scss +1 -0
  28. package/lib/core/styles/components/divider/_divider-theme.scss +1 -0
  29. package/lib/core/styles/components/drop-down/_drop-down-theme.scss +1 -0
  30. package/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss +1 -0
  31. package/lib/core/styles/components/grid/_grid-component.scss +1 -0
  32. package/lib/core/styles/components/grid/_grid-theme.scss +4 -3
  33. package/lib/core/styles/components/grid/_pivot-data-selector-theme.scss +1 -0
  34. package/lib/core/styles/components/grid-summary/_grid-summary-theme.scss +1 -0
  35. package/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss +1 -0
  36. package/lib/core/styles/components/highlight/highlight-theme.scss +1 -0
  37. package/lib/core/styles/components/icon/_icon-theme.scss +2 -1
  38. package/lib/core/styles/components/icon-button/_icon-button-theme.scss +1 -0
  39. package/lib/core/styles/components/label/_label-theme.scss +1 -0
  40. package/lib/core/styles/components/list/_list-theme.scss +8 -53
  41. package/lib/core/styles/components/navbar/_navbar-theme.scss +1 -0
  42. package/lib/core/styles/components/navdrawer/_navdrawer-theme.scss +1 -0
  43. package/lib/core/styles/components/overlay/_overlay-theme.scss +1 -0
  44. package/lib/core/styles/components/paginator/_paginator-component.scss +1 -1
  45. package/lib/core/styles/components/paginator/_paginator-theme.scss +1 -0
  46. package/lib/core/styles/components/progress/_progress-theme.scss +2 -0
  47. package/lib/core/styles/components/query-builder/_query-builder-component.scss +9 -1
  48. package/lib/core/styles/components/query-builder/_query-builder-theme.scss +1 -0
  49. package/lib/core/styles/components/radio/_radio-theme.scss +1 -0
  50. package/lib/core/styles/components/ripple/_ripple-theme.scss +2 -1
  51. package/lib/core/styles/components/scrollbar/scrollbar-theme.scss +1 -0
  52. package/lib/core/styles/components/select/_select-theme.scss +1 -0
  53. package/lib/core/styles/components/slider/_slider-theme.scss +1 -0
  54. package/lib/core/styles/components/snackbar/_snackbar-theme.scss +1 -0
  55. package/lib/core/styles/components/splitter/_splitter-theme.scss +1 -0
  56. package/lib/core/styles/components/stepper/_stepper-theme.scss +1 -0
  57. package/lib/core/styles/components/switch/_switch-theme.scss +1 -0
  58. package/lib/core/styles/components/tabs/_tabs-theme.scss +21 -15
  59. package/lib/core/styles/components/time-picker/_time-picker-theme.scss +1 -0
  60. package/lib/core/styles/components/toast/_toast-theme.scss +1 -0
  61. package/lib/core/styles/components/tooltip/_tooltip-theme.scss +1 -0
  62. package/lib/core/styles/components/tree/_tree-theme.scss +1 -0
  63. package/lib/core/styles/components/watermark/_watermark-theme.scss +1 -0
  64. package/lib/core/styles/typography/_indigo.scss +3 -1
  65. package/lib/core/utils.d.ts +5 -0
  66. package/lib/date-picker/date-picker.component.d.ts +2 -1
  67. package/package.json +1 -1
  68. package/styles/igniteui-angular-dark.css +1 -1
  69. package/styles/igniteui-angular.css +1 -1
  70. package/styles/igniteui-bootstrap-dark.css +1 -1
  71. package/styles/igniteui-bootstrap-light.css +1 -1
  72. package/styles/igniteui-dark-green.css +1 -1
  73. package/styles/igniteui-fluent-dark-excel.css +1 -1
  74. package/styles/igniteui-fluent-dark-word.css +1 -1
  75. package/styles/igniteui-fluent-dark.css +1 -1
  76. package/styles/igniteui-fluent-light-excel.css +1 -1
  77. package/styles/igniteui-fluent-light-word.css +1 -1
  78. package/styles/igniteui-fluent-light.css +1 -1
  79. package/styles/igniteui-indigo-dark.css +1 -1
  80. package/styles/igniteui-indigo-light.css +1 -1
  81. package/styles/maps/igniteui-angular-dark.css.map +1 -1
  82. package/styles/maps/igniteui-angular.css.map +1 -1
  83. package/styles/maps/igniteui-bootstrap-dark.css.map +1 -1
  84. package/styles/maps/igniteui-bootstrap-light.css.map +1 -1
  85. package/styles/maps/igniteui-dark-green.css.map +1 -1
  86. package/styles/maps/igniteui-fluent-dark-excel.css.map +1 -1
  87. package/styles/maps/igniteui-fluent-dark-word.css.map +1 -1
  88. package/styles/maps/igniteui-fluent-dark.css.map +1 -1
  89. package/styles/maps/igniteui-fluent-light-excel.css.map +1 -1
  90. package/styles/maps/igniteui-fluent-light-word.css.map +1 -1
  91. package/styles/maps/igniteui-fluent-light.css.map +1 -1
  92. package/styles/maps/igniteui-indigo-dark.css.map +1 -1
  93. package/styles/maps/igniteui-indigo-light.css.map +1 -1
@@ -80,6 +80,7 @@
80
80
  clear-button-background-focus: $clear-button-background-focus,
81
81
  clear-button-foreground: $clear-button-foreground,
82
82
  clear-button-foreground-focus: $clear-button-foreground-focus,
83
+ theme: map.get($schema, '_meta', 'theme'),
83
84
  _meta: map.merge(if($meta, $meta, ()), (
84
85
  variant: map.get($schema, '_meta', 'theme')
85
86
  )),
@@ -74,6 +74,7 @@
74
74
  message-color: $message-color,
75
75
  shadow: $shadow,
76
76
  border-color: $border-color,
77
+ theme: map.get($schema, '_meta', 'theme'),
77
78
  _meta: map.merge(if($meta, $meta, ()), (
78
79
  variant: map.get($schema, '_meta', 'theme')
79
80
  )),
@@ -38,6 +38,7 @@
38
38
  name: $name,
39
39
  color: $color,
40
40
  inset: $inset,
41
+ theme: map.get($schema, '_meta', 'theme'),
41
42
  _meta: map.merge(if($meta, $meta, ()), (
42
43
  variant: map.get($schema, '_meta', 'theme'),
43
44
  )),
@@ -191,6 +191,7 @@
191
191
  border-color: $border-color,
192
192
  border-width: $border-width,
193
193
  size: $size,
194
+ theme: map.get($schema, '_meta', 'theme'),
194
195
  _meta: map.merge(if($meta, $meta, ()), (
195
196
  variant: map.get($schema, '_meta', 'theme')
196
197
  )),
@@ -86,6 +86,7 @@
86
86
  disabled-text-color: $disabled-text-color,
87
87
  disabled-description-color: $disabled-description-color,
88
88
  expanded-margin: $expanded-margin,
89
+ theme: map.get($schema, '_meta', 'theme'),
89
90
  _meta: map.merge(if($meta, $meta, ()), (
90
91
  variant: map.get($schema, '_meta', 'theme')
91
92
  )),
@@ -18,6 +18,7 @@
18
18
  igx-checkbox,
19
19
  igx-chip,
20
20
  igx-grid-summary,
21
+ igx-icon-button,
21
22
  igx-input-group,
22
23
  igx-grid-toolbar,
23
24
  igx-paginator,
@@ -575,6 +575,7 @@
575
575
  cell-selected-within-background: $cell-selected-within-background,
576
576
  cell-selected-within-text-color: $cell-selected-within-text-color,
577
577
 
578
+ theme: map.get($schema, '_meta', 'theme'),
578
579
  _meta: map.merge(if($meta, $meta, ()), (
579
580
  variant: map.get($schema, '_meta', 'theme'),
580
581
  theme-variant: map.get($schema, '_meta', 'variant')
@@ -1073,15 +1074,15 @@
1073
1074
  %cbx-composite-wrapper {
1074
1075
  padding: 0;
1075
1076
  }
1076
-
1077
+
1077
1078
  %cbx-label-pos--after {
1078
1079
  margin-inline-start: rem(12px);
1079
1080
  }
1080
-
1081
+
1081
1082
  %cbx-label-pos--before {
1082
1083
  margin-inline-end: rem(12px);
1083
1084
  }
1084
-
1085
+
1085
1086
  %cbx-label-pos--before,
1086
1087
  %cbx-label-pos--after {
1087
1088
  &:empty {
@@ -29,6 +29,7 @@
29
29
 
30
30
  @return extend($theme, (
31
31
  name: $name,
32
+ theme: map.get($schema, '_meta', 'theme'),
32
33
  _meta: map.merge(if($meta, $meta, ()), (
33
34
  variant: map.get($schema, '_meta', 'theme')
34
35
  )),
@@ -82,6 +82,7 @@
82
82
  pinned-border-style: $pinned-border-style,
83
83
  pinned-border-color: $pinned-border-color,
84
84
  label-hover-color: $label-hover-color,
85
+ theme: map.get($schema, '_meta', 'theme'),
85
86
  _meta: map.merge(if($meta, $meta, ()), (
86
87
  variant: map.get($schema, '_meta', 'theme')
87
88
  )),
@@ -92,6 +92,7 @@
92
92
  item-hover-text-color: $item-hover-text-color,
93
93
  item-focus-background: $item-focus-background,
94
94
  item-focus-text-color: $item-focus-text-color,
95
+ theme: map.get($schema, '_meta', 'theme'),
95
96
  _meta: map.merge(if($meta, $meta, ()), (
96
97
  variant: map.get($schema, '_meta', 'theme')
97
98
  )),
@@ -53,6 +53,7 @@
53
53
  resting-color: $resting-color,
54
54
  active-background: $active-background,
55
55
  active-color: $active-color,
56
+ theme: map.get($schema, '_meta', 'theme'),
56
57
  ));
57
58
  }
58
59
 
@@ -40,7 +40,8 @@
40
40
  name: $name,
41
41
  color: $color,
42
42
  size: $size,
43
- disabled-color: $disabled-color
43
+ disabled-color: $disabled-color,
44
+ theme: map.get($schema, '_meta', 'theme'),
44
45
  ));
45
46
  }
46
47
 
@@ -118,6 +118,7 @@
118
118
  disabled-foreground: $disabled-foreground,
119
119
  disabled-border-color: $disabled-border-color,
120
120
  size: $size,
121
+ theme: map.get($schema, '_meta', 'theme'),
121
122
  ))
122
123
  ));
123
124
  }
@@ -31,6 +31,7 @@
31
31
  name: $name,
32
32
  selector: $selector,
33
33
  color: $color,
34
+ theme: map.get($schema, '_meta', 'theme'),
34
35
  variant: map.get($schema, '_meta', 'theme'),
35
36
  ));
36
37
  }
@@ -229,6 +229,7 @@
229
229
  item-thumbnail-color-active: $item-thumbnail-color-active,
230
230
  border-color: $border-color,
231
231
  border-width: $border-width,
232
+ theme: map.get($schema, '_meta', 'theme'),
232
233
  _meta: map.merge(if($meta, $meta, ()), (
233
234
  variant: map.get($schema, '_meta', 'theme')
234
235
  )),
@@ -286,30 +287,6 @@
286
287
  'indigo': rem(8px),
287
288
  ), $variant);
288
289
 
289
- $list-icon-margin-inline: (
290
- comfortable: rem(16px),
291
- cosy: rem(8px),
292
- compact: rem(4px)
293
- );
294
-
295
- $list-icon-margin-block: (
296
- comfortable: rem(8px),
297
- cosy: rem(6px),
298
- compact: rem(4px)
299
- );
300
-
301
- $list-line-margin: (
302
- comfortable: rem(16px),
303
- cosy: rem(12px),
304
- compact: rem(8px)
305
- );
306
-
307
- $list-actions-margin: (
308
- comfortable: rem(8px),
309
- cosy: rem(6px),
310
- compact: rem(4px)
311
- );
312
-
313
290
  %igx-list {
314
291
  @include sizable();
315
292
 
@@ -325,6 +302,10 @@
325
302
  z-index: 0;
326
303
  border-radius: var-get($theme, 'border-radius');
327
304
 
305
+ @if $variant == 'bootstrap' {
306
+ border: rem(1px) solid var-get($theme, 'border-color');
307
+ }
308
+
328
309
  &:focus-visible {
329
310
  outline-style: none;
330
311
  }
@@ -478,10 +459,7 @@
478
459
  align-items: center;
479
460
  justify-content: center;
480
461
  color: var-get($theme, 'item-action-color');
481
-
482
- @if $variant == 'indigo' {
483
- gap: sizable(rem(4), rem(6), rem(8));
484
- }
462
+ gap: if($variant == 'indigo', sizable(rem(4), rem(6), rem(8)), rem(8px));
485
463
 
486
464
  &:empty {
487
465
  display: none;
@@ -489,10 +467,6 @@
489
467
 
490
468
  > * {
491
469
  --component-size: #{if($variant == 'indigo', 2, var(--list-size))};
492
-
493
- @if $variant != 'indigo' {
494
- margin-inline-start: pad-inline(map.get($list-actions-margin, 'compact'), map.get($list-actions-margin, 'cosy'), map.get($list-actions-margin, 'comfortable'));
495
- }
496
470
  }
497
471
 
498
472
  igc-icon,
@@ -516,10 +490,7 @@
516
490
  border-radius: var-get($theme, 'item-border-radius');
517
491
  background: inherit;
518
492
  z-index: 2;
519
-
520
- @if $variant == 'indigo' {
521
- gap: rem(8px);
522
- }
493
+ gap: if($variant == 'indigo', rem(8px), rem(16px));
523
494
  }
524
495
 
525
496
  %igx-list-header,
@@ -532,7 +503,7 @@
532
503
  display: flex;
533
504
  align-items: center;
534
505
  justify-content: center;
535
- align-self: if($variant == 'indigo', center, flex-start);
506
+ align-self: center;
536
507
  padding: 0;
537
508
  color: var-get($theme, 'item-thumbnail-color');
538
509
  gap: rem(8px);
@@ -541,12 +512,6 @@
541
512
  > igx-icon,
542
513
  > igc-icon {
543
514
  --component-size: #{if($variant == 'indigo', 2, var(--list-size))};
544
-
545
- @if $variant != 'indigo' {
546
- margin-inline-end: pad-inline(map.get($list-icon-margin-inline, 'compact'), map.get($list-icon-margin-inline, 'cosy'), map.get($list-icon-margin-inline, 'comfortable'));
547
- margin-inline-start: 0;
548
- margin-block: pad-block(map.get($list-icon-margin-block, 'compact'), map.get($list-icon-margin-block, 'cosy'), map.get($list-icon-margin-block, 'comfortable'));
549
- }
550
515
  }
551
516
 
552
517
  &:empty {
@@ -556,16 +521,6 @@
556
521
 
557
522
  %igx-list__item-thumbnail:not(:empty) + %igx-list__item-lines {
558
523
  --component-size: var(--list-size);
559
-
560
- @if $variant != 'indigo' {
561
- margin-inline-start: pad-inline(map.get($list-line-margin, 'compact'), map.get($list-line-margin, 'cosy'), map.get($list-line-margin, 'comfortable'));
562
- }
563
- }
564
-
565
- @if $variant != 'indigo' {
566
- %igx-list__item-lines + %igx-list__item-actions {
567
- margin-inline-start: rem(8px);
568
- }
569
524
  }
570
525
 
571
526
  %igx-list-item-content--active {
@@ -76,6 +76,7 @@
76
76
  idle-icon-color: $idle-icon-color,
77
77
  hover-icon-color: $hover-icon-color,
78
78
  shadow: $shadow,
79
+ theme: map.get($schema, '_meta', 'theme'),
79
80
  _meta: map.merge(if($meta, $meta, ()), (
80
81
  variant: map.get($schema, '_meta', 'theme')
81
82
  )),
@@ -136,6 +136,7 @@
136
136
  item-disabled-text-color:$item-disabled-text-color,
137
137
  item-disabled-icon-color: $item-disabled-icon-color,
138
138
  shadow: $shadow,
139
+ theme: map.get($schema, '_meta', 'theme'),
139
140
  _meta: map.merge(if($meta, $meta, ()), (
140
141
  variant: map.get($schema, '_meta', 'theme')
141
142
  )),
@@ -37,6 +37,7 @@
37
37
  name: $name,
38
38
  selector: $selector,
39
39
  background-color: $background-color,
40
+ theme: map.get($schema, '_meta', 'theme'),
40
41
  ));
41
42
  }
42
43
 
@@ -10,7 +10,7 @@
10
10
  $name: string.slice($this, 2, -1),
11
11
  $deps: (
12
12
  igx-button,
13
- igx-icon,
13
+ igx-icon-button,
14
14
  igx-input-group,
15
15
  )
16
16
  );
@@ -49,6 +49,7 @@
49
49
  text-color: $text-color,
50
50
  background-color: $background-color,
51
51
  border-color: $border-color,
52
+ theme: map.get($schema, '_meta', 'theme'),
52
53
  _meta: map.merge(if($meta, $meta, ()), (
53
54
  variant: map.get($schema, '_meta', 'theme')
54
55
  )),
@@ -70,6 +70,7 @@
70
70
  stripes-color: $stripes-color,
71
71
  text-color: $text-color,
72
72
  track-border-radius: $track-border-radius,
73
+ theme: map.get($schema, '_meta', 'theme'),
73
74
  _meta: map.merge(if($meta, $meta, ()), (
74
75
  variant: map.get($schema, '_meta', 'theme')
75
76
  )),
@@ -449,6 +450,7 @@
449
450
  progress-circle-color-end: $progress-circle-color-end,
450
451
  text-color: $text-color,
451
452
  diameter: $diameter,
453
+ theme: map.get($schema, '_meta', 'theme'),
452
454
  _meta: map.merge(if($meta, $meta, ()), (
453
455
  variant: map.get($schema, '_meta', 'theme')
454
456
  )),
@@ -13,7 +13,15 @@
13
13
  $this: bem--selector-to-string(&);
14
14
  @include register-component(
15
15
  $name: string.slice($this, 2, -1),
16
- $deps: ()
16
+ $deps: (
17
+ igx-icon,
18
+ igx-button,
19
+ igx-chip,
20
+ igx-select,
21
+ igx-input-button,
22
+ igx-icon-button,
23
+ igx-overlay,
24
+ )
17
25
  );
18
26
 
19
27
  @extend %advanced-filter !optional;
@@ -60,6 +60,7 @@
60
60
  background-and--focus: $background-and--focus,
61
61
  background-or: $background-or,
62
62
  background-or--focus: $background-or--focus,
63
+ theme: map.get($schema, '_meta', 'theme'),
63
64
  _meta: map.merge(if($meta, $meta, ()), (
64
65
  variant: map.get($schema, '_meta', 'theme')
65
66
  )),
@@ -87,6 +87,7 @@
87
87
  error-color: $error-color,
88
88
  error-color-hover: $error-color-hover,
89
89
  focus-outline-color-error: $focus-outline-color-error,
90
+ theme: map.get($schema, '_meta', 'theme'),
90
91
  _meta: map.merge(if($meta, $meta, ()), (
91
92
  variant: map.get($schema, '_meta', 'theme'),
92
93
  theme-variant: map.get($schema, '_meta', 'variant')
@@ -36,7 +36,8 @@
36
36
  @return extend($theme, (
37
37
  name: $name,
38
38
  selector: $selector,
39
- color: $color
39
+ color: $color,
40
+ theme: map.get($schema, '_meta', 'theme'),
40
41
  ));
41
42
  }
42
43
 
@@ -80,6 +80,7 @@
80
80
  sb-corner-bg: $sb-corner-bg,
81
81
  sb-corner-border-color: $sb-corner-border-color,
82
82
  sb-corner-border-size: $sb-corner-border-size,
83
+ theme: map.get($schema, '_meta', 'theme'),
83
84
  ));
84
85
  }
85
86
 
@@ -59,6 +59,7 @@
59
59
  toggle-button-foreground-disabled: $toggle-button-foreground-disabled,
60
60
  toggle-button-foreground-filled: $toggle-button-foreground-filled,
61
61
  toggle-button-background-focus--border: $toggle-button-background-focus--border,
62
+ theme: map.get($schema, '_meta', 'theme'),
62
63
  _meta: map.merge(if($meta, $meta, ()), (
63
64
  variant: map.get($schema, '_meta', 'theme')
64
65
  )),
@@ -98,6 +98,7 @@
98
98
  disabled-fill-track-color: $disabled-fill-track-color,
99
99
  tick-label-color: $tick-label-color,
100
100
  tick-color: $tick-color,
101
+ theme: map.get($schema, '_meta', 'theme'),
101
102
  _meta: map.merge(if($meta, $meta, ()), (
102
103
  variant: map.get($schema, '_meta', 'theme')
103
104
  )),
@@ -66,6 +66,7 @@
66
66
  text-color: $text-color,
67
67
  button-color: $button-color,
68
68
  shadow: $shadow,
69
+ theme: map.get($schema, '_meta', 'theme'),
69
70
  _meta: map.merge(if($meta, $meta, ()), (
70
71
  variant: map.get($schema, '_meta', 'theme')
71
72
  )),
@@ -62,6 +62,7 @@
62
62
  border-radius: $border-radius,
63
63
  focus-color: $focus-color,
64
64
  size: $size,
65
+ theme: map.get($schema, '_meta', 'theme'),
65
66
  _meta: map.merge(if($meta, $meta, ()), (
66
67
  variant: map.get($schema, '_meta', 'theme')
67
68
  )),
@@ -318,6 +318,7 @@
318
318
  // Border-radius
319
319
  border-radius-indicator: $border-radius-indicator,
320
320
  border-radius-step-header: $border-radius-step-header,
321
+ theme: map.get($schema, '_meta', 'theme'),
321
322
  _meta: map.merge(if($meta, $meta, ()), (
322
323
  variant: map.get($schema, '_meta', 'theme')
323
324
  )),
@@ -170,6 +170,7 @@
170
170
  thumb-on-error-color: $thumb-on-error-color,
171
171
  error-color: $error-color,
172
172
  error-color-hover: $error-color-hover,
173
+ theme: map.get($schema, '_meta', 'theme'),
173
174
  _meta: map.merge(if($meta, $meta, ()), (
174
175
  variant: map.get($schema, '_meta', 'theme'),
175
176
  theme-variant: map.get($schema, '_meta', 'variant')
@@ -187,6 +187,7 @@
187
187
  button-ripple-color: $button-ripple-color,
188
188
  border-color: $border-color,
189
189
  border-radius: $border-radius,
190
+ theme: map.get($schema, '_meta', 'theme'),
190
191
  _meta: map.merge(if($meta, $meta, ()), (
191
192
  variant: map.get($schema, '_meta', 'theme'),
192
193
  theme-variant: map.get($schema, '_meta', 'variant')
@@ -472,7 +473,7 @@
472
473
  &:hover,
473
474
  &:focus {
474
475
  background: var-get($theme, 'item-active-background');
475
- color: var-get($theme, 'item-active-color');
476
+ color: if($variant == 'fluent', var-get($theme, 'item-hover-color'), var-get($theme, 'item-active-color'));
476
477
 
477
478
  igx-icon {
478
479
  color: var-get($theme, 'item-active-icon-color');
@@ -487,16 +488,25 @@
487
488
  background: var-get($theme, 'item-active-background');
488
489
  position: relative;
489
490
  box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color');
491
+ z-index: 1;
490
492
 
491
- &::after {
492
- content: '';
493
- position: absolute;
494
- bottom: 0;
495
- inset-inline-start: 0;
496
- width: 100%;
497
- height: rem(1px);
498
- background: var-get($theme, 'item-active-background');
499
- z-index: 1;
493
+ &:not(:focus) {
494
+ &::before {
495
+ content: '';
496
+ position: absolute;
497
+ bottom: 0;
498
+ inset-inline-start: 0;
499
+ width: 100%;
500
+ height: rem(1px);
501
+ background: linear-gradient(
502
+ to right,
503
+ var-get($theme, 'border-color') 1px,
504
+ var-get($theme, 'item-active-background') 1px,
505
+ var-get($theme, 'item-active-background') calc(100% - 1px),
506
+ var-get($theme, 'border-color') calc(100% - 1px)
507
+ );
508
+ z-index: -1;
509
+ }
500
510
  }
501
511
 
502
512
  &:hover {
@@ -514,11 +524,6 @@
514
524
  &:hover,
515
525
  &:focus-visible {
516
526
  background: var-get($theme, 'item-hover-background');
517
- color: var-get($theme, 'item-hover-color');
518
-
519
- igx-icon {
520
- color: var-get($theme, 'item-hover-icon-color');
521
- }
522
527
  }
523
528
  }
524
529
  }
@@ -652,6 +657,7 @@
652
657
  @include type-style($label) {
653
658
  margin-top: 0;
654
659
  margin-bottom: 0;
660
+ @content;
655
661
  }
656
662
  }
657
663
  }
@@ -135,6 +135,7 @@
135
135
  divider-color: $divider-color,
136
136
  time-item-size: $time-item-size,
137
137
  active-item-border-radius: $active-item-border-radius,
138
+ theme: map.get($schema, '_meta', 'theme'),
138
139
  _meta: map.merge(if($meta, $meta, ()), (
139
140
  variant: map.get($schema, '_meta', 'theme')
140
141
  )),
@@ -64,6 +64,7 @@
64
64
  text-color: $text-color,
65
65
  border-color: $border-color,
66
66
  shadow: $shadow,
67
+ theme: map.get($schema, '_meta', 'theme'),
67
68
  _meta: map.merge(if($meta, $meta, ()), (
68
69
  variant: map.get($schema, '_meta', 'theme')
69
70
  )),
@@ -61,6 +61,7 @@
61
61
  text-color: $text-color,
62
62
  border-radius: $border-radius,
63
63
  shadow: $shadow,
64
+ theme: map.get($schema, '_meta', 'theme'),
64
65
  _meta: map.merge(if($meta, $meta, ()), (
65
66
  variant: map.get($schema, '_meta', 'theme')
66
67
  )),
@@ -98,6 +98,7 @@
98
98
  border-color: $border-color,
99
99
  hover-color: $hover-color,
100
100
  hover-selected-color: $hover-selected-color,
101
+ theme: map.get($schema, '_meta', 'theme'),
101
102
  _meta: map.merge(if($meta, $meta, ()), (
102
103
  variant: map.get($schema, '_meta', 'theme')
103
104
  )),
@@ -58,6 +58,7 @@
58
58
  color: $color,
59
59
  border-color: $border-color,
60
60
  border-radius: $border-radius,
61
+ theme: map.get($schema, '_meta', 'theme'),
61
62
  ));
62
63
  }
63
64
 
@@ -104,7 +104,9 @@
104
104
  ));
105
105
  @include tabs-typography($categories: (
106
106
  label: 'subtitle-2',
107
- ));
107
+ )) {
108
+ --ig-subtitle-2-text-transform: uppercase;
109
+ };
108
110
  @include time-picker-typography($categories: (
109
111
  header-hour: 'h5',
110
112
  selected-time: 'h6'
@@ -309,3 +309,8 @@ export declare function intoChunks<T>(arr: T[], size: number): Generator<T[], vo
309
309
  * @returns string that represents the --component-size default value
310
310
  */
311
311
  export declare function getComponentCssSizeVar(size: string): "var(--ig-size, var(--ig-size-small))" | "var(--ig-size, var(--ig-size-medium))" | "var(--ig-size, var(--ig-size-large))";
312
+ /**
313
+ * @param path - The URI path to be normalized.
314
+ * @returns string encoded using the encodeURI function.
315
+ */
316
+ export declare function normalizeURI(path: string): string;
@@ -250,6 +250,7 @@ export declare class IgxDatePickerComponent extends PickerBaseDirective implemen
250
250
  clearComponents: QueryList<IgxPickerClearComponent>;
251
251
  /** @hidden @internal */
252
252
  label: IgxLabelDirective;
253
+ private headerTitleTemplate;
253
254
  private headerTemplate;
254
255
  private dateTimeEditor;
255
256
  private viewContainerRef;
@@ -415,7 +416,7 @@ export declare class IgxDatePickerComponent extends PickerBaseDirective implemen
415
416
  private _initializeCalendarContainer;
416
417
  private setCalendarViewDate;
417
418
  static ɵfac: i0.ɵɵFactoryDeclaration<IgxDatePickerComponent, [null, null, null, null, null, null, null, { optional: true; }]>;
418
- static ɵcmp: i0.ɵɵComponentDeclaration<IgxDatePickerComponent, "igx-date-picker", never, { "hideOutsideDays": { "alias": "hideOutsideDays"; "required": false; }; "displayMonthsCount": { "alias": "displayMonthsCount"; "required": false; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; }; "formatter": { "alias": "formatter"; "required": false; }; "headerOrientation": { "alias": "headerOrientation"; "required": false; }; "todayButtonLabel": { "alias": "todayButtonLabel"; "required": false; }; "cancelButtonLabel": { "alias": "cancelButtonLabel"; "required": false; }; "spinLoop": { "alias": "spinLoop"; "required": false; }; "spinDelta": { "alias": "spinDelta"; "required": false; }; "outlet": { "alias": "outlet"; "required": false; }; "id": { "alias": "id"; "required": false; }; "formatViews": { "alias": "formatViews"; "required": false; }; "disabledDates": { "alias": "disabledDates"; "required": false; }; "specialDates": { "alias": "specialDates"; "required": false; }; "calendarFormat": { "alias": "calendarFormat"; "required": false; }; "value": { "alias": "value"; "required": false; }; "minValue": { "alias": "minValue"; "required": false; }; "maxValue": { "alias": "maxValue"; "required": false; }; "resourceStrings": { "alias": "resourceStrings"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; }, { "valueChange": "valueChange"; "validationFailed": "validationFailed"; }, ["label", "headerTemplate", "subheaderTemplate", "pickerActions", "clearComponents"], ["[igxLabel]", "igx-prefix,[igxPrefix]", "igx-suffix,[igxSuffix]", "igx-hint,[igxHint]"], true, never>;
419
+ static ɵcmp: i0.ɵɵComponentDeclaration<IgxDatePickerComponent, "igx-date-picker", never, { "hideOutsideDays": { "alias": "hideOutsideDays"; "required": false; }; "displayMonthsCount": { "alias": "displayMonthsCount"; "required": false; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; }; "formatter": { "alias": "formatter"; "required": false; }; "headerOrientation": { "alias": "headerOrientation"; "required": false; }; "todayButtonLabel": { "alias": "todayButtonLabel"; "required": false; }; "cancelButtonLabel": { "alias": "cancelButtonLabel"; "required": false; }; "spinLoop": { "alias": "spinLoop"; "required": false; }; "spinDelta": { "alias": "spinDelta"; "required": false; }; "outlet": { "alias": "outlet"; "required": false; }; "id": { "alias": "id"; "required": false; }; "formatViews": { "alias": "formatViews"; "required": false; }; "disabledDates": { "alias": "disabledDates"; "required": false; }; "specialDates": { "alias": "specialDates"; "required": false; }; "calendarFormat": { "alias": "calendarFormat"; "required": false; }; "value": { "alias": "value"; "required": false; }; "minValue": { "alias": "minValue"; "required": false; }; "maxValue": { "alias": "maxValue"; "required": false; }; "resourceStrings": { "alias": "resourceStrings"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; }, { "valueChange": "valueChange"; "validationFailed": "validationFailed"; }, ["label", "headerTitleTemplate", "headerTemplate", "subheaderTemplate", "pickerActions", "clearComponents"], ["[igxLabel]", "igx-prefix,[igxPrefix]", "igx-suffix,[igxSuffix]", "igx-hint,[igxHint]"], true, never>;
419
420
  static ngAcceptInputType_hideOutsideDays: unknown;
420
421
  static ngAcceptInputType_showWeekNumbers: unknown;
421
422
  static ngAcceptInputType_spinLoop: unknown;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "igniteui-angular",
3
- "version": "18.2.3",
3
+ "version": "18.2.4",
4
4
  "description": "Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps",
5
5
  "author": "Infragistics",
6
6
  "license": "SEE LICENSE IN LICENSE",