@progress/kendo-vue-inputs 2.7.3 → 3.0.0-dev.202201141128

package/dist/es/additionalTypes.ts

@@ -1,3 +1,9 @@
 // @ts-ignore
 import { DefineComponent } from 'vue';
-export { DefineComponent };
+// @ts-ignore
+import * as Vue from 'vue';
+// @ts-ignore
+type Vue2type = Vue.default;
+// @ts-ignore
+import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+export { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type };

package/dist/es/checkbox/Checkbox.d.ts

@@ -1,5 +1,4 @@
-import { DefineComponent } from '../additionalTypes';
-import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+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;
@@ -67,8 +66,8 @@ export interface CheckboxComputed {
 /**
  * @hidden
  */
-export interface CheckboxAll extends Vue, CheckboxMethods, CheckboxState, CheckboxData, CheckboxComputed {
+export interface CheckboxAll extends Vue2type, CheckboxMethods, CheckboxState, CheckboxData, CheckboxComputed {
 }
-declare let Checkbox: ComponentOptions<CheckboxAll, DefaultData<CheckboxData>, DefaultMethods<CheckboxAll>, CheckboxComputed, RecordPropsDefinition<CheckboxProps>>;
-declare const CheckboxVue3: DefineComponent<CheckboxProps, any, CheckboxData, CheckboxComputed, CheckboxMethods, {}, {}, {}, string, CheckboxProps, CheckboxProps, {}>;
-export { Checkbox, CheckboxVue3 };
+declare let CheckboxVue2: ComponentOptions<CheckboxAll, DefaultData<CheckboxData>, DefaultMethods<CheckboxAll>, CheckboxComputed, RecordPropsDefinition<CheckboxProps>>;
+declare const Checkbox: DefineComponent<CheckboxProps, any, CheckboxData, CheckboxComputed, CheckboxMethods, {}, {}, {}, string, CheckboxProps, CheckboxProps, {}>;
+export { Checkbox, CheckboxVue2 };

package/dist/es/checkbox/Checkbox.js

@@ -4,11 +4,11 @@ var allVue = Vue;
 var gh = allVue.h;
 var ref = allVue.ref;
 var inject = allVue.inject;
-import { Keys, classNames, guid, getTabIndex, getDefaultSlots, validatePackage, templateRendering, getTemplate, getListeners } from '@progress/kendo-vue-common';
+import { Keys, classNames, guid, getTabIndex, getDefaultSlots, validatePackage, templateRendering, getTemplate, getListeners, kendoThemeMaps } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, checkboxValidation, checkboxOptionalText } from './../messages';
-var Checkbox = {
+var CheckboxVue2 = {
   name: 'KendoCheckbox',
   // @ts-ignore
   emits: {
@@ -53,6 +53,20 @@ var Checkbox = {
     labelPlacement: String,
     labelOptional: Boolean,
     name: String,
+    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'].includes(value);
+      }
+    },
     tabIndex: Number,
     value: {
       type: [String, Boolean],
@@ -159,20 +173,24 @@ var Checkbox = {
     };
   },
   render: function render(createElement) {
+    var _a;
+
     var h = gh || createElement;
-    var _a = this.$props,
-        ariaDescribedBy = _a.ariaDescribedBy,
-        ariaLabelledBy = _a.ariaLabelledBy,
-        disabled = _a.disabled,
-        id = _a.id,
-        label = _a.label,
-        labelRender = _a.labelRender,
-        labelPlacement = _a.labelPlacement,
-        name = _a.name,
-        labelOptional = _a.labelOptional,
-        tabIndex = _a.tabIndex,
-        required = _a.required,
-        validityStyles = _a.validityStyles;
+    var _b = this.$props,
+        ariaDescribedBy = _b.ariaDescribedBy,
+        ariaLabelledBy = _b.ariaLabelledBy,
+        disabled = _b.disabled,
+        id = _b.id,
+        label = _b.label,
+        labelRender = _b.labelRender,
+        labelPlacement = _b.labelPlacement,
+        name = _b.name,
+        labelOptional = _b.labelOptional,
+        tabIndex = _b.tabIndex,
+        required = _b.required,
+        validityStyles = _b.validityStyles,
+        size = _b.size,
+        rounded = _b.rounded;
     var defaultSlot = getDefaultSlots(this);
     var renderedLabel = label;
     this.localizationService = provideLocalizationService(this);
@@ -181,11 +199,9 @@ var Checkbox = {
     var checkboxClasses = classNames({
       'k-state-disabled': disabled
     });
-    var inputClasses = classNames({
-      'k-checkbox': true,
-      'k-state-indeterminate': this.indeterminateProp,
-      'k-state-invalid k-invalid': !(this.isValid || validityStyles !== undefined || validityStyles === true)
-    });
+    var inputClasses = classNames((_a = {
+      'k-checkbox': true
+    }, _a["k-checkbox-" + kendoThemeMaps.sizeMap[size]] = size, _a["k-rounded-" + kendoThemeMaps.roundedMap[rounded]] = rounded, _a['k-state-indeterminate'] = this.indeterminateProp, _a['k-state-invalid k-invalid'] = !(this.isValid || validityStyles !== undefined || validityStyles === true), _a));
 
     var checkboxInput = function checkboxInput() {
       var _this = this;
@@ -348,5 +364,5 @@ var Checkbox = {
     }
   }
 };
-var CheckboxVue3 = Checkbox;
-export { Checkbox, CheckboxVue3 };
+var Checkbox = CheckboxVue2;
+export { Checkbox, CheckboxVue2 };

package/dist/es/checkbox/interfaces/CheckboxProps.d.ts

@@ -44,6 +44,30 @@ export interface CheckboxProps extends ToggleBaseProps, FormComponentProps {
      * Sets the `id` of the Checkbox.
      */
     id?: string;
+    /**
+     * Configures the `size` of the Checkbox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large' | string;
+    /**
+     * Configures the `rounded` style of the Checkbox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | string;
     /**
      * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
      * For example these elements could contain error or hint message.

package/dist/es/colors/ColorPalette.d.ts

@@ -1,5 +1,4 @@
-import { DefineComponent } from '../additionalTypes';
-import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+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;
@@ -24,6 +23,7 @@ export declare const DEFAULT_PRESET = "office";
 export interface ColorPaletteState {
     wrapper: HTMLDivElement | null;
     paletteService: ColorPaletteService;
+    guid: string;
 }
 /**
  * @hidden
@@ -48,8 +48,8 @@ export interface ColorPaletteData {
 /**
  * @hidden
  */
-export interface ColorPaletteAll extends Vue, ColorPaletteMethods, ColorPaletteData, ColorPaletteComputed, ColorPaletteState {
+export interface ColorPaletteAll extends Vue2type, ColorPaletteMethods, ColorPaletteData, ColorPaletteComputed, ColorPaletteState {
 }
-declare let ColorPalette: ComponentOptions<ColorPaletteAll, DefaultData<ColorPaletteData>, DefaultMethods<ColorPaletteAll>, ColorPaletteComputed, RecordPropsDefinition<ColorPaletteProps>>;
-declare const ColorPaletteVue3: DefineComponent<ColorPaletteProps, any, ColorPaletteData, ColorPaletteComputed, ColorPaletteMethods, {}, {}, {}, string, ColorPaletteProps, ColorPaletteProps, {}>;
-export { ColorPalette, ColorPaletteVue3 };
+declare let ColorPaletteVue2: ComponentOptions<ColorPaletteAll, DefaultData<ColorPaletteData>, DefaultMethods<ColorPaletteAll>, ColorPaletteComputed, RecordPropsDefinition<ColorPaletteProps>>;
+declare const ColorPalette: DefineComponent<ColorPaletteProps, any, ColorPaletteData, ColorPaletteComputed, ColorPaletteMethods, {}, {}, {}, string, ColorPaletteProps, ColorPaletteProps, {}>;
+export { ColorPalette, ColorPaletteVue2 };

package/dist/es/colors/ColorPalette.js

@@ -3,7 +3,7 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 import { ColorPaletteService } from './utils/color-palette.service';
-import { classNames, Keys, getTabIndex, validatePackage } from '@progress/kendo-vue-common';
+import { classNames, Keys, guid, getTabIndex, validatePackage } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
 import { PALETTEPRESETS } from './models/palette-presets';
 import { isPresent } from './utils/misc';
@@ -24,8 +24,15 @@ export var DEFAULT_COLUMNS_COUNT = 10;
 
 export var DEFAULT_PRESET = 'office'; // tslint:enable:max-line-length
 
-var ColorPalette = {
+var ColorPaletteVue2 = {
   name: 'KendoColorPalette',
+  // @ts-ignore
+  emits: {
+    'keydown': null,
+    'focus': null,
+    'blur': null,
+    'change': null
+  },
   props: {
     palette: {
       type: [String, Array],
@@ -46,6 +53,7 @@ var ColorPalette = {
   },
   created: function created() {
     validatePackage(packageMetadata);
+    this.guid = guid();
   },
   mounted: function mounted() {
     this.wrapper = this.v3 ? this.wrapperRef : this.$refs.wrapper;
@@ -336,5 +344,5 @@ var ColorPalette = {
     }
   }
 };
-var ColorPaletteVue3 = ColorPalette;
-export { ColorPalette, ColorPaletteVue3 };
+var ColorPalette = ColorPaletteVue2;
+export { ColorPalette, ColorPaletteVue2 };

package/dist/es/colors/ColorPicker.d.ts

@@ -1,5 +1,4 @@
-import { DefineComponent } from '../additionalTypes';
-import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+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;
@@ -45,8 +44,8 @@ export interface ColorPickerData {
 /**
  * @hidden
  */
-export interface ColorPickerAll extends Vue, ColorPickerMethods, ColorPickerData, ColorPickerComputed, ColorPickerState {
+export interface ColorPickerAll extends Vue2type, ColorPickerMethods, ColorPickerData, ColorPickerComputed, ColorPickerState {
 }
-declare let ColorPicker: ComponentOptions<ColorPickerAll, DefaultData<ColorPickerData>, DefaultMethods<ColorPickerAll>, ColorPickerComputed, RecordPropsDefinition<ColorPickerProps>>;
-declare const ColorPickerVue3: DefineComponent<ColorPickerProps, any, ColorPickerData, ColorPickerComputed, ColorPickerMethods, {}, {}, {}, string, ColorPickerProps, ColorPickerProps, {}>;
-export { ColorPicker, ColorPickerVue3 };
+declare let ColorPickerVue2: ComponentOptions<ColorPickerAll, DefaultData<ColorPickerData>, DefaultMethods<ColorPickerAll>, ColorPickerComputed, RecordPropsDefinition<ColorPickerProps>>;
+declare const ColorPicker: DefineComponent<ColorPickerProps, any, ColorPickerData, ColorPickerComputed, ColorPickerMethods, {}, {}, {}, string, ColorPickerProps, ColorPickerProps, {}>;
+export { ColorPicker, ColorPickerVue2 };

package/dist/es/colors/ColorPicker.js

@@ -2,9 +2,9 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+import { Button } from '@progress/kendo-vue-buttons';
 import { classNames, Keys, // useDir, 
-getTabIndex, guid } from '@progress/kendo-vue-common';
-import { validatePackage } from '@progress/kendo-vue-common';
+getTabIndex, guid, kendoThemeMaps, validatePackage } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
 import { Picker } from './Picker';
 import { ColorPalette, DEFAULT_PRESET, DEFAULT_TILE_SIZE } from './ColorPalette';
@@ -32,7 +32,7 @@ var isControlled = function isControlled(prop) {
 }; // tslint:enable:max-line-length
 
 
-var ColorPicker = {
+var ColorPickerVue2 = {
   name: 'KendoColorPicker',
   props: {
     value: {
@@ -78,7 +78,7 @@ var ColorPicker = {
       type: String,
       default: 'medium',
       validator: function validator(value) {
-        return [null, 'small', 'medium', 'large', 'pill'].includes(value);
+        return [null, 'small', 'medium', 'large', 'full'].includes(value);
       }
     },
     fillMode: {
@@ -114,19 +114,16 @@ var ColorPicker = {
       return this.$props.iconClassName || icon && "k-icon k-i-" + icon;
     },
     wrapperClassName: function wrapperClassName() {
-      return {
-        'k-widget': true,
-        'k-colorpicker': true,
-        'k-state-invalid': this.valid === false
-      };
-    },
-    spanClassName: function spanClassName() {
-      var disabled = this.$props.disabled;
-      return {
-        'k-picker-wrap': true,
-        'k-state-disabled': disabled,
-        'k-state-focused': this.focused
-      };
+      var _a;
+
+      var _b = this.$props,
+          size = _b.size,
+          fillMode = _b.fillMode,
+          rounded = _b.rounded;
+      return _a = {
+        'k-picker': true,
+        'k-colorpicker': true
+      }, _a["k-picker-" + (kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-picker-" + fillMode] = fillMode, _a["k-rounded-" + (kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-valid'] = this.valid, _a['k-invalid'] = !this.valid, _a['k-disabled'] = this.disabled, _a['k-focus'] = this.focused, _a;
     }
   },
   created: function created() {
@@ -153,27 +150,30 @@ var ColorPicker = {
   render: function render(createElement) {
     var _this2 = this;
 
+    var _a;
+
     var _this = this;
 
     var h = gh || createElement;
-    var _a = this.$props,
-        disabled = _a.disabled,
-        tabIndex = _a.tabIndex; // const dir = useDir(focusableElementGuid, props.dir);
+    var _b = this.$props,
+        disabled = _b.disabled,
+        tabIndex = _b.tabIndex,
+        dir = _b.dir; // const dir = useDir(focusableElementGuid, props.dir);
 
     return h("span", {
-      "class": this.wrapperClassName
-    }, [h("span", {
-      id: this.$props.id,
+      "class": this.wrapperClassName,
+      dir: dir,
       attrs: this.v3 ? undefined : {
+        dir: dir,
         id: this.$props.id,
         "aria-labelledby": this.$props.ariaLabelledBy,
         "aria-describedby": this.$props.ariaDescribedBy,
         tabIndex: getTabIndex(tabIndex, disabled),
         title: this.$props.title
       },
+      id: this.$props.id,
       "aria-labelledby": this.$props.ariaLabelledBy,
       "aria-describedby": this.$props.ariaDescribedBy,
-      "class": this.spanClassName,
       ref: this.focusableElementGuid,
       tabIndex: getTabIndex(tabIndex, disabled),
       title: this.$props.title,
@@ -185,47 +185,49 @@ var ColorPicker = {
       },
       onFocusin: this.onFocusHandler,
       onFocusout: this.onBlurHandler
-    }, [!this.computedIconClassName ? h("span", {
-      onClick: this.onActiveColorClickHandler,
-      on: this.v3 ? undefined : {
-        "click": this.onActiveColorClickHandler
-      },
-      "class": 'k-selected-color',
-      style: {
-        backgroundColor: this.computedValue
-      }
-    }, [!this.computedValue && h("span", {
-      "class": 'k-icon k-i-line'
-    })]) : h("span", {
+    }, [h("span", {
       onClick: this.onActiveColorClickHandler,
       on: this.v3 ? undefined : {
         "click": this.onActiveColorClickHandler
       },
-      "class": classNames('k-tool-icon', this.computedIconClassName)
+      "class": 'k-input-inner'
     }, [h("span", {
-      "class": 'k-selected-color',
+      "class": classNames('k-value-icon', 'k-color-preview', {
+        'k-no-color': !this.computedValue,
+        'k-icon-color-preview': this.icon || this.iconClassName
+      })
+    }, [(this.iconClassName || this.icon) && h("span", {
+      "class": classNames('k-color-preview-icon', this.iconClassName, (_a = {}, _a["k-icon k-i-" + this.icon] = this.icon && !this.iconClassName, _a))
+    }), h("span", {
+      "class": "k-color-preview-mask",
       style: {
         backgroundColor: this.computedValue
       }
-    })]), h("span", {
+    })])]), // @ts-ignore
+    h(Button, {
+      type: "button",
+      attrs: this.v3 ? undefined : {
+        type: "button",
+        icon: 'arrow-s'
+      },
+      ref: this.v3 ? function (el) {
+        _this.buttonRef = el;
+      } : 'button',
       onClick: this.onClickHandler,
       on: this.v3 ? undefined : {
         "click": this.onClickHandler
       },
-      "class": 'k-select',
-      ref: this.v3 ? function (el) {
-        _this.buttonRef = el;
-      } : 'button'
-    }, [h("span", {
-      "class": 'k-icon k-i-arrow-s'
-    })]), // @ts-ignore function children
-    h(Picker //  dir={dir}
-    , {
-      open: this.computedOpen,
+      "class": "k-input-button",
+      icon: 'arrow-s'
+    }), // @ts-ignore function children
+    h(Picker, {
+      dir: dir,
       attrs: this.v3 ? undefined : {
+        dir: dir,
         open: this.computedOpen,
         popupAnchor: this.focusableElementGuid
       },
+      open: this.computedOpen,
       onOpen: this.onOpenHandler,
       on: this.v3 ? undefined : {
         "open": this.onOpenHandler
@@ -238,7 +240,8 @@ var ColorPicker = {
         ,
         on: _this2.v3 ? undefined : {
           "keydown": _this2.onKeyDownHandler,
-          "change": _this2.onPaletteChangeHandler
+          "change": _this2.onPaletteChangeHandler,
+          "blur": _this2.onBlurHandler
         },
         ref: _this2.v3 ? function (el) {
           _this.paletteRef = el;
@@ -247,13 +250,15 @@ var ColorPicker = {
         attrs: _this2.v3 ? undefined : {
           value: _this2.computedValue || undefined
         },
-        onChange: _this2.onPaletteChangeHandler
+        onChange: _this2.onPaletteChangeHandler,
+        onBlur: _this2.onBlurHandler
       })];
     } : [h(ColorPalette, {
       onKeydown: _this2.onKeyDownHandler,
       on: _this2.v3 ? undefined : {
         "keydown": _this2.onKeyDownHandler,
-        "change": _this2.onPaletteChangeHandler
+        "change": _this2.onPaletteChangeHandler,
+        "blur": _this2.onBlurHandler
       },
       ref: _this2.v3 ? function (el) {
         _this.paletteRef = el;
@@ -262,8 +267,9 @@ var ColorPicker = {
       attrs: _this2.v3 ? undefined : {
         value: _this2.computedValue || undefined
       },
-      onChange: _this2.onPaletteChangeHandler
-    })])])]);
+      onChange: _this2.onPaletteChangeHandler,
+      onBlur: _this2.onBlurHandler
+    })])]);
   },
   methods: {
     focusElement: function focusElement() {
@@ -343,11 +349,13 @@ var ColorPicker = {
       });
     },
     onBlurTimeout: function onBlurTimeout() {
-      if (this.palette && document.activeElement !== this.palette.$el) {
+      var paleteIsFocused = this.palette && document.activeElement === this.palette.$el;
+
+      if (!paleteIsFocused) {
         this.setOpen(false, true);
-        this.focused = false;
       }
 
+      this.focused = paleteIsFocused;
       this.blurTimeoutRef = undefined;
     },
     onBlurHandler: function onBlurHandler(event) {
@@ -378,5 +386,5 @@ var ColorPicker = {
     }
   }
 };
-var ColorPickerVue3 = ColorPicker;
-export { ColorPicker, ColorPickerVue3 };
+var ColorPicker = ColorPickerVue2;
+export { ColorPicker, ColorPickerVue2 };

package/dist/es/colors/Picker.d.ts

@@ -1,5 +1,4 @@
-import { DefineComponent } from '../additionalTypes';
-import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+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;
@@ -34,8 +33,8 @@ export interface PickerData {
 /**
  * @hidden
  */
-export interface PickerAll extends Vue, PickerMethods, PickerData, PickerComputed, PickerState {
+export interface PickerAll extends Vue2type, PickerMethods, PickerData, PickerComputed, PickerState {
 }
-declare let Picker: ComponentOptions<PickerAll, DefaultData<PickerData>, DefaultMethods<PickerAll>, PickerComputed, RecordPropsDefinition<PickerProps>>;
-declare const PickerVue3: DefineComponent<PickerProps, any, PickerData, PickerComputed, PickerMethods, {}, {}, {}, string, PickerProps, PickerProps, {}>;
-export { Picker, PickerVue3 };
+declare let PickerVue2: ComponentOptions<PickerAll, DefaultData<PickerData>, DefaultMethods<PickerAll>, PickerComputed, RecordPropsDefinition<PickerProps>>;
+declare const Picker: DefineComponent<PickerProps, any, PickerData, PickerComputed, PickerMethods, {}, {}, {}, string, PickerProps, PickerProps, {}>;
+export { Picker, PickerVue2 };

package/dist/es/colors/Picker.js

@@ -15,7 +15,7 @@ var ANCHOR_VERTICAL_ALIGN = 'bottom';
 
 var POPUP_VERTICAL_ALIGN = 'top'; // tslint:enable:max-line-length
 
-var Picker = {
+var PickerVue2 = {
   name: 'KendoPicker',
   props: {
     popupSettings: Object,
@@ -90,5 +90,5 @@ var Picker = {
     }
   }
 };
-var PickerVue3 = Picker;
-export { Picker, PickerVue3 };
+var Picker = PickerVue2;
+export { Picker, PickerVue2 };

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

@@ -121,12 +121,12 @@ export interface ColorPickerProps {
      * - small
      * - medium
      * - large
-     * - pill
+     * - full
      * - null—Does not set a rounded `className`.
      *
      * @default `medium`
      */
-    rounded?: null | 'small' | 'medium' | 'large' | 'pill' | string;
+    rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
     /**
      * Configures the `fillMode` of the ColorPicker.
      *

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

@@ -1,6 +1,5 @@
-import { DefineComponent } from '../additionalTypes';
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
 import { FormComponentProps } from '@progress/kendo-vue-common';
-import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
 declare type DefaultData<V> = object | ((this: V) => InputData);
 declare type DefaultMethods<V> = {
     [key: string]: (this: V, ...args: any[]) => any;
@@ -19,6 +18,43 @@ export interface InputProps extends FormComponentProps {
     modelValue?: string | number;
     defaultValue?: string | string[] | number | undefined;
     validate?: boolean;
+    /**
+     * Configures the `size` of the MaskedTextBox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `class`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large' | string;
+    /**
+     * Configures the `roundness` of the MaskedTextBox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null&mdash;Does not set a rounded `class`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
+    /**
+     * Configures the `fillMode` of the MaskedTextBox.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - null&mdash;Does not set a fillMode `class`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'flat' | 'outline' | string;
     dir?: string;
     onChange?: Element;
     onFocus?: (event: any) => void;
@@ -55,7 +91,6 @@ export interface InputMethods {
     emitBlur?: (_: any) => void;
     emitFocus?: (_: any) => void;
     focus?: () => void;
-    inputClassNames: () => any;
     validity: () => any;
     isInvalid: (state: any) => any;
     setValidity: () => void;
@@ -71,12 +106,13 @@ export interface InputComputed {
     [key: string]: any;
     computedValue?: any;
     spanClassNames?: any;
+    inputWrapperClass?: any;
 }
 /**
  * @hidden
  */
-export interface InputAllMethods extends Vue, InputMethods, InputComputed, InputState {
+export interface InputAllMethods extends Vue2type, InputMethods, InputComputed, InputState {
 }
-declare let Input: ComponentOptions<InputAllMethods, DefaultData<InputData>, DefaultMethods<InputAllMethods>, InputComputed, RecordPropsDefinition<InputProps>>;
-declare const InputVue3: DefineComponent<InputProps, any, InputData, InputComputed, InputMethods, {}, {}, {}, string, InputProps, InputProps, {}>;
-export { Input, InputVue3 };
+declare let InputVue2: ComponentOptions<InputAllMethods, DefaultData<InputData>, DefaultMethods<InputAllMethods>, InputComputed, RecordPropsDefinition<InputProps>>;
+declare const Input: DefineComponent<InputProps, any, InputData, InputComputed, InputMethods, {}, {}, {}, string, InputProps, InputProps, {}>;
+export { Input, InputVue2 };