Merge branch '19.2.x' into didimmova/fix-vhelper-dropdown-padding

Author: didimmova

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -737,8 +737,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;
         }
 
@@ -1514,6 +1513,9 @@
     }
 
     %igx-grid__td--bool {
+        display: flex;
+        flex-grow: 1;
+
         igx-icon {
             --component-size: #{if($variant == 'indigo', 2, 1)};
         }
@@ -1783,7 +1785,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));
@@ -1889,11 +1890,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 {
@@ -2084,7 +2084,7 @@
 
         .sort-icon {
             color: var-get($theme, 'header-selected-text-color');
-	        
+
             ::after {
                 background: var-get($theme, 'header-selected-background');
             }
@@ -2112,15 +2112,15 @@
         &%igx-grid-th--sorted {
             .sort-icon {
                 color: var-get($theme, 'header-selected-text-color');
-	            
+
 	            > igx-icon {
 		            color: inherit;
 	            }
 
                 &:focus,
                 &:hover {
                     color: var-get($theme, 'header-selected-text-color');
-	                
+
 	                > igx-icon {
 		                color: inherit;
 	                }
@@ -2177,14 +2177,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;
 	            }
@@ -2220,6 +2220,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;

projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html

@@ -8,6 +8,7 @@
         <div
             igxTextHighlight class="igx-grid__td-text"
             [cssClass]="highlightClass"
+            [class.igx-grid__td--number]="column.dataType === 'number' || column.dataType === 'percent' || column.dataType === 'currency'"
             [activeCssClass]="activeHighlightClass"
             [groupName]="gridID"
             [value]="formatter ? (value | columnFormatter:formatter:rowData)
@@ -32,11 +33,13 @@
     }
 
     @if (column.dataType === 'boolean' && !this.formatter) {
+    <div [class.igx-grid__td--bool]="column.dataType === 'boolean'">
         <igx-icon
             family="default"
             [name]="value ? 'confirm' : 'close'"
             [ngClass]="{ 'igx-icon--success': value, 'igx-icon--error': !value }">
         </igx-icon>
+    </div>
     }
     @if (column.dataType === 'image') {
         <img [src]="value" [alt]="value | igxCellImageAlt" />

projects/igniteui-angular/src/lib/grids/grid/grid-validation.service.ts

@@ -36,6 +36,7 @@ export class IgxGridValidationService {
                 owner: this.grid
             };
             this.grid.formGroupCreated.emit(args);
+            formGroup.patchValue(data);
             this.add(rowId, formGroup);
         } else {
             // reset to pristine.