@syncfusion/ej2-vue-inputs 25.2.6 → 26.1.35

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

@@ -1,13 +1,12 @@
-import { ColorPicker, MaskedTextBox, NumericTextBox, Rating, Signature, Slider, TextArea, TextBox, Uploader } from '@syncfusion/ej2-inputs';
-import { ComponentBase, getProps, gh, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';
-import { getValue, isNullOrUndefined, isUndefined } from '@syncfusion/ej2-base';
+import { TextBox, TextArea, NumericTextBox, MaskedTextBox, Slider, Uploader, ColorPicker, Signature, Rating, OtpInput } from '@syncfusion/ej2-inputs';
+export * from '@syncfusion/ej2-inputs';
+import { getProps, vueDefineComponent, ComponentBase, isExecute, gh } from '@syncfusion/ej2-vue-base';
+import { isNullOrUndefined, getValue, isUndefined } from '@syncfusion/ej2-base';
 
 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];
-const watch = testProp[1];
-const emitProbs = Object.keys(watch);
+const props = testProp[0], watch = testProp[1], emitProbs = Object.keys(watch);
 emitProbs.push('modelchanged', 'update:modelValue');
 for (let props of modelProps) {
     emitProbs.push('update:' + props);
@@ -168,12 +167,10 @@ const TextBoxPlugin = {
     }
 };
 
-const properties$1 = ['isLazyUpdate', 'plugins', 'columnsCount', 'cssClass', 'enablePersistence', 'enableRtl', 'enabled', 'floatLabelType', 'htmlAttributes', 'locale', 'maxLength', 'placeholder', 'readonly', 'resizeMode', 'rowsCount', 'showClearButton', 'value', 'width', 'blur', 'change', 'created', 'destroyed', 'focus', 'input'];
+const properties$1 = ['isLazyUpdate', 'plugins', 'cols', 'cssClass', 'enablePersistence', 'enableRtl', 'enabled', 'floatLabelType', 'htmlAttributes', 'locale', 'maxLength', 'placeholder', 'readonly', 'resizeMode', 'rows', 'showClearButton', 'value', 'width', 'blur', 'change', 'created', 'destroyed', 'focus', 'input'];
 const modelProps$1 = ['value'];
 const testProp$1 = getProps({ props: properties$1 });
-const props$1 = testProp$1[0];
-const watch$1 = testProp$1[1];
-const emitProbs$1 = Object.keys(watch$1);
+const props$1 = testProp$1[0], watch$1 = testProp$1[1], emitProbs$1 = Object.keys(watch$1);
 emitProbs$1.push('modelchanged', 'update:modelValue');
 for (let props of modelProps$1) {
     emitProbs$1.push('update:' + props);
@@ -334,9 +331,7 @@ const TextAreaPlugin = {
 const properties$2 = ['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$2 = ['value'];
 const testProp$2 = getProps({ props: properties$2 });
-const props$2 = testProp$2[0];
-const watch$2 = testProp$2[1];
-const emitProbs$2 = Object.keys(watch$2);
+const props$2 = testProp$2[0], watch$2 = testProp$2[1], emitProbs$2 = Object.keys(watch$2);
 emitProbs$2.push('modelchanged', 'update:modelValue');
 for (let props of modelProps$2) {
     emitProbs$2.push('update:' + props);
@@ -500,9 +495,7 @@ const NumericTextBoxPlugin = {
 const properties$3 = ['isLazyUpdate', 'plugins', 'cssClass', 'customCharacters', 'enablePersistence', 'enableRtl', 'enabled', 'floatLabelType', 'htmlAttributes', 'locale', 'mask', 'placeholder', 'promptChar', 'readonly', 'showClearButton', 'value', 'width', 'blur', 'change', 'created', 'destroyed', 'focus'];
 const modelProps$3 = ['value'];
 const testProp$3 = getProps({ props: properties$3 });
-const props$3 = testProp$3[0];
-const watch$3 = testProp$3[1];
-const emitProbs$3 = Object.keys(watch$3);
+const props$3 = testProp$3[0], watch$3 = testProp$3[1], emitProbs$3 = Object.keys(watch$3);
 emitProbs$3.push('modelchanged', 'update:modelValue');
 for (let props of modelProps$3) {
     emitProbs$3.push('update:' + props);
@@ -660,9 +653,7 @@ const MaskedTextBoxPlugin = {
 const properties$4 = ['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$4 = ['value'];
 const testProp$4 = getProps({ props: properties$4 });
-const props$4 = testProp$4[0];
-const watch$4 = testProp$4[1];
-const emitProbs$4 = Object.keys(watch$4);
+const props$4 = testProp$4[0], watch$4 = testProp$4[1], emitProbs$4 = Object.keys(watch$4);
 emitProbs$4.push('modelchanged', 'update:modelValue');
 for (let props of modelProps$4) {
     emitProbs$4.push('update:' + props);
@@ -876,9 +867,7 @@ const UploadedFilesPlugin = {
 const properties$5 = ['isLazyUpdate', 'plugins', 'allowedExtensions', 'asyncSettings', 'autoUpload', 'buttons', 'cssClass', 'directoryUpload', 'dropArea', 'dropEffect', 'enableHtmlSanitizer', '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$5 = [];
 const testProp$5 = getProps({ props: properties$5 });
-const props$5 = testProp$5[0];
-const watch$5 = testProp$5[1];
-const emitProbs$5 = Object.keys(watch$5);
+const props$5 = testProp$5[0], watch$5 = testProp$5[1], emitProbs$5 = Object.keys(watch$5);
 emitProbs$5.push('modelchanged', 'update:modelValue');
 for (let props of modelProps$5) {
     emitProbs$5.push('update:' + props);
@@ -1023,9 +1012,7 @@ const UploaderPlugin = {
 const properties$6 = ['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$6 = ['value'];
 const testProp$6 = getProps({ props: properties$6 });
-const props$6 = testProp$6[0];
-const watch$6 = testProp$6[1];
-const emitProbs$6 = Object.keys(watch$6);
+const props$6 = testProp$6[0], watch$6 = testProp$6[1], emitProbs$6 = Object.keys(watch$6);
 emitProbs$6.push('modelchanged', 'update:modelValue');
 for (let props of modelProps$6) {
     emitProbs$6.push('update:' + props);
@@ -1183,9 +1170,7 @@ const ColorPickerPlugin = {
 const properties$7 = ['isLazyUpdate', 'plugins', 'backgroundColor', 'backgroundImage', 'disabled', 'enablePersistence', 'enableRtl', 'isReadOnly', 'locale', 'maxStrokeWidth', 'minStrokeWidth', 'saveWithBackground', 'strokeColor', 'velocity', 'beforeSave', 'change', 'created'];
 const modelProps$7 = [];
 const testProp$7 = getProps({ props: properties$7 });
-const props$7 = testProp$7[0];
-const watch$7 = testProp$7[1];
-const emitProbs$7 = Object.keys(watch$7);
+const props$7 = testProp$7[0], watch$7 = testProp$7[1], emitProbs$7 = Object.keys(watch$7);
 emitProbs$7.push('modelchanged', 'update:modelValue');
 for (let props of modelProps$7) {
     emitProbs$7.push('update:' + props);
@@ -1331,9 +1316,7 @@ const SignaturePlugin = {
 const properties$8 = ['isLazyUpdate', 'plugins', 'allowReset', 'cssClass', 'disabled', 'emptyTemplate', 'enableAnimation', 'enablePersistence', 'enableRtl', 'enableSingleSelection', 'fullTemplate', 'itemsCount', 'labelPosition', 'labelTemplate', 'locale', 'min', 'precision', 'readOnly', 'showLabel', 'showTooltip', 'tooltipTemplate', 'value', 'visible', 'beforeItemRender', 'created', 'onItemHover', 'valueChanged'];
 const modelProps$8 = ['value'];
 const testProp$8 = getProps({ props: properties$8 });
-const props$8 = testProp$8[0];
-const watch$8 = testProp$8[1];
-const emitProbs$8 = Object.keys(watch$8);
+const props$8 = testProp$8[0], watch$8 = testProp$8[1], emitProbs$8 = Object.keys(watch$8);
 emitProbs$8.push('modelchanged', 'update:modelValue');
 for (let props of modelProps$8) {
     emitProbs$8.push('update:' + props);
@@ -1482,6 +1465,160 @@ const RatingPlugin = {
     }
 };
 
-export { TextBoxComponent, TextBoxPlugin, TextAreaComponent, TextAreaPlugin, NumericTextBoxComponent, NumericTextBoxPlugin, MaskedTextBoxComponent, MaskedTextBoxPlugin, SliderComponent, SliderPlugin, FilesDirective, UploadedFilesDirective, FilesPlugin, UploadedFilesPlugin, UploaderComponent, UploaderPlugin, ColorPickerComponent, ColorPickerPlugin, SignatureComponent, SignaturePlugin, RatingComponent, RatingPlugin };
-export * from '@syncfusion/ej2-inputs';
+const properties$9 = ['isLazyUpdate', 'plugins', 'ariaLabels', 'cssClass', 'disabled', 'enablePersistence', 'enableRtl', 'htmlAttributes', 'length', 'locale', 'placeholder', 'separator', 'stylingMode', 'type', 'value', 'blur', 'created', 'focus', 'input', 'valueChanged'];
+const modelProps$9 = ['value'];
+const testProp$9 = getProps({ props: properties$9 });
+const props$9 = testProp$9[0], watch$9 = testProp$9[1], emitProbs$9 = Object.keys(watch$9);
+emitProbs$9.push('modelchanged', 'update:modelValue');
+for (let props of modelProps$9) {
+    emitProbs$9.push('update:' + props);
+}
+/**
+ * Represents the Essential JS 2 VueJS otpinput Component
+ * ```html
+ * <ejs-otpinput v-bind:value='value'></ejs-otpinput>
+ * ```
+ */
+let OtpInputComponent = vueDefineComponent({
+    name: 'OtpInputComponent',
+    mixins: [ComponentBase],
+    props: props$9,
+    watch: watch$9,
+    emits: emitProbs$9,
+    model: { event: 'modelchanged' },
+    provide() { return { custom: this.custom }; },
+    data() {
+        return {
+            ej2Instances: new OtpInput({}),
+            propKeys: properties$9,
+            models: modelProps$9,
+            hasChildDirective: false,
+            hasInjectedModules: false,
+            tagMapper: {},
+            tagNameMapper: {},
+            isVue3: !isExecute,
+            templateCollection: {},
+        };
+    },
+    created() {
+        this.ej2Instances._trigger = this.ej2Instances.trigger;
+        this.ej2Instances.trigger = this.trigger;
+        this.bindProperties();
+        this.ej2Instances._setProperties = this.ej2Instances.setProperties;
+        this.ej2Instances.setProperties = this.setProperties;
+        this.ej2Instances.clearTemplate = this.clearTemplate;
+        this.updated = this.updated;
+    },
+    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];
+                    }
+                }
+            }
+        },
+        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]);
+                            }
+                        }
+                    });
+                });
+            }
+        },
+        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]);
+                        }
+                    }
+                }
+            }
+            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);
+            }
+        },
+        custom() {
+            this.updated();
+        },
+        focusIn() {
+            return this.ej2Instances.focusIn();
+        },
+        focusOut() {
+            return this.ej2Instances.focusOut();
+        },
+    }
+});
+const OtpInputPlugin = {
+    name: 'ejs-otpinput',
+    install(Vue) {
+        Vue.component(OtpInputPlugin.name, OtpInputComponent);
+    }
+};
+
+export { ColorPickerComponent, ColorPickerPlugin, FilesDirective, FilesPlugin, MaskedTextBoxComponent, MaskedTextBoxPlugin, NumericTextBoxComponent, NumericTextBoxPlugin, OtpInputComponent, OtpInputPlugin, RatingComponent, RatingPlugin, SignatureComponent, SignaturePlugin, SliderComponent, SliderPlugin, TextAreaComponent, TextAreaPlugin, TextBoxComponent, TextBoxPlugin, UploadedFilesDirective, UploadedFilesPlugin, UploaderComponent, UploaderPlugin };
 //# sourceMappingURL=ej2-vue-inputs.es2015.js.map