@syncfusion/ej2-vue-inputs 20.1.55 → 20.1.61

package/CHANGELOG.md

@@ -2,23 +2,6 @@
 
 ## [Unreleased]
 
-## 19.4.47 (2022-01-25)
-
-### ColorPicker
-
-#### Bug Fixes
-
-Color Picker in Angular reactive form throws errors when selecting after form is reset has been resolved.
-
-
-## 19.4.43 (2022-01-18)
-
-### Range Slider
-
-#### Bug Fixes
-
-- `#I359470` - The issue with "The Range Slider tooltip is not hidden when it is placed inside the tab container" has been resolved.
-
 ## 19.4.38 (2021-12-17)
 
 ### Signature

package/README.md

@@ -38,6 +38,11 @@ Following list of components are available in the package.
   * [View Online Demos](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=numerictextbox#/material/numerictextbox/default.html)
   * [Product Page](https://www.syncfusion.com/vue-ui-components/numerictextbox/?utm_source=npm&utm_campaign=numerictextbox)
 
+* **Signature** - The Signature component allows user to draw smooth signatures as vector outline of strokes using variable width bezier curve interpolation. It allows to save signature as image.
+  * [Getting Started](https://ej2.syncfusion.com/documentation/signature/getting-started?lang=typescript&utm_source=npm&utm_campaign=signature)
+  * [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=signature#/material/signature/default.html)
+  * [Product Page](https://www.syncfusion.com/javascript-ui-controls/signature/?utm_source=npm&utm_campaign=signature)
+
 * **Slider** - The slider component allows you to select a value or range of values between the min and max range.
   * [Getting Started](https://ej2.syncfusion.com/vue/documentation/slider/getting-started/?utm_source=npm&utm_campaign=slider)
   * [View Online Demos](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=slider#/material/slider/default.html)
@@ -92,7 +97,15 @@ Input component is also offered in following list of frameworks.
 - [**Internationalization**](https://ej2.syncfusion.com/vue/documentation/numerictextbox/internationalization/?utm_source=npm&utm_campaign=numerictextbox) - library provides support for formatting and parsing number using the official Unicode CLDR JSON data.
 - [**Localization**](https://ej2.syncfusion.com/vue/documentation/numerictextbox/internationalization#localization/?utm_source=npm&utm_campaign=numerictextbox#localization) - Supports to localize spin up and down buttons title for the tooltip to different cultures.
 
-### 5. Slider
+### 5. Signature
+- [**Customization**](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/material/signature/default.html) - Support various customization options like background color, background image, stroke color, stroke width, save with background, undo, redo, clear, readonly, and disabled.
+- [**Save**](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/material/signature/default.html) - Support to save the signature as image like PNG, JPEG, and SVG.
+- [**Load**](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/material/signature/default.html)
+- Support to load the signature as base64 url of the image.
+- [**Draw**](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/material/signature/default.html)
+- Support to draw the text with the different font family and font size.
+
+### 6. Slider
 - [**Types**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=slider#/material/slider/default.html) - Provided three types of Slider.
 - [**Orientation**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=slider#/material/slider/orientation.html) - Displays the Slider in horizontal or vertical direction.
 - [**Buttons**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=slider#/material/slider/tooltip.html) - Provided built-in support to render the buttons in both edges of the Slider.
@@ -103,7 +116,7 @@ Input component is also offered in following list of frameworks.
 - [**Accessibility**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=slider#/material/slider/default.html) - Built-in compliance with the [WAI-ARIA](http://www.w3.org/WAI/PF/aria-practices/) specifications.
 - [**Keyboard Interaction**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=slider#/material/slider/api.html) - The Slider can be intractable through the keyboard.
 
-### 6. Upload
+### 7. Upload
 - [**Chunk Upload**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-file-upload-npm#/material/uploader/chunk-upload.html) – used to upload large files as chunks
 - [**Drag-and-drop**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-file-upload-npm#/material/uploader/custom-drop-area.html) – drag the files and drop into component to upload them.
 - [**Template**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-file-upload-npm#/material/uploader/custom-file-list.html) – the file list and buttons can be customize using template

package/dist/ej2-vue-inputs.umd.min.js

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-vue-inputs.umd.min.js
-*  version : 20.1.55
+*  version : 20.1.61
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

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

@@ -11,7 +11,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 // {{VueImport}}
-const properties = ['isLazyUpdate', 'autocomplete', 'cssClass', 'enablePersistence', 'enableRtl', 'enabled', 'floatLabelType', 'htmlAttributes', 'locale', 'multiline', 'placeholder', 'readonly', 'showClearButton', 'type', 'value', 'width', 'blur', 'change', 'created', 'destroyed', 'focus', 'input'];
+const properties = ['isLazyUpdate', 'plugins', 'autocomplete', 'cssClass', 'enablePersistence', 'enableRtl', 'enabled', 'floatLabelType', 'htmlAttributes', 'locale', 'multiline', 'placeholder', 'readonly', 'showClearButton', 'type', 'value', 'width', 'blur', 'change', 'created', 'destroyed', 'focus', 'input'];
 const modelProps = ['value'];
 const testProp = getProps({ props: properties });
 const props = testProp[0];
@@ -32,7 +32,12 @@ let TextBoxComponent =
 /* Start Options({
     props: props,
     watch: watch,
-    emits: emitProbs
+    emits: emitProbs,
+    provide: function provide() {
+        return {
+            custom: this.custom
+        };
+    }
 }) End */
 class TextBoxComponent extends ComponentBase {
     constructor() {
@@ -51,6 +56,7 @@ class TextBoxComponent extends ComponentBase {
         this.ej2Instances._setProperties = this.ej2Instances.setProperties;
         this.ej2Instances.setProperties = this.setProperties;
         this.ej2Instances.clearTemplate = this.clearTemplate;
+        this.updated = this.updated;
     }
     clearTemplate(templateNames) {
         if (!templateNames) {
@@ -108,6 +114,7 @@ class TextBoxComponent extends ComponentBase {
                 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)) {
@@ -143,6 +150,9 @@ class TextBoxComponent extends ComponentBase {
         }
         return h('input', slots);
     }
+    custom() {
+        this.updated();
+    }
     addAttributes(attributes) {
         return this.ej2Instances.addAttributes(attributes);
     }
@@ -169,7 +179,12 @@ TextBoxComponent = __decorate([
     /* Start Options({
         props: props,
         watch: watch,
-        emits: emitProbs
+        emits: emitProbs,
+        provide: function provide() {
+            return {
+                custom: this.custom
+            };
+        }
     }) End */
 ], TextBoxComponent);
 const TextBoxPlugin = {
@@ -186,7 +201,7 @@ var __decorate$1 = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 // {{VueImport}}
-const properties$1 = ['isLazyUpdate', 'cssClass', 'currency', 'currencyCode', 'decimals', 'enablePersistence', 'enableRtl', 'enabled', 'floatLabelType', 'format', 'htmlAttributes', 'locale', 'max', 'min', 'placeholder', 'readonly', 'showClearButton', 'showSpinButton', 'step', 'strictMode', 'validateDecimalOnType', 'value', 'width', 'blur', 'change', 'created', 'destroyed', 'focus'];
+const properties$1 = ['isLazyUpdate', 'plugins', 'cssClass', 'currency', 'currencyCode', 'decimals', 'enablePersistence', 'enableRtl', 'enabled', 'floatLabelType', 'format', 'htmlAttributes', 'locale', 'max', 'min', 'placeholder', 'readonly', 'showClearButton', 'showSpinButton', 'step', 'strictMode', 'validateDecimalOnType', 'value', 'width', 'blur', 'change', 'created', 'destroyed', 'focus'];
 const modelProps$1 = ['value'];
 const testProp$1 = getProps({ props: properties$1 });
 const props$1 = testProp$1[0];
@@ -207,7 +222,12 @@ let NumericTextBoxComponent =
 /* Start Options({
     props: props,
     watch: watch,
-    emits: emitProbs
+    emits: emitProbs,
+    provide: function provide() {
+        return {
+            custom: this.custom
+        };
+    }
 }) End */
 class NumericTextBoxComponent extends ComponentBase {
     constructor() {
@@ -226,6 +246,7 @@ class NumericTextBoxComponent extends ComponentBase {
         this.ej2Instances._setProperties = this.ej2Instances.setProperties;
         this.ej2Instances.setProperties = this.setProperties;
         this.ej2Instances.clearTemplate = this.clearTemplate;
+        this.updated = this.updated;
     }
     clearTemplate(templateNames) {
         if (!templateNames) {
@@ -283,6 +304,7 @@ class NumericTextBoxComponent extends ComponentBase {
                 if (!isExecute$1) {
                     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)) {
@@ -318,6 +340,9 @@ class NumericTextBoxComponent extends ComponentBase {
         }
         return h('input', slots);
     }
+    custom() {
+        this.updated();
+    }
     decrement(step) {
         return this.ej2Instances.decrement(step);
     }
@@ -344,7 +369,12 @@ NumericTextBoxComponent = __decorate$1([
     /* Start Options({
         props: props,
         watch: watch,
-        emits: emitProbs
+        emits: emitProbs,
+        provide: function provide() {
+            return {
+                custom: this.custom
+            };
+        }
     }) End */
 ], NumericTextBoxComponent);
 const NumericTextBoxPlugin = {
@@ -361,7 +391,7 @@ var __decorate$2 = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 // {{VueImport}}
-const properties$2 = ['isLazyUpdate', 'cssClass', 'customCharacters', 'enablePersistence', 'enableRtl', 'enabled', 'floatLabelType', 'htmlAttributes', 'locale', 'mask', 'placeholder', 'promptChar', 'readonly', 'showClearButton', 'value', 'width', 'blur', 'change', 'created', 'destroyed', 'focus'];
+const properties$2 = ['isLazyUpdate', 'plugins', 'cssClass', 'customCharacters', 'enablePersistence', 'enableRtl', 'enabled', 'floatLabelType', 'htmlAttributes', 'locale', 'mask', 'placeholder', 'promptChar', 'readonly', 'showClearButton', 'value', 'width', 'blur', 'change', 'created', 'destroyed', 'focus'];
 const modelProps$2 = ['value'];
 const testProp$2 = getProps({ props: properties$2 });
 const props$2 = testProp$2[0];
@@ -382,7 +412,12 @@ let MaskedTextBoxComponent =
 /* Start Options({
     props: props,
     watch: watch,
-    emits: emitProbs
+    emits: emitProbs,
+    provide: function provide() {
+        return {
+            custom: this.custom
+        };
+    }
 }) End */
 class MaskedTextBoxComponent extends ComponentBase {
     constructor() {
@@ -401,6 +436,7 @@ class MaskedTextBoxComponent extends ComponentBase {
         this.ej2Instances._setProperties = this.ej2Instances.setProperties;
         this.ej2Instances.setProperties = this.setProperties;
         this.ej2Instances.clearTemplate = this.clearTemplate;
+        this.updated = this.updated;
     }
     clearTemplate(templateNames) {
         if (!templateNames) {
@@ -458,6 +494,7 @@ class MaskedTextBoxComponent extends ComponentBase {
                 if (!isExecute$2) {
                     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)) {
@@ -493,6 +530,9 @@ class MaskedTextBoxComponent extends ComponentBase {
         }
         return h('input', slots);
     }
+    custom() {
+        this.updated();
+    }
     focusIn() {
         return this.ej2Instances.focusIn();
     }
@@ -513,7 +553,12 @@ MaskedTextBoxComponent = __decorate$2([
     /* Start Options({
         props: props,
         watch: watch,
-        emits: emitProbs
+        emits: emitProbs,
+        provide: function provide() {
+            return {
+                custom: this.custom
+            };
+        }
     }) End */
 ], MaskedTextBoxComponent);
 const MaskedTextBoxPlugin = {
@@ -530,7 +575,7 @@ var __decorate$3 = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 // {{VueImport}}
-const properties$3 = ['isLazyUpdate', 'colorRange', 'cssClass', 'customValues', 'enableAnimation', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'enabled', 'limits', 'locale', 'max', 'min', 'orientation', 'readonly', 'showButtons', 'step', 'ticks', 'tooltip', 'type', 'value', 'width', 'change', 'changed', 'created', 'renderedTicks', 'renderingTicks', 'tooltipChange'];
+const properties$3 = ['isLazyUpdate', 'plugins', 'colorRange', 'cssClass', 'customValues', 'enableAnimation', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'enabled', 'limits', 'locale', 'max', 'min', 'orientation', 'readonly', 'showButtons', 'step', 'ticks', 'tooltip', 'type', 'value', 'width', 'change', 'changed', 'created', 'renderedTicks', 'renderingTicks', 'tooltipChange'];
 const modelProps$3 = ['value'];
 const testProp$3 = getProps({ props: properties$3 });
 const props$3 = testProp$3[0];
@@ -551,7 +596,12 @@ let SliderComponent =
 /* Start Options({
     props: props,
     watch: watch,
-    emits: emitProbs
+    emits: emitProbs,
+    provide: function provide() {
+        return {
+            custom: this.custom
+        };
+    }
 }) End */
 class SliderComponent extends ComponentBase {
     constructor() {
@@ -570,6 +620,7 @@ class SliderComponent extends ComponentBase {
         this.ej2Instances._setProperties = this.ej2Instances.setProperties;
         this.ej2Instances.setProperties = this.setProperties;
         this.ej2Instances.clearTemplate = this.clearTemplate;
+        this.updated = this.updated;
     }
     clearTemplate(templateNames) {
         if (!templateNames) {
@@ -627,6 +678,7 @@ class SliderComponent extends ComponentBase {
                 if (!isExecute$3) {
                     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)) {
@@ -662,6 +714,9 @@ class SliderComponent extends ComponentBase {
         }
         return h('div', slots);
     }
+    custom() {
+        this.updated();
+    }
     reposition() {
         return this.ej2Instances.reposition();
     }
@@ -679,7 +734,12 @@ SliderComponent = __decorate$3([
     /* Start Options({
         props: props,
         watch: watch,
-        emits: emitProbs
+        emits: emitProbs,
+        provide: function provide() {
+            return {
+                custom: this.custom
+            };
+        }
     }) End */
 ], SliderComponent);
 const SliderPlugin = {
@@ -695,6 +755,7 @@ var __decorate$4 = (undefined && undefined.__decorate) || function (decorators,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+// {{VueImport}}
 const isExecute$4 = gh ? false : true;
 let vueImport;
 if (!isExecute$4 || parseInt(allVue.version) < 3) {
@@ -703,16 +764,47 @@ if (!isExecute$4 || parseInt(allVue.version) < 3) {
 else {
     vueImport = Vue$1;
 }
-let FilesDirective = class FilesDirective extends vueImport {
-    render() {
+let FilesDirective = 
+/* Start Options({
+    inject: {
+        custom: {
+            default: null
+        }
+    }
+}) End */
+class FilesDirective extends vueImport {
+    constructor() {
+        super(arguments);
+    }
+    render(createElement) {
+        if (gh) {
+            let h = gh || createElement;
+            let slots = null;
+            if (!isNullOrUndefined(this.$slots.default)) {
+                slots = gh ? this.$slots.default() : this.$slots.default;
+            }
+            return h('div', { class: 'e-directive' }, slots);
+        }
         return;
     }
+    updated() {
+        if (gh && this.custom) {
+            this.custom();
+        }
+    }
     getTag() {
         return 'e-files';
     }
 };
 FilesDirective = __decorate$4([
     EJComponentDecorator({}, isExecute$4)
+    /* Start Options({
+        inject: {
+            custom: {
+                default: null
+            }
+        }
+    }) End */
 ], FilesDirective);
 const FilesPlugin = {
     name: 'e-files',
@@ -757,7 +849,7 @@ var __decorate$5 = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 // {{VueImport}}
-const properties$4 = ['isLazyUpdate', 'allowedExtensions', 'asyncSettings', 'autoUpload', 'buttons', 'cssClass', 'directoryUpload', 'dropArea', 'dropEffect', 'enablePersistence', 'enableRtl', 'enabled', 'files', 'htmlAttributes', 'locale', 'maxFileSize', 'minFileSize', 'multiple', 'sequentialUpload', 'showFileList', 'template', 'actionComplete', 'beforeRemove', 'beforeUpload', 'canceling', 'change', 'chunkFailure', 'chunkSuccess', 'chunkUploading', 'clearing', 'created', 'failure', 'fileListRendering', 'pausing', 'progress', 'removing', 'rendering', 'resuming', 'selected', 'success', 'uploading'];
+const properties$4 = ['isLazyUpdate', 'plugins', 'allowedExtensions', 'asyncSettings', 'autoUpload', 'buttons', 'cssClass', 'directoryUpload', 'dropArea', 'dropEffect', 'enablePersistence', 'enableRtl', 'enabled', 'files', 'htmlAttributes', 'locale', 'maxFileSize', 'minFileSize', 'multiple', 'sequentialUpload', 'showFileList', 'template', 'actionComplete', 'beforeRemove', 'beforeUpload', 'canceling', 'change', 'chunkFailure', 'chunkSuccess', 'chunkUploading', 'clearing', 'created', 'failure', 'fileListRendering', 'pausing', 'progress', 'removing', 'rendering', 'resuming', 'selected', 'success', 'uploading'];
 const modelProps$4 = [];
 const testProp$4 = getProps({ props: properties$4 });
 const props$4 = testProp$4[0];
@@ -778,7 +870,12 @@ let UploaderComponent =
 /* Start Options({
     props: props,
     watch: watch,
-    emits: emitProbs
+    emits: emitProbs,
+    provide: function provide() {
+        return {
+            custom: this.custom
+        };
+    }
 }) End */
 class UploaderComponent extends ComponentBase {
     constructor() {
@@ -795,6 +892,7 @@ class UploaderComponent extends ComponentBase {
         this.ej2Instances._setProperties = this.ej2Instances.setProperties;
         this.ej2Instances.setProperties = this.setProperties;
         this.ej2Instances.clearTemplate = this.clearTemplate;
+        this.updated = this.updated;
     }
     clearTemplate(templateNames) {
         if (!templateNames) {
@@ -849,6 +947,9 @@ class UploaderComponent extends ComponentBase {
         }
         return h('input', slots);
     }
+    custom() {
+        this.updated();
+    }
     bytesToSize(bytes) {
         return this.ej2Instances.bytesToSize(bytes);
     }
@@ -893,7 +994,12 @@ UploaderComponent = __decorate$5([
     /* Start Options({
         props: props,
         watch: watch,
-        emits: emitProbs
+        emits: emitProbs,
+        provide: function provide() {
+            return {
+                custom: this.custom
+            };
+        }
     }) End */
 ], UploaderComponent);
 const UploaderPlugin = {
@@ -912,7 +1018,7 @@ var __decorate$6 = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 // {{VueImport}}
-const properties$5 = ['isLazyUpdate', 'columns', 'createPopupOnClick', 'cssClass', 'disabled', 'enableOpacity', 'enablePersistence', 'enableRtl', 'inline', 'locale', 'mode', 'modeSwitcher', 'noColor', 'presetColors', 'showButtons', 'value', 'beforeClose', 'beforeModeSwitch', 'beforeOpen', 'beforeTileRender', 'change', 'created', 'onModeSwitch', 'open', 'select'];
+const properties$5 = ['isLazyUpdate', 'plugins', 'columns', 'createPopupOnClick', 'cssClass', 'disabled', 'enableOpacity', 'enablePersistence', 'enableRtl', 'inline', 'locale', 'mode', 'modeSwitcher', 'noColor', 'presetColors', 'showButtons', 'value', 'beforeClose', 'beforeModeSwitch', 'beforeOpen', 'beforeTileRender', 'change', 'created', 'onModeSwitch', 'open', 'select'];
 const modelProps$5 = ['value'];
 const testProp$5 = getProps({ props: properties$5 });
 const props$5 = testProp$5[0];
@@ -933,7 +1039,12 @@ let ColorPickerComponent =
 /* Start Options({
     props: props,
     watch: watch,
-    emits: emitProbs
+    emits: emitProbs,
+    provide: function provide() {
+        return {
+            custom: this.custom
+        };
+    }
 }) End */
 class ColorPickerComponent extends ComponentBase {
     constructor() {
@@ -952,6 +1063,7 @@ class ColorPickerComponent extends ComponentBase {
         this.ej2Instances._setProperties = this.ej2Instances.setProperties;
         this.ej2Instances.setProperties = this.setProperties;
         this.ej2Instances.clearTemplate = this.clearTemplate;
+        this.updated = this.updated;
     }
     clearTemplate(templateNames) {
         if (!templateNames) {
@@ -1009,6 +1121,7 @@ class ColorPickerComponent extends ComponentBase {
                 if (!isExecute$6) {
                     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)) {
@@ -1044,6 +1157,9 @@ class ColorPickerComponent extends ComponentBase {
         }
         return h('input', slots);
     }
+    custom() {
+        this.updated();
+    }
     focusIn() {
         return this.ej2Instances.focusIn();
     }
@@ -1064,7 +1180,12 @@ ColorPickerComponent = __decorate$6([
     /* Start Options({
         props: props,
         watch: watch,
-        emits: emitProbs
+        emits: emitProbs,
+        provide: function provide() {
+            return {
+                custom: this.custom
+            };
+        }
     }) End */
 ], ColorPickerComponent);
 const ColorPickerPlugin = {
@@ -1081,7 +1202,7 @@ var __decorate$7 = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 // {{VueImport}}
-const properties$6 = ['isLazyUpdate', 'backgroundColor', 'backgroundImage', 'disabled', 'enablePersistence', 'enableRtl', 'isReadOnly', 'locale', 'maxStrokeWidth', 'minStrokeWidth', 'saveWithBackground', 'strokeColor', 'velocity', 'beforeSave', 'change', 'created'];
+const properties$6 = ['isLazyUpdate', 'plugins', 'backgroundColor', 'backgroundImage', 'disabled', 'enablePersistence', 'enableRtl', 'isReadOnly', 'locale', 'maxStrokeWidth', 'minStrokeWidth', 'saveWithBackground', 'strokeColor', 'velocity', 'beforeSave', 'change', 'created'];
 const modelProps$6 = [];
 const testProp$6 = getProps({ props: properties$6 });
 const props$6 = testProp$6[0];
@@ -1102,7 +1223,12 @@ let SignatureComponent =
 /* Start Options({
     props: props,
     watch: watch,
-    emits: emitProbs
+    emits: emitProbs,
+    provide: function provide() {
+        return {
+            custom: this.custom
+        };
+    }
 }) End */
 class SignatureComponent extends ComponentBase {
     constructor() {
@@ -1119,6 +1245,7 @@ class SignatureComponent extends ComponentBase {
         this.ej2Instances._setProperties = this.ej2Instances.setProperties;
         this.ej2Instances.setProperties = this.setProperties;
         this.ej2Instances.clearTemplate = this.clearTemplate;
+        this.updated = this.updated;
     }
     clearTemplate(templateNames) {
         if (!templateNames) {
@@ -1173,6 +1300,9 @@ class SignatureComponent extends ComponentBase {
         }
         return h('canvas', slots);
     }
+    custom() {
+        this.updated();
+    }
     canRedo() {
         return this.ej2Instances.canRedo();
     }
@@ -1217,7 +1347,12 @@ SignatureComponent = __decorate$7([
     /* Start Options({
         props: props,
         watch: watch,
-        emits: emitProbs
+        emits: emitProbs,
+        provide: function provide() {
+            return {
+                custom: this.custom
+            };
+        }
     }) End */
 ], SignatureComponent);
 const SignaturePlugin = {