@syncfusion/ej2-vue-base 25.2.3 → 26.1.35

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

@@ -1,29 +1,34 @@
 import * as Vue from 'vue';
-import { createElement, detach, extend, getTemplateEngine, getUniqueID, getValue, isNullOrUndefined, setProxyToRaw, setTemplateEngine } from '@syncfusion/ej2-base';
+import { getValue, isNullOrUndefined, extend, setProxyToRaw, getTemplateEngine, getUniqueID, createElement, detach, setTemplateEngine } from '@syncfusion/ej2-base';
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
- * Vue Component Base
+ * Clone the Vue compiler instance.
+ *
+ * @param {any} obj - representes the Vue compiler.
+ * @returns {any} cloned object of Vue compiler.
  */
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) {
     return obj;
 }
 else {
-    let newObj = {};
+    const newObj = {};
     if (obj != null) {
-        for (let key in obj) {
-            if (Object.prototype.hasOwnProperty.call(obj, key))
+        for (const key in obj) {
+            if (Object.prototype.hasOwnProperty.call(obj, key)) {
                 newObj[`${key}`] = obj[`${key}`];
+            }
         }
     }
     newObj.default = obj;
     return newObj;
 } }
 const curVue = _interopRequireWildcard(Vue);
-const isExecute = (parseInt(curVue['version']) > 2) ? false : true;
+const isExecute = (parseInt(curVue['version'], 10) > 2) ? false : true;
 const aVue = !isExecute ? curVue : (curVue['default']['default'] ? curVue['default']['default'] : curVue['default']);
 const gh = curVue['h'];
-let vueDefineComponent = (options) => { return !isExecute ? aVue['defineComponent'](options) : aVue['extend'](options); };
-let ComponentBase = vueDefineComponent({
+const vueDefineComponent = (options) => { return !isExecute ? aVue['defineComponent'](options) : aVue['extend'](options); };
+const ComponentBase = vueDefineComponent({
     name: 'ComponentBase',
     data() {
         return {
@@ -43,12 +48,12 @@ let ComponentBase = vueDefineComponent({
         if (!this.propKeys) {
             return;
         }
-        for (let prop of this.propKeys) {
+        for (const prop of this.propKeys) {
             this.ej2Instances.addEventListener(prop, (args) => {
                 this.$emit(prop, args);
             });
         }
-        let injectables = getValue('$root.$options.provide', this);
+        const injectables = getValue('$root.$options.provide', this);
         let vueInjectables = getValue('$parent.$options.provide', this);
         vueInjectables = !isNullOrUndefined(vueInjectables) ? vueInjectables : getValue('$.parent.provides', this);
         if (this.hasInjectedModules && !isExecute) {
@@ -63,8 +68,8 @@ let ComponentBase = vueDefineComponent({
             else if (vueInjectables) {
                 prevModule = this.getInjectedServices() || [];
             }
-            let curModule = this.ej2Instances.getInjectedModules() || [];
-            for (let mod of curModule) {
+            const curModule = this.ej2Instances.getInjectedModules() || [];
+            for (const mod of curModule) {
                 if (prevModule.indexOf(mod) === -1) {
                     prevModule.push(mod);
                 }
@@ -73,10 +78,13 @@ let ComponentBase = vueDefineComponent({
         }
     },
     mounted() {
-        let cusEle = this.$el ? this.$el.querySelectorAll("div.e-directive") : null;
+        const cusEle = this.$el ? this.$el.querySelectorAll('div.e-directive') : null;
         if (!isExecute && cusEle) {
             for (let i = 0; i < cusEle.length; i++) {
-                cusEle[parseInt(i.toString(), 10)].parentElement && cusEle[parseInt(i.toString(), 10)].parentElement.removeChild(cusEle[parseInt(i.toString(), 10)]);
+                const cusElement = cusEle[parseInt(i.toString(), 10)];
+                if (cusElement.parentElement) {
+                    cusElement.parentElement.removeChild(cusElement);
+                }
             }
         }
         this.ej2Instances.isVue = true;
@@ -113,9 +121,9 @@ let ComponentBase = vueDefineComponent({
                 this.setModelValue();
             }
             if (this.hasChildDirective) {
-                let childKey = {};
+                const childKey = {};
                 this.fetchChildPropValues(childKey);
-                let curChildDir = JSON.stringify(childKey);
+                const curChildDir = JSON.stringify(childKey);
                 if (this.childDirObjects !== curChildDir) {
                     this.childDirObjects = curChildDir;
                     this.assignValueToWrapper(childKey, false);
@@ -138,12 +146,11 @@ let ComponentBase = vueDefineComponent({
                 provide = getValue('$.parent.provides', this);
             }
             if (provide) {
-                // tslint:disable:no-any
                 let injectables = provide;
                 if (typeof provide === 'function') {
                     if (provide.managed) {
-                        let provideKey = provide.managed;
-                        let provideValue = Object.keys(provideKey);
+                        const pKey = provide.managed;
+                        const pValue = Object.keys(pKey);
                         let key;
                         if (this.$root && this.isDecorator) {
                             key = Object.keys(this.$root);
@@ -154,24 +161,23 @@ let ComponentBase = vueDefineComponent({
                         else if (this.$parent) {
                             key = Object.keys(this.$parent);
                         }
-                        for (let i = 0; i < provideValue.length; i++) {
+                        for (let i = 0; i < pValue.length; i++) {
                             for (let j = 0; j < key.length; j++) {
-                                if ((key[parseInt(j.toString(), 10)].indexOf(provideValue[parseInt(i.toString(), 10)])) !== -1) {
+                                if ((key[parseInt(j.toString(), 10)].indexOf(pValue[parseInt(i.toString(), 10)])) !== -1) {
                                     if (this.$root && this.isDecorator) {
-                                        provideKey[provideValue[parseInt(j.toString(), 10)]] = this.$root[key[parseInt(i.toString(), 10)]];
+                                        pKey[pValue[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)]];
+                                        pKey[pValue[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)]];
+                                        pKey[pValue[parseInt(i.toString(), 10)]] = this.$parent[key[parseInt(j.toString(), 10)]];
                                     }
-                                    injectables = provideKey;
+                                    injectables = pKey;
                                 }
                             }
                         }
                     }
-                    // tslint:disable:no-any
                     else if (this.$vnode) {
                         injectables = this.$vnode.context.$options.provide();
                     }
@@ -185,14 +191,28 @@ let ComponentBase = vueDefineComponent({
             return ret;
         },
         destroyComponent() {
-            let tempBeforeDestroyThis = this;
-            tempBeforeDestroyThis.ej2Instances.destroy();
-            tempBeforeDestroyThis.$el.style.visibility = 'hidden';
-            tempBeforeDestroyThis = null;
+            this.ej2Instances.destroy();
+            this.$el.style.visibility = 'hidden';
+            this.destroyPortals();
+        },
+        destroyPortals() {
+            if (this.portals) {
+                for (const portal of this.portals) {
+                    const controls = portal.classList.contains('e-control') ? [portal] : portal.getElementsByClassName('e-control');
+                    for (let index = 0; index < controls.length; index++) {
+                        const control = controls[parseInt(index.toString(), 10)];
+                        if (control.ej2_instances && control.ej2_instances[0]) {
+                            control.ej2_instances[0].destroy();
+                            index--;
+                        }
+                    }
+                }
+                this.portals = null;
+            }
         },
         bindProperties() {
-            let options = {};
-            for (let prop of this.propKeys) {
+            const options = {};
+            for (const prop of this.propKeys) {
                 if (!isNullOrUndefined(this[`${prop}`])) {
                     options[`${prop}`] = this[`${prop}`];
                 }
@@ -204,9 +224,9 @@ let ComponentBase = vueDefineComponent({
                 this.fetchChildPropValues(options);
             }
             if (this.hasInjectedModules) {
-                let prevModule = this.getInjectedServices() || [];
-                let curModule = this.ej2Instances.getInjectedModules() || [];
-                for (let mod of curModule) {
+                const prevModule = this.getInjectedServices() || [];
+                const curModule = this.ej2Instances.getInjectedModules() || [];
+                for (const mod of curModule) {
                     if (prevModule.indexOf(mod) === -1) {
                         prevModule.push(mod);
                     }
@@ -234,22 +254,22 @@ let ComponentBase = vueDefineComponent({
                 if (propRef) {
                     for (let i = 0; i < propRef.length; i++) {
                         if (propRef[parseInt(i.toString(), 10)].type.methods || propRef[parseInt(i.toString(), 10)].type === 'e-seriescollection') {
-                            let key = propRef[parseInt(i.toString(), 10)].type === 'e-seriescollection' ? 'series-collection' :
-                                propRef[parseInt(i.toString(), 10)].type.methods.getTag().replace("e-", "");
-                            let ref = this.resolveArrayDirectives(propRef[parseInt(i.toString(), 10)].children, key);
-                            let splitKeys = key.split('-');
-                            let controlName = this.ej2Instances.getModuleName().toLowerCase();
-                            let keyRef = (splitKeys.length > 1 && controlName.indexOf(splitKeys[0]) > -1) ? splitKeys[1] : splitKeys[0];
+                            const key = propRef[parseInt(i.toString(), 10)].type === 'e-seriescollection' ? 'series-collection' :
+                                propRef[parseInt(i.toString(), 10)].type.methods.getTag().replace('e-', '');
+                            const ref = this.resolveArrayDirectives(propRef[parseInt(i.toString(), 10)].children, key);
+                            const spKeys = key.split('-');
+                            const controlName = this.ej2Instances.getModuleName().toLowerCase();
+                            let keyRef = (spKeys.length > 1 && controlName.indexOf(spKeys[0]) > -1) ? spKeys[1] : spKeys[0];
                             keyRef = keyRef.replace(controlName, '');
                             keyRef = this.tagNameMapper['e-' + key] ? this.tagNameMapper['e-' + key].replace('e-', '') : keyRef;
-                            if (controlName == "splitter" && keyRef == "panes") {
-                                keyRef = "paneSettings";
+                            if (controlName === 'splitter' && keyRef === 'panes') {
+                                keyRef = 'paneSettings';
                             }
-                            else if (controlName == "bulletchart" && keyRef == "range") {
-                                keyRef = "ranges";
+                            else if (controlName === 'bulletchart' && keyRef === 'range') {
+                                keyRef = 'ranges';
                             }
-                            else if (controlName == "schedule" && keyRef == "header") {
-                                keyRef = "headerRows";
+                            else if (controlName === 'schedule' && keyRef === 'header') {
+                                keyRef = 'headerRows';
                             }
                             dirProps[`${keyRef}`] = ref[`${key}`];
                         }
@@ -262,7 +282,7 @@ let ComponentBase = vueDefineComponent({
             if (!this.childDirObjects) {
                 this.childDirObjects = JSON.stringify(dirProps);
             }
-            for (let dirProp of Object.keys(dirProps)) {
+            for (const dirProp of Object.keys(dirProps)) {
                 childOption[`${dirProp}`] = dirProps[`${dirProp}`];
             }
         },
@@ -271,19 +291,19 @@ let ComponentBase = vueDefineComponent({
             let innerDirValues;
             slot = slots.default ? slots.default() : slots;
             slot = slot.flatMap((item) => Array.isArray(item.children) ? item.children : item);
-            let items = {};
+            const items = {};
             items[`${tagName}`] = [];
             for (const childSlot of slot) {
                 let tempObj = {};
-                let tagRef = childSlot.type.methods ? childSlot.type.methods.getTag() : tagName;
+                const tagRef = childSlot.type.methods ? childSlot.type.methods.getTag() : tagName;
                 if (childSlot.children) {
                     let key;
-                    innerDirValues = this.resolveComplexDirs(childSlot.children, this.tagMapper["e-" + tagName], tagRef);
+                    innerDirValues = this.resolveComplexDirs(childSlot.children, this.tagMapper['e-' + tagName], tagRef);
                     if (innerDirValues.length) {
                         tempObj = innerDirValues;
                     }
                     else {
-                        for (var i = 0; i < Object.keys(innerDirValues).length; i++) {
+                        for (let i = 0; i < Object.keys(innerDirValues).length; i++) {
                             key = Object.keys(innerDirValues)[parseInt(i.toString(), 10)];
                             tempObj[`${key}`] = innerDirValues[`${key}`];
                         }
@@ -291,14 +311,19 @@ let ComponentBase = vueDefineComponent({
                 }
                 if (childSlot.props) {
                     Object.keys(childSlot.props).forEach((key) => {
-                        let propName = key.replace(/-[a-z]/g, (e) => { return e[1].toUpperCase(); });
+                        const propName = key.replace(/-[a-z]/g, (e) => { return e[1].toUpperCase(); });
                         if (propName) {
                             tempObj[`${propName}`] = childSlot.props[`${key}`];
                         }
                     });
                 }
                 if (((/[s]\b/).test(tagRef) && innerDirValues) && (!(/[s]\b/).test(tagName) || innerDirValues.length)) {
-                    Array.isArray(tempObj) ? tempObj.forEach((item) => { items[`${tagName}`].push(item); }) : items[`${tagName}`].push(tempObj);
+                    if (Array.isArray(tempObj)) {
+                        tempObj.forEach((item) => { items[`${tagName}`].push(item); });
+                    }
+                    else {
+                        items[`${tagName}`].push(tempObj);
+                    }
                 }
                 else if (tempObj && Object.keys(tempObj).length !== 0) {
                     items[`${tagName}`].push(tempObj);
@@ -317,11 +342,10 @@ let ComponentBase = vueDefineComponent({
                 if (tagObject[`${tagName}`]) {
                     tagRef = Object.keys(tagObject[`${tagName}`]);
                     tag = tagRef.find((key) => tagObject[`${tagName}`][`${key}`] ===
-                        childSlot.type.methods.getTag().replace(/[s]\b/, ""));
-                    const moduleName = this.ej2Instances.getModuleName().toLowerCase();
+                        childSlot.type.methods.getTag().replace(/[s]\b/, ''));
                     tag = tag ? tag : childSlot.type.methods.getTag();
-                    tag = (this.tagNameMapper[`${tag}`] ? this.tagNameMapper[`${tag}`] : tag).replace("e-", "");
-                    if (this.ej2Instances.getModuleName().toLowerCase() == "diagram" && tag.indexOf('annotations') != -1) {
+                    tag = (this.tagNameMapper[`${tag}`] ? this.tagNameMapper[`${tag}`] : tag).replace('e-', '');
+                    if (this.ej2Instances.getModuleName().toLowerCase() === 'diagram' && tag.indexOf('annotations') !== -1) {
                         tag = 'annotations';
                     }
                 }
@@ -341,7 +365,7 @@ let ComponentBase = vueDefineComponent({
                     childSlot.props = this.getCamelCaseProps(childSlot.props);
                 }
                 if (slot.length > 1) {
-                    items = Object.keys(items).length == 0 && !items.length ? [] : items;
+                    items = Object.keys(items).length === 0 && !items.length ? [] : items;
                     if (childSlot.props) {
                         items.push(childSlot.props);
                     }
@@ -359,7 +383,7 @@ let ComponentBase = vueDefineComponent({
             for (const childSlot of slot) {
                 let innerDirValues = null;
                 let tag = childSlot.type.methods.getTag();
-                tag = (this.tagNameMapper[tag] ? this.tagNameMapper[tag] : tag).replace("e-", "");
+                tag = (this.tagNameMapper[`${tag}`] ? this.tagNameMapper[`${tag}`] : tag).replace('e-', '');
                 if (childSlot.children) {
                     innerDirValues = this.resolveMultilevelComplexInnerDirs(childSlot.children, tagObject[`${tagName}`], childSlot.type.methods.getTag());
                     if ((/[s]\b/).test(tag) || slot.length > 1) {
@@ -407,9 +431,8 @@ let ComponentBase = vueDefineComponent({
             let items = slot.length > 1 ? [] : {};
             for (const childSlot of slot) {
                 let innerDirValues = null;
-                const moduleName = this.ej2Instances.getModuleName().toLowerCase();
                 let tag = childSlot.type.methods.getTag();
-                tag = (this.tagNameMapper[tag] ? this.tagNameMapper[tag] : tag).replace("e-", "");
+                tag = (this.tagNameMapper[`${tag}`] ? this.tagNameMapper[`${tag}`] : tag).replace('e-', '');
                 if (childSlot.children) {
                     innerDirValues = this.resolveComplexInnerDirs(childSlot.children, tagObject[`${tagName}`], childSlot.type.methods.getTag());
                 }
@@ -436,20 +459,21 @@ let ComponentBase = vueDefineComponent({
             return items;
         },
         getDirectiveValues(tagDirectives, tagMapper, tagNameMapper) {
-            let keyTags = Object.keys(tagMapper);
-            let dir = {};
+            const keyTags = Object.keys(tagMapper);
+            const dir = {};
             if (tagDirectives) {
-                for (let tagDirective of tagDirectives) {
-                    if (tagDirective.componentOptions && tagDirective.componentOptions.children && this.getTagName(tagDirective.componentOptions) ||
+                for (const tagDirective of tagDirectives) {
+                    const tagCompOption = tagDirective.componentOptions;
+                    if (tagCompOption && tagCompOption.children && this.getTagName(tagCompOption) ||
                         (tagDirective.tag === 'e-seriescollection' && tagDirective.children)) {
-                        let dirTag = tagDirective.componentOptions ? this.getTagName(tagDirective.componentOptions) : tagDirective.tag;
+                        let dirTag = tagCompOption ? this.getTagName(tagCompOption) : tagDirective.tag;
                         dirTag = (dirTag === 'e-seriescollection') ? 'e-seriesCollection' : dirTag;
                         if (keyTags.indexOf(dirTag) !== -1) {
-                            let tagName = tagNameMapper[`${dirTag}`] ? tagNameMapper[`${dirTag}`] : dirTag;
+                            const tagName = tagNameMapper[`${dirTag}`] ? tagNameMapper[`${dirTag}`] : dirTag;
                             dir[tagName.replace('e-', '')] = [];
-                            let children = tagDirective.componentOptions ? tagDirective.componentOptions.children : tagDirective.children;
-                            for (let tagDirChild of children) {
-                                let retObj = this.getVNodeValue(tagDirChild, tagMapper[`${dirTag}`], tagNameMapper);
+                            const children = tagCompOption ? tagCompOption.children : tagDirective.children;
+                            for (const tagDirChild of children) {
+                                const retObj = this.getVNodeValue(tagDirChild, tagMapper[`${dirTag}`], tagNameMapper);
                                 if (Object.keys(retObj).length !== 0) {
                                     dir[tagName.replace('e-', '')].push(retObj);
                                 }
@@ -461,8 +485,8 @@ let ComponentBase = vueDefineComponent({
             return dir;
         },
         getMultiLevelDirValue(tagDirectories, tagKey, tagNameMapper) {
-            let mulObj = {};
-            for (let tagDir of tagDirectories) {
+            const mulObj = {};
+            for (const tagDir of tagDirectories) {
                 let key;
                 let children;
                 if (tagDir.componentOptions) {
@@ -476,11 +500,11 @@ let ComponentBase = vueDefineComponent({
                     children = tagDir.children;
                 }
                 if (key) {
-                    let tagName = tagNameMapper[`${key}`] ? tagNameMapper[`${key}`] : key;
+                    const tagName = tagNameMapper[`${key}`] ? tagNameMapper[`${key}`] : key;
                     mulObj[tagName.replace('e-', '')] = [];
                     if (children) {
-                        for (let tagDirChild of children) {
-                            let mulLevObj = this.getVNodeValue(tagDirChild, tagKey[`${key}`], tagNameMapper);
+                        for (const tagDirChild of children) {
+                            const mulLevObj = this.getVNodeValue(tagDirChild, tagKey[`${key}`], tagNameMapper);
                             if (Object.keys(mulLevObj).length !== 0) {
                                 mulObj[tagName.replace('e-', '')].push(mulLevObj);
                             }
@@ -500,8 +524,9 @@ let ComponentBase = vueDefineComponent({
                 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);
+                const tagData = tagDirective.data;
+                if (typeof tagKey === 'string' && dirTag === tagKey && tagData) {
+                    ret = tagData.attrs ? this.getCamelCaseProps(tagData.attrs) : this.getCamelCaseProps(tagData);
                 }
                 else if (typeof tagKey === 'object') {
                     if (tagDirective.componentOptions.children && (Object.keys(tagKey).indexOf(dirTag) !== -1)) {
@@ -510,19 +535,22 @@ let ComponentBase = vueDefineComponent({
                     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));
+                    if (tagData && tagData.attrs) {
+                        ret = extend(ret, this.getCamelCaseProps(tagData.attrs));
                     }
                 }
             }
             return ret;
         },
         /**
-         * convert kebab case directive props to camel case
+         * convert kebab case directive props to camel case.
+         *
+         * @param {Object} props - Objects in kebab case directive props.
+         * @returns {Object} Object converted into camel case directive props.
          */
         getCamelCaseProps(props) {
-            let retProps = {};
-            for (let prop of Object.keys(props)) {
+            const retProps = {};
+            for (const prop of Object.keys(props)) {
                 retProps[prop.replace(/-[a-z]/g, (e) => { return e[1].toUpperCase(); })] = props[`${prop}`];
             }
             return retProps;
@@ -535,16 +563,23 @@ let ComponentBase = vueDefineComponent({
         },
         getTagName(options) {
             let tag = options.tag;
-            if (!tag && options.Ctor && options.Ctor.extendOptions && options.Ctor.extendOptions.methods && options.Ctor.extendOptions.methods.getTag) {
+            const optCtor = options.Ctor;
+            if (!tag && optCtor && optCtor.extendOptions && optCtor.extendOptions.methods && optCtor.extendOptions.methods.getTag) {
                 tag = options.Ctor.extendOptions.methods.getTag();
             }
             return tag;
         }
     }
 });
+/**
+ * Collect public property values for the Vue component.
+ *
+ * @param {any} options - represents props object.
+ * @returns {any} array of props object and `watchobject` respectively.
+ */
 function getProps(options = {}) {
     if (options.props) {
-        for (let prop of options.props) {
+        for (const prop of options.props) {
             (options.newprops || (options.newprops = {}))[`${prop}`] = {};
             (options.watch || (options.watch = {}))[`${prop}`] = function (newVal) {
                 this.ej2Instances[`${prop}`] = newVal;
@@ -556,29 +591,38 @@ function getProps(options = {}) {
     }
     return [options.newprops, options.watch];
 }
-if (!isExecute)
+if (!isExecute) {
     setProxyToRaw(aVue.toRaw);
+}
 
-// tslint:disable:no-any
-let stringCompiler = getTemplateEngine();
+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types */
+const stringCompiler = getTemplateEngine();
+/**
+ * Compiler function that convert the template property to DOM element.
+ *
+ * @param {any} templateElement - represents value of the template property from the component.
+ * @param {Object} helper - represents helper object to utilize on template compilation.
+ * @returns {NodeList} template element that append to the component.
+ */
 function compile(templateElement, helper) {
-    let that = this;
     return (data, context, propName, element, root) => {
         let returnEle;
         if (context) {
             let plugins = context.vueInstance && context.vueInstance.plugins ? { plugins: context.vueInstance.plugins } : {};
-            let pid = getUniqueID("templateParentDiv");
-            let id = getUniqueID("templateDiv");
-            let ele = createElement("div", {
+            const vueInstance = context.vueInstance ? context.vueInstance :
+                ((root && root.vueInstance) ? root.vueInstance : null);
+            const pid = getUniqueID('templateParentDiv');
+            const id = getUniqueID('templateDiv');
+            const ele = createElement('div', {
                 id: pid,
-                innerHTML: '<div id="' + id + '"></div>',
+                innerHTML: '<div id="' + id + '"></div>'
             });
             document.body.appendChild(ele);
-            if (!isExecute && (typeof templateElement === "string" || (templateElement.prototype && templateElement.prototype.CSPTemplate && typeof templateElement === 'function'))) {
-                let vueSlot = getCurrentVueSlot(context.vueInstance, templateElement, root);
+            if (!isExecute && (typeof templateElement === 'string' || (templateElement.prototype && templateElement.prototype.CSPTemplate && typeof templateElement === 'function'))) {
+                const vueSlot = getCurrentVueSlot(context.vueInstance, templateElement, root);
                 if (vueSlot) {
                     // Compilation for Vue 3 slot template
-                    let app = aVue.createVNode({
+                    const app = aVue.createVNode({
                         render() {
                             return vueSlot[`${templateElement}`]({ data: data });
                         }
@@ -587,6 +631,12 @@ function compile(templateElement, helper) {
                     // Get values for Vue 3 slot template
                     getValues(app, context.vueInstance, root);
                     aVue.render(app, ele);
+                    if (vueInstance) {
+                        if (!vueInstance['portals']) {
+                            vueInstance['portals'] = [];
+                        }
+                        vueInstance.portals.push(...[].slice.call(ele.children));
+                    }
                     returnEle = ele.childNodes;
                     detach(ele);
                 }
@@ -598,12 +648,12 @@ function compile(templateElement, helper) {
             }
             else if (!isExecute) {
                 // Compilation for Vue 3 functional template
-                let tempObj = templateElement.call(that, {});
-                let object = tempObj;
-                let propsData = getValue("template.propsData", tempObj);
-                let dataObj = {
+                const tempObj = templateElement.call(this, {});
+                const object = tempObj;
+                const propsData = getValue('template.propsData', tempObj);
+                const dataObj = {
                     data: { data: extend(tempObj.data || {}, data) },
-                    parent: context.vueInstance,
+                    parent: context.vueInstance
                 };
                 if (!object.template) {
                     object.template = object[Object.keys(object)[0]];
@@ -615,7 +665,7 @@ function compile(templateElement, helper) {
                 else {
                     templateCompRef = object.template._context.components[templateElement.name];
                     if (!templateCompRef) {
-                        let key = Object.keys(object.template._context.components)[0];
+                        const key = Object.keys(object.template._context.components)[0];
                         templateCompRef = object.template._context.components[`${key}`];
                     }
                 }
@@ -636,13 +686,16 @@ function compile(templateElement, helper) {
                         tempRef = Object.assign(templateCompRef.data(), dataObj.data);
                     }
                     if (templateCompRef.components) {
-                        let objkeys = Object.keys(templateCompRef.components) || [];
-                        for (let objstring of objkeys) {
-                            let intComponent = templateCompRef.components[`${objstring}`];
+                        const objkeys = Object.keys(templateCompRef.components) || [];
+                        for (const objstring of objkeys) {
+                            const intComponent = templateCompRef.components[`${objstring}`];
                             if (intComponent && intComponent.data) {
-                                if (!intComponent.__data)
+                                if (!intComponent.__data) {
                                     intComponent.__data = intComponent.data;
-                                intComponent.data = function (proxy) { return Object.assign(intComponent.__data.call(proxy), dataObj.data); };
+                                }
+                                intComponent.data = function (proxy) {
+                                    return Object.assign(intComponent.__data.call(proxy), dataObj.data);
+                                };
                             }
                         }
                     }
@@ -651,11 +704,17 @@ function compile(templateElement, helper) {
                     plugins = Object.assign(plugins, data);
                 }
                 templateCompRef.data = function () { return tempRef; };
-                let app = aVue.createVNode(templateCompRef, plugins);
+                const app = aVue.createVNode(templateCompRef, plugins);
                 ele.innerHTML = '';
                 // Get values for Vue 3 functional template
                 getValues(app, context.vueInstance, root);
                 aVue.render(app, ele);
+                if (vueInstance) {
+                    if (!vueInstance['portals']) {
+                        vueInstance['portals'] = [];
+                    }
+                    vueInstance.portals.push(...[].slice.call(ele.children));
+                }
                 returnEle = ele.childNodes;
                 if (context.vueInstance) {
                     let templateInstance = context.vueInstance.templateCollection;
@@ -672,30 +731,38 @@ function compile(templateElement, helper) {
                 }
                 detach(ele);
             }
-            else if (typeof templateElement === "string" || (templateElement.prototype && templateElement.prototype.CSPTemplate && typeof templateElement === 'function')) {
-                let vueSlot = getVueSlot(context.vueInstance, templateElement, root);
+            else if (typeof templateElement === 'string' || (templateElement.prototype && templateElement.prototype.CSPTemplate && typeof templateElement === 'function')) {
+                const vueSlot = getVueSlot(context.vueInstance, templateElement, root);
                 if (vueSlot) {
                     // Get provide values for Vue 2 slot template
                     let provided = {};
-                    let getProvideValues = (vueinstance) => {
-                        if (vueinstance['$parent'])
+                    const getProvideValues = (vueinstance) => {
+                        if (vueinstance['$parent']) {
                             getProvideValues(vueinstance.$parent);
+                        }
                         if (vueinstance['_provided'] && Object.keys(vueinstance['_provided']).length > 0) {
                             provided = Object.assign({}, provided, vueinstance._provided);
                         }
                     };
-                    let vueInstance = context.vueInstance ? context.vueInstance : ((root && root.vueInstance) ? root.vueInstance : null);
+                    const vueInstance = context.vueInstance ? context.vueInstance :
+                        ((root && root.vueInstance) ? root.vueInstance : null);
                     if (vueInstance) {
                         getProvideValues(vueInstance);
                     }
                     // Compilation for Vue 2 slot template
-                    let vueTemplate = new aVue({
+                    const vueTemplate = new aVue({
                         provide: Object.assign({}, provided),
                         render() {
                             return vueSlot[`${templateElement}`]({ data: data });
                         }
                     });
-                    vueTemplate.$mount("#" + id);
+                    vueTemplate.$mount('#' + id);
+                    if (vueInstance) {
+                        if (!vueInstance['portals']) {
+                            vueInstance['portals'] = [];
+                        }
+                        vueInstance.portals.push(...[].slice.call(ele.children));
+                    }
                     returnEle = ele.childNodes;
                     detach(ele);
                 }
@@ -707,27 +774,33 @@ function compile(templateElement, helper) {
             }
             else {
                 // Compilation for Vue 2 functional template
-                let tempObj = templateElement.call(that, {});
+                const tempObj = templateElement.call(this, {});
                 let templateFunction = tempObj.template;
-                let propsData = getValue("template.propsData", tempObj);
-                let dataObj = {
+                const propsData = getValue('template.propsData', tempObj);
+                const dataObj = {
                     data: { data: extend(tempObj.data || {}, data) },
-                    parent: context.vueInstance,
+                    parent: context.vueInstance
                 };
                 if (propsData) {
                     templateFunction = tempObj.template.extends;
                     dataObj.propsData = propsData;
                 }
-                if (typeof templateFunction !== "function") {
+                if (typeof templateFunction !== 'function') {
                     templateFunction = aVue.extend(templateFunction);
                 }
                 if (templateFunction.options.setup) {
                     dataObj.propsData = Object.assign(dataObj.propsData || {}, data);
                 }
-                let templateVue = new templateFunction(dataObj);
+                const templateVue = new templateFunction(dataObj);
                 // let templateVue = new Vue(tempObj.template);
                 // templateVue.$data.data = extend(tempObj.data, data);
-                templateVue.$mount("#" + id);
+                templateVue.$mount('#' + id);
+                if (vueInstance) {
+                    if (!vueInstance['portals']) {
+                        vueInstance['portals'] = [];
+                    }
+                    vueInstance.portals.push(...[].slice.call(ele.children));
+                }
                 returnEle = ele.childNodes;
                 if (context.vueInstance) {
                     let templateInstance = context.vueInstance.templateCollection;
@@ -749,8 +822,16 @@ function compile(templateElement, helper) {
     };
 }
 setTemplateEngine({ compile: compile });
+/**
+ * Collect values from the app instance.
+ *
+ * @param {any} app - represents global application instance
+ * @param {any} cInstance - represents Vue component instance
+ * @param {any} root - represents parent component instance
+ * @returns {void}
+ */
 function getValues(app, cInstance, root) {
-    let vueInstance = cInstance ? cInstance : ((root && root.vueInstance) ? root.vueInstance : null);
+    const vueInstance = cInstance ? cInstance : ((root && root.vueInstance) ? root.vueInstance : null);
     if (!vueInstance) {
         return;
     }
@@ -758,9 +839,10 @@ function getValues(app, cInstance, root) {
     app['appContext'] = vueInstance['$']['appContext'];
     // Get provide value from child component.
     let provided = {};
-    let getProvideValue = (vueinstance) => {
-        if (vueinstance['$'] && vueinstance['$']['parent'])
+    const getProvideValue = (vueinstance) => {
+        if (vueinstance['$'] && vueinstance['$']['parent']) {
             getProvideValue(vueinstance.$.parent);
+        }
         if (vueinstance['provides'] && Object.keys(vueinstance['provides']).length > 0) {
             provided = Object.assign({}, provided, vueinstance.provides);
         }
@@ -770,29 +852,43 @@ function getValues(app, cInstance, root) {
         app.appContext.provides = Object.assign({}, app.appContext.provides, provided);
     }
 }
-// Get the Vue2 slot template from the root or current Vue component.
+/**
+ * Get the Vue2 slot template from the root or current Vue component.
+ *
+ * @param {any} vueInstance - represents parent Vue instance.
+ * @param {any} templateElement - represents component property value
+ * @param {any} root - represents root Vue instance
+ * @returns {any} template Vue instance
+ */
 function getVueSlot(vueInstance, templateElement, root) {
     if (!vueInstance && !(root && root.vueInstance)) {
         return undefined;
     }
-    let instance = (root && root.vueInstance) ? root.vueInstance : vueInstance;
+    const instance = (root && root.vueInstance) ? root.vueInstance : vueInstance;
     return getVueChildSlot(instance, templateElement);
 }
+/**
+ * Get the Vue2 nested slot template from the root or current Vue component.
+ *
+ * @param {any} vueInstance - represents parent Vue instance.
+ * @param {any} templateElement - represents component property value
+ * @returns {any} nested template Vue instance
+ */
 function getVueChildSlot(vueInstance, templateElement) {
     if (!vueInstance) {
         return undefined;
     }
-    let slots = vueInstance.$slots;
-    let scopedSlots = vueInstance.$scopedSlots;
-    let vSlots = vueInstance.scopedSlots;
-    let children = vueInstance.children;
+    const slots = vueInstance.$slots;
+    const scopedSlots = vueInstance.$scopedSlots;
+    const vSlots = vueInstance.scopedSlots;
+    const children = vueInstance.children;
     if (scopedSlots && scopedSlots[`${templateElement}`]) {
         return scopedSlots;
     }
     else if (slots && slots.default) {
-        let childSlots = slots.default;
+        const childSlots = slots.default;
         for (let i = 0; i < childSlots.length; i++) {
-            let slot = getVueChildSlot(getSlot(childSlots[parseInt(i.toString(), 10)]), templateElement);
+            const slot = getVueChildSlot(getSlot(childSlots[parseInt(i.toString(), 10)]), templateElement);
             if (slot) {
                 return slot;
             }
@@ -803,7 +899,7 @@ function getVueChildSlot(vueInstance, templateElement) {
     }
     else if (children) {
         for (let i = 0; i < children.length; i++) {
-            let slot = getVueChildSlot(getSlot(children[parseInt(i.toString(), 10)]), templateElement);
+            const slot = getVueChildSlot(getSlot(children[parseInt(i.toString(), 10)]), templateElement);
             if (slot) {
                 return slot;
             }
@@ -811,19 +907,39 @@ function getVueChildSlot(vueInstance, templateElement) {
     }
     return undefined;
 }
+/**
+ * Collect the component slot directive instance.
+ *
+ * @param {any} vnode - represents Vue components slot instance.
+ * @returns {any} the slot instance of the directive.
+ */
 function getSlot(vnode) {
-    let slot = (vnode.componentOptions && vnode.componentOptions.children) ? vnode.componentOptions :
+    const slot = (vnode.componentOptions && vnode.componentOptions.children) ? vnode.componentOptions :
         (!vnode.data && (vnode.tag === 'e-markersettings' || vnode.tag === 'e-markersetting')) ? vnode : vnode.data;
     return vnode.componentInstance ? vnode.componentInstance : slot;
 }
-// Get the Vue3 slot template from the root or current Vue component.
+/**
+ * Get the Vue3 slot template from the root or current Vue component.
+ *
+ * @param {any} vueInstance - represents parent Vue instance.
+ * @param {any} templateElement - represents component property value
+ * @param {any} root - represents root Vue instance
+ * @returns {any} slot template instance
+ */
 function getCurrentVueSlot(vueInstance, templateElement, root) {
     if (!vueInstance && !(root && root.vueInstance)) {
         return undefined;
     }
-    let slots = (root && root.vueInstance) ? root.vueInstance.$slots : vueInstance.$slots;
+    const slots = (root && root.vueInstance) ? root.vueInstance.$slots : vueInstance.$slots;
     return getChildVueSlot(slots, templateElement);
 }
+/**
+ * Get the Vue3 nested slot template from the root or current Vue component.
+ *
+ * @param {any} slots - represents slot instance.
+ * @param {any} templateElement - represents component property value
+ * @returns {any} nested template Vue instance
+ */
 function getChildVueSlot(slots, templateElement) {
     if (slots && slots[`${templateElement}`]) {
         return slots;
@@ -832,7 +948,7 @@ function getChildVueSlot(slots, templateElement) {
         let childSlots = slots.default();
         childSlots = childSlots.flatMap((item) => Array.isArray(item.children) ? item.children : item);
         for (let i = 0; i < childSlots.length; i++) {
-            let slot = getChildVueSlot(childSlots[parseInt(i.toString(), 10)].children, templateElement);
+            const slot = getChildVueSlot(childSlots[parseInt(i.toString(), 10)].children, templateElement);
             if (slot) {
                 return slot;
             }
@@ -841,9 +957,5 @@ function getChildVueSlot(slots, templateElement) {
     return undefined;
 }
 
-/**
- * index for component base
- */
-
-export { isExecute, aVue, gh, vueDefineComponent, ComponentBase, getProps, compile };
+export { ComponentBase, aVue, compile, getProps, gh, isExecute, vueDefineComponent };
 //# sourceMappingURL=ej2-vue-base.es2015.js.map