@syncfusion/ej2-navigations 21.1.39 → 21.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/dist/ej2-navigations.min.js +2 -2
  3. package/dist/ej2-navigations.umd.min.js +2 -2
  4. package/dist/ej2-navigations.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-navigations.es2015.js +71 -53
  6. package/dist/es6/ej2-navigations.es2015.js.map +1 -1
  7. package/dist/es6/ej2-navigations.es5.js +71 -53
  8. package/dist/es6/ej2-navigations.es5.js.map +1 -1
  9. package/dist/global/ej2-navigations.min.js +2 -2
  10. package/dist/global/ej2-navigations.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +11 -11
  13. package/src/common/h-scroll.js +1 -0
  14. package/src/common/menu-base.d.ts +1 -0
  15. package/src/common/menu-base.js +27 -15
  16. package/src/common/v-scroll.js +1 -1
  17. package/src/tab/tab.d.ts +1 -0
  18. package/src/tab/tab.js +37 -32
  19. package/src/treeview/treeview.js +5 -5
  20. package/styles/bootstrap-dark.css +35 -16
  21. package/styles/bootstrap.css +35 -16
  22. package/styles/bootstrap4.css +35 -16
  23. package/styles/bootstrap5-dark.css +35 -16
  24. package/styles/bootstrap5.css +35 -16
  25. package/styles/fabric-dark.css +35 -16
  26. package/styles/fabric.css +35 -16
  27. package/styles/fluent-dark.css +35 -16
  28. package/styles/fluent.css +35 -16
  29. package/styles/highcontrast-light.css +35 -16
  30. package/styles/highcontrast.css +37 -17
  31. package/styles/material-dark.css +35 -16
  32. package/styles/material.css +35 -16
  33. package/styles/tailwind-dark.css +35 -16
  34. package/styles/tailwind.css +35 -16
  35. package/styles/treeview/_theme.scss +20 -10
  36. package/styles/treeview/bootstrap-dark.css +35 -16
  37. package/styles/treeview/bootstrap.css +35 -16
  38. package/styles/treeview/bootstrap4.css +35 -16
  39. package/styles/treeview/bootstrap5-dark.css +35 -16
  40. package/styles/treeview/bootstrap5.css +35 -16
  41. package/styles/treeview/fabric-dark.css +35 -16
  42. package/styles/treeview/fabric.css +35 -16
  43. package/styles/treeview/fluent-dark.css +35 -16
  44. package/styles/treeview/fluent.css +35 -16
  45. package/styles/treeview/highcontrast-light.css +35 -16
  46. package/styles/treeview/highcontrast.css +37 -17
  47. package/styles/treeview/material-dark.css +35 -16
  48. package/styles/treeview/material.css +35 -16
  49. package/styles/treeview/tailwind-dark.css +35 -16
  50. package/styles/treeview/tailwind.css +35 -16
package/styles/treeview/bootstrap.css CHANGED
@@ -590,17 +590,22 @@
590
590
  font-size: 8px;
591
591
  }
592
592
  .e-treeview .e-list-item.e-active,
593
- .e-treeview .e-list-item.e-hover {
593
+ .e-treeview .e-list-item.e-hover,
594
+ .e-treeview .e-list-item.e-node-focus {
594
595
  background: transparent;
595
596
  }
596
- .e-treeview .e-list-item.e-hover > .e-text-content {
597
+ .e-treeview .e-list-item.e-hover > .e-text-content,
598
+ .e-treeview .e-list-item.e-node-focus > .e-text-content {
597
599
  color: #333;
598
600
  }
599
- .e-treeview .e-list-item.e-hover > .e-text-content .e-list-text {
601
+ .e-treeview .e-list-item.e-hover > .e-text-content .e-list-text,
602
+ .e-treeview .e-list-item.e-node-focus > .e-text-content .e-list-text {
600
603
  color: #333;
601
604
  }
602
605
  .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-collapsible,
603
- .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-expandable {
606
+ .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-expandable,
607
+ .e-treeview .e-list-item.e-node-focus > .e-text-content .e-icon-collapsible,
608
+ .e-treeview .e-list-item.e-node-focus > .e-text-content .e-icon-expandable {
604
609
  color: #333;
605
610
  }
606
611
  .e-treeview .e-list-item.e-active > .e-text-content {
@@ -613,31 +618,40 @@
613
618
  .e-treeview .e-list-item.e-active > .e-text-content .e-icon-expandable {
614
619
  color: #fff;
615
620
  }
616
- .e-treeview .e-list-item.e-active.e-hover > .e-text-content {
621
+ .e-treeview .e-list-item.e-active.e-hover > .e-text-content,
622
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content {
617
623
  color: #fff;
618
624
  }
619
- .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-list-text {
625
+ .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-list-text,
626
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-list-text {
620
627
  color: #fff;
621
628
  }
622
629
  .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-collapsible,
623
- .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-expandable {
630
+ .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-expandable,
631
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-icon-collapsible,
632
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-icon-expandable {
624
633
  color: #fff;
625
634
  }
626
635
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content,
627
- .e-treeview .e-list-item.e-editing.e-hover > .e-text-content {
636
+ .e-treeview .e-list-item.e-editing.e-hover > .e-text-content,
637
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content {
628
638
  color: #333;
629
639
  }
630
640
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-list-text,
631
- .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-list-text {
641
+ .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-list-text,
642
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-list-text {
632
643
  color: #333;
633
644
  }
634
645
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-icon-collapsible,
635
646
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-icon-expandable,
636
647
  .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-collapsible,
637
- .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-expandable {
648
+ .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-expandable,
649
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-icon-collapsible,
650
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-icon-expandable {
638
651
  color: #333;
639
652
  }
640
- .e-treeview .e-list-item.e-hover > .e-fullrow {
653
+ .e-treeview .e-list-item.e-hover > .e-fullrow,
654
+ .e-treeview .e-list-item.e-node-focus > .e-fullrow {
641
655
  background-color: #f5f5f5;
642
656
  border-color: #f5f5f5;
643
657
  }
@@ -655,13 +669,15 @@
655
669
  .e-treeview .e-list-item.e-active.e-animation-active > .e-text-content .e-list-text {
656
670
  color: #333;
657
671
  }
658
- .e-treeview .e-list-item.e-active.e-hover > .e-fullrow {
672
+ .e-treeview .e-list-item.e-active.e-hover > .e-fullrow,
673
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-fullrow {
659
674
  background-color: #317ab9;
660
675
  border-color: #66afe9;
661
676
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
662
677
  }
663
678
  .e-treeview .e-list-item.e-editing.e-active > .e-fullrow,
664
- .e-treeview .e-list-item.e-editing.e-hover > .e-fullrow {
679
+ .e-treeview .e-list-item.e-editing.e-hover > .e-fullrow,
680
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-fullrow {
665
681
  background-color: transparent;
666
682
  border-color: transparent;
667
683
  box-shadow: none;
@@ -694,7 +710,8 @@
694
710
  .e-treeview .e-popup .e-downtail::after {
695
711
  border-top-color: #fff;
696
712
  }
697
- .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-hover > .e-text-content {
713
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-hover > .e-text-content,
714
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-node-focus > .e-text-content {
698
715
  background-color: #f5f5f5;
699
716
  border-color: #f5f5f5;
700
717
  }
@@ -702,13 +719,15 @@
702
719
  background-color: #317ab9;
703
720
  border-color: #317ab9;
704
721
  }
705
- .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-hover > .e-text-content {
722
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-hover > .e-text-content,
723
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-node-focus > .e-text-content {
706
724
  background-color: #317ab9;
707
725
  border-color: #66afe9;
708
726
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
709
727
  }
710
728
  .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-active > .e-text-content,
711
- .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-hover > .e-text-content {
729
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-hover > .e-text-content,
730
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-node-focus > .e-text-content {
712
731
  background-color: transparent;
713
732
  border-color: transparent;
714
733
  box-shadow: none;
package/styles/treeview/bootstrap4.css CHANGED
@@ -670,17 +670,22 @@
670
670
  font-size: 8px;
671
671
  }
672
672
  .e-treeview .e-list-item.e-active,
673
- .e-treeview .e-list-item.e-hover {
673
+ .e-treeview .e-list-item.e-hover,
674
+ .e-treeview .e-list-item.e-node-focus {
674
675
  background: transparent;
675
676
  }
676
- .e-treeview .e-list-item.e-hover > .e-text-content {
677
+ .e-treeview .e-list-item.e-hover > .e-text-content,
678
+ .e-treeview .e-list-item.e-node-focus > .e-text-content {
677
679
  color: #212529;
678
680
  }
679
- .e-treeview .e-list-item.e-hover > .e-text-content .e-list-text {
681
+ .e-treeview .e-list-item.e-hover > .e-text-content .e-list-text,
682
+ .e-treeview .e-list-item.e-node-focus > .e-text-content .e-list-text {
680
683
  color: #212529;
681
684
  }
682
685
  .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-collapsible,
683
- .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-expandable {
686
+ .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-expandable,
687
+ .e-treeview .e-list-item.e-node-focus > .e-text-content .e-icon-collapsible,
688
+ .e-treeview .e-list-item.e-node-focus > .e-text-content .e-icon-expandable {
684
689
  color: #495057;
685
690
  }
686
691
  .e-treeview .e-list-item.e-active > .e-text-content {
@@ -698,31 +703,40 @@
698
703
  border-color: #fff;
699
704
  color: #007bff;
700
705
  }
701
- .e-treeview .e-list-item.e-active.e-hover > .e-text-content {
706
+ .e-treeview .e-list-item.e-active.e-hover > .e-text-content,
707
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content {
702
708
  color: #fff;
703
709
  }
704
- .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-list-text {
710
+ .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-list-text,
711
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-list-text {
705
712
  color: #fff;
706
713
  }
707
714
  .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-collapsible,
708
- .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-expandable {
715
+ .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-expandable,
716
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-icon-collapsible,
717
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-icon-expandable {
709
718
  color: #fff;
710
719
  }
711
720
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content,
712
- .e-treeview .e-list-item.e-editing.e-hover > .e-text-content {
721
+ .e-treeview .e-list-item.e-editing.e-hover > .e-text-content,
722
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content {
713
723
  color: #212529;
714
724
  }
715
725
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-list-text,
716
- .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-list-text {
726
+ .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-list-text,
727
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-list-text {
717
728
  color: #212529;
718
729
  }
719
730
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-icon-collapsible,
720
731
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-icon-expandable,
721
732
  .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-collapsible,
722
- .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-expandable {
733
+ .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-expandable,
734
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-icon-collapsible,
735
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-icon-expandable {
723
736
  color: #495057;
724
737
  }
725
- .e-treeview .e-list-item.e-hover > .e-fullrow {
738
+ .e-treeview .e-list-item.e-hover > .e-fullrow,
739
+ .e-treeview .e-list-item.e-node-focus > .e-fullrow {
726
740
  background-color: #f2f4f6;
727
741
  border-color: #f2f4f6;
728
742
  }
@@ -740,12 +754,14 @@
740
754
  .e-treeview .e-list-item.e-active.e-animation-active > .e-text-content .e-list-text {
741
755
  color: #212529;
742
756
  }
743
- .e-treeview .e-list-item.e-active.e-hover > .e-fullrow {
757
+ .e-treeview .e-list-item.e-active.e-hover > .e-fullrow,
758
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-fullrow {
744
759
  background-color: #0069d9;
745
760
  border-color: #0069d9;
746
761
  }
747
762
  .e-treeview .e-list-item.e-editing.e-active > .e-fullrow,
748
- .e-treeview .e-list-item.e-editing.e-hover > .e-fullrow {
763
+ .e-treeview .e-list-item.e-editing.e-hover > .e-fullrow,
764
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-fullrow {
749
765
  background-color: transparent;
750
766
  border-color: transparent;
751
767
  }
@@ -778,7 +794,8 @@
778
794
  .e-treeview .e-popup .e-downtail::after {
779
795
  border-top-color: transparent;
780
796
  }
781
- .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-hover > .e-text-content {
797
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-hover > .e-text-content,
798
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-node-focus > .e-text-content {
782
799
  background-color: #f2f4f6;
783
800
  border-color: #f2f4f6;
784
801
  }
@@ -786,12 +803,14 @@
786
803
  background-color: #007bff;
787
804
  border-color: #007bff;
788
805
  }
789
- .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-hover > .e-text-content {
806
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-hover > .e-text-content,
807
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-node-focus > .e-text-content {
790
808
  background-color: #0069d9;
791
809
  border-color: #0069d9;
792
810
  }
793
811
  .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-active > .e-text-content,
794
- .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-hover > .e-text-content {
812
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-hover > .e-text-content,
813
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-node-focus > .e-text-content {
795
814
  background-color: transparent;
796
815
  border-color: transparent;
797
816
  }
package/styles/treeview/bootstrap5-dark.css CHANGED
@@ -692,17 +692,22 @@
692
692
  font-size: 20px;
693
693
  }
694
694
  .e-treeview .e-list-item.e-active,
695
- .e-treeview .e-list-item.e-hover {
695
+ .e-treeview .e-list-item.e-hover,
696
+ .e-treeview .e-list-item.e-node-focus {
696
697
  background: transparent;
697
698
  }
698
- .e-treeview .e-list-item.e-hover > .e-text-content {
699
+ .e-treeview .e-list-item.e-hover > .e-text-content,
700
+ .e-treeview .e-list-item.e-node-focus > .e-text-content {
699
701
  color: #fff;
700
702
  }
701
- .e-treeview .e-list-item.e-hover > .e-text-content .e-list-text {
703
+ .e-treeview .e-list-item.e-hover > .e-text-content .e-list-text,
704
+ .e-treeview .e-list-item.e-node-focus > .e-text-content .e-list-text {
702
705
  color: #fff;
703
706
  }
704
707
  .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-collapsible,
705
- .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-expandable {
708
+ .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-expandable,
709
+ .e-treeview .e-list-item.e-node-focus > .e-text-content .e-icon-collapsible,
710
+ .e-treeview .e-list-item.e-node-focus > .e-text-content .e-icon-expandable {
706
711
  color: #dee2e6;
707
712
  }
708
713
  .e-treeview .e-list-item.e-active > .e-text-content {
@@ -721,31 +726,40 @@
721
726
  .e-treeview .e-list-item.e-active > .e-text-content .e-stop {
722
727
  border-color: #fff;
723
728
  }
724
- .e-treeview .e-list-item.e-active.e-hover > .e-text-content {
729
+ .e-treeview .e-list-item.e-active.e-hover > .e-text-content,
730
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content {
725
731
  color: #fff;
726
732
  }
727
- .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-list-text {
733
+ .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-list-text,
734
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-list-text {
728
735
  color: #fff;
729
736
  }
730
737
  .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-collapsible,
731
- .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-expandable {
738
+ .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-expandable,
739
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-icon-collapsible,
740
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-icon-expandable {
732
741
  color: #fff;
733
742
  }
734
743
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content,
735
- .e-treeview .e-list-item.e-editing.e-hover > .e-text-content {
744
+ .e-treeview .e-list-item.e-editing.e-hover > .e-text-content,
745
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content {
736
746
  color: #fff;
737
747
  }
738
748
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-list-text,
739
- .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-list-text {
749
+ .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-list-text,
750
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-list-text {
740
751
  color: #fff;
741
752
  }
742
753
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-icon-collapsible,
743
754
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-icon-expandable,
744
755
  .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-collapsible,
745
- .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-expandable {
756
+ .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-expandable,
757
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-icon-collapsible,
758
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-icon-expandable {
746
759
  color: #adb5bd;
747
760
  }
748
- .e-treeview .e-list-item.e-hover > .e-fullrow {
761
+ .e-treeview .e-list-item.e-hover > .e-fullrow,
762
+ .e-treeview .e-list-item.e-node-focus > .e-fullrow {
749
763
  background-color: #31373d;
750
764
  border-color: #31373d;
751
765
  }
@@ -763,12 +777,14 @@
763
777
  .e-treeview .e-list-item.e-active.e-animation-active > .e-text-content .e-list-text {
764
778
  color: #fff;
765
779
  }
766
- .e-treeview .e-list-item.e-active.e-hover > .e-fullrow {
780
+ .e-treeview .e-list-item.e-active.e-hover > .e-fullrow,
781
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-fullrow {
767
782
  background-color: #0262ef;
768
783
  border-color: #0d6efd;
769
784
  }
770
785
  .e-treeview .e-list-item.e-editing.e-active > .e-fullrow,
771
- .e-treeview .e-list-item.e-editing.e-hover > .e-fullrow {
786
+ .e-treeview .e-list-item.e-editing.e-hover > .e-fullrow,
787
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-fullrow {
772
788
  background-color: transparent;
773
789
  border-color: transparent;
774
790
  }
@@ -803,7 +819,8 @@
803
819
  .e-treeview .e-popup .e-downtail::after {
804
820
  border-top-color: #31373d;
805
821
  }
806
- .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-hover > .e-text-content {
822
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-hover > .e-text-content,
823
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-node-focus > .e-text-content {
807
824
  background-color: #31373d;
808
825
  border-color: #31373d;
809
826
  }
@@ -811,12 +828,14 @@
811
828
  background-color: #0d6efd;
812
829
  border-color: #0d6efd;
813
830
  }
814
- .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-hover > .e-text-content {
831
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-hover > .e-text-content,
832
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-node-focus > .e-text-content {
815
833
  background-color: #0262ef;
816
834
  border-color: #0d6efd;
817
835
  }
818
836
  .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-active > .e-text-content,
819
- .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-hover > .e-text-content {
837
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-hover > .e-text-content,
838
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-node-focus > .e-text-content {
820
839
  background-color: transparent;
821
840
  border-color: transparent;
822
841
  }
package/styles/treeview/bootstrap5.css CHANGED
@@ -692,17 +692,22 @@
692
692
  font-size: 20px;
693
693
  }
694
694
  .e-treeview .e-list-item.e-active,
695
- .e-treeview .e-list-item.e-hover {
695
+ .e-treeview .e-list-item.e-hover,
696
+ .e-treeview .e-list-item.e-node-focus {
696
697
  background: transparent;
697
698
  }
698
- .e-treeview .e-list-item.e-hover > .e-text-content {
699
+ .e-treeview .e-list-item.e-hover > .e-text-content,
700
+ .e-treeview .e-list-item.e-node-focus > .e-text-content {
699
701
  color: #212529;
700
702
  }
701
- .e-treeview .e-list-item.e-hover > .e-text-content .e-list-text {
703
+ .e-treeview .e-list-item.e-hover > .e-text-content .e-list-text,
704
+ .e-treeview .e-list-item.e-node-focus > .e-text-content .e-list-text {
702
705
  color: #212529;
703
706
  }
704
707
  .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-collapsible,
705
- .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-expandable {
708
+ .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-expandable,
709
+ .e-treeview .e-list-item.e-node-focus > .e-text-content .e-icon-collapsible,
710
+ .e-treeview .e-list-item.e-node-focus > .e-text-content .e-icon-expandable {
706
711
  color: #343a40;
707
712
  }
708
713
  .e-treeview .e-list-item.e-active > .e-text-content {
@@ -721,31 +726,40 @@
721
726
  .e-treeview .e-list-item.e-active > .e-text-content .e-stop {
722
727
  border-color: #fff;
723
728
  }
724
- .e-treeview .e-list-item.e-active.e-hover > .e-text-content {
729
+ .e-treeview .e-list-item.e-active.e-hover > .e-text-content,
730
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content {
725
731
  color: #fff;
726
732
  }
727
- .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-list-text {
733
+ .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-list-text,
734
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-list-text {
728
735
  color: #fff;
729
736
  }
730
737
  .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-collapsible,
731
- .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-expandable {
738
+ .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-expandable,
739
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-icon-collapsible,
740
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-icon-expandable {
732
741
  color: #fff;
733
742
  }
734
743
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content,
735
- .e-treeview .e-list-item.e-editing.e-hover > .e-text-content {
744
+ .e-treeview .e-list-item.e-editing.e-hover > .e-text-content,
745
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content {
736
746
  color: #212529;
737
747
  }
738
748
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-list-text,
739
- .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-list-text {
749
+ .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-list-text,
750
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-list-text {
740
751
  color: #212529;
741
752
  }
742
753
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-icon-collapsible,
743
754
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-icon-expandable,
744
755
  .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-collapsible,
745
- .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-expandable {
756
+ .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-expandable,
757
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-icon-collapsible,
758
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-icon-expandable {
746
759
  color: #6c757d;
747
760
  }
748
- .e-treeview .e-list-item.e-hover > .e-fullrow {
761
+ .e-treeview .e-list-item.e-hover > .e-fullrow,
762
+ .e-treeview .e-list-item.e-node-focus > .e-fullrow {
749
763
  background-color: #e9ecef;
750
764
  border-color: #e9ecef;
751
765
  }
@@ -763,12 +777,14 @@
763
777
  .e-treeview .e-list-item.e-active.e-animation-active > .e-text-content .e-list-text {
764
778
  color: #212529;
765
779
  }
766
- .e-treeview .e-list-item.e-active.e-hover > .e-fullrow {
780
+ .e-treeview .e-list-item.e-active.e-hover > .e-fullrow,
781
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-fullrow {
767
782
  background-color: #0262ef;
768
783
  border-color: #0d6efd;
769
784
  }
770
785
  .e-treeview .e-list-item.e-editing.e-active > .e-fullrow,
771
- .e-treeview .e-list-item.e-editing.e-hover > .e-fullrow {
786
+ .e-treeview .e-list-item.e-editing.e-hover > .e-fullrow,
787
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-fullrow {
772
788
  background-color: transparent;
773
789
  border-color: transparent;
774
790
  }
@@ -803,7 +819,8 @@
803
819
  .e-treeview .e-popup .e-downtail::after {
804
820
  border-top-color: #e9ecef;
805
821
  }
806
- .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-hover > .e-text-content {
822
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-hover > .e-text-content,
823
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-node-focus > .e-text-content {
807
824
  background-color: #e9ecef;
808
825
  border-color: #e9ecef;
809
826
  }
@@ -811,12 +828,14 @@
811
828
  background-color: #0d6efd;
812
829
  border-color: #0d6efd;
813
830
  }
814
- .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-hover > .e-text-content {
831
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-hover > .e-text-content,
832
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-node-focus > .e-text-content {
815
833
  background-color: #0262ef;
816
834
  border-color: #0d6efd;
817
835
  }
818
836
  .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-active > .e-text-content,
819
- .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-hover > .e-text-content {
837
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-hover > .e-text-content,
838
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-node-focus > .e-text-content {
820
839
  background-color: transparent;
821
840
  border-color: transparent;
822
841
  }
package/styles/treeview/fabric-dark.css CHANGED
@@ -589,17 +589,22 @@
589
589
  font-size: 10px;
590
590
  }
591
591
  .e-treeview .e-list-item.e-active,
592
- .e-treeview .e-list-item.e-hover {
592
+ .e-treeview .e-list-item.e-hover,
593
+ .e-treeview .e-list-item.e-node-focus {
593
594
  background: transparent;
594
595
  }
595
- .e-treeview .e-list-item.e-hover > .e-text-content {
596
+ .e-treeview .e-list-item.e-hover > .e-text-content,
597
+ .e-treeview .e-list-item.e-node-focus > .e-text-content {
596
598
  color: #dadada;
597
599
  }
598
- .e-treeview .e-list-item.e-hover > .e-text-content .e-list-text {
600
+ .e-treeview .e-list-item.e-hover > .e-text-content .e-list-text,
601
+ .e-treeview .e-list-item.e-node-focus > .e-text-content .e-list-text {
599
602
  color: #dadada;
600
603
  }
601
604
  .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-collapsible,
602
- .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-expandable {
605
+ .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-expandable,
606
+ .e-treeview .e-list-item.e-node-focus > .e-text-content .e-icon-collapsible,
607
+ .e-treeview .e-list-item.e-node-focus > .e-text-content .e-icon-expandable {
603
608
  color: #dadada;
604
609
  }
605
610
  .e-treeview .e-list-item.e-active > .e-text-content {
@@ -612,31 +617,40 @@
612
617
  .e-treeview .e-list-item.e-active > .e-text-content .e-icon-expandable {
613
618
  color: #fff;
614
619
  }
615
- .e-treeview .e-list-item.e-active.e-hover > .e-text-content {
620
+ .e-treeview .e-list-item.e-active.e-hover > .e-text-content,
621
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content {
616
622
  color: #fff;
617
623
  }
618
- .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-list-text {
624
+ .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-list-text,
625
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-list-text {
619
626
  color: #fff;
620
627
  }
621
628
  .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-collapsible,
622
- .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-expandable {
629
+ .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-expandable,
630
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-icon-collapsible,
631
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-icon-expandable {
623
632
  color: #fff;
624
633
  }
625
634
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content,
626
- .e-treeview .e-list-item.e-editing.e-hover > .e-text-content {
635
+ .e-treeview .e-list-item.e-editing.e-hover > .e-text-content,
636
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content {
627
637
  color: #dadada;
628
638
  }
629
639
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-list-text,
630
- .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-list-text {
640
+ .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-list-text,
641
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-list-text {
631
642
  color: #dadada;
632
643
  }
633
644
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-icon-collapsible,
634
645
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-icon-expandable,
635
646
  .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-collapsible,
636
- .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-expandable {
647
+ .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-expandable,
648
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-icon-collapsible,
649
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-icon-expandable {
637
650
  color: #dadada;
638
651
  }
639
- .e-treeview .e-list-item.e-hover > .e-fullrow {
652
+ .e-treeview .e-list-item.e-hover > .e-fullrow,
653
+ .e-treeview .e-list-item.e-node-focus > .e-fullrow {
640
654
  background-color: #414040;
641
655
  border-color: #414040;
642
656
  }
@@ -654,12 +668,14 @@
654
668
  .e-treeview .e-list-item.e-active.e-animation-active > .e-text-content .e-list-text {
655
669
  color: #dadada;
656
670
  }
657
- .e-treeview .e-list-item.e-active.e-hover > .e-fullrow {
671
+ .e-treeview .e-list-item.e-active.e-hover > .e-fullrow,
672
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-fullrow {
658
673
  background-color: #514f4f;
659
674
  border-color: #c8c8c8;
660
675
  }
661
676
  .e-treeview .e-list-item.e-editing.e-active > .e-fullrow,
662
- .e-treeview .e-list-item.e-editing.e-hover > .e-fullrow {
677
+ .e-treeview .e-list-item.e-editing.e-hover > .e-fullrow,
678
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-fullrow {
663
679
  background-color: transparent;
664
680
  border-color: transparent;
665
681
  }
@@ -691,7 +707,8 @@
691
707
  .e-treeview .e-popup .e-downtail::after {
692
708
  border-top-color: #fff;
693
709
  }
694
- .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-hover > .e-text-content {
710
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-hover > .e-text-content,
711
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-node-focus > .e-text-content {
695
712
  background-color: #414040;
696
713
  border-color: #414040;
697
714
  }
@@ -699,12 +716,14 @@
699
716
  background-color: #514f4f;
700
717
  border-color: #514f4f;
701
718
  }
702
- .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-hover > .e-text-content {
719
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-hover > .e-text-content,
720
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-node-focus > .e-text-content {
703
721
  background-color: #514f4f;
704
722
  border-color: #c8c8c8;
705
723
  }
706
724
  .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-active > .e-text-content,
707
- .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-hover > .e-text-content {
725
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-hover > .e-text-content,
726
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-node-focus > .e-text-content {
708
727
  background-color: transparent;
709
728
  border-color: transparent;
710
729
  }