@syncfusion/ej2-vue-navigations 22.2.8 → 23.1.36

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-vue-navigations@*",
-  "_id": "@syncfusion/ej2-vue-navigations@22.2.7",
+  "_id": "@syncfusion/ej2-vue-navigations@22.21.0",
   "_inBundle": false,
-  "_integrity": "sha512-EwxIvYobRIom61zz4XIPQfxcySCfTKzb1/moqoVEEnrAbR1xiWVRu8pl7JQPl3RBSGPCRVPbTBlPN+2FN4yo2w==",
+  "_integrity": "sha512-ikENgeN294vMbblSdLx1iFSBBwWu5h7sRpe/Rh85RGbEYq+NetdI1WwzhBtBBk9DygJ+yVwMPKWaJu0Ng1c0nA==",
   "_location": "/@syncfusion/ej2-vue-navigations",
   "_phantomChildren": {},
   "_requested": {
@@ -19,10 +19,10 @@
   "_requiredBy": [
     "/"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-vue-navigations/-/ej2-vue-navigations-22.2.7.tgz",
-  "_shasum": "27d8a87b1fdece44e0f6e217016de5b4eafb3aa1",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-vue-navigations/-/ej2-vue-navigations-22.21.0.tgz",
+  "_shasum": "8d0ed01d847e833417c9e442f717d14c82209d94",
   "_spec": "@syncfusion/ej2-vue-navigations@*",
-  "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_23.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -31,9 +31,9 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~22.2.5",
-    "@syncfusion/ej2-navigations": "22.2.8",
-    "@syncfusion/ej2-vue-base": "~22.2.5"
+    "@syncfusion/ej2-base": "~23.1.36",
+    "@syncfusion/ej2-navigations": "23.1.36",
+    "@syncfusion/ej2-vue-base": "~23.1.36"
   },
   "deprecated": false,
   "description": "A package of Essential JS 2 navigation components such as Tree-view, Tab, Toolbar, Context-menu, and Accordion which is used to navigate from one page to another for Vue",
@@ -69,6 +69,6 @@
     "ci-publish": "gulp ci-publish",
     "compile": "gulp ci-compile && gulp vue-global-script"
   },
-  "version": "22.2.8",
+  "version": "23.1.36",
   "sideEffects": false
 }

package/src/accordion/accordion.component.d.ts

@@ -1,3 +1,5 @@
+import { DefineVueComponent } from '@syncfusion/ej2-vue-base';
+import { AccordionModel } from '@syncfusion/ej2-navigations';
 export declare const properties: string[];
 export declare const modelProps: string[];
 export declare const testProp: any;
@@ -8,7 +10,7 @@ export declare const props: any, watch: any, emitProbs: any;
  * <ejs-accordion></ejs-accordion>
  * ```
  */
-export declare let AccordionComponent: any;
+export declare let AccordionComponent: DefineVueComponent<AccordionModel>;
 export declare type AccordionComponent = InstanceType<typeof AccordionComponent>;
 export declare const AccordionPlugin: {
     name: string;

package/src/accordion/items.directive.d.ts

@@ -1,3 +1,5 @@
+import { DefineVueDirective } from '@syncfusion/ej2-vue-base';
+import { AccordionItemModel } from '@syncfusion/ej2-navigations';
 export declare let AccordionItemsDirective: any;
 export declare const AccordionItemsPlugin: {
     name: string;
@@ -15,7 +17,7 @@ export declare const AccordionItemsPlugin: {
  * </ejs-accordion>
  * ```
  */
-export declare let AccordionItemDirective: any;
+export declare let AccordionItemDirective: DefineVueDirective<AccordionItemModel>;
 export declare const AccordionItemPlugin: {
     name: string;
     install(Vue: any): void;

package/src/appbar/appbar.component.d.ts

@@ -1,3 +1,5 @@
+import { DefineVueComponent } from '@syncfusion/ej2-vue-base';
+import { AppBarModel } from '@syncfusion/ej2-navigations';
 export declare const properties: string[];
 export declare const modelProps: string[];
 export declare const testProp: any;
@@ -8,7 +10,7 @@ export declare const props: any, watch: any, emitProbs: any;
  * <ejs-appbar></ejs-appbar>
  * ```
  */
-export declare let AppBarComponent: any;
+export declare let AppBarComponent: DefineVueComponent<AppBarModel>;
 export declare type AppBarComponent = InstanceType<typeof AppBarComponent>;
 export declare const AppBarPlugin: {
     name: string;

package/src/breadcrumb/breadcrumb.component.d.ts

@@ -1,3 +1,5 @@
+import { DefineVueComponent } from '@syncfusion/ej2-vue-base';
+import { BreadcrumbModel } from '@syncfusion/ej2-navigations';
 export declare const properties: string[];
 export declare const modelProps: string[];
 export declare const testProp: any;
@@ -8,7 +10,7 @@ export declare const props: any, watch: any, emitProbs: any;
  * <ejs-breadcrumb :items='breadcrumbItems'></ejs-breadcrumb>
  * ```
  */
-export declare let BreadcrumbComponent: any;
+export declare let BreadcrumbComponent: DefineVueComponent<BreadcrumbModel>;
 export declare type BreadcrumbComponent = InstanceType<typeof BreadcrumbComponent>;
 export declare const BreadcrumbPlugin: {
     name: string;

package/src/breadcrumb/items.directive.d.ts

@@ -1,3 +1,5 @@
+import { DefineVueDirective } from '@syncfusion/ej2-vue-base';
+import { BreadcrumbItemModel } from '@syncfusion/ej2-navigations';
 export declare let BreadcrumbItemsDirective: any;
 export declare const BreadcrumbItemsPlugin: {
     name: string;
@@ -15,7 +17,7 @@ export declare const BreadcrumbItemsPlugin: {
  * </ejs-breadcrumb>
  * ```
  */
-export declare let BreadcrumbItemDirective: any;
+export declare let BreadcrumbItemDirective: DefineVueDirective<BreadcrumbItemModel>;
 export declare const BreadcrumbItemPlugin: {
     name: string;
     install(Vue: any): void;

package/src/carousel/carousel.component.d.ts

@@ -1,3 +1,5 @@
+import { DefineVueComponent } from '@syncfusion/ej2-vue-base';
+import { CarouselModel } from '@syncfusion/ej2-navigations';
 export declare const properties: string[];
 export declare const modelProps: string[];
 export declare const testProp: any;
@@ -8,7 +10,7 @@ export declare const props: any, watch: any, emitProbs: any;
  * <ejs-carousel :items='carouselItems'></ejs-carousel>
  * ```
  */
-export declare let CarouselComponent: any;
+export declare let CarouselComponent: DefineVueComponent<CarouselModel>;
 export declare type CarouselComponent = InstanceType<typeof CarouselComponent>;
 export declare const CarouselPlugin: {
     name: string;

package/src/carousel/items.directive.d.ts

@@ -1,3 +1,5 @@
+import { DefineVueDirective } from '@syncfusion/ej2-vue-base';
+import { CarouselItemModel } from '@syncfusion/ej2-navigations';
 export declare let CarouselItemsDirective: any;
 export declare const CarouselItemsPlugin: {
     name: string;
@@ -15,7 +17,7 @@ export declare const CarouselItemsPlugin: {
  * </ejs-carousel>
  * ```
  */
-export declare let CarouselItemDirective: any;
+export declare let CarouselItemDirective: DefineVueDirective<CarouselItemModel>;
 export declare const CarouselItemPlugin: {
     name: string;
     install(Vue: any): void;

package/src/context-menu/contextmenu.component.d.ts

@@ -1,3 +1,5 @@
+import { DefineVueComponent } from '@syncfusion/ej2-vue-base';
+import { ContextMenuModel } from '@syncfusion/ej2-navigations';
 export declare const properties: string[];
 export declare const modelProps: string[];
 export declare const testProp: any;
@@ -9,7 +11,7 @@ export declare const props: any, watch: any, emitProbs: any;
  * <ejs-contextmenu target='#target' :items='menuItems'></ejs-contextmenu>
  * ```
  */
-export declare let ContextMenuComponent: any;
+export declare let ContextMenuComponent: DefineVueComponent<ContextMenuModel>;
 export declare type ContextMenuComponent = InstanceType<typeof ContextMenuComponent>;
 export declare const ContextMenuPlugin: {
     name: string;

package/src/menu/items.directive.d.ts

@@ -1,9 +1,11 @@
+import { DefineVueDirective } from '@syncfusion/ej2-vue-base';
+import { MenuItemModel } from '@syncfusion/ej2-navigations';
 export declare let MenuItemsDirective: any;
 export declare const MenuItemsPlugin: {
     name: string;
     install(Vue: any): void;
 };
-export declare let MenuItemDirective: any;
+export declare let MenuItemDirective: DefineVueDirective<MenuItemModel>;
 export declare const MenuItemPlugin: {
     name: string;
     install(Vue: any): void;

package/src/menu/menu.component.d.ts

@@ -1,3 +1,5 @@
+import { DefineVueComponent } from '@syncfusion/ej2-vue-base';
+import { MenuModel } from '@syncfusion/ej2-navigations';
 export declare const properties: string[];
 export declare const modelProps: string[];
 export declare const testProp: any;
@@ -8,7 +10,7 @@ export declare const props: any, watch: any, emitProbs: any;
  * <ejs-menu :items='menuItems'></ejs-menu>
  * ```
  */
-export declare let MenuComponent: any;
+export declare let MenuComponent: DefineVueComponent<MenuModel>;
 export declare type MenuComponent = InstanceType<typeof MenuComponent>;
 export declare const MenuPlugin: {
     name: string;

package/src/sidebar/sidebar.component.d.ts

@@ -1,3 +1,5 @@
+import { DefineVueComponent } from '@syncfusion/ej2-vue-base';
+import { SidebarModel } from '@syncfusion/ej2-navigations';
 export declare const properties: string[];
 export declare const modelProps: string[];
 export declare const testProp: any;
@@ -8,7 +10,7 @@ export declare const props: any, watch: any, emitProbs: any;
  * <ejs-sidebar></ejs-sidebar>
  * ```
  */
-export declare let SidebarComponent: any;
+export declare let SidebarComponent: DefineVueComponent<SidebarModel>;
 export declare type SidebarComponent = InstanceType<typeof SidebarComponent>;
 export declare const SidebarPlugin: {
     name: string;

package/src/tab/items.directive.d.ts

@@ -1,3 +1,5 @@
+import { DefineVueDirective } from '@syncfusion/ej2-vue-base';
+import { TabItemModel } from '@syncfusion/ej2-navigations';
 export declare let TabItemsDirective: any;
 export declare const TabItemsPlugin: {
     name: string;
@@ -15,7 +17,7 @@ export declare const TabItemsPlugin: {
  * </ejs-tab>
  * ```
  */
-export declare let TabItemDirective: any;
+export declare let TabItemDirective: DefineVueDirective<TabItemModel>;
 export declare const TabItemPlugin: {
     name: string;
     install(Vue: any): void;

package/src/tab/tab.component.d.ts

@@ -1,3 +1,5 @@
+import { DefineVueComponent } from '@syncfusion/ej2-vue-base';
+import { TabModel } from '@syncfusion/ej2-navigations';
 export declare const properties: string[];
 export declare const modelProps: string[];
 export declare const testProp: any;
@@ -8,7 +10,7 @@ export declare const props: any, watch: any, emitProbs: any;
  * <ejs-tab></ejs-tab>
  * ```
  */
-export declare let TabComponent: any;
+export declare let TabComponent: DefineVueComponent<TabModel>;
 export declare type TabComponent = InstanceType<typeof TabComponent>;
 export declare const TabPlugin: {
     name: string;

package/src/toolbar/items.directive.d.ts

@@ -1,3 +1,5 @@
+import { DefineVueDirective } from '@syncfusion/ej2-vue-base';
+import { ItemModel } from '@syncfusion/ej2-navigations';
 export declare let ItemsDirective: any;
 export declare const ItemsPlugin: {
     name: string;
@@ -15,7 +17,7 @@ export declare const ItemsPlugin: {
  * </ejs-toolbar>
  * ```
  */
-export declare let ItemDirective: any;
+export declare let ItemDirective: DefineVueDirective<ItemModel>;
 export declare const ItemPlugin: {
     name: string;
     install(Vue: any): void;

package/src/toolbar/toolbar.component.d.ts

@@ -1,3 +1,5 @@
+import { DefineVueComponent } from '@syncfusion/ej2-vue-base';
+import { ToolbarModel } from '@syncfusion/ej2-navigations';
 export declare const properties: string[];
 export declare const modelProps: string[];
 export declare const testProp: any;
@@ -8,7 +10,7 @@ export declare const props: any, watch: any, emitProbs: any;
  * <ejs-toolbar></ejs-toolbar>
  * ```
  */
-export declare let ToolbarComponent: any;
+export declare let ToolbarComponent: DefineVueComponent<ToolbarModel>;
 export declare type ToolbarComponent = InstanceType<typeof ToolbarComponent>;
 export declare const ToolbarPlugin: {
     name: string;

package/src/treeview/treeview.component.d.ts

@@ -1,3 +1,5 @@
+import { DefineVueComponent } from '@syncfusion/ej2-vue-base';
+import { TreeViewModel } from '@syncfusion/ej2-navigations';
 export declare const properties: string[];
 export declare const modelProps: string[];
 export declare const testProp: any;
@@ -8,7 +10,7 @@ export declare const props: any, watch: any, emitProbs: any;
  * <ejs-treeview></ejs-treeview>
  * ```
  */
-export declare let TreeViewComponent: any;
+export declare let TreeViewComponent: DefineVueComponent<TreeViewModel>;
 export declare type TreeViewComponent = InstanceType<typeof TreeViewComponent>;
 export declare const TreeViewPlugin: {
     name: string;

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.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/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,2 +1,2 @@
-@import 'ej2-base/styles/material3-dark-definition.scss';
+
 @import 'ej2-navigations/styles/accordion/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,2 +1,2 @@
-@import 'ej2-base/styles/material3-definition.scss';
+
 @import 'ej2-navigations/styles/accordion/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.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/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.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/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,2 +1,2 @@
-@import 'ej2-base/styles/material3-dark-definition.scss';
+
 @import 'ej2-navigations/styles/appbar/material3-dark.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,2 +1,2 @@
-@import 'ej2-base/styles/material3-definition.scss';
+
 @import 'ej2-navigations/styles/appbar/material3.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.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/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;
 }