igniteui-angular 20.0.2 → 20.0.3

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 (34) hide show
  1. package/fesm2022/igniteui-angular.mjs +185 -17
  2. package/fesm2022/igniteui-angular.mjs.map +1 -1
  3. package/index.d.ts +4998 -4923
  4. package/lib/core/styles/components/column-actions/_column-actions-theme.scss +1 -1
  5. package/lib/core/styles/components/combo/_combo-theme.scss +7 -0
  6. package/lib/core/styles/components/input/_input-group-component.scss +30 -0
  7. package/lib/core/styles/components/input/_input-group-theme.scss +69 -5
  8. package/package.json +1 -1
  9. package/styles/igniteui-angular-dark.css +1 -1
  10. package/styles/igniteui-angular.css +1 -1
  11. package/styles/igniteui-bootstrap-dark.css +1 -1
  12. package/styles/igniteui-bootstrap-light.css +1 -1
  13. package/styles/igniteui-dark-green.css +1 -1
  14. package/styles/igniteui-fluent-dark-excel.css +1 -1
  15. package/styles/igniteui-fluent-dark-word.css +1 -1
  16. package/styles/igniteui-fluent-dark.css +1 -1
  17. package/styles/igniteui-fluent-light-excel.css +1 -1
  18. package/styles/igniteui-fluent-light-word.css +1 -1
  19. package/styles/igniteui-fluent-light.css +1 -1
  20. package/styles/igniteui-indigo-dark.css +1 -1
  21. package/styles/igniteui-indigo-light.css +1 -1
  22. package/styles/maps/igniteui-angular-dark.css.map +1 -1
  23. package/styles/maps/igniteui-angular.css.map +1 -1
  24. package/styles/maps/igniteui-bootstrap-dark.css.map +1 -1
  25. package/styles/maps/igniteui-bootstrap-light.css.map +1 -1
  26. package/styles/maps/igniteui-dark-green.css.map +1 -1
  27. package/styles/maps/igniteui-fluent-dark-excel.css.map +1 -1
  28. package/styles/maps/igniteui-fluent-dark-word.css.map +1 -1
  29. package/styles/maps/igniteui-fluent-dark.css.map +1 -1
  30. package/styles/maps/igniteui-fluent-light-excel.css.map +1 -1
  31. package/styles/maps/igniteui-fluent-light-word.css.map +1 -1
  32. package/styles/maps/igniteui-fluent-light.css.map +1 -1
  33. package/styles/maps/igniteui-indigo-dark.css.map +1 -1
  34. package/styles/maps/igniteui-indigo-light.css.map +1 -1
@@ -95,7 +95,7 @@
95
95
 
96
96
  %column-actions-input {
97
97
  font-size: rem(16px) !important;
98
- margin: rem(-16px) 0 0 !important;
98
+ margin: 0 !important;
99
99
  padding: rem(8px) rem(16px);
100
100
  }
101
101
 
@@ -301,6 +301,13 @@
301
301
  padding: 0;
302
302
  }
303
303
  }
304
+
305
+ &:not(.igx-input-group--disabled){
306
+ %igx-combo__clear-button {
307
+ color: var-get($theme, 'clear-button-foreground');
308
+ background: var-get($theme, 'clear-button-background');
309
+ }
310
+ }
304
311
  }
305
312
 
306
313
  %form-group-bundle:not(%form-group-bundle--disabled):focus-within {
@@ -1000,6 +1000,36 @@
1000
1000
  }
1001
1001
  }
1002
1002
 
1003
+ @include mx(bootstrap, warning) {
1004
+ @include e(input) {
1005
+ @extend %bootstrap-input--warning !optional;
1006
+
1007
+ &:hover {
1008
+ @extend %bootstrap-input--warning !optional;
1009
+ }
1010
+ }
1011
+
1012
+ @include e(file-input) {
1013
+ @extend %bootstrap-input--warning !optional;
1014
+
1015
+ &:hover {
1016
+ @extend %bootstrap-input--warning !optional;
1017
+ }
1018
+ }
1019
+
1020
+ @include e(label) {
1021
+ @extend %bootstrap-label !optional;
1022
+ }
1023
+
1024
+ @include e(textarea) {
1025
+ @extend %bootstrap-input--warning !optional;
1026
+
1027
+ &:hover {
1028
+ @extend %bootstrap-input--warning !optional;
1029
+ }
1030
+ }
1031
+ }
1032
+
1003
1033
  @include mx(bootstrap, textarea-group) {
1004
1034
  @include e(bundle) {
1005
1035
  @extend %form-group-bundle-bootstrap--textarea !optional;
@@ -747,12 +747,23 @@
747
747
  }
748
748
  }
749
749
  }
750
+
751
+ &:not(%form-group-display--focused, %form-group-display--filled) {
752
+ &:has(input:not(:placeholder-shown, [type='file'])) {
753
+ %form-group-label {
754
+ @include type-style('subtitle-1');
755
+ transform: translateY(0);
756
+ }
757
+ }
758
+ }
750
759
  }
751
760
  }
752
761
 
753
762
  %form-group-placeholder {
754
- %form-group-label {
755
- transition: none !important;
763
+ &:has(input:placeholder-shown, textarea:placeholder-shown) {
764
+ %form-group-label {
765
+ transition: none !important;
766
+ }
756
767
  }
757
768
  }
758
769
 
@@ -1255,13 +1266,20 @@
1255
1266
 
1256
1267
  %form-group-label--focused-border,
1257
1268
  %form-group-label--filled-border,
1258
- %form-group-label--placeholder-border,
1259
1269
  %form-group-label--file-border {
1260
1270
  %igx-input-group__notch {
1261
1271
  border-block-start-color: transparent !important;
1262
1272
  }
1263
1273
  }
1264
1274
 
1275
+ %form-group-label--placeholder-border {
1276
+ &:has(input:placeholder-shown, textarea:placeholder-shown) {
1277
+ %igx-input-group__notch {
1278
+ border-block-start-color: transparent !important;
1279
+ }
1280
+ }
1281
+ }
1282
+
1265
1283
  %form-group-label--focused-border {
1266
1284
  %form-group-bundle-start {
1267
1285
  border-inline-start-width: rem(2px);
@@ -1349,6 +1367,26 @@
1349
1367
  width: calc(100% - #{rem(2px)});
1350
1368
  }
1351
1369
  }
1370
+
1371
+ %textarea-group:not(%form-group-display--focused, %form-group-display--filled) {
1372
+ &:has(textarea:not(:placeholder-shown)) {
1373
+ %form-group-textarea-label:not(%textarea-group-label--focused) {
1374
+ @include type-style('subtitle-1');
1375
+
1376
+ top: calc($input-top-padding - #{rem(3px)});
1377
+ transform: translateY(0);
1378
+ margin-bottom: auto;
1379
+ }
1380
+ }
1381
+ }
1382
+
1383
+ %textarea-group:not(%form-group-display--focused, %form-group-display--filled) {
1384
+ &:has(%form-group-display--border, textarea:not(:placeholder-shown)) {
1385
+ %igx-input-group__notch {
1386
+ border-block-start-width: rem(1px);
1387
+ }
1388
+ }
1389
+ }
1352
1390
  }
1353
1391
 
1354
1392
  %form-group-textarea-group-bundle {
@@ -2423,12 +2461,38 @@
2423
2461
 
2424
2462
  %bootstrap-input--success {
2425
2463
  border: rem(1px) solid var-get($theme, 'success-secondary-color');
2426
- box-shadow: 0 0 0 rem(4px) var-get($theme, 'success-shadow-color');
2464
+
2465
+ &:focus {
2466
+ box-shadow: 0 0 0 rem(4px) var-get($theme, 'success-shadow-color');
2467
+
2468
+ + %bootstrap-file-input {
2469
+ box-shadow: 0 0 0 rem(4px) var-get($theme, 'success-shadow-color');
2470
+ }
2471
+ }
2427
2472
  }
2428
2473
 
2429
2474
  %bootstrap-input--error {
2430
2475
  border: rem(1px) solid var-get($theme, 'error-secondary-color');
2431
- box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
2476
+
2477
+ &:focus {
2478
+ box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
2479
+
2480
+ + %bootstrap-file-input {
2481
+ box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
2482
+ }
2483
+ }
2484
+ }
2485
+
2486
+ %bootstrap-input--warning {
2487
+ border: rem(1px) solid var-get($theme, 'warning-secondary-color');
2488
+
2489
+ &:focus {
2490
+ box-shadow: 0 0 0 rem(4px) color($color: 'warn', $variant: 500, $opacity: 0.38);
2491
+
2492
+ + %bootstrap-file-input {
2493
+ box-shadow: 0 0 0 rem(4px) color($color: 'warn', $variant: 500, $opacity: 0.38);
2494
+ }
2495
+ }
2432
2496
  }
2433
2497
 
2434
2498
  %bootstrap-input--disabled {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "igniteui-angular",
3
- "version": "20.0.2",
3
+ "version": "20.0.3",
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",