@syncfusion/ej2-navigations 22.2.8 → 23.1.36

package/src/treeview/treeview-model.d.ts

@@ -1,4 +1,4 @@
-import { Component, EmitType, isUndefined, Browser, compile, isNullOrUndefined, SanitizeHtmlHelper  } from '@syncfusion/ej2-base';import { Property, INotifyPropertyChanged, NotifyPropertyChanges, ChildProperty, Complex } from '@syncfusion/ej2-base';import { Event, EventHandler, KeyboardEvents, KeyboardEventArgs } from '@syncfusion/ej2-base';import { rippleEffect, Effect, Animation, AnimationOptions, RippleOptions, remove  } from '@syncfusion/ej2-base';import { Draggable, DragEventArgs, Droppable, DropEventArgs } from '@syncfusion/ej2-base';import { getElement  } from '@syncfusion/ej2-base';import { addClass, removeClass, closest, matches, detach, select, selectAll, isVisible, append } from '@syncfusion/ej2-base';import { DataManager, Query } from '@syncfusion/ej2-data';import { isNullOrUndefined as isNOU, Touch, TapEventArgs, getValue, setValue, extend, merge, attributes } from '@syncfusion/ej2-base';import { ListBase, ListBaseOptions, AriaAttributesMapping, FieldsMapping } from '@syncfusion/ej2-lists';import { createCheckBox, rippleMouseHandler } from '@syncfusion/ej2-buttons';import { Input, InputObject } from '@syncfusion/ej2-inputs';import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
+import { Component, EmitType, isUndefined, Browser, compile, isNullOrUndefined, SanitizeHtmlHelper, animationMode } from '@syncfusion/ej2-base';import { Property, INotifyPropertyChanged, NotifyPropertyChanges, ChildProperty, Complex } from '@syncfusion/ej2-base';import { Event, EventHandler, KeyboardEvents, KeyboardEventArgs } from '@syncfusion/ej2-base';import { rippleEffect, Effect, Animation, AnimationOptions, RippleOptions, remove  } from '@syncfusion/ej2-base';import { Draggable, DragEventArgs, Droppable, DropEventArgs } from '@syncfusion/ej2-base';import { getElement  } from '@syncfusion/ej2-base';import { addClass, removeClass, closest, matches, detach, select, selectAll, isVisible, append } from '@syncfusion/ej2-base';import { DataManager, Query } from '@syncfusion/ej2-data';import { isNullOrUndefined as isNOU, Touch, TapEventArgs, getValue, setValue, extend, merge, attributes } from '@syncfusion/ej2-base';import { ListBase, ListBaseOptions, AriaAttributesMapping, FieldsMapping } from '@syncfusion/ej2-lists';import { createCheckBox, rippleMouseHandler } from '@syncfusion/ej2-buttons';import { Input, InputObject } from '@syncfusion/ej2-inputs';import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
 import {ExpandOnSettings,SortOrder,FailureEventArgs,DataBoundEventArgs,DataSourceChangedEventArgs,DrawNodeEventArgs,NodeKeyPressEventArgs,NodeCheckEventArgs,NodeClickEventArgs,NodeExpandEventArgs,DragAndDropEventArgs,NodeEditEventArgs,NodeSelectEventArgs} from "./treeview";
 import {ComponentModel} from '@syncfusion/ej2-base';
 

package/src/treeview/treeview.d.ts

@@ -325,7 +325,7 @@ export interface NodeData {
  * Interface for Failure event arguments
  */
 export interface FailureEventArgs {
-    /** Represents the Error object that contains information about the error that occurred. This property allows you to access details such as the error message, stack trace, error code, or any additional information associated with the error. */
+    /** Defines the error information. */
     error?: Error;
 }
 /**

package/src/treeview/treeview.js

@@ -17,7 +17,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, isUndefined, Browser, compile, isNullOrUndefined, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
+import { Component, isUndefined, Browser, compile, isNullOrUndefined, SanitizeHtmlHelper, animationMode } from '@syncfusion/ej2-base';
 import { Property, NotifyPropertyChanges, ChildProperty, Complex } from '@syncfusion/ej2-base';
 import { Event, EventHandler, KeyboardEvents } from '@syncfusion/ej2-base';
 import { rippleEffect, Animation, remove } from '@syncfusion/ej2-base';
@@ -853,6 +853,7 @@ var TreeView = /** @class */ (function (_super) {
         return list;
     };
     TreeView.prototype.finalizeNode = function (element) {
+        var _this = this;
         var iNodes = selectAll('.' + IMAGE, element);
         for (var k = 0; k < iNodes.length; k++) {
             iNodes[k].setAttribute('alt', IMAGE);
@@ -873,6 +874,9 @@ var TreeView = /** @class */ (function (_super) {
             }
         }
         var eNodes = selectAll('.' + EXPANDED, element);
+        if (!this.loadOnDemand && this.fields.dataSource instanceof DataManager) {
+            this.isInitalExpand = this.treeData.filter(function (e) { return e[_this.fields.expanded] == true; }).length > 0 ? true : this.isInitalExpand;
+        }
         if (!this.isInitalExpand) {
             for (var i = 0; i < eNodes.length; i++) {
                 this.renderChildNodes(eNodes[i]);
@@ -1377,7 +1381,11 @@ var TreeView = /** @class */ (function (_super) {
         }
     };
     TreeView.prototype.doExpandAction = function () {
+        var _this = this;
         var eUids = this.expandedNodes;
+        if (!this.loadOnDemand && this.fields.dataSource instanceof DataManager) {
+            this.isInitalExpand = this.treeData.filter(function (e) { return e[_this.fields.expanded] == true; }).length > 0 ? true : this.isInitalExpand;
+        }
         if (this.isInitalExpand && eUids.length > 0) {
             this.setProperties({ expandedNodes: [] }, true);
             /* eslint-disable */
@@ -1570,7 +1578,7 @@ var TreeView = /** @class */ (function (_super) {
                 if (this.isAnimate && !this.isRefreshed) {
                     this.aniObj.animate(ul_1, {
                         name: this.animation.expand.effect,
-                        duration: this.animation.expand.duration,
+                        duration: (this.animation.expand.duration === 0 && animationMode === 'Enable') ? 400 : this.animation.expand.duration,
                         timingFunction: this.animation.expand.easing,
                         begin: function (args) {
                             liEle_1.style.overflow = 'hidden';
@@ -1672,7 +1680,7 @@ var TreeView = /** @class */ (function (_super) {
         if (this.isAnimate) {
             this.aniObj.animate(ul, {
                 name: this.animation.collapse.effect,
-                duration: this.animation.collapse.duration,
+                duration: (this.animation.collapse.duration === 0 && animationMode === 'Enable') ? 400 : this.animation.collapse.duration,
                 timingFunction: this.animation.collapse.easing,
                 begin: function (args) {
                     liEle.style.overflow = 'hidden';
@@ -1819,6 +1827,9 @@ var TreeView = /** @class */ (function (_super) {
         if (callback) {
             callback();
         }
+        if (expandChild) {
+            this.expandedNodes.push(parentLi.getAttribute('data-uid'));
+        }
         if (this.treeList.length === 0 && !this.isLoaded) {
             this.finalize();
         }

package/styles/accordion/_theme.scss

@@ -194,6 +194,7 @@
           border: $acrdn-item-exp-not-selected-hdr-focus-border;
         }
       }
+
       &.e-expand-state.e-select:not(.e-selected) > .e-acrdn-header {
 
         &:focus {

package/styles/accordion/bootstrap-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap-dark-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap-dark.scss';
 @import 'bootstrap-dark-definition.scss';
 @import 'icons/bootstrap-dark.scss';
 @import 'all.scss';

package/styles/accordion/bootstrap.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap.scss';
 @import 'bootstrap-definition.scss';
 @import 'icons/bootstrap.scss';
 @import 'all.scss';

package/styles/accordion/bootstrap4.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap4-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap4.scss';
 @import 'bootstrap4-definition.scss';
 @import 'icons/bootstrap4.scss';
 @import 'all.scss';

package/styles/accordion/bootstrap5-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap5-dark-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap5-dark.scss';
 @import 'bootstrap5-dark-definition.scss';
 @import 'icons/bootstrap5-dark.scss';
 @import 'all.scss';

package/styles/accordion/bootstrap5.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap5-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap5.scss';
 @import 'bootstrap5-definition.scss';
 @import 'icons/bootstrap5.scss';
 @import 'all.scss';

package/styles/accordion/fabric-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fabric-dark-definition.scss';
+@import 'ej2-base/styles/definition/fabric-dark.scss';
 @import 'fabric-dark-definition.scss';
 @import 'icons/fabric-dark.scss';
 @import 'all.scss';

package/styles/accordion/fabric.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fabric-definition.scss';
+@import 'ej2-base/styles/definition/fabric.scss';
 @import 'fabric-definition.scss';
 @import 'icons/fabric.scss';
 @import 'all.scss';

package/styles/accordion/fluent-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fluent-dark-definition.scss';
+@import 'ej2-base/styles/definition/fluent-dark.scss';
 @import 'fluent-dark-definition.scss';
 @import 'icons/fluent-dark.scss';
 @import 'all.scss';

package/styles/accordion/fluent.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fluent-definition.scss';
+@import 'ej2-base/styles/definition/fluent.scss';
 @import 'fluent-definition.scss';
 @import 'icons/fluent.scss';
 @import 'all.scss';

package/styles/accordion/highcontrast-light.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/highcontrast-light-definition.scss';
+@import 'ej2-base/styles/definition/highcontrast-light.scss';
 @import 'highcontrast-light-definition.scss';
 @import 'icons/highcontrast-light.scss';
 @import 'all.scss';

package/styles/accordion/highcontrast.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/highcontrast-definition.scss';
+@import 'ej2-base/styles/definition/highcontrast.scss';
 @import 'highcontrast-definition.scss';
 @import 'icons/highcontrast.scss';
 @import 'all.scss';

package/styles/accordion/material-dark.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
 /*! accordion icons */
 .e-accordion .e-tgl-collapse-icon::before {
   content: "\e916";

package/styles/accordion/material-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material-dark-definition.scss';
+@import 'ej2-base/styles/definition/material-dark.scss';
 @import 'material-dark-definition.scss';
 @import 'icons/material-dark.scss';
 @import 'all.scss';

package/styles/accordion/material.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
 /*! component's theme wise override material-definitions and variables */
 /*! accordion icons */
 .e-accordion .e-tgl-collapse-icon::before {

package/styles/accordion/material.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material-definition.scss';
+@import 'ej2-base/styles/definition/material.scss';
 @import 'material-definition.scss';
 @import 'icons/material.scss';
 @import 'all.scss';

package/styles/accordion/material3-dark.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
 :root {
   --color-sf-black: 0, 0, 0;
   --color-sf-white: 255, 255, 255;

package/styles/accordion/material3-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material3-dark-definition.scss';
+
 
 @import 'material3-dark-definition.scss';
 @import 'icons/material3-dark.scss';

package/styles/accordion/material3.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
 :root {
   --color-sf-black: 0, 0, 0;
   --color-sf-white: 255, 255, 255;

package/styles/accordion/material3.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material3-definition.scss';
+
 
 @import 'material3-definition.scss';
 @import 'icons/material3.scss';

package/styles/accordion/tailwind-dark.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 /*! component's theme wise override tailwind-definitions and variables */
 /*! accordion icons */
 .e-accordion .e-tgl-collapse-icon::before {

package/styles/accordion/tailwind-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/tailwind-dark-definition.scss';
+@import 'ej2-base/styles/definition/tailwind-dark.scss';
 @import 'tailwind-dark-definition.scss';
 @import 'icons/tailwind-dark.scss';
 @import 'all.scss';

package/styles/accordion/tailwind.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 /*! component's theme wise override tailwind-definitions and variables */
 /*! accordion icons */
 .e-accordion .e-tgl-collapse-icon::before {

package/styles/accordion/tailwind.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/tailwind-definition.scss';
+@import 'ej2-base/styles/definition/tailwind.scss';
 @import 'tailwind-definition.scss';
 @import 'icons/tailwind.scss';
 @import 'all.scss';

package/styles/appbar/bootstrap-dark.scss

@@ -1,3 +1,3 @@
-@import 'ej2-base/styles/bootstrap-dark-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap-dark.scss';
 @import 'bootstrap-dark-definition.scss';
 @import 'all.scss';

package/styles/appbar/bootstrap.scss

@@ -1,3 +1,3 @@
-@import 'ej2-base/styles/bootstrap-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap.scss';
 @import 'bootstrap-definition.scss';
 @import 'all.scss';

package/styles/appbar/bootstrap4.scss

@@ -1,3 +1,3 @@
-@import 'ej2-base/styles/bootstrap4-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap4.scss';
 @import 'bootstrap4-definition.scss';
 @import 'all.scss';

package/styles/appbar/bootstrap5-dark.scss

@@ -1,3 +1,3 @@
-@import 'ej2-base/styles/bootstrap5-dark-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap5-dark.scss';
 @import 'bootstrap5-dark-definition.scss';
 @import 'all.scss';

package/styles/appbar/bootstrap5.scss

@@ -1,3 +1,3 @@
-@import 'ej2-base/styles/bootstrap5-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap5.scss';
 @import 'bootstrap5-definition.scss';
 @import 'all.scss';

package/styles/appbar/fabric-dark.scss

@@ -1,3 +1,3 @@
-@import 'ej2-base/styles/fabric-dark-definition.scss';
+@import 'ej2-base/styles/definition/fabric-dark.scss';
 @import 'fabric-dark-definition.scss';
 @import 'all.scss';

package/styles/appbar/fabric.scss

@@ -1,3 +1,3 @@
-@import 'ej2-base/styles/fabric-definition.scss';
+@import 'ej2-base/styles/definition/fabric.scss';
 @import 'fabric-definition.scss';
 @import 'all.scss';

package/styles/appbar/fluent-dark.scss

@@ -1,3 +1,3 @@
-@import 'ej2-base/styles/fluent-dark-definition.scss';
+@import 'ej2-base/styles/definition/fluent-dark.scss';
 @import 'fluent-dark-definition.scss';
 @import 'all.scss';

package/styles/appbar/fluent.scss

@@ -1,3 +1,3 @@
-@import 'ej2-base/styles/fluent-definition.scss';
+@import 'ej2-base/styles/definition/fluent.scss';
 @import 'fluent-definition.scss';
 @import 'all.scss';

package/styles/appbar/highcontrast-light.scss

@@ -1,3 +1,3 @@
-@import 'ej2-base/styles/highcontrast-light-definition.scss';
+@import 'ej2-base/styles/definition/highcontrast-light.scss';
 @import 'highcontrast-light-definition.scss';
 @import 'all.scss';

package/styles/appbar/highcontrast.scss

@@ -1,3 +1,3 @@
-@import 'ej2-base/styles/highcontrast-definition.scss';
+@import 'ej2-base/styles/definition/highcontrast.scss';
 @import 'highcontrast-definition.scss';
 @import 'all.scss';

package/styles/appbar/material-dark.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
 /*! AppBar component material-dark theme definitions and variables */
 /*! appbar component styles */
 .e-bigger .e-appbar,

package/styles/appbar/material-dark.scss

@@ -1,3 +1,3 @@
-@import 'ej2-base/styles/material-dark-definition.scss';
+@import 'ej2-base/styles/definition/material-dark.scss';
 @import 'material-dark-definition.scss';
 @import 'all.scss';

package/styles/appbar/material.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
 /*! AppBar component material theme definitions and variables */
 /*! appbar component styles */
 .e-bigger .e-appbar,

package/styles/appbar/material.scss

@@ -1,3 +1,3 @@
-@import 'ej2-base/styles/material-definition.scss';
+@import 'ej2-base/styles/definition/material.scss';
 @import 'material-definition.scss';
 @import 'all.scss';

package/styles/appbar/material3-dark.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
 :root {
   --color-sf-black: 0, 0, 0;
   --color-sf-white: 255, 255, 255;

package/styles/appbar/material3-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material3-dark-definition.scss';
+
 
 @import 'material3-dark-definition.scss';
 @import 'all.scss';

package/styles/appbar/material3.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
 :root {
   --color-sf-black: 0, 0, 0;
   --color-sf-white: 255, 255, 255;

package/styles/appbar/material3.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material3-definition.scss';
+
 
 @import 'material3-definition.scss';
 @import 'all.scss';

package/styles/appbar/tailwind-dark.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 /*! AppBar component tailwind theme definitions and variables */
 /*! appbar component styles */
 .e-bigger .e-appbar,

package/styles/appbar/tailwind-dark.scss

@@ -1,3 +1,3 @@
-@import 'ej2-base/styles/tailwind-dark-definition.scss';
+@import 'ej2-base/styles/definition/tailwind-dark.scss';
 @import 'tailwind-dark-definition.scss';
 @import 'all.scss';

package/styles/appbar/tailwind.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 /*! AppBar component tailwind theme definitions and variables */
 /*! appbar component styles */
 .e-bigger .e-appbar,

package/styles/appbar/tailwind.scss

@@ -1,3 +1,3 @@
-@import 'ej2-base/styles/tailwind-definition.scss';
+@import 'ej2-base/styles/definition/tailwind.scss';
 @import 'tailwind-definition.scss';
 @import 'all.scss';

package/styles/bootstrap-dark.css

@@ -9307,19 +9307,22 @@ ejs-sidebar {
 .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
   color: #f0f0f0;
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-selected,
-.e-menu-container .e-menu .e-menu-item.e-selected {
+.e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
+.e-menu-container .e-menu .e-menu-item.e-selected,
+.e-menu-container .e-menu .e-menu-item.e-active-item {
   color: #f0f0f0;
   outline: 0 solid #313131;
   outline-offset: 0;
   background: #313131;
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret,
-.e-menu-container .e-menu .e-menu-item.e-selected .e-caret {
+.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-caret,
+.e-menu-container .e-menu .e-menu-item.e-selected .e-caret,
+.e-menu-container .e-menu .e-menu-item.e-active-item .e-caret {
   color: #f0f0f0;
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon,
-.e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon {
+.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-menu-icon,
+.e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon,
+.e-menu-container .e-menu .e-menu-item.e-active-item .e-menu-icon {
   color: #f0f0f0;
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-separator,
@@ -9360,8 +9363,9 @@ ejs-sidebar {
   outline: 0 solid #505050;
   outline-offset: 0;
 }
-.e-menu-wrapper .e-ul .e-menu-item.e-selected,
-.e-menu-container .e-ul .e-menu-item.e-selected {
+.e-menu-wrapper .e-ul .e-menu-item.e-selected, .e-menu-wrapper .e-ul .e-menu-item.e-active-item,
+.e-menu-container .e-ul .e-menu-item.e-selected,
+.e-menu-container .e-ul .e-menu-item.e-active-item {
   background-color: #505050;
   color: #f0f0f0;
   outline: 0 solid #505050;
@@ -9432,8 +9436,9 @@ ejs-sidebar {
 .e-menu-container.e-inherit .e-menu {
   background: inherit;
 }
-.e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
+.e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-active-item, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
 .e-menu-container.e-inherit .e-menu .e-menu-item.e-selected,
+.e-menu-container.e-inherit .e-menu .e-menu-item.e-active-item,
 .e-menu-container.e-inherit .e-menu .e-menu-item.e-focused {
   background: rgba(0, 0, 0, 0.056);
   color: inherit;

package/styles/bootstrap.css

@@ -9323,19 +9323,22 @@ ejs-sidebar {
 .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
   color: #333;
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-selected,
-.e-menu-container .e-menu .e-menu-item.e-selected {
+.e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
+.e-menu-container .e-menu .e-menu-item.e-selected,
+.e-menu-container .e-menu .e-menu-item.e-active-item {
   color: #333;
   outline: 0 solid #ddd;
   outline-offset: 0;
   background: #ddd;
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret,
-.e-menu-container .e-menu .e-menu-item.e-selected .e-caret {
+.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-caret,
+.e-menu-container .e-menu .e-menu-item.e-selected .e-caret,
+.e-menu-container .e-menu .e-menu-item.e-active-item .e-caret {
   color: #333;
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon,
-.e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon {
+.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-menu-icon,
+.e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon,
+.e-menu-container .e-menu .e-menu-item.e-active-item .e-menu-icon {
   color: #333;
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-separator,
@@ -9376,8 +9379,9 @@ ejs-sidebar {
   outline: 0 solid #e6e6e6;
   outline-offset: 0;
 }
-.e-menu-wrapper .e-ul .e-menu-item.e-selected,
-.e-menu-container .e-ul .e-menu-item.e-selected {
+.e-menu-wrapper .e-ul .e-menu-item.e-selected, .e-menu-wrapper .e-ul .e-menu-item.e-active-item,
+.e-menu-container .e-ul .e-menu-item.e-selected,
+.e-menu-container .e-ul .e-menu-item.e-active-item {
   background-color: #e6e6e6;
   color: #555;
   outline: 0 solid #e6e6e6;
@@ -9448,8 +9452,9 @@ ejs-sidebar {
 .e-menu-container.e-inherit .e-menu {
   background: inherit;
 }
-.e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
+.e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-active-item, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
 .e-menu-container.e-inherit .e-menu .e-menu-item.e-selected,
+.e-menu-container.e-inherit .e-menu .e-menu-item.e-active-item,
 .e-menu-container.e-inherit .e-menu .e-menu-item.e-focused {
   background: rgba(0, 0, 0, 0.056);
   color: inherit;

package/styles/bootstrap4.css

@@ -9404,20 +9404,23 @@ ejs-sidebar {
 .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
   color: #0056b3;
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-selected,
-.e-menu-container .e-menu .e-menu-item.e-selected {
+.e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
+.e-menu-container .e-menu .e-menu-item.e-selected,
+.e-menu-container .e-menu .e-menu-item.e-active-item {
   color: #0056b3;
   outline: 0 solid #f2f4f6;
   outline-offset: 0;
   background: transparent;
   background: #f2f4f6;
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret,
-.e-menu-container .e-menu .e-menu-item.e-selected .e-caret {
+.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-caret,
+.e-menu-container .e-menu .e-menu-item.e-selected .e-caret,
+.e-menu-container .e-menu .e-menu-item.e-active-item .e-caret {
   color: #007bff;
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon,
-.e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon {
+.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-menu-icon,
+.e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon,
+.e-menu-container .e-menu .e-menu-item.e-active-item .e-menu-icon {
   color: #007bff;
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-separator,
@@ -9463,12 +9466,14 @@ ejs-sidebar {
 .e-menu-container .e-ul .e-menu-item.e-focused .e-menu-icon {
   color: #212529;
 }
-.e-menu-wrapper .e-ul .e-menu-item.e-selected .e-caret,
-.e-menu-container .e-ul .e-menu-item.e-selected .e-caret {
+.e-menu-wrapper .e-ul .e-menu-item.e-selected .e-caret, .e-menu-wrapper .e-ul .e-menu-item.e-active-item .e-caret,
+.e-menu-container .e-ul .e-menu-item.e-selected .e-caret,
+.e-menu-container .e-ul .e-menu-item.e-active-item .e-caret {
   color: #fff;
 }
-.e-menu-wrapper .e-ul .e-menu-item.e-selected .e-menu-icon,
-.e-menu-container .e-ul .e-menu-item.e-selected .e-menu-icon {
+.e-menu-wrapper .e-ul .e-menu-item.e-selected .e-menu-icon, .e-menu-wrapper .e-ul .e-menu-item.e-active-item .e-menu-icon,
+.e-menu-container .e-ul .e-menu-item.e-selected .e-menu-icon,
+.e-menu-container .e-ul .e-menu-item.e-active-item .e-menu-icon {
   color: #fff;
 }
 .e-menu-wrapper .e-ul .e-menu-item .e-menu-url,
@@ -9482,8 +9487,9 @@ ejs-sidebar {
   outline: 0 solid #e9ecef;
   outline-offset: 0;
 }
-.e-menu-wrapper .e-ul .e-menu-item.e-selected,
-.e-menu-container .e-ul .e-menu-item.e-selected {
+.e-menu-wrapper .e-ul .e-menu-item.e-selected, .e-menu-wrapper .e-ul .e-menu-item.e-active-item,
+.e-menu-container .e-ul .e-menu-item.e-selected,
+.e-menu-container .e-ul .e-menu-item.e-active-item {
   background-color: #007bff;
   color: #fff;
   outline: 0 solid #007bff;
@@ -9565,8 +9571,9 @@ ejs-sidebar {
 .e-menu-container.e-inherit .e-menu {
   background: inherit;
 }
-.e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
+.e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-active-item, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
 .e-menu-container.e-inherit .e-menu .e-menu-item.e-selected,
+.e-menu-container.e-inherit .e-menu .e-menu-item.e-active-item,
 .e-menu-container.e-inherit .e-menu .e-menu-item.e-focused {
   background: rgba(0, 0, 0, 0.056);
   color: inherit;
@@ -9584,8 +9591,9 @@ ejs-sidebar {
 .e-menu-container.e-hamburger ul {
   color: #212529;
 }
-.e-menu-wrapper.e-hamburger ul .e-selected .e-caret, .e-menu-wrapper.e-hamburger ul .e-caret,
+.e-menu-wrapper.e-hamburger ul .e-selected .e-caret, .e-menu-wrapper.e-hamburger ul .e-active-item .e-caret, .e-menu-wrapper.e-hamburger ul .e-caret,
 .e-menu-container.e-hamburger ul .e-selected .e-caret,
+.e-menu-container.e-hamburger ul .e-active-item .e-caret,
 .e-menu-container.e-hamburger ul .e-caret {
   color: #212529;
 }