@syncfusion/ej2-vue-charts 20.4.53 → 21.1.35

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

@@ -1,35 +1,9 @@
 import { AccumulationChart, BulletChart, Chart, RangeNavigator, Smithchart, Sparkline, StockChart } from '@syncfusion/ej2-charts';
-import { ComponentBase, EJComponentDecorator, allVue, getProps, gh, isExecute } from '@syncfusion/ej2-vue-base';
-import { Vue } from 'vue-class-component';
+import { ComponentBase, getProps, gh, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';
 import { getValue, isNullOrUndefined, isUndefined } from '@syncfusion/ej2-base';
-import Vue$1 from 'vue';
 
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
-let vueImport;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport = Vue;
-}
-else {
-    vueImport = Vue$1;
-}
-let TrendlinesDirective = 
-/* Start Options({
-    inject: {
-        custom: {
-            default: null
-        }
-    }
-}) End */
-class TrendlinesDirective extends vueImport {
-    constructor() {
-        super(arguments);
-    }
+let TrendlinesDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
     render(createElement) {
         if (!isExecute) {
             let h = !isExecute ? gh : createElement;
@@ -40,76 +14,43 @@ class TrendlinesDirective extends vueImport {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    }
+    },
     updated() {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    }
-    getTag() {
-        return 'e-trendlines';
-    }
-};
-TrendlinesDirective = __decorate([
-    EJComponentDecorator({}, isExecute)
-    /* Start Options({
-        inject: {
-            custom: {
-                default: null
-            }
+    },
+    methods: {
+        getTag() {
+            return 'e-trendlines';
         }
-    }) End */
-], TrendlinesDirective);
+    }
+});
 const TrendlinesPlugin = {
     name: 'e-trendlines',
-    install(Vue$$1) {
-        Vue$$1.component(TrendlinesPlugin.name, TrendlinesDirective);
+    install(Vue) {
+        Vue.component(TrendlinesPlugin.name, TrendlinesDirective);
     }
 };
-let TrendlineDirective = class TrendlineDirective extends vueImport {
+let TrendlineDirective = vueDefineComponent({
     render() {
         return;
+    },
+    methods: {
+        getTag() {
+            return 'e-trendline';
+        }
     }
-    getTag() {
-        return 'e-trendline';
-    }
-};
-TrendlineDirective = __decorate([
-    EJComponentDecorator({}, isExecute)
-], TrendlineDirective);
+});
 const TrendlinePlugin = {
     name: 'e-trendline',
-    install(Vue$$1) {
-        Vue$$1.component(TrendlinePlugin.name, TrendlineDirective);
+    install(Vue) {
+        Vue.component(TrendlinePlugin.name, TrendlineDirective);
     }
 };
 
-var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
-let vueImport$1;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport$1 = Vue;
-}
-else {
-    vueImport$1 = Vue$1;
-}
-let SegmentsDirective = 
-/* Start Options({
-    inject: {
-        custom: {
-            default: null
-        }
-    }
-}) End */
-class SegmentsDirective extends vueImport$1 {
-    constructor() {
-        super(arguments);
-    }
+let SegmentsDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
     render(createElement) {
         if (!isExecute) {
             let h = !isExecute ? gh : createElement;
@@ -120,76 +61,43 @@ class SegmentsDirective extends vueImport$1 {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    }
+    },
     updated() {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    }
-    getTag() {
-        return 'e-segments';
-    }
-};
-SegmentsDirective = __decorate$1([
-    EJComponentDecorator({}, isExecute)
-    /* Start Options({
-        inject: {
-            custom: {
-                default: null
-            }
+    },
+    methods: {
+        getTag() {
+            return 'e-segments';
         }
-    }) End */
-], SegmentsDirective);
+    }
+});
 const SegmentsPlugin = {
     name: 'e-segments',
-    install(Vue$$1) {
-        Vue$$1.component(SegmentsPlugin.name, SegmentsDirective);
+    install(Vue) {
+        Vue.component(SegmentsPlugin.name, SegmentsDirective);
     }
 };
-let SegmentDirective = class SegmentDirective extends vueImport$1 {
+let SegmentDirective = vueDefineComponent({
     render() {
         return;
+    },
+    methods: {
+        getTag() {
+            return 'e-segment';
+        }
     }
-    getTag() {
-        return 'e-segment';
-    }
-};
-SegmentDirective = __decorate$1([
-    EJComponentDecorator({}, isExecute)
-], SegmentDirective);
+});
 const SegmentPlugin = {
     name: 'e-segment',
-    install(Vue$$1) {
-        Vue$$1.component(SegmentPlugin.name, SegmentDirective);
+    install(Vue) {
+        Vue.component(SegmentPlugin.name, SegmentDirective);
     }
 };
 
-var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
-let vueImport$2;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport$2 = Vue;
-}
-else {
-    vueImport$2 = Vue$1;
-}
-let SeriesCollectionDirective = 
-/* Start Options({
-    inject: {
-        custom: {
-            default: null
-        }
-    }
-}) End */
-class SeriesCollectionDirective extends vueImport$2 {
-    constructor() {
-        super(arguments);
-    }
+let SeriesCollectionDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
     render(createElement) {
         if (!isExecute) {
             let h = !isExecute ? gh : createElement;
@@ -200,76 +108,43 @@ class SeriesCollectionDirective extends vueImport$2 {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    }
+    },
     updated() {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    }
-    getTag() {
-        return 'e-series-collection';
-    }
-};
-SeriesCollectionDirective = __decorate$2([
-    EJComponentDecorator({}, isExecute)
-    /* Start Options({
-        inject: {
-            custom: {
-                default: null
-            }
+    },
+    methods: {
+        getTag() {
+            return 'e-series-collection';
         }
-    }) End */
-], SeriesCollectionDirective);
+    }
+});
 const SeriesCollectionPlugin = {
     name: 'e-series-collection',
-    install(Vue$$1) {
-        Vue$$1.component(SeriesCollectionPlugin.name, SeriesCollectionDirective);
+    install(Vue) {
+        Vue.component(SeriesCollectionPlugin.name, SeriesCollectionDirective);
     }
 };
-let SeriesDirective = class SeriesDirective extends vueImport$2 {
+let SeriesDirective = vueDefineComponent({
     render() {
         return;
+    },
+    methods: {
+        getTag() {
+            return 'e-series';
+        }
     }
-    getTag() {
-        return 'e-series';
-    }
-};
-SeriesDirective = __decorate$2([
-    EJComponentDecorator({}, isExecute)
-], SeriesDirective);
+});
 const SeriesPlugin = {
     name: 'e-series',
-    install(Vue$$1) {
-        Vue$$1.component(SeriesPlugin.name, SeriesDirective);
+    install(Vue) {
+        Vue.component(SeriesPlugin.name, SeriesDirective);
     }
 };
 
-var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
-let vueImport$3;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport$3 = Vue;
-}
-else {
-    vueImport$3 = Vue$1;
-}
-let StripLinesDirective = 
-/* Start Options({
-    inject: {
-        custom: {
-            default: null
-        }
-    }
-}) End */
-class StripLinesDirective extends vueImport$3 {
-    constructor() {
-        super(arguments);
-    }
+let StripLinesDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
     render(createElement) {
         if (!isExecute) {
             let h = !isExecute ? gh : createElement;
@@ -280,76 +155,43 @@ class StripLinesDirective extends vueImport$3 {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    }
+    },
     updated() {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    }
-    getTag() {
-        return 'e-striplines';
-    }
-};
-StripLinesDirective = __decorate$3([
-    EJComponentDecorator({}, isExecute)
-    /* Start Options({
-        inject: {
-            custom: {
-                default: null
-            }
+    },
+    methods: {
+        getTag() {
+            return 'e-striplines';
         }
-    }) End */
-], StripLinesDirective);
+    }
+});
 const StripLinesPlugin = {
     name: 'e-striplines',
-    install(Vue$$1) {
-        Vue$$1.component(StripLinesPlugin.name, StripLinesDirective);
+    install(Vue) {
+        Vue.component(StripLinesPlugin.name, StripLinesDirective);
     }
 };
-let StripLineDirective = class StripLineDirective extends vueImport$3 {
+let StripLineDirective = vueDefineComponent({
     render() {
         return;
+    },
+    methods: {
+        getTag() {
+            return 'e-stripline';
+        }
     }
-    getTag() {
-        return 'e-stripline';
-    }
-};
-StripLineDirective = __decorate$3([
-    EJComponentDecorator({}, isExecute)
-], StripLineDirective);
+});
 const StripLinePlugin = {
     name: 'e-stripline',
-    install(Vue$$1) {
-        Vue$$1.component(StripLinePlugin.name, StripLineDirective);
+    install(Vue) {
+        Vue.component(StripLinePlugin.name, StripLineDirective);
     }
 };
 
-var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
-let vueImport$4;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport$4 = Vue;
-}
-else {
-    vueImport$4 = Vue$1;
-}
-let CategoriesDirective = 
-/* Start Options({
-    inject: {
-        custom: {
-            default: null
-        }
-    }
-}) End */
-class CategoriesDirective extends vueImport$4 {
-    constructor() {
-        super(arguments);
-    }
+let CategoriesDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
     render(createElement) {
         if (!isExecute) {
             let h = !isExecute ? gh : createElement;
@@ -360,76 +202,43 @@ class CategoriesDirective extends vueImport$4 {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    }
+    },
     updated() {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    }
-    getTag() {
-        return 'e-categories';
-    }
-};
-CategoriesDirective = __decorate$4([
-    EJComponentDecorator({}, isExecute)
-    /* Start Options({
-        inject: {
-            custom: {
-                default: null
-            }
+    },
+    methods: {
+        getTag() {
+            return 'e-categories';
         }
-    }) End */
-], CategoriesDirective);
+    }
+});
 const CategoriesPlugin = {
     name: 'e-categories',
-    install(Vue$$1) {
-        Vue$$1.component(CategoriesPlugin.name, CategoriesDirective);
+    install(Vue) {
+        Vue.component(CategoriesPlugin.name, CategoriesDirective);
     }
 };
-let CategoryDirective = class CategoryDirective extends vueImport$4 {
+let CategoryDirective = vueDefineComponent({
     render() {
         return;
+    },
+    methods: {
+        getTag() {
+            return 'e-category';
+        }
     }
-    getTag() {
-        return 'e-category';
-    }
-};
-CategoryDirective = __decorate$4([
-    EJComponentDecorator({}, isExecute)
-], CategoryDirective);
+});
 const CategoryPlugin = {
     name: 'e-category',
-    install(Vue$$1) {
-        Vue$$1.component(CategoryPlugin.name, CategoryDirective);
+    install(Vue) {
+        Vue.component(CategoryPlugin.name, CategoryDirective);
     }
 };
 
-var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
-let vueImport$5;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport$5 = Vue;
-}
-else {
-    vueImport$5 = Vue$1;
-}
-let MultiLevelLabelsDirective = 
-/* Start Options({
-    inject: {
-        custom: {
-            default: null
-        }
-    }
-}) End */
-class MultiLevelLabelsDirective extends vueImport$5 {
-    constructor() {
-        super(arguments);
-    }
+let MultiLevelLabelsDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
     render(createElement) {
         if (!isExecute) {
             let h = !isExecute ? gh : createElement;
@@ -440,76 +249,43 @@ class MultiLevelLabelsDirective extends vueImport$5 {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    }
+    },
     updated() {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    }
-    getTag() {
-        return 'e-multilevellabels';
-    }
-};
-MultiLevelLabelsDirective = __decorate$5([
-    EJComponentDecorator({}, isExecute)
-    /* Start Options({
-        inject: {
-            custom: {
-                default: null
-            }
+    },
+    methods: {
+        getTag() {
+            return 'e-multilevellabels';
         }
-    }) End */
-], MultiLevelLabelsDirective);
+    }
+});
 const MultiLevelLabelsPlugin = {
     name: 'e-multilevellabels',
-    install(Vue$$1) {
-        Vue$$1.component(MultiLevelLabelsPlugin.name, MultiLevelLabelsDirective);
+    install(Vue) {
+        Vue.component(MultiLevelLabelsPlugin.name, MultiLevelLabelsDirective);
     }
 };
-let MultiLevelLabelDirective = class MultiLevelLabelDirective extends vueImport$5 {
+let MultiLevelLabelDirective = vueDefineComponent({
     render() {
         return;
+    },
+    methods: {
+        getTag() {
+            return 'e-multilevellabel';
+        }
     }
-    getTag() {
-        return 'e-multilevellabel';
-    }
-};
-MultiLevelLabelDirective = __decorate$5([
-    EJComponentDecorator({}, isExecute)
-], MultiLevelLabelDirective);
+});
 const MultiLevelLabelPlugin = {
     name: 'e-multilevellabel',
-    install(Vue$$1) {
-        Vue$$1.component(MultiLevelLabelPlugin.name, MultiLevelLabelDirective);
+    install(Vue) {
+        Vue.component(MultiLevelLabelPlugin.name, MultiLevelLabelDirective);
     }
 };
 
-var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
-let vueImport$6;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport$6 = Vue;
-}
-else {
-    vueImport$6 = Vue$1;
-}
-let AxesDirective = 
-/* Start Options({
-    inject: {
-        custom: {
-            default: null
-        }
-    }
-}) End */
-class AxesDirective extends vueImport$6 {
-    constructor() {
-        super(arguments);
-    }
+let AxesDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
     render(createElement) {
         if (!isExecute) {
             let h = !isExecute ? gh : createElement;
@@ -520,76 +296,43 @@ class AxesDirective extends vueImport$6 {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    }
+    },
     updated() {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    }
-    getTag() {
-        return 'e-axes';
-    }
-};
-AxesDirective = __decorate$6([
-    EJComponentDecorator({}, isExecute)
-    /* Start Options({
-        inject: {
-            custom: {
-                default: null
-            }
+    },
+    methods: {
+        getTag() {
+            return 'e-axes';
         }
-    }) End */
-], AxesDirective);
+    }
+});
 const AxesPlugin = {
     name: 'e-axes',
-    install(Vue$$1) {
-        Vue$$1.component(AxesPlugin.name, AxesDirective);
+    install(Vue) {
+        Vue.component(AxesPlugin.name, AxesDirective);
     }
 };
-let AxisDirective = class AxisDirective extends vueImport$6 {
+let AxisDirective = vueDefineComponent({
     render() {
         return;
+    },
+    methods: {
+        getTag() {
+            return 'e-axis';
+        }
     }
-    getTag() {
-        return 'e-axis';
-    }
-};
-AxisDirective = __decorate$6([
-    EJComponentDecorator({}, isExecute)
-], AxisDirective);
+});
 const AxisPlugin = {
     name: 'e-axis',
-    install(Vue$$1) {
-        Vue$$1.component(AxisPlugin.name, AxisDirective);
+    install(Vue) {
+        Vue.component(AxisPlugin.name, AxisDirective);
     }
 };
 
-var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
-let vueImport$7;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport$7 = Vue;
-}
-else {
-    vueImport$7 = Vue$1;
-}
-let RowsDirective = 
-/* Start Options({
-    inject: {
-        custom: {
-            default: null
-        }
-    }
-}) End */
-class RowsDirective extends vueImport$7 {
-    constructor() {
-        super(arguments);
-    }
+let RowsDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
     render(createElement) {
         if (!isExecute) {
             let h = !isExecute ? gh : createElement;
@@ -600,76 +343,43 @@ class RowsDirective extends vueImport$7 {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    }
+    },
     updated() {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    }
-    getTag() {
-        return 'e-rows';
-    }
-};
-RowsDirective = __decorate$7([
-    EJComponentDecorator({}, isExecute)
-    /* Start Options({
-        inject: {
-            custom: {
-                default: null
-            }
+    },
+    methods: {
+        getTag() {
+            return 'e-rows';
         }
-    }) End */
-], RowsDirective);
+    }
+});
 const RowsPlugin = {
     name: 'e-rows',
-    install(Vue$$1) {
-        Vue$$1.component(RowsPlugin.name, RowsDirective);
+    install(Vue) {
+        Vue.component(RowsPlugin.name, RowsDirective);
     }
 };
-let RowDirective = class RowDirective extends vueImport$7 {
+let RowDirective = vueDefineComponent({
     render() {
         return;
+    },
+    methods: {
+        getTag() {
+            return 'e-row';
+        }
     }
-    getTag() {
-        return 'e-row';
-    }
-};
-RowDirective = __decorate$7([
-    EJComponentDecorator({}, isExecute)
-], RowDirective);
+});
 const RowPlugin = {
     name: 'e-row',
-    install(Vue$$1) {
-        Vue$$1.component(RowPlugin.name, RowDirective);
+    install(Vue) {
+        Vue.component(RowPlugin.name, RowDirective);
     }
 };
 
-var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
-let vueImport$8;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport$8 = Vue;
-}
-else {
-    vueImport$8 = Vue$1;
-}
-let ColumnsDirective = 
-/* Start Options({
-    inject: {
-        custom: {
-            default: null
-        }
-    }
-}) End */
-class ColumnsDirective extends vueImport$8 {
-    constructor() {
-        super(arguments);
-    }
+let ColumnsDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
     render(createElement) {
         if (!isExecute) {
             let h = !isExecute ? gh : createElement;
@@ -680,76 +390,43 @@ class ColumnsDirective extends vueImport$8 {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    }
+    },
     updated() {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    }
-    getTag() {
-        return 'e-columns';
-    }
-};
-ColumnsDirective = __decorate$8([
-    EJComponentDecorator({}, isExecute)
-    /* Start Options({
-        inject: {
-            custom: {
-                default: null
-            }
+    },
+    methods: {
+        getTag() {
+            return 'e-columns';
         }
-    }) End */
-], ColumnsDirective);
+    }
+});
 const ColumnsPlugin = {
     name: 'e-columns',
-    install(Vue$$1) {
-        Vue$$1.component(ColumnsPlugin.name, ColumnsDirective);
+    install(Vue) {
+        Vue.component(ColumnsPlugin.name, ColumnsDirective);
     }
 };
-let ColumnDirective = class ColumnDirective extends vueImport$8 {
+let ColumnDirective = vueDefineComponent({
     render() {
         return;
+    },
+    methods: {
+        getTag() {
+            return 'e-column';
+        }
     }
-    getTag() {
-        return 'e-column';
-    }
-};
-ColumnDirective = __decorate$8([
-    EJComponentDecorator({}, isExecute)
-], ColumnDirective);
+});
 const ColumnPlugin = {
     name: 'e-column',
-    install(Vue$$1) {
-        Vue$$1.component(ColumnPlugin.name, ColumnDirective);
+    install(Vue) {
+        Vue.component(ColumnPlugin.name, ColumnDirective);
     }
 };
 
-var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
-let vueImport$9;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport$9 = Vue;
-}
-else {
-    vueImport$9 = Vue$1;
-}
-let RangeColorSettingsDirective = 
-/* Start Options({
-    inject: {
-        custom: {
-            default: null
-        }
-    }
-}) End */
-class RangeColorSettingsDirective extends vueImport$9 {
-    constructor() {
-        super(arguments);
-    }
+let RangeColorSettingsDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
     render(createElement) {
         if (!isExecute) {
             let h = !isExecute ? gh : createElement;
@@ -760,76 +437,43 @@ class RangeColorSettingsDirective extends vueImport$9 {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    }
+    },
     updated() {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    }
-    getTag() {
-        return 'e-rangecolorsettings';
-    }
-};
-RangeColorSettingsDirective = __decorate$9([
-    EJComponentDecorator({}, isExecute)
-    /* Start Options({
-        inject: {
-            custom: {
-                default: null
-            }
+    },
+    methods: {
+        getTag() {
+            return 'e-rangecolorsettings';
         }
-    }) End */
-], RangeColorSettingsDirective);
+    }
+});
 const RangeColorSettingsPlugin = {
     name: 'e-rangecolorsettings',
-    install(Vue$$1) {
-        Vue$$1.component(RangeColorSettingsPlugin.name, RangeColorSettingsDirective);
+    install(Vue) {
+        Vue.component(RangeColorSettingsPlugin.name, RangeColorSettingsDirective);
     }
 };
-let RangeColorSettingDirective = class RangeColorSettingDirective extends vueImport$9 {
+let RangeColorSettingDirective = vueDefineComponent({
     render() {
         return;
+    },
+    methods: {
+        getTag() {
+            return 'e-rangecolorsetting';
+        }
     }
-    getTag() {
-        return 'e-rangecolorsetting';
-    }
-};
-RangeColorSettingDirective = __decorate$9([
-    EJComponentDecorator({}, isExecute)
-], RangeColorSettingDirective);
+});
 const RangeColorSettingPlugin = {
     name: 'e-rangecolorsetting',
-    install(Vue$$1) {
-        Vue$$1.component(RangeColorSettingPlugin.name, RangeColorSettingDirective);
+    install(Vue) {
+        Vue.component(RangeColorSettingPlugin.name, RangeColorSettingDirective);
     }
 };
 
-var __decorate$10 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
-let vueImport$10;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport$10 = Vue;
-}
-else {
-    vueImport$10 = Vue$1;
-}
-let AnnotationsDirective = 
-/* Start Options({
-    inject: {
-        custom: {
-            default: null
-        }
-    }
-}) End */
-class AnnotationsDirective extends vueImport$10 {
-    constructor() {
-        super(arguments);
-    }
+let AnnotationsDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
     render(createElement) {
         if (!isExecute) {
             let h = !isExecute ? gh : createElement;
@@ -840,30 +484,22 @@ class AnnotationsDirective extends vueImport$10 {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    }
+    },
     updated() {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    }
-    getTag() {
-        return 'e-annotations';
-    }
-};
-AnnotationsDirective = __decorate$10([
-    EJComponentDecorator({}, isExecute)
-    /* Start Options({
-        inject: {
-            custom: {
-                default: null
-            }
+    },
+    methods: {
+        getTag() {
+            return 'e-annotations';
         }
-    }) End */
-], AnnotationsDirective);
+    }
+});
 const AnnotationsPlugin = {
     name: 'e-annotations',
-    install(Vue$$1) {
-        Vue$$1.component(AnnotationsPlugin.name, AnnotationsDirective);
+    install(Vue) {
+        Vue.component(AnnotationsPlugin.name, AnnotationsDirective);
     }
 };
 /**
@@ -878,50 +514,25 @@ const AnnotationsPlugin = {
  * </ejs-chart>
  * ```
  */
-let AnnotationDirective = class AnnotationDirective extends vueImport$10 {
+let AnnotationDirective = vueDefineComponent({
     render() {
         return;
+    },
+    methods: {
+        getTag() {
+            return 'e-annotation';
+        }
     }
-    getTag() {
-        return 'e-annotation';
-    }
-};
-AnnotationDirective = __decorate$10([
-    EJComponentDecorator({}, isExecute)
-], AnnotationDirective);
+});
 const AnnotationPlugin = {
     name: 'e-annotation',
-    install(Vue$$1) {
-        Vue$$1.component(AnnotationPlugin.name, AnnotationDirective);
+    install(Vue) {
+        Vue.component(AnnotationPlugin.name, AnnotationDirective);
     }
 };
 
-var __decorate$11 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
-let vueImport$11;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport$11 = Vue;
-}
-else {
-    vueImport$11 = Vue$1;
-}
-let SelectedDataIndexesDirective = 
-/* Start Options({
-    inject: {
-        custom: {
-            default: null
-        }
-    }
-}) End */
-class SelectedDataIndexesDirective extends vueImport$11 {
-    constructor() {
-        super(arguments);
-    }
+let SelectedDataIndexesDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
     render(createElement) {
         if (!isExecute) {
             let h = !isExecute ? gh : createElement;
@@ -932,76 +543,43 @@ class SelectedDataIndexesDirective extends vueImport$11 {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    }
+    },
     updated() {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    }
-    getTag() {
-        return 'e-selecteddataindexes';
-    }
-};
-SelectedDataIndexesDirective = __decorate$11([
-    EJComponentDecorator({}, isExecute)
-    /* Start Options({
-        inject: {
-            custom: {
-                default: null
-            }
+    },
+    methods: {
+        getTag() {
+            return 'e-selecteddataindexes';
         }
-    }) End */
-], SelectedDataIndexesDirective);
+    }
+});
 const SelectedDataIndexesPlugin = {
     name: 'e-selecteddataindexes',
-    install(Vue$$1) {
-        Vue$$1.component(SelectedDataIndexesPlugin.name, SelectedDataIndexesDirective);
+    install(Vue) {
+        Vue.component(SelectedDataIndexesPlugin.name, SelectedDataIndexesDirective);
     }
 };
-let SelectedDataIndexDirective = class SelectedDataIndexDirective extends vueImport$11 {
+let SelectedDataIndexDirective = vueDefineComponent({
     render() {
         return;
+    },
+    methods: {
+        getTag() {
+            return 'e-selecteddataindex';
+        }
     }
-    getTag() {
-        return 'e-selecteddataindex';
-    }
-};
-SelectedDataIndexDirective = __decorate$11([
-    EJComponentDecorator({}, isExecute)
-], SelectedDataIndexDirective);
+});
 const SelectedDataIndexPlugin = {
     name: 'e-selecteddataindex',
-    install(Vue$$1) {
-        Vue$$1.component(SelectedDataIndexPlugin.name, SelectedDataIndexDirective);
+    install(Vue) {
+        Vue.component(SelectedDataIndexPlugin.name, SelectedDataIndexDirective);
     }
 };
 
-var __decorate$12 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
-let vueImport$12;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport$12 = Vue;
-}
-else {
-    vueImport$12 = Vue$1;
-}
-let IndicatorsDirective = 
-/* Start Options({
-    inject: {
-        custom: {
-            default: null
-        }
-    }
-}) End */
-class IndicatorsDirective extends vueImport$12 {
-    constructor() {
-        super(arguments);
-    }
+let IndicatorsDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
     render(createElement) {
         if (!isExecute) {
             let h = !isExecute ? gh : createElement;
@@ -1012,57 +590,41 @@ class IndicatorsDirective extends vueImport$12 {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    }
+    },
     updated() {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    }
-    getTag() {
-        return 'e-indicators';
-    }
-};
-IndicatorsDirective = __decorate$12([
-    EJComponentDecorator({}, isExecute)
-    /* Start Options({
-        inject: {
-            custom: {
-                default: null
-            }
+    },
+    methods: {
+        getTag() {
+            return 'e-indicators';
         }
-    }) End */
-], IndicatorsDirective);
+    }
+});
 const IndicatorsPlugin = {
     name: 'e-indicators',
-    install(Vue$$1) {
-        Vue$$1.component(IndicatorsPlugin.name, IndicatorsDirective);
+    install(Vue) {
+        Vue.component(IndicatorsPlugin.name, IndicatorsDirective);
     }
 };
-let IndicatorDirective = class IndicatorDirective extends vueImport$12 {
+let IndicatorDirective = vueDefineComponent({
     render() {
         return;
+    },
+    methods: {
+        getTag() {
+            return 'e-indicator';
+        }
     }
-    getTag() {
-        return 'e-indicator';
-    }
-};
-IndicatorDirective = __decorate$12([
-    EJComponentDecorator({}, isExecute)
-], IndicatorDirective);
+});
 const IndicatorPlugin = {
     name: 'e-indicator',
-    install(Vue$$1) {
-        Vue$$1.component(IndicatorPlugin.name, IndicatorDirective);
+    install(Vue) {
+        Vue.component(IndicatorPlugin.name, IndicatorDirective);
     }
 };
 
-var __decorate$13 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
 const properties = ['isLazyUpdate', 'plugins', 'allowExport', 'allowMultiSelection', 'annotations', 'axes', 'background', 'backgroundImage', 'border', 'chartArea', 'columns', 'crosshair', 'currencyCode', 'dataSource', 'description', 'enableAnimation', 'enableAutoIntervalOnBothAxis', 'enableCanvas', 'enableExport', 'enablePersistence', 'enableRtl', 'enableSideBySidePlacement', 'height', 'highlightColor', 'highlightMode', 'highlightPattern', 'indicators', 'isMultiSelect', 'isTransposed', 'legendSettings', 'locale', 'margin', 'palettes', 'primaryXAxis', 'primaryYAxis', 'rangeColorSettings', 'rows', 'selectedDataIndexes', 'selectionMode', 'selectionPattern', 'series', 'subTitle', 'subTitleStyle', 'tabIndex', 'theme', 'title', 'titleStyle', 'tooltip', 'useGroupingSeparator', 'width', 'zoomSettings', 'afterExport', 'animationComplete', 'annotationRender', 'axisLabelClick', 'axisLabelRender', 'axisMultiLabelRender', 'axisRangeCalculated', 'beforeExport', 'beforePrint', 'beforeResize', 'chartDoubleClick', 'chartMouseClick', 'chartMouseDown', 'chartMouseLeave', 'chartMouseMove', 'chartMouseUp', 'drag', 'dragComplete', 'dragEnd', 'dragStart', 'legendClick', 'legendRender', 'load', 'loaded', 'multiLevelLabelClick', 'onZooming', 'pointClick', 'pointDoubleClick', 'pointMove', 'pointRender', 'resized', 'scrollChanged', 'scrollEnd', 'scrollStart', 'selectionComplete', 'seriesRender', 'sharedTooltipRender', 'textRender', 'tooltipRender', 'zoomComplete'];
 const modelProps = ['dataSource'];
 const testProp = getProps({ props: properties });
@@ -1079,28 +641,28 @@ for (let props of modelProps) {
  * <ejs-chart></ejs-chart>
  * ```
  */
-let ChartComponent = 
-/* Start Options({
+let ChartComponent = vueDefineComponent({
+    name: 'ChartComponent',
+    mixins: [ComponentBase],
     props: props,
     watch: watch,
     emits: emitProbs,
-    provide: function provide() {
+    model: { event: 'modelchanged' },
+    provide() { return { custom: this.custom }; },
+    data() {
         return {
-            custom: this.custom
+            ej2Instances: new Chart({}),
+            propKeys: properties,
+            models: modelProps,
+            hasChildDirective: true,
+            hasInjectedModules: true,
+            tagMapper: { "e-series-collection": { "e-series": { "e-trendlines": "e-trendline", "e-segments": "e-segment" } }, "e-axes": { "e-axis": { "e-striplines": "e-stripline", "e-multilevellabels": { "e-multilevellabel": { "e-categories": "e-category" } } } }, "e-rows": "e-row", "e-columns": "e-column", "e-rangecolorsettings": "e-rangecolorsetting", "e-annotations": "e-annotation", "e-selecteddataindexes": "e-selecteddataindex", "e-indicators": "e-indicator" },
+            tagNameMapper: { "e-series-collection": "e-series", "e-striplines": "e-stripLines", "e-multilevellabels": "e-multiLevelLabels", "e-rangecolorsettings": "e-rangeColorSettings", "e-selecteddataindexes": "e-selectedDataIndexes" },
+            isVue3: !isExecute,
+            templateCollection: {},
         };
-    }
-}) End */
-class ChartComponent extends ComponentBase {
-    constructor() {
-        super(arguments);
-        this.propKeys = properties;
-        this.models = modelProps;
-        this.hasChildDirective = true;
-        this.hasInjectedModules = true;
-        this.tagMapper = { "e-series-collection": { "e-series": { "e-trendlines": "e-trendline", "e-segments": "e-segment" } }, "e-axes": { "e-axis": { "e-striplines": "e-stripline", "e-multilevellabels": { "e-multilevellabel": { "e-categories": "e-category" } } } }, "e-rows": "e-row", "e-columns": "e-column", "e-rangecolorsettings": "e-rangecolorsetting", "e-annotations": "e-annotation", "e-selecteddataindexes": "e-selecteddataindex", "e-indicators": "e-indicator" };
-        this.tagNameMapper = { "e-series-collection": "e-series", "e-striplines": "e-stripLines", "e-multilevellabels": "e-multiLevelLabels", "e-rangecolorsettings": "e-rangeColorSettings", "e-selecteddataindexes": "e-selectedDataIndexes" };
-        this.isVue3 = !isExecute;
-        this.ej2Instances = new Chart({});
+    },
+    created() {
         this.ej2Instances._trigger = this.ej2Instances.trigger;
         this.ej2Instances.trigger = this.trigger;
         this.bindProperties();
@@ -1108,219 +670,179 @@ class ChartComponent extends ComponentBase {
         this.ej2Instances.setProperties = this.setProperties;
         this.ej2Instances.clearTemplate = this.clearTemplate;
         this.updated = this.updated;
-    }
-    clearTemplate(templateNames) {
-        if (!templateNames) {
-            templateNames = Object.keys(this.templateCollection || {});
-        }
-        if (templateNames.length && this.templateCollection) {
-            for (let tempName of templateNames) {
-                let elementCollection = this.templateCollection[tempName];
-                if (elementCollection && elementCollection.length) {
-                    for (let ele of elementCollection) {
-                        let destroy = getValue('__vue__.$destroy', ele);
-                        if (destroy) {
-                            ele.__vue__.$destroy();
-                        }
-                        if (ele.innerHTML) {
-                            ele.innerHTML = '';
+    },
+    render(createElement) {
+        let h = !isExecute ? gh : createElement;
+        let slots = null;
+        if (!isNullOrUndefined(this.$slots.default)) {
+            slots = !isExecute ? this.$slots.default() : this.$slots.default;
+        }
+        return h('div', slots);
+    },
+    methods: {
+        clearTemplate(templateNames) {
+            if (!templateNames) {
+                templateNames = Object.keys(this.templateCollection || {});
+            }
+            if (templateNames.length && this.templateCollection) {
+                for (let tempName of templateNames) {
+                    let elementCollection = this.templateCollection[tempName];
+                    if (elementCollection && elementCollection.length) {
+                        for (let ele of elementCollection) {
+                            let destroy = getValue('__vue__.$destroy', ele);
+                            if (destroy) {
+                                ele.__vue__.$destroy();
+                            }
+                            if (ele.innerHTML) {
+                                ele.innerHTML = '';
+                            }
                         }
+                        delete this.templateCollection[tempName];
                     }
-                    delete this.templateCollection[tempName];
                 }
             }
-        }
-    }
-    setProperties(prop, muteOnChange) {
-        if (this.isVue3) {
-            this.models = !this.models ? this.ej2Instances.referModels : this.models;
-        }
-        if (this.ej2Instances && this.ej2Instances._setProperties) {
-            this.ej2Instances._setProperties(prop, muteOnChange);
-        }
-        if (prop && this.models && this.models.length) {
-            Object.keys(prop).map((key) => {
-                this.models.map((model) => {
-                    if ((key === model) && !(/datasource/i.test(key))) {
-                        if (this.isVue3) {
-                            this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
+        },
+        setProperties(prop, muteOnChange) {
+            if (this.isVue3) {
+                this.models = !this.models ? this.ej2Instances.referModels : this.models;
+            }
+            if (this.ej2Instances && this.ej2Instances._setProperties) {
+                this.ej2Instances._setProperties(prop, muteOnChange);
+            }
+            if (prop && this.models && this.models.length) {
+                Object.keys(prop).map((key) => {
+                    this.models.map((model) => {
+                        if ((key === model) && !(/datasource/i.test(key))) {
+                            if (this.isVue3) {
+                                this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
+                            }
+                            else {
+                                this.$emit('update:' + key, prop[key]);
+                                this.$emit('modelchanged', prop[key]);
+                            }
                         }
-                        else {
-                            this.$emit('update:' + key, prop[key]);
-                            this.$emit('modelchanged', prop[key]);
+                    });
+                });
+            }
+        },
+        trigger(eventName, eventProp, successHandler) {
+            if (!isExecute) {
+                this.models = !this.models ? this.ej2Instances.referModels : this.models;
+            }
+            if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
+                let key = this.models.toString().match(/checked|value/) || [];
+                let propKey = key[0];
+                if (eventProp && key && !isUndefined(eventProp[propKey])) {
+                    if (!isExecute) {
+                        this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
+                        this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
+                        this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
+                    }
+                    else {
+                        if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {
+                            this.$emit('update:' + propKey, eventProp[propKey]);
+                            this.$emit('modelchanged', eventProp[propKey]);
                         }
                     }
-                });
-            });
-        }
-    }
-    trigger(eventName, eventProp, successHandler) {
-        if (!isExecute) {
-            this.models = !this.models ? this.ej2Instances.referModels : this.models;
-        }
-        if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
-            let key = this.models.toString().match(/checked|value/) || [];
-            let propKey = key[0];
-            if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute) {
-                    this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
-                    this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
-                    this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
                 }
-                else {
-                    if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {
+            }
+            else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
+                let key = this.models.toString().match(/currentView|selectedDate/) || [];
+                let propKey = key[0];
+                if (eventProp && key && !isUndefined(eventProp[propKey])) {
+                    if (!isExecute) {
+                        this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
+                        this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
+                    }
+                    else {
                         this.$emit('update:' + propKey, eventProp[propKey]);
                         this.$emit('modelchanged', eventProp[propKey]);
                     }
                 }
             }
-        }
-        else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
-            let key = this.models.toString().match(/currentView|selectedDate/) || [];
-            let propKey = key[0];
-            if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute) {
-                    this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
-                    this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
-                }
-                else {
-                    this.$emit('update:' + propKey, eventProp[propKey]);
-                    this.$emit('modelchanged', eventProp[propKey]);
-                }
-            }
-        }
-        if ((this.ej2Instances && this.ej2Instances._trigger)) {
-            this.ej2Instances._trigger(eventName, eventProp, successHandler);
-        }
-    }
-    render(createElement) {
-        let h = !isExecute ? gh : createElement;
-        let slots = null;
-        if (!isNullOrUndefined(this.$slots.default)) {
-            slots = !isExecute ? this.$slots.default() : this.$slots.default;
-        }
-        return h('div', slots);
-    }
-    custom() {
-        this.updated();
-    }
-    addAxes(axisCollection) {
-        return this.ej2Instances.addAxes(axisCollection);
-    }
-    addSeries(seriesCollection) {
-        return this.ej2Instances.addSeries(seriesCollection);
-    }
-    clearSeries() {
-        return this.ej2Instances.clearSeries();
-    }
-    createChartSvg() {
-        return this.ej2Instances.createChartSvg();
-    }
-    export(type, fileName) {
-        return this.ej2Instances.export(type, fileName);
-    }
-    getLocalizedLabel(key) {
-        return this.ej2Instances.getLocalizedLabel(key);
-    }
-    isSecondaryAxis(axis) {
-        return this.ej2Instances.isSecondaryAxis(axis);
-    }
-    print(id) {
-        return this.ej2Instances.print(id);
-    }
-    processData(render) {
-        return this.ej2Instances.processData(render);
-    }
-    refreshLiveData() {
-        return this.ej2Instances.refreshLiveData();
-    }
-    removeAxis(index) {
-        return this.ej2Instances.removeAxis(index);
-    }
-    removeSeries(index) {
-        return this.ej2Instances.removeSeries(index);
-    }
-    setAnnotationValue(annotationIndex, content) {
-        return this.ej2Instances.setAnnotationValue(annotationIndex, content);
-    }
-};
-ChartComponent = __decorate$13([
-    EJComponentDecorator({
-        props: properties,
-        model: {
-            event: 'modelchanged'
-        }
-    }, isExecute)
-    /* Start Options({
-        props: props,
-        watch: watch,
-        emits: emitProbs,
-        provide: function provide() {
-            return {
-                custom: this.custom
-            };
-        }
-    }) End */
-], ChartComponent);
+            if ((this.ej2Instances && this.ej2Instances._trigger)) {
+                this.ej2Instances._trigger(eventName, eventProp, successHandler);
+            }
+        },
+        custom() {
+            this.updated();
+        },
+        addAxes(axisCollection) {
+            return this.ej2Instances.addAxes(axisCollection);
+        },
+        addSeries(seriesCollection) {
+            return this.ej2Instances.addSeries(seriesCollection);
+        },
+        clearSeries() {
+            return this.ej2Instances.clearSeries();
+        },
+        createChartSvg() {
+            return this.ej2Instances.createChartSvg();
+        },
+        export(type, fileName) {
+            return this.ej2Instances.export(type, fileName);
+        },
+        getLocalizedLabel(key) {
+            return this.ej2Instances.getLocalizedLabel(key);
+        },
+        isSecondaryAxis(axis) {
+            return this.ej2Instances.isSecondaryAxis(axis);
+        },
+        print(id) {
+            return this.ej2Instances.print(id);
+        },
+        processData(render) {
+            return this.ej2Instances.processData(render);
+        },
+        refreshLiveData() {
+            return this.ej2Instances.refreshLiveData();
+        },
+        removeAxis(index) {
+            return this.ej2Instances.removeAxis(index);
+        },
+        removeSeries(index) {
+            return this.ej2Instances.removeSeries(index);
+        },
+        setAnnotationValue(annotationIndex, content) {
+            return this.ej2Instances.setAnnotationValue(annotationIndex, content);
+        },
+    }
+});
 const ChartPlugin = {
     name: 'ejs-chart',
-    install(Vue$$1) {
-        Vue$$1.component(ChartPlugin.name, ChartComponent);
-        Vue$$1.component(SeriesPlugin.name, SeriesDirective);
-        Vue$$1.component(SeriesCollectionPlugin.name, SeriesCollectionDirective);
-        Vue$$1.component(TrendlinePlugin.name, TrendlineDirective);
-        Vue$$1.component(TrendlinesPlugin.name, TrendlinesDirective);
-        Vue$$1.component(SegmentPlugin.name, SegmentDirective);
-        Vue$$1.component(SegmentsPlugin.name, SegmentsDirective);
-        Vue$$1.component(AxisPlugin.name, AxisDirective);
-        Vue$$1.component(AxesPlugin.name, AxesDirective);
-        Vue$$1.component(StripLinePlugin.name, StripLineDirective);
-        Vue$$1.component(StripLinesPlugin.name, StripLinesDirective);
-        Vue$$1.component(MultiLevelLabelPlugin.name, MultiLevelLabelDirective);
-        Vue$$1.component(MultiLevelLabelsPlugin.name, MultiLevelLabelsDirective);
-        Vue$$1.component(CategoryPlugin.name, CategoryDirective);
-        Vue$$1.component(CategoriesPlugin.name, CategoriesDirective);
-        Vue$$1.component(RowPlugin.name, RowDirective);
-        Vue$$1.component(RowsPlugin.name, RowsDirective);
-        Vue$$1.component(ColumnPlugin.name, ColumnDirective);
-        Vue$$1.component(ColumnsPlugin.name, ColumnsDirective);
-        Vue$$1.component(RangeColorSettingPlugin.name, RangeColorSettingDirective);
-        Vue$$1.component(RangeColorSettingsPlugin.name, RangeColorSettingsDirective);
-        Vue$$1.component(AnnotationPlugin.name, AnnotationDirective);
-        Vue$$1.component(AnnotationsPlugin.name, AnnotationsDirective);
-        Vue$$1.component(SelectedDataIndexPlugin.name, SelectedDataIndexDirective);
-        Vue$$1.component(SelectedDataIndexesPlugin.name, SelectedDataIndexesDirective);
-        Vue$$1.component(IndicatorPlugin.name, IndicatorDirective);
-        Vue$$1.component(IndicatorsPlugin.name, IndicatorsDirective);
+    install(Vue) {
+        Vue.component(ChartPlugin.name, ChartComponent);
+        Vue.component(SeriesPlugin.name, SeriesDirective);
+        Vue.component(SeriesCollectionPlugin.name, SeriesCollectionDirective);
+        Vue.component(TrendlinePlugin.name, TrendlineDirective);
+        Vue.component(TrendlinesPlugin.name, TrendlinesDirective);
+        Vue.component(SegmentPlugin.name, SegmentDirective);
+        Vue.component(SegmentsPlugin.name, SegmentsDirective);
+        Vue.component(AxisPlugin.name, AxisDirective);
+        Vue.component(AxesPlugin.name, AxesDirective);
+        Vue.component(StripLinePlugin.name, StripLineDirective);
+        Vue.component(StripLinesPlugin.name, StripLinesDirective);
+        Vue.component(MultiLevelLabelPlugin.name, MultiLevelLabelDirective);
+        Vue.component(MultiLevelLabelsPlugin.name, MultiLevelLabelsDirective);
+        Vue.component(CategoryPlugin.name, CategoryDirective);
+        Vue.component(CategoriesPlugin.name, CategoriesDirective);
+        Vue.component(RowPlugin.name, RowDirective);
+        Vue.component(RowsPlugin.name, RowsDirective);
+        Vue.component(ColumnPlugin.name, ColumnDirective);
+        Vue.component(ColumnsPlugin.name, ColumnsDirective);
+        Vue.component(RangeColorSettingPlugin.name, RangeColorSettingDirective);
+        Vue.component(RangeColorSettingsPlugin.name, RangeColorSettingsDirective);
+        Vue.component(AnnotationPlugin.name, AnnotationDirective);
+        Vue.component(AnnotationsPlugin.name, AnnotationsDirective);
+        Vue.component(SelectedDataIndexPlugin.name, SelectedDataIndexDirective);
+        Vue.component(SelectedDataIndexesPlugin.name, SelectedDataIndexesDirective);
+        Vue.component(IndicatorPlugin.name, IndicatorDirective);
+        Vue.component(IndicatorsPlugin.name, IndicatorsDirective);
     }
 };
 
-var __decorate$14 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
-let vueImport$13;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport$13 = Vue;
-}
-else {
-    vueImport$13 = Vue$1;
-}
-let AccumulationSeriesCollectionDirective = 
-/* Start Options({
-    inject: {
-        custom: {
-            default: null
-        }
-    }
-}) End */
-class AccumulationSeriesCollectionDirective extends vueImport$13 {
-    constructor() {
-        super(arguments);
-    }
+let AccumulationSeriesCollectionDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
     render(createElement) {
         if (!isExecute) {
             let h = !isExecute ? gh : createElement;
@@ -1331,76 +853,43 @@ class AccumulationSeriesCollectionDirective extends vueImport$13 {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    }
+    },
     updated() {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    }
-    getTag() {
-        return 'e-accumulation-series-collection';
-    }
-};
-AccumulationSeriesCollectionDirective = __decorate$14([
-    EJComponentDecorator({}, isExecute)
-    /* Start Options({
-        inject: {
-            custom: {
-                default: null
-            }
+    },
+    methods: {
+        getTag() {
+            return 'e-accumulation-series-collection';
         }
-    }) End */
-], AccumulationSeriesCollectionDirective);
+    }
+});
 const AccumulationSeriesCollectionPlugin = {
     name: 'e-accumulation-series-collection',
-    install(Vue$$1) {
-        Vue$$1.component(AccumulationSeriesCollectionPlugin.name, AccumulationSeriesCollectionDirective);
+    install(Vue) {
+        Vue.component(AccumulationSeriesCollectionPlugin.name, AccumulationSeriesCollectionDirective);
     }
 };
-let AccumulationSeriesDirective = class AccumulationSeriesDirective extends vueImport$13 {
+let AccumulationSeriesDirective = vueDefineComponent({
     render() {
         return;
+    },
+    methods: {
+        getTag() {
+            return 'e-accumulation-series';
+        }
     }
-    getTag() {
-        return 'e-accumulation-series';
-    }
-};
-AccumulationSeriesDirective = __decorate$14([
-    EJComponentDecorator({}, isExecute)
-], AccumulationSeriesDirective);
+});
 const AccumulationSeriesPlugin = {
     name: 'e-accumulation-series',
-    install(Vue$$1) {
-        Vue$$1.component(AccumulationSeriesPlugin.name, AccumulationSeriesDirective);
+    install(Vue) {
+        Vue.component(AccumulationSeriesPlugin.name, AccumulationSeriesDirective);
     }
 };
 
-var __decorate$15 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
-let vueImport$14;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport$14 = Vue;
-}
-else {
-    vueImport$14 = Vue$1;
-}
-let AccumulationAnnotationsDirective = 
-/* Start Options({
-    inject: {
-        custom: {
-            default: null
-        }
-    }
-}) End */
-class AccumulationAnnotationsDirective extends vueImport$14 {
-    constructor() {
-        super(arguments);
-    }
+let AccumulationAnnotationsDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
     render(createElement) {
         if (!isExecute) {
             let h = !isExecute ? gh : createElement;
@@ -1411,58 +900,42 @@ class AccumulationAnnotationsDirective extends vueImport$14 {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    }
+    },
     updated() {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    }
-    getTag() {
-        return 'e-accumulation-annotations';
-    }
-};
-AccumulationAnnotationsDirective = __decorate$15([
-    EJComponentDecorator({}, isExecute)
-    /* Start Options({
-        inject: {
-            custom: {
-                default: null
-            }
+    },
+    methods: {
+        getTag() {
+            return 'e-accumulation-annotations';
         }
-    }) End */
-], AccumulationAnnotationsDirective);
+    }
+});
 const AccumulationAnnotationsPlugin = {
     name: 'e-accumulation-annotations',
-    install(Vue$$1) {
-        Vue$$1.component(AccumulationAnnotationsPlugin.name, AccumulationAnnotationsDirective);
+    install(Vue) {
+        Vue.component(AccumulationAnnotationsPlugin.name, AccumulationAnnotationsDirective);
     }
 };
-let AccumulationAnnotationDirective = class AccumulationAnnotationDirective extends vueImport$14 {
+let AccumulationAnnotationDirective = vueDefineComponent({
     render() {
         return;
+    },
+    methods: {
+        getTag() {
+            return 'e-accumulation-annotation';
+        }
     }
-    getTag() {
-        return 'e-accumulation-annotation';
-    }
-};
-AccumulationAnnotationDirective = __decorate$15([
-    EJComponentDecorator({}, isExecute)
-], AccumulationAnnotationDirective);
+});
 const AccumulationAnnotationPlugin = {
     name: 'e-accumulation-annotation',
-    install(Vue$$1) {
-        Vue$$1.component(AccumulationAnnotationPlugin.name, AccumulationAnnotationDirective);
+    install(Vue) {
+        Vue.component(AccumulationAnnotationPlugin.name, AccumulationAnnotationDirective);
     }
 };
 
-var __decorate$16 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
-const properties$1 = ['isLazyUpdate', 'plugins', 'allowExport', 'annotations', 'background', 'backgroundImage', 'border', 'center', 'currencyCode', 'dataSource', 'enableAnimation', 'enableBorderOnMouseMove', 'enableExport', 'enablePersistence', 'enableRtl', 'enableSmartLabels', 'height', 'highlightColor', 'highlightMode', 'highlightPattern', 'isMultiSelect', 'legendSettings', 'locale', 'margin', 'selectedDataIndexes', 'selectionMode', 'selectionPattern', 'series', 'subTitle', 'subTitleStyle', 'theme', 'title', 'titleStyle', 'tooltip', 'useGroupingSeparator', 'width', 'afterExport', 'animationComplete', 'annotationRender', 'beforePrint', 'beforeResize', 'chartDoubleClick', 'chartMouseClick', 'chartMouseDown', 'chartMouseLeave', 'chartMouseMove', 'chartMouseUp', 'legendClick', 'legendRender', 'load', 'loaded', 'pointClick', 'pointMove', 'pointRender', 'resized', 'selectionComplete', 'seriesRender', 'textRender', 'tooltipRender'];
+const properties$1 = ['isLazyUpdate', 'plugins', 'allowExport', 'annotations', 'background', 'backgroundImage', 'border', 'center', 'centerLabel', 'currencyCode', 'dataSource', 'enableAnimation', 'enableBorderOnMouseMove', 'enableExport', 'enablePersistence', 'enableRtl', 'enableSmartLabels', 'height', 'highlightColor', 'highlightMode', 'highlightPattern', 'isMultiSelect', 'legendSettings', 'locale', 'margin', 'selectedDataIndexes', 'selectionMode', 'selectionPattern', 'series', 'subTitle', 'subTitleStyle', 'theme', 'title', 'titleStyle', 'tooltip', 'useGroupingSeparator', 'width', 'afterExport', 'animationComplete', 'annotationRender', 'beforePrint', 'beforeResize', 'chartDoubleClick', 'chartMouseClick', 'chartMouseDown', 'chartMouseLeave', 'chartMouseMove', 'chartMouseUp', 'legendClick', 'legendRender', 'load', 'loaded', 'pointClick', 'pointMove', 'pointRender', 'resized', 'selectionComplete', 'seriesRender', 'textRender', 'tooltipRender'];
 const modelProps$1 = ['dataSource'];
 const testProp$1 = getProps({ props: properties$1 });
 const props$1 = testProp$1[0];
@@ -1478,28 +951,28 @@ for (let props of modelProps$1) {
  * <ejs-accumulationchart></ejs-accumulationchart>
  * ```
  */
-let AccumulationChartComponent = 
-/* Start Options({
-    props: props,
-    watch: watch,
-    emits: emitProbs,
-    provide: function provide() {
+let AccumulationChartComponent = vueDefineComponent({
+    name: 'AccumulationChartComponent',
+    mixins: [ComponentBase],
+    props: props$1,
+    watch: watch$1,
+    emits: emitProbs$1,
+    model: { event: 'modelchanged' },
+    provide() { return { custom: this.custom }; },
+    data() {
         return {
-            custom: this.custom
+            ej2Instances: new AccumulationChart({}),
+            propKeys: properties$1,
+            models: modelProps$1,
+            hasChildDirective: true,
+            hasInjectedModules: true,
+            tagMapper: { "e-accumulation-series-collection": "e-accumulation-series", "e-accumulation-annotations": "e-accumulation-annotation" },
+            tagNameMapper: { "e-accumulation-series-collection": "e-series", "e-accumulation-annotations": "e-annotations" },
+            isVue3: !isExecute,
+            templateCollection: {},
         };
-    }
-}) End */
-class AccumulationChartComponent extends ComponentBase {
-    constructor() {
-        super(arguments);
-        this.propKeys = properties$1;
-        this.models = modelProps$1;
-        this.hasChildDirective = true;
-        this.hasInjectedModules = true;
-        this.tagMapper = { "e-accumulation-series-collection": "e-accumulation-series", "e-accumulation-annotations": "e-accumulation-annotation" };
-        this.tagNameMapper = { "e-accumulation-series-collection": "e-series", "e-accumulation-annotations": "e-annotations" };
-        this.isVue3 = !isExecute;
-        this.ej2Instances = new AccumulationChart({});
+    },
+    created() {
         this.ej2Instances._trigger = this.ej2Instances.trigger;
         this.ej2Instances.trigger = this.trigger;
         this.bindProperties();
@@ -1507,170 +980,130 @@ class AccumulationChartComponent extends ComponentBase {
         this.ej2Instances.setProperties = this.setProperties;
         this.ej2Instances.clearTemplate = this.clearTemplate;
         this.updated = this.updated;
-    }
-    clearTemplate(templateNames) {
-        if (!templateNames) {
-            templateNames = Object.keys(this.templateCollection || {});
-        }
-        if (templateNames.length && this.templateCollection) {
-            for (let tempName of templateNames) {
-                let elementCollection = this.templateCollection[tempName];
-                if (elementCollection && elementCollection.length) {
-                    for (let ele of elementCollection) {
-                        let destroy = getValue('__vue__.$destroy', ele);
-                        if (destroy) {
-                            ele.__vue__.$destroy();
-                        }
-                        if (ele.innerHTML) {
-                            ele.innerHTML = '';
+    },
+    render(createElement) {
+        let h = !isExecute ? gh : createElement;
+        let slots = null;
+        if (!isNullOrUndefined(this.$slots.default)) {
+            slots = !isExecute ? this.$slots.default() : this.$slots.default;
+        }
+        return h('div', slots);
+    },
+    methods: {
+        clearTemplate(templateNames) {
+            if (!templateNames) {
+                templateNames = Object.keys(this.templateCollection || {});
+            }
+            if (templateNames.length && this.templateCollection) {
+                for (let tempName of templateNames) {
+                    let elementCollection = this.templateCollection[tempName];
+                    if (elementCollection && elementCollection.length) {
+                        for (let ele of elementCollection) {
+                            let destroy = getValue('__vue__.$destroy', ele);
+                            if (destroy) {
+                                ele.__vue__.$destroy();
+                            }
+                            if (ele.innerHTML) {
+                                ele.innerHTML = '';
+                            }
                         }
+                        delete this.templateCollection[tempName];
                     }
-                    delete this.templateCollection[tempName];
                 }
             }
-        }
-    }
-    setProperties(prop, muteOnChange) {
-        if (this.isVue3) {
-            this.models = !this.models ? this.ej2Instances.referModels : this.models;
-        }
-        if (this.ej2Instances && this.ej2Instances._setProperties) {
-            this.ej2Instances._setProperties(prop, muteOnChange);
-        }
-        if (prop && this.models && this.models.length) {
-            Object.keys(prop).map((key) => {
-                this.models.map((model) => {
-                    if ((key === model) && !(/datasource/i.test(key))) {
-                        if (this.isVue3) {
-                            this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
+        },
+        setProperties(prop, muteOnChange) {
+            if (this.isVue3) {
+                this.models = !this.models ? this.ej2Instances.referModels : this.models;
+            }
+            if (this.ej2Instances && this.ej2Instances._setProperties) {
+                this.ej2Instances._setProperties(prop, muteOnChange);
+            }
+            if (prop && this.models && this.models.length) {
+                Object.keys(prop).map((key) => {
+                    this.models.map((model) => {
+                        if ((key === model) && !(/datasource/i.test(key))) {
+                            if (this.isVue3) {
+                                this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
+                            }
+                            else {
+                                this.$emit('update:' + key, prop[key]);
+                                this.$emit('modelchanged', prop[key]);
+                            }
                         }
-                        else {
-                            this.$emit('update:' + key, prop[key]);
-                            this.$emit('modelchanged', prop[key]);
+                    });
+                });
+            }
+        },
+        trigger(eventName, eventProp, successHandler) {
+            if (!isExecute) {
+                this.models = !this.models ? this.ej2Instances.referModels : this.models;
+            }
+            if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
+                let key = this.models.toString().match(/checked|value/) || [];
+                let propKey = key[0];
+                if (eventProp && key && !isUndefined(eventProp[propKey])) {
+                    if (!isExecute) {
+                        this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
+                        this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
+                        this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
+                    }
+                    else {
+                        if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {
+                            this.$emit('update:' + propKey, eventProp[propKey]);
+                            this.$emit('modelchanged', eventProp[propKey]);
                         }
                     }
-                });
-            });
-        }
-    }
-    trigger(eventName, eventProp, successHandler) {
-        if (!isExecute) {
-            this.models = !this.models ? this.ej2Instances.referModels : this.models;
-        }
-        if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
-            let key = this.models.toString().match(/checked|value/) || [];
-            let propKey = key[0];
-            if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute) {
-                    this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
-                    this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
-                    this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
                 }
-                else {
-                    if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {
+            }
+            else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
+                let key = this.models.toString().match(/currentView|selectedDate/) || [];
+                let propKey = key[0];
+                if (eventProp && key && !isUndefined(eventProp[propKey])) {
+                    if (!isExecute) {
+                        this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
+                        this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
+                    }
+                    else {
                         this.$emit('update:' + propKey, eventProp[propKey]);
                         this.$emit('modelchanged', eventProp[propKey]);
                     }
                 }
             }
-        }
-        else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
-            let key = this.models.toString().match(/currentView|selectedDate/) || [];
-            let propKey = key[0];
-            if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute) {
-                    this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
-                    this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
-                }
-                else {
-                    this.$emit('update:' + propKey, eventProp[propKey]);
-                    this.$emit('modelchanged', eventProp[propKey]);
-                }
-            }
-        }
-        if ((this.ej2Instances && this.ej2Instances._trigger)) {
-            this.ej2Instances._trigger(eventName, eventProp, successHandler);
-        }
-    }
-    render(createElement) {
-        let h = !isExecute ? gh : createElement;
-        let slots = null;
-        if (!isNullOrUndefined(this.$slots.default)) {
-            slots = !isExecute ? this.$slots.default() : this.$slots.default;
-        }
-        return h('div', slots);
-    }
-    custom() {
-        this.updated();
-    }
-    export(type, fileName) {
-        return this.ej2Instances.export(type, fileName);
-    }
-    print(id) {
-        return this.ej2Instances.print(id);
-    }
-    setAnnotationValue(annotationIndex, content) {
-        return this.ej2Instances.setAnnotationValue(annotationIndex, content);
-    }
-    titleTooltip(event, x, y, isTouch) {
-        return this.ej2Instances.titleTooltip(event, x, y, isTouch);
-    }
-};
-AccumulationChartComponent = __decorate$16([
-    EJComponentDecorator({
-        props: properties$1,
-        model: {
-            event: 'modelchanged'
-        }
-    }, isExecute)
-    /* Start Options({
-        props: props,
-        watch: watch,
-        emits: emitProbs,
-        provide: function provide() {
-            return {
-                custom: this.custom
-            };
-        }
-    }) End */
-], AccumulationChartComponent);
+            if ((this.ej2Instances && this.ej2Instances._trigger)) {
+                this.ej2Instances._trigger(eventName, eventProp, successHandler);
+            }
+        },
+        custom() {
+            this.updated();
+        },
+        export(type, fileName) {
+            return this.ej2Instances.export(type, fileName);
+        },
+        print(id) {
+            return this.ej2Instances.print(id);
+        },
+        setAnnotationValue(annotationIndex, content) {
+            return this.ej2Instances.setAnnotationValue(annotationIndex, content);
+        },
+        titleTooltip(event, x, y, isTouch) {
+            return this.ej2Instances.titleTooltip(event, x, y, isTouch);
+        },
+    }
+});
 const AccumulationChartPlugin = {
     name: 'ejs-accumulationchart',
-    install(Vue$$1) {
-        Vue$$1.component(AccumulationChartPlugin.name, AccumulationChartComponent);
-        Vue$$1.component(AccumulationSeriesPlugin.name, AccumulationSeriesDirective);
-        Vue$$1.component(AccumulationSeriesCollectionPlugin.name, AccumulationSeriesCollectionDirective);
-        Vue$$1.component(AccumulationAnnotationPlugin.name, AccumulationAnnotationDirective);
-        Vue$$1.component(AccumulationAnnotationsPlugin.name, AccumulationAnnotationsDirective);
+    install(Vue) {
+        Vue.component(AccumulationChartPlugin.name, AccumulationChartComponent);
+        Vue.component(AccumulationSeriesPlugin.name, AccumulationSeriesDirective);
+        Vue.component(AccumulationSeriesCollectionPlugin.name, AccumulationSeriesCollectionDirective);
+        Vue.component(AccumulationAnnotationPlugin.name, AccumulationAnnotationDirective);
+        Vue.component(AccumulationAnnotationsPlugin.name, AccumulationAnnotationsDirective);
     }
 };
 
-var __decorate$17 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
-let vueImport$15;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport$15 = Vue;
-}
-else {
-    vueImport$15 = Vue$1;
-}
-let RangenavigatorSeriesCollectionDirective = 
-/* Start Options({
-    inject: {
-        custom: {
-            default: null
-        }
-    }
-}) End */
-class RangenavigatorSeriesCollectionDirective extends vueImport$15 {
-    constructor() {
-        super(arguments);
-    }
+let RangenavigatorSeriesCollectionDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
     render(createElement) {
         if (!isExecute) {
             let h = !isExecute ? gh : createElement;
@@ -1681,57 +1114,41 @@ class RangenavigatorSeriesCollectionDirective extends vueImport$15 {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    }
+    },
     updated() {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    }
-    getTag() {
-        return 'e-rangenavigator-series-collection';
-    }
-};
-RangenavigatorSeriesCollectionDirective = __decorate$17([
-    EJComponentDecorator({}, isExecute)
-    /* Start Options({
-        inject: {
-            custom: {
-                default: null
-            }
+    },
+    methods: {
+        getTag() {
+            return 'e-rangenavigator-series-collection';
         }
-    }) End */
-], RangenavigatorSeriesCollectionDirective);
+    }
+});
 const RangenavigatorSeriesCollectionPlugin = {
     name: 'e-rangenavigator-series-collection',
-    install(Vue$$1) {
-        Vue$$1.component(RangenavigatorSeriesCollectionPlugin.name, RangenavigatorSeriesCollectionDirective);
+    install(Vue) {
+        Vue.component(RangenavigatorSeriesCollectionPlugin.name, RangenavigatorSeriesCollectionDirective);
     }
 };
-let RangenavigatorSeriesDirective = class RangenavigatorSeriesDirective extends vueImport$15 {
+let RangenavigatorSeriesDirective = vueDefineComponent({
     render() {
         return;
+    },
+    methods: {
+        getTag() {
+            return 'e-rangenavigator-series';
+        }
     }
-    getTag() {
-        return 'e-rangenavigator-series';
-    }
-};
-RangenavigatorSeriesDirective = __decorate$17([
-    EJComponentDecorator({}, isExecute)
-], RangenavigatorSeriesDirective);
+});
 const RangenavigatorSeriesPlugin = {
     name: 'e-rangenavigator-series',
-    install(Vue$$1) {
-        Vue$$1.component(RangenavigatorSeriesPlugin.name, RangenavigatorSeriesDirective);
+    install(Vue) {
+        Vue.component(RangenavigatorSeriesPlugin.name, RangenavigatorSeriesDirective);
     }
 };
 
-var __decorate$18 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
 const properties$2 = ['isLazyUpdate', 'plugins', 'allowIntervalData', 'allowSnapping', 'animationDuration', 'background', 'dataSource', 'disableRangeSelector', 'enableDeferredUpdate', 'enableGrouping', 'enablePersistence', 'enableRtl', 'groupBy', 'height', 'interval', 'intervalType', 'labelFormat', 'labelIntersectAction', 'labelPosition', 'labelStyle', 'locale', 'logBase', 'majorGridLines', 'majorTickLines', 'margin', 'maximum', 'minimum', 'navigatorBorder', 'navigatorStyleSettings', 'periodSelectorSettings', 'query', 'secondaryLabelAlignment', 'series', 'skeleton', 'skeletonType', 'theme', 'tickPosition', 'tooltip', 'useGroupingSeparator', 'value', 'valueType', 'width', 'xName', 'yName', 'beforePrint', 'beforeResize', 'changed', 'labelRender', 'load', 'loaded', 'resized', 'selectorRender', 'tooltipRender'];
 const modelProps$2 = ['dataSource'];
 const testProp$2 = getProps({ props: properties$2 });
@@ -1748,28 +1165,28 @@ for (let props of modelProps$2) {
  * <ejs-rangenavigator></ejs-rangenavigator>
  * ```
  */
-let RangeNavigatorComponent = 
-/* Start Options({
-    props: props,
-    watch: watch,
-    emits: emitProbs,
-    provide: function provide() {
+let RangeNavigatorComponent = vueDefineComponent({
+    name: 'RangeNavigatorComponent',
+    mixins: [ComponentBase],
+    props: props$2,
+    watch: watch$2,
+    emits: emitProbs$2,
+    model: { event: 'modelchanged' },
+    provide() { return { custom: this.custom }; },
+    data() {
         return {
-            custom: this.custom
+            ej2Instances: new RangeNavigator({}),
+            propKeys: properties$2,
+            models: modelProps$2,
+            hasChildDirective: true,
+            hasInjectedModules: true,
+            tagMapper: { "e-rangenavigator-series-collection": "e-rangenavigator-series" },
+            tagNameMapper: { "e-rangenavigator-series-collection": "e-series" },
+            isVue3: !isExecute,
+            templateCollection: {},
         };
-    }
-}) End */
-class RangeNavigatorComponent extends ComponentBase {
-    constructor() {
-        super(arguments);
-        this.propKeys = properties$2;
-        this.models = modelProps$2;
-        this.hasChildDirective = true;
-        this.hasInjectedModules = true;
-        this.tagMapper = { "e-rangenavigator-series-collection": "e-rangenavigator-series" };
-        this.tagNameMapper = { "e-rangenavigator-series-collection": "e-series" };
-        this.isVue3 = !isExecute;
-        this.ej2Instances = new RangeNavigator({});
+    },
+    created() {
         this.ej2Instances._trigger = this.ej2Instances.trigger;
         this.ej2Instances.trigger = this.trigger;
         this.bindProperties();
@@ -1777,168 +1194,128 @@ class RangeNavigatorComponent extends ComponentBase {
         this.ej2Instances.setProperties = this.setProperties;
         this.ej2Instances.clearTemplate = this.clearTemplate;
         this.updated = this.updated;
-    }
-    clearTemplate(templateNames) {
-        if (!templateNames) {
-            templateNames = Object.keys(this.templateCollection || {});
-        }
-        if (templateNames.length && this.templateCollection) {
-            for (let tempName of templateNames) {
-                let elementCollection = this.templateCollection[tempName];
-                if (elementCollection && elementCollection.length) {
-                    for (let ele of elementCollection) {
-                        let destroy = getValue('__vue__.$destroy', ele);
-                        if (destroy) {
-                            ele.__vue__.$destroy();
-                        }
-                        if (ele.innerHTML) {
-                            ele.innerHTML = '';
+    },
+    render(createElement) {
+        let h = !isExecute ? gh : createElement;
+        let slots = null;
+        if (!isNullOrUndefined(this.$slots.default)) {
+            slots = !isExecute ? this.$slots.default() : this.$slots.default;
+        }
+        return h('div', slots);
+    },
+    methods: {
+        clearTemplate(templateNames) {
+            if (!templateNames) {
+                templateNames = Object.keys(this.templateCollection || {});
+            }
+            if (templateNames.length && this.templateCollection) {
+                for (let tempName of templateNames) {
+                    let elementCollection = this.templateCollection[tempName];
+                    if (elementCollection && elementCollection.length) {
+                        for (let ele of elementCollection) {
+                            let destroy = getValue('__vue__.$destroy', ele);
+                            if (destroy) {
+                                ele.__vue__.$destroy();
+                            }
+                            if (ele.innerHTML) {
+                                ele.innerHTML = '';
+                            }
                         }
+                        delete this.templateCollection[tempName];
                     }
-                    delete this.templateCollection[tempName];
                 }
             }
-        }
-    }
-    setProperties(prop, muteOnChange) {
-        if (this.isVue3) {
-            this.models = !this.models ? this.ej2Instances.referModels : this.models;
-        }
-        if (this.ej2Instances && this.ej2Instances._setProperties) {
-            this.ej2Instances._setProperties(prop, muteOnChange);
-        }
-        if (prop && this.models && this.models.length) {
-            Object.keys(prop).map((key) => {
-                this.models.map((model) => {
-                    if ((key === model) && !(/datasource/i.test(key))) {
-                        if (this.isVue3) {
-                            this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
+        },
+        setProperties(prop, muteOnChange) {
+            if (this.isVue3) {
+                this.models = !this.models ? this.ej2Instances.referModels : this.models;
+            }
+            if (this.ej2Instances && this.ej2Instances._setProperties) {
+                this.ej2Instances._setProperties(prop, muteOnChange);
+            }
+            if (prop && this.models && this.models.length) {
+                Object.keys(prop).map((key) => {
+                    this.models.map((model) => {
+                        if ((key === model) && !(/datasource/i.test(key))) {
+                            if (this.isVue3) {
+                                this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
+                            }
+                            else {
+                                this.$emit('update:' + key, prop[key]);
+                                this.$emit('modelchanged', prop[key]);
+                            }
                         }
-                        else {
-                            this.$emit('update:' + key, prop[key]);
-                            this.$emit('modelchanged', prop[key]);
+                    });
+                });
+            }
+        },
+        trigger(eventName, eventProp, successHandler) {
+            if (!isExecute) {
+                this.models = !this.models ? this.ej2Instances.referModels : this.models;
+            }
+            if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
+                let key = this.models.toString().match(/checked|value/) || [];
+                let propKey = key[0];
+                if (eventProp && key && !isUndefined(eventProp[propKey])) {
+                    if (!isExecute) {
+                        this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
+                        this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
+                        this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
+                    }
+                    else {
+                        if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {
+                            this.$emit('update:' + propKey, eventProp[propKey]);
+                            this.$emit('modelchanged', eventProp[propKey]);
                         }
                     }
-                });
-            });
-        }
-    }
-    trigger(eventName, eventProp, successHandler) {
-        if (!isExecute) {
-            this.models = !this.models ? this.ej2Instances.referModels : this.models;
-        }
-        if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
-            let key = this.models.toString().match(/checked|value/) || [];
-            let propKey = key[0];
-            if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute) {
-                    this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
-                    this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
-                    this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
                 }
-                else {
-                    if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {
+            }
+            else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
+                let key = this.models.toString().match(/currentView|selectedDate/) || [];
+                let propKey = key[0];
+                if (eventProp && key && !isUndefined(eventProp[propKey])) {
+                    if (!isExecute) {
+                        this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
+                        this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
+                    }
+                    else {
                         this.$emit('update:' + propKey, eventProp[propKey]);
                         this.$emit('modelchanged', eventProp[propKey]);
                     }
                 }
             }
-        }
-        else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
-            let key = this.models.toString().match(/currentView|selectedDate/) || [];
-            let propKey = key[0];
-            if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute) {
-                    this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
-                    this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
-                }
-                else {
-                    this.$emit('update:' + propKey, eventProp[propKey]);
-                    this.$emit('modelchanged', eventProp[propKey]);
-                }
-            }
-        }
-        if ((this.ej2Instances && this.ej2Instances._trigger)) {
-            this.ej2Instances._trigger(eventName, eventProp, successHandler);
-        }
-    }
-    render(createElement) {
-        let h = !isExecute ? gh : createElement;
-        let slots = null;
-        if (!isNullOrUndefined(this.$slots.default)) {
-            slots = !isExecute ? this.$slots.default() : this.$slots.default;
-        }
-        return h('div', slots);
-    }
-    custom() {
-        this.updated();
-    }
-    createSecondaryElement() {
-        return this.ej2Instances.createSecondaryElement();
-    }
-    export(type, fileName, orientation, controls, width, height, isVertical) {
-        return this.ej2Instances.export(type, fileName, orientation, controls, width, height, isVertical);
-    }
-    print(id) {
-        return this.ej2Instances.print(id);
-    }
-    renderChart(resize) {
-        return this.ej2Instances.renderChart(resize);
-    }
-};
-RangeNavigatorComponent = __decorate$18([
-    EJComponentDecorator({
-        props: properties$2,
-        model: {
-            event: 'modelchanged'
-        }
-    }, isExecute)
-    /* Start Options({
-        props: props,
-        watch: watch,
-        emits: emitProbs,
-        provide: function provide() {
-            return {
-                custom: this.custom
-            };
-        }
-    }) End */
-], RangeNavigatorComponent);
+            if ((this.ej2Instances && this.ej2Instances._trigger)) {
+                this.ej2Instances._trigger(eventName, eventProp, successHandler);
+            }
+        },
+        custom() {
+            this.updated();
+        },
+        createSecondaryElement() {
+            return this.ej2Instances.createSecondaryElement();
+        },
+        export(type, fileName, orientation, controls, width, height, isVertical) {
+            return this.ej2Instances.export(type, fileName, orientation, controls, width, height, isVertical);
+        },
+        print(id) {
+            return this.ej2Instances.print(id);
+        },
+        renderChart(resize) {
+            return this.ej2Instances.renderChart(resize);
+        },
+    }
+});
 const RangeNavigatorPlugin = {
     name: 'ejs-rangenavigator',
-    install(Vue$$1) {
-        Vue$$1.component(RangeNavigatorPlugin.name, RangeNavigatorComponent);
-        Vue$$1.component(RangenavigatorSeriesPlugin.name, RangenavigatorSeriesDirective);
-        Vue$$1.component(RangenavigatorSeriesCollectionPlugin.name, RangenavigatorSeriesCollectionDirective);
+    install(Vue) {
+        Vue.component(RangeNavigatorPlugin.name, RangeNavigatorComponent);
+        Vue.component(RangenavigatorSeriesPlugin.name, RangenavigatorSeriesDirective);
+        Vue.component(RangenavigatorSeriesCollectionPlugin.name, RangenavigatorSeriesCollectionDirective);
     }
 };
 
-var __decorate$19 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
-let vueImport$16;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport$16 = Vue;
-}
-else {
-    vueImport$16 = Vue$1;
-}
-let RangeBandSettingsDirective = 
-/* Start Options({
-    inject: {
-        custom: {
-            default: null
-        }
-    }
-}) End */
-class RangeBandSettingsDirective extends vueImport$16 {
-    constructor() {
-        super(arguments);
-    }
+let RangeBandSettingsDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
     render(createElement) {
         if (!isExecute) {
             let h = !isExecute ? gh : createElement;
@@ -1949,57 +1326,41 @@ class RangeBandSettingsDirective extends vueImport$16 {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    }
+    },
     updated() {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    }
-    getTag() {
-        return 'e-rangeBandSettings';
-    }
-};
-RangeBandSettingsDirective = __decorate$19([
-    EJComponentDecorator({}, isExecute)
-    /* Start Options({
-        inject: {
-            custom: {
-                default: null
-            }
+    },
+    methods: {
+        getTag() {
+            return 'e-rangeBandSettings';
         }
-    }) End */
-], RangeBandSettingsDirective);
+    }
+});
 const RangeBandSettingsPlugin = {
     name: 'e-rangeBandSettings',
-    install(Vue$$1) {
-        Vue$$1.component(RangeBandSettingsPlugin.name, RangeBandSettingsDirective);
+    install(Vue) {
+        Vue.component(RangeBandSettingsPlugin.name, RangeBandSettingsDirective);
     }
 };
-let RangeBandSettingDirective = class RangeBandSettingDirective extends vueImport$16 {
+let RangeBandSettingDirective = vueDefineComponent({
     render() {
         return;
+    },
+    methods: {
+        getTag() {
+            return 'e-rangeBandSetting';
+        }
     }
-    getTag() {
-        return 'e-rangeBandSetting';
-    }
-};
-RangeBandSettingDirective = __decorate$19([
-    EJComponentDecorator({}, isExecute)
-], RangeBandSettingDirective);
+});
 const RangeBandSettingPlugin = {
     name: 'e-rangeBandSetting',
-    install(Vue$$1) {
-        Vue$$1.component(RangeBandSettingPlugin.name, RangeBandSettingDirective);
+    install(Vue) {
+        Vue.component(RangeBandSettingPlugin.name, RangeBandSettingDirective);
     }
 };
 
-var __decorate$20 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
 const properties$3 = ['isLazyUpdate', 'plugins', 'axisSettings', 'border', 'containerArea', 'dataLabelSettings', 'dataSource', 'enablePersistence', 'enableRtl', 'endPointColor', 'fill', 'format', 'height', 'highPointColor', 'lineWidth', 'locale', 'lowPointColor', 'markerSettings', 'negativePointColor', 'opacity', 'padding', 'palette', 'query', 'rangeBandSettings', 'rangePadding', 'startPointColor', 'theme', 'tiePointColor', 'tooltipSettings', 'type', 'useGroupingSeparator', 'valueType', 'width', 'xName', 'yName', 'axisRendering', 'dataLabelRendering', 'load', 'loaded', 'markerRendering', 'pointRegionMouseClick', 'pointRegionMouseMove', 'pointRendering', 'resize', 'seriesRendering', 'sparklineMouseClick', 'sparklineMouseMove', 'tooltipInitialize'];
 const modelProps$3 = [];
 const testProp$3 = getProps({ props: properties$3 });
@@ -2016,79 +1377,33 @@ for (let props of modelProps$3) {
  * <ejs-sparkline></ejs-sparkline>
  * ```
  */
-let SparklineComponent = 
-/* Start Options({
-    props: props,
-    watch: watch,
-    emits: emitProbs,
-    provide: function provide() {
+let SparklineComponent = vueDefineComponent({
+    name: 'SparklineComponent',
+    mixins: [ComponentBase],
+    props: props$3,
+    watch: watch$3,
+    emits: emitProbs$3,
+    provide() { return { custom: this.custom }; },
+    data() {
         return {
-            custom: this.custom
+            ej2Instances: new Sparkline({}),
+            propKeys: properties$3,
+            models: modelProps$3,
+            hasChildDirective: true,
+            hasInjectedModules: true,
+            tagMapper: { "e-rangeBandSettings": "e-rangeBandSetting" },
+            tagNameMapper: {},
+            isVue3: !isExecute,
+            templateCollection: {},
         };
-    }
-}) End */
-class SparklineComponent extends ComponentBase {
-    constructor() {
-        super(arguments);
-        this.propKeys = properties$3;
-        this.models = modelProps$3;
-        this.hasChildDirective = true;
-        this.hasInjectedModules = true;
-        this.tagMapper = { "e-rangeBandSettings": "e-rangeBandSetting" };
-        this.tagNameMapper = {};
-        this.isVue3 = !isExecute;
-        this.ej2Instances = new Sparkline({});
+    },
+    created() {
         this.bindProperties();
         this.ej2Instances._setProperties = this.ej2Instances.setProperties;
         this.ej2Instances.setProperties = this.setProperties;
         this.ej2Instances.clearTemplate = this.clearTemplate;
         this.updated = this.updated;
-    }
-    clearTemplate(templateNames) {
-        if (!templateNames) {
-            templateNames = Object.keys(this.templateCollection || {});
-        }
-        if (templateNames.length && this.templateCollection) {
-            for (let tempName of templateNames) {
-                let elementCollection = this.templateCollection[tempName];
-                if (elementCollection && elementCollection.length) {
-                    for (let ele of elementCollection) {
-                        let destroy = getValue('__vue__.$destroy', ele);
-                        if (destroy) {
-                            ele.__vue__.$destroy();
-                        }
-                        if (ele.innerHTML) {
-                            ele.innerHTML = '';
-                        }
-                    }
-                    delete this.templateCollection[tempName];
-                }
-            }
-        }
-    }
-    setProperties(prop, muteOnChange) {
-        if (this.isVue3) {
-            this.models = !this.models ? this.ej2Instances.referModels : this.models;
-        }
-        if (this.ej2Instances && this.ej2Instances._setProperties) {
-            this.ej2Instances._setProperties(prop, muteOnChange);
-        }
-        if (prop && this.models && this.models.length) {
-            Object.keys(prop).map((key) => {
-                this.models.map((model) => {
-                    if ((key === model) && !(/datasource/i.test(key))) {
-                        if (this.isVue3) {
-                            this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
-                        }
-                        else {
-                            this.$emit('update:' + key, prop[key]);
-                            this.$emit('modelchanged', prop[key]);
-                        }
-                    }
-                });
-            });
-        }
-    }
+    },
     render(createElement) {
         let h = !isExecute ? gh : createElement;
         let slots = null;
@@ -2096,64 +1411,72 @@ class SparklineComponent extends ComponentBase {
             slots = !isExecute ? this.$slots.default() : this.$slots.default;
         }
         return h('div', slots);
+    },
+    methods: {
+        clearTemplate(templateNames) {
+            if (!templateNames) {
+                templateNames = Object.keys(this.templateCollection || {});
+            }
+            if (templateNames.length && this.templateCollection) {
+                for (let tempName of templateNames) {
+                    let elementCollection = this.templateCollection[tempName];
+                    if (elementCollection && elementCollection.length) {
+                        for (let ele of elementCollection) {
+                            let destroy = getValue('__vue__.$destroy', ele);
+                            if (destroy) {
+                                ele.__vue__.$destroy();
+                            }
+                            if (ele.innerHTML) {
+                                ele.innerHTML = '';
+                            }
+                        }
+                        delete this.templateCollection[tempName];
+                    }
+                }
+            }
+        },
+        setProperties(prop, muteOnChange) {
+            if (this.isVue3) {
+                this.models = !this.models ? this.ej2Instances.referModels : this.models;
+            }
+            if (this.ej2Instances && this.ej2Instances._setProperties) {
+                this.ej2Instances._setProperties(prop, muteOnChange);
+            }
+            if (prop && this.models && this.models.length) {
+                Object.keys(prop).map((key) => {
+                    this.models.map((model) => {
+                        if ((key === model) && !(/datasource/i.test(key))) {
+                            if (this.isVue3) {
+                                this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
+                            }
+                            else {
+                                this.$emit('update:' + key, prop[key]);
+                                this.$emit('modelchanged', prop[key]);
+                            }
+                        }
+                    });
+                });
+            }
+        },
+        custom() {
+            this.updated();
+        },
+        renderSparkline() {
+            return this.ej2Instances.renderSparkline();
+        },
     }
-    custom() {
-        this.updated();
-    }
-    renderSparkline() {
-        return this.ej2Instances.renderSparkline();
-    }
-};
-SparklineComponent = __decorate$20([
-    EJComponentDecorator({
-        props: properties$3
-    }, isExecute)
-    /* Start Options({
-        props: props,
-        watch: watch,
-        emits: emitProbs,
-        provide: function provide() {
-            return {
-                custom: this.custom
-            };
-        }
-    }) End */
-], SparklineComponent);
+});
 const SparklinePlugin = {
     name: 'ejs-sparkline',
-    install(Vue$$1) {
-        Vue$$1.component(SparklinePlugin.name, SparklineComponent);
-        Vue$$1.component(RangeBandSettingPlugin.name, RangeBandSettingDirective);
-        Vue$$1.component(RangeBandSettingsPlugin.name, RangeBandSettingsDirective);
+    install(Vue) {
+        Vue.component(SparklinePlugin.name, SparklineComponent);
+        Vue.component(RangeBandSettingPlugin.name, RangeBandSettingDirective);
+        Vue.component(RangeBandSettingsPlugin.name, RangeBandSettingsDirective);
     }
 };
 
-var __decorate$21 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
-let vueImport$17;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport$17 = Vue;
-}
-else {
-    vueImport$17 = Vue$1;
-}
-let SmithchartSeriesCollectionDirective = 
-/* Start Options({
-    inject: {
-        custom: {
-            default: null
-        }
-    }
-}) End */
-class SmithchartSeriesCollectionDirective extends vueImport$17 {
-    constructor() {
-        super(arguments);
-    }
+let SmithchartSeriesCollectionDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
     render(createElement) {
         if (!isExecute) {
             let h = !isExecute ? gh : createElement;
@@ -2164,57 +1487,41 @@ class SmithchartSeriesCollectionDirective extends vueImport$17 {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    }
+    },
     updated() {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    }
-    getTag() {
-        return 'e-seriesCollection';
-    }
-};
-SmithchartSeriesCollectionDirective = __decorate$21([
-    EJComponentDecorator({}, isExecute)
-    /* Start Options({
-        inject: {
-            custom: {
-                default: null
-            }
+    },
+    methods: {
+        getTag() {
+            return 'e-seriesCollection';
         }
-    }) End */
-], SmithchartSeriesCollectionDirective);
+    }
+});
 const SmithchartSeriesCollectionPlugin = {
     name: 'e-seriesCollection',
-    install(Vue$$1) {
-        Vue$$1.component(SmithchartSeriesCollectionPlugin.name, SmithchartSeriesCollectionDirective);
+    install(Vue) {
+        Vue.component(SmithchartSeriesCollectionPlugin.name, SmithchartSeriesCollectionDirective);
     }
 };
-let SmithchartSeriesDirective = class SmithchartSeriesDirective extends vueImport$17 {
+let SmithchartSeriesDirective = vueDefineComponent({
     render() {
         return;
+    },
+    methods: {
+        getTag() {
+            return 'e-series';
+        }
     }
-    getTag() {
-        return 'e-series';
-    }
-};
-SmithchartSeriesDirective = __decorate$21([
-    EJComponentDecorator({}, isExecute)
-], SmithchartSeriesDirective);
+});
 const SmithchartSeriesPlugin = {
     name: 'e-series',
-    install(Vue$$1) {
-        Vue$$1.component(SmithchartSeriesPlugin.name, SmithchartSeriesDirective);
+    install(Vue) {
+        Vue.component(SmithchartSeriesPlugin.name, SmithchartSeriesDirective);
     }
 };
 
-var __decorate$22 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
 const properties$4 = ['isLazyUpdate', 'plugins', 'background', 'border', 'elementSpacing', 'enablePersistence', 'enableRtl', 'font', 'height', 'horizontalAxis', 'legendSettings', 'locale', 'margin', 'radialAxis', 'radius', 'renderType', 'series', 'theme', 'title', 'width', 'animationComplete', 'axisLabelRender', 'beforePrint', 'legendRender', 'load', 'loaded', 'seriesRender', 'subtitleRender', 'textRender', 'titleRender', 'tooltipRender'];
 const modelProps$4 = [];
 const testProp$4 = getProps({ props: properties$4 });
@@ -2231,79 +1538,33 @@ for (let props of modelProps$4) {
  * <ejs-smithchart></ejs-smithchart>
  * ```
  */
-let SmithchartComponent = 
-/* Start Options({
-    props: props,
-    watch: watch,
-    emits: emitProbs,
-    provide: function provide() {
+let SmithchartComponent = vueDefineComponent({
+    name: 'SmithchartComponent',
+    mixins: [ComponentBase],
+    props: props$4,
+    watch: watch$4,
+    emits: emitProbs$4,
+    provide() { return { custom: this.custom }; },
+    data() {
         return {
-            custom: this.custom
+            ej2Instances: new Smithchart({}),
+            propKeys: properties$4,
+            models: modelProps$4,
+            hasChildDirective: true,
+            hasInjectedModules: true,
+            tagMapper: { "e-seriesCollection": "e-series" },
+            tagNameMapper: { "e-seriesCollection": "e-series" },
+            isVue3: !isExecute,
+            templateCollection: {},
         };
-    }
-}) End */
-class SmithchartComponent extends ComponentBase {
-    constructor() {
-        super(arguments);
-        this.propKeys = properties$4;
-        this.models = modelProps$4;
-        this.hasChildDirective = true;
-        this.hasInjectedModules = true;
-        this.tagMapper = { "e-seriesCollection": "e-series" };
-        this.tagNameMapper = { "e-seriesCollection": "e-series" };
-        this.isVue3 = !isExecute;
-        this.ej2Instances = new Smithchart({});
+    },
+    created() {
         this.bindProperties();
         this.ej2Instances._setProperties = this.ej2Instances.setProperties;
         this.ej2Instances.setProperties = this.setProperties;
         this.ej2Instances.clearTemplate = this.clearTemplate;
         this.updated = this.updated;
-    }
-    clearTemplate(templateNames) {
-        if (!templateNames) {
-            templateNames = Object.keys(this.templateCollection || {});
-        }
-        if (templateNames.length && this.templateCollection) {
-            for (let tempName of templateNames) {
-                let elementCollection = this.templateCollection[tempName];
-                if (elementCollection && elementCollection.length) {
-                    for (let ele of elementCollection) {
-                        let destroy = getValue('__vue__.$destroy', ele);
-                        if (destroy) {
-                            ele.__vue__.$destroy();
-                        }
-                        if (ele.innerHTML) {
-                            ele.innerHTML = '';
-                        }
-                    }
-                    delete this.templateCollection[tempName];
-                }
-            }
-        }
-    }
-    setProperties(prop, muteOnChange) {
-        if (this.isVue3) {
-            this.models = !this.models ? this.ej2Instances.referModels : this.models;
-        }
-        if (this.ej2Instances && this.ej2Instances._setProperties) {
-            this.ej2Instances._setProperties(prop, muteOnChange);
-        }
-        if (prop && this.models && this.models.length) {
-            Object.keys(prop).map((key) => {
-                this.models.map((model) => {
-                    if ((key === model) && !(/datasource/i.test(key))) {
-                        if (this.isVue3) {
-                            this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
-                        }
-                        else {
-                            this.$emit('update:' + key, prop[key]);
-                            this.$emit('modelchanged', prop[key]);
-                        }
-                    }
-                });
-            });
-        }
-    }
+    },
     render(createElement) {
         let h = !isExecute ? gh : createElement;
         let slots = null;
@@ -2311,79 +1572,87 @@ class SmithchartComponent extends ComponentBase {
             slots = !isExecute ? this.$slots.default() : this.$slots.default;
         }
         return h('div', slots);
-    }
-    custom() {
-        this.updated();
-    }
-    export(type, fileName, orientation) {
-        return this.ej2Instances.export(type, fileName, orientation);
-    }
-    mouseEnd(e) {
-        return this.ej2Instances.mouseEnd(e);
-    }
-    mouseMove(e) {
-        return this.ej2Instances.mouseMove(e);
-    }
-    print(id) {
-        return this.ej2Instances.print(id);
-    }
-    smithchartOnClick(e) {
-        return this.ej2Instances.smithchartOnClick(e);
-    }
-    smithchartOnResize() {
-        return this.ej2Instances.smithchartOnResize();
-    }
-};
-SmithchartComponent = __decorate$22([
-    EJComponentDecorator({
-        props: properties$4
-    }, isExecute)
-    /* Start Options({
-        props: props,
-        watch: watch,
-        emits: emitProbs,
-        provide: function provide() {
-            return {
-                custom: this.custom
-            };
-        }
-    }) End */
-], SmithchartComponent);
+    },
+    methods: {
+        clearTemplate(templateNames) {
+            if (!templateNames) {
+                templateNames = Object.keys(this.templateCollection || {});
+            }
+            if (templateNames.length && this.templateCollection) {
+                for (let tempName of templateNames) {
+                    let elementCollection = this.templateCollection[tempName];
+                    if (elementCollection && elementCollection.length) {
+                        for (let ele of elementCollection) {
+                            let destroy = getValue('__vue__.$destroy', ele);
+                            if (destroy) {
+                                ele.__vue__.$destroy();
+                            }
+                            if (ele.innerHTML) {
+                                ele.innerHTML = '';
+                            }
+                        }
+                        delete this.templateCollection[tempName];
+                    }
+                }
+            }
+        },
+        setProperties(prop, muteOnChange) {
+            if (this.isVue3) {
+                this.models = !this.models ? this.ej2Instances.referModels : this.models;
+            }
+            if (this.ej2Instances && this.ej2Instances._setProperties) {
+                this.ej2Instances._setProperties(prop, muteOnChange);
+            }
+            if (prop && this.models && this.models.length) {
+                Object.keys(prop).map((key) => {
+                    this.models.map((model) => {
+                        if ((key === model) && !(/datasource/i.test(key))) {
+                            if (this.isVue3) {
+                                this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
+                            }
+                            else {
+                                this.$emit('update:' + key, prop[key]);
+                                this.$emit('modelchanged', prop[key]);
+                            }
+                        }
+                    });
+                });
+            }
+        },
+        custom() {
+            this.updated();
+        },
+        export(type, fileName, orientation) {
+            return this.ej2Instances.export(type, fileName, orientation);
+        },
+        mouseEnd(e) {
+            return this.ej2Instances.mouseEnd(e);
+        },
+        mouseMove(e) {
+            return this.ej2Instances.mouseMove(e);
+        },
+        print(id) {
+            return this.ej2Instances.print(id);
+        },
+        smithchartOnClick(e) {
+            return this.ej2Instances.smithchartOnClick(e);
+        },
+        smithchartOnResize() {
+            return this.ej2Instances.smithchartOnResize();
+        },
+    }
+});
 const SmithchartPlugin = {
     name: 'ejs-smithchart',
-    install(Vue$$1) {
-        Vue$$1.component(SmithchartPlugin.name, SmithchartComponent);
-        Vue$$1.component(SmithchartSeriesPlugin.name, SmithchartSeriesDirective);
-        Vue$$1.component(SmithchartSeriesCollectionPlugin.name, SmithchartSeriesCollectionDirective);
+    install(Vue) {
+        Vue.component(SmithchartPlugin.name, SmithchartComponent);
+        Vue.component(SmithchartSeriesPlugin.name, SmithchartSeriesDirective);
+        Vue.component(SmithchartSeriesCollectionPlugin.name, SmithchartSeriesCollectionDirective);
     }
 };
 
-var __decorate$23 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
-let vueImport$18;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport$18 = Vue;
-}
-else {
-    vueImport$18 = Vue$1;
-}
-let StockChartTrendlinesDirective = 
-/* Start Options({
-    inject: {
-        custom: {
-            default: null
-        }
-    }
-}) End */
-class StockChartTrendlinesDirective extends vueImport$18 {
-    constructor() {
-        super(arguments);
-    }
+let StockChartTrendlinesDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
     render(createElement) {
         if (!isExecute) {
             let h = !isExecute ? gh : createElement;
@@ -2394,76 +1663,43 @@ class StockChartTrendlinesDirective extends vueImport$18 {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    }
+    },
     updated() {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    }
-    getTag() {
-        return 'e-trendlines';
-    }
-};
-StockChartTrendlinesDirective = __decorate$23([
-    EJComponentDecorator({}, isExecute)
-    /* Start Options({
-        inject: {
-            custom: {
-                default: null
-            }
+    },
+    methods: {
+        getTag() {
+            return 'e-trendlines';
         }
-    }) End */
-], StockChartTrendlinesDirective);
+    }
+});
 const StockChartTrendlinesPlugin = {
     name: 'e-trendlines',
-    install(Vue$$1) {
-        Vue$$1.component(StockChartTrendlinesPlugin.name, StockChartTrendlinesDirective);
+    install(Vue) {
+        Vue.component(StockChartTrendlinesPlugin.name, StockChartTrendlinesDirective);
     }
 };
-let StockChartTrendlineDirective = class StockChartTrendlineDirective extends vueImport$18 {
+let StockChartTrendlineDirective = vueDefineComponent({
     render() {
         return;
+    },
+    methods: {
+        getTag() {
+            return 'e-trendline';
+        }
     }
-    getTag() {
-        return 'e-trendline';
-    }
-};
-StockChartTrendlineDirective = __decorate$23([
-    EJComponentDecorator({}, isExecute)
-], StockChartTrendlineDirective);
+});
 const StockChartTrendlinePlugin = {
     name: 'e-trendline',
-    install(Vue$$1) {
-        Vue$$1.component(StockChartTrendlinePlugin.name, StockChartTrendlineDirective);
+    install(Vue) {
+        Vue.component(StockChartTrendlinePlugin.name, StockChartTrendlineDirective);
     }
 };
 
-var __decorate$24 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
-let vueImport$19;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport$19 = Vue;
-}
-else {
-    vueImport$19 = Vue$1;
-}
-let StockChartSeriesCollectionDirective = 
-/* Start Options({
-    inject: {
-        custom: {
-            default: null
-        }
-    }
-}) End */
-class StockChartSeriesCollectionDirective extends vueImport$19 {
-    constructor() {
-        super(arguments);
-    }
+let StockChartSeriesCollectionDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
     render(createElement) {
         if (!isExecute) {
             let h = !isExecute ? gh : createElement;
@@ -2474,76 +1710,43 @@ class StockChartSeriesCollectionDirective extends vueImport$19 {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    }
+    },
     updated() {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    }
-    getTag() {
-        return 'e-stockchart-series-collection';
-    }
-};
-StockChartSeriesCollectionDirective = __decorate$24([
-    EJComponentDecorator({}, isExecute)
-    /* Start Options({
-        inject: {
-            custom: {
-                default: null
-            }
+    },
+    methods: {
+        getTag() {
+            return 'e-stockchart-series-collection';
         }
-    }) End */
-], StockChartSeriesCollectionDirective);
+    }
+});
 const StockChartSeriesCollectionPlugin = {
     name: 'e-stockchart-series-collection',
-    install(Vue$$1) {
-        Vue$$1.component(StockChartSeriesCollectionPlugin.name, StockChartSeriesCollectionDirective);
+    install(Vue) {
+        Vue.component(StockChartSeriesCollectionPlugin.name, StockChartSeriesCollectionDirective);
     }
 };
-let StockChartSeriesDirective = class StockChartSeriesDirective extends vueImport$19 {
+let StockChartSeriesDirective = vueDefineComponent({
     render() {
         return;
+    },
+    methods: {
+        getTag() {
+            return 'e-stockchart-series';
+        }
     }
-    getTag() {
-        return 'e-stockchart-series';
-    }
-};
-StockChartSeriesDirective = __decorate$24([
-    EJComponentDecorator({}, isExecute)
-], StockChartSeriesDirective);
+});
 const StockChartSeriesPlugin = {
     name: 'e-stockchart-series',
-    install(Vue$$1) {
-        Vue$$1.component(StockChartSeriesPlugin.name, StockChartSeriesDirective);
+    install(Vue) {
+        Vue.component(StockChartSeriesPlugin.name, StockChartSeriesDirective);
     }
 };
 
-var __decorate$25 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
-let vueImport$20;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport$20 = Vue;
-}
-else {
-    vueImport$20 = Vue$1;
-}
-let StockChartAxesDirective = 
-/* Start Options({
-    inject: {
-        custom: {
-            default: null
-        }
-    }
-}) End */
-class StockChartAxesDirective extends vueImport$20 {
-    constructor() {
-        super(arguments);
-    }
+let StockChartAxesDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
     render(createElement) {
         if (!isExecute) {
             let h = !isExecute ? gh : createElement;
@@ -2554,76 +1757,43 @@ class StockChartAxesDirective extends vueImport$20 {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    }
+    },
     updated() {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    }
-    getTag() {
-        return 'e-stockchart-axes';
-    }
-};
-StockChartAxesDirective = __decorate$25([
-    EJComponentDecorator({}, isExecute)
-    /* Start Options({
-        inject: {
-            custom: {
-                default: null
-            }
+    },
+    methods: {
+        getTag() {
+            return 'e-stockchart-axes';
         }
-    }) End */
-], StockChartAxesDirective);
+    }
+});
 const StockChartAxesPlugin = {
     name: 'e-stockchart-axes',
-    install(Vue$$1) {
-        Vue$$1.component(StockChartAxesPlugin.name, StockChartAxesDirective);
+    install(Vue) {
+        Vue.component(StockChartAxesPlugin.name, StockChartAxesDirective);
     }
 };
-let StockChartAxisDirective = class StockChartAxisDirective extends vueImport$20 {
+let StockChartAxisDirective = vueDefineComponent({
     render() {
         return;
+    },
+    methods: {
+        getTag() {
+            return 'e-stockchart-axis';
+        }
     }
-    getTag() {
-        return 'e-stockchart-axis';
-    }
-};
-StockChartAxisDirective = __decorate$25([
-    EJComponentDecorator({}, isExecute)
-], StockChartAxisDirective);
+});
 const StockChartAxisPlugin = {
     name: 'e-stockchart-axis',
-    install(Vue$$1) {
-        Vue$$1.component(StockChartAxisPlugin.name, StockChartAxisDirective);
+    install(Vue) {
+        Vue.component(StockChartAxisPlugin.name, StockChartAxisDirective);
     }
 };
 
-var __decorate$26 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
-let vueImport$21;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport$21 = Vue;
-}
-else {
-    vueImport$21 = Vue$1;
-}
-let StockChartRowsDirective = 
-/* Start Options({
-    inject: {
-        custom: {
-            default: null
-        }
-    }
-}) End */
-class StockChartRowsDirective extends vueImport$21 {
-    constructor() {
-        super(arguments);
-    }
+let StockChartRowsDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
     render(createElement) {
         if (!isExecute) {
             let h = !isExecute ? gh : createElement;
@@ -2634,76 +1804,43 @@ class StockChartRowsDirective extends vueImport$21 {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    }
+    },
     updated() {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    }
-    getTag() {
-        return 'e-stockchart-rows';
-    }
-};
-StockChartRowsDirective = __decorate$26([
-    EJComponentDecorator({}, isExecute)
-    /* Start Options({
-        inject: {
-            custom: {
-                default: null
-            }
+    },
+    methods: {
+        getTag() {
+            return 'e-stockchart-rows';
         }
-    }) End */
-], StockChartRowsDirective);
+    }
+});
 const StockChartRowsPlugin = {
     name: 'e-stockchart-rows',
-    install(Vue$$1) {
-        Vue$$1.component(StockChartRowsPlugin.name, StockChartRowsDirective);
+    install(Vue) {
+        Vue.component(StockChartRowsPlugin.name, StockChartRowsDirective);
     }
 };
-let StockChartRowDirective = class StockChartRowDirective extends vueImport$21 {
+let StockChartRowDirective = vueDefineComponent({
     render() {
         return;
+    },
+    methods: {
+        getTag() {
+            return 'e-stockchart-row';
+        }
     }
-    getTag() {
-        return 'e-stockchart-row';
-    }
-};
-StockChartRowDirective = __decorate$26([
-    EJComponentDecorator({}, isExecute)
-], StockChartRowDirective);
+});
 const StockChartRowPlugin = {
     name: 'e-stockchart-row',
-    install(Vue$$1) {
-        Vue$$1.component(StockChartRowPlugin.name, StockChartRowDirective);
+    install(Vue) {
+        Vue.component(StockChartRowPlugin.name, StockChartRowDirective);
     }
 };
 
-var __decorate$27 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
-let vueImport$22;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport$22 = Vue;
-}
-else {
-    vueImport$22 = Vue$1;
-}
-let StockChartAnnotationsDirective = 
-/* Start Options({
-    inject: {
-        custom: {
-            default: null
-        }
-    }
-}) End */
-class StockChartAnnotationsDirective extends vueImport$22 {
-    constructor() {
-        super(arguments);
-    }
+let StockChartAnnotationsDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
     render(createElement) {
         if (!isExecute) {
             let h = !isExecute ? gh : createElement;
@@ -2714,30 +1851,22 @@ class StockChartAnnotationsDirective extends vueImport$22 {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    }
+    },
     updated() {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    }
-    getTag() {
-        return 'e-stockchart-annotations';
-    }
-};
-StockChartAnnotationsDirective = __decorate$27([
-    EJComponentDecorator({}, isExecute)
-    /* Start Options({
-        inject: {
-            custom: {
-                default: null
-            }
+    },
+    methods: {
+        getTag() {
+            return 'e-stockchart-annotations';
         }
-    }) End */
-], StockChartAnnotationsDirective);
+    }
+});
 const StockChartAnnotationsPlugin = {
     name: 'e-stockchart-annotations',
-    install(Vue$$1) {
-        Vue$$1.component(StockChartAnnotationsPlugin.name, StockChartAnnotationsDirective);
+    install(Vue) {
+        Vue.component(StockChartAnnotationsPlugin.name, StockChartAnnotationsDirective);
     }
 };
 /**
@@ -2752,50 +1881,25 @@ const StockChartAnnotationsPlugin = {
  * </ejs-chart>
  * ```
  */
-let StockChartAnnotationDirective = class StockChartAnnotationDirective extends vueImport$22 {
+let StockChartAnnotationDirective = vueDefineComponent({
     render() {
         return;
+    },
+    methods: {
+        getTag() {
+            return 'e-stockchart-annotation';
+        }
     }
-    getTag() {
-        return 'e-stockchart-annotation';
-    }
-};
-StockChartAnnotationDirective = __decorate$27([
-    EJComponentDecorator({}, isExecute)
-], StockChartAnnotationDirective);
+});
 const StockChartAnnotationPlugin = {
     name: 'e-stockchart-annotation',
-    install(Vue$$1) {
-        Vue$$1.component(StockChartAnnotationPlugin.name, StockChartAnnotationDirective);
+    install(Vue) {
+        Vue.component(StockChartAnnotationPlugin.name, StockChartAnnotationDirective);
     }
 };
 
-var __decorate$28 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
-let vueImport$23;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport$23 = Vue;
-}
-else {
-    vueImport$23 = Vue$1;
-}
-let StockChartSelectedDataIndexesDirective = 
-/* Start Options({
-    inject: {
-        custom: {
-            default: null
-        }
-    }
-}) End */
-class StockChartSelectedDataIndexesDirective extends vueImport$23 {
-    constructor() {
-        super(arguments);
-    }
+let StockChartSelectedDataIndexesDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
     render(createElement) {
         if (!isExecute) {
             let h = !isExecute ? gh : createElement;
@@ -2806,76 +1910,43 @@ class StockChartSelectedDataIndexesDirective extends vueImport$23 {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    }
+    },
     updated() {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    }
-    getTag() {
-        return 'e-stockchart-selectedDataIndexes';
-    }
-};
-StockChartSelectedDataIndexesDirective = __decorate$28([
-    EJComponentDecorator({}, isExecute)
-    /* Start Options({
-        inject: {
-            custom: {
-                default: null
-            }
+    },
+    methods: {
+        getTag() {
+            return 'e-stockchart-selectedDataIndexes';
         }
-    }) End */
-], StockChartSelectedDataIndexesDirective);
+    }
+});
 const StockChartSelectedDataIndexesPlugin = {
     name: 'e-stockchart-selectedDataIndexes',
-    install(Vue$$1) {
-        Vue$$1.component(StockChartSelectedDataIndexesPlugin.name, StockChartSelectedDataIndexesDirective);
+    install(Vue) {
+        Vue.component(StockChartSelectedDataIndexesPlugin.name, StockChartSelectedDataIndexesDirective);
     }
 };
-let StockChartSelectedDataIndexDirective = class StockChartSelectedDataIndexDirective extends vueImport$23 {
+let StockChartSelectedDataIndexDirective = vueDefineComponent({
     render() {
         return;
+    },
+    methods: {
+        getTag() {
+            return 'e-stockchart-selectedDataIndex';
+        }
     }
-    getTag() {
-        return 'e-stockchart-selectedDataIndex';
-    }
-};
-StockChartSelectedDataIndexDirective = __decorate$28([
-    EJComponentDecorator({}, isExecute)
-], StockChartSelectedDataIndexDirective);
+});
 const StockChartSelectedDataIndexPlugin = {
     name: 'e-stockchart-selectedDataIndex',
-    install(Vue$$1) {
-        Vue$$1.component(StockChartSelectedDataIndexPlugin.name, StockChartSelectedDataIndexDirective);
+    install(Vue) {
+        Vue.component(StockChartSelectedDataIndexPlugin.name, StockChartSelectedDataIndexDirective);
     }
 };
 
-var __decorate$29 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
-let vueImport$24;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport$24 = Vue;
-}
-else {
-    vueImport$24 = Vue$1;
-}
-let StockChartPeriodsDirective = 
-/* Start Options({
-    inject: {
-        custom: {
-            default: null
-        }
-    }
-}) End */
-class StockChartPeriodsDirective extends vueImport$24 {
-    constructor() {
-        super(arguments);
-    }
+let StockChartPeriodsDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
     render(createElement) {
         if (!isExecute) {
             let h = !isExecute ? gh : createElement;
@@ -2886,76 +1957,43 @@ class StockChartPeriodsDirective extends vueImport$24 {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    }
+    },
     updated() {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    }
-    getTag() {
-        return 'e-stockchart-periods';
-    }
-};
-StockChartPeriodsDirective = __decorate$29([
-    EJComponentDecorator({}, isExecute)
-    /* Start Options({
-        inject: {
-            custom: {
-                default: null
-            }
+    },
+    methods: {
+        getTag() {
+            return 'e-stockchart-periods';
         }
-    }) End */
-], StockChartPeriodsDirective);
+    }
+});
 const StockChartPeriodsPlugin = {
     name: 'e-stockchart-periods',
-    install(Vue$$1) {
-        Vue$$1.component(StockChartPeriodsPlugin.name, StockChartPeriodsDirective);
+    install(Vue) {
+        Vue.component(StockChartPeriodsPlugin.name, StockChartPeriodsDirective);
     }
 };
-let StockChartPeriodDirective = class StockChartPeriodDirective extends vueImport$24 {
+let StockChartPeriodDirective = vueDefineComponent({
     render() {
         return;
+    },
+    methods: {
+        getTag() {
+            return 'e-stockchart-period';
+        }
     }
-    getTag() {
-        return 'e-stockchart-period';
-    }
-};
-StockChartPeriodDirective = __decorate$29([
-    EJComponentDecorator({}, isExecute)
-], StockChartPeriodDirective);
+});
 const StockChartPeriodPlugin = {
     name: 'e-stockchart-period',
-    install(Vue$$1) {
-        Vue$$1.component(StockChartPeriodPlugin.name, StockChartPeriodDirective);
+    install(Vue) {
+        Vue.component(StockChartPeriodPlugin.name, StockChartPeriodDirective);
     }
 };
 
-var __decorate$30 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
-let vueImport$25;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport$25 = Vue;
-}
-else {
-    vueImport$25 = Vue$1;
-}
-let StockEventsDirective = 
-/* Start Options({
-    inject: {
-        custom: {
-            default: null
-        }
-    }
-}) End */
-class StockEventsDirective extends vueImport$25 {
-    constructor() {
-        super(arguments);
-    }
+let StockEventsDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
     render(createElement) {
         if (!isExecute) {
             let h = !isExecute ? gh : createElement;
@@ -2966,76 +2004,43 @@ class StockEventsDirective extends vueImport$25 {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    }
+    },
     updated() {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    }
-    getTag() {
-        return 'e-stockchart-stockevents';
-    }
-};
-StockEventsDirective = __decorate$30([
-    EJComponentDecorator({}, isExecute)
-    /* Start Options({
-        inject: {
-            custom: {
-                default: null
-            }
+    },
+    methods: {
+        getTag() {
+            return 'e-stockchart-stockevents';
         }
-    }) End */
-], StockEventsDirective);
+    }
+});
 const StockEventsPlugin = {
     name: 'e-stockchart-stockevents',
-    install(Vue$$1) {
-        Vue$$1.component(StockEventsPlugin.name, StockEventsDirective);
+    install(Vue) {
+        Vue.component(StockEventsPlugin.name, StockEventsDirective);
     }
 };
-let StockEventDirective = class StockEventDirective extends vueImport$25 {
+let StockEventDirective = vueDefineComponent({
     render() {
         return;
+    },
+    methods: {
+        getTag() {
+            return 'e-stockchart-stockevent';
+        }
     }
-    getTag() {
-        return 'e-stockchart-stockevent';
-    }
-};
-StockEventDirective = __decorate$30([
-    EJComponentDecorator({}, isExecute)
-], StockEventDirective);
+});
 const StockEventPlugin = {
     name: 'e-stockchart-stockevent',
-    install(Vue$$1) {
-        Vue$$1.component(StockEventPlugin.name, StockEventDirective);
+    install(Vue) {
+        Vue.component(StockEventPlugin.name, StockEventDirective);
     }
 };
 
-var __decorate$31 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
-let vueImport$26;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport$26 = Vue;
-}
-else {
-    vueImport$26 = Vue$1;
-}
-let StockChartIndicatorsDirective = 
-/* Start Options({
-    inject: {
-        custom: {
-            default: null
-        }
-    }
-}) End */
-class StockChartIndicatorsDirective extends vueImport$26 {
-    constructor() {
-        super(arguments);
-    }
+let StockChartIndicatorsDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
     render(createElement) {
         if (!isExecute) {
             let h = !isExecute ? gh : createElement;
@@ -3046,57 +2051,41 @@ class StockChartIndicatorsDirective extends vueImport$26 {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    }
+    },
     updated() {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    }
-    getTag() {
-        return 'e-stockchart-indicators';
-    }
-};
-StockChartIndicatorsDirective = __decorate$31([
-    EJComponentDecorator({}, isExecute)
-    /* Start Options({
-        inject: {
-            custom: {
-                default: null
-            }
+    },
+    methods: {
+        getTag() {
+            return 'e-stockchart-indicators';
         }
-    }) End */
-], StockChartIndicatorsDirective);
+    }
+});
 const StockChartIndicatorsPlugin = {
     name: 'e-stockchart-indicators',
-    install(Vue$$1) {
-        Vue$$1.component(StockChartIndicatorsPlugin.name, StockChartIndicatorsDirective);
+    install(Vue) {
+        Vue.component(StockChartIndicatorsPlugin.name, StockChartIndicatorsDirective);
     }
 };
-let StockChartIndicatorDirective = class StockChartIndicatorDirective extends vueImport$26 {
+let StockChartIndicatorDirective = vueDefineComponent({
     render() {
         return;
+    },
+    methods: {
+        getTag() {
+            return 'e-stockchart-indicator';
+        }
     }
-    getTag() {
-        return 'e-stockchart-indicator';
-    }
-};
-StockChartIndicatorDirective = __decorate$31([
-    EJComponentDecorator({}, isExecute)
-], StockChartIndicatorDirective);
+});
 const StockChartIndicatorPlugin = {
     name: 'e-stockchart-indicator',
-    install(Vue$$1) {
-        Vue$$1.component(StockChartIndicatorPlugin.name, StockChartIndicatorDirective);
+    install(Vue) {
+        Vue.component(StockChartIndicatorPlugin.name, StockChartIndicatorDirective);
     }
 };
 
-var __decorate$32 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
 const properties$5 = ['isLazyUpdate', 'plugins', 'annotations', 'axes', 'background', 'border', 'chartArea', 'crosshair', 'dataSource', 'enableCustomRange', 'enablePeriodSelector', 'enablePersistence', 'enableRtl', 'enableSelector', 'exportType', 'height', 'indicatorType', 'indicators', 'isMultiSelect', 'isSelect', 'isTransposed', 'legendSettings', 'locale', 'margin', 'periods', 'primaryXAxis', 'primaryYAxis', 'rows', 'selectedDataIndexes', 'selectionMode', 'series', 'seriesType', 'stockEvents', 'theme', 'title', 'titleStyle', 'tooltip', 'trendlineType', 'width', 'zoomSettings', 'axisLabelRender', 'legendClick', 'legendRender', 'load', 'loaded', 'onZooming', 'pointClick', 'pointMove', 'rangeChange', 'selectorRender', 'seriesRender', 'stockChartMouseClick', 'stockChartMouseDown', 'stockChartMouseLeave', 'stockChartMouseMove', 'stockChartMouseUp', 'stockEventRender', 'tooltipRender'];
 const modelProps$5 = ['dataSource'];
 const testProp$5 = getProps({ props: properties$5 });
@@ -3113,28 +2102,28 @@ for (let props of modelProps$5) {
  * <ejs-stockchart></ejs-stockchart>
  * ```
  */
-let StockChartComponent = 
-/* Start Options({
-    props: props,
-    watch: watch,
-    emits: emitProbs,
-    provide: function provide() {
+let StockChartComponent = vueDefineComponent({
+    name: 'StockChartComponent',
+    mixins: [ComponentBase],
+    props: props$5,
+    watch: watch$5,
+    emits: emitProbs$5,
+    model: { event: 'modelchanged' },
+    provide() { return { custom: this.custom }; },
+    data() {
         return {
-            custom: this.custom
+            ej2Instances: new StockChart({}),
+            propKeys: properties$5,
+            models: modelProps$5,
+            hasChildDirective: true,
+            hasInjectedModules: true,
+            tagMapper: { "e-stockchart-series-collection": { "e-stockchart-series": { "e-trendlines": "e-trendline" } }, "e-stockchart-axes": "e-stockchart-axis", "e-stockchart-rows": "e-stockchart-row", "e-stockchart-annotations": "e-stockchart-annotation", "e-stockchart-selectedDataIndexes": "e-stockchart-selectedDataIndex", "e-stockchart-periods": "e-stockchart-period", "e-stockchart-stockevents": "e-stockchart-stockevent", "e-stockchart-indicators": "e-stockchart-indicator" },
+            tagNameMapper: { "e-stockchart-series-collection": "e-series", "e-stockchart-axes": "e-axes", "e-stockchart-rows": "e-rows", "e-stockchart-annotations": "e-annotations", "e-stockchart-selectedDataIndexes": "e-selectedDataIndexes", "e-stockchart-periods": "e-periods", "e-stockchart-stockevents": "e-stockEvents", "e-stockchart-indicators": "e-indicators" },
+            isVue3: !isExecute,
+            templateCollection: {},
         };
-    }
-}) End */
-class StockChartComponent extends ComponentBase {
-    constructor() {
-        super(arguments);
-        this.propKeys = properties$5;
-        this.models = modelProps$5;
-        this.hasChildDirective = true;
-        this.hasInjectedModules = true;
-        this.tagMapper = { "e-stockchart-series-collection": { "e-stockchart-series": { "e-trendlines": "e-trendline" } }, "e-stockchart-axes": "e-stockchart-axis", "e-stockchart-rows": "e-stockchart-row", "e-stockchart-annotations": "e-stockchart-annotation", "e-stockchart-selectedDataIndexes": "e-stockchart-selectedDataIndex", "e-stockchart-periods": "e-stockchart-period", "e-stockchart-stockevents": "e-stockchart-stockevent", "e-stockchart-indicators": "e-stockchart-indicator" };
-        this.tagNameMapper = { "e-stockchart-series-collection": "e-series", "e-stockchart-axes": "e-axes", "e-stockchart-rows": "e-rows", "e-stockchart-annotations": "e-annotations", "e-stockchart-selectedDataIndexes": "e-selectedDataIndexes", "e-stockchart-periods": "e-periods", "e-stockchart-stockevents": "e-stockEvents", "e-stockchart-indicators": "e-indicators" };
-        this.isVue3 = !isExecute;
-        this.ej2Instances = new StockChart({});
+    },
+    created() {
         this.ej2Instances._trigger = this.ej2Instances.trigger;
         this.ej2Instances.trigger = this.trigger;
         this.bindProperties();
@@ -3142,187 +2131,147 @@ class StockChartComponent extends ComponentBase {
         this.ej2Instances.setProperties = this.setProperties;
         this.ej2Instances.clearTemplate = this.clearTemplate;
         this.updated = this.updated;
-    }
-    clearTemplate(templateNames) {
-        if (!templateNames) {
-            templateNames = Object.keys(this.templateCollection || {});
-        }
-        if (templateNames.length && this.templateCollection) {
-            for (let tempName of templateNames) {
-                let elementCollection = this.templateCollection[tempName];
-                if (elementCollection && elementCollection.length) {
-                    for (let ele of elementCollection) {
-                        let destroy = getValue('__vue__.$destroy', ele);
-                        if (destroy) {
-                            ele.__vue__.$destroy();
-                        }
-                        if (ele.innerHTML) {
-                            ele.innerHTML = '';
+    },
+    render(createElement) {
+        let h = !isExecute ? gh : createElement;
+        let slots = null;
+        if (!isNullOrUndefined(this.$slots.default)) {
+            slots = !isExecute ? this.$slots.default() : this.$slots.default;
+        }
+        return h('div', slots);
+    },
+    methods: {
+        clearTemplate(templateNames) {
+            if (!templateNames) {
+                templateNames = Object.keys(this.templateCollection || {});
+            }
+            if (templateNames.length && this.templateCollection) {
+                for (let tempName of templateNames) {
+                    let elementCollection = this.templateCollection[tempName];
+                    if (elementCollection && elementCollection.length) {
+                        for (let ele of elementCollection) {
+                            let destroy = getValue('__vue__.$destroy', ele);
+                            if (destroy) {
+                                ele.__vue__.$destroy();
+                            }
+                            if (ele.innerHTML) {
+                                ele.innerHTML = '';
+                            }
                         }
+                        delete this.templateCollection[tempName];
                     }
-                    delete this.templateCollection[tempName];
                 }
             }
-        }
-    }
-    setProperties(prop, muteOnChange) {
-        if (this.isVue3) {
-            this.models = !this.models ? this.ej2Instances.referModels : this.models;
-        }
-        if (this.ej2Instances && this.ej2Instances._setProperties) {
-            this.ej2Instances._setProperties(prop, muteOnChange);
-        }
-        if (prop && this.models && this.models.length) {
-            Object.keys(prop).map((key) => {
-                this.models.map((model) => {
-                    if ((key === model) && !(/datasource/i.test(key))) {
-                        if (this.isVue3) {
-                            this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
+        },
+        setProperties(prop, muteOnChange) {
+            if (this.isVue3) {
+                this.models = !this.models ? this.ej2Instances.referModels : this.models;
+            }
+            if (this.ej2Instances && this.ej2Instances._setProperties) {
+                this.ej2Instances._setProperties(prop, muteOnChange);
+            }
+            if (prop && this.models && this.models.length) {
+                Object.keys(prop).map((key) => {
+                    this.models.map((model) => {
+                        if ((key === model) && !(/datasource/i.test(key))) {
+                            if (this.isVue3) {
+                                this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
+                            }
+                            else {
+                                this.$emit('update:' + key, prop[key]);
+                                this.$emit('modelchanged', prop[key]);
+                            }
                         }
-                        else {
-                            this.$emit('update:' + key, prop[key]);
-                            this.$emit('modelchanged', prop[key]);
+                    });
+                });
+            }
+        },
+        trigger(eventName, eventProp, successHandler) {
+            if (!isExecute) {
+                this.models = !this.models ? this.ej2Instances.referModels : this.models;
+            }
+            if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
+                let key = this.models.toString().match(/checked|value/) || [];
+                let propKey = key[0];
+                if (eventProp && key && !isUndefined(eventProp[propKey])) {
+                    if (!isExecute) {
+                        this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
+                        this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
+                        this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
+                    }
+                    else {
+                        if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {
+                            this.$emit('update:' + propKey, eventProp[propKey]);
+                            this.$emit('modelchanged', eventProp[propKey]);
                         }
                     }
-                });
-            });
-        }
-    }
-    trigger(eventName, eventProp, successHandler) {
-        if (!isExecute) {
-            this.models = !this.models ? this.ej2Instances.referModels : this.models;
-        }
-        if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
-            let key = this.models.toString().match(/checked|value/) || [];
-            let propKey = key[0];
-            if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute) {
-                    this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
-                    this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
-                    this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
                 }
-                else {
-                    if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {
+            }
+            else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
+                let key = this.models.toString().match(/currentView|selectedDate/) || [];
+                let propKey = key[0];
+                if (eventProp && key && !isUndefined(eventProp[propKey])) {
+                    if (!isExecute) {
+                        this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
+                        this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
+                    }
+                    else {
                         this.$emit('update:' + propKey, eventProp[propKey]);
                         this.$emit('modelchanged', eventProp[propKey]);
                     }
                 }
             }
-        }
-        else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
-            let key = this.models.toString().match(/currentView|selectedDate/) || [];
-            let propKey = key[0];
-            if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute) {
-                    this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
-                    this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
-                }
-                else {
-                    this.$emit('update:' + propKey, eventProp[propKey]);
-                    this.$emit('modelchanged', eventProp[propKey]);
-                }
-            }
-        }
-        if ((this.ej2Instances && this.ej2Instances._trigger)) {
-            this.ej2Instances._trigger(eventName, eventProp, successHandler);
-        }
-    }
-    render(createElement) {
-        let h = !isExecute ? gh : createElement;
-        let slots = null;
-        if (!isNullOrUndefined(this.$slots.default)) {
-            slots = !isExecute ? this.$slots.default() : this.$slots.default;
-        }
-        return h('div', slots);
-    }
-    custom() {
-        this.updated();
-    }
-    chartModuleInjection() {
-        return this.ej2Instances.chartModuleInjection();
-    }
-    findCurrentData(totalData, xName) {
-        return this.ej2Instances.findCurrentData(totalData, xName);
-    }
-    rangeChanged(updatedStart, updatedEnd) {
-        return this.ej2Instances.rangeChanged(updatedStart, updatedEnd);
-    }
-    renderPeriodSelector() {
-        return this.ej2Instances.renderPeriodSelector();
-    }
-    stockChartDataManagerSuccess() {
-        return this.ej2Instances.stockChartDataManagerSuccess();
-    }
-};
-StockChartComponent = __decorate$32([
-    EJComponentDecorator({
-        props: properties$5,
-        model: {
-            event: 'modelchanged'
-        }
-    }, isExecute)
-    /* Start Options({
-        props: props,
-        watch: watch,
-        emits: emitProbs,
-        provide: function provide() {
-            return {
-                custom: this.custom
-            };
-        }
-    }) End */
-], StockChartComponent);
+            if ((this.ej2Instances && this.ej2Instances._trigger)) {
+                this.ej2Instances._trigger(eventName, eventProp, successHandler);
+            }
+        },
+        custom() {
+            this.updated();
+        },
+        chartModuleInjection() {
+            return this.ej2Instances.chartModuleInjection();
+        },
+        findCurrentData(totalData, xName) {
+            return this.ej2Instances.findCurrentData(totalData, xName);
+        },
+        rangeChanged(updatedStart, updatedEnd) {
+            return this.ej2Instances.rangeChanged(updatedStart, updatedEnd);
+        },
+        renderPeriodSelector() {
+            return this.ej2Instances.renderPeriodSelector();
+        },
+        stockChartDataManagerSuccess() {
+            return this.ej2Instances.stockChartDataManagerSuccess();
+        },
+    }
+});
 const StockChartPlugin = {
     name: 'ejs-stockchart',
-    install(Vue$$1) {
-        Vue$$1.component(StockChartPlugin.name, StockChartComponent);
-        Vue$$1.component(StockChartSeriesPlugin.name, StockChartSeriesDirective);
-        Vue$$1.component(StockChartSeriesCollectionPlugin.name, StockChartSeriesCollectionDirective);
-        Vue$$1.component(StockChartTrendlinePlugin.name, StockChartTrendlineDirective);
-        Vue$$1.component(StockChartTrendlinesPlugin.name, StockChartTrendlinesDirective);
-        Vue$$1.component(StockChartAxisPlugin.name, StockChartAxisDirective);
-        Vue$$1.component(StockChartAxesPlugin.name, StockChartAxesDirective);
-        Vue$$1.component(StockChartRowPlugin.name, StockChartRowDirective);
-        Vue$$1.component(StockChartRowsPlugin.name, StockChartRowsDirective);
-        Vue$$1.component(StockChartAnnotationPlugin.name, StockChartAnnotationDirective);
-        Vue$$1.component(StockChartAnnotationsPlugin.name, StockChartAnnotationsDirective);
-        Vue$$1.component(StockChartSelectedDataIndexPlugin.name, StockChartSelectedDataIndexDirective);
-        Vue$$1.component(StockChartSelectedDataIndexesPlugin.name, StockChartSelectedDataIndexesDirective);
-        Vue$$1.component(StockChartPeriodPlugin.name, StockChartPeriodDirective);
-        Vue$$1.component(StockChartPeriodsPlugin.name, StockChartPeriodsDirective);
-        Vue$$1.component(StockEventPlugin.name, StockEventDirective);
-        Vue$$1.component(StockEventsPlugin.name, StockEventsDirective);
-        Vue$$1.component(StockChartIndicatorPlugin.name, StockChartIndicatorDirective);
-        Vue$$1.component(StockChartIndicatorsPlugin.name, StockChartIndicatorsDirective);
+    install(Vue) {
+        Vue.component(StockChartPlugin.name, StockChartComponent);
+        Vue.component(StockChartSeriesPlugin.name, StockChartSeriesDirective);
+        Vue.component(StockChartSeriesCollectionPlugin.name, StockChartSeriesCollectionDirective);
+        Vue.component(StockChartTrendlinePlugin.name, StockChartTrendlineDirective);
+        Vue.component(StockChartTrendlinesPlugin.name, StockChartTrendlinesDirective);
+        Vue.component(StockChartAxisPlugin.name, StockChartAxisDirective);
+        Vue.component(StockChartAxesPlugin.name, StockChartAxesDirective);
+        Vue.component(StockChartRowPlugin.name, StockChartRowDirective);
+        Vue.component(StockChartRowsPlugin.name, StockChartRowsDirective);
+        Vue.component(StockChartAnnotationPlugin.name, StockChartAnnotationDirective);
+        Vue.component(StockChartAnnotationsPlugin.name, StockChartAnnotationsDirective);
+        Vue.component(StockChartSelectedDataIndexPlugin.name, StockChartSelectedDataIndexDirective);
+        Vue.component(StockChartSelectedDataIndexesPlugin.name, StockChartSelectedDataIndexesDirective);
+        Vue.component(StockChartPeriodPlugin.name, StockChartPeriodDirective);
+        Vue.component(StockChartPeriodsPlugin.name, StockChartPeriodsDirective);
+        Vue.component(StockEventPlugin.name, StockEventDirective);
+        Vue.component(StockEventsPlugin.name, StockEventsDirective);
+        Vue.component(StockChartIndicatorPlugin.name, StockChartIndicatorDirective);
+        Vue.component(StockChartIndicatorsPlugin.name, StockChartIndicatorsDirective);
     }
 };
 
-var __decorate$33 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
-let vueImport$27;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport$27 = Vue;
-}
-else {
-    vueImport$27 = Vue$1;
-}
-let BulletRangeCollectionDirective = 
-/* Start Options({
-    inject: {
-        custom: {
-            default: null
-        }
-    }
-}) End */
-class BulletRangeCollectionDirective extends vueImport$27 {
-    constructor() {
-        super(arguments);
-    }
+let BulletRangeCollectionDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
     render(createElement) {
         if (!isExecute) {
             let h = !isExecute ? gh : createElement;
@@ -3333,57 +2282,41 @@ class BulletRangeCollectionDirective extends vueImport$27 {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    }
+    },
     updated() {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    }
-    getTag() {
-        return 'e-bullet-range-collection';
-    }
-};
-BulletRangeCollectionDirective = __decorate$33([
-    EJComponentDecorator({}, isExecute)
-    /* Start Options({
-        inject: {
-            custom: {
-                default: null
-            }
+    },
+    methods: {
+        getTag() {
+            return 'e-bullet-range-collection';
         }
-    }) End */
-], BulletRangeCollectionDirective);
+    }
+});
 const BulletRangeCollectionPlugin = {
     name: 'e-bullet-range-collection',
-    install(Vue$$1) {
-        Vue$$1.component(BulletRangeCollectionPlugin.name, BulletRangeCollectionDirective);
+    install(Vue) {
+        Vue.component(BulletRangeCollectionPlugin.name, BulletRangeCollectionDirective);
     }
 };
-let BulletRangeDirective = class BulletRangeDirective extends vueImport$27 {
+let BulletRangeDirective = vueDefineComponent({
     render() {
         return;
+    },
+    methods: {
+        getTag() {
+            return 'e-bullet-range';
+        }
     }
-    getTag() {
-        return 'e-bullet-range';
-    }
-};
-BulletRangeDirective = __decorate$33([
-    EJComponentDecorator({}, isExecute)
-], BulletRangeDirective);
+});
 const BulletRangePlugin = {
     name: 'e-bullet-range',
-    install(Vue$$1) {
-        Vue$$1.component(BulletRangePlugin.name, BulletRangeDirective);
+    install(Vue) {
+        Vue.component(BulletRangePlugin.name, BulletRangeDirective);
     }
 };
 
-var __decorate$34 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-// {{VueImport}}
 const properties$6 = ['isLazyUpdate', 'plugins', 'animation', 'border', 'categoryField', 'categoryLabelStyle', 'dataLabel', 'dataSource', 'enableGroupSeparator', 'enablePersistence', 'enableRtl', 'height', 'interval', 'labelFormat', 'labelPosition', 'labelStyle', 'legendSettings', 'locale', 'majorTickLines', 'margin', 'maximum', 'minimum', 'minorTickLines', 'minorTicksPerInterval', 'opposedPosition', 'orientation', 'query', 'ranges', 'subtitle', 'subtitleStyle', 'tabIndex', 'targetColor', 'targetField', 'targetTypes', 'targetWidth', 'theme', 'tickPosition', 'title', 'titlePosition', 'titleStyle', 'tooltip', 'type', 'valueBorder', 'valueField', 'valueFill', 'valueHeight', 'width', 'beforePrint', 'bulletChartMouseClick', 'legendRender', 'load', 'loaded', 'tooltipRender'];
 const modelProps$6 = ['dataSource'];
 const testProp$6 = getProps({ props: properties$6 });
@@ -3400,28 +2333,28 @@ for (let props of modelProps$6) {
  * <ejs-bulletchart></ejs-bulletchart>
  * ```
  */
-let BulletChartComponent = 
-/* Start Options({
-    props: props,
-    watch: watch,
-    emits: emitProbs,
-    provide: function provide() {
+let BulletChartComponent = vueDefineComponent({
+    name: 'BulletChartComponent',
+    mixins: [ComponentBase],
+    props: props$6,
+    watch: watch$6,
+    emits: emitProbs$6,
+    model: { event: 'modelchanged' },
+    provide() { return { custom: this.custom }; },
+    data() {
         return {
-            custom: this.custom
+            ej2Instances: new BulletChart({}),
+            propKeys: properties$6,
+            models: modelProps$6,
+            hasChildDirective: true,
+            hasInjectedModules: true,
+            tagMapper: { "e-bullet-range-collection": "e-bullet-range" },
+            tagNameMapper: { "e-bullet-range-collection": "e-ranges" },
+            isVue3: !isExecute,
+            templateCollection: {},
         };
-    }
-}) End */
-class BulletChartComponent extends ComponentBase {
-    constructor() {
-        super(arguments);
-        this.propKeys = properties$6;
-        this.models = modelProps$6;
-        this.hasChildDirective = true;
-        this.hasInjectedModules = true;
-        this.tagMapper = { "e-bullet-range-collection": "e-bullet-range" };
-        this.tagNameMapper = { "e-bullet-range-collection": "e-ranges" };
-        this.isVue3 = !isExecute;
-        this.ej2Instances = new BulletChart({});
+    },
+    created() {
         this.ej2Instances._trigger = this.ej2Instances.trigger;
         this.ej2Instances.trigger = this.trigger;
         this.bindProperties();
@@ -3429,139 +2362,123 @@ class BulletChartComponent extends ComponentBase {
         this.ej2Instances.setProperties = this.setProperties;
         this.ej2Instances.clearTemplate = this.clearTemplate;
         this.updated = this.updated;
-    }
-    clearTemplate(templateNames) {
-        if (!templateNames) {
-            templateNames = Object.keys(this.templateCollection || {});
-        }
-        if (templateNames.length && this.templateCollection) {
-            for (let tempName of templateNames) {
-                let elementCollection = this.templateCollection[tempName];
-                if (elementCollection && elementCollection.length) {
-                    for (let ele of elementCollection) {
-                        let destroy = getValue('__vue__.$destroy', ele);
-                        if (destroy) {
-                            ele.__vue__.$destroy();
-                        }
-                        if (ele.innerHTML) {
-                            ele.innerHTML = '';
+    },
+    render(createElement) {
+        let h = !isExecute ? gh : createElement;
+        let slots = null;
+        if (!isNullOrUndefined(this.$slots.default)) {
+            slots = !isExecute ? this.$slots.default() : this.$slots.default;
+        }
+        return h('div', slots);
+    },
+    methods: {
+        clearTemplate(templateNames) {
+            if (!templateNames) {
+                templateNames = Object.keys(this.templateCollection || {});
+            }
+            if (templateNames.length && this.templateCollection) {
+                for (let tempName of templateNames) {
+                    let elementCollection = this.templateCollection[tempName];
+                    if (elementCollection && elementCollection.length) {
+                        for (let ele of elementCollection) {
+                            let destroy = getValue('__vue__.$destroy', ele);
+                            if (destroy) {
+                                ele.__vue__.$destroy();
+                            }
+                            if (ele.innerHTML) {
+                                ele.innerHTML = '';
+                            }
                         }
+                        delete this.templateCollection[tempName];
                     }
-                    delete this.templateCollection[tempName];
                 }
             }
-        }
-    }
-    setProperties(prop, muteOnChange) {
-        if (this.isVue3) {
-            this.models = !this.models ? this.ej2Instances.referModels : this.models;
-        }
-        if (this.ej2Instances && this.ej2Instances._setProperties) {
-            this.ej2Instances._setProperties(prop, muteOnChange);
-        }
-        if (prop && this.models && this.models.length) {
-            Object.keys(prop).map((key) => {
-                this.models.map((model) => {
-                    if ((key === model) && !(/datasource/i.test(key))) {
-                        if (this.isVue3) {
-                            this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
+        },
+        setProperties(prop, muteOnChange) {
+            if (this.isVue3) {
+                this.models = !this.models ? this.ej2Instances.referModels : this.models;
+            }
+            if (this.ej2Instances && this.ej2Instances._setProperties) {
+                this.ej2Instances._setProperties(prop, muteOnChange);
+            }
+            if (prop && this.models && this.models.length) {
+                Object.keys(prop).map((key) => {
+                    this.models.map((model) => {
+                        if ((key === model) && !(/datasource/i.test(key))) {
+                            if (this.isVue3) {
+                                this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
+                            }
+                            else {
+                                this.$emit('update:' + key, prop[key]);
+                                this.$emit('modelchanged', prop[key]);
+                            }
                         }
-                        else {
-                            this.$emit('update:' + key, prop[key]);
-                            this.$emit('modelchanged', prop[key]);
+                    });
+                });
+            }
+        },
+        trigger(eventName, eventProp, successHandler) {
+            if (!isExecute) {
+                this.models = !this.models ? this.ej2Instances.referModels : this.models;
+            }
+            if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
+                let key = this.models.toString().match(/checked|value/) || [];
+                let propKey = key[0];
+                if (eventProp && key && !isUndefined(eventProp[propKey])) {
+                    if (!isExecute) {
+                        this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
+                        this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
+                        this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
+                    }
+                    else {
+                        if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {
+                            this.$emit('update:' + propKey, eventProp[propKey]);
+                            this.$emit('modelchanged', eventProp[propKey]);
                         }
                     }
-                });
-            });
-        }
-    }
-    trigger(eventName, eventProp, successHandler) {
-        if (!isExecute) {
-            this.models = !this.models ? this.ej2Instances.referModels : this.models;
-        }
-        if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
-            let key = this.models.toString().match(/checked|value/) || [];
-            let propKey = key[0];
-            if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute) {
-                    this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
-                    this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
-                    this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
                 }
-                else {
-                    if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {
+            }
+            else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
+                let key = this.models.toString().match(/currentView|selectedDate/) || [];
+                let propKey = key[0];
+                if (eventProp && key && !isUndefined(eventProp[propKey])) {
+                    if (!isExecute) {
+                        this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
+                        this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
+                    }
+                    else {
                         this.$emit('update:' + propKey, eventProp[propKey]);
                         this.$emit('modelchanged', eventProp[propKey]);
                     }
                 }
             }
-        }
-        else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
-            let key = this.models.toString().match(/currentView|selectedDate/) || [];
-            let propKey = key[0];
-            if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute) {
-                    this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
-                    this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
-                }
-                else {
-                    this.$emit('update:' + propKey, eventProp[propKey]);
-                    this.$emit('modelchanged', eventProp[propKey]);
-                }
-            }
-        }
-        if ((this.ej2Instances && this.ej2Instances._trigger)) {
-            this.ej2Instances._trigger(eventName, eventProp, successHandler);
-        }
-    }
-    render(createElement) {
-        let h = !isExecute ? gh : createElement;
-        let slots = null;
-        if (!isNullOrUndefined(this.$slots.default)) {
-            slots = !isExecute ? this.$slots.default() : this.$slots.default;
-        }
-        return h('div', slots);
-    }
-    custom() {
-        this.updated();
-    }
-    createSvg(chart) {
-        return this.ej2Instances.createSvg(chart);
-    }
-    export(type, fileName, orientation, controls, width, height, isVertical) {
-        return this.ej2Instances.export(type, fileName, orientation, controls, width, height, isVertical);
-    }
-    print(id) {
-        return this.ej2Instances.print(id);
-    }
-    removeSvg() {
-        return this.ej2Instances.removeSvg();
-    }
-};
-BulletChartComponent = __decorate$34([
-    EJComponentDecorator({
-        props: properties$6,
-        model: {
-            event: 'modelchanged'
-        }
-    }, isExecute)
-    /* Start Options({
-        props: props,
-        watch: watch,
-        emits: emitProbs,
-        provide: function provide() {
-            return {
-                custom: this.custom
-            };
-        }
-    }) End */
-], BulletChartComponent);
+            if ((this.ej2Instances && this.ej2Instances._trigger)) {
+                this.ej2Instances._trigger(eventName, eventProp, successHandler);
+            }
+        },
+        custom() {
+            this.updated();
+        },
+        createSvg(chart) {
+            return this.ej2Instances.createSvg(chart);
+        },
+        export(type, fileName, orientation, controls, width, height, isVertical) {
+            return this.ej2Instances.export(type, fileName, orientation, controls, width, height, isVertical);
+        },
+        print(id) {
+            return this.ej2Instances.print(id);
+        },
+        removeSvg() {
+            return this.ej2Instances.removeSvg();
+        },
+    }
+});
 const BulletChartPlugin = {
     name: 'ejs-bulletchart',
-    install(Vue$$1) {
-        Vue$$1.component(BulletChartPlugin.name, BulletChartComponent);
-        Vue$$1.component(BulletRangePlugin.name, BulletRangeDirective);
-        Vue$$1.component(BulletRangeCollectionPlugin.name, BulletRangeCollectionDirective);
+    install(Vue) {
+        Vue.component(BulletChartPlugin.name, BulletChartComponent);
+        Vue.component(BulletRangePlugin.name, BulletRangeDirective);
+        Vue.component(BulletRangeCollectionPlugin.name, BulletRangeCollectionDirective);
     }
 };