igniteui-angular 19.1.7 → 19.1.8

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 (31) hide show
  1. package/fesm2022/igniteui-angular.mjs +11 -3
  2. package/fesm2022/igniteui-angular.mjs.map +1 -1
  3. package/lib/core/styles/components/calendar/_calendar-component.scss +16 -0
  4. package/lib/core/styles/components/calendar/_calendar-theme.scss +92 -9
  5. package/package.json +1 -1
  6. package/styles/igniteui-angular-dark.css +1 -1
  7. package/styles/igniteui-angular.css +1 -1
  8. package/styles/igniteui-bootstrap-dark.css +1 -1
  9. package/styles/igniteui-bootstrap-light.css +1 -1
  10. package/styles/igniteui-dark-green.css +1 -1
  11. package/styles/igniteui-fluent-dark-excel.css +1 -1
  12. package/styles/igniteui-fluent-dark-word.css +1 -1
  13. package/styles/igniteui-fluent-dark.css +1 -1
  14. package/styles/igniteui-fluent-light-excel.css +1 -1
  15. package/styles/igniteui-fluent-light-word.css +1 -1
  16. package/styles/igniteui-fluent-light.css +1 -1
  17. package/styles/igniteui-indigo-dark.css +1 -1
  18. package/styles/igniteui-indigo-light.css +1 -1
  19. package/styles/maps/igniteui-angular-dark.css.map +1 -1
  20. package/styles/maps/igniteui-angular.css.map +1 -1
  21. package/styles/maps/igniteui-bootstrap-dark.css.map +1 -1
  22. package/styles/maps/igniteui-bootstrap-light.css.map +1 -1
  23. package/styles/maps/igniteui-dark-green.css.map +1 -1
  24. package/styles/maps/igniteui-fluent-dark-excel.css.map +1 -1
  25. package/styles/maps/igniteui-fluent-dark-word.css.map +1 -1
  26. package/styles/maps/igniteui-fluent-dark.css.map +1 -1
  27. package/styles/maps/igniteui-fluent-light-excel.css.map +1 -1
  28. package/styles/maps/igniteui-fluent-light-word.css.map +1 -1
  29. package/styles/maps/igniteui-fluent-light.css.map +1 -1
  30. package/styles/maps/igniteui-indigo-dark.css.map +1 -1
  31. package/styles/maps/igniteui-indigo-light.css.map +1 -1
@@ -179,6 +179,10 @@
179
179
  @extend %date-range-preview !optional;
180
180
  }
181
181
 
182
+ @include e(date, $mods: ('range-preview', 'inactive')) {
183
+ @extend %date-range-preview-inactive !optional;
184
+ }
185
+
182
186
  @include e(date, $mods: ('range-preview', 'current')) {
183
187
  @extend %date-range-preview-current !optional;
184
188
  }
@@ -389,6 +393,18 @@
389
393
  @extend %date-last-preview-special !optional;
390
394
  }
391
395
 
396
+ @include e(date, $mods: ('first', 'range-preview', 'active')) {
397
+ @extend %date-first-preview-active !optional;
398
+ }
399
+
400
+ @include e(date, $mods: ('last', 'range-preview', 'active')) {
401
+ @extend %date-last-preview-active !optional;
402
+ }
403
+
404
+ @include e(date, $mods: ('first', 'last', 'selected')) {
405
+ @extend %date-first-last-selected !optional;
406
+ }
407
+
392
408
  @include e(date, $mods: ('first', 'range-preview', 'special', 'current')) {
393
409
  @extend %date-first-preview-special-current !optional;
394
410
  }
@@ -1578,7 +1578,9 @@
1578
1578
  %date-selected-special-active {
1579
1579
  %date-inner {
1580
1580
  &::after {
1581
- border-color: var-get($theme, 'date-selected-special-focus-border-color');
1581
+ @if $variant != 'fluent' {
1582
+ border-color: var-get($theme, 'date-selected-special-focus-border-color');
1583
+ }
1582
1584
  }
1583
1585
  }
1584
1586
  }
@@ -1641,7 +1643,9 @@
1641
1643
  %date-selected-special-current-first-last {
1642
1644
  %date-inner {
1643
1645
  &::after {
1644
- border-color: var-get($theme, 'date-selected-special-border-color');
1646
+ @if $variant != 'fluent' {
1647
+ border-color: var-get($theme, 'date-selected-special-border-color');
1648
+ }
1645
1649
  }
1646
1650
  }
1647
1651
  }
@@ -1814,7 +1818,9 @@
1814
1818
  %date-special-current-selected-active {
1815
1819
  %date-inner {
1816
1820
  &::after {
1817
- border-color: var-get($theme, 'date-selected-special-border-color');
1821
+ @if $variant != 'fluent' {
1822
+ border-color: var-get($theme, 'date-selected-special-border-color');
1823
+ }
1818
1824
  }
1819
1825
  }
1820
1826
  }
@@ -1887,6 +1893,16 @@
1887
1893
  }
1888
1894
  }
1889
1895
 
1896
+ @if $variant == 'fluent' {
1897
+ %date-selected-current-special {
1898
+ %date-inner {
1899
+ &::after {
1900
+ border-color: var-get($theme, 'date-selected-current-background');
1901
+ }
1902
+ }
1903
+ }
1904
+ }
1905
+
1890
1906
  %date-inactive {
1891
1907
  cursor: default;
1892
1908
 
@@ -2042,7 +2058,7 @@
2042
2058
  %date-selected-current-range-special-active:not(%date-selected-current-range-special-first),
2043
2059
  %date-selected-current-range-special-active:not(%date-selected-current-range-special-last) {
2044
2060
  %date-inner {
2045
- @if not $bootstrap-theme {
2061
+ @if not $bootstrap-theme and not $variant == 'fluent' {
2046
2062
  color: var-get($theme, 'date-special-focus-foreground');
2047
2063
  }
2048
2064
 
@@ -2192,7 +2208,6 @@
2192
2208
  position: absolute;
2193
2209
  height: $date-size;
2194
2210
  width: $date-size;
2195
- border-radius: var-get($theme, 'date-border-radius');
2196
2211
  }
2197
2212
  }
2198
2213
 
@@ -2218,7 +2233,32 @@
2218
2233
  &::after {
2219
2234
  width: $date-inner-size;
2220
2235
  height: $date-inner-size;
2221
- border-color: var-get($theme, 'date-selected-special-border-color');
2236
+
2237
+ @if $variant != 'fluent' {
2238
+ border-color: var-get($theme, 'date-selected-special-border-color');
2239
+ }
2240
+ }
2241
+ }
2242
+ }
2243
+
2244
+ @if $variant == 'fluent' {
2245
+ %date-first-preview-active {
2246
+ %date-inner {
2247
+ background: transparent;
2248
+ border-inline-end-color: transparent;
2249
+ }
2250
+ }
2251
+
2252
+ %date-last-preview-active {
2253
+ %date-inner {
2254
+ background: transparent;
2255
+ border-inline-start-color: transparent;
2256
+ }
2257
+ }
2258
+
2259
+ %date-first-last-selected {
2260
+ %date-inner {
2261
+ background: transparent;
2222
2262
  }
2223
2263
  }
2224
2264
  }
@@ -2338,7 +2378,7 @@
2338
2378
  content: '';
2339
2379
  position: absolute;
2340
2380
  height: $date-size;
2341
- width: calc($date-size / 2 + #{$border-size});
2381
+ width: $date-size;
2342
2382
  border: rem(1px) solid var-get($theme, 'date-range-border-color');
2343
2383
  z-index: 3;
2344
2384
  pointer-events: none;
@@ -2346,16 +2386,53 @@
2346
2386
  }
2347
2387
 
2348
2388
  %date-range-selected-first {
2389
+ %date-inner {
2390
+ border-start-end-radius: var-get($theme, 'date-border-radius');
2391
+ border-end-end-radius: var-get($theme, 'date-border-radius');
2392
+ }
2393
+
2349
2394
  &::before {
2350
- inset-inline-end: calc(50% - #{$border-size});
2351
2395
  border-inline-end-color: transparent;
2396
+ border-start-start-radius: var-get($theme, 'date-range-border-radius');
2397
+ border-end-start-radius: var-get($theme, 'date-range-border-radius');
2352
2398
  }
2353
2399
  }
2354
2400
 
2355
2401
  %date-range-selected-last {
2402
+ %date-inner {
2403
+ border-start-start-radius: var-get($theme, 'date-border-radius');
2404
+ border-end-start-radius: var-get($theme, 'date-border-radius');
2405
+ }
2406
+
2356
2407
  &::before {
2357
- inset-inline-start: calc(50% - #{$border-size});
2358
2408
  border-inline-start-color: transparent;
2409
+ border-start-end-radius: var-get($theme, 'date-range-border-radius');
2410
+ border-end-end-radius: var-get($theme, 'date-range-border-radius');
2411
+ }
2412
+ }
2413
+
2414
+
2415
+ %date-first-preview {
2416
+ %date-inner {
2417
+ border-start-start-radius: var-get($theme, 'date-range-border-radius');
2418
+ border-end-start-radius: var-get($theme, 'date-range-border-radius');
2419
+ border-start-end-radius: 0;
2420
+ border-end-end-radius: 0;
2421
+ }
2422
+ }
2423
+
2424
+ %date-last-preview {
2425
+ %date-inner {
2426
+ border-start-end-radius: var-get($theme, 'date-range-border-radius');
2427
+ border-end-end-radius: var-get($theme, 'date-range-border-radius');
2428
+ border-start-start-radius: 0;
2429
+ border-end-start-radius: 0;
2430
+ }
2431
+ }
2432
+
2433
+ %date-first-last {
2434
+ %date-inner {
2435
+ border-radius: var-get($theme, 'date-range-border-radius');
2359
2436
  }
2360
2437
  }
2361
2438
  }
@@ -2389,6 +2466,12 @@
2389
2466
  }
2390
2467
  }
2391
2468
 
2469
+ %date-range-preview-inactive {
2470
+ %date-inner {
2471
+ color: var-get($theme, 'inactive-color');
2472
+ }
2473
+ }
2474
+
2392
2475
  %date-range-preview-current {
2393
2476
  %date-inner {
2394
2477
  color: var-get($theme, 'date-selected-current-range-foreground');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "igniteui-angular",
3
- "version": "19.1.7",
3
+ "version": "19.1.8",
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",