Merge branch 'master' into opus-mep-refactor

Author: kdinev

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

@@ -88,7 +88,9 @@ export class IgxTreeGridAPIService extends GridBaseAPIService<GridType> {
     }
 
     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 {