@syncfusion/ej2-navigations 25.2.6 → 26.1.35-750253

package/styles/treeview/_fluent2-definition.scss

@@ -0,0 +1,126 @@
+/*! TreeView's theme wise override definitions and variables */
+/* stylelint-disable */
+$treeview-font-size: $text-sm !default;
+$treeview-icon-font-size: $text-sm !default;
+$treeview-image-font-size: $text-xl !default;
+$treeview-big-font-size: $text-base !default;
+$treeview-big-icon-font-size: 16px !default;
+$treeview-big-img-size: 22px !default;
+$treeview-radius: 4px !default;
+$treeview-item-height: 32px !default;
+$treeview-text-height: 30px !default;
+$treeview-input-height: 32px !default;
+$treeview-root-ul-padding: 0 0 0 12px !default;
+$treeview-rtl-root-ul-padding: 0 12px 0 0 !default;
+$treeview-child-ul-padding: 0 0 0 20px !default;
+$treeview-rtl-child-ul-padding: 0 20px 0 0 !default;
+$treeview-text-wrap-padding: 0 0 0 20px !default;
+$treeview-rtl-text-wrap-padding: 0 20px 0 0 !default;
+$treeview-icon-size: 14px !default;
+$treeview-icon-margin: 0 0 0 -14px !default;
+$treeview-rtl-icon-margin: 0 -14px 0 0 !default;
+$treeview-icon-padding: 0px !default;
+$treeview-text-padding: 0 12px !default;
+$treeview-text-margin: 0 !default;
+$treeview-image-size: 18px !default;
+$treeview-image-margin: 0 0 0 6px !default;
+$treeview-navigable-icon-image-margin: 0 8px 0 0 !default;
+$treeview-navigable-icon-image-margin-reverse: 0 0 0 8px !default;
+$treeview-navigable-check-margin-bigger: 0 0 0 12px !default;
+$treeview-navigable-icon-image-anchor-margin-bigger: 0 12px 0 8px !default;
+$treeview-navigable-icon-image-anchor-margin-reverse-bigger: 0 6px 0 10px !default;
+$treeview-navigable-icon-image-anchor-margin: 0 10px 0 2px !default;
+$treeview-navigable-icon-image-anchor-margin-reverse: 0 2px 0 10px !default;
+$treeview-navigable-rtl-margin-reverse: 0 12px 0 0 !default;
+$treeview-rtl-image-margin: 0 12px 0 0 !default;
+$treeview-image-text-padding: 0 12px !default;
+$treeview-icon-image-margin: 0 0 0 12px !default;
+$treeview-rtl-icon-image-margin: 0 12px 0 0 !default;
+$treeview-check-margin: 0 0 0 4px !default;
+$treeview-rtl-check-margin: 0 4px 0 0 !default;
+$treeview-check-text-padding: 0 12px !default;
+$treeview-check-image-margin: 0 0 0 4px !default;
+$treeview-rtl-check-image-margin: 0 4px 0 0 !default;
+$treeview-drop-count-border-size: 1px !default;
+$treeview-drop-count-font-size: $text-xs !default;
+$treeview-active-font-weight: 600 !default;
+$treeview-edit-wrap-width: calc(100% - 2px) !default;
+$treeview-check-wrap-width: calc(100% - 23px) !default;
+$treeview-check-icon-wrap-width: calc(100% - 56px) !default;
+$treeview-check-icon-img-wrap-width: calc(100% - 84px) !default;
+$treeview-icon-wrap-width: calc(100% - 32px) !default;
+$treeview-icon-img-wrap-width: calc(100% - 60px) !default;
+
+$treeview-big-item-height: 40px !default;
+$treeview-big-text-height: 38px !default;
+$treeview-big-input-height: 40px !default;
+$treeview-big-text-padding: 0 12px !default;
+$treeview-big-input-padding: 0 9px !default;
+$treeview-big-icon-padding: 0px !default;
+$treeview-big-image-margin: 0 0 0 12px !default;
+$treeview-big-rtl-image-margin: 0 12px 0 0 !default;
+$treeview-big-icon-image-margin: 0 0 0 16px !default;
+$treeview-big-rtl-icon-image-margin: 0 16px 0 0 !default;
+$treeview-big-check-margin: 0 0 0 8px !default;
+$treeview-big-rtl-check-margin: 0 8px 0 0 !default;
+$treeview-big-check-image-margin: 0 0 0 8px !default;
+$treeview-big-rtl-check-image-margin: 0 8px 0 0 !default;
+$treeview-big-root-ul-padding: 0 0 0 16px !default;
+$treeview-big-rtl-root-ul-padding: 0 16px 0 0 !default;
+$treeview-big-child-ul-padding: 0 0 0 24px !default;
+$treeview-big-rtl-child-ul-padding: 0 24px 0 0 !default;
+$treeview-big-image-text-padding: 0 12px !default;
+$treeview-big-icon-margin: 0 0 0 -16px !default;
+$treeview-big-rtl-icon-margin: 0 -16px 0 0 !default;
+$treeview-big-text-wrap-padding: 0 0 0 24px !default;
+$treeview-big-rtl-text-wrap-padding: 0 24px 0 0 !default;
+$treeview-big-drag-icon-font-size: $text-2xl !default;
+$treeview-big-drag-item-text-padding-left: 12px !default;
+$treeview-big-drag-icon-margin: -6px 0px 5px -9px !default;
+$treeview-big-drag-before-icon-padding: 6px !default;
+$treeview-big-check-text-padding: 0 12px !default;
+$treeview-big-check-wrap-width: calc(100% - 29px) !default;
+$treeview-big-check-icon-wrap-width: calc(100% - 65px) !default;
+$treeview-big-check-icon-img-wrap-width: calc(100% - 101px) !default;
+$treeview-big-icon-wrap-width: calc(100% - 35px) !default;
+$treeview-big-icon-img-wrap-width: calc(100% - 71px) !default;
+
+$treeview-font-family: $font-family !default;
+$treeview-drag-icon-font-size: 14px !default;
+$treeview-drag-icon-padding: 0 !default;
+$treeview-drag-icon-margin: 0 0 0 -12px;
+$treeview-rtl-drag-margin: 10px -13px -1px 0;
+
+$ripple-size: -7px !default;
+$ripple-height: 32px !default;
+$ripple-width: 32px !default;
+
+//color variables
+$treeview-icon-color: $icon-color !default;
+$treeview-text-color: $content-text-color !default;
+$treeview-border-color: $border-light !default;
+$treeview-item-border-color: $transparent !default;
+$treeview-item-active-bg: $flyout-bg-color-selected !default;
+$treeview-icon-active-color: $content-text-color-selected !default;
+$treeview-text-active-color: $content-text-color-selected !default;
+$treeview-item-active-border-color: $content-bg-color-selected !default;
+$treeview-item-hover-bg: $content-bg-color-hover !default;
+$treeview-icon-hover-color: $icon-color-hover !default;
+$treeview-text-hover-color: $content-text-color-hover !default;
+$treeview-item-hover-border-color: $content-bg-color-hover !default;
+$treeview-item-active-hover-bg: $content-bg-color-selected !default;
+$treeview-icon-active-hover-color: $content-text-color-selected !default;
+$treeview-text-active-hover-color: $content-text-color-selected !default;
+$treeview-item-active-hover-border-color: $treeview-item-hover-border-color !default;
+$treeview-text-disable-color: $content-text-color-disabled !default;
+$treeview-icon-disable-color: $icon-color-disabled !default;
+$treeview-drag-line-bg: $primary !default;
+$treeview-drag-line-color: $primary !default;
+$treeview-popup-bg-color: $content-bg-color-hover !default;
+$treeview-popup-border-color: $content-bg-color-hover !default;
+$treeview-drop-count-bg: $primary !default;
+$treeview-drop-count-border: $primary-text-color !default;
+$treeview-drop-count-color: $primary-text-color !default;
+$treeview-drag-item-bg: $content-bg-color-alt3 !default;
+$treeview-drag-item-color: $content-text-color-alt1 !default;
+$treeview-drag-icon-color: $treeview-icon-color !default;

package/styles/treeview/_layout.scss

@@ -36,24 +36,21 @@
   }
 }
 
+@mixin big-icon-style($size) {
+  height: $size;
+  width: $size;
+}
+
 @include export-module('treeview-layout') {
   @keyframes rotation {
-    from {
-      transform: rotate(0deg);
-    }
-
-    to {
-      transform: rotate(359deg);
-    }
-  }
-
-  @-webkit-keyframes rotation { /* stylelint-disable-line at-rule-no-vendor-prefix */
     from {
       -webkit-transform: rotate(0deg);
+      transform: rotate(0deg);
     }
 
     to {
       -webkit-transform: rotate(359deg);
+      transform: rotate(359deg);
     }
   }
 
@@ -67,7 +64,7 @@
       }
     }
 
-    @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' {
+    @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' {
       .e-ul {
         padding: $treeview-big-root-ul-padding;
       }
@@ -83,8 +80,12 @@
 
         .e-list-icon,
         .e-list-img {
-          height: $treeview-big-icon-font-size;
-          width: $treeview-big-icon-font-size;
+          @if $skin-name == 'fluent2' {
+            @include big-icon-style($treeview-big-img-size);
+          }
+          @else {
+            @include big-icon-style($treeview-big-icon-font-size);
+          }
         }
 
         .e-small.e-css.e-checkbox-wrapper {
@@ -94,28 +95,25 @@
             width: 18px;
           }
 
-          & .e-check {
+          & .e-check,
+          & .e-stop {
             font-size: 12px;
           }
 
           & .e-stop {
-            font-size: 12px;
             line-height: 17px;
           }
         }
 
-        .e-checkbox-wrapper {
-          & + .e-list-text {
-            padding: $treeview-big-check-text-padding;
-          }
+        .e-checkbox-wrapper + .e-list-text {
+          padding: $treeview-big-check-text-padding;
         }
       }
 
       .e-icon-collapsible,
       .e-icon-expandable {
-        height: $treeview-big-icon-font-size;
+        @include big-icon-style($treeview-big-icon-font-size);
         margin: $treeview-big-icon-margin;
-        width: $treeview-big-icon-font-size;
       }
 
       &.e-drag-item {
@@ -136,11 +134,6 @@
 
     .e-navigable {
 
-      .e-text-content {
-        align-items: center;
-        display: flex;
-      }
-
       .e-list-text {
         @if ($skin-name != 'Material3') {
           padding: 0;
@@ -148,19 +141,20 @@
         width: 100%;
       }
 
-      .e-checkbox-wrapper + .e-list-text {
-        padding: 0;
-      }
-
-      .e-checkbox-wrapper + .e-list-url .e-anchor-wrap {
-
-        @if $skin-name == 'bootstrap4' {
-          padding: $treeview-check-image-margin;
+      .e-checkbox-wrapper {
+        + .e-list-text {
+          padding: 0;
         }
 
-        .e-list-icon,
-        .e-list-img {
-          margin: $treeview-navigable-icon-image-anchor-margin-bigger;
+        + .e-list-url .e-anchor-wrap {
+          @if $skin-name == 'bootstrap4' {
+            padding: $treeview-check-image-margin;
+          }
+  
+          .e-list-icon,
+          .e-list-img {
+            margin: $treeview-navigable-icon-image-anchor-margin-bigger;
+          }
         }
       }
 
@@ -284,11 +278,10 @@
         margin: $treeview-big-icon-margin;
         width: $treeview-big-icon-size;
       }
-    }
 
-    .e-icon-collapsible::before,
-    .e-icon-expandable::before {
-      padding: $treeview-big-icon-padding;
+      &::before {
+        padding: $treeview-big-icon-padding;
+      }
     }
 
     &.e-drag-item {
@@ -305,15 +298,14 @@
           @if ($skin-name != 'bootstrap5' and $skin-name != 'FluentUI') {
             margin: $treeview-big-drag-icon-margin;
           }
-        }
 
-        .e-icon-collapsible::before,
-        .e-icon-expandable::before {
-          @if ($skin-name != 'bootstrap5' and $skin-name != 'FluentUI') {
-            padding: $treeview-big-drag-before-icon-padding;
-          }
-          @if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
-            font-size: $treeview-big-drag-icon-font-size;
+          &::before {
+            @if ($skin-name != 'bootstrap5' and $skin-name != 'FluentUI') {
+              padding: $treeview-big-drag-before-icon-padding;
+            }
+            @if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
+              font-size: $treeview-big-drag-icon-font-size;
+            }
           }
         }
 
@@ -327,7 +319,7 @@
 
     &.e-rtl {
 
-      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' {
+      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' {
         .e-ul {
           padding: $treeview-big-rtl-root-ul-padding;
         }
@@ -341,7 +333,9 @@
             padding: $treeview-big-rtl-text-wrap-padding;
           }
         }
+      }
 
+      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'bootstrap4' {
         .e-icon-collapsible,
         .e-icon-expandable {
           margin: $treeview-big-rtl-icon-margin;
@@ -393,12 +387,6 @@
           }
         }
       }
-      @if $skin-name == 'bootstrap4' {
-        .e-icon-collapsible,
-        .e-icon-expandable {
-          margin: $treeview-big-rtl-icon-margin;
-        }
-      }
 
       .e-checkbox-wrapper {
         margin: $treeview-big-rtl-check-margin;
@@ -426,6 +414,24 @@
     overflow: hidden;
     position: relative;
     white-space: nowrap;
+    @if $skin-name == 'fluent2' {
+      border: 1px solid;
+      border-color: $treeview-border-color;
+      border-radius: $treeview-radius;
+    }
+
+    &.e-virtualization {
+      overflow: auto;
+
+      & .e-virtual-mask {
+        display: block;
+        margin-bottom: 20px;
+      }
+
+      & .e-ul {
+        overflow: unset;
+      }
+    }
 
     & > .e-ul {
       -webkit-overflow-scrolling: touch;
@@ -489,57 +495,19 @@
       padding: $treeview-root-ul-padding;
     }
 
-    li.e-node-collapsed .e-list-item .e-fullrow {
-      display: none;
-    }
-
+    .e-node-collapsed .e-list-item .e-fullrow,
     .e-display-none {
       display: none;
     }
 
-    .e-list-item {
-
-      &.e-active {
-        @if $skin-name == 'tailwind' {
-          font-weight: $treeview-active-font-weight;
-        }
-      }
-
-      div.e-icons.interaction {
-        -webkit-transition: -webkit-transform .3s ease-in-out;
-        border-radius: 15px;
-        transition: -webkit-transform .3s ease-in-out;
-        transition: transform .3s ease-in-out;
-        transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
-      }
-
-      .e-icons.e-icon-collapsible {
-        -webkit-transform: rotate(90deg);
-        transform: rotate(90deg);
-      }
-    }
-
-    &.e-drag-item {
-      &.e-rtl {
-
-        .e-icons.e-drop-next {
-          transform: rotate(180deg);
-        }
-      }
-    }
-
-    &.e-rtl {
-
-      div.e-icons {
-        transform: rotate(180deg);
-      }
-    }
-
     .e-list-item {
       list-style: none;
-      @if $skin-name != 'tailwind' and $skin-name != 'Material3' {
+      @if $skin-name != 'tailwind' and $skin-name != 'Material3' and $skin-name != 'fluent2' {
         padding: 2px 0;
       }
+      @if $skin-name == 'fluent2' {
+        padding: 4px 0;
+      }
 
       .e-ul {
         margin: 2px 0 -2px;
@@ -563,18 +531,38 @@
           touch-action: none;
         }
       }
-    }
 
-    .e-list-item .e-icons.e-icons-spinner::before {
-      content: none;
-    }
+      &.e-active {
+        @if $skin-name == 'tailwind' {
+          font-weight: $treeview-active-font-weight;
+        }
+      }
 
-    .e-icons .e-spinner-pane {
-      position: relative;
+      div.e-icons.interaction {
+        -webkit-transition: -webkit-transform .3s ease-in-out;
+        border-radius: 15px;
+        transition: -webkit-transform .3s ease-in-out;
+        transition: transform .3s ease-in-out;
+        transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
+      }
+
+      .e-icons.e-icon-collapsible {
+        -webkit-transform: rotate(90deg);
+        transform: rotate(90deg);
+      }
+
+      .e-icons.e-icons-spinner::before {
+        content: none;
+      }
     }
 
-    .e-icons .e-treeview-spinner {
-      position: absolute;
+    .e-icons {
+      .e-spinner-pane {
+        position: relative;
+      }
+      .e-treeview-spinner {
+        position: absolute;
+      }
     }
 
     .e-icons-spinner {
@@ -591,6 +579,18 @@
       @if $skin-name == 'Material3' {
         border: none;
       }
+
+      + .e-sibling {
+        @if ($skin-name == 'tailwind') {
+          margin-top: -2px;
+        }
+        @else if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
+          margin-top: 1px;
+        }
+        @else {
+          margin-top: -1px;
+        }
+      }
     }
 
     .e-fullrow {
@@ -603,6 +603,11 @@
       overflow: hidden;
       position: absolute;
       width: 100%;
+      @if $skin-name == 'fluent2' {
+        border-radius: $treeview-radius;
+        width: calc(100% - 8px);
+        margin-left: 4px;
+      }
     }
 
     .e-checkbox-wrapper {
@@ -697,12 +702,11 @@
       margin: $treeview-icon-margin;
       vertical-align: middle;
       width: $treeview-icon-size;
-    }
 
-    .e-icon-collapsible::before,
-    .e-icon-expandable::before {
-      display: inline-block;
-      padding: $treeview-icon-padding;
+      &::before {
+        display: inline-block;
+        padding: $treeview-icon-padding;
+      }
     }
 
     .e-load {
@@ -720,32 +724,22 @@
         margin-top: -5px;
         width: 6px;
       }
-      position: absolute;
-      z-index: 2;
-    }
 
-    .e-text-content + .e-sibling {
-      @if ($skin-name == 'tailwind') {
-        margin-top: -2px;
-      }
-      @else if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
-        margin-top: 1px;
-      }
-      @else {
-        margin-top: -1px;
+      &::before {
+        @include sibling-before(ltr);
+        @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
+          height: 2px;
+          top: -1.5px;
+        }
+        @else {
+          height: 1px;
+          width: 144px;
+        }
       }
     }
 
+    .e-sibling,
     .e-sibling::before {
-      @include sibling-before(ltr);
-      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
-        height: 2px;
-        top: -1.5px;
-      }
-      @else {
-        height: 1px;
-        width: 144px;
-      }
       position: absolute;
       z-index: 2;
     }
@@ -774,18 +768,20 @@
         width: 26px;
       }
 
-      .e-downtail::before,
-      .e-downtail::after {
-        border: 10px solid transparent;
-        content: '';
-        height: 0;
-        left: 8px;
-        position: absolute;
-        width: 0;
-      }
+      .e-downtail {
+        &::before,
+        &::after {
+          border: 10px solid transparent;
+          content: '';
+          height: 0;
+          left: 8px;
+          position: absolute;
+          width: 0;
+        }
 
-      .e-downtail::after {
-        bottom: -18px;
+        &::after {
+          bottom: -18px;
+        }
       }
     }
 
@@ -868,15 +864,19 @@
           @if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
             padding: 0 $treeview-drag-icon-padding;
           }
+          @if $skin-name == 'fluent2' {
+            line-height: 20px;
+            padding: 5px 12px 7px 8px;
+          }
         }
       }
-      @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
+
+      @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'fluent2') {
         .e-icon-collapsible,
         .e-icon-expandable {
           @if ($skin-name != 'bootstrap5' and $skin-name != 'FluentUI') {
             margin: $treeview-drag-icon-margin;
           }
-
           @if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
             box-sizing: content-box;
             padding-left: $treeview-drag-icon-padding;
@@ -1017,6 +1017,10 @@
 
       &.e-drag-item {
 
+        .e-icons.e-drop-next {
+          transform: rotate(180deg);
+        }
+
         .e-text-content {
           float: right;
         }
@@ -1032,6 +1036,10 @@
           margin-right: -12px;
         }
       }
+
+      div.e-icons {
+        transform: rotate(180deg);
+      }
     }
 
     &.e-disabled {

package/styles/treeview/_material3-definition.scss

@@ -1,5 +1,3 @@
-/*! TreeView's Material 3 theme wise override definitions and variables */
-/* stylelint-disable */
 $treeview-font-size: $text-sm !default;
 $treeview-icon-font-size: 16px !default;
 $treeview-image-font-size: 16px !default;
@@ -15,7 +13,7 @@ $treeview-rtl-text-wrap-padding: 0 20px 0 0 !default;
 $treeview-icon-size: 16px !default;
 $treeview-icon-margin: 0 0 0 -16px !default;
 $treeview-rtl-icon-margin: 0 -16px 0 0 !default;
-$treeview-icon-padding: 0px !default;
+$treeview-icon-padding: 0 !default;
 $treeview-text-padding: 10px 12px !default;
 $treeview-text-margin: 0 !default;
 $treeview-image-size: 16px !default;
@@ -42,7 +40,6 @@ $treeview-check-icon-wrap-width: calc(100% - 54px) !default;
 $treeview-check-icon-img-wrap-width: calc(100% - 82px) !default;
 $treeview-icon-wrap-width: calc(100% - 32px) !default;
 $treeview-icon-img-wrap-width: calc(100% - 60px) !default;
-
 $treeview-big-font-size: $text-base !default;
 $treeview-big-icon-font-size: 20px !default;
 $treeview-big-item-height: 48px !default;
@@ -77,18 +74,13 @@ $treeview-big-check-icon-wrap-width: calc(100% - 65px) !default;
 $treeview-big-check-icon-img-wrap-width: calc(100% - 101px) !default;
 $treeview-big-icon-wrap-width: calc(100% - 35px) !default;
 $treeview-big-icon-img-wrap-width: calc(100% - 71px) !default;
-
 $treeview-font-family: $font-family !default;
 $treeview-drag-icon-font-size: 16px !default;
 $treeview-drag-icon-padding: 0 6px !default;
 $treeview-drag-icon-img-margin: 0 0 0 18px !default;
-
-//treeview ripple effect variables
 $ripple-size: -9.5px !default;
 $ripple-height: 32px !default;
 $ripple-width: 32px !default;
-
-//color variables
 $treeview-icon-color: rgba($icon-color) !default;
 $treeview-text-color: rgba($content-text-color) !default;
 $treeview-item-border-color: $transparent !default;
@@ -116,6 +108,3 @@ $treeview-drop-count-color: rgba($primary-text-color) !default;
 $treeview-drag-item-bg: $content-bg-color-alt3 !default;
 $treeview-drag-item-color: rgba($content-text-color-alt1) !default;
 $treeview-drag-icon-color: rgba($content-text-color-alt1) !default;
-$treeview-item-active-check-bg: rgba($primary-text-color) !default;
-$treeview-item-active-check-border-color: rgba($primary-text-color) !default;
-$treeview-item-active-check-color: rgba($primary) !default;