@progress/kendo-vue-inputs 3.5.0 → 3.5.1-dev.202208150613

package/dist/esm/maskedtextbox/MaskedTextBox.js

@@ -0,0 +1,511 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var ref = allVue.ref;
+import { MaskingService } from './masking.service.js';
+import { defaultRules, maskingChanged, returnFalse } from './utils.js';
+import { guid, getTabIndex, validatePackage, kendoThemeMaps, templateDefinition, templateRendering, getListeners, getTemplate, setRef } from '@progress/kendo-vue-common';
+import { packageMetadata } from '../package-metadata.js';
+/**
+ * @hidden
+ */
+
+var MaskedTextBoxVue2 = {
+  model: {
+    event: 'changemodel'
+  },
+  props: {
+    type: {
+      type: String,
+      default: 'text'
+    },
+    modelValue: String,
+    modelRawValue: String,
+    value: String,
+    defaultValue: String,
+    placeholder: String,
+    title: String,
+    dir: String,
+    id: String,
+    ariaLabelledBy: String,
+    ariaDescribedBy: String,
+    tabIndex: Number,
+    accessKey: String,
+    disabled: Boolean,
+    readonly: Boolean,
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return [null, 'small', 'medium', 'large'].includes(value);
+      }
+    },
+    rounded: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return [null, 'small', 'medium', 'large', 'full'].includes(value);
+      }
+    },
+    fillMode: {
+      type: String,
+      default: 'solid',
+      validator: function validator(value) {
+        return [null, 'solid', 'flat', 'outline'].includes(value);
+      }
+    },
+    prompt: {
+      type: String,
+      default: '_'
+    },
+    promptPlaceholder: {
+      type: String,
+      default: ' '
+    },
+    includeLiterals: {
+      type: Boolean,
+      default: false
+    },
+    maskValidation: {
+      type: Boolean,
+      default: true
+    },
+    mask: String,
+    rules: {
+      type: Object,
+      default: function _default() {
+        return defaultRules;
+      }
+    },
+    selection: Object,
+    name: String,
+    label: String,
+    validationMessage: String,
+    required: {
+      type: Boolean,
+      default: false
+    },
+    valid: {
+      type: Boolean,
+      default: undefined
+    },
+    validityStyles: {
+      type: Boolean,
+      default: true
+    },
+    iconName: String,
+    inputPrefix: templateDefinition,
+    inputSuffix: templateDefinition,
+    showValidationIcon: Boolean,
+    showLoadingIcon: Boolean,
+    showClearButton: Boolean,
+    inputClass: String,
+    wrapperClass: String
+  },
+  data: function data() {
+    return {
+      currentValue: undefined,
+      currentFocused: false,
+      inputValue: undefined,
+      currentSelection: [null, null]
+    };
+  },
+  created: function created() {
+    validatePackage(packageMetadata);
+    this.hasMounted = false;
+    this.valueDuringOnChange = undefined;
+    this.inputId = "k-".concat(guid());
+    this.service = new MaskingService();
+    this.isPasted = false;
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var inputRef = ref(null);
+    return {
+      v3: v3,
+      inputRef: inputRef
+    };
+  },
+  mounted: function mounted() {
+    this.hasMounted = true; // @ts-ignore
+
+    this.element = this.input = this.v3 ? this.inputRef : this.$refs.input;
+    this.updateService();
+    this.setValidity();
+  },
+  watch: {
+    currentFocused: function currentFocused(_, oldValue) {
+      this.prevCurrentFocused = oldValue;
+    },
+    selection: function selection(_, oldValue) {
+      this.prevSelection = oldValue;
+    },
+    includeLiterals: function includeLiterals(_, oldValue) {
+      this.prevIncludeLiterals = oldValue;
+    },
+    mask: function mask(_, oldValue) {
+      this.prevMask = oldValue;
+    },
+    prompt: function prompt(_, oldValue) {
+      this.prevPrompt = oldValue;
+    },
+    promptPlaceholder: function promptPlaceholder(_, oldValue) {
+      this.prevPromptPlaceholder = oldValue;
+    },
+    rules: function rules(_, oldValue) {
+      this.prevRules = oldValue;
+    }
+  },
+  updated: function updated() {
+    if (this.element && this.currentFocused) {
+      // && this.prevCurrentFocused
+      var _a = this.currentSelection,
+          start = _a[0],
+          end = _a[1];
+      var prevSelection = this.prevSelection;
+      var nextSelection = this.$props.selection;
+
+      if (!prevSelection && nextSelection || prevSelection && nextSelection && (prevSelection.start !== nextSelection.start || prevSelection.end !== nextSelection.end)) {
+        start = nextSelection.start;
+        end = nextSelection.end;
+      }
+
+      if (start !== null && end !== null) {
+        this.element.setSelectionRange(start, end);
+      }
+    }
+
+    var prevProps = {
+      includeLiterals: this.prevIncludeLiterals,
+      mask: this.prevMask,
+      prompt: this.prevPrompt,
+      promptPlaceholder: this.prevPromptPlaceholder,
+      rules: this.prevRules
+    };
+
+    if (maskingChanged(prevProps, this.$props)) {
+      this.updateService();
+    }
+
+    this.setValidity();
+  },
+  computed: {
+    computedRules: {
+      get: function get() {
+        return Object.assign({}, defaultRules, this.$props.rules);
+      }
+    },
+    spanClassNames: {
+      get: function get() {
+        var _a;
+
+        var isValid = !this.hasMounted || !this.$props.validityStyles || this.validity().valid;
+        return _a = {
+          'k-floating-label-container': true,
+          'k-focus': this.currentFocused,
+          'k-empty': !this.computedValue(),
+          'k-invalid': !isValid && isValid !== undefined,
+          'k-rtl': this.$props.dir === 'rtl',
+          'k-loading': this.showLoadingIcon
+        }, _a[this.wrapperClass] = this.wrapperClass, _a;
+      }
+    },
+    wrapperSpanClass: function wrapperSpanClass() {
+      var _a;
+
+      var _b = this.$props,
+          size = _b.size,
+          fillMode = _b.fillMode,
+          rounded = _b.rounded;
+      var isValid = !this.$props.validityStyles || this.validity().valid;
+      return _a = {
+        'k-maskedtextbox': true,
+        'k-input': true
+      }, _a["k-input-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-input-".concat(fillMode)] = fillMode, _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-invalid'] = !isValid, _a['k-required'] = this.required, _a['k-disabled'] = this.$props.disabled, _a['k-loading'] = this.showLoadingIcon, _a[this.wrapperClass] = this.wrapperClass, _a;
+    },
+    inputInnerClass: function inputInnerClass() {
+      var _a;
+
+      return _a = {
+        'k-input-inner': true
+      }, _a[this.inputClass] = this.inputClass, _a;
+    }
+  },
+  methods: {
+    focus: function focus() {
+      if (this.input) {
+        this.input.focus();
+      }
+    },
+    computedValue: function computedValue() {
+      var value;
+
+      if (this.valueDuringOnChange !== undefined) {
+        value = this.valueDuringOnChange;
+      } else if (this.$props.value !== undefined) {
+        value = this.$props.value;
+      } else if (this.$props.modelValue !== undefined) {
+        value = this.$props.modelValue;
+      } else if (this.currentValue !== undefined) {
+        value = this.currentValue;
+      } else if (this.$props.defaultValue !== undefined) {
+        value = this.$props.defaultValue;
+      }
+
+      return value || '';
+    },
+    rawValue: function rawValue() {
+      return this.service.rawValue(this.computedValue());
+    },
+    validity: function validity() {
+      var maskedValue = this.computedValue();
+      var value = this.service.validationValue(maskedValue);
+      var customError = this.$props.validationMessage !== undefined;
+      var valid = this.$props.valid !== undefined ? this.$props.valid : (!this.$props.required || !!value) && (!this.$props.maskValidation || !this.$props.prompt || maskedValue.indexOf(this.$props.prompt) === -1);
+      return {
+        customError: customError,
+        valid: valid,
+        valueMissing: !value
+      };
+    },
+    pasteHandler: function pasteHandler(event) {
+      var _a = event.target,
+          selectionStart = _a.selectionStart,
+          selectionEnd = _a.selectionEnd;
+
+      if (selectionEnd === selectionStart) {
+        return;
+      }
+
+      this.isPasted = true;
+      this.currentSelection = [selectionStart || 0, selectionEnd || 0];
+    },
+    clearClick: function clearClick(event) {
+      this.triggerOnChange('', event);
+    },
+    onChangeHandler: function onChangeHandler(event) {
+      var input = event.currentTarget;
+      var value = this.inputValue = input.value;
+      var start = this.currentSelection[0] || 0;
+      var end = this.currentSelection[1] || 0;
+
+      if (!this.$props.mask) {
+        this.isPasted = false;
+        this.currentSelection = [null, null];
+        this.triggerOnChange(value, event);
+        return;
+      }
+
+      var maskedValue = this.computedValue();
+      var result;
+
+      if (this.isPasted) {
+        this.isPasted = false;
+        var rightPart = maskedValue.length - end;
+        var to = value.length - rightPart;
+        result = this.service.maskInRange(value.slice(start, to), maskedValue, start, end);
+      } else {
+        result = this.service.maskInput(value, maskedValue, input.selectionStart || 0);
+      }
+
+      this.currentSelection = [result.selection, result.selection];
+      this.triggerOnChange(result.value, event);
+      this.inputValue = undefined;
+    },
+    focusHandler: function focusHandler(event) {
+      if (!this.currentFocused) {
+        this.currentFocused = true;
+        this.$emit('focus', {
+          target: this,
+          event: event
+        });
+      }
+    },
+    blurHandler: function blurHandler(event) {
+      if (this.currentFocused) {
+        this.currentFocused = false;
+        this.$emit('blur', {
+          target: this,
+          event: event
+        });
+      }
+    },
+    triggerOnChange: function triggerOnChange(maskedValue, event) {
+      this.currentValue = maskedValue;
+      this.valueDuringOnChange = maskedValue;
+      this.$emit('change', {
+        event: event,
+        selectionStart: this.currentSelection[0],
+        selectionEnd: this.currentSelection[1],
+        value: this.computedValue(),
+        component: this,
+        target: {
+          name: this.$props.name,
+          value: this.computedValue(),
+          rawValue: this.rawValue()
+        },
+        validity: this.validity()
+      });
+      this.$emit('update:modelValue', this.computedValue());
+      this.$emit('update:modelRawValue', this.rawValue());
+      this.$emit('changemodel', this.computedValue());
+      this.valueDuringOnChange = undefined;
+    },
+    updateService: function updateService(extra) {
+      var config = Object.assign({
+        includeLiterals: this.$props.includeLiterals,
+        mask: this.$props.mask,
+        prompt: this.$props.prompt,
+        promptPlaceholder: this.$props.promptPlaceholder,
+        rules: this.$props.rules
+      }, extra); // tslint:disable-line:align
+
+      this.service.update(config);
+    },
+    setValidity: function setValidity() {
+      if (this.element) {
+        this.element.setCustomValidity(this.validity().valid ? '' : this.$props.validationMessage || '');
+      }
+    }
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var inputId = this.$props.id || this.inputId;
+    var _a = this.$props,
+        iconName = _a.iconName,
+        showValidationIcon = _a.showValidationIcon,
+        showLoadingIcon = _a.showLoadingIcon,
+        showClearButton = _a.showClearButton;
+    var isValid = !this.$props.validityStyles || this.validity().valid;
+    var newValue = this.computedValue();
+    var inputValue = this.inputValue;
+    var inputPrefixTemplate = templateRendering.call(this, this.$props.inputPrefix, getListeners.call(this));
+    var inputSuffixTemplate = templateRendering.call(this, this.$props.inputSuffix, getListeners.call(this));
+    var inputPrefix = getTemplate.call(this, {
+      h: h,
+      template: inputPrefixTemplate,
+      additionalProps: {
+        value: newValue,
+        valid: isValid
+      }
+    });
+    var inputSuffix = getTemplate.call(this, {
+      h: h,
+      template: inputSuffixTemplate,
+      additionalProps: {
+        value: newValue,
+        valid: isValid
+      }
+    });
+    var wrapper = h("span", {
+      dir: this.$props.dir,
+      attrs: this.v3 ? undefined : {
+        dir: this.$props.dir
+      },
+      "class": this.wrapperSpanClass,
+      style: !this.$props.label ? {
+        width: this.$props.width
+      } : undefined
+    }, [iconName && h("span", {
+      "class": "k-input-icon k-icon k-i-".concat(iconName)
+    }), this.$props.inputPrefix && h("span", {
+      "class": "k-input-prefix"
+    }, [inputPrefix]), h("input", {
+      type: this.$props.type,
+      attrs: this.v3 ? undefined : {
+        type: this.$props.type,
+        autocomplete: "off",
+        autocorrect: "off",
+        autocapitalize: "off",
+        spellcheck: false,
+        id: inputId,
+        "aria-labelledby": this.$props.ariaLabelledBy,
+        "aria-describedby": this.$props.ariaDescribedBy,
+        name: this.$props.name,
+        tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled, true),
+        accesskey: this.$props.accessKey,
+        title: this.$props.title,
+        disabled: this.$props.disabled || undefined,
+        readonly: this.$props.readonly || undefined,
+        placeholder: this.$props.placeholder,
+        required: this.$props.required
+      },
+      autocomplete: "off",
+      autocorrect: "off",
+      autocapitalize: "off",
+      spellcheck: false,
+      "class": this.inputInnerClass,
+      value: this.v3 ? newValue : null,
+      domProps: this.v3 ? undefined : {
+        "value": newValue
+      },
+      id: inputId,
+      "aria-labelledby": this.$props.ariaLabelledBy,
+      "aria-describedby": this.$props.ariaDescribedBy,
+      name: this.$props.name,
+      tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled, true),
+      accesskey: this.$props.accessKey,
+      title: this.$props.title,
+      disabled: this.$props.disabled || undefined,
+      readonly: this.$props.readonly || undefined,
+      placeholder: this.$props.placeholder,
+      required: this.$props.required,
+      ref: setRef(this, 'input'),
+      onInput: this.onChangeHandler,
+      on: this.v3 ? undefined : {
+        "input": this.onChangeHandler,
+        "paste": this.pasteHandler,
+        "focus": this.focusHandler,
+        "blur": this.blurHandler,
+        "dragstart": returnFalse,
+        "drop": returnFalse
+      },
+      onPaste: this.pasteHandler,
+      onFocus: this.focusHandler,
+      onBlur: this.blurHandler,
+      onDragstart: returnFalse,
+      onDrop: returnFalse
+    }), this.$props.inputSuffix && h("span", {
+      "class": "k-input-suffix"
+    }, [inputSuffix]), showValidationIcon && isValid && h("span", {
+      "class": "k-input-validation-icon k-icon k-i-check"
+    }), showValidationIcon && !isValid && h("span", {
+      "class": "k-input-validation-icon k-icon k-i-warning"
+    }), showLoadingIcon && h("span", {
+      "class": "k-input-loading-icon k-icon k-i-loading"
+    }), showClearButton && newValue && h("span", {
+      onClick: this.clearClick,
+      on: this.v3 ? undefined : {
+        "click": this.clearClick
+      },
+      "class": "k-clear-value"
+    }, [h("span", {
+      "class": "k-icon k-i-x"
+    })])]);
+    return this.$props.label ? h("span", {
+      "class": this.spanClassNames,
+      dir: this.$props.dir,
+      attrs: this.v3 ? undefined : {
+        dir: this.$props.dir
+      }
+    }, [wrapper, this.$props.label ? inputId ? h("label", {
+      "for": inputId,
+      attrs: this.v3 ? undefined : {
+        "for": inputId
+      },
+      "class": "k-label"
+    }, [this.$props.label]) : h("span", {
+      "class": "k-label"
+    }, [this.$props.label]) : null]) : wrapper;
+  }
+};
+/**
+ * @hidden
+ */
+
+var MaskedTextBox = MaskedTextBoxVue2;
+export { MaskedTextBox, MaskedTextBoxVue2 };