fix(igx-tree-grid): implement support for up to 25 levels #7299

Author: onlyexeption

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

@@ -532,6 +532,13 @@
         }
     }
 
+    @for $i from 1 through 25 {
+        @include e(tree-cell, $m: padding-level-#{$i}) {
+            @extend %igx-grid__tree-cell--padding-level-#{$i} !optional;
+        }
+    }
+
+
     @include m(cosy) {
         @extend %grid-display !optional;
 
@@ -630,6 +637,12 @@
                 @extend %igx-grid__tree-cell-cosy--padding-level-#{$i} !optional;
             }
         }
+
+        @for $i from 1 through 25 {
+            @include e(tree-cell, $m: padding-level-#{$i}) {
+                @extend %igx-grid__tree-cell-cosy--padding-level-#{$i} !optional;
+            }
+        }
     }
 
     @include m(compact) {
@@ -730,6 +743,12 @@
                 @extend %igx-grid__tree-cell-compact--padding-level-#{$i} !optional;
             }
         }
+
+        @for $i from 1 through 25 {
+            @include e(tree-cell, $m: padding-level-#{$i}) {
+                @extend %igx-grid__tree-cell-compact--padding-level-#{$i} !optional;
+            }
+        }
     }
 
     @include _excel-filtering-partial();

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

@@ -2073,10 +2073,6 @@
             padding-#{$left}: #{$i*map-get($grid-grouping-indicator-padding, 'comfortable')};
         }
 
-        %igx-grid__tree-cell--padding-level-#{$i} {
-            padding-#{$left}: #{$i*map-get($grid-grouping-indicator-padding, 'comfortable')};
-        }
-
         // COSY
         %igx-grid__row-indentation-cosy--level-#{$i} {
             padding-#{$left}: calc(#{$i*map-get($grid-grouping-indicator-padding, 'cosy')} + #{$indicator-icon-width});
@@ -2086,10 +2082,6 @@
             padding-#{$left}: #{$i*map-get($grid-grouping-indicator-padding, 'cosy')};
         }
 
-        %igx-grid__tree-cell-cosy--padding-level-#{$i} {
-            padding-#{$left}: #{$i*map-get($grid-grouping-indicator-padding, 'cosy')};
-        }
-
         // COMPACT
         %igx-grid__row-indentation-compact--level-#{$i} {
             padding-#{$left}: calc(#{$i*map-get($grid-grouping-indicator-padding, 'compact')} + #{$indicator-icon-width});
@@ -2098,6 +2090,16 @@
         %igx-grid__group-row-compact--padding-level-#{$i} {
             padding-#{$left}: #{$i*map-get($grid-grouping-indicator-padding, 'compact')};
         }
+    }
+
+    @for $i from 1 through 25 {
+        %igx-grid__tree-cell--padding-level-#{$i} {
+            padding-#{$left}: #{$i*map-get($grid-grouping-indicator-padding, 'comfortable')};
+        }
+
+        %igx-grid__tree-cell-cosy--padding-level-#{$i} {
+            padding-#{$left}: #{$i*map-get($grid-grouping-indicator-padding, 'cosy')};
+        }
 
         %igx-grid__tree-cell-compact--padding-level-#{$i} {
             padding-#{$left}: #{$i*map-get($grid-grouping-indicator-padding, 'compact')};