@syncfusion/ej2-vue-navigations 19.4.53 → 20.1.47

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

@@ -1,8 +1,8 @@
-import { Accordion, Breadcrumb, ContextMenu, Menu, Sidebar, Tab, Toolbar, TreeView } from '@syncfusion/ej2-navigations';
+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 { Vue } from 'vue-class-component';
-import Vue$1 from 'vue';
 import { getValue, isNullOrUndefined, isUndefined } from '@syncfusion/ej2-base';
+import Vue$1 from 'vue';
 
 var __decorate = (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;
@@ -10,6 +10,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
     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 isExecute = gh ? false : true;
 let vueImport;
 if (!isExecute || parseInt(allVue.version) < 3) {
@@ -18,16 +19,47 @@ if (!isExecute || parseInt(allVue.version) < 3) {
 else {
     vueImport = Vue$1;
 }
-let AccordionItemsDirective = class AccordionItemsDirective extends vueImport {
-    render() {
+let AccordionItemsDirective = 
+/* Start Options({
+    inject: {
+        custom: {
+            default: null
+        }
+    }
+}) End */
+class AccordionItemsDirective extends vueImport {
+    constructor() {
+        super(arguments);
+    }
+    render(createElement) {
+        if (gh) {
+            let h = gh || createElement;
+            let slots = null;
+            if (!isNullOrUndefined(this.$slots.default)) {
+                slots = gh ? this.$slots.default() : this.$slots.default;
+            }
+            return h('div', { class: 'e-directive' }, slots);
+        }
         return;
     }
+    updated() {
+        if (gh && this.custom) {
+            this.custom();
+        }
+    }
     getTag() {
         return 'e-accordionitems';
     }
 };
 AccordionItemsDirective = __decorate([
     EJComponentDecorator({}, isExecute)
+    /* Start Options({
+        inject: {
+            custom: {
+                default: null
+            }
+        }
+    }) End */
 ], AccordionItemsDirective);
 const AccordionItemsPlugin = {
     name: 'e-accordionitems',
@@ -84,7 +116,7 @@ for (let props of modelProps) {
 }
 const isExecute$1 = gh ? false : true;
 /**
- * Represents the VueJS Accoridon Component.
+ * Represents the VueJS Accordion Component.
  * ```html
  * <ejs-accordion></ejs-accordion>
  * ```
@@ -93,7 +125,12 @@ let AccordionComponent =
 /* Start Options({
     props: props,
     watch: watch,
-    emits: emitProbs
+    emits: emitProbs,
+    provide: function provide() {
+        return {
+            custom: this.custom
+        };
+    }
 }) End */
 class AccordionComponent extends ComponentBase {
     constructor() {
@@ -112,6 +149,7 @@ class AccordionComponent extends ComponentBase {
         this.ej2Instances._setProperties = this.ej2Instances.setProperties;
         this.ej2Instances.setProperties = this.setProperties;
         this.ej2Instances.clearTemplate = this.clearTemplate;
+        this.updated = this.updated;
     }
     clearTemplate(templateNames) {
         if (!templateNames) {
@@ -204,6 +242,9 @@ class AccordionComponent extends ComponentBase {
         }
         return h('div', slots);
     }
+    custom() {
+        this.updated();
+    }
     addItem(item, index) {
         return this.ej2Instances.addItem(item, index);
     }
@@ -233,7 +274,12 @@ AccordionComponent = __decorate$1([
     /* Start Options({
         props: props,
         watch: watch,
-        emits: emitProbs
+        emits: emitProbs,
+        provide: function provide() {
+            return {
+                custom: this.custom
+            };
+        }
     }) End */
 ], AccordionComponent);
 const AccordionPlugin = {
@@ -251,6 +297,7 @@ var __decorate$2 = (undefined && undefined.__decorate) || function (decorators,
     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 isExecute$2 = gh ? false : true;
 let vueImport$1;
 if (!isExecute$2 || parseInt(allVue.version) < 3) {
@@ -259,16 +306,47 @@ if (!isExecute$2 || parseInt(allVue.version) < 3) {
 else {
     vueImport$1 = Vue$1;
 }
-let ItemsDirective = class ItemsDirective extends vueImport$1 {
-    render() {
+let ItemsDirective = 
+/* Start Options({
+    inject: {
+        custom: {
+            default: null
+        }
+    }
+}) End */
+class ItemsDirective extends vueImport$1 {
+    constructor() {
+        super(arguments);
+    }
+    render(createElement) {
+        if (gh) {
+            let h = gh || createElement;
+            let slots = null;
+            if (!isNullOrUndefined(this.$slots.default)) {
+                slots = gh ? this.$slots.default() : this.$slots.default;
+            }
+            return h('div', { class: 'e-directive' }, slots);
+        }
         return;
     }
+    updated() {
+        if (gh && this.custom) {
+            this.custom();
+        }
+    }
     getTag() {
         return 'e-items';
     }
 };
 ItemsDirective = __decorate$2([
     EJComponentDecorator({}, isExecute$2)
+    /* Start Options({
+        inject: {
+            custom: {
+                default: null
+            }
+        }
+    }) End */
 ], ItemsDirective);
 const ItemsPlugin = {
     name: 'e-items',
@@ -334,7 +412,12 @@ let ToolbarComponent =
 /* Start Options({
     props: props,
     watch: watch,
-    emits: emitProbs
+    emits: emitProbs,
+    provide: function provide() {
+        return {
+            custom: this.custom
+        };
+    }
 }) End */
 class ToolbarComponent extends ComponentBase {
     constructor() {
@@ -351,6 +434,7 @@ class ToolbarComponent extends ComponentBase {
         this.ej2Instances._setProperties = this.ej2Instances.setProperties;
         this.ej2Instances.setProperties = this.setProperties;
         this.ej2Instances.clearTemplate = this.clearTemplate;
+        this.updated = this.updated;
     }
     clearTemplate(templateNames) {
         if (!templateNames) {
@@ -405,6 +489,9 @@ class ToolbarComponent extends ComponentBase {
         }
         return h('div', slots);
     }
+    custom() {
+        this.updated();
+    }
     addItems(items, index) {
         return this.ej2Instances.addItems(items, index);
     }
@@ -431,7 +518,12 @@ ToolbarComponent = __decorate$3([
     /* Start Options({
         props: props,
         watch: watch,
-        emits: emitProbs
+        emits: emitProbs,
+        provide: function provide() {
+            return {
+                custom: this.custom
+            };
+        }
     }) End */
 ], ToolbarComponent);
 const ToolbarPlugin = {
@@ -472,7 +564,12 @@ let ContextMenuComponent =
 /* Start Options({
     props: props,
     watch: watch,
-    emits: emitProbs
+    emits: emitProbs,
+    provide: function provide() {
+        return {
+            custom: this.custom
+        };
+    }
 }) End */
 class ContextMenuComponent extends ComponentBase {
     constructor() {
@@ -489,6 +586,7 @@ class ContextMenuComponent extends ComponentBase {
         this.ej2Instances._setProperties = this.ej2Instances.setProperties;
         this.ej2Instances.setProperties = this.setProperties;
         this.ej2Instances.clearTemplate = this.clearTemplate;
+        this.updated = this.updated;
     }
     clearTemplate(templateNames) {
         if (!templateNames) {
@@ -543,6 +641,9 @@ class ContextMenuComponent extends ComponentBase {
         }
         return h('ul', slots);
     }
+    custom() {
+        this.updated();
+    }
     close() {
         return this.ej2Instances.close();
     }
@@ -581,7 +682,12 @@ ContextMenuComponent = __decorate$4([
     /* Start Options({
         props: props,
         watch: watch,
-        emits: emitProbs
+        emits: emitProbs,
+        provide: function provide() {
+            return {
+                custom: this.custom
+            };
+        }
     }) End */
 ], ContextMenuComponent);
 const ContextMenuPlugin = {
@@ -597,6 +703,7 @@ var __decorate$5 = (undefined && undefined.__decorate) || function (decorators,
     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 isExecute$5 = gh ? false : true;
 let vueImport$2;
 if (!isExecute$5 || parseInt(allVue.version) < 3) {
@@ -605,16 +712,47 @@ if (!isExecute$5 || parseInt(allVue.version) < 3) {
 else {
     vueImport$2 = Vue$1;
 }
-let BreadcrumbItemsDirective = class BreadcrumbItemsDirective extends vueImport$2 {
-    render() {
+let BreadcrumbItemsDirective = 
+/* Start Options({
+    inject: {
+        custom: {
+            default: null
+        }
+    }
+}) End */
+class BreadcrumbItemsDirective extends vueImport$2 {
+    constructor() {
+        super(arguments);
+    }
+    render(createElement) {
+        if (gh) {
+            let h = gh || createElement;
+            let slots = null;
+            if (!isNullOrUndefined(this.$slots.default)) {
+                slots = gh ? this.$slots.default() : this.$slots.default;
+            }
+            return h('div', { class: 'e-directive' }, slots);
+        }
         return;
     }
+    updated() {
+        if (gh && this.custom) {
+            this.custom();
+        }
+    }
     getTag() {
         return 'e-breadcrumb-items';
     }
 };
 BreadcrumbItemsDirective = __decorate$5([
     EJComponentDecorator({}, isExecute$5)
+    /* Start Options({
+        inject: {
+            custom: {
+                default: null
+            }
+        }
+    }) End */
 ], BreadcrumbItemsDirective);
 const BreadcrumbItemsPlugin = {
     name: 'e-breadcrumb-items',
@@ -680,7 +818,12 @@ let BreadcrumbComponent =
 /* Start Options({
     props: props,
     watch: watch,
-    emits: emitProbs
+    emits: emitProbs,
+    provide: function provide() {
+        return {
+            custom: this.custom
+        };
+    }
 }) End */
 class BreadcrumbComponent extends ComponentBase {
     constructor() {
@@ -699,6 +842,7 @@ class BreadcrumbComponent extends ComponentBase {
         this.ej2Instances._setProperties = this.ej2Instances.setProperties;
         this.ej2Instances.setProperties = this.setProperties;
         this.ej2Instances.clearTemplate = this.clearTemplate;
+        this.updated = this.updated;
     }
     clearTemplate(templateNames) {
         if (!templateNames) {
@@ -791,6 +935,9 @@ class BreadcrumbComponent extends ComponentBase {
         }
         return h('nav', slots);
     }
+    custom() {
+        this.updated();
+    }
 };
 BreadcrumbComponent = __decorate$6([
     EJComponentDecorator({
@@ -802,7 +949,12 @@ BreadcrumbComponent = __decorate$6([
     /* Start Options({
         props: props,
         watch: watch,
-        emits: emitProbs
+        emits: emitProbs,
+        provide: function provide() {
+            return {
+                custom: this.custom
+            };
+        }
     }) End */
 ], BreadcrumbComponent);
 const BreadcrumbPlugin = {
@@ -820,6 +972,7 @@ var __decorate$7 = (undefined && undefined.__decorate) || function (decorators,
     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 isExecute$7 = gh ? false : true;
 let vueImport$3;
 if (!isExecute$7 || parseInt(allVue.version) < 3) {
@@ -828,16 +981,328 @@ if (!isExecute$7 || parseInt(allVue.version) < 3) {
 else {
     vueImport$3 = Vue$1;
 }
-let TabItemsDirective = class TabItemsDirective extends vueImport$3 {
+let CarouselItemsDirective = 
+/* Start Options({
+    inject: {
+        custom: {
+            default: null
+        }
+    }
+}) End */
+class CarouselItemsDirective extends vueImport$3 {
+    constructor() {
+        super(arguments);
+    }
+    render(createElement) {
+        if (gh) {
+            let h = gh || createElement;
+            let slots = null;
+            if (!isNullOrUndefined(this.$slots.default)) {
+                slots = gh ? this.$slots.default() : this.$slots.default;
+            }
+            return h('div', { class: 'e-directive' }, slots);
+        }
+        return;
+    }
+    updated() {
+        if (gh && this.custom) {
+            this.custom();
+        }
+    }
+    getTag() {
+        return 'e-carousel-items';
+    }
+};
+CarouselItemsDirective = __decorate$7([
+    EJComponentDecorator({}, isExecute$7)
+    /* Start Options({
+        inject: {
+            custom: {
+                default: null
+            }
+        }
+    }) End */
+], CarouselItemsDirective);
+const CarouselItemsPlugin = {
+    name: 'e-carousel-items',
+    install(Vue$$1) {
+        Vue$$1.component(CarouselItemsPlugin.name, CarouselItemsDirective);
+    }
+};
+/**
+ * `e-carousel-item` directive represent a item of the Vue Carousel.
+ * It must be contained in a Carousel component(`ejs-carousel`).
+ * ```html
+ * <ejs-carousel>
+ *   <e-carousel-items>
+ *    <e-carousel-item template='itemTemplate'></e-carousel-item>
+ *    <e-carousel-item template='secondItemTemplate'></e-carousel-item>
+ *   </e-carousel-items>
+ * </ejs-carousel>
+ * ```
+ */
+let CarouselItemDirective = class CarouselItemDirective extends vueImport$3 {
     render() {
         return;
     }
     getTag() {
-        return 'e-tabitems';
+        return 'e-carousel-item';
     }
 };
-TabItemsDirective = __decorate$7([
+CarouselItemDirective = __decorate$7([
     EJComponentDecorator({}, isExecute$7)
+], CarouselItemDirective);
+const CarouselItemPlugin = {
+    name: 'e-carousel-item',
+    install(Vue$$1) {
+        Vue$$1.component(CarouselItemPlugin.name, CarouselItemDirective);
+    }
+};
+
+var __decorate$8 = (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$4 = ['isLazyUpdate', 'animation', 'autoPlay', 'buttonsVisibility', 'cssClass', 'dataSource', 'enablePersistence', 'enableRtl', 'enableTouchSwipe', 'height', 'htmlAttributes', 'indicatorsTemplate', 'interval', 'itemTemplate', 'items', 'locale', 'loop', 'nextButtonTemplate', '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];
+const watch$4 = testProp$4[1];
+const emitProbs$4 = Object.keys(watch$4);
+emitProbs$4.push('modelchanged');
+for (let props of modelProps$4) {
+    emitProbs$4.push('update:' + props);
+}
+const isExecute$8 = gh ? false : true;
+/**
+ * Represents the VueJS Carousel Component.
+ * ```html
+ * <ejs-carousel :items='carouselItems'></ejs-carousel>
+ * ```
+ */
+let CarouselComponent = 
+/* Start Options({
+    props: props,
+    watch: watch,
+    emits: emitProbs,
+    provide: function provide() {
+        return {
+            custom: this.custom
+        };
+    }
+}) End */
+class CarouselComponent extends ComponentBase {
+    constructor() {
+        super(arguments);
+        this.propKeys = properties$4;
+        this.models = modelProps$4;
+        this.hasChildDirective = true;
+        this.hasInjectedModules = false;
+        this.tagMapper = { "e-carousel-items": "e-carousel-item" };
+        this.tagNameMapper = { "e-carousel-items": "e-items" };
+        this.isVue3 = !isExecute$8;
+        this.ej2Instances = new Carousel({});
+        this.ej2Instances._trigger = this.ej2Instances.trigger;
+        this.ej2Instances.trigger = this.trigger;
+        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]);
+                        }
+                    }
+                });
+            });
+        }
+    }
+    trigger(eventName, eventProp, successHandler) {
+        if (!isExecute$8) {
+            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) {
+                    this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
+                    this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
+                }
+                else {
+                    if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {
+                        this.$emit('update:' + propKey, eventProp[propKey]);
+                        this.$emit('modelchanged', eventProp[propKey]);
+                    }
+                }
+            }
+        }
+        else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
+            let key = this.models.toString().match(/currentView|selectedDate/) || [];
+            let propKey = key[0];
+            if (eventProp && key && !isUndefined(eventProp[propKey])) {
+                if (!isExecute$8) {
+                    this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
+                    this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
+                }
+                else {
+                    this.$emit('update:' + propKey, eventProp[propKey]);
+                    this.$emit('modelchanged', eventProp[propKey]);
+                }
+            }
+        }
+        if ((this.ej2Instances && this.ej2Instances._trigger)) {
+            this.ej2Instances._trigger(eventName, eventProp, successHandler);
+        }
+    }
+    render(createElement) {
+        let h = gh || createElement;
+        let slots = null;
+        if (!isNullOrUndefined(this.$slots.default)) {
+            slots = gh ? this.$slots.default() : this.$slots.default;
+        }
+        return h('div', slots);
+    }
+    custom() {
+        this.updated();
+    }
+    next() {
+        return this.ej2Instances.next();
+    }
+    pause() {
+        return this.ej2Instances.pause();
+    }
+    play() {
+        return this.ej2Instances.play();
+    }
+    prev() {
+        return this.ej2Instances.prev();
+    }
+};
+CarouselComponent = __decorate$8([
+    EJComponentDecorator({
+        props: properties$4,
+        model: {
+            event: 'modelchanged'
+        }
+    }, isExecute$8)
+    /* Start Options({
+        props: props,
+        watch: watch,
+        emits: emitProbs,
+        provide: function provide() {
+            return {
+                custom: this.custom
+            };
+        }
+    }) End */
+], CarouselComponent);
+const CarouselPlugin = {
+    name: 'ejs-carousel',
+    install(Vue$$1) {
+        Vue$$1.component(CarouselPlugin.name, CarouselComponent);
+        Vue$$1.component(CarouselItemPlugin.name, CarouselItemDirective);
+        Vue$$1.component(CarouselItemsPlugin.name, CarouselItemsDirective);
+    }
+};
+
+var __decorate$9 = (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 isExecute$9 = gh ? false : true;
+let vueImport$4;
+if (!isExecute$9 || parseInt(allVue.version) < 3) {
+    vueImport$4 = Vue;
+}
+else {
+    vueImport$4 = Vue$1;
+}
+let TabItemsDirective = 
+/* Start Options({
+    inject: {
+        custom: {
+            default: null
+        }
+    }
+}) End */
+class TabItemsDirective extends vueImport$4 {
+    constructor() {
+        super(arguments);
+    }
+    render(createElement) {
+        if (gh) {
+            let h = gh || createElement;
+            let slots = null;
+            if (!isNullOrUndefined(this.$slots.default)) {
+                slots = gh ? this.$slots.default() : this.$slots.default;
+            }
+            return h('div', { class: 'e-directive' }, slots);
+        }
+        return;
+    }
+    updated() {
+        if (gh && this.custom) {
+            this.custom();
+        }
+    }
+    getTag() {
+        return 'e-tabitems';
+    }
+};
+TabItemsDirective = __decorate$9([
+    EJComponentDecorator({}, isExecute$9)
+    /* Start Options({
+        inject: {
+            custom: {
+                default: null
+            }
+        }
+    }) End */
 ], TabItemsDirective);
 const TabItemsPlugin = {
     name: 'e-tabitems',
@@ -857,7 +1322,7 @@ const TabItemsPlugin = {
  * </ejs-tab>
  * ```
  */
-let TabItemDirective = class TabItemDirective extends vueImport$3 {
+let TabItemDirective = class TabItemDirective extends vueImport$4 {
     render() {
         return;
     }
@@ -865,8 +1330,8 @@ let TabItemDirective = class TabItemDirective extends vueImport$3 {
         return 'e-tabitem';
     }
 };
-TabItemDirective = __decorate$7([
-    EJComponentDecorator({}, isExecute$7)
+TabItemDirective = __decorate$9([
+    EJComponentDecorator({}, isExecute$9)
 ], TabItemDirective);
 const TabItemPlugin = {
     name: 'e-tabitem',
@@ -875,24 +1340,24 @@ const TabItemPlugin = {
     }
 };
 
-var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$10 = (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$4 = ['isLazyUpdate', 'allowDragAndDrop', 'animation', 'cssClass', 'dragArea', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'headerPlacement', 'height', 'heightAdjustMode', 'items', 'loadOn', 'locale', 'overflowMode', 'reorderActiveTab', 'scrollStep', 'selectedItem', 'showCloseButton', 'width', 'added', 'adding', 'created', 'destroyed', 'dragged', 'dragging', 'onDragStart', 'removed', 'removing', 'selected', 'selecting'];
-const modelProps$4 = [];
-const testProp$4 = getProps({ props: properties$4 });
-const props$4 = testProp$4[0];
-const watch$4 = testProp$4[1];
-const emitProbs$4 = Object.keys(watch$4);
-emitProbs$4.push('modelchanged');
-for (let props of modelProps$4) {
-    emitProbs$4.push('update:' + props);
+const properties$5 = ['isLazyUpdate', 'allowDragAndDrop', 'animation', 'cssClass', 'dragArea', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'headerPlacement', 'height', 'heightAdjustMode', 'items', 'loadOn', 'locale', 'overflowMode', 'reorderActiveTab', 'scrollStep', 'selectedItem', 'showCloseButton', 'width', 'added', 'adding', 'created', 'destroyed', 'dragged', 'dragging', 'onDragStart', 'removed', 'removing', 'selected', 'selecting'];
+const modelProps$5 = [];
+const testProp$5 = getProps({ props: properties$5 });
+const props$5 = testProp$5[0];
+const watch$5 = testProp$5[1];
+const emitProbs$5 = Object.keys(watch$5);
+emitProbs$5.push('modelchanged');
+for (let props of modelProps$5) {
+    emitProbs$5.push('update:' + props);
 }
-const isExecute$8 = gh ? false : true;
+const isExecute$10 = gh ? false : true;
 /**
  * Represents the VueJS Tab Component.
  * ```html
@@ -903,23 +1368,29 @@ let TabComponent =
 /* Start Options({
     props: props,
     watch: watch,
-    emits: emitProbs
+    emits: emitProbs,
+    provide: function provide() {
+        return {
+            custom: this.custom
+        };
+    }
 }) End */
 class TabComponent extends ComponentBase {
     constructor() {
         super(arguments);
-        this.propKeys = properties$4;
-        this.models = modelProps$4;
+        this.propKeys = properties$5;
+        this.models = modelProps$5;
         this.hasChildDirective = true;
         this.hasInjectedModules = false;
         this.tagMapper = { "e-tabitems": "e-tabitem" };
         this.tagNameMapper = { "e-tabitems": "e-items" };
-        this.isVue3 = !isExecute$8;
+        this.isVue3 = !isExecute$10;
         this.ej2Instances = new Tab({});
         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) {
@@ -974,6 +1445,9 @@ class TabComponent extends ComponentBase {
         }
         return h('div', slots);
     }
+    custom() {
+        this.updated();
+    }
     addTab(items, index) {
         return this.ej2Instances.addTab(items, index);
     }
@@ -1002,14 +1476,19 @@ class TabComponent extends ComponentBase {
         return this.ej2Instances.select(args, event);
     }
 };
-TabComponent = __decorate$8([
+TabComponent = __decorate$10([
     EJComponentDecorator({
-        props: properties$4
-    }, isExecute$8)
+        props: properties$5
+    }, isExecute$10)
     /* Start Options({
         props: props,
         watch: watch,
-        emits: emitProbs
+        emits: emitProbs,
+        provide: function provide() {
+            return {
+                custom: this.custom
+            };
+        }
     }) End */
 ], TabComponent);
 const TabPlugin = {
@@ -1021,24 +1500,24 @@ const TabPlugin = {
     }
 };
 
-var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$11 = (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$5 = ['isLazyUpdate', 'allowDragAndDrop', 'allowEditing', 'allowMultiSelection', 'allowTextWrap', 'animation', 'autoCheck', 'checkedNodes', 'cssClass', 'disabled', 'dragArea', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'expandOn', 'expandedNodes', 'fields', 'fullRowNavigable', 'fullRowSelect', 'loadOnDemand', 'locale', 'nodeTemplate', 'selectedNodes', 'showCheckBox', 'sortOrder', 'actionFailure', 'created', 'dataBound', 'dataSourceChanged', 'destroyed', 'drawNode', 'keyPress', 'nodeChecked', 'nodeChecking', 'nodeClicked', 'nodeCollapsed', 'nodeCollapsing', 'nodeDragStart', 'nodeDragStop', 'nodeDragging', 'nodeDropped', 'nodeEdited', 'nodeEditing', 'nodeExpanded', 'nodeExpanding', 'nodeSelected', 'nodeSelecting'];
-const modelProps$5 = [];
-const testProp$5 = getProps({ props: properties$5 });
-const props$5 = testProp$5[0];
-const watch$5 = testProp$5[1];
-const emitProbs$5 = Object.keys(watch$5);
-emitProbs$5.push('modelchanged');
-for (let props of modelProps$5) {
-    emitProbs$5.push('update:' + props);
+const properties$6 = ['isLazyUpdate', 'allowDragAndDrop', 'allowEditing', 'allowMultiSelection', 'allowTextWrap', 'animation', 'autoCheck', 'checkedNodes', 'cssClass', 'disabled', 'dragArea', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'expandOn', 'expandedNodes', 'fields', 'fullRowNavigable', 'fullRowSelect', 'loadOnDemand', 'locale', 'nodeTemplate', 'selectedNodes', 'showCheckBox', 'sortOrder', 'actionFailure', 'created', 'dataBound', 'dataSourceChanged', 'destroyed', 'drawNode', 'keyPress', 'nodeChecked', 'nodeChecking', 'nodeClicked', 'nodeCollapsed', 'nodeCollapsing', 'nodeDragStart', 'nodeDragStop', 'nodeDragging', 'nodeDropped', 'nodeEdited', 'nodeEditing', 'nodeExpanded', 'nodeExpanding', 'nodeSelected', 'nodeSelecting'];
+const modelProps$6 = [];
+const testProp$6 = getProps({ props: properties$6 });
+const props$6 = testProp$6[0];
+const watch$6 = testProp$6[1];
+const emitProbs$6 = Object.keys(watch$6);
+emitProbs$6.push('modelchanged');
+for (let props of modelProps$6) {
+    emitProbs$6.push('update:' + props);
 }
-const isExecute$9 = gh ? false : true;
+const isExecute$11 = gh ? false : true;
 /**
  * Represents the EJ2 VueJS TreeView Component.
  * ```html
@@ -1049,23 +1528,29 @@ let TreeViewComponent =
 /* Start Options({
     props: props,
     watch: watch,
-    emits: emitProbs
+    emits: emitProbs,
+    provide: function provide() {
+        return {
+            custom: this.custom
+        };
+    }
 }) End */
 class TreeViewComponent extends ComponentBase {
     constructor() {
         super(arguments);
-        this.propKeys = properties$5;
-        this.models = modelProps$5;
+        this.propKeys = properties$6;
+        this.models = modelProps$6;
         this.hasChildDirective = false;
         this.hasInjectedModules = false;
         this.tagMapper = {};
         this.tagNameMapper = {};
-        this.isVue3 = !isExecute$9;
+        this.isVue3 = !isExecute$11;
         this.ej2Instances = new TreeView({});
         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) {
@@ -1120,6 +1605,9 @@ class TreeViewComponent extends ComponentBase {
         }
         return h('div', slots);
     }
+    custom() {
+        this.updated();
+    }
     addNodes(nodes, target, index, preventTargetExpand) {
         return this.ej2Instances.addNodes(nodes, target, index, preventTargetExpand);
     }
@@ -1172,14 +1660,19 @@ class TreeViewComponent extends ComponentBase {
         return this.ej2Instances.updateNode(target, newText);
     }
 };
-TreeViewComponent = __decorate$9([
+TreeViewComponent = __decorate$11([
     EJComponentDecorator({
-        props: properties$5
-    }, isExecute$9)
+        props: properties$6
+    }, isExecute$11)
     /* Start Options({
         props: props,
         watch: watch,
-        emits: emitProbs
+        emits: emitProbs,
+        provide: function provide() {
+            return {
+                custom: this.custom
+            };
+        }
     }) End */
 ], TreeViewComponent);
 const TreeViewPlugin = {
@@ -1189,24 +1682,24 @@ const TreeViewPlugin = {
     }
 };
 
-var __decorate$10 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$12 = (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$6 = ['isLazyUpdate', 'animate', 'closeOnDocumentClick', 'dockSize', 'enableDock', 'enableGestures', 'enablePersistence', 'enableRtl', 'height', 'isOpen', 'locale', 'mediaQuery', 'position', 'showBackdrop', 'target', 'type', 'width', 'zIndex', 'change', 'close', 'created', 'destroyed', 'open'];
-const modelProps$6 = ['isOpen'];
-const testProp$6 = getProps({ props: properties$6 });
-const props$6 = testProp$6[0];
-const watch$6 = testProp$6[1];
-const emitProbs$6 = Object.keys(watch$6);
-emitProbs$6.push('modelchanged');
-for (let props of modelProps$6) {
-    emitProbs$6.push('update:' + props);
+const properties$7 = ['isLazyUpdate', 'animate', 'closeOnDocumentClick', 'dockSize', 'enableDock', 'enableGestures', 'enablePersistence', 'enableRtl', 'height', 'isOpen', 'locale', 'mediaQuery', 'position', 'showBackdrop', 'target', 'type', 'width', 'zIndex', 'change', 'close', 'created', 'destroyed', 'open'];
+const modelProps$7 = ['isOpen'];
+const testProp$7 = getProps({ props: properties$7 });
+const props$7 = testProp$7[0];
+const watch$7 = testProp$7[1];
+const emitProbs$7 = Object.keys(watch$7);
+emitProbs$7.push('modelchanged');
+for (let props of modelProps$7) {
+    emitProbs$7.push('update:' + props);
 }
-const isExecute$10 = gh ? false : true;
+const isExecute$12 = gh ? false : true;
 /**
  *  Represents the Essential JS 2 VueJS Sidebar Component.
  * ```html
@@ -1217,18 +1710,23 @@ let SidebarComponent =
 /* Start Options({
     props: props,
     watch: watch,
-    emits: emitProbs
+    emits: emitProbs,
+    provide: function provide() {
+        return {
+            custom: this.custom
+        };
+    }
 }) End */
 class SidebarComponent extends ComponentBase {
     constructor() {
         super(arguments);
-        this.propKeys = properties$6;
-        this.models = modelProps$6;
+        this.propKeys = properties$7;
+        this.models = modelProps$7;
         this.hasChildDirective = false;
         this.hasInjectedModules = false;
         this.tagMapper = {};
         this.tagNameMapper = {};
-        this.isVue3 = !isExecute$10;
+        this.isVue3 = !isExecute$12;
         this.ej2Instances = new Sidebar({});
         this.ej2Instances._trigger = this.ej2Instances.trigger;
         this.ej2Instances.trigger = this.trigger;
@@ -1236,6 +1734,7 @@ class SidebarComponent extends ComponentBase {
         this.ej2Instances._setProperties = this.ej2Instances.setProperties;
         this.ej2Instances.setProperties = this.setProperties;
         this.ej2Instances.clearTemplate = this.clearTemplate;
+        this.updated = this.updated;
     }
     clearTemplate(templateNames) {
         if (!templateNames) {
@@ -1283,14 +1782,14 @@ class SidebarComponent extends ComponentBase {
         }
     }
     trigger(eventName, eventProp, successHandler) {
-        if (!isExecute$10) {
+        if (!isExecute$12) {
             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$10) {
+                if (!isExecute$12) {
                     this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
                     this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
                 }
@@ -1306,7 +1805,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$10) {
+                if (!isExecute$12) {
                     this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
                     this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
                 }
@@ -1328,6 +1827,9 @@ class SidebarComponent extends ComponentBase {
         }
         return h('div', slots);
     }
+    custom() {
+        this.updated();
+    }
     hide(e) {
         return this.ej2Instances.hide(e);
     }
@@ -1338,17 +1840,22 @@ class SidebarComponent extends ComponentBase {
         return this.ej2Instances.toggle();
     }
 };
-SidebarComponent = __decorate$10([
+SidebarComponent = __decorate$12([
     EJComponentDecorator({
-        props: properties$6,
+        props: properties$7,
         model: {
             event: 'modelchanged'
         }
-    }, isExecute$10)
+    }, isExecute$12)
     /* Start Options({
         props: props,
         watch: watch,
-        emits: emitProbs
+        emits: emitProbs,
+        provide: function provide() {
+            return {
+                custom: this.custom
+            };
+        }
     }) End */
 ], SidebarComponent);
 const SidebarPlugin = {
@@ -1358,30 +1865,62 @@ const SidebarPlugin = {
     }
 };
 
-var __decorate$11 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$13 = (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;
 };
-const isExecute$11 = gh ? false : true;
-let vueImport$4;
-if (!isExecute$11 || parseInt(allVue.version) < 3) {
-    vueImport$4 = Vue;
+// {{VueImport}}
+const isExecute$13 = gh ? false : true;
+let vueImport$5;
+if (!isExecute$13 || parseInt(allVue.version) < 3) {
+    vueImport$5 = Vue;
 }
 else {
-    vueImport$4 = Vue$1;
+    vueImport$5 = Vue$1;
 }
-let MenuItemsDirective = class MenuItemsDirective extends vueImport$4 {
-    render() {
+let MenuItemsDirective = 
+/* Start Options({
+    inject: {
+        custom: {
+            default: null
+        }
+    }
+}) End */
+class MenuItemsDirective extends vueImport$5 {
+    constructor() {
+        super(arguments);
+    }
+    render(createElement) {
+        if (gh) {
+            let h = gh || createElement;
+            let slots = null;
+            if (!isNullOrUndefined(this.$slots.default)) {
+                slots = gh ? this.$slots.default() : this.$slots.default;
+            }
+            return h('div', { class: 'e-directive' }, slots);
+        }
         return;
     }
+    updated() {
+        if (gh && this.custom) {
+            this.custom();
+        }
+    }
     getTag() {
         return 'e-menu-items';
     }
 };
-MenuItemsDirective = __decorate$11([
-    EJComponentDecorator({}, isExecute$11)
+MenuItemsDirective = __decorate$13([
+    EJComponentDecorator({}, isExecute$13)
+    /* Start Options({
+        inject: {
+            custom: {
+                default: null
+            }
+        }
+    }) End */
 ], MenuItemsDirective);
 const MenuItemsPlugin = {
     name: 'e-menu-items',
@@ -1389,7 +1928,7 @@ const MenuItemsPlugin = {
         Vue$$1.component(MenuItemsPlugin.name, MenuItemsDirective);
     }
 };
-let MenuItemDirective = class MenuItemDirective extends vueImport$4 {
+let MenuItemDirective = class MenuItemDirective extends vueImport$5 {
     render() {
         return;
     }
@@ -1397,8 +1936,8 @@ let MenuItemDirective = class MenuItemDirective extends vueImport$4 {
         return 'e-';
     }
 };
-MenuItemDirective = __decorate$11([
-    EJComponentDecorator({}, isExecute$11)
+MenuItemDirective = __decorate$13([
+    EJComponentDecorator({}, isExecute$13)
 ], MenuItemDirective);
 const MenuItemPlugin = {
     name: 'e-',
@@ -1407,24 +1946,24 @@ const MenuItemPlugin = {
     }
 };
 
-var __decorate$12 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$14 = (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$7 = ['isLazyUpdate', 'animationSettings', 'cssClass', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'enableScrolling', 'fields', 'filter', 'hamburgerMode', 'hoverDelay', 'items', 'locale', 'orientation', 'showItemOnClick', 'target', 'template', 'title', 'beforeClose', 'beforeItemRender', 'beforeOpen', 'created', 'onClose', 'onOpen', 'select'];
-const modelProps$7 = [];
-const testProp$7 = getProps({ props: properties$7 });
-const props$7 = testProp$7[0];
-const watch$7 = testProp$7[1];
-const emitProbs$7 = Object.keys(watch$7);
-emitProbs$7.push('modelchanged');
-for (let props of modelProps$7) {
-    emitProbs$7.push('update:' + props);
+const properties$8 = ['isLazyUpdate', 'animationSettings', 'cssClass', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'enableScrolling', 'fields', 'filter', 'hamburgerMode', 'hoverDelay', 'items', 'locale', 'orientation', 'showItemOnClick', 'target', 'template', 'title', 'beforeClose', 'beforeItemRender', 'beforeOpen', 'created', 'onClose', 'onOpen', 'select'];
+const modelProps$8 = [];
+const testProp$8 = getProps({ props: properties$8 });
+const props$8 = testProp$8[0];
+const watch$8 = testProp$8[1];
+const emitProbs$8 = Object.keys(watch$8);
+emitProbs$8.push('modelchanged');
+for (let props of modelProps$8) {
+    emitProbs$8.push('update:' + props);
 }
-const isExecute$12 = gh ? false : true;
+const isExecute$14 = gh ? false : true;
 /**
  * Represents the Essential JS 2 VueJS Menu Component.
  * ```html
@@ -1435,23 +1974,29 @@ let MenuComponent =
 /* Start Options({
     props: props,
     watch: watch,
-    emits: emitProbs
+    emits: emitProbs,
+    provide: function provide() {
+        return {
+            custom: this.custom
+        };
+    }
 }) End */
 class MenuComponent extends ComponentBase {
     constructor() {
         super(arguments);
-        this.propKeys = properties$7;
-        this.models = modelProps$7;
+        this.propKeys = properties$8;
+        this.models = modelProps$8;
         this.hasChildDirective = true;
         this.hasInjectedModules = false;
         this.tagMapper = { "e-menu-items": "e-" };
         this.tagNameMapper = { "e-menu-items": "e-items" };
-        this.isVue3 = !isExecute$12;
+        this.isVue3 = !isExecute$14;
         this.ej2Instances = new Menu({});
         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) {
@@ -1506,6 +2051,9 @@ class MenuComponent extends ComponentBase {
         }
         return h('ul', slots);
     }
+    custom() {
+        this.updated();
+    }
     close() {
         return this.ej2Instances.close();
     }
@@ -1537,14 +2085,19 @@ class MenuComponent extends ComponentBase {
         return this.ej2Instances.showItems(items, isUniqueId);
     }
 };
-MenuComponent = __decorate$12([
+MenuComponent = __decorate$14([
     EJComponentDecorator({
-        props: properties$7
-    }, isExecute$12)
+        props: properties$8
+    }, isExecute$14)
     /* Start Options({
         props: props,
         watch: watch,
-        emits: emitProbs
+        emits: emitProbs,
+        provide: function provide() {
+            return {
+                custom: this.custom
+            };
+        }
     }) End */
 ], MenuComponent);
 const MenuPlugin = {
@@ -1556,6 +2109,6 @@ const MenuPlugin = {
     }
 };
 
-export { AccordionItemsDirective, AccordionItemDirective, AccordionItemsPlugin, AccordionItemPlugin, AccordionComponent, AccordionPlugin, ItemsDirective, ItemDirective, ItemsPlugin, ItemPlugin, ToolbarComponent, ToolbarPlugin, ContextMenuComponent, ContextMenuPlugin, BreadcrumbItemsDirective, BreadcrumbItemDirective, BreadcrumbItemsPlugin, BreadcrumbItemPlugin, BreadcrumbComponent, BreadcrumbPlugin, TabItemsDirective, TabItemDirective, TabItemsPlugin, TabItemPlugin, TabComponent, TabPlugin, TreeViewComponent, TreeViewPlugin, SidebarComponent, SidebarPlugin, MenuItemsDirective, MenuItemDirective, MenuItemsPlugin, MenuItemPlugin, MenuComponent, 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 };
 export * from '@syncfusion/ej2-navigations';
 //# sourceMappingURL=ej2-vue-navigations.es2015.js.map