@progress/kendo-vue-inputs 3.3.4 → 3.3.5-dev.202206141337

package/dist/npm/colors/interfaces/ColorPickerBlurEvent.d.ts

@@ -1,6 +1,9 @@
 /**
  * The arguments for the `onBlur` ColorPicker event.
  */
+/**
+ * @hidden
+ */
 export interface ColorPickerBlurEvent {
     /**
      * A native DOM event.

package/dist/npm/colors/interfaces/ColorPickerChangeEvent.d.ts

@@ -1,6 +1,9 @@
 /**
  * The arguments for the `onChange` ColorPicker event.
  */
+/**
+ * @hidden
+ */
 export interface ColorPickerChangeEvent {
     /**
      * The current value of the ColorPicker.

package/dist/npm/colors/interfaces/ColorPickerFocusEvent.d.ts

@@ -1,6 +1,9 @@
 /**
  * The arguments for the `onFocus` ColorPicker event.
  */
+/**
+ * @hidden
+ */
 export interface ColorPickerFocusEvent {
     /**
      * A native DOM event.

package/dist/npm/colors/interfaces/ColorPickerPaletteSettings.d.ts

@@ -3,6 +3,9 @@ import { TileSize } from '../models/tile-size';
  * The settings of the ColorPalette that is nested inside the popup of the ColorPicker
  * ([see example]({% slug customizecolorpicker_colorpicker %}#toc-customizing-the-palette-popup)).
  */
+/**
+ * @hidden
+ */
 export interface ColorPickerPaletteSettings {
     /**
      * Specifies the set of colors.

package/dist/npm/colors/interfaces/ColorPickerPopupSettings.d.ts

@@ -2,6 +2,9 @@ import { PopupAnimation } from '@progress/kendo-vue-popup';
 /**
  * The settings of the popup container of the ColorPicker.
  */
+/**
+ * @hidden
+ */
 export interface ColorPickerPopupSettings {
     /**
      * Controls the popup animation. By default, the open and close animations are enabled.

package/dist/npm/colors/interfaces/ColorPickerProps.d.ts

@@ -6,7 +6,10 @@ import { ColorPickerPopupSettings } from './ColorPickerPopupSettings';
 import { ColorPickerPaletteSettings } from './ColorPickerPaletteSettings';
 import { ColorPickerView } from './ColorPickerView';
 /**
- * Represents the props of the [KendoReact ColorPicker component]({% slug overview_colorpicker %}).
+ * Represents the props of the [Kendo UI for Vue ColorPicker component]({% slug overview_colorpicker %}).
+ */
+/**
+ * @hidden
  */
 export interface ColorPickerProps {
     /**
@@ -49,7 +52,7 @@ export interface ColorPickerProps {
      */
     dir?: string;
     /**
-     * Defines the name of an [existing icon in the KendoReact theme]({% slug icons %}).
+     * Defines the name of an [existing icon in the Kendo UI for Vue theme]({% slug icons %}).
      * You have to provide only the name of the icon without the `k-icon` or the `k-i-` prefixes.
      * For example, `edit-tools` will be parsed to `k-icon k-i-edit-tools`
      * ([see example]({% slug customizecolorpicker_colorpicker %}#toc-displaying-kendo-ui-icons)).

package/dist/npm/colors/interfaces/ColorPickerView.d.ts

@@ -7,4 +7,7 @@
  * * `gradient`
  * * `combo`
  */
+/**
+ * @hidden
+ */
 export declare type ColorPickerView = 'gradient' | 'palette' | 'combo';

package/dist/npm/input/Input.d.ts

@@ -5,7 +5,7 @@ declare type DefaultMethods<V> = {
     [key: string]: (this: V, ...args: any[]) => any;
 };
 /**
- * Represents the props of the [KendoVue Input component]({% slug overview_textbox_native %}).
+ * Represents the props of the [KendoVue Input component]({% slug overview_textbox %}).
  * Extends the [native input props](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement).
  */
 export interface InputProps extends FormComponentProps {
@@ -92,31 +92,35 @@ export interface InputProps extends FormComponentProps {
     /**
      * Defines a string prop that controls the input icon.
      */
-    iconName: String;
+    iconName?: String;
     /**
      * Defines if the inputPrefix will be shown. Accepts a slot name, a `render` function, or a Vue component.
      */
-    inputPrefix: Boolean | String | Object | Function;
+    inputPrefix?: Boolean | String | Object | Function;
     /**
      * Defines if the inputSuffix will be shown. Accepts a slot name, a `render` function, or a Vue component.
      */
-    inputSuffix: Boolean | String | Object | Function;
+    inputSuffix?: Boolean | String | Object | Function;
     /**
      * Defines a boolean prop that controls whether to show the validation icon. Defaults to 'false'.
      */
-    showValidationIcon: Boolean;
+    showValidationIcon?: Boolean;
     /**
      * Defines a boolean prop that controls whether to show the loading icon. Defaults to 'false'.
      */
-    showLoadingIcon: Boolean;
+    showLoadingIcon?: Boolean;
     /**
      * Defines a boolean prop that controls whether to show the clear icon. Defaults to 'false'.
      */
-    showClearButton: Boolean;
+    showClearButton?: Boolean;
     /**
-     * Defines additional class to the inner input element.
+     * Defines additional class to the wrapper element.
      */
-    inputClass: String;
+    wrapperClass?: String;
+    /**
+     * Defines additional class to the input element.
+     */
+    inputClass?: String;
 }
 /**
  * @hidden
@@ -170,6 +174,12 @@ export interface InputComputed {
  */
 export interface InputAllMethods extends Vue2type, InputMethods, InputComputed, InputState {
 }
+/**
+ * @hidden
+ */
 declare let InputVue2: ComponentOptions<InputAllMethods, DefaultData<InputData>, DefaultMethods<InputAllMethods>, InputComputed, RecordPropsDefinition<InputProps>>;
+/**
+ * @hidden
+ */
 declare const Input: DefineComponent<InputProps, any, InputData, InputComputed, InputMethods, {}, {}, {}, string, InputProps, InputProps, {}>;
 export { Input, InputVue2 };

package/dist/npm/input/Input.js

@@ -32,6 +32,10 @@ var kendo_vue_common_1 = require("@progress/kendo-vue-common");
 var package_metadata_1 = require("../package-metadata");
 
 var kendo_vue_labels_1 = require("@progress/kendo-vue-labels");
+/**
+ * @hidden
+ */
+
 
 var InputVue2 = {
   model: {
@@ -117,7 +121,8 @@ var InputVue2 = {
     showValidationIcon: Boolean,
     showLoadingIcon: Boolean,
     showClearButton: Boolean,
-    inputClass: String
+    inputClass: String,
+    wrapperClass: String
   },
   data: function data() {
     return {
@@ -179,7 +184,7 @@ var InputVue2 = {
       id: inputId,
       required: required,
       value: this.computedValue,
-      class: 'k-input-inner',
+      class: this.inputInnerClass,
       ref: this.v3 ? function (el) {
         _this.inputRef = el;
       } : 'input',
@@ -387,7 +392,7 @@ var InputVue2 = {
       return _a = {
         'k-textbox': true,
         'k-input': true
-      }, _a["k-input-" + (kendo_vue_common_1.kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-input-" + fillMode] = fillMode, _a["k-rounded-" + (kendo_vue_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-invalid'] = !isValid, _a['k-required'] = this.required, _a['k-disabled'] = this.$props.disabled, _a[this.inputClass] = this.inputClass, _a;
+      }, _a["k-input-" + (kendo_vue_common_1.kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-input-" + fillMode] = fillMode, _a["k-rounded-" + (kendo_vue_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-invalid'] = !isValid, _a['k-required'] = this.required, _a['k-disabled'] = this.$props.disabled, _a[this.wrapperClass] = this.wrapperClass, _a;
     }
   },
   computed: {
@@ -404,6 +409,13 @@ var InputVue2 = {
         };
       }
     },
+    inputInnerClass: function inputInnerClass() {
+      var _a;
+
+      return _a = {
+        'k-input-inner': true
+      }, _a[this.inputClass] = this.inputClass, _a;
+    },
     computedValue: {
       get: function get() {
         return this.$data.valueDuringOnChange !== undefined ? this.$data.valueDuringOnChange : this.$props.value !== undefined ? this.$props.value : this.$props.modelValue !== undefined ? this.$props.modelValue : this.$data.currentValue;
@@ -412,5 +424,9 @@ var InputVue2 = {
   }
 };
 exports.InputVue2 = InputVue2;
+/**
+ * @hidden
+ */
+
 var Input = InputVue2;
 exports.Input = Input;

package/dist/npm/input-separator/InputSeparator.d.ts

@@ -0,0 +1,19 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+/**
+ * @hidden
+ */
+export interface InputSeparatorAllMethods extends Vue2type {
+}
+/**
+ * @hidden
+ */
+declare let InputSeparatorVue2: ComponentOptions<InputSeparatorAllMethods, DefaultData<{}>, DefaultMethods<InputSeparatorAllMethods>, {}, RecordPropsDefinition<{}>>;
+/**
+ * @hidden
+ */
+declare const InputSeparator: DefineComponent<{}, any, {}, {}, {}, {}, {}, {}, string, {}, {}, {}>;
+export { InputSeparator, InputSeparatorVue2 };

package/dist/npm/input-separator/InputSeparator.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InputSeparatorVue2 = exports.InputSeparator = void 0; // @ts-ignore
+
+var kendo_licensing_1 = require("@progress/kendo-licensing");
+
+var Vue = require("vue");
+
+var allVue = Vue;
+var gh = allVue.h;
+var ref = allVue.ref;
+
+var package_metadata_1 = require("../package-metadata");
+/**
+ * @hidden
+ */
+
+
+var InputSeparatorVue2 = {
+  created: function created() {
+    kendo_licensing_1.validatePackage(package_metadata_1.packageMetadata);
+  },
+  // @ts-ignore
+  setup: !gh ? undefined : function () {
+    var v3 = !!gh;
+    return {
+      v3: v3
+    };
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    return h("span", {
+      "class": 'k-input-separator'
+    });
+  }
+};
+exports.InputSeparatorVue2 = InputSeparatorVue2;
+/**
+ * @hidden
+ */
+
+var InputSeparator = InputSeparatorVue2;
+exports.InputSeparator = InputSeparator;

package/dist/npm/main.d.ts

@@ -11,6 +11,7 @@ export * from './colors/interfaces/ColorPickerPaletteSettings';
 export * from './colors/interfaces/ColorPickerPopupSettings';
 export * from './colors/interfaces/ColorPickerProps';
 export { Switch, SwitchVue2, SwitchProps, SwitchState, SwitchChangeEvent } from './switch/Switch';
+export * from './input-separator/InputSeparator';
 export * from './input/Input';
 export * from './numerictextbox/NumericTextBox';
 export * from './maskedtextbox/MaskedTextBox';

package/dist/npm/main.js

@@ -24,6 +24,7 @@ __exportStar(require("./colors/interfaces/ColorPickerProps"), exports);
 var Switch_1 = require("./switch/Switch");
 Object.defineProperty(exports, "Switch", { enumerable: true, get: function () { return Switch_1.Switch; } });
 Object.defineProperty(exports, "SwitchVue2", { enumerable: true, get: function () { return Switch_1.SwitchVue2; } });
+__exportStar(require("./input-separator/InputSeparator"), exports);
 __exportStar(require("./input/Input"), exports);
 __exportStar(require("./numerictextbox/NumericTextBox"), exports);
 __exportStar(require("./maskedtextbox/MaskedTextBox"), exports);

package/dist/npm/maskedtextbox/MaskedTextBox.d.ts

@@ -66,8 +66,11 @@ export interface MaskedTextBoxComputed {
 export interface MaskedTextBoxAll extends MaskedTextBoxMethods, MaskedTextBoxState, MaskedTextBoxData, MaskedTextBoxComputed {
 }
 /**
- * Represents the default `MaskedTextBox` component.
+ * @hidden
  */
 declare let MaskedTextBoxVue2: ComponentOptions<Vue2type, DefaultData<MaskedTextBoxData>, DefaultMethods<MaskedTextBoxAll>, MaskedTextBoxComputed, RecordPropsDefinition<MaskedTextBoxProps>>;
+/**
+ * @hidden
+ */
 declare const MaskedTextBox: DefineComponent<MaskedTextBoxProps, any, MaskedTextBoxData, MaskedTextBoxComputed, MaskedTextBoxMethods, {}, {}, {}, string, MaskedTextBoxProps, MaskedTextBoxProps, {}>;
 export { MaskedTextBox, MaskedTextBoxVue2 };

package/dist/npm/maskedtextbox/MaskedTextBox.js

@@ -19,7 +19,7 @@ var kendo_vue_common_1 = require("@progress/kendo-vue-common");
 
 var package_metadata_1 = require("../package-metadata");
 /**
- * Represents the default `MaskedTextBox` component.
+ * @hidden
  */
 
 
@@ -105,7 +105,15 @@ var MaskedTextBoxVue2 = {
     validityStyles: {
       type: Boolean,
       default: true
-    }
+    },
+    iconName: String,
+    inputPrefix: kendo_vue_common_1.templateDefinition,
+    inputSuffix: kendo_vue_common_1.templateDefinition,
+    showValidationIcon: Boolean,
+    showLoadingIcon: Boolean,
+    showClearButton: Boolean,
+    inputClass: String,
+    wrapperClass: String
   },
   data: function data() {
     return {
@@ -203,15 +211,38 @@ var MaskedTextBoxVue2 = {
     },
     spanClassNames: {
       get: function get() {
+        var _a;
+
         var isValid = !this.hasMounted || !this.$props.validityStyles || this.validity().valid;
-        return {
+        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-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-" + (kendo_vue_common_1.kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-input-" + fillMode] = fillMode, _a["k-rounded-" + (kendo_vue_common_1.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: {
@@ -263,6 +294,9 @@ var MaskedTextBoxVue2 = {
       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;
@@ -350,29 +384,50 @@ var MaskedTextBoxVue2 = {
   },
   // @ts-ignore
   render: function render(createElement) {
-    var _a;
-
     var _this = this;
 
     var h = gh || createElement;
     var inputId = this.$props.id || this.inputId;
-    var _b = this.$props,
-        size = _b.size,
-        fillMode = _b.fillMode,
-        rounded = _b.rounded;
-    var isValid = !this.hasMounted || !this.$props.validityStyles || this.validity().valid;
+    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 component = h("span", {
+    var inputPrefixTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.inputPrefix, kendo_vue_common_1.getListeners.call(this));
+    var inputSuffixTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.inputSuffix, kendo_vue_common_1.getListeners.call(this));
+    var inputPrefix = kendo_vue_common_1.getTemplate.call(this, {
+      h: h,
+      template: inputPrefixTemplate,
+      additionalProps: {
+        value: newValue,
+        valid: isValid
+      }
+    });
+    var inputSuffix = kendo_vue_common_1.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": kendo_vue_common_1.classNames('k-maskedtextbox k-input', (_a = {}, _a["k-input-" + (kendo_vue_common_1.kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-input-" + fillMode] = fillMode, _a["k-rounded-" + (kendo_vue_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-invalid'] = !isValid, _a['k-required'] = this.required, _a['k-disabled'] = this.$props.disabled, _a)),
+      "class": this.wrapperSpanClass,
       style: !this.$props.label ? {
         width: this.$props.width
       } : undefined
-    }, [h("input", {
+    }, [iconName && h("span", {
+      "class": "k-input-icon k-icon k-i-" + 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,
@@ -396,7 +451,7 @@ var MaskedTextBoxVue2 = {
       autoCorrect: "off",
       autoCapitalize: "off",
       spellCheck: false,
-      "class": "k-input-inner",
+      "class": this.inputInnerClass,
       value: this.v3 ? newValue : null,
       domProps: this.v3 ? undefined : {
         "value": newValue
@@ -429,14 +484,30 @@ var MaskedTextBoxVue2 = {
       onBlur: this.blurHandler,
       onDragStart: utils_1.returnFalse,
       onDrop: utils_1.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
       }
-    }, [component, this.$props.label ? inputId ? h("label", {
+    }, [wrapper, this.$props.label ? inputId ? h("label", {
       "for": inputId,
       attrs: this.v3 ? undefined : {
         "for": inputId
@@ -444,9 +515,13 @@ var MaskedTextBoxVue2 = {
       "class": "k-label"
     }, [this.$props.label]) : h("span", {
       "class": "k-label"
-    }, [this.$props.label]) : null]) : component;
+    }, [this.$props.label]) : null]) : wrapper;
   }
 };
 exports.MaskedTextBoxVue2 = MaskedTextBoxVue2;
+/**
+ * @hidden
+ */
+
 var MaskedTextBox = MaskedTextBoxVue2;
 exports.MaskedTextBox = MaskedTextBox;

package/dist/npm/maskedtextbox/MaskedTextBoxProps.d.ts

@@ -184,4 +184,36 @@ export interface MaskedTextBoxProps extends FormComponentProps {
      * The type of the input - 'text' by default
      */
     type?: string;
+    /**
+     * Defines a string prop that controls the input icon.
+     */
+    iconName?: String;
+    /**
+     * Defines if the inputPrefix will be shown. Accepts a slot name, a `render` function, or a Vue component.
+     */
+    inputPrefix?: Boolean | String | Object | Function;
+    /**
+     * Defines if the inputSuffix will be shown. Accepts a slot name, a `render` function, or a Vue component.
+     */
+    inputSuffix?: Boolean | String | Object | Function;
+    /**
+     * Defines a boolean prop that controls whether to show the validation icon. Defaults to 'false'.
+     */
+    showValidationIcon?: Boolean;
+    /**
+     * Defines a boolean prop that controls whether to show the loading icon. Defaults to 'false'.
+     */
+    showLoadingIcon?: Boolean;
+    /**
+     * Defines a boolean prop that controls whether to show the clear icon. Defaults to 'false'.
+     */
+    showClearButton?: Boolean;
+    /**
+     * Defines additional class to the inner input element.
+     */
+    inputClass?: String;
+    /**
+     * Defines additional class to the wrapper element.
+     */
+    wrapperClass?: String;
 }

package/dist/npm/numerictextbox/NumericTextBox.d.ts

@@ -72,6 +72,12 @@ export interface NumericTextBoxComputed {
  */
 export interface NumericTextBoxAll extends Vue2type, NumericTextBoxMethods, NumericTextBoxComputed, NumericTextBoxState {
 }
+/**
+ * @hidden
+ */
 declare let NumericTextBoxVue2: ComponentOptions<NumericTextBoxAll, DefaultData<NumericTextBoxData>, DefaultMethods<NumericTextBoxAll>, NumericTextBoxComputed, RecordPropsDefinition<NumericTextBoxProps>>;
+/**
+ * @hidden
+ */
 declare const NumericTextBox: DefineComponent<NumericTextBoxProps, any, NumericTextBoxData, NumericTextBoxComputed, NumericTextBoxMethods, {}, {}, {}, string, NumericTextBoxProps, NumericTextBoxProps, {}>;
 export { NumericTextBox, NumericTextBoxVue2 };