@syncfusion/ej2-treegrid 25.2.6 → 26.1.35

package/styles/tailwind.scss

@@ -1 +1,18 @@
-@import 'treegrid/tailwind.scss';
+@import 'ej2-base/styles/definition/tailwind.scss';
+@import 'ej2-inputs/styles/input/tailwind-definition.scss';
+@import 'ej2-inputs/styles/numerictextbox/tailwind-definition.scss';
+@import 'ej2-buttons/styles/button/tailwind-definition.scss';
+@import 'ej2-buttons/styles/radio-button/tailwind-definition.scss';
+@import 'ej2-buttons/styles/check-box/tailwind-definition.scss';
+@import 'ej2-dropdowns/styles/auto-complete/tailwind-definition.scss';
+@import 'ej2-dropdowns/styles/drop-down-list/tailwind-definition.scss';
+@import 'ej2-popups/styles/dialog/tailwind-definition.scss';
+@import 'ej2-popups/styles/spinner/tailwind-definition.scss';
+@import 'ej2-popups/styles/tooltip/tailwind-definition.scss';
+@import 'ej2-calendars/styles/datepicker/tailwind-definition.scss';
+@import 'ej2-calendars/styles/datetimepicker/tailwind-definition.scss';
+@import 'ej2-navigations/styles/toolbar/tailwind-definition.scss';
+@import 'ej2-navigations/styles/context-menu/tailwind-definition.scss';
+@import 'treegrid/tailwind-definition.scss';
+@import 'treegrid/icons/tailwind.scss';
+@import 'treegrid/all.scss';

package/styles/treegrid/_bds-definition.scss

@@ -1,11 +1,7 @@
-// color
 $treegrid-right-arrow-icon-color: $icon-color !default;
 $treegrid-right-arrow-hover-color: $icon-color-hover !default;
 $childborder-color: $primary !default;
 $error-elem-color: $danger !default;
-
-// Layout
-
 $error-elem-content: '\e77e' !default;
 $treegrid-right-arrow-icon-font-size: $text-lg !default;
 $treegrid-right-arrow-icon-padding: 0 !default;

package/styles/treegrid/_bootstrap-dark-definition.scss

@@ -1,4 +1,3 @@
-//default
 $treegrid-right-arrow-icon: '\e22f' !default;
 $treegrid-toolbar-expand-icon: '\e558' !default;
 $treegrid-toolbar-collapse-icon: '\e557' !default;

package/styles/treegrid/_bootstrap-definition.scss

@@ -1,4 +1,3 @@
-//default
 $treegrid-right-arrow-icon: '\e22f' !default;
 $treegrid-toolbar-expand-icon: '\e558' !default;
 $treegrid-toolbar-collapse-icon: '\e557' !default;

package/styles/treegrid/_bootstrap4-definition.scss

@@ -1,4 +1,3 @@
-//default
 $treegrid-right-arrow-icon: '\e70b' !default;
 $treegrid-toolbar-expand-icon: '\e7db' !default;
 $treegrid-toolbar-collapse-icon: '\e7dc' !default;

package/styles/treegrid/_bootstrap5-definition.scss

@@ -1,11 +1,7 @@
-// color
 $treegrid-right-arrow-icon-color: $icon-color !default;
 $treegrid-right-arrow-hover-color: $icon-color-hover !default;
 $childborder-color: $primary !default;
 $error-elem-color: $danger !default;
-
-// Layout
-
 $error-elem-content: '\e839' !default;
 $treegrid-right-arrow-icon-font-size: $text-lg !default;
 $treegrid-right-arrow-icon-padding: 0 !default;

package/styles/treegrid/_bootstrap5.3-definition.scss

@@ -0,0 +1,24 @@
+$treegrid-right-arrow-icon-color: $icon-color !default;
+$treegrid-right-arrow-hover-color: $icon-color-hover !default;
+$childborder-color: $primary !default;
+$error-elem-color: $danger !default;
+$error-elem-content: '\e839' !default;
+$treegrid-right-arrow-icon-font-size: $text-lg !default;
+$treegrid-right-arrow-icon-padding: 0 !default;
+$treegrid-right-arrow-icon-vertical-align: unset;
+$treegrid-right-arrow-icon-height: 18px !default;
+$treegrid-right-arrow-icon-width: 16px !default;
+$treegrid-bigger-icon-size: 22px !default;
+$treegrid-smaller-icon-size: 16px !default;
+$treegrid-bigger-icon-font-size: $font-icon-22 !default;
+$treegrid-frame-bigger-icon-height: 18px !default;
+$treegrid-frame-bigger-icon-width: 18px !default;
+$treegrid-frame-icon-height: 16px !default;
+$treegrid-frame-icon-width: 16px !default;
+$treegrid-content-right-padding: 21px !default;
+$treegrid-rowdrag-childborder-border: 2px solid #4f46e5;
+$treegrid-rowdd-topbottom-border: 2px solid #4f46e5 !default;
+$treegrid-rowdd-boxshadow: $primary !default;
+$treegrid-rowdd-childborder-width: 2px 0 0 !default;
+$treegrid-lastrowdd-childborder-width: 2px 0 !default;
+$treegrid-rtl-rowdd-childborder-width: 2px 0 2px 0 !default;

package/styles/treegrid/_fabric-dark-definition.scss

@@ -1,4 +1,3 @@
-//default
 $treegrid-right-arrow-icon: '\e22e' !default;
 $treegrid-toolbar-expand-icon: '\e555' !default;
 $treegrid-toolbar-collapse-icon: '\e559' !default;

package/styles/treegrid/_fabric-definition.scss

@@ -1,4 +1,3 @@
-//default
 $treegrid-right-arrow-icon: '\e22e' !default;
 $treegrid-toolbar-expand-icon: '\e555' !default;
 $treegrid-toolbar-collapse-icon: '\e559' !default;

package/styles/treegrid/_fluent-definition.scss

@@ -1,11 +1,7 @@
-// color
 $treegrid-right-arrow-icon-color: $icon-color !default;
 $treegrid-right-arrow-hover-color: $icon-color-hover !default;
 $childborder-color: $primary !default;
 $error-elem-color: $danger !default;
-
-// Layout
-
 $error-elem-content: '\e839' !default;
 $treegrid-right-arrow-icon-font-size: $text-lg !default;
 $treegrid-right-arrow-icon-padding: 0 !default;

package/styles/treegrid/_fluent2-definition.scss

@@ -0,0 +1,24 @@
+$treegrid-right-arrow-icon-color: $icon-color !default;
+$treegrid-right-arrow-hover-color: $icon-color-hover !default;
+$childborder-color: $primary !default;
+$error-elem-color: $danger !default;
+$error-elem-content: '\e839' !default;
+$treegrid-right-arrow-icon-font-size: 16px !default;
+$treegrid-right-arrow-icon-padding: 0 !default;
+$treegrid-right-arrow-icon-vertical-align: unset;
+$treegrid-right-arrow-icon-height: 16px !default;
+$treegrid-right-arrow-icon-width: 16px !default;
+$treegrid-bigger-icon-size: 20px !default;
+$treegrid-smaller-icon-size: 16px !default;
+$treegrid-bigger-icon-font-size: 20px !default;
+$treegrid-frame-bigger-icon-height: 18px !default;
+$treegrid-frame-bigger-icon-width: 18px !default;
+$treegrid-frame-icon-height: 16px !default;
+$treegrid-frame-icon-width: 16px !default;
+$treegrid-content-right-padding: 21px !default;
+$treegrid-rowdrag-childborder-border: 2px dashed $primary !default;
+$treegrid-rowdd-topbottom-border: 2px solid $primary !default;
+$treegrid-rowdd-boxshadow: $primary !default;
+$treegrid-rowdd-childborder-width: 2px 0 0 !default;
+$treegrid-lastrowdd-childborder-width: 2px 0 !default;
+$treegrid-rtl-rowdd-childborder-width: 2px 0 2px 0 !default;

package/styles/treegrid/_fusionnew-definition.scss

@@ -1,11 +1,7 @@
-// color
 $treegrid-right-arrow-icon-color: $icon-color !default;
 $treegrid-right-arrow-hover-color: $icon-color-hover !default;
 $childborder-color: $primary !default;
 $error-elem-color: $danger !default;
-
-// Layout
-
 $error-elem-content: '\e839' !default;
 $treegrid-right-arrow-icon-font-size: 18px !default;
 $treegrid-right-arrow-icon-padding: 0 !default;

package/styles/treegrid/_highcontrast-definition.scss

@@ -1,4 +1,3 @@
-//default
 $treegrid-right-arrow-icon: '\e22e' !default;
 $treegrid-toolbar-expand-icon: '\e555' !default;
 $treegrid-toolbar-collapse-icon: '\e559' !default;

package/styles/treegrid/_highcontrast-light-definition.scss

@@ -1,4 +1,3 @@
-//default
 $treegrid-right-arrow-icon: '\e22e' !default;
 $treegrid-toolbar-expand-icon: '\e555' !default;
 $treegrid-toolbar-collapse-icon: '\e559' !default;

package/styles/treegrid/_layout.scss

@@ -1,3 +1,34 @@
+@mixin rowcell-container {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+@mixin grid-wrap {
+  display: inline-block;
+  white-space: normal;
+  word-wrap: break-word;
+}
+@mixin display-align {
+  display: inline-block;
+  vertical-align: middle;
+}
+@mixin drop-bottom-child {
+  box-shadow: 0 1px 0 0 $childborder-color;
+  position: relative;
+  z-index: 1;
+}
+@mixin childborder {
+  border-bottom: $treegrid-rowdrag-childborder-border;
+  border-top: $treegrid-rowdrag-childborder-border;
+  box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
+}
+@mixin dropbottom {
+  border-bottom: $treegrid-rowdd-topbottom-border;
+  box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
+}
+@mixin droptop {
+  border-top: $treegrid-rowdd-topbottom-border;
+  box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
+}
 @include export-module('tree-layout') {
   .e-bigger {
     .e-treegrid {
@@ -12,11 +43,6 @@
         padding-left: 2px;
       }
 
-      .e-hierarchycheckbox .e-frame {
-        height: $treegrid-frame-bigger-icon-height;
-        width: $treegrid-frame-bigger-icon-width;
-      }
-
       .e-hierarchycheckbox .e-frame {
         @if $skin-name == 'bootstrap' or $skin-name == 'boostrap-dark' or $skin-name == 'fabric-dark' or $skin-name == 'fabric' or $skin-name == 'highcontrast' or $skin-name == 'FluentUI' or $theme-name == 'fluentui-dark' {
           font-size: 12px;
@@ -37,22 +63,30 @@
           font-weight: bold;
         }
       }
+
+      .e-gridcontent .e-rowcell{
+        @if $skin-name == 'fluent2' or $skin-name == 'fluent2-dark'{
+          line-height: 19px;
+        }
+      }
     }
   }
 
   .e-treegrid {
-
     .e-icons.e-none::before {
       content: '';
     }
 
     .e-gridheader {
-
       .e-headercell .e-css.e-hierarchycheckbox {
         height: 20px;
         @if $skin-name == 'FluentUI' or $theme-name == 'fluentui-dark' {
           padding-top: 0;
         }
+        @if $skin-name == 'fluent2' or $skin-name == 'fluent2-dark'{
+          position: relative;
+          bottom: 8px;
+        }
         vertical-align: middle;
       }
     }
@@ -66,13 +100,11 @@
     .e-rowcell:not(.e-gridclip) {
       .e-treecolumn-container {
         display: block;
-        overflow: hidden;
-        text-overflow: ellipsis;
+        @include rowcell-container;
 
         span.e-treecell {
           display: inline;
-          overflow: hidden;
-          text-overflow: ellipsis;
+          @include rowcell-container;
         }
       }
     }
@@ -115,8 +147,7 @@
 
     .e-treecheckbox-container {
       display: block;
-      overflow: hidden;
-      text-overflow: ellipsis;
+      @include rowcell-container;
 
       :not(.e-treecheckbox) {
         white-space: nowrap;
@@ -124,22 +155,22 @@
     }
 
     .e-treecheckbox {
-      overflow: hidden;
-      text-overflow: ellipsis;
+      @include rowcell-container;
       vertical-align: middle;
     }
 
     .e-treecolumn-container {
       span {
-        display: inline-block;
-        vertical-align: middle;
+        @include display-align;
       }
     }
+    
     .e-cloneproperties .e-treecolumn-container {
       span {
         vertical-align: text-top;
       }
     }
+
     .e-hierarchycheckbox .e-frame {
       @if $skin-name == 'bootstrap' or $skin-name == 'boostrap-dark' or $skin-name == 'fabric-dark' or $skin-name == 'fabric' or $skin-name == 'highcontrast' or $skin-name == 'FluentUI' or $theme-name == 'fluentui-dark' {
         font-size: 10px;
@@ -177,7 +208,7 @@
 
     .e-treecell {
       display: table-cell;
-      @if $skin-name == 'bootstrap5' or $skin-name == 'boostrap5-dark' or $skin-name == 'FluentUI' or $theme-name == 'fluentui-dark' {
+      @if $skin-name == 'bootstrap5' or $skin-name == 'boostrap5-dark' or $skin-name == 'FluentUI' or $theme-name == 'fluentui-dark' or $theme-name == 'fluent2' {
         line-height: 19px;
       }
       @else {
@@ -186,24 +217,17 @@
     }
 
     .e-grid {
-      &.e-wrap .e-rowcell .e-treecolumn-container {
+      &.e-wrap .e-rowcell .e-treecolumn-container,
+      &.e-wrap .e-rowcell .e-treecheckbox-container {
         white-space: nowrap;
       }
 
       &.e-wrap .e-rowcell .e-treecolumn-container .e-treecell {
-        display: inline-block;
-        white-space: normal;
-        word-wrap: break-word;
-      }
-
-      &.e-wrap .e-rowcell .e-treecheckbox-container {
-        white-space: nowrap;
+        @include grid-wrap;
       }
 
       &.e-wrap .e-rowcell .e-treecheckbox-container .e-treecheckbox {
-        display: inline-block;
-        white-space: normal;
-        word-wrap: break-word;
+        @include grid-wrap;
       }
     }
 
@@ -229,9 +253,8 @@
     }
 
     .e-icons.e-errorelem {
-      display: inline-block;
       padding-left: 10px;
-      vertical-align: middle;
+      @include display-align;
     }
 
     .e-errorelem::before {
@@ -244,9 +267,7 @@
       td.e-childborder {
         border-color: $childborder-color;
         border-width: $treegrid-rowdd-childborder-width;
-        box-shadow: 0 1px 0 0 $childborder-color;
-        position: relative;
-        z-index: 1;
+        @include drop-bottom-child;
       }
 
       td.e-rowcell.e-childborder.e-dragborder,
@@ -262,12 +283,11 @@
 
       td.e-childborder:first-child {
         border-left: $treegrid-rowdrag-childborder-border;
-        box-shadow: 0 1px 0 0 $childborder-color;
-        position: relative;
-        z-index: 1;
+        @include drop-bottom-child;
       }
 
-      td.e-rowcell.e-childborder:last-child {
+      td.e-rowcell.e-childborder:last-child,
+      td.e-lastrowcell.e-childborder:last-child {
         border-right: $treegrid-rowdrag-childborder-border;
       }
 
@@ -275,10 +295,6 @@
         border-width: $treegrid-lastrowdd-childborder-width;
       }
 
-      td.e-lastrowcell.e-childborder:last-child {
-        border-right: $treegrid-rowdrag-childborder-border;
-      }
-
       td.e-lastrowcell.e-childborder:first-child {
         border-left: $treegrid-rowdrag-childborder-border;
       }
@@ -286,9 +302,7 @@
       td.e-dropbottom:first-child,
       td.e-rowcell.e-dropbottom,
       td.e-dropbottom {
-        box-shadow: 0 1px 0 0 $childborder-color;
-        position: relative;
-        z-index: 1;
+        @include drop-bottom-child;
       }
 
       td.e-droptop:first-child,
@@ -314,11 +328,9 @@
       }
     }
 
-    .e-gridheader .e-firstrow-dragborder {
-      height: 0;
-    }
-
-    .e-droptop .e-lastrow-dragborder {
+    .e-gridheader .e-firstrow-dragborder,
+    .e-droptop .e-lastrow-dragborder,
+    .e-gridheader .e-firstrow-dragborder tr:first-child.e-dropbottom {
       height: 0;
     }
 
@@ -326,10 +338,6 @@
       position: relative;
     }
 
-    .e-gridheader .e-firstrow-dragborder tr:first-child.e-dropbottom {
-      height: 0;
-    }
-
     .e-gridheader .e-firstrow-border,
     .e-gridcontent .e-lastrow-border {
       background-color: $childborder-color;
@@ -340,13 +348,17 @@
       z-index: 1;
     }
 
+    .e-gridcontent .e-rowcell{
+      @if $skin-name == 'fluent2' or $skin-name == 'fluent2-dark'{
+        line-height: 17px;
+      }
+    }
+
     .e-grid .e-gridcontent {
       tr.e-row:first-child {
         td.e-rowcell.e-childborder,
         td.e-rowdragdrop.e-childborder {
-          border-bottom: $treegrid-rowdrag-childborder-border;
-          border-top: $treegrid-rowdrag-childborder-border;
-          box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
+          @include childborder;
         }
 
         td.e-rowcell.e-droptop,
@@ -357,45 +369,38 @@
 
       td.e-rowcell {
         &.e-childborder {
-          border-bottom: $treegrid-rowdrag-childborder-border;
-          border-top: $treegrid-rowdrag-childborder-border;
-          box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
+          @include childborder;
         }
       }
 
       td.e-rowdragdrop {
         &.e-childborder {
-          border-bottom: $treegrid-rowdrag-childborder-border;
-          border-top: $treegrid-rowdrag-childborder-border;
-          box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
+          @include childborder;
         }
       }
 
       td.e-rowcell {
         &.e-dropbottom {
-          border-bottom: $treegrid-rowdd-topbottom-border;
-          box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
+          @include dropbottom;
         }
         &.e-droptop {
-          border-top: $treegrid-rowdd-topbottom-border;
-          box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
+          @include droptop;
         }
       }
-      
+
       td.e-rowdragdrop {
         &.e-dropbottom {
-          border-bottom: $treegrid-rowdd-topbottom-border;
-          box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
+          @include dropbottom;
         }
         &.e-droptop {
-          border-top: $treegrid-rowdd-topbottom-border;
-          box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
+          @include droptop;
         }
       }
     }
 
     .e-grid.e-rtl {
-      .e-gridheader .e-firstrow-dragborder {
+      .e-gridheader .e-firstrow-dragborder,
+      .e-droptop .e-lastrow-dragborder {
         height: 0;
       }
 
@@ -415,12 +420,11 @@
 
         td.e-childborder:first-child {
           border-right: $treegrid-rowdrag-childborder-border;
-          box-shadow: 0 1px 0 0 $childborder-color;
-          position: relative;
-          z-index: 1;
+          @include drop-bottom-child;
         }
 
-        td.e-rowcell.e-childborder:last-child {
+        td.e-rowcell.e-childborder:last-child,
+        td.e-lastrowcell.e-childborder:first-child {
           border-left: $treegrid-rowdrag-childborder-border;
         }
 
@@ -432,10 +436,6 @@
           border-right: $treegrid-rowdrag-childborder-border;
         }
 
-        td.e-lastrowcell.e-childborder:first-child {
-          border-left: $treegrid-rowdrag-childborder-border;
-        }
-
         td.e-droptop:first-child,
         td.e-rowcell.e-droptop {
           border-top-color: $childborder-color;
@@ -445,10 +445,6 @@
         td.e-lastrowcell.e-dropbottom {
           border-bottom-color: $childborder-color;
         }
-
-        .e-droptop .e-lastrow-dragborder {
-          height: 0;
-        }
       }
     }
   }

package/styles/treegrid/_material-dark-definition.scss

@@ -1,4 +1,3 @@
-//default
 $treegrid-right-arrow-icon: '\e848' !default;
 $treegrid-toolbar-expand-icon: '\e556' !default;
 $treegrid-toolbar-collapse-icon: '\e554' !default;

package/styles/treegrid/_material-definition.scss

@@ -1,4 +1,3 @@
-//default
 $treegrid-right-arrow-icon: '\e848' !default;
 $treegrid-toolbar-expand-icon: '\e556' !default;
 $treegrid-toolbar-collapse-icon: '\e554' !default;

package/styles/treegrid/_material3-definition.scss

@@ -1,11 +1,7 @@
-// color
 $treegrid-right-arrow-icon-color: rgba($icon-color) !default;
 $treegrid-right-arrow-hover-color: rgba($icon-color-hover) !default;
 $childborder-color: rgba($primary) !default;
 $error-elem-color: rgba($danger) !default;
-
-// Layout
-
 $error-elem-content: '\e839' !default;
 $treegrid-right-arrow-icon-font-size: 18px !default;
 $treegrid-right-arrow-icon-padding: 0 !default;

package/styles/treegrid/_tailwind-definition.scss

@@ -1,11 +1,7 @@
-// color
 $treegrid-right-arrow-icon-color: $icon-color !default;
 $treegrid-right-arrow-hover-color: $icon-color-hover !default;
 $childborder-color: $primary !default;
 $error-elem-color: $danger !default;
-
-// Layout
-
 $error-elem-content: '\e77e' !default;
 $treegrid-right-arrow-icon-font-size: $text-lg !default;
 $treegrid-right-arrow-icon-padding: 0 !default;