Merge branch 'master' into rkaraivanov/template-outlet-performance

Author: rkaraivanov

projects/igniteui-angular/core/src/core/styles/components/button/_button-theme.scss

@@ -61,11 +61,6 @@
         $variant
     );
 
-    $button-transition: color var(--_init-transition, #{$time}) ease-in-out,
-        background-color var(--_init-transition, #{$time}) ease-in-out,
-        border-color var(--_init-transition, #{$time}) ease-in-out,
-        box-shadow var(--_init-transition, #{$time}) ease-in-out;
-
     $button-disabled-shadow: none;
 
     $button-floating-width: rem(56px);
@@ -287,6 +282,12 @@
     }
 
     %igx-button-display {
+        --_button-transition:
+            color var(--_init-transition, #{$time}) ease-in-out,
+            background-color var(--_init-transition, #{$time}) ease-in-out,
+            border-color var(--_init-transition, #{$time}) ease-in-out,
+            box-shadow var(--_init-transition, #{$time}) ease-in-out;
+
         @include sizable();
 
         position: relative;
@@ -312,7 +313,7 @@
         -webkit-tap-highlight-color: transparent;
         overflow: hidden;
         white-space: nowrap;
-        transition: $button-transition;
+        transition: var(--_button-transition);
         gap: pad-inline(
             map.get($items-gap, 'compact'),
             map.get($items-gap, 'cosy'),
@@ -330,7 +331,7 @@
             width: var(--igx-icon-size, #{$icon-in-button-size});
             height: var(--igx-icon-size, #{$icon-in-button-size});
             font-size: var(--igx-icon-size, #{$icon-in-button-size});
-            transition: $button-transition;
+            transition: var(--_button-transition);
         }
     }
 
@@ -525,7 +526,7 @@
         color: var-get($outlined-theme, 'focus-visible-foreground');
         border-color: var-get($outlined-theme, 'focus-visible-border-color');
 
-        @if $variant == 'material'  or $variant == 'bootstrap' {
+        @if $variant == 'material' or $variant == 'bootstrap' {
             igx-icon {
                 color: var-get($outlined-theme, 'icon-color-hover');
             }
@@ -701,7 +702,7 @@
         align-items: center;
         outline: none;
         cursor: pointer;
-        transition: $button-transition;
+        transition: var(--_button-transition);
         user-select: none;
         -webkit-tap-highlight-color: transparent;
         overflow: hidden;

projects/igniteui-angular/core/src/core/styles/components/combo/_combo-theme.scss

@@ -178,6 +178,7 @@
 
     .igx-input-group {
         %igx-combo__toggle-button {
+            cursor: pointer;
             background: var-get($theme, 'toggle-button-background');
             color: var-get($theme, 'toggle-button-foreground');
         }
@@ -286,4 +287,12 @@
             }
         }
     }
+
+    igx-combo {
+        %form-group-input,
+        %form-group-prefix,
+        %form-group-suffix {
+            cursor: pointer;
+        }
+    }
 }

projects/igniteui-angular/core/src/core/styles/components/input/_input-group-theme.scss

@@ -149,6 +149,7 @@
         [igxPrefix] {
             @extend %form-group-prefix;
             outline-style: none;
+            cursor: default;
 
             &:first-child {
                 @if $variant == 'fluent' {
@@ -164,6 +165,7 @@
         [igxSuffix] {
             @extend %form-group-suffix;
             outline-style: none;
+            cursor: default;
 
             &:last-child {
                 @if $variant == 'fluent' {
@@ -1425,7 +1427,6 @@
     }
 
     %form-group-input--hover {
-        cursor: pointer;
         color: var-get($theme, 'filled-text-hover-color');
 
         &::placeholder {
@@ -1434,7 +1435,6 @@
     }
 
     %form-group-input--focus {
-        cursor: text;
         color: var-get($theme, 'focused-text-color');
 
         &::placeholder {

projects/igniteui-angular/core/src/core/styles/components/select/_select-theme.scss

@@ -15,6 +15,7 @@
 
     .igx-input-group {
         %igx-select__toggle-button {
+            cursor: pointer;
             background: var-get($theme, 'toggle-button-background');
             color: var-get($theme, 'toggle-button-foreground');
         }
@@ -60,4 +61,12 @@
             color: var-get($theme, 'toggle-button-foreground-disabled');
         }
     }
+
+    igx-select {
+        %form-group-input,
+        %form-group-prefix,
+        %form-group-suffix {
+            cursor: pointer;
+        }
+    }
 }

projects/igniteui-angular/directives/src/directives/button/button-base.ts

@@ -105,6 +105,7 @@ export abstract class IgxButtonBaseDirective implements AfterViewInit, OnDestroy
         // Fix style flickering https://github.com/IgniteUI/igniteui-angular/issues/14759
         if (this._platformUtil.isBrowser) {
             this.element.nativeElement.style.setProperty('--_init-transition', '0s');
+            this.element.nativeElement.style.setProperty('transition', 'none');
         }
     }
 
@@ -114,6 +115,7 @@ export abstract class IgxButtonBaseDirective implements AfterViewInit, OnDestroy
 
             this._animationScheduler = animationFrameScheduler.schedule(() => {
                 this.element.nativeElement.style.removeProperty('--_init-transition');
+                this.element.nativeElement.style.setProperty('transition', 'var(--_button-transition)');
             });
         }
     }

projects/igniteui-angular/grids/core/src/api.service.ts

@@ -289,7 +289,9 @@ export class GridBaseAPIService<T extends GridType> implements GridServiceType {
     }
 
     public should_apply_number_style(column: ColumnType): boolean {
-        return column.dataType === GridColumnDataType.Number;
+        return column.dataType === GridColumnDataType.Number
+            || column.dataType === GridColumnDataType.Currency
+            || column.dataType === GridColumnDataType.Percent;
     }
 
     public get_data(): any[] {

projects/igniteui-angular/grids/core/src/headers/grid-header.component.ts

@@ -151,7 +151,9 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy {
 
     @HostBinding('class.igx-grid-th--number')
     public get numberStyle() {
-        return this.column.dataType === GridColumnDataType.Number;
+        return this.column.dataType === GridColumnDataType.Number
+            || this.column.dataType === GridColumnDataType.Currency
+            || this.column.dataType === GridColumnDataType.Percent;
     }
 
     @HostBinding('class.igx-grid-th--sortable')

projects/igniteui-angular/grids/tree-grid/src/tree-grid-api.service.ts

@@ -83,12 +83,14 @@ export class IgxTreeGridAPIService extends GridBaseAPIService<GridType> {
         if (expanded !== undefined) {
             return expanded;
         } else {
-            return record.children && record.children.length && record.level < grid.expansionDepth;
+            return record.children && !!record.children.length && record.level < grid.expansionDepth;
         }
     }
 
     public override should_apply_number_style(column: ColumnType): boolean {
-        return column.dataType === GridColumnDataType.Number && column.visibleIndex !== 0;
+        return (column.dataType === GridColumnDataType.Number
+            || column.dataType === GridColumnDataType.Currency
+            || column.dataType === GridColumnDataType.Percent) && column.visibleIndex !== 0;
     }
 
     public override deleteRowById(rowID: any): any {

projects/igniteui-angular/grids/tree-grid/src/tree-grid-expanding.spec.ts

@@ -44,6 +44,15 @@ describe('IgxTreeGrid - Expanding / Collapsing #tGrid', () => {
             treeGrid = fix.componentInstance.treeGrid;
         });
 
+        it('should return boolean for expand state of row without children using getRowByKey()', () => {
+            treeGrid.primaryKey = "ID";
+            treeGrid.childDataKey = "";
+            fix.detectChanges();
+
+            const testRow = treeGrid.getRowByKey(147);
+            expect(testRow.expanded).toEqual(false);
+        });
+
         it('check row expanding and collapsing are changing rows count (UI)', () => {
             let rows = TreeGridFunctions.getAllRows(fix);
             expect(rows.length).toBe(4);

projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.spec.ts

@@ -2103,6 +2103,29 @@ describe('IgxSimpleCombo', () => {
             fixture.detectChanges();
             expect(document.activeElement).toEqual(thirdComboInput.nativeElement);
         }));
+
+        it('should lose focus when user closes combo by clicking outside', fakeAsync(() => {
+            // Initially combo is not focused
+            expect(document.activeElement).not.toBe(input.nativeElement);
+
+            // Click inside combo input to focus it
+            input.triggerEventHandler('focus', {});
+            input.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
+            fixture.detectChanges();
+
+            // Verify combo is focused and opened
+            expect(document.activeElement).toBe(input.nativeElement);
+            expect(combo.collapsed).toBe(false);
+
+            // Simulate outside click by clicking on document body
+            // This triggers the blur event which is what happens on outside clicks
+            input.triggerEventHandler('blur', {});
+            document.body.click();
+            tick();
+            fixture.detectChanges();
+
+            expect(document.activeElement).not.toBe(input.nativeElement);
+        }));
     });
 
     describe('Form control tests: ', () => {