igniteui-angular 20.0.2 → 20.0.4

package/lib/core/styles/components/column-actions/_column-actions-theme.scss

@@ -95,7 +95,7 @@
 
     %column-actions-input {
         font-size: rem(16px) !important;
-        margin: rem(-16px) 0 0 !important;
+        margin: 0 !important;
         padding: rem(8px) rem(16px);
     }
 

package/lib/core/styles/components/combo/_combo-theme.scss

@@ -301,6 +301,13 @@
                 padding: 0;
             }
         }
+
+        &:not(.igx-input-group--disabled){
+          %igx-combo__clear-button {
+                color: var-get($theme, 'clear-button-foreground');
+                background: var-get($theme, 'clear-button-background');
+            }
+        }
     }
 
     %form-group-bundle:not(%form-group-bundle--disabled):focus-within {

package/lib/core/styles/components/drop-down/_drop-down-theme.scss

@@ -299,20 +299,16 @@
             bottom: 0;
         }
 
-        igx-icon {
+        igx-icon,
+        igc-icon {
             justify-content: center;
-            --component-size: 1;
-
-            @if $variant == 'fluent' {
-                --component-size: 3;
-            }
 
             @if $variant == 'indigo' {
                 $icon-size: sizable(rem(14px), rem(16px), rem(16px));
 
-                width: var(--ig-icon-size, $icon-size);
-                height: var(--ig-icon-size, $icon-size);
-                font-size: var(--ig-icon-size, $icon-size);
+                --size: #{$icon-size};
+            } @else {
+                --component-size: 1;
             }
         }
     }

package/lib/core/styles/components/grid/_grid-theme.scss

@@ -456,12 +456,12 @@
 
     @if not($grid-shadow) {
         $grid-elevation: map.get($grid-schema, 'grid-elevation');
-        $grid-shadow: elevation(var(--grid-elevation));
+        $grid-shadow: elevation($grid-elevation);
     }
 
     @if not($drag-shadow) {
         $drag-elevation: map.get($grid-schema, 'drag-elevation');
-        $drag-shadow: elevation(var(--drag-elevation));
+        $drag-shadow: elevation($drag-elevation);
     }
 
     @if not($drop-area-border-radius) {
@@ -758,8 +758,7 @@
         igx-time-picker {
             position: relative;
             height: calc(100% - #{$editing-outline-width * 2});
-            width: calc(100% - #{$editing-outline-width * 2}) !important;
-            inset-inline-start: $editing-outline-width;
+            width: 100% !important;
             overflow: hidden;
         }
 
@@ -1535,6 +1534,9 @@
     }
 
     %igx-grid__td--bool {
+        display: flex;
+        flex-grow: 1;
+
         igx-icon {
             --component-size: #{if($variant == 'indigo', 2, 1)};
         }
@@ -1804,7 +1806,6 @@
         padding-inline-end: rem(4px) !important;
 
         > igx-icon {
-            margin-inline-start: auto;
             color: color($color: 'error');
             width: var(--igx-icon-size, rem(18px));
             height: var(--igx-icon-size, rem(18px));
@@ -1910,11 +1911,10 @@
     %igx-grid__td--editing {
         background: var-get($theme, 'cell-editing-background') !important;
         box-shadow: inset 0 0 0 $editing-outline-width var-get($theme, 'edit-mode-color');
-        padding: 0 !important;
+        padding-inline: rem(4px);
 
         &.igx-grid__td--invalid {
             box-shadow: inset 0 0 0 rem(2px) color($color: 'error') !important;
-            padding-inline-end: rem(4px) !important;
         }
 
         &%grid-cell-number {
@@ -2105,7 +2105,7 @@
 
         .sort-icon {
             color: var-get($theme, 'header-selected-text-color');
-	        
+
             ::after {
                 background: var-get($theme, 'header-selected-background');
             }
@@ -2133,7 +2133,7 @@
         &%igx-grid-th--sorted {
             .sort-icon {
                 color: var-get($theme, 'header-selected-text-color');
-	            
+
 	            > igx-icon {
 		            color: inherit;
 	            }
@@ -2141,7 +2141,7 @@
                 &:focus,
                 &:hover {
                     color: var-get($theme, 'header-selected-text-color');
-	                
+
 	                > igx-icon {
 		                color: inherit;
 	                }
@@ -2198,14 +2198,14 @@
         .sort-icon {
             opacity: 1;
             color: var-get($theme, 'sorted-header-icon-color');
-	        
+
 	        > igx-icon {
 		        color: inherit;
 	        }
 
             &:hover {
                 color: var-get($theme, 'sortable-header-icon-hover-color');
-	            
+
 	            > igx-icon {
 		            color: inherit;
 	            }
@@ -2241,6 +2241,7 @@
     %grid-cell-number {
         text-align: $grid-cell-align-num;
         justify-content: flex-end;
+        flex-grow: 1;
 
         %grid-cell-header-icons {
             justify-content: flex-start;

package/lib/core/styles/components/input/_input-group-component.scss

@@ -1000,6 +1000,36 @@
             }
         }
 
+        @include mx(bootstrap, warning) {
+          @include e(input) {
+              @extend %bootstrap-input--warning !optional;
+
+              &:hover {
+                  @extend %bootstrap-input--warning !optional;
+              }
+          }
+
+          @include e(file-input) {
+              @extend %bootstrap-input--warning !optional;
+
+              &:hover {
+                  @extend %bootstrap-input--warning !optional;
+              }
+          }
+
+          @include e(label) {
+              @extend %bootstrap-label !optional;
+          }
+
+          @include e(textarea) {
+              @extend %bootstrap-input--warning !optional;
+
+              &:hover {
+                  @extend %bootstrap-input--warning !optional;
+              }
+          }
+      }
+
         @include mx(bootstrap, textarea-group) {
             @include e(bundle) {
                 @extend %form-group-bundle-bootstrap--textarea !optional;

package/lib/core/styles/components/input/_input-group-theme.scss

@@ -747,12 +747,23 @@
                     }
                 }
             }
+
+            &:not(%form-group-display--focused, %form-group-display--filled) {
+                &:has(input:not(:placeholder-shown, [type='file'])) {
+                    %form-group-label {
+                        @include type-style('subtitle-1');
+                        transform: translateY(0);
+                    }
+                }
+            }
         }
     }
 
     %form-group-placeholder {
-        %form-group-label {
-            transition: none !important;
+        &:has(input:placeholder-shown, textarea:placeholder-shown) { 
+            %form-group-label {
+                transition: none !important;
+            }
         }
     }
 
@@ -1255,13 +1266,20 @@
 
     %form-group-label--focused-border,
     %form-group-label--filled-border,
-    %form-group-label--placeholder-border,
     %form-group-label--file-border {
         %igx-input-group__notch {
             border-block-start-color: transparent !important;
         }
     }
 
+    %form-group-label--placeholder-border {
+        &:has(input:placeholder-shown, textarea:placeholder-shown) {
+            %igx-input-group__notch {
+                border-block-start-color: transparent !important;
+            }
+        }
+    }
+
     %form-group-label--focused-border {
         %form-group-bundle-start {
             border-inline-start-width: rem(2px);
@@ -1349,6 +1367,26 @@
                 width: calc(100% - #{rem(2px)});
             }
         }
+
+        %textarea-group:not(%form-group-display--focused, %form-group-display--filled) {
+            &:has(textarea:not(:placeholder-shown)) {
+                %form-group-textarea-label:not(%textarea-group-label--focused) {
+                    @include type-style('subtitle-1');
+
+                    top: calc($input-top-padding - #{rem(3px)});
+                    transform: translateY(0);
+                    margin-bottom: auto;
+                }
+            }
+        }
+
+        %textarea-group:not(%form-group-display--focused, %form-group-display--filled) {
+            &:has(%form-group-display--border, textarea:not(:placeholder-shown)) {
+                %igx-input-group__notch {
+                    border-block-start-width: rem(1px);
+                }
+            }
+        }
     }
 
     %form-group-textarea-group-bundle {
@@ -1890,7 +1928,7 @@
     }
 
     %indigo--box-focused {
-        background: var-get($theme, 'box-background-hover');
+        background: var-get($theme, 'box-background-focus');
     }
 
     %form-group-bundle--indigo--disabled {
@@ -2423,12 +2461,38 @@
 
     %bootstrap-input--success {
         border: rem(1px) solid var-get($theme, 'success-secondary-color');
-        box-shadow: 0 0 0 rem(4px) var-get($theme, 'success-shadow-color');
+
+        &:focus {
+            box-shadow: 0 0 0 rem(4px) var-get($theme, 'success-shadow-color');
+
+            + %bootstrap-file-input {
+                box-shadow: 0 0 0 rem(4px) var-get($theme, 'success-shadow-color');
+            }
+        }
     }
 
     %bootstrap-input--error {
         border: rem(1px) solid var-get($theme, 'error-secondary-color');
-        box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
+
+        &:focus {
+            box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
+
+            + %bootstrap-file-input {
+                box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
+            }
+        }
+    }
+
+    %bootstrap-input--warning {
+        border: rem(1px) solid var-get($theme, 'warning-secondary-color');
+
+        &:focus {
+            box-shadow: 0 0 0 rem(4px) color($color: 'warn', $variant: 500, $opacity: 0.38);
+
+            + %bootstrap-file-input {
+                box-shadow: 0 0 0 rem(4px) color($color: 'warn', $variant: 500, $opacity: 0.38);
+            }
+        }
     }
 
     %bootstrap-input--disabled {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-angular",
-  "version": "20.0.2",
+  "version": "20.0.4",
   "description": "Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps",
   "author": "Infragistics",
   "license": "SEE LICENSE IN LICENSE",