@syncfusion/ej2-vue-navigations 20.2.50 → 20.3.48

package/dist/es6/ej2-vue-navigations.es5.js

@@ -1,5 +1,5 @@
-import { Accordion, Breadcrumb, Carousel, ContextMenu, Menu, Sidebar, Tab, Toolbar, TreeView } from '@syncfusion/ej2-navigations';
-import { ComponentBase, EJComponentDecorator, allVue, getProps, gh } from '@syncfusion/ej2-vue-base';
+import { Accordion, AppBar, Breadcrumb, Carousel, ContextMenu, Menu, Sidebar, Tab, Toolbar, TreeView } from '@syncfusion/ej2-navigations';
+import { ComponentBase, EJComponentDecorator, allVue, getProps, gh, isExecute } from '@syncfusion/ej2-vue-base';
 import { Vue } from 'vue-class-component';
 import { getValue, isNullOrUndefined, isUndefined } from '@syncfusion/ej2-base';
 import Vue$1 from 'vue';
@@ -24,7 +24,6 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Options } from 'vue-class-component';
-var isExecute = gh ? false : true;
 var vueImport;
 if (!isExecute || parseInt(allVue.version) < 3) {
     vueImport = Vue;
@@ -38,18 +37,18 @@ var AccordionItemsDirective = /** @__PURE__ @class */ (function (_super) {
         return _super.call(this, arguments) || this;
     }
     AccordionItemsDirective.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;
     };
     AccordionItemsDirective.prototype.updated = function () {
-        if (gh && this.custom) {
+        if (!isExecute && this.custom) {
             this.custom();
         }
     };
@@ -140,7 +139,6 @@ for (var _i = 0, modelProps_1 = modelProps; _i < modelProps_1.length; _i++) {
     var props_1 = modelProps_1[_i];
     emitProbs.push('update:' + props_1);
 }
-var isExecute$1 = gh ? false : true;
 /**
  * Represents the VueJS Accordion Component.
  * ```html
@@ -157,7 +155,7 @@ var AccordionComponent = /** @__PURE__ @class */ (function (_super) {
         _this.hasInjectedModules = false;
         _this.tagMapper = { "e-accordionitems": "e-accordionitem" };
         _this.tagNameMapper = { "e-accordionitems": "e-items" };
-        _this.isVue3 = !isExecute$1;
+        _this.isVue3 = !isExecute;
         _this.ej2Instances = new Accordion({});
         _this.ej2Instances._trigger = _this.ej2Instances.trigger;
         _this.ej2Instances.trigger = _this.trigger;
@@ -217,14 +215,14 @@ var AccordionComponent = /** @__PURE__ @class */ (function (_super) {
         }
     };
     AccordionComponent.prototype.trigger = function (eventName, eventProp, successHandler) {
-        if (!isExecute$1) {
+        if (!isExecute) {
             this.models = !this.models ? this.ej2Instances.referModels : this.models;
         }
         if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
             var key = this.models.toString().match(/checked|value/) || [];
             var propKey = key[0];
             if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute$1) {
+                if (!isExecute) {
                     this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
                     this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
                     this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
@@ -241,7 +239,7 @@ var AccordionComponent = /** @__PURE__ @class */ (function (_super) {
             var key = this.models.toString().match(/currentView|selectedDate/) || [];
             var propKey = key[0];
             if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute$1) {
+                if (!isExecute) {
                     this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
                     this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
                 }
@@ -256,10 +254,10 @@ var AccordionComponent = /** @__PURE__ @class */ (function (_super) {
         }
     };
     AccordionComponent.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);
     };
@@ -290,7 +288,7 @@ var AccordionComponent = /** @__PURE__ @class */ (function (_super) {
             model: {
                 event: 'modelchanged'
             }
-        }, isExecute$1)
+        }, isExecute)
         ,Options({
             props: props,
             watch: watch,
@@ -333,9 +331,8 @@ var __decorate$2 = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 // {{VueImport}}
-var isExecute$2 = gh ? false : true;
 var vueImport$1;
-if (!isExecute$2 || parseInt(allVue.version) < 3) {
+if (!isExecute || parseInt(allVue.version) < 3) {
     vueImport$1 = Vue;
 }
 else {
@@ -347,18 +344,18 @@ var ItemsDirective = /** @__PURE__ @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();
         }
     };
@@ -366,7 +363,7 @@ var ItemsDirective = /** @__PURE__ @class */ (function (_super) {
         return 'e-items';
     };
     ItemsDirective = __decorate$2([
-        EJComponentDecorator({}, isExecute$2)
+        EJComponentDecorator({}, isExecute)
         ,Options({
             inject: {
                 custom: {
@@ -407,7 +404,7 @@ var ItemDirective = /** @__PURE__ @class */ (function (_super) {
         return 'e-item';
     };
     ItemDirective = __decorate$2([
-        EJComponentDecorator({}, isExecute$2)
+        EJComponentDecorator({}, isExecute)
     ], ItemDirective);
     return ItemDirective;
 }(vueImport$1));
@@ -449,7 +446,6 @@ for (var _i$1 = 0, modelProps_1$1 = modelProps$1; _i$1 < modelProps_1$1.length;
     var props_1$1 = modelProps_1$1[_i$1];
     emitProbs$1.push('update:' + props_1$1);
 }
-var isExecute$3 = gh ? false : true;
 /**
  * Represents the VueJS Toolbar Component.
  * ```html
@@ -466,7 +462,7 @@ var ToolbarComponent = /** @__PURE__ @class */ (function (_super) {
         _this.hasInjectedModules = false;
         _this.tagMapper = { "e-items": "e-item" };
         _this.tagNameMapper = {};
-        _this.isVue3 = !isExecute$3;
+        _this.isVue3 = !isExecute;
         _this.ej2Instances = new Toolbar({});
         _this.bindProperties();
         _this.ej2Instances._setProperties = _this.ej2Instances.setProperties;
@@ -524,10 +520,10 @@ var ToolbarComponent = /** @__PURE__ @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);
     };
@@ -555,7 +551,7 @@ var ToolbarComponent = /** @__PURE__ @class */ (function (_super) {
     ToolbarComponent = __decorate$3([
         EJComponentDecorator({
             props: properties$1
-        }, isExecute$3)
+        }, isExecute)
         ,Options({
             props: props,
             watch: watch,
@@ -609,7 +605,6 @@ for (var _i$2 = 0, modelProps_1$2 = modelProps$2; _i$2 < modelProps_1$2.length;
     var props_1$2 = modelProps_1$2[_i$2];
     emitProbs$2.push('update:' + props_1$2);
 }
-var isExecute$4 = gh ? false : true;
 /**
  * Represents the Essential JS 2 VueJS ContextMenu Component.
  * ```html
@@ -627,7 +622,7 @@ var ContextMenuComponent = /** @__PURE__ @class */ (function (_super) {
         _this.hasInjectedModules = false;
         _this.tagMapper = {};
         _this.tagNameMapper = {};
-        _this.isVue3 = !isExecute$4;
+        _this.isVue3 = !isExecute;
         _this.ej2Instances = new ContextMenu({});
         _this.bindProperties();
         _this.ej2Instances._setProperties = _this.ej2Instances.setProperties;
@@ -685,10 +680,10 @@ var ContextMenuComponent = /** @__PURE__ @class */ (function (_super) {
         }
     };
     ContextMenuComponent.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('ul', slots);
     };
@@ -728,7 +723,7 @@ var ContextMenuComponent = /** @__PURE__ @class */ (function (_super) {
     ContextMenuComponent = __decorate$4([
         EJComponentDecorator({
             props: properties$2
-        }, isExecute$4)
+        }, isExecute)
         ,Options({
             props: props,
             watch: watch,
@@ -769,9 +764,8 @@ var __decorate$5 = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 // {{VueImport}}
-var isExecute$5 = gh ? false : true;
 var vueImport$2;
-if (!isExecute$5 || parseInt(allVue.version) < 3) {
+if (!isExecute || parseInt(allVue.version) < 3) {
     vueImport$2 = Vue;
 }
 else {
@@ -783,18 +777,18 @@ var BreadcrumbItemsDirective = /** @__PURE__ @class */ (function (_super) {
         return _super.call(this, arguments) || this;
     }
     BreadcrumbItemsDirective.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;
     };
     BreadcrumbItemsDirective.prototype.updated = function () {
-        if (gh && this.custom) {
+        if (!isExecute && this.custom) {
             this.custom();
         }
     };
@@ -802,7 +796,7 @@ var BreadcrumbItemsDirective = /** @__PURE__ @class */ (function (_super) {
         return 'e-breadcrumb-items';
     };
     BreadcrumbItemsDirective = __decorate$5([
-        EJComponentDecorator({}, isExecute$5)
+        EJComponentDecorator({}, isExecute)
         ,Options({
             inject: {
                 custom: {
@@ -843,7 +837,7 @@ var BreadcrumbItemDirective = /** @__PURE__ @class */ (function (_super) {
         return 'e-breadcrumb-item';
     };
     BreadcrumbItemDirective = __decorate$5([
-        EJComponentDecorator({}, isExecute$5)
+        EJComponentDecorator({}, isExecute)
     ], BreadcrumbItemDirective);
     return BreadcrumbItemDirective;
 }(vueImport$2));
@@ -885,7 +879,6 @@ for (var _i$3 = 0, modelProps_1$3 = modelProps$3; _i$3 < modelProps_1$3.length;
     var props_1$3 = modelProps_1$3[_i$3];
     emitProbs$3.push('update:' + props_1$3);
 }
-var isExecute$6 = gh ? false : true;
 /**
  * Represents the VueJS Breadcrumb Component.
  * ```html
@@ -902,7 +895,7 @@ var BreadcrumbComponent = /** @__PURE__ @class */ (function (_super) {
         _this.hasInjectedModules = false;
         _this.tagMapper = { "e-breadcrumb-items": "e-breadcrumb-item" };
         _this.tagNameMapper = { "e-breadcrumb-items": "e-items" };
-        _this.isVue3 = !isExecute$6;
+        _this.isVue3 = !isExecute;
         _this.ej2Instances = new Breadcrumb({});
         _this.ej2Instances._trigger = _this.ej2Instances.trigger;
         _this.ej2Instances.trigger = _this.trigger;
@@ -962,14 +955,14 @@ var BreadcrumbComponent = /** @__PURE__ @class */ (function (_super) {
         }
     };
     BreadcrumbComponent.prototype.trigger = function (eventName, eventProp, successHandler) {
-        if (!isExecute$6) {
+        if (!isExecute) {
             this.models = !this.models ? this.ej2Instances.referModels : this.models;
         }
         if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
             var key = this.models.toString().match(/checked|value/) || [];
             var propKey = key[0];
             if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute$6) {
+                if (!isExecute) {
                     this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
                     this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
                     this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
@@ -986,7 +979,7 @@ var BreadcrumbComponent = /** @__PURE__ @class */ (function (_super) {
             var key = this.models.toString().match(/currentView|selectedDate/) || [];
             var propKey = key[0];
             if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute$6) {
+                if (!isExecute) {
                     this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
                     this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
                 }
@@ -1001,10 +994,10 @@ var BreadcrumbComponent = /** @__PURE__ @class */ (function (_super) {
         }
     };
     BreadcrumbComponent.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('nav', slots);
     };
@@ -1017,7 +1010,7 @@ var BreadcrumbComponent = /** @__PURE__ @class */ (function (_super) {
             model: {
                 event: 'modelchanged'
             }
-        }, isExecute$6)
+        }, isExecute)
         ,Options({
             props: props,
             watch: watch,
@@ -1060,9 +1053,8 @@ var __decorate$7 = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 // {{VueImport}}
-var isExecute$7 = gh ? false : true;
 var vueImport$3;
-if (!isExecute$7 || parseInt(allVue.version) < 3) {
+if (!isExecute || parseInt(allVue.version) < 3) {
     vueImport$3 = Vue;
 }
 else {
@@ -1074,18 +1066,18 @@ var CarouselItemsDirective = /** @__PURE__ @class */ (function (_super) {
         return _super.call(this, arguments) || this;
     }
     CarouselItemsDirective.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;
     };
     CarouselItemsDirective.prototype.updated = function () {
-        if (gh && this.custom) {
+        if (!isExecute && this.custom) {
             this.custom();
         }
     };
@@ -1093,7 +1085,7 @@ var CarouselItemsDirective = /** @__PURE__ @class */ (function (_super) {
         return 'e-carousel-items';
     };
     CarouselItemsDirective = __decorate$7([
-        EJComponentDecorator({}, isExecute$7)
+        EJComponentDecorator({}, isExecute)
         ,Options({
             inject: {
                 custom: {
@@ -1134,7 +1126,7 @@ var CarouselItemDirective = /** @__PURE__ @class */ (function (_super) {
         return 'e-carousel-item';
     };
     CarouselItemDirective = __decorate$7([
-        EJComponentDecorator({}, isExecute$7)
+        EJComponentDecorator({}, isExecute)
     ], CarouselItemDirective);
     return CarouselItemDirective;
 }(vueImport$3));
@@ -1165,7 +1157,7 @@ var __decorate$8 = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 // {{VueImport}}
-var properties$4 = ['isLazyUpdate', 'plugins', 'animationEffect', 'autoPlay', 'buttonsVisibility', 'cssClass', 'dataSource', 'enablePersistence', 'enableRtl', 'enableTouchSwipe', 'height', 'htmlAttributes', 'indicatorsTemplate', 'interval', 'itemTemplate', 'items', 'locale', 'loop', 'nextButtonTemplate', 'pauseOnHover', 'playButtonTemplate', 'previousButtonTemplate', 'selectedIndex', 'showIndicators', 'showPlayButton', 'width', 'slideChanged', 'slideChanging'];
+var properties$4 = ['isLazyUpdate', 'plugins', 'animationEffect', 'autoPlay', 'buttonsVisibility', 'cssClass', 'dataSource', 'enablePersistence', 'enableRtl', 'enableTouchSwipe', 'height', 'htmlAttributes', 'indicatorsTemplate', 'interval', 'itemTemplate', 'items', 'locale', 'loop', 'nextButtonTemplate', 'partialVisible', 'pauseOnHover', 'playButtonTemplate', 'previousButtonTemplate', 'selectedIndex', 'showIndicators', 'showPlayButton', 'width', 'slideChanged', 'slideChanging'];
 var modelProps$4 = ['selectedIndex'];
 var testProp$4 = getProps({ props: properties$4 });
 var props$4 = testProp$4[0];
@@ -1176,7 +1168,6 @@ for (var _i$4 = 0, modelProps_1$4 = modelProps$4; _i$4 < modelProps_1$4.length;
     var props_1$4 = modelProps_1$4[_i$4];
     emitProbs$4.push('update:' + props_1$4);
 }
-var isExecute$8 = gh ? false : true;
 /**
  * Represents the VueJS Carousel Component.
  * ```html
@@ -1193,7 +1184,7 @@ var CarouselComponent = /** @__PURE__ @class */ (function (_super) {
         _this.hasInjectedModules = false;
         _this.tagMapper = { "e-carousel-items": "e-carousel-item" };
         _this.tagNameMapper = { "e-carousel-items": "e-items" };
-        _this.isVue3 = !isExecute$8;
+        _this.isVue3 = !isExecute;
         _this.ej2Instances = new Carousel({});
         _this.ej2Instances._trigger = _this.ej2Instances.trigger;
         _this.ej2Instances.trigger = _this.trigger;
@@ -1253,14 +1244,14 @@ var CarouselComponent = /** @__PURE__ @class */ (function (_super) {
         }
     };
     CarouselComponent.prototype.trigger = function (eventName, eventProp, successHandler) {
-        if (!isExecute$8) {
+        if (!isExecute) {
             this.models = !this.models ? this.ej2Instances.referModels : this.models;
         }
         if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
             var key = this.models.toString().match(/checked|value/) || [];
             var propKey = key[0];
             if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute$8) {
+                if (!isExecute) {
                     this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
                     this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
                     this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
@@ -1277,7 +1268,7 @@ var CarouselComponent = /** @__PURE__ @class */ (function (_super) {
             var key = this.models.toString().match(/currentView|selectedDate/) || [];
             var propKey = key[0];
             if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute$8) {
+                if (!isExecute) {
                     this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
                     this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
                 }
@@ -1292,10 +1283,10 @@ var CarouselComponent = /** @__PURE__ @class */ (function (_super) {
         }
     };
     CarouselComponent.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);
     };
@@ -1320,7 +1311,7 @@ var CarouselComponent = /** @__PURE__ @class */ (function (_super) {
             model: {
                 event: 'modelchanged'
             }
-        }, isExecute$8)
+        }, isExecute)
         ,Options({
             props: props,
             watch: watch,
@@ -1363,9 +1354,8 @@ var __decorate$9 = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 // {{VueImport}}
-var isExecute$9 = gh ? false : true;
 var vueImport$4;
-if (!isExecute$9 || parseInt(allVue.version) < 3) {
+if (!isExecute || parseInt(allVue.version) < 3) {
     vueImport$4 = Vue;
 }
 else {
@@ -1377,18 +1367,18 @@ var TabItemsDirective = /** @__PURE__ @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();
         }
     };
@@ -1396,7 +1386,7 @@ var TabItemsDirective = /** @__PURE__ @class */ (function (_super) {
         return 'e-tabitems';
     };
     TabItemsDirective = __decorate$9([
-        EJComponentDecorator({}, isExecute$9)
+        EJComponentDecorator({}, isExecute)
         ,Options({
             inject: {
                 custom: {
@@ -1437,7 +1427,7 @@ var TabItemDirective = /** @__PURE__ @class */ (function (_super) {
         return 'e-tabitem';
     };
     TabItemDirective = __decorate$9([
-        EJComponentDecorator({}, isExecute$9)
+        EJComponentDecorator({}, isExecute)
     ], TabItemDirective);
     return TabItemDirective;
 }(vueImport$4));
@@ -1479,7 +1469,6 @@ for (var _i$5 = 0, modelProps_1$5 = modelProps$5; _i$5 < modelProps_1$5.length;
     var props_1$5 = modelProps_1$5[_i$5];
     emitProbs$5.push('update:' + props_1$5);
 }
-var isExecute$10 = gh ? false : true;
 /**
  * Represents the VueJS Tab Component.
  * ```html
@@ -1496,7 +1485,7 @@ var TabComponent = /** @__PURE__ @class */ (function (_super) {
         _this.hasInjectedModules = false;
         _this.tagMapper = { "e-tabitems": "e-tabitem" };
         _this.tagNameMapper = { "e-tabitems": "e-items" };
-        _this.isVue3 = !isExecute$10;
+        _this.isVue3 = !isExecute;
         _this.ej2Instances = new Tab({});
         _this.bindProperties();
         _this.ej2Instances._setProperties = _this.ej2Instances.setProperties;
@@ -1554,10 +1543,10 @@ var TabComponent = /** @__PURE__ @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);
     };
@@ -1585,6 +1574,9 @@ var TabComponent = /** @__PURE__ @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);
     };
@@ -1594,7 +1586,7 @@ var TabComponent = /** @__PURE__ @class */ (function (_super) {
     TabComponent = __decorate$10([
         EJComponentDecorator({
             props: properties$5
-        }, isExecute$10)
+        }, isExecute)
         ,Options({
             props: props,
             watch: watch,
@@ -1648,7 +1640,6 @@ for (var _i$6 = 0, modelProps_1$6 = modelProps$6; _i$6 < modelProps_1$6.length;
     var props_1$6 = modelProps_1$6[_i$6];
     emitProbs$6.push('update:' + props_1$6);
 }
-var isExecute$11 = gh ? false : true;
 /**
  * Represents the EJ2 VueJS TreeView Component.
  * ```html
@@ -1665,7 +1656,7 @@ var TreeViewComponent = /** @__PURE__ @class */ (function (_super) {
         _this.hasInjectedModules = false;
         _this.tagMapper = {};
         _this.tagNameMapper = {};
-        _this.isVue3 = !isExecute$11;
+        _this.isVue3 = !isExecute;
         _this.ej2Instances = new TreeView({});
         _this.bindProperties();
         _this.ej2Instances._setProperties = _this.ej2Instances.setProperties;
@@ -1723,10 +1714,10 @@ var TreeViewComponent = /** @__PURE__ @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);
     };
@@ -1787,7 +1778,7 @@ var TreeViewComponent = /** @__PURE__ @class */ (function (_super) {
     TreeViewComponent = __decorate$11([
         EJComponentDecorator({
             props: properties$6
-        }, isExecute$11)
+        }, isExecute)
         ,Options({
             props: props,
             watch: watch,
@@ -1839,7 +1830,6 @@ for (var _i$7 = 0, modelProps_1$7 = modelProps$7; _i$7 < modelProps_1$7.length;
     var props_1$7 = modelProps_1$7[_i$7];
     emitProbs$7.push('update:' + props_1$7);
 }
-var isExecute$12 = gh ? false : true;
 /**
  *  Represents the Essential JS 2 VueJS Sidebar Component.
  * ```html
@@ -1856,7 +1846,7 @@ var SidebarComponent = /** @__PURE__ @class */ (function (_super) {
         _this.hasInjectedModules = false;
         _this.tagMapper = {};
         _this.tagNameMapper = {};
-        _this.isVue3 = !isExecute$12;
+        _this.isVue3 = !isExecute;
         _this.ej2Instances = new Sidebar({});
         _this.ej2Instances._trigger = _this.ej2Instances.trigger;
         _this.ej2Instances.trigger = _this.trigger;
@@ -1916,14 +1906,14 @@ var SidebarComponent = /** @__PURE__ @class */ (function (_super) {
         }
     };
     SidebarComponent.prototype.trigger = function (eventName, eventProp, successHandler) {
-        if (!isExecute$12) {
+        if (!isExecute) {
             this.models = !this.models ? this.ej2Instances.referModels : this.models;
         }
         if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
             var key = this.models.toString().match(/checked|value/) || [];
             var propKey = key[0];
             if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute$12) {
+                if (!isExecute) {
                     this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
                     this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
                     this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
@@ -1940,7 +1930,7 @@ var SidebarComponent = /** @__PURE__ @class */ (function (_super) {
             var key = this.models.toString().match(/currentView|selectedDate/) || [];
             var propKey = key[0];
             if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute$12) {
+                if (!isExecute) {
                     this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
                     this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
                 }
@@ -1955,10 +1945,10 @@ var SidebarComponent = /** @__PURE__ @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);
     };
@@ -1980,7 +1970,7 @@ var SidebarComponent = /** @__PURE__ @class */ (function (_super) {
             model: {
                 event: 'modelchanged'
             }
-        }, isExecute$12)
+        }, isExecute)
         ,Options({
             props: props,
             watch: watch,
@@ -2021,9 +2011,8 @@ var __decorate$13 = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 // {{VueImport}}
-var isExecute$13 = gh ? false : true;
 var vueImport$5;
-if (!isExecute$13 || parseInt(allVue.version) < 3) {
+if (!isExecute || parseInt(allVue.version) < 3) {
     vueImport$5 = Vue;
 }
 else {
@@ -2035,18 +2024,18 @@ var MenuItemsDirective = /** @__PURE__ @class */ (function (_super) {
         return _super.call(this, arguments) || this;
     }
     MenuItemsDirective.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;
     };
     MenuItemsDirective.prototype.updated = function () {
-        if (gh && this.custom) {
+        if (!isExecute && this.custom) {
             this.custom();
         }
     };
@@ -2054,7 +2043,7 @@ var MenuItemsDirective = /** @__PURE__ @class */ (function (_super) {
         return 'e-menu-items';
     };
     MenuItemsDirective = __decorate$13([
-        EJComponentDecorator({}, isExecute$13)
+        EJComponentDecorator({}, isExecute)
         ,Options({
             inject: {
                 custom: {
@@ -2083,7 +2072,7 @@ var MenuItemDirective = /** @__PURE__ @class */ (function (_super) {
         return 'e-';
     };
     MenuItemDirective = __decorate$13([
-        EJComponentDecorator({}, isExecute$13)
+        EJComponentDecorator({}, isExecute)
     ], MenuItemDirective);
     return MenuItemDirective;
 }(vueImport$5));
@@ -2125,7 +2114,6 @@ for (var _i$8 = 0, modelProps_1$8 = modelProps$8; _i$8 < modelProps_1$8.length;
     var props_1$8 = modelProps_1$8[_i$8];
     emitProbs$8.push('update:' + props_1$8);
 }
-var isExecute$14 = gh ? false : true;
 /**
  * Represents the Essential JS 2 VueJS Menu Component.
  * ```html
@@ -2142,7 +2130,7 @@ var MenuComponent = /** @__PURE__ @class */ (function (_super) {
         _this.hasInjectedModules = false;
         _this.tagMapper = { "e-menu-items": "e-" };
         _this.tagNameMapper = { "e-menu-items": "e-items" };
-        _this.isVue3 = !isExecute$14;
+        _this.isVue3 = !isExecute;
         _this.ej2Instances = new Menu({});
         _this.bindProperties();
         _this.ej2Instances._setProperties = _this.ej2Instances.setProperties;
@@ -2200,10 +2188,10 @@ var MenuComponent = /** @__PURE__ @class */ (function (_super) {
         }
     };
     MenuComponent.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('ul', slots);
     };
@@ -2243,7 +2231,7 @@ var MenuComponent = /** @__PURE__ @class */ (function (_super) {
     MenuComponent = __decorate$14([
         EJComponentDecorator({
             props: properties$8
-        }, isExecute$14)
+        }, isExecute)
         ,Options({
             props: props,
             watch: watch,
@@ -2266,6 +2254,145 @@ var MenuPlugin = {
     }
 };
 
-export { AccordionItemsDirective, AccordionItemDirective, AccordionItemsPlugin, AccordionItemPlugin, AccordionComponent, AccordionPlugin, ItemsDirective, ItemDirective, ItemsPlugin, ItemPlugin, ToolbarComponent, ToolbarPlugin, ContextMenuComponent, ContextMenuPlugin, BreadcrumbItemsDirective, BreadcrumbItemDirective, BreadcrumbItemsPlugin, BreadcrumbItemPlugin, BreadcrumbComponent, BreadcrumbPlugin, CarouselItemsDirective, CarouselItemDirective, CarouselItemsPlugin, CarouselItemPlugin, CarouselComponent, CarouselPlugin, TabItemsDirective, TabItemDirective, TabItemsPlugin, TabItemPlugin, TabComponent, TabPlugin, TreeViewComponent, TreeViewPlugin, SidebarComponent, SidebarPlugin, MenuItemsDirective, MenuItemDirective, MenuItemsPlugin, MenuItemPlugin, MenuComponent, MenuPlugin };
+var __extends$15 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$15 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
+// {{VueImport}}
+var properties$9 = ['isLazyUpdate', 'plugins', 'colorMode', 'cssClass', 'enablePersistence', 'enableRtl', 'htmlAttributes', 'isSticky', 'locale', 'mode', 'position', 'created', 'destroyed'];
+var modelProps$9 = [];
+var testProp$9 = getProps({ props: properties$9 });
+var props$9 = testProp$9[0];
+var watch$9 = testProp$9[1];
+var emitProbs$9 = Object.keys(watch$9);
+emitProbs$9.push('modelchanged', 'update:modelValue');
+for (var _i$9 = 0, modelProps_1$9 = modelProps$9; _i$9 < modelProps_1$9.length; _i$9++) {
+    var props_1$9 = modelProps_1$9[_i$9];
+    emitProbs$9.push('update:' + props_1$9);
+}
+/**
+ *  Represents the Essential JS 2 VueJS AppBar Component.
+ * ```html
+ * <ejs-appbar></ejs-appbar>
+ * ```
+ */
+var AppBarComponent = /** @__PURE__ @class */ (function (_super) {
+    __extends$15(AppBarComponent, _super);
+    function AppBarComponent() {
+        var _this = _super.call(this, arguments) || this;
+        _this.propKeys = properties$9;
+        _this.models = modelProps$9;
+        _this.hasChildDirective = false;
+        _this.hasInjectedModules = false;
+        _this.tagMapper = {};
+        _this.tagNameMapper = {};
+        _this.isVue3 = !isExecute;
+        _this.ej2Instances = new AppBar({});
+        _this.bindProperties();
+        _this.ej2Instances._setProperties = _this.ej2Instances.setProperties;
+        _this.ej2Instances.setProperties = _this.setProperties;
+        _this.ej2Instances.clearTemplate = _this.clearTemplate;
+        _this.updated = _this.updated;
+        return _this;
+    }
+    AppBarComponent.prototype.clearTemplate = function (templateNames) {
+        if (!templateNames) {
+            templateNames = Object.keys(this.templateCollection || {});
+        }
+        if (templateNames.length && this.templateCollection) {
+            for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
+                var tempName = templateNames_1[_i];
+                var elementCollection = this.templateCollection[tempName];
+                if (elementCollection && elementCollection.length) {
+                    for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
+                        var ele = elementCollection_1[_a];
+                        var destroy = getValue('__vue__.$destroy', ele);
+                        if (destroy) {
+                            ele.__vue__.$destroy();
+                        }
+                        if (ele.innerHTML) {
+                            ele.innerHTML = '';
+                        }
+                    }
+                    delete this.templateCollection[tempName];
+                }
+            }
+        }
+    };
+    AppBarComponent.prototype.setProperties = function (prop, muteOnChange) {
+        var _this = this;
+        if (this.isVue3) {
+            this.models = !this.models ? this.ej2Instances.referModels : this.models;
+        }
+        if (this.ej2Instances && this.ej2Instances._setProperties) {
+            this.ej2Instances._setProperties(prop, muteOnChange);
+        }
+        if (prop && this.models && this.models.length) {
+            Object.keys(prop).map(function (key) {
+                _this.models.map(function (model) {
+                    if ((key === model) && !(/datasource/i.test(key))) {
+                        if (_this.isVue3) {
+                            _this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
+                        }
+                        else {
+                            _this.$emit('update:' + key, prop[key]);
+                            _this.$emit('modelchanged', prop[key]);
+                        }
+                    }
+                });
+            });
+        }
+    };
+    AppBarComponent.prototype.render = function (createElement) {
+        var h = !isExecute ? gh : createElement;
+        var slots = null;
+        if (!isNullOrUndefined(this.$slots.default)) {
+            slots = !isExecute ? this.$slots.default() : this.$slots.default;
+        }
+        return h('header', slots);
+    };
+    AppBarComponent.prototype.custom = function () {
+        this.updated();
+    };
+    AppBarComponent = __decorate$15([
+        EJComponentDecorator({
+            props: properties$9
+        }, isExecute)
+        ,Options({
+            props: props,
+            watch: watch,
+            emits: emitProbs,
+            provide: function provide() {
+                return {
+                    custom: this.custom
+                };
+            }
+        })
+    ], AppBarComponent);
+    return AppBarComponent;
+}(ComponentBase));
+var AppBarPlugin = {
+    name: 'ejs-appbar',
+    install: function (Vue$$1) {
+        Vue$$1.component(AppBarPlugin.name, AppBarComponent);
+    }
+};
+
+export { AccordionItemsDirective, AccordionItemDirective, AccordionItemsPlugin, AccordionItemPlugin, AccordionComponent, AccordionPlugin, ItemsDirective, ItemDirective, ItemsPlugin, ItemPlugin, ToolbarComponent, ToolbarPlugin, ContextMenuComponent, ContextMenuPlugin, BreadcrumbItemsDirective, BreadcrumbItemDirective, BreadcrumbItemsPlugin, BreadcrumbItemPlugin, BreadcrumbComponent, BreadcrumbPlugin, CarouselItemsDirective, CarouselItemDirective, CarouselItemsPlugin, CarouselItemPlugin, CarouselComponent, CarouselPlugin, TabItemsDirective, TabItemDirective, TabItemsPlugin, TabItemPlugin, TabComponent, TabPlugin, TreeViewComponent, TreeViewPlugin, SidebarComponent, SidebarPlugin, MenuItemsDirective, MenuItemDirective, MenuItemsPlugin, MenuItemPlugin, MenuComponent, MenuPlugin, AppBarComponent, AppBarPlugin };
 export * from '@syncfusion/ej2-navigations';
 //# sourceMappingURL=ej2-vue-navigations.es5.js.map