@syncfusion/ej2-vue-navigations 19.4.53 → 20.1.47

package/dist/es6/ej2-vue-navigations.es5.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 __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -23,6 +23,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;
 };
+import { Options } from 'vue-class-component';
 var isExecute = gh ? false : true;
 var vueImport;
 if (!isExecute || parseInt(allVue.version) < 3) {
@@ -34,16 +35,36 @@ else {
 var AccordionItemsDirective = /** @__PURE__ @class */ (function (_super) {
     __extends(AccordionItemsDirective, _super);
     function AccordionItemsDirective() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        return _super.call(this, arguments) || this;
     }
-    AccordionItemsDirective.prototype.render = function () {
+    AccordionItemsDirective.prototype.render = function (createElement) {
+        if (gh) {
+            var h = gh || createElement;
+            var slots = null;
+            if (!isNullOrUndefined(this.$slots.default)) {
+                slots = gh ? this.$slots.default() : this.$slots.default;
+            }
+            return h('div', { class: 'e-directive' }, slots);
+        }
         return;
     };
+    AccordionItemsDirective.prototype.updated = function () {
+        if (gh && this.custom) {
+            this.custom();
+        }
+    };
     AccordionItemsDirective.prototype.getTag = function () {
         return 'e-accordionitems';
     };
     AccordionItemsDirective = __decorate([
         EJComponentDecorator({}, isExecute)
+        ,Options({
+            inject: {
+                custom: {
+                    default: null
+                }
+            }
+        })
     ], AccordionItemsDirective);
     return AccordionItemsDirective;
 }(vueImport));
@@ -107,7 +128,7 @@ var __decorate$1 = (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;
 };
-import { Options } from 'vue-class-component';
+// {{VueImport}}
 var properties = ['isLazyUpdate', 'animation', 'dataSource', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'expandMode', 'expandedIndices', 'headerTemplate', 'height', 'itemTemplate', 'items', 'locale', 'width', 'clicked', 'created', 'destroyed', 'expanded', 'expanding'];
 var modelProps = ['expandedIndices'];
 var testProp = getProps({ props: properties });
@@ -121,7 +142,7 @@ for (var _i = 0, modelProps_1 = modelProps; _i < modelProps_1.length; _i++) {
 }
 var isExecute$1 = gh ? false : true;
 /**
- * Represents the VueJS Accoridon Component.
+ * Represents the VueJS Accordion Component.
  * ```html
  * <ejs-accordion></ejs-accordion>
  * ```
@@ -144,6 +165,7 @@ var AccordionComponent = /** @__PURE__ @class */ (function (_super) {
         _this.ej2Instances._setProperties = _this.ej2Instances.setProperties;
         _this.ej2Instances.setProperties = _this.setProperties;
         _this.ej2Instances.clearTemplate = _this.clearTemplate;
+        _this.updated = _this.updated;
         return _this;
     }
     AccordionComponent.prototype.clearTemplate = function (templateNames) {
@@ -240,6 +262,9 @@ var AccordionComponent = /** @__PURE__ @class */ (function (_super) {
         }
         return h('div', slots);
     };
+    AccordionComponent.prototype.custom = function () {
+        this.updated();
+    };
     AccordionComponent.prototype.addItem = function (item, index) {
         return this.ej2Instances.addItem(item, index);
     };
@@ -268,7 +293,12 @@ var AccordionComponent = /** @__PURE__ @class */ (function (_super) {
         ,Options({
             props: props,
             watch: watch,
-            emits: emitProbs
+            emits: emitProbs,
+            provide: function provide() {
+                return {
+                    custom: this.custom
+                };
+            }
         })
     ], AccordionComponent);
     return AccordionComponent;
@@ -301,6 +331,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}}
 var isExecute$2 = gh ? false : true;
 var vueImport$1;
 if (!isExecute$2 || parseInt(allVue.version) < 3) {
@@ -312,16 +343,36 @@ else {
 var ItemsDirective = /** @__PURE__ @class */ (function (_super) {
     __extends$2(ItemsDirective, _super);
     function ItemsDirective() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        return _super.call(this, arguments) || this;
     }
-    ItemsDirective.prototype.render = function () {
+    ItemsDirective.prototype.render = function (createElement) {
+        if (gh) {
+            var h = gh || createElement;
+            var slots = null;
+            if (!isNullOrUndefined(this.$slots.default)) {
+                slots = gh ? this.$slots.default() : this.$slots.default;
+            }
+            return h('div', { class: 'e-directive' }, slots);
+        }
         return;
     };
+    ItemsDirective.prototype.updated = function () {
+        if (gh && this.custom) {
+            this.custom();
+        }
+    };
     ItemsDirective.prototype.getTag = function () {
         return 'e-items';
     };
     ItemsDirective = __decorate$2([
         EJComponentDecorator({}, isExecute$2)
+        ,Options({
+            inject: {
+                custom: {
+                    default: null
+                }
+            }
+        })
     ], ItemsDirective);
     return ItemsDirective;
 }(vueImport$1));
@@ -420,6 +471,7 @@ var ToolbarComponent = /** @__PURE__ @class */ (function (_super) {
         _this.ej2Instances._setProperties = _this.ej2Instances.setProperties;
         _this.ej2Instances.setProperties = _this.setProperties;
         _this.ej2Instances.clearTemplate = _this.clearTemplate;
+        _this.updated = _this.updated;
         return _this;
     }
     ToolbarComponent.prototype.clearTemplate = function (templateNames) {
@@ -478,6 +530,9 @@ var ToolbarComponent = /** @__PURE__ @class */ (function (_super) {
         }
         return h('div', slots);
     };
+    ToolbarComponent.prototype.custom = function () {
+        this.updated();
+    };
     ToolbarComponent.prototype.addItems = function (items, index) {
         return this.ej2Instances.addItems(items, index);
     };
@@ -503,7 +558,12 @@ var ToolbarComponent = /** @__PURE__ @class */ (function (_super) {
         ,Options({
             props: props,
             watch: watch,
-            emits: emitProbs
+            emits: emitProbs,
+            provide: function provide() {
+                return {
+                    custom: this.custom
+                };
+            }
         })
     ], ToolbarComponent);
     return ToolbarComponent;
@@ -572,6 +632,7 @@ var ContextMenuComponent = /** @__PURE__ @class */ (function (_super) {
         _this.ej2Instances._setProperties = _this.ej2Instances.setProperties;
         _this.ej2Instances.setProperties = _this.setProperties;
         _this.ej2Instances.clearTemplate = _this.clearTemplate;
+        _this.updated = _this.updated;
         return _this;
     }
     ContextMenuComponent.prototype.clearTemplate = function (templateNames) {
@@ -630,6 +691,9 @@ var ContextMenuComponent = /** @__PURE__ @class */ (function (_super) {
         }
         return h('ul', slots);
     };
+    ContextMenuComponent.prototype.custom = function () {
+        this.updated();
+    };
     ContextMenuComponent.prototype.close = function () {
         return this.ej2Instances.close();
     };
@@ -667,7 +731,12 @@ var ContextMenuComponent = /** @__PURE__ @class */ (function (_super) {
         ,Options({
             props: props,
             watch: watch,
-            emits: emitProbs
+            emits: emitProbs,
+            provide: function provide() {
+                return {
+                    custom: this.custom
+                };
+            }
         })
     ], ContextMenuComponent);
     return ContextMenuComponent;
@@ -698,6 +767,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}}
 var isExecute$5 = gh ? false : true;
 var vueImport$2;
 if (!isExecute$5 || parseInt(allVue.version) < 3) {
@@ -709,16 +779,36 @@ else {
 var BreadcrumbItemsDirective = /** @__PURE__ @class */ (function (_super) {
     __extends$5(BreadcrumbItemsDirective, _super);
     function BreadcrumbItemsDirective() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        return _super.call(this, arguments) || this;
     }
-    BreadcrumbItemsDirective.prototype.render = function () {
+    BreadcrumbItemsDirective.prototype.render = function (createElement) {
+        if (gh) {
+            var h = gh || createElement;
+            var slots = null;
+            if (!isNullOrUndefined(this.$slots.default)) {
+                slots = gh ? this.$slots.default() : this.$slots.default;
+            }
+            return h('div', { class: 'e-directive' }, slots);
+        }
         return;
     };
+    BreadcrumbItemsDirective.prototype.updated = function () {
+        if (gh && this.custom) {
+            this.custom();
+        }
+    };
     BreadcrumbItemsDirective.prototype.getTag = function () {
         return 'e-breadcrumb-items';
     };
     BreadcrumbItemsDirective = __decorate$5([
         EJComponentDecorator({}, isExecute$5)
+        ,Options({
+            inject: {
+                custom: {
+                    default: null
+                }
+            }
+        })
     ], BreadcrumbItemsDirective);
     return BreadcrumbItemsDirective;
 }(vueImport$2));
@@ -819,6 +909,7 @@ var BreadcrumbComponent = /** @__PURE__ @class */ (function (_super) {
         _this.ej2Instances._setProperties = _this.ej2Instances.setProperties;
         _this.ej2Instances.setProperties = _this.setProperties;
         _this.ej2Instances.clearTemplate = _this.clearTemplate;
+        _this.updated = _this.updated;
         return _this;
     }
     BreadcrumbComponent.prototype.clearTemplate = function (templateNames) {
@@ -915,6 +1006,9 @@ var BreadcrumbComponent = /** @__PURE__ @class */ (function (_super) {
         }
         return h('nav', slots);
     };
+    BreadcrumbComponent.prototype.custom = function () {
+        this.updated();
+    };
     BreadcrumbComponent = __decorate$6([
         EJComponentDecorator({
             props: properties$3,
@@ -925,7 +1019,12 @@ var BreadcrumbComponent = /** @__PURE__ @class */ (function (_super) {
         ,Options({
             props: props,
             watch: watch,
-            emits: emitProbs
+            emits: emitProbs,
+            provide: function provide() {
+                return {
+                    custom: this.custom
+                };
+            }
         })
     ], BreadcrumbComponent);
     return BreadcrumbComponent;
@@ -958,6 +1057,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}}
 var isExecute$7 = gh ? false : true;
 var vueImport$3;
 if (!isExecute$7 || parseInt(allVue.version) < 3) {
@@ -966,22 +1066,344 @@ if (!isExecute$7 || parseInt(allVue.version) < 3) {
 else {
     vueImport$3 = Vue$1;
 }
+var CarouselItemsDirective = /** @__PURE__ @class */ (function (_super) {
+    __extends$7(CarouselItemsDirective, _super);
+    function CarouselItemsDirective() {
+        return _super.call(this, arguments) || this;
+    }
+    CarouselItemsDirective.prototype.render = function (createElement) {
+        if (gh) {
+            var h = gh || createElement;
+            var slots = null;
+            if (!isNullOrUndefined(this.$slots.default)) {
+                slots = gh ? this.$slots.default() : this.$slots.default;
+            }
+            return h('div', { class: 'e-directive' }, slots);
+        }
+        return;
+    };
+    CarouselItemsDirective.prototype.updated = function () {
+        if (gh && this.custom) {
+            this.custom();
+        }
+    };
+    CarouselItemsDirective.prototype.getTag = function () {
+        return 'e-carousel-items';
+    };
+    CarouselItemsDirective = __decorate$7([
+        EJComponentDecorator({}, isExecute$7)
+        ,Options({
+            inject: {
+                custom: {
+                    default: null
+                }
+            }
+        })
+    ], CarouselItemsDirective);
+    return CarouselItemsDirective;
+}(vueImport$3));
+var CarouselItemsPlugin = {
+    name: 'e-carousel-items',
+    install: function (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>
+ * ```
+ */
+var CarouselItemDirective = /** @__PURE__ @class */ (function (_super) {
+    __extends$7(CarouselItemDirective, _super);
+    function CarouselItemDirective() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    CarouselItemDirective.prototype.render = function () {
+        return;
+    };
+    CarouselItemDirective.prototype.getTag = function () {
+        return 'e-carousel-item';
+    };
+    CarouselItemDirective = __decorate$7([
+        EJComponentDecorator({}, isExecute$7)
+    ], CarouselItemDirective);
+    return CarouselItemDirective;
+}(vueImport$3));
+var CarouselItemPlugin = {
+    name: 'e-carousel-item',
+    install: function (Vue$$1) {
+        Vue$$1.component(CarouselItemPlugin.name, CarouselItemDirective);
+    }
+};
+
+var __extends$8 = (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$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}}
+var 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'];
+var modelProps$4 = ['selectedIndex'];
+var testProp$4 = getProps({ props: properties$4 });
+var props$4 = testProp$4[0];
+var watch$4 = testProp$4[1];
+var emitProbs$4 = Object.keys(watch$4);
+emitProbs$4.push('modelchanged');
+for (var _i$4 = 0, modelProps_1$4 = modelProps$4; _i$4 < modelProps_1$4.length; _i$4++) {
+    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
+ * <ejs-carousel :items='carouselItems'></ejs-carousel>
+ * ```
+ */
+var CarouselComponent = /** @__PURE__ @class */ (function (_super) {
+    __extends$8(CarouselComponent, _super);
+    function CarouselComponent() {
+        var _this = _super.call(this, arguments) || this;
+        _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;
+        return _this;
+    }
+    CarouselComponent.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];
+                }
+            }
+        }
+    };
+    CarouselComponent.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]);
+                        }
+                    }
+                });
+            });
+        }
+    };
+    CarouselComponent.prototype.trigger = function (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)) {
+            var key = this.models.toString().match(/checked|value/) || [];
+            var 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)) {
+            var key = this.models.toString().match(/currentView|selectedDate/) || [];
+            var 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);
+        }
+    };
+    CarouselComponent.prototype.render = function (createElement) {
+        var h = gh || createElement;
+        var slots = null;
+        if (!isNullOrUndefined(this.$slots.default)) {
+            slots = gh ? this.$slots.default() : this.$slots.default;
+        }
+        return h('div', slots);
+    };
+    CarouselComponent.prototype.custom = function () {
+        this.updated();
+    };
+    CarouselComponent.prototype.next = function () {
+        return this.ej2Instances.next();
+    };
+    CarouselComponent.prototype.pause = function () {
+        return this.ej2Instances.pause();
+    };
+    CarouselComponent.prototype.play = function () {
+        return this.ej2Instances.play();
+    };
+    CarouselComponent.prototype.prev = function () {
+        return this.ej2Instances.prev();
+    };
+    CarouselComponent = __decorate$8([
+        EJComponentDecorator({
+            props: properties$4,
+            model: {
+                event: 'modelchanged'
+            }
+        }, isExecute$8)
+        ,Options({
+            props: props,
+            watch: watch,
+            emits: emitProbs,
+            provide: function provide() {
+                return {
+                    custom: this.custom
+                };
+            }
+        })
+    ], CarouselComponent);
+    return CarouselComponent;
+}(ComponentBase));
+var CarouselPlugin = {
+    name: 'ejs-carousel',
+    install: function (Vue$$1) {
+        Vue$$1.component(CarouselPlugin.name, CarouselComponent);
+        Vue$$1.component(CarouselItemPlugin.name, CarouselItemDirective);
+        Vue$$1.component(CarouselItemsPlugin.name, CarouselItemsDirective);
+    }
+};
+
+var __extends$9 = (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$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}}
+var isExecute$9 = gh ? false : true;
+var vueImport$4;
+if (!isExecute$9 || parseInt(allVue.version) < 3) {
+    vueImport$4 = Vue;
+}
+else {
+    vueImport$4 = Vue$1;
+}
 var TabItemsDirective = /** @__PURE__ @class */ (function (_super) {
-    __extends$7(TabItemsDirective, _super);
+    __extends$9(TabItemsDirective, _super);
     function TabItemsDirective() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        return _super.call(this, arguments) || this;
     }
-    TabItemsDirective.prototype.render = function () {
+    TabItemsDirective.prototype.render = function (createElement) {
+        if (gh) {
+            var h = gh || createElement;
+            var slots = null;
+            if (!isNullOrUndefined(this.$slots.default)) {
+                slots = gh ? this.$slots.default() : this.$slots.default;
+            }
+            return h('div', { class: 'e-directive' }, slots);
+        }
         return;
     };
+    TabItemsDirective.prototype.updated = function () {
+        if (gh && this.custom) {
+            this.custom();
+        }
+    };
     TabItemsDirective.prototype.getTag = function () {
         return 'e-tabitems';
     };
-    TabItemsDirective = __decorate$7([
-        EJComponentDecorator({}, isExecute$7)
+    TabItemsDirective = __decorate$9([
+        EJComponentDecorator({}, isExecute$9)
+        ,Options({
+            inject: {
+                custom: {
+                    default: null
+                }
+            }
+        })
     ], TabItemsDirective);
     return TabItemsDirective;
-}(vueImport$3));
+}(vueImport$4));
 var TabItemsPlugin = {
     name: 'e-tabitems',
     install: function (Vue$$1) {
@@ -1001,7 +1423,7 @@ var TabItemsPlugin = {
  * ```
  */
 var TabItemDirective = /** @__PURE__ @class */ (function (_super) {
-    __extends$7(TabItemDirective, _super);
+    __extends$9(TabItemDirective, _super);
     function TabItemDirective() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -1011,11 +1433,11 @@ var TabItemDirective = /** @__PURE__ @class */ (function (_super) {
     TabItemDirective.prototype.getTag = function () {
         return 'e-tabitem';
     };
-    TabItemDirective = __decorate$7([
-        EJComponentDecorator({}, isExecute$7)
+    TabItemDirective = __decorate$9([
+        EJComponentDecorator({}, isExecute$9)
     ], TabItemDirective);
     return TabItemDirective;
-}(vueImport$3));
+}(vueImport$4));
 var TabItemPlugin = {
     name: 'e-tabitem',
     install: function (Vue$$1) {
@@ -1023,7 +1445,7 @@ var TabItemPlugin = {
     }
 };
 
-var __extends$8 = (undefined && undefined.__extends) || (function () {
+var __extends$10 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -1036,25 +1458,25 @@ var __extends$8 = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-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}}
-var 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'];
-var modelProps$4 = [];
-var testProp$4 = getProps({ props: properties$4 });
-var props$4 = testProp$4[0];
-var watch$4 = testProp$4[1];
-var emitProbs$4 = Object.keys(watch$4);
-emitProbs$4.push('modelchanged');
-for (var _i$4 = 0, modelProps_1$4 = modelProps$4; _i$4 < modelProps_1$4.length; _i$4++) {
-    var props_1$4 = modelProps_1$4[_i$4];
-    emitProbs$4.push('update:' + props_1$4);
+var 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'];
+var modelProps$5 = [];
+var testProp$5 = getProps({ props: properties$5 });
+var props$5 = testProp$5[0];
+var watch$5 = testProp$5[1];
+var emitProbs$5 = Object.keys(watch$5);
+emitProbs$5.push('modelchanged');
+for (var _i$5 = 0, modelProps_1$5 = modelProps$5; _i$5 < modelProps_1$5.length; _i$5++) {
+    var props_1$5 = modelProps_1$5[_i$5];
+    emitProbs$5.push('update:' + props_1$5);
 }
-var isExecute$8 = gh ? false : true;
+var isExecute$10 = gh ? false : true;
 /**
  * Represents the VueJS Tab Component.
  * ```html
@@ -1062,21 +1484,22 @@ var isExecute$8 = gh ? false : true;
  * ```
  */
 var TabComponent = /** @__PURE__ @class */ (function (_super) {
-    __extends$8(TabComponent, _super);
+    __extends$10(TabComponent, _super);
     function TabComponent() {
         var _this = _super.call(this, arguments) || this;
-        _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;
         return _this;
     }
     TabComponent.prototype.clearTemplate = function (templateNames) {
@@ -1135,6 +1558,9 @@ var TabComponent = /** @__PURE__ @class */ (function (_super) {
         }
         return h('div', slots);
     };
+    TabComponent.prototype.custom = function () {
+        this.updated();
+    };
     TabComponent.prototype.addTab = function (items, index) {
         return this.ej2Instances.addTab(items, index);
     };
@@ -1162,14 +1588,19 @@ var TabComponent = /** @__PURE__ @class */ (function (_super) {
     TabComponent.prototype.select = function (args, event) {
         return this.ej2Instances.select(args, event);
     };
-    TabComponent = __decorate$8([
+    TabComponent = __decorate$10([
         EJComponentDecorator({
-            props: properties$4
-        }, isExecute$8)
+            props: properties$5
+        }, isExecute$10)
         ,Options({
             props: props,
             watch: watch,
-            emits: emitProbs
+            emits: emitProbs,
+            provide: function provide() {
+                return {
+                    custom: this.custom
+                };
+            }
         })
     ], TabComponent);
     return TabComponent;
@@ -1183,7 +1614,7 @@ var TabPlugin = {
     }
 };
 
-var __extends$9 = (undefined && undefined.__extends) || (function () {
+var __extends$11 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -1196,25 +1627,25 @@ var __extends$9 = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-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}}
-var 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'];
-var modelProps$5 = [];
-var testProp$5 = getProps({ props: properties$5 });
-var props$5 = testProp$5[0];
-var watch$5 = testProp$5[1];
-var emitProbs$5 = Object.keys(watch$5);
-emitProbs$5.push('modelchanged');
-for (var _i$5 = 0, modelProps_1$5 = modelProps$5; _i$5 < modelProps_1$5.length; _i$5++) {
-    var props_1$5 = modelProps_1$5[_i$5];
-    emitProbs$5.push('update:' + props_1$5);
+var 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'];
+var modelProps$6 = [];
+var testProp$6 = getProps({ props: properties$6 });
+var props$6 = testProp$6[0];
+var watch$6 = testProp$6[1];
+var emitProbs$6 = Object.keys(watch$6);
+emitProbs$6.push('modelchanged');
+for (var _i$6 = 0, modelProps_1$6 = modelProps$6; _i$6 < modelProps_1$6.length; _i$6++) {
+    var props_1$6 = modelProps_1$6[_i$6];
+    emitProbs$6.push('update:' + props_1$6);
 }
-var isExecute$9 = gh ? false : true;
+var isExecute$11 = gh ? false : true;
 /**
  * Represents the EJ2 VueJS TreeView Component.
  * ```html
@@ -1222,21 +1653,22 @@ var isExecute$9 = gh ? false : true;
  * ```
  */
 var TreeViewComponent = /** @__PURE__ @class */ (function (_super) {
-    __extends$9(TreeViewComponent, _super);
+    __extends$11(TreeViewComponent, _super);
     function TreeViewComponent() {
         var _this = _super.call(this, arguments) || this;
-        _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;
         return _this;
     }
     TreeViewComponent.prototype.clearTemplate = function (templateNames) {
@@ -1295,6 +1727,9 @@ var TreeViewComponent = /** @__PURE__ @class */ (function (_super) {
         }
         return h('div', slots);
     };
+    TreeViewComponent.prototype.custom = function () {
+        this.updated();
+    };
     TreeViewComponent.prototype.addNodes = function (nodes, target, index, preventTargetExpand) {
         return this.ej2Instances.addNodes(nodes, target, index, preventTargetExpand);
     };
@@ -1346,14 +1781,19 @@ var TreeViewComponent = /** @__PURE__ @class */ (function (_super) {
     TreeViewComponent.prototype.updateNode = function (target, newText) {
         return this.ej2Instances.updateNode(target, newText);
     };
-    TreeViewComponent = __decorate$9([
+    TreeViewComponent = __decorate$11([
         EJComponentDecorator({
-            props: properties$5
-        }, isExecute$9)
+            props: properties$6
+        }, isExecute$11)
         ,Options({
             props: props,
             watch: watch,
-            emits: emitProbs
+            emits: emitProbs,
+            provide: function provide() {
+                return {
+                    custom: this.custom
+                };
+            }
         })
     ], TreeViewComponent);
     return TreeViewComponent;
@@ -1365,7 +1805,7 @@ var TreeViewPlugin = {
     }
 };
 
-var __extends$10 = (undefined && undefined.__extends) || (function () {
+var __extends$12 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -1378,25 +1818,25 @@ var __extends$10 = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-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}}
-var 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'];
-var modelProps$6 = ['isOpen'];
-var testProp$6 = getProps({ props: properties$6 });
-var props$6 = testProp$6[0];
-var watch$6 = testProp$6[1];
-var emitProbs$6 = Object.keys(watch$6);
-emitProbs$6.push('modelchanged');
-for (var _i$6 = 0, modelProps_1$6 = modelProps$6; _i$6 < modelProps_1$6.length; _i$6++) {
-    var props_1$6 = modelProps_1$6[_i$6];
-    emitProbs$6.push('update:' + props_1$6);
+var 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'];
+var modelProps$7 = ['isOpen'];
+var testProp$7 = getProps({ props: properties$7 });
+var props$7 = testProp$7[0];
+var watch$7 = testProp$7[1];
+var emitProbs$7 = Object.keys(watch$7);
+emitProbs$7.push('modelchanged');
+for (var _i$7 = 0, modelProps_1$7 = modelProps$7; _i$7 < modelProps_1$7.length; _i$7++) {
+    var props_1$7 = modelProps_1$7[_i$7];
+    emitProbs$7.push('update:' + props_1$7);
 }
-var isExecute$10 = gh ? false : true;
+var isExecute$12 = gh ? false : true;
 /**
  *  Represents the Essential JS 2 VueJS Sidebar Component.
  * ```html
@@ -1404,16 +1844,16 @@ var isExecute$10 = gh ? false : true;
  * ```
  */
 var SidebarComponent = /** @__PURE__ @class */ (function (_super) {
-    __extends$10(SidebarComponent, _super);
+    __extends$12(SidebarComponent, _super);
     function SidebarComponent() {
         var _this = _super.call(this, arguments) || this;
-        _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;
@@ -1421,6 +1861,7 @@ var SidebarComponent = /** @__PURE__ @class */ (function (_super) {
         _this.ej2Instances._setProperties = _this.ej2Instances.setProperties;
         _this.ej2Instances.setProperties = _this.setProperties;
         _this.ej2Instances.clearTemplate = _this.clearTemplate;
+        _this.updated = _this.updated;
         return _this;
     }
     SidebarComponent.prototype.clearTemplate = function (templateNames) {
@@ -1472,14 +1913,14 @@ var SidebarComponent = /** @__PURE__ @class */ (function (_super) {
         }
     };
     SidebarComponent.prototype.trigger = function (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)) {
             var key = this.models.toString().match(/checked|value/) || [];
             var 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]);
                 }
@@ -1495,7 +1936,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$10) {
+                if (!isExecute$12) {
                     this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
                     this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
                 }
@@ -1517,6 +1958,9 @@ var SidebarComponent = /** @__PURE__ @class */ (function (_super) {
         }
         return h('div', slots);
     };
+    SidebarComponent.prototype.custom = function () {
+        this.updated();
+    };
     SidebarComponent.prototype.hide = function (e) {
         return this.ej2Instances.hide(e);
     };
@@ -1526,17 +1970,22 @@ var SidebarComponent = /** @__PURE__ @class */ (function (_super) {
     SidebarComponent.prototype.toggle = function () {
         return this.ej2Instances.toggle();
     };
-    SidebarComponent = __decorate$10([
+    SidebarComponent = __decorate$12([
         EJComponentDecorator({
-            props: properties$6,
+            props: properties$7,
             model: {
                 event: 'modelchanged'
             }
-        }, isExecute$10)
+        }, isExecute$12)
         ,Options({
             props: props,
             watch: watch,
-            emits: emitProbs
+            emits: emitProbs,
+            provide: function provide() {
+                return {
+                    custom: this.custom
+                };
+            }
         })
     ], SidebarComponent);
     return SidebarComponent;
@@ -1548,7 +1997,7 @@ var SidebarPlugin = {
     }
 };
 
-var __extends$11 = (undefined && undefined.__extends) || (function () {
+var __extends$13 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -1561,36 +2010,57 @@ var __extends$11 = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-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;
 };
-var isExecute$11 = gh ? false : true;
-var vueImport$4;
-if (!isExecute$11 || parseInt(allVue.version) < 3) {
-    vueImport$4 = Vue;
+// {{VueImport}}
+var isExecute$13 = gh ? false : true;
+var vueImport$5;
+if (!isExecute$13 || parseInt(allVue.version) < 3) {
+    vueImport$5 = Vue;
 }
 else {
-    vueImport$4 = Vue$1;
+    vueImport$5 = Vue$1;
 }
 var MenuItemsDirective = /** @__PURE__ @class */ (function (_super) {
-    __extends$11(MenuItemsDirective, _super);
+    __extends$13(MenuItemsDirective, _super);
     function MenuItemsDirective() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        return _super.call(this, arguments) || this;
     }
-    MenuItemsDirective.prototype.render = function () {
+    MenuItemsDirective.prototype.render = function (createElement) {
+        if (gh) {
+            var h = gh || createElement;
+            var slots = null;
+            if (!isNullOrUndefined(this.$slots.default)) {
+                slots = gh ? this.$slots.default() : this.$slots.default;
+            }
+            return h('div', { class: 'e-directive' }, slots);
+        }
         return;
     };
+    MenuItemsDirective.prototype.updated = function () {
+        if (gh && this.custom) {
+            this.custom();
+        }
+    };
     MenuItemsDirective.prototype.getTag = function () {
         return 'e-menu-items';
     };
-    MenuItemsDirective = __decorate$11([
-        EJComponentDecorator({}, isExecute$11)
+    MenuItemsDirective = __decorate$13([
+        EJComponentDecorator({}, isExecute$13)
+        ,Options({
+            inject: {
+                custom: {
+                    default: null
+                }
+            }
+        })
     ], MenuItemsDirective);
     return MenuItemsDirective;
-}(vueImport$4));
+}(vueImport$5));
 var MenuItemsPlugin = {
     name: 'e-menu-items',
     install: function (Vue$$1) {
@@ -1598,7 +2068,7 @@ var MenuItemsPlugin = {
     }
 };
 var MenuItemDirective = /** @__PURE__ @class */ (function (_super) {
-    __extends$11(MenuItemDirective, _super);
+    __extends$13(MenuItemDirective, _super);
     function MenuItemDirective() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -1608,11 +2078,11 @@ var MenuItemDirective = /** @__PURE__ @class */ (function (_super) {
     MenuItemDirective.prototype.getTag = function () {
         return 'e-';
     };
-    MenuItemDirective = __decorate$11([
-        EJComponentDecorator({}, isExecute$11)
+    MenuItemDirective = __decorate$13([
+        EJComponentDecorator({}, isExecute$13)
     ], MenuItemDirective);
     return MenuItemDirective;
-}(vueImport$4));
+}(vueImport$5));
 var MenuItemPlugin = {
     name: 'e-',
     install: function (Vue$$1) {
@@ -1620,7 +2090,7 @@ var MenuItemPlugin = {
     }
 };
 
-var __extends$12 = (undefined && undefined.__extends) || (function () {
+var __extends$14 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -1633,25 +2103,25 @@ var __extends$12 = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-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}}
-var 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'];
-var modelProps$7 = [];
-var testProp$7 = getProps({ props: properties$7 });
-var props$7 = testProp$7[0];
-var watch$7 = testProp$7[1];
-var emitProbs$7 = Object.keys(watch$7);
-emitProbs$7.push('modelchanged');
-for (var _i$7 = 0, modelProps_1$7 = modelProps$7; _i$7 < modelProps_1$7.length; _i$7++) {
-    var props_1$7 = modelProps_1$7[_i$7];
-    emitProbs$7.push('update:' + props_1$7);
+var 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'];
+var modelProps$8 = [];
+var testProp$8 = getProps({ props: properties$8 });
+var props$8 = testProp$8[0];
+var watch$8 = testProp$8[1];
+var emitProbs$8 = Object.keys(watch$8);
+emitProbs$8.push('modelchanged');
+for (var _i$8 = 0, modelProps_1$8 = modelProps$8; _i$8 < modelProps_1$8.length; _i$8++) {
+    var props_1$8 = modelProps_1$8[_i$8];
+    emitProbs$8.push('update:' + props_1$8);
 }
-var isExecute$12 = gh ? false : true;
+var isExecute$14 = gh ? false : true;
 /**
  * Represents the Essential JS 2 VueJS Menu Component.
  * ```html
@@ -1659,21 +2129,22 @@ var isExecute$12 = gh ? false : true;
  * ```
  */
 var MenuComponent = /** @__PURE__ @class */ (function (_super) {
-    __extends$12(MenuComponent, _super);
+    __extends$14(MenuComponent, _super);
     function MenuComponent() {
         var _this = _super.call(this, arguments) || this;
-        _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;
         return _this;
     }
     MenuComponent.prototype.clearTemplate = function (templateNames) {
@@ -1732,6 +2203,9 @@ var MenuComponent = /** @__PURE__ @class */ (function (_super) {
         }
         return h('ul', slots);
     };
+    MenuComponent.prototype.custom = function () {
+        this.updated();
+    };
     MenuComponent.prototype.close = function () {
         return this.ej2Instances.close();
     };
@@ -1762,14 +2236,19 @@ var MenuComponent = /** @__PURE__ @class */ (function (_super) {
     MenuComponent.prototype.showItems = function (items, isUniqueId) {
         return this.ej2Instances.showItems(items, isUniqueId);
     };
-    MenuComponent = __decorate$12([
+    MenuComponent = __decorate$14([
         EJComponentDecorator({
-            props: properties$7
-        }, isExecute$12)
+            props: properties$8
+        }, isExecute$14)
         ,Options({
             props: props,
             watch: watch,
-            emits: emitProbs
+            emits: emitProbs,
+            provide: function provide() {
+                return {
+                    custom: this.custom
+                };
+            }
         })
     ], MenuComponent);
     return MenuComponent;
@@ -1783,6 +2262,6 @@ var 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.es5.js.map