@syncfusion/ej2-vue-navigations 20.2.50 → 20.3.48

package/dist/es6/ej2-vue-navigations.es2015.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';
@@ -11,7 +11,6 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 // {{VueImport}}
-const isExecute = gh ? false : true;
 let vueImport;
 if (!isExecute || parseInt(allVue.version) < 3) {
     vueImport = Vue;
@@ -32,18 +31,18 @@ class AccordionItemsDirective extends vueImport {
         super(arguments);
     }
     render(createElement) {
-        if (gh) {
-            let h = gh || createElement;
+        if (!isExecute) {
+            let h = !isExecute ? gh : createElement;
             let 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;
     }
     updated() {
-        if (gh && this.custom) {
+        if (!isExecute && this.custom) {
             this.custom();
         }
     }
@@ -114,7 +113,6 @@ emitProbs.push('modelchanged', 'update:modelValue');
 for (let props of modelProps) {
     emitProbs.push('update:' + props);
 }
-const isExecute$1 = gh ? false : true;
 /**
  * Represents the VueJS Accordion Component.
  * ```html
@@ -141,7 +139,7 @@ class AccordionComponent extends ComponentBase {
         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;
@@ -197,14 +195,14 @@ class AccordionComponent extends ComponentBase {
         }
     }
     trigger(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)) {
             let key = this.models.toString().match(/checked|value/) || [];
             let 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]);
@@ -221,7 +219,7 @@ class AccordionComponent extends ComponentBase {
             let key = this.models.toString().match(/currentView|selectedDate/) || [];
             let 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]);
                 }
@@ -236,10 +234,10 @@ class AccordionComponent extends ComponentBase {
         }
     }
     render(createElement) {
-        let h = gh || createElement;
+        let h = !isExecute ? gh : createElement;
         let 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);
     }
@@ -271,7 +269,7 @@ AccordionComponent = __decorate$1([
         model: {
             event: 'modelchanged'
         }
-    }, isExecute$1)
+    }, isExecute)
     /* Start Options({
         props: props,
         watch: watch,
@@ -299,9 +297,8 @@ var __decorate$2 = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 // {{VueImport}}
-const isExecute$2 = gh ? false : true;
 let vueImport$1;
-if (!isExecute$2 || parseInt(allVue.version) < 3) {
+if (!isExecute || parseInt(allVue.version) < 3) {
     vueImport$1 = Vue;
 }
 else {
@@ -320,18 +317,18 @@ class ItemsDirective extends vueImport$1 {
         super(arguments);
     }
     render(createElement) {
-        if (gh) {
-            let h = gh || createElement;
+        if (!isExecute) {
+            let h = !isExecute ? gh : createElement;
             let 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;
     }
     updated() {
-        if (gh && this.custom) {
+        if (!isExecute && this.custom) {
             this.custom();
         }
     }
@@ -340,7 +337,7 @@ class ItemsDirective extends vueImport$1 {
     }
 };
 ItemsDirective = __decorate$2([
-    EJComponentDecorator({}, isExecute$2)
+    EJComponentDecorator({}, isExecute)
     /* Start Options({
         inject: {
             custom: {
@@ -376,7 +373,7 @@ let ItemDirective = class ItemDirective extends vueImport$1 {
     }
 };
 ItemDirective = __decorate$2([
-    EJComponentDecorator({}, isExecute$2)
+    EJComponentDecorator({}, isExecute)
 ], ItemDirective);
 const ItemPlugin = {
     name: 'e-item',
@@ -402,7 +399,6 @@ emitProbs$1.push('modelchanged', 'update:modelValue');
 for (let props of modelProps$1) {
     emitProbs$1.push('update:' + props);
 }
-const isExecute$3 = gh ? false : true;
 /**
  * Represents the VueJS Toolbar Component.
  * ```html
@@ -429,7 +425,7 @@ class ToolbarComponent extends ComponentBase {
         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;
@@ -483,10 +479,10 @@ class ToolbarComponent extends ComponentBase {
         }
     }
     render(createElement) {
-        let h = gh || createElement;
+        let h = !isExecute ? gh : createElement;
         let 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);
     }
@@ -515,7 +511,7 @@ class ToolbarComponent extends ComponentBase {
 ToolbarComponent = __decorate$3([
     EJComponentDecorator({
         props: properties$1
-    }, isExecute$3)
+    }, isExecute)
     /* Start Options({
         props: props,
         watch: watch,
@@ -553,7 +549,6 @@ emitProbs$2.push('modelchanged', 'update:modelValue');
 for (let props of modelProps$2) {
     emitProbs$2.push('update:' + props);
 }
-const isExecute$4 = gh ? false : true;
 /**
  * Represents the Essential JS 2 VueJS ContextMenu Component.
  * ```html
@@ -581,7 +576,7 @@ class ContextMenuComponent extends ComponentBase {
         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;
@@ -635,10 +630,10 @@ class ContextMenuComponent extends ComponentBase {
         }
     }
     render(createElement) {
-        let h = gh || createElement;
+        let h = !isExecute ? gh : createElement;
         let 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);
     }
@@ -679,7 +674,7 @@ class ContextMenuComponent extends ComponentBase {
 ContextMenuComponent = __decorate$4([
     EJComponentDecorator({
         props: properties$2
-    }, isExecute$4)
+    }, isExecute)
     /* Start Options({
         props: props,
         watch: watch,
@@ -705,9 +700,8 @@ var __decorate$5 = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 // {{VueImport}}
-const isExecute$5 = gh ? false : true;
 let vueImport$2;
-if (!isExecute$5 || parseInt(allVue.version) < 3) {
+if (!isExecute || parseInt(allVue.version) < 3) {
     vueImport$2 = Vue;
 }
 else {
@@ -726,18 +720,18 @@ class BreadcrumbItemsDirective extends vueImport$2 {
         super(arguments);
     }
     render(createElement) {
-        if (gh) {
-            let h = gh || createElement;
+        if (!isExecute) {
+            let h = !isExecute ? gh : createElement;
             let 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;
     }
     updated() {
-        if (gh && this.custom) {
+        if (!isExecute && this.custom) {
             this.custom();
         }
     }
@@ -746,7 +740,7 @@ class BreadcrumbItemsDirective extends vueImport$2 {
     }
 };
 BreadcrumbItemsDirective = __decorate$5([
-    EJComponentDecorator({}, isExecute$5)
+    EJComponentDecorator({}, isExecute)
     /* Start Options({
         inject: {
             custom: {
@@ -782,7 +776,7 @@ let BreadcrumbItemDirective = class BreadcrumbItemDirective extends vueImport$2
     }
 };
 BreadcrumbItemDirective = __decorate$5([
-    EJComponentDecorator({}, isExecute$5)
+    EJComponentDecorator({}, isExecute)
 ], BreadcrumbItemDirective);
 const BreadcrumbItemPlugin = {
     name: 'e-breadcrumb-item',
@@ -808,7 +802,6 @@ emitProbs$3.push('modelchanged', 'update:modelValue');
 for (let props of modelProps$3) {
     emitProbs$3.push('update:' + props);
 }
-const isExecute$6 = gh ? false : true;
 /**
  * Represents the VueJS Breadcrumb Component.
  * ```html
@@ -835,7 +828,7 @@ class BreadcrumbComponent extends ComponentBase {
         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;
@@ -891,14 +884,14 @@ class BreadcrumbComponent extends ComponentBase {
         }
     }
     trigger(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)) {
             let key = this.models.toString().match(/checked|value/) || [];
             let 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]);
@@ -915,7 +908,7 @@ class BreadcrumbComponent extends ComponentBase {
             let key = this.models.toString().match(/currentView|selectedDate/) || [];
             let 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]);
                 }
@@ -930,10 +923,10 @@ class BreadcrumbComponent extends ComponentBase {
         }
     }
     render(createElement) {
-        let h = gh || createElement;
+        let h = !isExecute ? gh : createElement;
         let 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);
     }
@@ -947,7 +940,7 @@ BreadcrumbComponent = __decorate$6([
         model: {
             event: 'modelchanged'
         }
-    }, isExecute$6)
+    }, isExecute)
     /* Start Options({
         props: props,
         watch: watch,
@@ -975,9 +968,8 @@ var __decorate$7 = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 // {{VueImport}}
-const isExecute$7 = gh ? false : true;
 let vueImport$3;
-if (!isExecute$7 || parseInt(allVue.version) < 3) {
+if (!isExecute || parseInt(allVue.version) < 3) {
     vueImport$3 = Vue;
 }
 else {
@@ -996,18 +988,18 @@ class CarouselItemsDirective extends vueImport$3 {
         super(arguments);
     }
     render(createElement) {
-        if (gh) {
-            let h = gh || createElement;
+        if (!isExecute) {
+            let h = !isExecute ? gh : createElement;
             let 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;
     }
     updated() {
-        if (gh && this.custom) {
+        if (!isExecute && this.custom) {
             this.custom();
         }
     }
@@ -1016,7 +1008,7 @@ class CarouselItemsDirective extends vueImport$3 {
     }
 };
 CarouselItemsDirective = __decorate$7([
-    EJComponentDecorator({}, isExecute$7)
+    EJComponentDecorator({}, isExecute)
     /* Start Options({
         inject: {
             custom: {
@@ -1052,7 +1044,7 @@ let CarouselItemDirective = class CarouselItemDirective extends vueImport$3 {
     }
 };
 CarouselItemDirective = __decorate$7([
-    EJComponentDecorator({}, isExecute$7)
+    EJComponentDecorator({}, isExecute)
 ], CarouselItemDirective);
 const CarouselItemPlugin = {
     name: 'e-carousel-item',
@@ -1068,7 +1060,7 @@ var __decorate$8 = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 // {{VueImport}}
-const 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'];
+const 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'];
 const modelProps$4 = ['selectedIndex'];
 const testProp$4 = getProps({ props: properties$4 });
 const props$4 = testProp$4[0];
@@ -1078,7 +1070,6 @@ emitProbs$4.push('modelchanged', 'update:modelValue');
 for (let props of modelProps$4) {
     emitProbs$4.push('update:' + props);
 }
-const isExecute$8 = gh ? false : true;
 /**
  * Represents the VueJS Carousel Component.
  * ```html
@@ -1105,7 +1096,7 @@ class CarouselComponent extends ComponentBase {
         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;
@@ -1161,14 +1152,14 @@ class CarouselComponent extends ComponentBase {
         }
     }
     trigger(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)) {
             let key = this.models.toString().match(/checked|value/) || [];
             let 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]);
@@ -1185,7 +1176,7 @@ class CarouselComponent extends ComponentBase {
             let key = this.models.toString().match(/currentView|selectedDate/) || [];
             let 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]);
                 }
@@ -1200,10 +1191,10 @@ class CarouselComponent extends ComponentBase {
         }
     }
     render(createElement) {
-        let h = gh || createElement;
+        let h = !isExecute ? gh : createElement;
         let 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);
     }
@@ -1229,7 +1220,7 @@ CarouselComponent = __decorate$8([
         model: {
             event: 'modelchanged'
         }
-    }, isExecute$8)
+    }, isExecute)
     /* Start Options({
         props: props,
         watch: watch,
@@ -1257,9 +1248,8 @@ var __decorate$9 = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 // {{VueImport}}
-const isExecute$9 = gh ? false : true;
 let vueImport$4;
-if (!isExecute$9 || parseInt(allVue.version) < 3) {
+if (!isExecute || parseInt(allVue.version) < 3) {
     vueImport$4 = Vue;
 }
 else {
@@ -1278,18 +1268,18 @@ class TabItemsDirective extends vueImport$4 {
         super(arguments);
     }
     render(createElement) {
-        if (gh) {
-            let h = gh || createElement;
+        if (!isExecute) {
+            let h = !isExecute ? gh : createElement;
             let 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;
     }
     updated() {
-        if (gh && this.custom) {
+        if (!isExecute && this.custom) {
             this.custom();
         }
     }
@@ -1298,7 +1288,7 @@ class TabItemsDirective extends vueImport$4 {
     }
 };
 TabItemsDirective = __decorate$9([
-    EJComponentDecorator({}, isExecute$9)
+    EJComponentDecorator({}, isExecute)
     /* Start Options({
         inject: {
             custom: {
@@ -1334,7 +1324,7 @@ let TabItemDirective = class TabItemDirective extends vueImport$4 {
     }
 };
 TabItemDirective = __decorate$9([
-    EJComponentDecorator({}, isExecute$9)
+    EJComponentDecorator({}, isExecute)
 ], TabItemDirective);
 const TabItemPlugin = {
     name: 'e-tabitem',
@@ -1360,7 +1350,6 @@ emitProbs$5.push('modelchanged', 'update:modelValue');
 for (let props of modelProps$5) {
     emitProbs$5.push('update:' + props);
 }
-const isExecute$10 = gh ? false : true;
 /**
  * Represents the VueJS Tab Component.
  * ```html
@@ -1387,7 +1376,7 @@ class TabComponent extends ComponentBase {
         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;
@@ -1441,10 +1430,10 @@ class TabComponent extends ComponentBase {
         }
     }
     render(createElement) {
-        let h = gh || createElement;
+        let h = !isExecute ? gh : createElement;
         let 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);
     }
@@ -1472,6 +1461,9 @@ class TabComponent extends ComponentBase {
     refreshActiveTab() {
         return this.ej2Instances.refreshActiveTab();
     }
+    refreshActiveTabBorder() {
+        return this.ej2Instances.refreshActiveTabBorder();
+    }
     removeTab(index) {
         return this.ej2Instances.removeTab(index);
     }
@@ -1482,7 +1474,7 @@ class TabComponent extends ComponentBase {
 TabComponent = __decorate$10([
     EJComponentDecorator({
         props: properties$5
-    }, isExecute$10)
+    }, isExecute)
     /* Start Options({
         props: props,
         watch: watch,
@@ -1520,7 +1512,6 @@ emitProbs$6.push('modelchanged', 'update:modelValue');
 for (let props of modelProps$6) {
     emitProbs$6.push('update:' + props);
 }
-const isExecute$11 = gh ? false : true;
 /**
  * Represents the EJ2 VueJS TreeView Component.
  * ```html
@@ -1547,7 +1538,7 @@ class TreeViewComponent extends ComponentBase {
         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;
@@ -1601,10 +1592,10 @@ class TreeViewComponent extends ComponentBase {
         }
     }
     render(createElement) {
-        let h = gh || createElement;
+        let h = !isExecute ? gh : createElement;
         let 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);
     }
@@ -1666,7 +1657,7 @@ class TreeViewComponent extends ComponentBase {
 TreeViewComponent = __decorate$11([
     EJComponentDecorator({
         props: properties$6
-    }, isExecute$11)
+    }, isExecute)
     /* Start Options({
         props: props,
         watch: watch,
@@ -1702,7 +1693,6 @@ emitProbs$7.push('modelchanged', 'update:modelValue');
 for (let props of modelProps$7) {
     emitProbs$7.push('update:' + props);
 }
-const isExecute$12 = gh ? false : true;
 /**
  *  Represents the Essential JS 2 VueJS Sidebar Component.
  * ```html
@@ -1729,7 +1719,7 @@ class SidebarComponent extends ComponentBase {
         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;
@@ -1785,14 +1775,14 @@ class SidebarComponent extends ComponentBase {
         }
     }
     trigger(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)) {
             let key = this.models.toString().match(/checked|value/) || [];
             let 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]);
@@ -1809,7 +1799,7 @@ class SidebarComponent extends ComponentBase {
             let key = this.models.toString().match(/currentView|selectedDate/) || [];
             let 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]);
                 }
@@ -1824,10 +1814,10 @@ class SidebarComponent extends ComponentBase {
         }
     }
     render(createElement) {
-        let h = gh || createElement;
+        let h = !isExecute ? gh : createElement;
         let 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);
     }
@@ -1850,7 +1840,7 @@ SidebarComponent = __decorate$12([
         model: {
             event: 'modelchanged'
         }
-    }, isExecute$12)
+    }, isExecute)
     /* Start Options({
         props: props,
         watch: watch,
@@ -1876,9 +1866,8 @@ var __decorate$13 = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 // {{VueImport}}
-const isExecute$13 = gh ? false : true;
 let vueImport$5;
-if (!isExecute$13 || parseInt(allVue.version) < 3) {
+if (!isExecute || parseInt(allVue.version) < 3) {
     vueImport$5 = Vue;
 }
 else {
@@ -1897,18 +1886,18 @@ class MenuItemsDirective extends vueImport$5 {
         super(arguments);
     }
     render(createElement) {
-        if (gh) {
-            let h = gh || createElement;
+        if (!isExecute) {
+            let h = !isExecute ? gh : createElement;
             let 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;
     }
     updated() {
-        if (gh && this.custom) {
+        if (!isExecute && this.custom) {
             this.custom();
         }
     }
@@ -1917,7 +1906,7 @@ class MenuItemsDirective extends vueImport$5 {
     }
 };
 MenuItemsDirective = __decorate$13([
-    EJComponentDecorator({}, isExecute$13)
+    EJComponentDecorator({}, isExecute)
     /* Start Options({
         inject: {
             custom: {
@@ -1941,7 +1930,7 @@ let MenuItemDirective = class MenuItemDirective extends vueImport$5 {
     }
 };
 MenuItemDirective = __decorate$13([
-    EJComponentDecorator({}, isExecute$13)
+    EJComponentDecorator({}, isExecute)
 ], MenuItemDirective);
 const MenuItemPlugin = {
     name: 'e-',
@@ -1967,7 +1956,6 @@ emitProbs$8.push('modelchanged', 'update:modelValue');
 for (let props of modelProps$8) {
     emitProbs$8.push('update:' + props);
 }
-const isExecute$14 = gh ? false : true;
 /**
  * Represents the Essential JS 2 VueJS Menu Component.
  * ```html
@@ -1994,7 +1982,7 @@ class MenuComponent extends ComponentBase {
         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;
@@ -2048,10 +2036,10 @@ class MenuComponent extends ComponentBase {
         }
     }
     render(createElement) {
-        let h = gh || createElement;
+        let h = !isExecute ? gh : createElement;
         let 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);
     }
@@ -2092,7 +2080,7 @@ class MenuComponent extends ComponentBase {
 MenuComponent = __decorate$14([
     EJComponentDecorator({
         props: properties$8
-    }, isExecute$14)
+    }, isExecute)
     /* Start Options({
         props: props,
         watch: watch,
@@ -2113,6 +2101,136 @@ const 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 __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}}
+const properties$9 = ['isLazyUpdate', 'plugins', 'colorMode', 'cssClass', 'enablePersistence', 'enableRtl', 'htmlAttributes', 'isSticky', 'locale', 'mode', 'position', 'created', 'destroyed'];
+const modelProps$9 = [];
+const testProp$9 = getProps({ props: properties$9 });
+const props$9 = testProp$9[0];
+const watch$9 = testProp$9[1];
+const emitProbs$9 = Object.keys(watch$9);
+emitProbs$9.push('modelchanged', 'update:modelValue');
+for (let props of modelProps$9) {
+    emitProbs$9.push('update:' + props);
+}
+/**
+ *  Represents the Essential JS 2 VueJS AppBar Component.
+ * ```html
+ * <ejs-appbar></ejs-appbar>
+ * ```
+ */
+let AppBarComponent = 
+/* Start Options({
+    props: props,
+    watch: watch,
+    emits: emitProbs,
+    provide: function provide() {
+        return {
+            custom: this.custom
+        };
+    }
+}) End */
+class AppBarComponent extends ComponentBase {
+    constructor() {
+        super(arguments);
+        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;
+    }
+    clearTemplate(templateNames) {
+        if (!templateNames) {
+            templateNames = Object.keys(this.templateCollection || {});
+        }
+        if (templateNames.length && this.templateCollection) {
+            for (let tempName of templateNames) {
+                let elementCollection = this.templateCollection[tempName];
+                if (elementCollection && elementCollection.length) {
+                    for (let ele of elementCollection) {
+                        let destroy = getValue('__vue__.$destroy', ele);
+                        if (destroy) {
+                            ele.__vue__.$destroy();
+                        }
+                        if (ele.innerHTML) {
+                            ele.innerHTML = '';
+                        }
+                    }
+                    delete this.templateCollection[tempName];
+                }
+            }
+        }
+    }
+    setProperties(prop, muteOnChange) {
+        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((key) => {
+                this.models.map((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]);
+                        }
+                    }
+                });
+            });
+        }
+    }
+    render(createElement) {
+        let h = !isExecute ? gh : createElement;
+        let slots = null;
+        if (!isNullOrUndefined(this.$slots.default)) {
+            slots = !isExecute ? this.$slots.default() : this.$slots.default;
+        }
+        return h('header', slots);
+    }
+    custom() {
+        this.updated();
+    }
+};
+AppBarComponent = __decorate$15([
+    EJComponentDecorator({
+        props: properties$9
+    }, isExecute)
+    /* Start Options({
+        props: props,
+        watch: watch,
+        emits: emitProbs,
+        provide: function provide() {
+            return {
+                custom: this.custom
+            };
+        }
+    }) End */
+], AppBarComponent);
+const AppBarPlugin = {
+    name: 'ejs-appbar',
+    install(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.es2015.js.map