@syncfusion/ej2-vue-navigations 20.2.50 → 20.3.48

package/src/sidebar/sidebar.component.js

@@ -18,7 +18,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { isUndefined } from '@syncfusion/ej2-base';
-import { ComponentBase, EJComponentDecorator, getProps, gh } from '@syncfusion/ej2-vue-base';
+import { ComponentBase, EJComponentDecorator, getProps, gh, isExecute } from '@syncfusion/ej2-vue-base';
 import { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';
 import { Sidebar } from '@syncfusion/ej2-navigations';
 import { Options } from 'vue-class-component';
@@ -33,7 +33,6 @@ for (var _i = 0, modelProps_1 = modelProps; _i < modelProps_1.length; _i++) {
     var props_1 = modelProps_1[_i];
     emitProbs.push('update:' + props_1);
 }
-export var isExecute = gh ? false : true;
 /**
  *  Represents the Essential JS 2 VueJS Sidebar Component.
  * ```html
@@ -149,10 +148,10 @@ var SidebarComponent = /** @class */ (function (_super) {
         }
     };
     SidebarComponent.prototype.render = function (createElement) {
-        var h = gh || createElement;
+        var h = !isExecute ? gh : createElement;
         var slots = null;
         if (!isNullOrUndefined(this.$slots.default)) {
-            slots = gh ? this.$slots.default() : this.$slots.default;
+            slots = !isExecute ? this.$slots.default() : this.$slots.default;
         }
         return h('div', slots);
     };

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

@@ -1,4 +1,3 @@
-export declare const isExecute: any;
 declare let vueImport: any;
 export declare class TabItemsDirective extends vueImport {
     constructor();

package/src/tab/items.directive.js

@@ -17,12 +17,11 @@ 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 { EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
+import { EJComponentDecorator, allVue, gh, isExecute } from '@syncfusion/ej2-vue-base';
 import * as Vue3 from 'vue-class-component';
 import { isNullOrUndefined } from '@syncfusion/ej2-base';
 import Vue from 'vue';
 import { Options } from 'vue-class-component';
-export var isExecute = gh ? false : true;
 var vueImport;
 if (!isExecute || parseInt(allVue.version) < 3) {
     vueImport = Vue3.Vue;
@@ -36,18 +35,18 @@ var TabItemsDirective = /** @class */ (function (_super) {
         return _super.call(this, arguments) || this;
     }
     TabItemsDirective.prototype.render = function (createElement) {
-        if (gh) {
-            var h = gh || createElement;
+        if (!isExecute) {
+            var h = !isExecute ? gh : createElement;
             var slots = null;
             if (!isNullOrUndefined(this.$slots.default)) {
-                slots = gh ? this.$slots.default() : this.$slots.default;
+                slots = !isExecute ? this.$slots.default() : this.$slots.default;
             }
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
     };
     TabItemsDirective.prototype.updated = function () {
-        if (gh && this.custom) {
+        if (!isExecute && this.custom) {
             this.custom();
         }
     };

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

@@ -5,7 +5,6 @@ export declare const testProp: any;
 export declare const props: any;
 export declare const watch: any;
 export declare const emitProbs: any;
-export declare const isExecute: any;
 /**
  * Represents the VueJS Tab Component.
  * ```html
@@ -36,6 +35,7 @@ export declare class TabComponent extends ComponentBase {
     hideTab(index: number, value?: boolean): void;
     refresh(): void;
     refreshActiveTab(): void;
+    refreshActiveTabBorder(): void;
     removeTab(index: number): void;
     select(args: number | Object, event?: Object): void;
 }

package/src/tab/tab.component.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 { ComponentBase, EJComponentDecorator, getProps, gh } from '@syncfusion/ej2-vue-base';
+import { ComponentBase, EJComponentDecorator, getProps, gh, isExecute } from '@syncfusion/ej2-vue-base';
 import { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';
 import { Tab } from '@syncfusion/ej2-navigations';
 import { TabItemsDirective, TabItemDirective, TabItemsPlugin, TabItemPlugin } from './items.directive';
@@ -33,7 +33,6 @@ for (var _i = 0, modelProps_1 = modelProps; _i < modelProps_1.length; _i++) {
     var props_1 = modelProps_1[_i];
     emitProbs.push('update:' + props_1);
 }
-export var isExecute = gh ? false : true;
 /**
  * Represents the VueJS Tab Component.
  * ```html
@@ -108,10 +107,10 @@ var TabComponent = /** @class */ (function (_super) {
         }
     };
     TabComponent.prototype.render = function (createElement) {
-        var h = gh || createElement;
+        var h = !isExecute ? gh : createElement;
         var slots = null;
         if (!isNullOrUndefined(this.$slots.default)) {
-            slots = gh ? this.$slots.default() : this.$slots.default;
+            slots = !isExecute ? this.$slots.default() : this.$slots.default;
         }
         return h('div', slots);
     };
@@ -139,6 +138,9 @@ var TabComponent = /** @class */ (function (_super) {
     TabComponent.prototype.refreshActiveTab = function () {
         return this.ej2Instances.refreshActiveTab();
     };
+    TabComponent.prototype.refreshActiveTabBorder = function () {
+        return this.ej2Instances.refreshActiveTabBorder();
+    };
     TabComponent.prototype.removeTab = function (index) {
         return this.ej2Instances.removeTab(index);
     };

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

@@ -1,4 +1,3 @@
-export declare const isExecute: any;
 declare let vueImport: any;
 export declare class ItemsDirective extends vueImport {
     constructor();

package/src/toolbar/items.directive.js

@@ -17,12 +17,11 @@ 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 { EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
+import { EJComponentDecorator, allVue, gh, isExecute } from '@syncfusion/ej2-vue-base';
 import * as Vue3 from 'vue-class-component';
 import { isNullOrUndefined } from '@syncfusion/ej2-base';
 import Vue from 'vue';
 import { Options } from 'vue-class-component';
-export var isExecute = gh ? false : true;
 var vueImport;
 if (!isExecute || parseInt(allVue.version) < 3) {
     vueImport = Vue3.Vue;
@@ -36,18 +35,18 @@ var ItemsDirective = /** @class */ (function (_super) {
         return _super.call(this, arguments) || this;
     }
     ItemsDirective.prototype.render = function (createElement) {
-        if (gh) {
-            var h = gh || createElement;
+        if (!isExecute) {
+            var h = !isExecute ? gh : createElement;
             var slots = null;
             if (!isNullOrUndefined(this.$slots.default)) {
-                slots = gh ? this.$slots.default() : this.$slots.default;
+                slots = !isExecute ? this.$slots.default() : this.$slots.default;
             }
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
     };
     ItemsDirective.prototype.updated = function () {
-        if (gh && this.custom) {
+        if (!isExecute && this.custom) {
             this.custom();
         }
     };

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

@@ -5,7 +5,6 @@ export declare const testProp: any;
 export declare const props: any;
 export declare const watch: any;
 export declare const emitProbs: any;
-export declare const isExecute: any;
 /**
  * Represents the VueJS Toolbar Component.
  * ```html

package/src/toolbar/toolbar.component.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 { ComponentBase, EJComponentDecorator, getProps, gh } from '@syncfusion/ej2-vue-base';
+import { ComponentBase, EJComponentDecorator, getProps, gh, isExecute } from '@syncfusion/ej2-vue-base';
 import { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';
 import { Toolbar } from '@syncfusion/ej2-navigations';
 import { ItemsDirective, ItemDirective, ItemsPlugin, ItemPlugin } from './items.directive';
@@ -33,7 +33,6 @@ for (var _i = 0, modelProps_1 = modelProps; _i < modelProps_1.length; _i++) {
     var props_1 = modelProps_1[_i];
     emitProbs.push('update:' + props_1);
 }
-export var isExecute = gh ? false : true;
 /**
  * Represents the VueJS Toolbar Component.
  * ```html
@@ -108,10 +107,10 @@ var ToolbarComponent = /** @class */ (function (_super) {
         }
     };
     ToolbarComponent.prototype.render = function (createElement) {
-        var h = gh || createElement;
+        var h = !isExecute ? gh : createElement;
         var slots = null;
         if (!isNullOrUndefined(this.$slots.default)) {
-            slots = gh ? this.$slots.default() : this.$slots.default;
+            slots = !isExecute ? this.$slots.default() : this.$slots.default;
         }
         return h('div', slots);
     };

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

@@ -5,7 +5,6 @@ export declare const testProp: any;
 export declare const props: any;
 export declare const watch: any;
 export declare const emitProbs: any;
-export declare const isExecute: any;
 /**
  * Represents the EJ2 VueJS TreeView Component.
  * ```html

package/src/treeview/treeview.component.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 { ComponentBase, EJComponentDecorator, getProps, gh } from '@syncfusion/ej2-vue-base';
+import { ComponentBase, EJComponentDecorator, getProps, gh, isExecute } from '@syncfusion/ej2-vue-base';
 import { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';
 import { TreeView } from '@syncfusion/ej2-navigations';
 import { Options } from 'vue-class-component';
@@ -32,7 +32,6 @@ for (var _i = 0, modelProps_1 = modelProps; _i < modelProps_1.length; _i++) {
     var props_1 = modelProps_1[_i];
     emitProbs.push('update:' + props_1);
 }
-export var isExecute = gh ? false : true;
 /**
  * Represents the EJ2 VueJS TreeView Component.
  * ```html
@@ -107,10 +106,10 @@ var TreeViewComponent = /** @class */ (function (_super) {
         }
     };
     TreeViewComponent.prototype.render = function (createElement) {
-        var h = gh || createElement;
+        var h = !isExecute ? gh : createElement;
         var slots = null;
         if (!isNullOrUndefined(this.$slots.default)) {
-            slots = gh ? this.$slots.default() : this.$slots.default;
+            slots = !isExecute ? this.$slots.default() : this.$slots.default;
         }
         return h('div', slots);
     };

package/styles/accordion/bootstrap-dark.css

@@ -259,6 +259,7 @@
 }
 
 /*! accordion theme */
+/* stylelint-disable property-no-vendor-prefix */
 .e-accordion {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: #1a1a1a;

package/styles/accordion/bootstrap.css

@@ -260,6 +260,7 @@
 }
 
 /*! accordion theme */
+/* stylelint-disable property-no-vendor-prefix */
 .e-accordion {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: #fff;

package/styles/accordion/bootstrap4.css

@@ -250,6 +250,7 @@
 }
 
 /*! accordion theme */
+/* stylelint-disable property-no-vendor-prefix */
 .e-accordion {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: #fff;

package/styles/accordion/bootstrap5-dark.css

@@ -1,4 +1,5 @@
 /*! Accordion's bootstrap5 theme wise override definitions and variables */
+/* stylelint-disable */
 /*! accordion icons */
 .e-accordion .e-tgl-collapse-icon::before {
   content: "\e729";
@@ -241,6 +242,7 @@
 }
 
 /*! accordion theme */
+/* stylelint-disable property-no-vendor-prefix */
 .e-accordion {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: #212529;

package/styles/accordion/bootstrap5.css

@@ -1,4 +1,5 @@
 /*! Accordion's bootstrap5 theme wise override definitions and variables */
+/* stylelint-disable */
 /*! accordion icons */
 .e-accordion .e-tgl-collapse-icon::before {
   content: "\e729";
@@ -241,6 +242,7 @@
 }
 
 /*! accordion theme */
+/* stylelint-disable property-no-vendor-prefix */
 .e-accordion {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: #fff;

package/styles/accordion/fabric-dark.css

@@ -232,6 +232,7 @@
 }
 
 /*! accordion theme */
+/* stylelint-disable property-no-vendor-prefix */
 .e-accordion {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: #201f1f;

package/styles/accordion/fabric.css

@@ -233,6 +233,7 @@
 }
 
 /*! accordion theme */
+/* stylelint-disable property-no-vendor-prefix */
 .e-accordion {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: #fff;

package/styles/accordion/fluent-dark.css

@@ -233,6 +233,7 @@
 }
 
 /*! accordion theme */
+/* stylelint-disable property-no-vendor-prefix */
 .e-accordion {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: #1b1a19;

package/styles/accordion/fluent.css

@@ -233,6 +233,7 @@
 }
 
 /*! accordion theme */
+/* stylelint-disable property-no-vendor-prefix */
 .e-accordion {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: #fff;

package/styles/accordion/highcontrast-light.css

@@ -233,6 +233,7 @@
 }
 
 /*! accordion theme */
+/* stylelint-disable property-no-vendor-prefix */
 .e-accordion {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: #ccc;

package/styles/accordion/highcontrast.css

@@ -234,6 +234,7 @@
 }
 
 /*! accordion theme */
+/* stylelint-disable property-no-vendor-prefix */
 .e-accordion {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: #000;

package/styles/accordion/material-dark.css

@@ -239,6 +239,7 @@
 }
 
 /*! accordion theme */
+/* stylelint-disable property-no-vendor-prefix */
 .e-accordion {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: #303030;

package/styles/accordion/material.css

@@ -240,6 +240,7 @@
 }
 
 /*! accordion theme */
+/* stylelint-disable property-no-vendor-prefix */
 .e-accordion {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: #fff;

package/styles/accordion/tailwind-dark.css

@@ -242,6 +242,7 @@
 }
 
 /*! accordion theme */
+/* stylelint-disable property-no-vendor-prefix */
 .e-accordion {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: #232e3e;

package/styles/accordion/tailwind.css

@@ -242,6 +242,7 @@
 }
 
 /*! accordion theme */
+/* stylelint-disable property-no-vendor-prefix */
 .e-accordion {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: #f9fafb;

package/styles/appbar/bootstrap-dark.css

@@ -0,0 +1,244 @@
+/*! AppBar component bootstrap-dark theme definitions and variables */
+/*! appbar component styles */
+.e-bigger .e-appbar,
+.e-appbar.e-bigger {
+  height: 56px;
+  font-size: 16px;
+}
+.e-bigger .e-appbar.e-dense,
+.e-appbar.e-bigger.e-dense {
+  height: 48px;
+}
+.e-bigger .e-appbar.e-prominent,
+.e-appbar.e-bigger.e-prominent {
+  height: 112px;
+}
+
+.e-appbar {
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  height: 48px;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  -ms-flex-direction: row;
+      flex-direction: row;
+  position: relative;
+  -ms-flex-align: center;
+      align-items: center;
+  padding: 8px;
+  overflow: hidden;
+  font-size: 14px;
+}
+.e-appbar > div:first-child {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  width: 100%;
+  height: 100%;
+}
+.e-appbar.e-sticky {
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+}
+.e-appbar.e-prominent {
+  height: 94px;
+  -ms-flex-align: start;
+      align-items: flex-start;
+}
+.e-appbar.e-prominent > div:first-child {
+  -ms-flex-align: start;
+      align-items: flex-start;
+}
+.e-appbar.e-dense {
+  height: 40px;
+}
+.e-appbar.e-horizontal-bottom {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+}
+.e-appbar.e-horizontal-bottom.e-sticky {
+  position: fixed;
+  top: auto;
+}
+.e-appbar .e-appbar-separator {
+  height: 32px;
+}
+.e-appbar .e-appbar-spacer {
+  -ms-flex-positive: 1;
+      flex-grow: 1;
+}
+
+.e-inherit.e-menu-wrapper.e-scrollable .e-menu,
+.e-inherit.e-menu-container.e-scrollable .e-menu {
+  overflow: hidden;
+}
+
+/*! appbar component theme */
+.e-appbar {
+  box-shadow: none;
+}
+.e-appbar.e-light {
+  background: #2a2a2a;
+  color: #f0f0f0;
+  border-color: #2a2a2a;
+  border: none;
+}
+.e-appbar.e-light .e-appbar-separator {
+  border-left: 1px solid #f0f0f0;
+}
+.e-appbar.e-light .e-btn.e-inherit:hover, .e-appbar.e-light .e-btn.e-inherit:focus, .e-appbar.e-light .e-btn.e-inherit:active, .e-appbar.e-light .e-btn.e-inherit.e-active,
+.e-appbar.e-light .e-css.e-btn.e-inherit:hover,
+.e-appbar.e-light .e-css.e-btn.e-inherit:focus,
+.e-appbar.e-light .e-css.e-btn.e-inherit:active,
+.e-appbar.e-light .e-css.e-btn.e-inherit.e-active,
+.e-appbar.e-light .e-dropdown-btn.e-inherit:hover,
+.e-appbar.e-light .e-dropdown-btn.e-inherit:focus,
+.e-appbar.e-light .e-dropdown-btn.e-inherit:active,
+.e-appbar.e-light .e-dropdown-btn.e-inherit.e-active,
+.e-appbar.e-light .e-dropdown-btn.e-btn.e-inherit:hover,
+.e-appbar.e-light .e-dropdown-btn.e-btn.e-inherit:focus,
+.e-appbar.e-light .e-dropdown-btn.e-btn.e-inherit:active,
+.e-appbar.e-light .e-dropdown-btn.e-btn.e-inherit.e-active {
+  background: rgba(255, 255, 255, 0.08);
+}
+.e-appbar.e-light .e-menu-wrapper.e-inherit,
+.e-appbar.e-light .e-menu-container.e-inherit {
+  background: #2a2a2a;
+  color: #f0f0f0;
+  border-color: #2a2a2a;
+  box-shadow: none;
+}
+.e-appbar.e-light .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-appbar.e-light .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
+.e-appbar.e-light .e-menu-container.e-inherit .e-menu .e-menu-item.e-selected,
+.e-appbar.e-light .e-menu-container.e-inherit .e-menu .e-menu-item.e-focused {
+  background: rgba(255, 255, 255, 0.08);
+}
+.e-appbar.e-dark {
+  background: #a4a4a4;
+  color: #131313;
+  border-color: #a4a4a4;
+}
+.e-appbar.e-dark .e-appbar-separator {
+  border-left: 1px solid #131313;
+}
+.e-appbar.e-dark .e-btn.e-inherit:hover, .e-appbar.e-dark .e-btn.e-inherit:focus, .e-appbar.e-dark .e-btn.e-inherit:active, .e-appbar.e-dark .e-btn.e-inherit.e-active,
+.e-appbar.e-dark .e-css.e-btn.e-inherit:hover,
+.e-appbar.e-dark .e-css.e-btn.e-inherit:focus,
+.e-appbar.e-dark .e-css.e-btn.e-inherit:active,
+.e-appbar.e-dark .e-css.e-btn.e-inherit.e-active,
+.e-appbar.e-dark .e-dropdown-btn.e-inherit:hover,
+.e-appbar.e-dark .e-dropdown-btn.e-inherit:focus,
+.e-appbar.e-dark .e-dropdown-btn.e-inherit:active,
+.e-appbar.e-dark .e-dropdown-btn.e-inherit.e-active,
+.e-appbar.e-dark .e-dropdown-btn.e-btn.e-inherit:hover,
+.e-appbar.e-dark .e-dropdown-btn.e-btn.e-inherit:focus,
+.e-appbar.e-dark .e-dropdown-btn.e-btn.e-inherit:active,
+.e-appbar.e-dark .e-dropdown-btn.e-btn.e-inherit.e-active {
+  background: rgba(0, 0, 0, 0.056);
+}
+.e-appbar.e-dark .e-menu-wrapper.e-inherit,
+.e-appbar.e-dark .e-menu-container.e-inherit {
+  background: #a4a4a4;
+  color: #131313;
+  border-color: #a4a4a4;
+  box-shadow: none;
+}
+.e-appbar.e-dark .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-appbar.e-dark .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
+.e-appbar.e-dark .e-menu-container.e-inherit .e-menu .e-menu-item.e-selected,
+.e-appbar.e-dark .e-menu-container.e-inherit .e-menu .e-menu-item.e-focused {
+  background: rgba(0, 0, 0, 0.056);
+}
+.e-appbar.e-primary {
+  background: #0070f0;
+  color: #fff;
+  border-color: #0070f0;
+}
+.e-appbar.e-primary .e-appbar-separator {
+  border-left: 1px solid #fff;
+}
+.e-appbar.e-primary .e-menu-wrapper.e-inherit,
+.e-appbar.e-primary .e-menu-container.e-inherit {
+  background: #0070f0;
+  color: #fff;
+  border-color: #0070f0;
+  box-shadow: none;
+}
+.e-appbar.e-inherit {
+  background: inherit;
+  color: inherit;
+  border-color: inherit;
+  border: 1px solid;
+}
+.e-appbar.e-inherit .e-appbar-separator {
+  border-left: 1px solid;
+}
+.e-appbar.e-inherit .e-menu-wrapper.e-inherit,
+.e-appbar.e-inherit .e-menu-container.e-inherit {
+  background: inherit;
+  color: inherit;
+  border-color: inherit;
+  box-shadow: none;
+}
+.e-appbar.e-horizontal-bottom {
+  box-shadow: none;
+}
+
+.e-light.e-inherit.e-input-group, .e-light.e-inherit.e-input-group.e-control-wrapper, .e-light.e-inherit.e-float-input, .e-light.e-inherit.e-float-input.e-input-group, .e-light.e-inherit.e-float-input.e-control-wrapper, .e-light.e-inherit.e-float-input.e-input-group.e-control-wrapper, .e-light.e-inherit.e-input-group:not(.e-disabled) .e-input-group-icon:hover, .e-light.e-inherit.e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
+  background: #2a2a2a;
+  color: #f0f0f0;
+}
+
+.e-dark.e-inherit.e-input-group, .e-dark.e-inherit.e-input-group.e-control-wrapper, .e-dark.e-inherit.e-float-input, .e-dark.e-inherit.e-float-input.e-input-group, .e-dark.e-inherit.e-float-input.e-control-wrapper, .e-dark.e-inherit.e-float-input.e-input-group.e-control-wrapper, .e-dark.e-inherit.e-input-group:not(.e-disabled) .e-input-group-icon:hover, .e-dark.e-inherit.e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
+  background: #a4a4a4;
+  color: #131313;
+}
+
+.e-primary.e-inherit.e-input-group, .e-primary.e-inherit.e-input-group.e-control-wrapper, .e-primary.e-inherit.e-float-input, .e-primary.e-inherit.e-float-input.e-input-group, .e-primary.e-inherit.e-float-input.e-control-wrapper, .e-primary.e-inherit.e-float-input.e-input-group.e-control-wrapper, .e-primary.e-inherit.e-input-group:not(.e-disabled) .e-input-group-icon:hover, .e-primary.e-inherit.e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
+  background: #0070f0;
+  color: #fff;
+}
+
+.e-inherit.e-input-group,
+.e-inherit.e-input-group.e-control-wrapper,
+.e-inherit.e-float-input,
+.e-inherit.e-float-input.e-input-group,
+.e-inherit.e-float-input.e-control-wrapper,
+.e-inherit.e-float-input.e-input-group.e-control-wrapper,
+.e-inherit.e-input-group:not(.e-disabled) .e-input-group-icon:hover,
+.e-inherit.e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
+  color: inherit;
+  background: rgba(0, 0, 0, 0.056);
+}
+
+.e-inherit.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
+.e-inherit.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
+.e-inherit.e-input-group:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error),
+.e-inherit.e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error) {
+  box-shadow: none;
+}
+
+.e-inherit.e-input-group.e-control-wrapper .e-searchinput:-ms-input-placeholder {
+  color: inherit;
+  opacity: 0.8;
+}
+
+.e-inherit.e-input-group.e-control-wrapper .e-searchinput::placeholder {
+  color: inherit;
+  opacity: 0.8;
+}
+
+.e-inherit.e-input-group .e-input-group-icon,
+.e-inherit.e-input-group.e-control-wrapper .e-input-group-icon {
+  border: none;
+  color: inherit;
+}
+
+.e-inherit.e-input-group .e-clear-icon,
+.e-inherit.e-input-group.e-control-wrapper .e-clear-icon {
+  color: inherit;
+}

package/styles/appbar/bootstrap-dark.scss

@@ -0,0 +1 @@
+@import 'ej2-navigations/styles/appbar/bootstrap-dark.scss';