@syncfusion/ej2-vue-base 20.4.48 → 21.1.35

package/src/component-base.js

@@ -1,61 +1,40 @@
 /**
  * Vue Component Base
  */
-var __extends = (this && this.__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 __());
-    };
-})();
+import * as Vue from 'vue';
 import { isNullOrUndefined, extend, getValue } from '@syncfusion/ej2-base';
-import * as Vue3 from 'vue-class-component';
-import * as Vue2 from 'vue';
-import Vue from 'vue';
-export var aVue = _interopRequireWildcard(Vue2);
-export 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;
-    }
-}
-export var allVue = aVue;
-export var gh = allVue.h;
-export var isExecute = (parseInt(allVue.version) > 2) ? false : true;
-var vueImport;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport = Vue3.Vue;
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) {
+    return obj;
 }
 else {
-    vueImport = Vue;
-}
-var ComponentBase = /** @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);
+export var isExecute = (parseInt(curVue['version']) > 2) ? false : true, aVue = !isExecute ? curVue : curVue['default'], gh = curVue['h'];
+export var vueDefineComponent = function (options) { return !isExecute ? aVue['defineComponent'](options) : aVue['extend'](options); };
+export 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;
@@ -94,8 +73,8 @@ var ComponentBase = /** @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++) {
@@ -111,79 +90,8 @@ var ComponentBase = /** @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();
         }
@@ -196,367 +104,472 @@ var ComponentBase = /** @class */ (function (_super) {
                 this.assignValueToWrapper(childKey, false);
             }
         }
-    };
-    ComponentBase.prototype.beforeDestroy = 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);
+    },
+    beforeDestroy: function () {
+        this.destroyComponent();
+    },
+    beforeUnmount: function () {
+        this.destroyComponent();
+    },
+    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();
+        },
+        getInjectedServices: function () {
+            var ret = [];
+            var provide;
+            if (this.$root && this.isDecorator) {
+                provide = getValue('$root.$options.provide', this);
             }
-            else if (this && this.$ && this.$.slots && this.$.slots.default) {
-                propRef = this.$.slots.default();
+            else if (this.$vnode) {
+                provide = getValue('$vnode.context.$options.provide', this);
             }
-            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 (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();
                     }
                 }
-            }
-            else {
-                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];
-        }
-    };
-    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;
+                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 {
-                    for (var i = 0; i < Object.keys(innerDirValues).length; i++) {
-                        key = Object.keys(innerDirValues)[parseInt(i.toString(), 10)];
-                        tempObj["" + key] = innerDirValues["" + key];
-                    }
-                    ;
+                else if (this[0] && !isNullOrUndefined(this[0][0]) && !isNullOrUndefined(this[0][0]["" + prop])) {
+                    options["" + prop] = this[0][0]["" + prop];
                 }
             }
-            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);
+            if (this.hasChildDirective) {
+                this.fetchChildPropValues(options);
             }
-        };
-        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 (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;
+            }
+            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 (childSlot.children) {
-                innerDirValues = this_3.resolveComplexInnerDirs(childSlot.children, tagObject["" + tagName], childSlot.type.methods.getTag());
-                if (!items["" + tag]) {
-                    items["" + tag] = [];
+            else {
+                var propRef = void 0;
+                if (this[0] && this[0][1].slots.default) {
+                    propRef = this[0][1].slots.default();
                 }
-                if (innerDirValues.length > 1) {
-                    items["" + tag] = innerDirValues;
+                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 {
-                    items["" + tag].push(innerDirValues);
+                    return;
                 }
             }
-            if (childSlot.props) {
-                childSlot.props = this_3.getCamelCaseProps(childSlot.props);
-            }
-            if (slot.length > 1) {
-                items = Object.keys(items).length == 0 && !items.length ? [] : items;
+            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) {
-                    items.push(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];
+                        }
+                    });
                 }
-            }
-            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 (((/[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 (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);
+                    }
+                }
+                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;
+            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);
+                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++) {
+            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);
+        },
+    }
+});
+export function getProps(options) {
+    if (options === void 0) { options = {}; }
+    if (options.props) {
+        var _loop_4 = function (prop) {
+            (options.newprops || (options.newprops = {}))["" + 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];
-            retProps[prop.replace(/-[a-z]/g, function (e) { return e[1].toUpperCase(); })] = props["" + prop];
+            _loop_4(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));
-export { ComponentBase };
+    }
+    return [options.newprops, options.watch];
+}