@syncfusion/ej2-vue-base 20.4.51 → 21.1.36

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

@@ -1,62 +1,43 @@
+import * as Vue from 'vue';
 import { createElement, detach, extend, getTemplateEngine, getUniqueID, getValue, isNullOrUndefined, setTemplateEngine } from '@syncfusion/ej2-base';
-import { Vue } from 'vue-class-component';
-import * as Vue$1 from 'vue';
-import Vue$1__default from 'vue';
 
 /**
  * Vue Component Base
  */
-var __extends = (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 aVue = _interopRequireWildcard(Vue$1);
-function _interopRequireWildcard(obj) {
-    if (obj && obj.__esModule) {
-        return obj;
-    }
-    else {
-        var newObj = {};
-        if (obj != null) {
-            for (var key in obj) {
-                if (Object.prototype.hasOwnProperty.call(obj, key))
-                    newObj["" + key] = obj["" + key];
-            }
-        }
-        newObj.default = obj;
-        return newObj;
-    }
-}
-var allVue = aVue;
-var gh = allVue.h;
-var isExecute = (parseInt(allVue.version) > 2) ? false : true;
-var vueImport;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport = Vue;
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) {
+    return obj;
 }
 else {
-    vueImport = Vue$1__default;
-}
-var ComponentBase = /** @__PURE__ @class */ (function (_super) {
-    __extends(ComponentBase, _super);
-    function ComponentBase() {
-        var _this = _super.call(this, arguments) || this;
-        _this.hasInjectedModules = false;
-        _this.hasChildDirective = false;
-        _this.childDirObjects = '';
-        _this.isDecorator = false;
-        return _this;
+    var newObj = {};
+    if (obj != null) {
+        for (var key in obj) {
+            if (Object.prototype.hasOwnProperty.call(obj, key))
+                newObj["" + key] = obj["" + key];
+        }
     }
-    ComponentBase.prototype.created = function () {
+    newObj.default = obj;
+    return newObj;
+} }
+var curVue = _interopRequireWildcard(Vue);
+var isExecute = (parseInt(curVue['version']) > 2) ? false : true;
+var aVue = !isExecute ? curVue : curVue['default'];
+var gh = curVue['h'];
+var vueDefineComponent = function (options) { return !isExecute ? aVue['defineComponent'](options) : aVue['extend'](options); };
+var ComponentBase = vueDefineComponent({
+    name: 'ComponentBase',
+    data: function () {
+        return {
+            ej2Instances: {},
+            tagMapper: {},
+            tagNameMapper: {},
+            hasInjectedModules: false,
+            hasChildDirective: false,
+            childDirObjects: '',
+            propKeys: {},
+            isDecorator: false
+        };
+    },
+    created: function () {
         var _this = this;
         if (!this.propKeys) {
             return;
@@ -95,8 +76,8 @@ var ComponentBase = /** @__PURE__ @class */ (function (_super) {
             }
             this.ej2Instances.injectedModules = prevModule;
         }
-    };
-    ComponentBase.prototype.mounted = function () {
+    },
+    mounted: function () {
         var cusEle = this.$el ? this.$el.querySelectorAll("div.e-directive") : null;
         if (!isExecute && cusEle) {
             for (var i = 0; i < cusEle.length; i++) {
@@ -112,79 +93,8 @@ var ComponentBase = /** @__PURE__ @class */ (function (_super) {
             this.setModelValue();
         }
         this.ej2Instances.appendTo(this.$el);
-    };
-    ComponentBase.prototype.setModelValue = function () {
-        if (!isNullOrUndefined(this.modelValue) || !isNullOrUndefined(this.$attrs.modelValue)) {
-            var key = this.models.toString().match(/checked|value/) || [];
-            var propKey = key[0];
-            if (!isNullOrUndefined(propKey)) {
-                this.ej2Instances["" + propKey] = !isNullOrUndefined(this.modelValue) ? this.modelValue : this.$attrs.modelValue;
-            }
-        }
-    };
-    ComponentBase.prototype.getInjectedServices = function () {
-        var ret = [];
-        var provide;
-        if (this.$root && this.isDecorator) {
-            provide = getValue('$root.$options.provide', this);
-        }
-        else if (this.$vnode) {
-            provide = getValue('$vnode.context.$options.provide', this);
-        }
-        else if (this.$parent) {
-            provide = getValue('$parent.$options.provide', this);
-        }
-        if (isNullOrUndefined(provide) && !isNullOrUndefined(this.$)) {
-            provide = getValue('$.parent.provides', this);
-        }
-        if (provide) {
-            // tslint:disable:no-any
-            var injectables = provide;
-            if (typeof provide === 'function') {
-                if (provide.managed) {
-                    var provideKey = provide.managed;
-                    var provideValue = Object.keys(provideKey);
-                    var key = void 0;
-                    if (this.$root && this.isDecorator) {
-                        key = Object.keys(this.$root);
-                    }
-                    else if (this.$vnode) {
-                        key = Object.keys(this.$vnode.context);
-                    }
-                    else if (this.$parent) {
-                        key = Object.keys(this.$parent);
-                    }
-                    for (var i = 0; i < provideValue.length; i++) {
-                        for (var j = 0; j < key.length; j++) {
-                            if ((key[parseInt(j.toString(), 10)].indexOf(provideValue[parseInt(i.toString(), 10)])) !== -1) {
-                                if (this.$root && this.isDecorator) {
-                                    provideKey[provideValue[parseInt(j.toString(), 10)]] = this.$root[key[parseInt(i.toString(), 10)]];
-                                }
-                                else if (this.$vnode) {
-                                    provideKey[provideValue[parseInt(i.toString(), 10)]] = this.$vnode.context[key[parseInt(j.toString(), 10)]];
-                                }
-                                else if (this.$parent) {
-                                    provideKey[provideValue[parseInt(i.toString(), 10)]] = this.$parent[key[parseInt(j.toString(), 10)]];
-                                }
-                                injectables = provideKey;
-                            }
-                        }
-                    }
-                }
-                // tslint:disable:no-any
-                else if (this.$vnode) {
-                    injectables = this.$vnode.context.$options.provide();
-                }
-                else if (this.$parent) {
-                    injectables = this.$parent.$options.provide();
-                }
-            }
-            ret = injectables[this.ej2Instances.getModuleName()] || [];
-        }
-        this.isDecorator = false;
-        return ret;
-    };
-    ComponentBase.prototype.updated = function () {
+    },
+    updated: function () {
         if (this.isVue3) {
             this.setModelValue();
         }
@@ -197,399 +107,460 @@ var ComponentBase = /** @__PURE__ @class */ (function (_super) {
                 this.assignValueToWrapper(childKey, false);
             }
         }
-    };
-    ComponentBase.prototype.beforeDestroy = function () {
+    },
+    beforeDestroy: function () {
         this.destroyComponent();
-    };
-    ComponentBase.prototype.beforeUnmount = function () {
+    },
+    beforeUnmount: function () {
         this.destroyComponent();
-    };
-    ComponentBase.prototype.destroyComponent = function () {
-        var tempBeforeDestroyThis = this;
-        tempBeforeDestroyThis.ej2Instances.destroy();
-        tempBeforeDestroyThis.$el.style.visibility = 'hidden';
-        tempBeforeDestroyThis = null;
-    };
-    ComponentBase.prototype.bindProperties = function () {
-        var options = {};
-        for (var _i = 0, _a = this.propKeys; _i < _a.length; _i++) {
-            var prop = _a[_i];
-            if ((!isNullOrUndefined(this["" + prop]) && !this.isVue3) || (this[0] && !isNullOrUndefined(this[0][0]) && !isNullOrUndefined(this[0][0]["" + prop]))) {
-                options["" + prop] = !this.isVue3 ? this["" + prop] : this[0][0]["" + prop];
-            }
-        }
-        if (this.hasChildDirective) {
-            this.fetchChildPropValues(options);
-        }
-        if (this.hasInjectedModules) {
-            var prevModule = this.getInjectedServices() || [];
-            var curModule = this.ej2Instances.getInjectedModules() || [];
-            for (var _b = 0, curModule_2 = curModule; _b < curModule_2.length; _b++) {
-                var mod = curModule_2[_b];
-                if (prevModule.indexOf(mod) === -1) {
-                    prevModule.push(mod);
+    },
+    methods: {
+        setModelValue: function () {
+            if (!isNullOrUndefined(this.modelValue) || !isNullOrUndefined(this.$attrs.modelValue)) {
+                var key = this.models.toString().match(/checked|value/) || [];
+                var propKey = key[0];
+                if (!isNullOrUndefined(propKey)) {
+                    this.ej2Instances["" + propKey] = !isNullOrUndefined(this.modelValue) ? this.modelValue : this.$attrs.modelValue;
                 }
             }
-            this.ej2Instances.injectedModules = prevModule;
-        }
-        this.assignValueToWrapper(options);
-    };
-    ComponentBase.prototype.assignValueToWrapper = function (option, silent) {
-        this.ej2Instances.setProperties(extend({}, {}, option, true), isNullOrUndefined(silent) ? true : silent);
-    };
-    ComponentBase.prototype.fetchChildPropValues = function (childOption) {
-        var dirProps = {};
-        if (!this.isVue3) {
-            dirProps = this.getDirectiveValues(this.$slots.default, this.tagMapper || {}, this.tagNameMapper || {});
-        }
-        else {
-            var propRef = void 0;
-            if (this[0] && this[0][1].slots.default) {
-                propRef = this[0][1].slots.default();
-            }
-            else if (this && this.$ && this.$.slots && this.$.slots.default) {
-                propRef = this.$.slots.default();
-            }
-            if (propRef) {
-                for (var i = 0; i < propRef.length; i++) {
-                    if (propRef[parseInt(i.toString(), 10)].type.methods || propRef[parseInt(i.toString(), 10)].type === 'e-seriescollection') {
-                        var key = propRef[parseInt(i.toString(), 10)].type === 'e-seriescollection' ? 'series-collection' :
-                            propRef[parseInt(i.toString(), 10)].type.methods.getTag().replace("e-", "");
-                        var ref = this.resolveArrayDirectives(propRef[parseInt(i.toString(), 10)].children, key);
-                        var splitKeys = key.split('-');
-                        var controlName = this.ej2Instances.getModuleName().toLowerCase();
-                        var keyRef = (splitKeys.length > 1 && controlName.indexOf(splitKeys[0]) > -1) ? splitKeys[1] : splitKeys[0];
-                        keyRef = keyRef.replace(controlName, '');
-                        if (controlName == "splitter" && keyRef == "panes") {
-                            keyRef = "paneSettings";
+        },
+        getInjectedServices: function () {
+            var ret = [];
+            var provide;
+            if (this.$root && this.isDecorator) {
+                provide = getValue('$root.$options.provide', this);
+            }
+            else if (this.$vnode) {
+                provide = getValue('$vnode.context.$options.provide', this);
+            }
+            else if (this.$parent) {
+                provide = getValue('$parent.$options.provide', this);
+            }
+            if (isNullOrUndefined(provide) && !isNullOrUndefined(this.$)) {
+                provide = getValue('$.parent.provides', this);
+            }
+            if (provide) {
+                // tslint:disable:no-any
+                var injectables = provide;
+                if (typeof provide === 'function') {
+                    if (provide.managed) {
+                        var provideKey = provide.managed;
+                        var provideValue = Object.keys(provideKey);
+                        var key = void 0;
+                        if (this.$root && this.isDecorator) {
+                            key = Object.keys(this.$root);
                         }
-                        else if (controlName == "bulletchart" && keyRef == "range") {
-                            keyRef = "ranges";
+                        else if (this.$vnode) {
+                            key = Object.keys(this.$vnode.context);
                         }
-                        else if (controlName == "schedule" && keyRef == "header") {
-                            keyRef = "headerRows";
+                        else if (this.$parent) {
+                            key = Object.keys(this.$parent);
+                        }
+                        for (var i = 0; i < provideValue.length; i++) {
+                            for (var j = 0; j < key.length; j++) {
+                                if ((key[parseInt(j.toString(), 10)].indexOf(provideValue[parseInt(i.toString(), 10)])) !== -1) {
+                                    if (this.$root && this.isDecorator) {
+                                        provideKey[provideValue[parseInt(j.toString(), 10)]] = this.$root[key[parseInt(i.toString(), 10)]];
+                                    }
+                                    else if (this.$vnode) {
+                                        provideKey[provideValue[parseInt(i.toString(), 10)]] = this.$vnode.context[key[parseInt(j.toString(), 10)]];
+                                    }
+                                    else if (this.$parent) {
+                                        provideKey[provideValue[parseInt(i.toString(), 10)]] = this.$parent[key[parseInt(j.toString(), 10)]];
+                                    }
+                                    injectables = provideKey;
+                                }
+                            }
                         }
-                        dirProps["" + keyRef] = ref["" + key];
+                    }
+                    // tslint:disable:no-any
+                    else if (this.$vnode) {
+                        injectables = this.$vnode.context.$options.provide();
+                    }
+                    else if (this.$parent) {
+                        injectables = this.$parent.$options.provide();
                     }
                 }
+                ret = injectables[this.ej2Instances.getModuleName()] || [];
+            }
+            this.isDecorator = false;
+            return ret;
+        },
+        destroyComponent: function () {
+            var tempBeforeDestroyThis = this;
+            tempBeforeDestroyThis.ej2Instances.destroy();
+            tempBeforeDestroyThis.$el.style.visibility = 'hidden';
+            tempBeforeDestroyThis = null;
+        },
+        bindProperties: function () {
+            var options = {};
+            for (var _i = 0, _a = this.propKeys; _i < _a.length; _i++) {
+                var prop = _a[_i];
+                if (!isNullOrUndefined(this["" + prop])) {
+                    options["" + prop] = this["" + prop];
+                }
+                else if (this[0] && !isNullOrUndefined(this[0][0]) && !isNullOrUndefined(this[0][0]["" + prop])) {
+                    options["" + prop] = this[0][0]["" + prop];
+                }
+            }
+            if (this.hasChildDirective) {
+                this.fetchChildPropValues(options);
+            }
+            if (this.hasInjectedModules) {
+                var prevModule = this.getInjectedServices() || [];
+                var curModule = this.ej2Instances.getInjectedModules() || [];
+                for (var _b = 0, curModule_2 = curModule; _b < curModule_2.length; _b++) {
+                    var mod = curModule_2[_b];
+                    if (prevModule.indexOf(mod) === -1) {
+                        prevModule.push(mod);
+                    }
+                }
+                this.ej2Instances.injectedModules = prevModule;
             }
-            else {
-                return;
+            this.assignValueToWrapper(options);
+        },
+        assignValueToWrapper: function (option, silent) {
+            this.ej2Instances.setProperties(extend({}, {}, option, true), isNullOrUndefined(silent) ? true : silent);
+        },
+        fetchChildPropValues: function (childOption) {
+            var dirProps = {};
+            if (!this.isVue3) {
+                dirProps = this.getDirectiveValues(this.$slots.default, this.tagMapper || {}, this.tagNameMapper || {});
             }
-        }
-        if (!this.childDirObjects) {
-            this.childDirObjects = JSON.stringify(dirProps);
-        }
-        for (var _i = 0, _a = Object.keys(dirProps); _i < _a.length; _i++) {
-            var dirProp = _a[_i];
-            childOption["" + dirProp] = dirProps["" + dirProp];
-        }
-    };
-    ComponentBase.prototype.resolveArrayDirectives = function (slots, tagName) {
-        var slot = [];
-        var innerDirValues;
-        slot = slots.default ? slots.default() : slots;
-        var items = {};
-        items["" + tagName] = [];
-        var _loop_2 = function (childSlot) {
-            var tempObj = {};
-            var tagRef = childSlot.type.methods ? childSlot.type.methods.getTag() : tagName;
-            if (childSlot.children) {
-                var key = void 0;
-                innerDirValues = this_2.resolveComplexDirs(childSlot.children, this_2.tagMapper["e-" + tagName], tagRef);
-                if (innerDirValues.length) {
-                    tempObj = innerDirValues;
+            else {
+                var propRef = void 0;
+                if (this[0] && this[0][1].slots.default) {
+                    propRef = this[0][1].slots.default();
+                }
+                else if (this && this.$ && this.$.slots && this.$.slots.default) {
+                    propRef = this.$.slots.default();
+                }
+                if (propRef) {
+                    for (var i = 0; i < propRef.length; i++) {
+                        if (propRef[parseInt(i.toString(), 10)].type.methods || propRef[parseInt(i.toString(), 10)].type === 'e-seriescollection') {
+                            var key = propRef[parseInt(i.toString(), 10)].type === 'e-seriescollection' ? 'series-collection' :
+                                propRef[parseInt(i.toString(), 10)].type.methods.getTag().replace("e-", "");
+                            var ref = this.resolveArrayDirectives(propRef[parseInt(i.toString(), 10)].children, key);
+                            var splitKeys = key.split('-');
+                            var controlName = this.ej2Instances.getModuleName().toLowerCase();
+                            var keyRef = (splitKeys.length > 1 && controlName.indexOf(splitKeys[0]) > -1) ? splitKeys[1] : splitKeys[0];
+                            keyRef = keyRef.replace(controlName, '');
+                            if (controlName == "splitter" && keyRef == "panes") {
+                                keyRef = "paneSettings";
+                            }
+                            else if (controlName == "bulletchart" && keyRef == "range") {
+                                keyRef = "ranges";
+                            }
+                            else if (controlName == "schedule" && keyRef == "header") {
+                                keyRef = "headerRows";
+                            }
+                            dirProps["" + keyRef] = ref["" + key];
+                        }
+                    }
                 }
                 else {
-                    for (var i = 0; i < Object.keys(innerDirValues).length; i++) {
-                        key = Object.keys(innerDirValues)[parseInt(i.toString(), 10)];
-                        tempObj["" + key] = innerDirValues["" + key];
+                    return;
+                }
+            }
+            if (!this.childDirObjects) {
+                this.childDirObjects = JSON.stringify(dirProps);
+            }
+            for (var _i = 0, _a = Object.keys(dirProps); _i < _a.length; _i++) {
+                var dirProp = _a[_i];
+                childOption["" + dirProp] = dirProps["" + dirProp];
+            }
+        },
+        resolveArrayDirectives: function (slots, tagName) {
+            var slot = [];
+            var innerDirValues;
+            slot = slots.default ? slots.default() : slots;
+            var items = {};
+            items["" + tagName] = [];
+            var _loop_2 = function (childSlot) {
+                var tempObj = {};
+                var tagRef = childSlot.type.methods ? childSlot.type.methods.getTag() : tagName;
+                if (childSlot.children) {
+                    var key = void 0;
+                    innerDirValues = this_2.resolveComplexDirs(childSlot.children, this_2.tagMapper["e-" + tagName], tagRef);
+                    if (innerDirValues.length) {
+                        tempObj = innerDirValues;
+                    }
+                    else {
+                        for (var i = 0; i < Object.keys(innerDirValues).length; i++) {
+                            key = Object.keys(innerDirValues)[parseInt(i.toString(), 10)];
+                            tempObj["" + key] = innerDirValues["" + key];
+                        }
                     }
-                    
                 }
-            }
-            if (childSlot.props) {
-                Object.keys(childSlot.props).forEach(function (key) {
-                    var propName = key.replace(/-[a-z]/g, function (e) { return e[1].toUpperCase(); });
-                    if (propName) {
-                        tempObj["" + propName] = childSlot.props["" + key];
+                if (childSlot.props) {
+                    Object.keys(childSlot.props).forEach(function (key) {
+                        var propName = key.replace(/-[a-z]/g, function (e) { return e[1].toUpperCase(); });
+                        if (propName) {
+                            tempObj["" + propName] = childSlot.props["" + key];
+                        }
+                    });
+                }
+                if (((/[s]\b/).test(tagRef) && innerDirValues) && (!(/[s]\b/).test(tagName) || innerDirValues.length)) {
+                    items["" + tagName] = tempObj;
+                }
+                else if (tempObj && Object.keys(tempObj).length !== 0) {
+                    items["" + tagName].push(tempObj);
+                }
+            };
+            var this_2 = this;
+            for (var _i = 0, slot_1 = slot; _i < slot_1.length; _i++) {
+                var childSlot = slot_1[_i];
+                _loop_2(childSlot);
+            }
+            return items;
+        },
+        resolveComplexDirs: function (slots, tagObject, tagName) {
+            var slot = [];
+            var innerDirValues;
+            slot = slots.default ? slots.default() : slots;
+            var items = {};
+            var _loop_3 = function (childSlot) {
+                var tagRef = void 0;
+                var tag = void 0;
+                if (tagObject["" + tagName]) {
+                    tagRef = Object.keys(tagObject["" + tagName]);
+                    tag = tagRef.find(function (key) {
+                        return tagObject["" + tagName]["" + key] ===
+                            childSlot.type.methods.getTag().replace(/[s]\b/, "");
+                    });
+                    var moduleName = this_3.ej2Instances.getModuleName().toLowerCase();
+                    tag = tag
+                        ? tag.replace("e-", "")
+                        : childSlot.type.methods.getTag().replace(moduleName === "ribbon" ? "e-ribbon-" : "e-", "");
+                    if (this_3.ej2Instances.getModuleName().toLowerCase() == "diagram" && tag.indexOf('annotations') != -1) {
+                        tag = 'annotations';
                     }
-                });
-            }
-            if (((/[s]\b/).test(tagRef) && innerDirValues) && (!(/[s]\b/).test(tagName) || innerDirValues.length)) {
-                items["" + tagName] = tempObj;
-            }
-            else if (tempObj && Object.keys(tempObj).length !== 0) {
-                items["" + tagName].push(tempObj);
-            }
-        };
-        var this_2 = this;
-        for (var _i = 0, slot_1 = slot; _i < slot_1.length; _i++) {
-            var childSlot = slot_1[_i];
-            _loop_2(childSlot);
-        }
-        return items;
-    };
-    ComponentBase.prototype.resolveComplexDirs = function (slots, tagObject, tagName) {
-        var slot = [];
-        var innerDirValues;
-        slot = slots.default ? slots.default() : slots;
-        var items = {};
-        var _loop_3 = function (childSlot) {
-            var tagRef = void 0;
-            var tag = void 0;
-            if (tagObject["" + tagName]) {
-                tagRef = Object.keys(tagObject["" + tagName]);
-                tag = tagRef.find(function (key) {
-                    return tagObject["" + tagName]["" + key] ===
-                        childSlot.type.methods.getTag().replace(/[s]\b/, "");
-                });
-                tag = tag
-                    ? tag.replace("e-", "")
-                    : childSlot.type.methods.getTag().replace("e-", "");
-                if (this_3.ej2Instances.getModuleName().toLowerCase() == "diagram" && tag.indexOf('annotations') != -1) {
-                    tag = 'annotations';
-                }
-            }
-            if (childSlot.children) {
-                innerDirValues = this_3.resolveComplexInnerDirs(childSlot.children, tagObject["" + tagName], childSlot.type.methods.getTag());
-                if (!items["" + tag]) {
-                    items["" + tag] = [];
-                }
-                if (innerDirValues.length > 1) {
-                    items["" + tag] = innerDirValues;
                 }
-                else {
-                    items["" + tag].push(innerDirValues);
+                if (childSlot.children) {
+                    innerDirValues = this_3.resolveComplexInnerDirs(childSlot.children, tagObject["" + tagName], childSlot.type.methods.getTag());
+                    if (!items["" + tag]) {
+                        items["" + tag] = [];
+                    }
+                    if (innerDirValues.length > 1) {
+                        items["" + tag] = innerDirValues;
+                    }
+                    else {
+                        items["" + tag].push(innerDirValues);
+                    }
                 }
-            }
-            if (childSlot.props) {
-                childSlot.props = this_3.getCamelCaseProps(childSlot.props);
-            }
-            if (slot.length > 1) {
-                items = Object.keys(items).length == 0 && !items.length ? [] : items;
                 if (childSlot.props) {
-                    items.push(childSlot.props);
+                    childSlot.props = this_3.getCamelCaseProps(childSlot.props);
                 }
-            }
-            else {
-                items = childSlot.props ? Object.assign(items, childSlot.props) : items;
-            }
-        };
-        var this_3 = this;
-        for (var _i = 0, slot_2 = slot; _i < slot_2.length; _i++) {
-            var childSlot = slot_2[_i];
-            _loop_3(childSlot);
-        }
-        return items;
-    };
-    ComponentBase.prototype.resolveComplexInnerDirs = function (slots, tagObject, tagName) {
-        var slot = [];
-        var innerDirValues;
-        slot = slots.default ? slots.default() : slots;
-        var items = slot.length > 1 ? [] : {};
-        for (var _i = 0, slot_3 = slot; _i < slot_3.length; _i++) {
-            var childSlot = slot_3[_i];
-            var tag = childSlot.type.methods.getTag().replace("e-", "");
-            if (childSlot.children) {
-                innerDirValues = this.resolveMultilevelComplexInnerDirs(childSlot.children, tagObject["" + tagName], childSlot.type.methods.getTag());
-                if ((/[s]\b/).test(tag) || slot.length > 1) {
-                    if ((/[s]\b/).test(tag)) {
-                        items["" + tag] = !items["" + tag] ? [] : items["" + tag];
-                        if (innerDirValues.length) {
-                            items["" + tag] = innerDirValues;
+                if (slot.length > 1) {
+                    items = Object.keys(items).length == 0 && !items.length ? [] : items;
+                    if (childSlot.props) {
+                        items.push(childSlot.props);
+                    }
+                }
+                else {
+                    items = childSlot.props ? Object.assign(items, childSlot.props) : items;
+                }
+            };
+            var this_3 = this;
+            for (var _i = 0, slot_2 = slot; _i < slot_2.length; _i++) {
+                var childSlot = slot_2[_i];
+                _loop_3(childSlot);
+            }
+            return items;
+        },
+        resolveComplexInnerDirs: function (slots, tagObject, tagName) {
+            var slot = [];
+            var innerDirValues;
+            slot = slots.default ? slots.default() : slots;
+            var items = slot.length > 1 ? [] : {};
+            for (var _i = 0, slot_3 = slot; _i < slot_3.length; _i++) {
+                var childSlot = slot_3[_i];
+                var isRibbon = (this.ej2Instances.getModuleName().toLowerCase() == "ribbon");
+                var tag = childSlot.type.methods.getTag().replace(isRibbon ? "e-ribbon-" : "e-", "");
+                if (childSlot.children) {
+                    innerDirValues = this.resolveMultilevelComplexInnerDirs(childSlot.children, tagObject["" + tagName], childSlot.type.methods.getTag());
+                    if ((/[s]\b/).test(tag) || slot.length > 1) {
+                        if ((/[s]\b/).test(tag)) {
+                            items["" + tag] = !items["" + tag] ? [] : items["" + tag];
+                            if (innerDirValues.length) {
+                                items["" + tag] = innerDirValues;
+                            }
+                            else {
+                                items["" + tag].push(innerDirValues);
+                            }
                         }
-                        else {
-                            items["" + tag].push(innerDirValues);
+                        else if (innerDirValues && !(isRibbon && innerDirValues.hasOwnProperty('collections'))) {
+                            items.push(innerDirValues);
                         }
                     }
-                    else if (innerDirValues) {
-                        items.push(innerDirValues);
+                    else {
+                        items = innerDirValues ? innerDirValues : items;
                     }
                 }
-                else {
-                    items = innerDirValues ? innerDirValues : items;
+                if (childSlot.props) {
+                    childSlot.props = this.getCamelCaseProps(childSlot.props);
                 }
-            }
-            if (childSlot.props) {
-                childSlot.props = this.getCamelCaseProps(childSlot.props);
-            }
-            if (slot.length > 1 && childSlot.props) {
-                if (items.length >= 0) {
-                    items.push(childSlot.props);
+                if (slot.length > 1 && childSlot.props) {
+                    if (isRibbon && innerDirValues && innerDirValues.hasOwnProperty('collections')) {
+                        innerDirValues = childSlot.props ? Object.assign(innerDirValues, childSlot.props) : innerDirValues;
+                        items.push(innerDirValues);
+                    }
+                    else if (items.length >= 0) {
+                        items.push(childSlot.props);
+                    }
+                    else {
+                        items = childSlot.props ? Object.assign(items, childSlot.props) : items;
+                    }
                 }
                 else {
                     items = childSlot.props ? Object.assign(items, childSlot.props) : items;
                 }
             }
-            else {
-                items = childSlot.props ? Object.assign(items, childSlot.props) : items;
-            }
-        }
-        return items;
-    };
-    ComponentBase.prototype.resolveMultilevelComplexInnerDirs = function (slots, tagObject, tagName) {
-        var slot = [];
-        var innerDirValues;
-        slot = slots.default ? slots.default() : slots;
-        var items = slot.length > 1 ? [] : {};
-        for (var _i = 0, slot_4 = slot; _i < slot_4.length; _i++) {
-            var childSlot = slot_4[_i];
-            var tag = childSlot.type.methods.getTag().replace("e-", "");
-            if (childSlot.children) {
-                innerDirValues = this.resolveComplexInnerDirs(childSlot.children, tagObject["" + tagName], childSlot.type.methods.getTag());
-            }
-            if (childSlot.props) {
-                childSlot.props = this.getCamelCaseProps(childSlot.props);
-            }
-            if ((/[s]\b/).test(tag)) {
-                items["" + tag] = !items["" + tag] ? [] : items["" + tag];
-                if (innerDirValues.length) {
-                    items["" + tag] = innerDirValues;
-                }
-                else {
-                    items["" + tag].push(innerDirValues);
+            return items;
+        },
+        resolveMultilevelComplexInnerDirs: function (slots, tagObject, tagName) {
+            var slot = [];
+            var innerDirValues;
+            slot = slots.default ? slots.default() : slots;
+            var items = slot.length > 1 ? [] : {};
+            for (var _i = 0, slot_4 = slot; _i < slot_4.length; _i++) {
+                var childSlot = slot_4[_i];
+                var moduleName = this.ej2Instances.getModuleName().toLowerCase();
+                var tag = childSlot.type.methods.getTag().replace(moduleName === "ribbon" ? "e-ribbon-" : "e-", "");
+                if (childSlot.children) {
+                    innerDirValues = this.resolveComplexInnerDirs(childSlot.children, tagObject["" + tagName], childSlot.type.methods.getTag());
                 }
                 if (childSlot.props) {
-                    items["" + tag].push(childSlot.props);
+                    childSlot.props = this.getCamelCaseProps(childSlot.props);
+                }
+                if ((/[s]\b/).test(tag)) {
+                    items["" + tag] = !items["" + tag] ? [] : items["" + tag];
+                    if (innerDirValues.length) {
+                        items["" + tag] = innerDirValues;
+                    }
+                    else {
+                        items["" + tag].push(innerDirValues);
+                    }
+                    if (childSlot.props) {
+                        items["" + tag].push(childSlot.props);
+                    }
+                }
+                else {
+                    items = innerDirValues;
+                    items = childSlot.props ? Object.assign(items, childSlot.props) : items;
                 }
             }
-            else {
-                items = innerDirValues;
-                items = childSlot.props ? Object.assign(items, childSlot.props) : items;
-            }
-        }
-        return items;
-    };
-    ComponentBase.prototype.getDirectiveValues = function (tagDirectives, tagMapper, tagNameMapper) {
-        var keyTags = Object.keys(tagMapper);
-        var dir = {};
-        if (tagDirectives) {
-            for (var _i = 0, tagDirectives_1 = tagDirectives; _i < tagDirectives_1.length; _i++) {
-                var tagDirective = tagDirectives_1[_i];
-                if (tagDirective.componentOptions && tagDirective.componentOptions.children && tagDirective.componentOptions.tag ||
-                    (tagDirective.tag === 'e-seriescollection' && tagDirective.children)) {
-                    var dirTag = tagDirective.componentOptions ? tagDirective.componentOptions.tag : tagDirective.tag;
-                    dirTag = (dirTag === 'e-seriescollection') ? 'e-seriesCollection' : dirTag;
-                    if (keyTags.indexOf(dirTag) !== -1) {
-                        var tagName = tagNameMapper["" + dirTag] ? tagNameMapper["" + dirTag] : dirTag;
-                        dir[tagName.replace('e-', '')] = [];
-                        var children = tagDirective.componentOptions ? tagDirective.componentOptions.children : tagDirective.children;
-                        for (var _a = 0, children_1 = children; _a < children_1.length; _a++) {
-                            var tagDirChild = children_1[_a];
-                            var retObj = this.getVNodeValue(tagDirChild, tagMapper["" + dirTag], tagNameMapper);
-                            if (Object.keys(retObj).length !== 0) {
-                                dir[tagName.replace('e-', '')].push(retObj);
+            return items;
+        },
+        getDirectiveValues: function (tagDirectives, tagMapper, tagNameMapper) {
+            var keyTags = Object.keys(tagMapper);
+            var dir = {};
+            if (tagDirectives) {
+                for (var _i = 0, tagDirectives_1 = tagDirectives; _i < tagDirectives_1.length; _i++) {
+                    var tagDirective = tagDirectives_1[_i];
+                    if (tagDirective.componentOptions && tagDirective.componentOptions.children && tagDirective.componentOptions.tag ||
+                        (tagDirective.tag === 'e-seriescollection' && tagDirective.children)) {
+                        var dirTag = tagDirective.componentOptions ? tagDirective.componentOptions.tag : tagDirective.tag;
+                        dirTag = (dirTag === 'e-seriescollection') ? 'e-seriesCollection' : dirTag;
+                        if (keyTags.indexOf(dirTag) !== -1) {
+                            var tagName = tagNameMapper["" + dirTag] ? tagNameMapper["" + dirTag] : dirTag;
+                            dir[tagName.replace('e-', '')] = [];
+                            var children = tagDirective.componentOptions ? tagDirective.componentOptions.children : tagDirective.children;
+                            for (var _a = 0, children_1 = children; _a < children_1.length; _a++) {
+                                var tagDirChild = children_1[_a];
+                                var retObj = this.getVNodeValue(tagDirChild, tagMapper["" + dirTag], tagNameMapper);
+                                if (Object.keys(retObj).length !== 0) {
+                                    dir[tagName.replace('e-', '')].push(retObj);
+                                }
                             }
                         }
                     }
                 }
             }
-        }
-        return dir;
-    };
-    ComponentBase.prototype.getMultiLevelDirValue = function (tagDirectories, tagKey, tagNameMapper) {
-        var mulObj = {};
-        for (var _i = 0, tagDirectories_1 = tagDirectories; _i < tagDirectories_1.length; _i++) {
-            var tagDir = tagDirectories_1[_i];
-            var key = void 0;
-            var children = void 0;
-            if (tagDir.componentOptions) {
-                key = tagDir.componentOptions.tag;
-                if (tagDir.componentOptions.children) {
-                    children = tagDir.componentOptions.children;
-                }
-            }
-            else if ((tagDir.tag === 'e-markersettings' || tagDir.tag === 'e-markersetting') && tagDir.children) {
-                key = (tagDir.tag === 'e-markersettings') ? 'e-markerSettings' : 'e-markerSetting';
-                children = tagDir.children;
-            }
-            if (key) {
-                var tagName = tagNameMapper["" + key] ? tagNameMapper["" + key] : key;
-                mulObj[tagName.replace('e-', '')] = [];
-                if (children) {
-                    for (var _a = 0, children_2 = children; _a < children_2.length; _a++) {
-                        var tagDirChild = children_2[_a];
-                        var mulLevObj = this.getVNodeValue(tagDirChild, tagKey["" + key], tagNameMapper);
-                        if (Object.keys(mulLevObj).length !== 0) {
-                            mulObj[tagName.replace('e-', '')].push(mulLevObj);
+            return dir;
+        },
+        getMultiLevelDirValue: function (tagDirectories, tagKey, tagNameMapper) {
+            var mulObj = {};
+            for (var _i = 0, tagDirectories_1 = tagDirectories; _i < tagDirectories_1.length; _i++) {
+                var tagDir = tagDirectories_1[_i];
+                var key = void 0;
+                var children = void 0;
+                if (tagDir.componentOptions) {
+                    key = tagDir.componentOptions.tag;
+                    if (tagDir.componentOptions.children) {
+                        children = tagDir.componentOptions.children;
+                    }
+                }
+                else if ((tagDir.tag === 'e-markersettings' || tagDir.tag === 'e-markersetting') && tagDir.children) {
+                    key = (tagDir.tag === 'e-markersettings') ? 'e-markerSettings' : 'e-markerSetting';
+                    children = tagDir.children;
+                }
+                if (key) {
+                    var tagName = tagNameMapper["" + key] ? tagNameMapper["" + key] : key;
+                    mulObj[tagName.replace('e-', '')] = [];
+                    if (children) {
+                        for (var _a = 0, children_2 = children; _a < children_2.length; _a++) {
+                            var tagDirChild = children_2[_a];
+                            var mulLevObj = this.getVNodeValue(tagDirChild, tagKey["" + key], tagNameMapper);
+                            if (Object.keys(mulLevObj).length !== 0) {
+                                mulObj[tagName.replace('e-', '')].push(mulLevObj);
+                            }
                         }
                     }
                 }
             }
-        }
-        return mulObj;
-    };
-    ComponentBase.prototype.getVNodeValue = function (tagDirective, tagKey, tagNameMapper) {
-        var ret = {};
-        if (tagDirective.componentOptions || ((tagDirective.tag === 'e-markersettings' || tagDirective.tag === 'e-markersetting') && tagDirective.context)) {
-            var dirTag = void 0;
-            if (tagDirective.componentOptions) {
-                dirTag = tagDirective.componentOptions.tag;
-            }
-            else {
-                dirTag = (tagDirective.tag === 'e-markersettings') ? 'e-markerSettings' : 'e-markerSetting';
-            }
-            if (typeof tagKey === 'string' && dirTag === tagKey && tagDirective.data) {
-                ret = tagDirective.data.attrs ? this.getCamelCaseProps(tagDirective.data.attrs) : this.getCamelCaseProps(tagDirective.data);
-            }
-            else if (typeof tagKey === 'object') {
-                if (tagDirective.componentOptions.children && (Object.keys(tagKey).indexOf(dirTag) !== -1)) {
-                    ret = this.getMultiLevelDirValue(tagDirective.componentOptions.children, tagKey["" + dirTag], tagNameMapper);
+            return mulObj;
+        },
+        getVNodeValue: function (tagDirective, tagKey, tagNameMapper) {
+            var ret = {};
+            if (tagDirective.componentOptions || ((tagDirective.tag === 'e-markersettings' || tagDirective.tag === 'e-markersetting') && tagDirective.context)) {
+                var dirTag = void 0;
+                if (tagDirective.componentOptions) {
+                    dirTag = tagDirective.componentOptions.tag;
                 }
-                else if (tagDirective.children && (Object.keys(tagKey).indexOf(dirTag) !== -1) && (dirTag === 'e-markersettings' || dirTag === 'e-markersetting')) {
-                    ret = this.getMultiLevelDirValue(tagDirective.children, tagKey["" + dirTag], tagNameMapper);
+                else {
+                    dirTag = (tagDirective.tag === 'e-markersettings') ? 'e-markerSettings' : 'e-markerSetting';
                 }
-                if (tagDirective.data && tagDirective.data.attrs) {
-                    ret = extend(ret, this.getCamelCaseProps(tagDirective.data.attrs));
+                if (typeof tagKey === 'string' && dirTag === tagKey && tagDirective.data) {
+                    ret = tagDirective.data.attrs ? this.getCamelCaseProps(tagDirective.data.attrs) : this.getCamelCaseProps(tagDirective.data);
+                }
+                else if (typeof tagKey === 'object') {
+                    if (tagDirective.componentOptions.children && (Object.keys(tagKey).indexOf(dirTag) !== -1)) {
+                        ret = this.getMultiLevelDirValue(tagDirective.componentOptions.children, tagKey["" + dirTag], tagNameMapper);
+                    }
+                    else if (tagDirective.children && (Object.keys(tagKey).indexOf(dirTag) !== -1) && (dirTag === 'e-markersettings' || dirTag === 'e-markersetting')) {
+                        ret = this.getMultiLevelDirValue(tagDirective.children, tagKey["" + dirTag], tagNameMapper);
+                    }
+                    if (tagDirective.data && tagDirective.data.attrs) {
+                        ret = extend(ret, this.getCamelCaseProps(tagDirective.data.attrs));
+                    }
                 }
             }
-        }
-        return ret;
-    };
-    /**
-     * convert kebab case directive props to camel case
-     */
-    ComponentBase.prototype.getCamelCaseProps = function (props) {
-        var retProps = {};
-        for (var _i = 0, _a = Object.keys(props); _i < _a.length; _i++) {
-            var prop = _a[_i];
-            retProps[prop.replace(/-[a-z]/g, function (e) { return e[1].toUpperCase(); })] = props["" + prop];
-        }
-        return retProps;
-    };
-    ComponentBase.prototype.dataBind = function () {
-        this.ej2Instances.dataBind();
-    };
-    ComponentBase.prototype.setProperties = function (arg, muteOnChange) {
-        return this.ej2Instances.setProperties(arg, muteOnChange);
-    };
-    return ComponentBase;
-}(vueImport));
-
-/**
- * Vue Component Base
- */
-// import { Base, Component as EJ2Component, isNullOrUndefined } from '@syncfusion/ej2-base';
-var $internalHooks = [
-    'data',
-    'beforeCreate',
-    'created',
-    'beforeMount',
-    'mounted',
-    'beforeDestroy',
-    'destroyed',
-    'beforeUpdate',
-    'updated',
-    'activated',
-    'deactivated',
-    'render',
-    'errorCaptured' // 2.5
-];
+            return ret;
+        },
+        /**
+         * convert kebab case directive props to camel case
+         */
+        getCamelCaseProps: function (props) {
+            var retProps = {};
+            for (var _i = 0, _a = Object.keys(props); _i < _a.length; _i++) {
+                var prop = _a[_i];
+                retProps[prop.replace(/-[a-z]/g, function (e) { return e[1].toUpperCase(); })] = props["" + prop];
+            }
+            return retProps;
+        },
+        dataBind: function () {
+            this.ej2Instances.dataBind();
+        },
+        setProperties: function (arg, muteOnChange) {
+            return this.ej2Instances.setProperties(arg, muteOnChange);
+        },
+    }
+});
 function getProps(options) {
     if (options === void 0) { options = {}; }
     if (options.props) {
-        var _loop_1 = function (prop) {
+        var _loop_4 = function (prop) {
             (options.newprops || (options.newprops = {}))["" + prop] = {};
             (options.watch || (options.watch = {}))["" + prop] = function (newVal) {
                 this.ej2Instances["" + prop] = newVal;
@@ -600,116 +571,23 @@ function getProps(options) {
         };
         for (var _i = 0, _a = options.props; _i < _a.length; _i++) {
             var prop = _a[_i];
-            _loop_1(prop);
+            _loop_4(prop);
         }
     }
     return [options.newprops, options.watch];
 }
-function EJComponentDecorator(options, isExecute$$1) {
-    if (!isExecute$$1) {
-        return;
-    }
-    return function (Component) {
-        return EJcomponentFactory(Component, options);
-    };
-}
-function EJcomponentFactory(Component, options) {
-    if (options === void 0) { options = {}; }
-    options.name = options.name || Component._componentTag || Component.name;
-    // prototype props.
-    var proto = Component.prototype;
-    if (options.props) {
-        var _loop_2 = function (prop) {
-            (options.props || (options.props = {}))["" + prop] = {};
-            (options.watch || (options.watch = {}))["" + prop] = function (newVal) {
-                this.ej2Instances["" + prop] = newVal;
-                if (this.dataBind && (options.name !== 'DateRangePickerComponent')) {
-                    this.dataBind();
-                }
-            };
-        };
-        for (var _i = 0, _a = options.props; _i < _a.length; _i++) {
-            var prop = _a[_i];
-            _loop_2(prop);
-        }
-    }
-    Object.getOwnPropertyNames(proto).forEach(function (key) {
-        // hooks
-        if (key === 'constructor') {
-            return;
-        }
-        if ($internalHooks.indexOf(key) > -1) {
-            options["" + key] = proto["" + key];
-            return;
-        }
-        var descriptor = Object.getOwnPropertyDescriptor(proto, key);
-        if (typeof descriptor.value === 'function') {
-            // methods
-            (options.methods || (options.methods = {}))["" + key] = descriptor.value;
-        }
-        else if (descriptor.get || descriptor.set) {
-            // computed properties
-            (options.computed || (options.computed = {}))["" + key] = {
-                get: descriptor.get,
-                set: descriptor.set
-            };
-        }
-    });
-    Object.getOwnPropertyNames(ComponentBase.prototype).forEach(function (key) {
-        if ($internalHooks.indexOf(key) > -1) {
-            options["" + key] = proto["" + key];
-            return;
-        }
-    });
-    (options.mixins || (options.mixins = [])).push({
-        data: function () {
-            return collectDataFromConstructor(this, Component);
-        }
-    });
-    //  decorate options
-    var decorators = Component.__decorators__;
-    if (decorators) {
-        decorators.forEach(Function(options));
-        delete Component.__decorators__;
-    }
-    // find super
-    var superProto = Object.getPrototypeOf(Component.prototype);
-    var Super = superProto instanceof Vue$1__default
-        ? superProto.constructor
-        : Vue$1__default;
-    var Extended = Super.extend(options);
-    return Extended;
-}
-function collectDataFromConstructor(vm, Component) {
-    Component.prototype._init = function () {
-        var _this = this;
-        var keys = Object.getOwnPropertyNames(vm);
-        if (vm.$options.props) {
-            for (var key in vm.$options.props) {
-                if (!vm.hasOwnProperty(key)) {
-                    keys.push(key);
-                }
-            }
-        }
-        keys.forEach(function (key) {
-            if (key.charAt(0) !== '_') {
-                Object.defineProperty(_this, key, {
-                    get: function () { return vm["" + key]; },
-                    set: function (value) { return vm["" + key] = value; }
-                });
-            }
-        });
-    };
-    var data = new Component();
-    var plainData = {};
-    Object.keys(data).forEach(function (key) {
-        if (data["" + key] !== undefined) {
-            plainData["" + key] = data["" + key];
-        }
-    });
-    return plainData;
-}
 
+var __assign = (undefined && undefined.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 // tslint:disable:no-any
 var stringCompiler = getTemplateEngine();
 function compile(templateElement, helper) {
@@ -729,7 +607,7 @@ function compile(templateElement, helper) {
                 var vueSlot_1 = getCurrentVueSlot(context.vueInstance, templateElement, root);
                 if (vueSlot_1) {
                     // Compilation for Vue 3 slot template
-                    var app = allVue.createApp({
+                    var app = aVue.createApp({
                         render: function () {
                             return vueSlot_1["" + templateElement]({ data: data });
                         }
@@ -739,6 +617,8 @@ function compile(templateElement, helper) {
                             app.use(plugins[parseInt(i.toString(), 10)]);
                         }
                     }
+                    // Get values for Vue 3 slot template
+                    getValues(app, context.vueInstance, root);
                     app.mount((context.getModuleName() === 'grid') ? ("#" + pid) : ("#" + id));
                     returnEle = ele.childNodes;
                     detach(ele);
@@ -794,12 +674,14 @@ function compile(templateElement, helper) {
                     }
                 }
                 templateCompRef.data = function () { return tempRef_1; };
-                var app = allVue.createApp(templateCompRef);
+                var app = aVue.createApp(templateCompRef);
                 if (plugins) {
                     for (var i = 0; i < plugins.length; i++) {
                         app.use(plugins[parseInt(i.toString(), 10)]);
                     }
                 }
+                // Get values for Vue 3 functional template
+                getValues(app, context.vueInstance, root);
                 app.mount((context.getModuleName() === 'grid') ? ("#" + pid) : ("#" + id));
                 returnEle = ele.childNodes;
                 detach(ele);
@@ -807,8 +689,22 @@ function compile(templateElement, helper) {
             else if (typeof templateElement === "string") {
                 var vueSlot_2 = getVueSlot(context.vueInstance, templateElement, root);
                 if (vueSlot_2) {
+                    // Get provide values for Vue 2 slot template
+                    var provided_1 = {};
+                    var getProvideValues_1 = function (vueinstance) {
+                        if (vueinstance['$parent'])
+                            getProvideValues_1(vueinstance.$parent);
+                        if (vueinstance['_provided'] && Object.keys(vueinstance['_provided']).length > 0) {
+                            provided_1 = __assign({}, provided_1, vueinstance._provided);
+                        }
+                    };
+                    var vueInstance = context.vueInstance ? context.vueInstance : ((root && root.vueInstance) ? root.vueInstance : null);
+                    if (vueInstance) {
+                        getProvideValues_1(vueInstance);
+                    }
                     // Compilation for Vue 2 slot template
-                    var vueTemplate = new Vue$1__default({
+                    var vueTemplate = new aVue({
+                        provide: __assign({}, provided_1),
                         render: function () {
                             return vueSlot_2["" + templateElement]({ data: data });
                         }
@@ -837,7 +733,7 @@ function compile(templateElement, helper) {
                     dataObj.propsData = propsData;
                 }
                 if (typeof templateFunction !== "function") {
-                    templateFunction = Vue$1__default.extend(templateFunction);
+                    templateFunction = aVue.extend(templateFunction);
                 }
                 var templateVue = new templateFunction(dataObj);
                 // let templateVue = new Vue(tempObj.template);
@@ -864,6 +760,37 @@ function compile(templateElement, helper) {
     };
 }
 setTemplateEngine({ compile: compile });
+function getValues(app, cInstance, root) {
+    var vueInstance = cInstance ? cInstance : ((root && root.vueInstance) ? root.vueInstance : null);
+    if (!vueInstance) {
+        return;
+    }
+    // Get globally defined variables.
+    var globalVariables = ['components', 'mixins', 'provides'];
+    for (var i = 0; i < globalVariables.length; i++) {
+        var gVariable = globalVariables[i];
+        if (app['_context'][gVariable] && vueInstance['$']['appContext'][gVariable]) {
+            app['_context'][gVariable] = vueInstance['$']['appContext'][gVariable];
+        }
+    }
+    // Get provide value from child component.
+    var provided = {};
+    var getProvideValue = function (vueinstance) {
+        if (vueinstance['$'] && vueinstance['$']['parent'])
+            getProvideValue(vueinstance.$.parent);
+        if (vueinstance['provides'] && Object.keys(vueinstance['provides']).length > 0) {
+            provided = __assign({}, provided, vueinstance.provides);
+        }
+    };
+    getProvideValue(vueInstance);
+    if (app['_context']['provides']) {
+        app._context.provides = __assign({}, app._context.provides, provided);
+    }
+    // Get globally defined properties.
+    if (app['_context']['config']['globalProperties'] && vueInstance['$']['appContext']['config']['globalProperties']) {
+        app['_context']['config']['globalProperties'] = vueInstance['$']['appContext']['config']['globalProperties'];
+    }
+}
 // Get the Vue2 slot template from the root or current Vue component.
 function getVueSlot(vueInstance, templateElement, root) {
     if (!vueInstance && !(root && root.vueInstance)) {
@@ -938,5 +865,5 @@ function getChildVueSlot(slots, templateElement) {
  * index for component base
  */
 
-export { aVue, _interopRequireWildcard, allVue, gh, isExecute, ComponentBase, $internalHooks, getProps, EJComponentDecorator, EJcomponentFactory, compile };
+export { isExecute, aVue, gh, vueDefineComponent, ComponentBase, getProps, compile };
 //# sourceMappingURL=ej2-vue-base.es5.js.map