@syncfusion/ej2-angular-navigations 20.2.38-ngcc → 20.2.39

package/styles/treeview/_theme.scss

@@ -0,0 +1,364 @@
+/* stylelint-disable property-no-vendor-prefix */
+@mixin sibling-theme($left, $right) {
+  @if $skin-name == 'material' {
+    background: $treeview-drag-line-bg;
+  }
+  @else {
+    border-#{$left}-color: $treeview-drag-line-bg;
+    border-#{$right}-color: transparent;
+  }
+}
+
+@mixin active-hover-theme {
+  background-color: $treeview-item-active-hover-bg;
+  border-color: $treeview-item-active-hover-border-color;
+  @if $skin-name == 'bootstrap' or $skin-name == 'highcontrast' {
+    -webkit-box-shadow: $treeview-border-shadow;
+    box-shadow: $treeview-border-shadow;
+  }
+}
+
+@mixin active-editing-theme {
+  background-color: $treeview-item-border-color;
+  border-color: $treeview-item-border-color;
+  @if $skin-name == 'bootstrap' {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+  }
+}
+
+@mixin active-font-weight {
+  @if $skin-name == 'highcontrast' {
+    font-weight: $treeview-active-font-weight;
+  }
+}
+
+@include export-module('treeview-theme') {
+  .e-bigger .e-treeview,
+  .e-treeview.e-bigger {
+
+    .e-list-text {
+      font-size: $treeview-big-font-size;
+
+      @if $skin-name == 'bootstrap4' {
+        color: $treeview-big-text-color;
+      }
+    }
+
+    .e-icon-collapsible::before,
+    .e-icon-expandable::before {
+      font-size: $treeview-big-icon-font-size;
+    }
+
+    &.e-drag-item {
+      .e-icon-collapsible,
+      .e-icon-expandable {
+        @if $skin-name == 'bootstrap4' {
+          padding: $treeview-big-drag-icon-padding;
+        }
+      }
+
+      .e-list-text {
+        @if $skin-name == 'bootstrap4' {
+          padding: $treeview-big-drag-text-padding;
+        }
+      }
+    }
+  }
+
+  .e-treeview {
+    -webkit-tap-highlight-color: transparent;
+
+    @if $skin-name == 'bootstrap5' {
+      &.e-disabled {
+        opacity: .5;
+      }
+    }
+
+    .e-text-content,
+    .e-fullrow {
+      border-color: $treeview-item-border-color;
+    }
+
+    .e-list-text {
+      color: $treeview-text-color;
+      font-size: $treeview-font-size;
+
+      .e-input {
+        @include active-font-weight;
+      }
+    }
+
+    .e-list-icon,
+    .e-list-img {
+      font-size: $treeview-image-font-size;
+    }
+
+    .e-icon-collapsible,
+    .e-icon-expandable {
+      color: $treeview-icon-color;
+    }
+
+    .e-icon-collapsible::before,
+    .e-icon-expandable::before {
+      font-size: $treeview-icon-font-size;
+    }
+
+    .e-list-item.e-active,
+    .e-list-item.e-hover {
+      background: transparent;
+    }
+
+    .e-list-item.e-hover > .e-text-content {
+      color: $treeview-text-hover-color;
+
+      .e-list-text {
+        color: $treeview-text-hover-color;
+      }
+
+      .e-icon-collapsible,
+      .e-icon-expandable {
+        color: $treeview-icon-hover-color;
+      }
+    }
+
+    .e-list-item.e-active > .e-text-content {
+      color: $treeview-text-active-color;
+
+      .e-list-text {
+        @include active-font-weight;
+        color: $treeview-text-active-color;
+      }
+
+      .e-icon-collapsible,
+      .e-icon-expandable {
+        color: $treeview-icon-active-color;
+      }
+
+      .e-check {
+        @if $skin-name == 'highcontrast' {
+          background-color: $treeview-checkmark-bgcolor;
+          border-color: $treeview-checkmark-border-color;
+          color: $treeview-checkmark-color;
+        }
+        @else if $skin-name == 'bootstrap4' {
+          background-color: $treeview-item-active-check-bg;
+          border-color: $treeview-item-active-check-border-color;
+          color: $treeview-item-active-check-color;
+        }
+        @else if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
+          border-color: $content-text-color-selected;
+        }
+      }
+
+      .e-stop {
+        @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
+          border-color: $content-text-color-selected;
+        }
+      }
+    }
+
+    .e-list-item.e-active.e-hover > .e-text-content {
+      color: $treeview-text-active-hover-color;
+
+      .e-list-text {
+        color: $treeview-text-active-hover-color;
+      }
+
+      .e-icon-collapsible,
+      .e-icon-expandable {
+        color: $treeview-icon-active-hover-color;
+      }
+    }
+
+    .e-list-item.e-editing.e-active > .e-text-content,
+    .e-list-item.e-editing.e-hover > .e-text-content {
+      color: $treeview-text-color;
+
+      .e-list-text {
+        color: $treeview-text-color;
+
+        .e-input {
+          @include active-font-weight;
+        }
+      }
+
+      .e-icon-collapsible,
+      .e-icon-expandable {
+        color: $treeview-icon-color;
+      }
+    }
+
+    .e-list-item.e-hover > .e-fullrow {
+      background-color: $treeview-item-hover-bg;
+      border-color: $treeview-item-hover-border-color;
+    }
+
+    .e-list-item.e-active {
+      & > .e-fullrow {
+        background-color: $treeview-item-active-bg;
+        border-color: $treeview-item-active-border-color;
+      }
+
+      &.e-animation-active > .e-fullrow {
+        background-color: transparent;
+        border-color: transparent;
+      }
+
+      &.e-animation-active > .e-text-content {
+        color: $treeview-text-color;
+
+        .e-list-text {
+          color: $treeview-text-color;
+        }
+      }
+    }
+
+    .e-list-item.e-active.e-hover > .e-fullrow {
+      @include active-hover-theme;
+    }
+
+    .e-list-item.e-editing.e-active > .e-fullrow,
+    .e-list-item.e-editing.e-hover > .e-fullrow {
+      @include active-editing-theme;
+    }
+
+    .e-list-item.e-disable {
+
+      > .e-text-content,
+      > .e-fullrow {
+        color: $treeview-text-disable-color;
+        @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
+          .e-list-text {
+            color: $treeview-text-disable-color;
+          }
+        }
+      }
+
+      > .e-text-content > .e-icon-collapsible,
+      > .e-text-content > .e-icon-expandable {
+        color: $treeview-icon-disable-color;
+      }
+    }
+
+    .e-sibling {
+      @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI') {
+        @include sibling-theme(left, right);
+      }
+      @else {
+        border-top: 2px solid $treeview-drag-line-bg;
+      }
+    }
+
+    .e-sibling::before {
+      background: $treeview-drag-line-color;
+      @if $skin-name == 'bootstrap4' {
+        border: 1px;
+      }
+    }
+
+    .e-popup {
+
+      .e-content {
+        background-color: $treeview-popup-bg-color;
+        border-color: $treeview-popup-border-color;
+      }
+
+      &.e-select {
+
+        .e-icons {
+          border-color: $treeview-popup-border-color;
+        }
+      }
+
+      .e-downtail {
+
+        &::before {
+          border-top-color: $treeview-popup-border-color;
+        }
+
+        &::after {
+          border-top-color: $treeview-popup-bg-color;
+        }
+      }
+    }
+
+    &:not(.e-fullrow-wrap) {
+
+      .e-list-item.e-hover > .e-text-content {
+        background-color: $treeview-item-hover-bg;
+        border-color: $treeview-item-hover-border-color;
+      }
+
+      .e-list-item.e-active > .e-text-content {
+        background-color: $treeview-item-active-bg;
+        border-color: $treeview-item-active-border-color;
+      }
+
+      .e-list-item.e-active.e-hover > .e-text-content {
+        @include active-hover-theme;
+      }
+
+      .e-list-item.e-editing.e-active > .e-text-content,
+      .e-list-item.e-editing.e-hover > .e-text-content {
+        @include active-editing-theme;
+      }
+    }
+
+    &.e-fullrow-wrap {
+
+      .e-text-content {
+        border-color: transparent;
+      }
+    }
+
+    &.e-drag-item {
+      background-color: $treeview-drag-item-bg;
+      font-family: $treeview-font-family;
+
+      .e-icon-collapsible::before,
+      .e-icon-expandable::before {
+        font-size: $treeview-drag-icon-font-size;
+      }
+
+      .e-list-text {
+        @include active-font-weight;
+        color: $treeview-drag-item-color;
+        @if $skin-name == 'bootstrap4' {
+          padding: $treeview-drag-text-padding;
+        }
+      }
+
+      .e-text-content {
+        @if $skin-name == 'bootstrap4' {
+          -webkit-box-shadow: $treeview-drag-item-box-shadow;
+          border-radius: .5em;
+          box-shadow: $treeview-drag-item-box-shadow;
+        }
+      }
+
+      .e-icons {
+        color: $treeview-drag-icon-color;
+      }
+
+      .e-drop-count {
+        background-color: $treeview-drop-count-bg;
+        border-color: $treeview-drop-count-border;
+        color: $treeview-drop-count-color;
+      }
+
+      &.e-rtl {
+
+        .e-sibling {
+          @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI') {
+            @include sibling-theme(right, left);
+          }
+          @else {
+            border: 1px solid $treeview-drag-line-bg;
+          }
+        }
+      }
+    }
+    /* stylelint-enable property-no-vendor-prefix */
+  }
+}

package/styles/treeview/bootstrap-dark.css

@@ -1,3 +1,5 @@
+/* stylelint-disable property-no-vendor-prefix */
+/* stylelint-disable */
 /*! TreeView icons */
 .e-treeview .e-list-item div.e-icons::before {
   content: "\e230";
@@ -21,6 +23,7 @@
   content: "\e22a";
 }
 
+/* stylelint-disable property-no-vendor-prefix */
 @keyframes rotation {
   from {
     transform: rotate(0deg);
@@ -549,6 +552,8 @@
   pointer-events: auto;
 }
 
+/* stylelint-enable property-no-vendor-prefix */
+/* stylelint-disable property-no-vendor-prefix */
 .e-bigger .e-treeview .e-list-text,
 .e-treeview.e-bigger .e-list-text {
   font-size: 15px;
@@ -561,6 +566,7 @@
 }
 .e-treeview {
   -webkit-tap-highlight-color: transparent;
+  /* stylelint-enable property-no-vendor-prefix */
 }
 .e-treeview .e-text-content,
 .e-treeview .e-fullrow {

package/styles/treeview/bootstrap-dark.scss

@@ -1 +1,6 @@
-@import 'ej2-navigations/styles/treeview/bootstrap-dark.scss';
+@import 'ej2-base/styles/bootstrap-dark-definition.scss';
+@import 'ej2-inputs/styles/input/bootstrap-dark-definition.scss';
+@import 'ej2-buttons/styles/check-box/bootstrap-dark-definition.scss';
+@import 'bootstrap-dark-definition.scss';
+@import 'icons/bootstrap-dark.scss';
+@import 'all.scss';

package/styles/treeview/bootstrap.css

@@ -1,4 +1,6 @@
+/* stylelint-disable property-no-vendor-prefix */
 /*! TreeView's bootstrap theme wise override definitions and variables */
+/* stylelint-disable */
 /*! TreeView icons */
 .e-treeview .e-list-item div.e-icons::before {
   content: "\e230";
@@ -22,6 +24,7 @@
   content: "\e22a";
 }
 
+/* stylelint-disable property-no-vendor-prefix */
 @keyframes rotation {
   from {
     transform: rotate(0deg);
@@ -550,6 +553,8 @@
   pointer-events: auto;
 }
 
+/* stylelint-enable property-no-vendor-prefix */
+/* stylelint-disable property-no-vendor-prefix */
 .e-bigger .e-treeview .e-list-text,
 .e-treeview.e-bigger .e-list-text {
   font-size: 15px;
@@ -562,6 +567,7 @@
 }
 .e-treeview {
   -webkit-tap-highlight-color: transparent;
+  /* stylelint-enable property-no-vendor-prefix */
 }
 .e-treeview .e-text-content,
 .e-treeview .e-fullrow {

package/styles/treeview/bootstrap.scss

@@ -1 +1,6 @@
-@import 'ej2-navigations/styles/treeview/bootstrap.scss';
+@import 'ej2-base/styles/bootstrap-definition.scss';
+@import 'ej2-inputs/styles/input/bootstrap-definition.scss';
+@import 'ej2-buttons/styles/check-box/bootstrap-definition.scss';
+@import 'bootstrap-definition.scss';
+@import 'icons/bootstrap.scss';
+@import 'all.scss';

package/styles/treeview/bootstrap4.css

@@ -1,3 +1,5 @@
+/* stylelint-disable property-no-vendor-prefix */
+/* stylelint-disable */
 /*! TreeView icons */
 .e-treeview .e-list-item div.e-icons::before {
   content: "\e70b";
@@ -21,6 +23,7 @@
   content: "\e797";
 }
 
+/* stylelint-disable property-no-vendor-prefix */
 @keyframes rotation {
   from {
     transform: rotate(0deg);
@@ -618,6 +621,8 @@
   pointer-events: auto;
 }
 
+/* stylelint-enable property-no-vendor-prefix */
+/* stylelint-disable property-no-vendor-prefix */
 .e-bigger .e-treeview .e-list-text,
 .e-treeview.e-bigger .e-list-text {
   font-size: 16px;
@@ -642,6 +647,7 @@
 
 .e-treeview {
   -webkit-tap-highlight-color: transparent;
+  /* stylelint-enable property-no-vendor-prefix */
 }
 .e-treeview .e-text-content,
 .e-treeview .e-fullrow {

package/styles/treeview/bootstrap4.scss

@@ -1 +1,6 @@
-@import 'ej2-navigations/styles/treeview/bootstrap4.scss';
+@import 'ej2-base/styles/bootstrap4-definition.scss';
+@import 'ej2-inputs/styles/input/bootstrap4-definition.scss';
+@import 'ej2-buttons/styles/check-box/bootstrap4-definition.scss';
+@import 'bootstrap4-definition.scss';
+@import 'icons/bootstrap4.scss';
+@import 'all.scss';

package/styles/treeview/bootstrap5-dark.css

@@ -1,4 +1,6 @@
+/* stylelint-disable property-no-vendor-prefix */
 /*! TreeView's bootstrap5 theme wise override definitions and variables */
+/* stylelint-disable */
 /*! TreeView icons */
 .e-treeview .e-list-item div.e-icons::before {
   content: "\e75c";
@@ -22,6 +24,7 @@
   content: "\e839";
 }
 
+/* stylelint-disable property-no-vendor-prefix */
 @keyframes rotation {
   from {
     transform: rotate(0deg);
@@ -649,6 +652,8 @@
   pointer-events: auto;
 }
 
+/* stylelint-enable property-no-vendor-prefix */
+/* stylelint-disable property-no-vendor-prefix */
 .e-bigger .e-treeview .e-list-text,
 .e-treeview.e-bigger .e-list-text {
   font-size: 16px;
@@ -661,6 +666,7 @@
 }
 .e-treeview {
   -webkit-tap-highlight-color: transparent;
+  /* stylelint-enable property-no-vendor-prefix */
 }
 .e-treeview.e-disabled {
   opacity: 0.5;

package/styles/treeview/bootstrap5-dark.scss

@@ -1 +1,6 @@
-@import 'ej2-navigations/styles/treeview/bootstrap5-dark.scss';
+@import 'ej2-base/styles/bootstrap5-dark-definition.scss';
+@import 'ej2-inputs/styles/input/bootstrap5-dark-definition.scss';
+@import 'ej2-buttons/styles/check-box/bootstrap5-dark-definition.scss';
+@import 'bootstrap5-dark-definition.scss';
+@import 'icons/bootstrap5-dark.scss';
+@import 'all.scss';

package/styles/treeview/bootstrap5.css

@@ -1,4 +1,6 @@
+/* stylelint-disable property-no-vendor-prefix */
 /*! TreeView's bootstrap5 theme wise override definitions and variables */
+/* stylelint-disable */
 /*! TreeView icons */
 .e-treeview .e-list-item div.e-icons::before {
   content: "\e75c";
@@ -22,6 +24,7 @@
   content: "\e839";
 }
 
+/* stylelint-disable property-no-vendor-prefix */
 @keyframes rotation {
   from {
     transform: rotate(0deg);
@@ -649,6 +652,8 @@
   pointer-events: auto;
 }
 
+/* stylelint-enable property-no-vendor-prefix */
+/* stylelint-disable property-no-vendor-prefix */
 .e-bigger .e-treeview .e-list-text,
 .e-treeview.e-bigger .e-list-text {
   font-size: 16px;
@@ -661,6 +666,7 @@
 }
 .e-treeview {
   -webkit-tap-highlight-color: transparent;
+  /* stylelint-enable property-no-vendor-prefix */
 }
 .e-treeview.e-disabled {
   opacity: 0.5;

package/styles/treeview/bootstrap5.scss

@@ -1 +1,6 @@
-@import 'ej2-navigations/styles/treeview/bootstrap5.scss';
+@import 'ej2-base/styles/bootstrap5-definition.scss';
+@import 'ej2-inputs/styles/input/bootstrap5-definition.scss';
+@import 'ej2-buttons/styles/check-box/bootstrap5-definition.scss';
+@import 'bootstrap5-definition.scss';
+@import 'icons/bootstrap5.scss';
+@import 'all.scss';

package/styles/treeview/fabric-dark.css

@@ -1,3 +1,5 @@
+/* stylelint-disable property-no-vendor-prefix */
+/* stylelint-disable */
 /*! TreeView icons */
 .e-treeview .e-list-item div.e-icons::before {
   content: "\e22e";
@@ -21,6 +23,7 @@
   content: "\e22a";
 }
 
+/* stylelint-disable property-no-vendor-prefix */
 @keyframes rotation {
   from {
     transform: rotate(0deg);
@@ -549,6 +552,8 @@
   pointer-events: auto;
 }
 
+/* stylelint-enable property-no-vendor-prefix */
+/* stylelint-disable property-no-vendor-prefix */
 .e-bigger .e-treeview .e-list-text,
 .e-treeview.e-bigger .e-list-text {
   font-size: 15px;
@@ -561,6 +566,7 @@
 }
 .e-treeview {
   -webkit-tap-highlight-color: transparent;
+  /* stylelint-enable property-no-vendor-prefix */
 }
 .e-treeview .e-text-content,
 .e-treeview .e-fullrow {

package/styles/treeview/fabric-dark.scss

@@ -1 +1,6 @@
-@import 'ej2-navigations/styles/treeview/fabric-dark.scss';
+@import 'ej2-base/styles/fabric-dark-definition.scss';
+@import 'ej2-inputs/styles/input/fabric-dark-definition.scss';
+@import 'ej2-buttons/styles/check-box/fabric-dark-definition.scss';
+@import 'fabric-dark-definition.scss';
+@import 'icons/fabric-dark.scss';
+@import 'all.scss';

package/styles/treeview/fabric.css

@@ -1,4 +1,6 @@
+/* stylelint-disable property-no-vendor-prefix */
 /*! TreeView's fabric theme wise override definitions and variables */
+/* stylelint-disable */
 /*! TreeView icons */
 .e-treeview .e-list-item div.e-icons::before {
   content: "\e22e";
@@ -22,6 +24,7 @@
   content: "\e22a";
 }
 
+/* stylelint-disable property-no-vendor-prefix */
 @keyframes rotation {
   from {
     transform: rotate(0deg);
@@ -550,6 +553,8 @@
   pointer-events: auto;
 }
 
+/* stylelint-enable property-no-vendor-prefix */
+/* stylelint-disable property-no-vendor-prefix */
 .e-bigger .e-treeview .e-list-text,
 .e-treeview.e-bigger .e-list-text {
   font-size: 15px;
@@ -562,6 +567,7 @@
 }
 .e-treeview {
   -webkit-tap-highlight-color: transparent;
+  /* stylelint-enable property-no-vendor-prefix */
 }
 .e-treeview .e-text-content,
 .e-treeview .e-fullrow {

package/styles/treeview/fabric.scss

@@ -1 +1,6 @@
-@import 'ej2-navigations/styles/treeview/fabric.scss';
+@import 'ej2-base/styles/fabric-definition.scss';
+@import 'ej2-inputs/styles/input/fabric-definition.scss';
+@import 'ej2-buttons/styles/check-box/fabric-definition.scss';
+@import 'fabric-definition.scss';
+@import 'icons/fabric.scss';
+@import 'all.scss';

package/styles/treeview/fluent-dark.css

@@ -1,4 +1,6 @@
+/* stylelint-disable property-no-vendor-prefix */
 /*! TreeView's bootstrap5 theme wise override definitions and variables */
+/* stylelint-disable */
 /*! TreeView icons */
 .e-treeview .e-list-item div.e-icons::before {
   content: "\e75c";
@@ -22,6 +24,7 @@
   content: "\e839";
 }
 
+/* stylelint-disable property-no-vendor-prefix */
 @keyframes rotation {
   from {
     transform: rotate(0deg);
@@ -657,6 +660,8 @@
   pointer-events: auto;
 }
 
+/* stylelint-enable property-no-vendor-prefix */
+/* stylelint-disable property-no-vendor-prefix */
 .e-bigger .e-treeview .e-list-text,
 .e-treeview.e-bigger .e-list-text {
   font-size: 16px;
@@ -669,6 +674,7 @@
 }
 .e-treeview {
   -webkit-tap-highlight-color: transparent;
+  /* stylelint-enable property-no-vendor-prefix */
 }
 .e-treeview .e-text-content,
 .e-treeview .e-fullrow {

package/styles/treeview/fluent-dark.scss

@@ -1 +1,6 @@
-@import 'ej2-navigations/styles/treeview/fluent-dark.scss';
+@import 'ej2-base/styles/fluent-dark-definition.scss';
+@import 'ej2-inputs/styles/input/fluent-dark-definition.scss';
+@import 'ej2-buttons/styles/check-box/fluent-dark-definition.scss';
+@import 'fluent-dark-definition.scss';
+@import 'icons/fluent-dark.scss';
+@import 'all.scss';