fix(grids): apply number-style class for currency and percent cols (#16848)

Co-authored-by: MonikaKirkova <47036441+MonikaKirkova@users.noreply.github.com>

Author: ddaribo

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

@@ -283,7 +283,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/src/lib/grids/headers/grid-header.component.ts

@@ -149,7 +149,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/src/lib/grids/tree-grid/tree-grid-api.service.ts

@@ -81,7 +81,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 {