@progress/kendo-vue-inputs 3.4.4 → 3.4.5

package/dist/es/colors/Picker.js

@@ -25,7 +25,8 @@ var PickerVue2 = {
     popupSettings: Object,
     dir: String,
     open: Boolean,
-    popupAnchor: String
+    popupAnchor: String,
+    id: String
   },
   computed: {
     horizontalAlign: function horizontalAlign() {
@@ -55,21 +56,25 @@ var PickerVue2 = {
   render: function render(createElement) {
     var h = gh || createElement;
     var defaultSlot = getDefaultSlots(this);
-    var popupSettings = this.$props.popupSettings || {};
+    var _a = this.$props.popupSettings,
+        popupClass = _a.popupClass,
+        appendTo = _a.appendTo,
+        animate = _a.animate,
+        className = _a.className;
     return (// @ts-ignore function children
-      h(Popup // style={{
-      //           ...(popupSettings || {}).style,
-      //           direction: this.$props.dir as any
-      //       }}
-      //       {...popupSettings}
-      , {
-        anchor: this.$props.popupAnchor,
+      h(Popup, {
+        id: this.id,
         attrs: this.v3 ? undefined : {
+          id: this.id,
           anchor: this.$props.popupAnchor,
           anchorAlign: this.anchorAlign,
           popupAlign: this.popupAlign,
-          show: this.$props.open
+          show: this.$props.open,
+          appendTo: appendTo,
+          animate: animate,
+          popupClass: popupClass
         },
+        anchor: this.$props.popupAnchor,
         anchorAlign: this.anchorAlign,
         popupAlign: this.popupAlign,
         show: this.$props.open,
@@ -79,7 +84,10 @@ var PickerVue2 = {
           "close": this.onClose
         },
         onClose: this.onClose,
-        "class": classNames('k-reset', popupSettings.className)
+        appendTo: appendTo,
+        animate: animate,
+        popupClass: popupClass,
+        "class": classNames('k-reset', className)
       }, this.v3 ? function () {
         return [defaultSlot];
       } : [defaultSlot])

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

@@ -6,4 +6,8 @@ export interface ColorGradientChangeEvent {
      * The current value of the ColorGradient.
      */
     value: string;
+    /**
+     * The current value of the ColorGradient in RGBA format.
+     */
+    rgbaValue: string;
 }

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

@@ -3,6 +3,14 @@ import { ColorGradientChangeEvent } from './ColorGradientChangeEvent';
  * Represents the props of the [KendoReact ColorGradient component]({% slug overview_colorgradient %}).
  */
 export interface ColorGradientProps {
+    /**
+     * The model value of the ColorGradient.
+     */
+    modelValue?: string;
+    /**
+     * The model rgba value of the ColorGradient.
+     */
+    modelRgbaValue?: string;
     /**
      * The default value of the ColorGradient.
      */
@@ -40,6 +48,10 @@ export interface ColorGradientProps {
      * Sets the `tabIndex` property of the ColorGradient.
      */
     tabIndex?: number;
+    /**
+     * Sets tabindex of the inner components of the ColorGradient.
+     */
+    innerTabIndex?: number;
     /**
      * Specifies the id of the component.
      */

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

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

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

@@ -3,9 +3,6 @@ import { ColorPaletteChangeEvent } from './ColorPaletteChangeEvent';
 /**
  * Represents the props of the [KendoVue ColorPalette component]({% slug overview_colorpalette %}).
  */
-/**
- * @hidden
- */
 export interface ColorPaletteProps {
     /**
      * The color palette that will be displayed.
@@ -33,6 +30,14 @@ export interface ColorPaletteProps {
      * The value of the ColorPalette.
      */
     value?: string;
+    /**
+     * The model value of the ColorPalette.
+     */
+    modelValue?: string;
+    /**
+     * The model rgba value of the ColorPalette.
+     */
+    modelRgbaValue?: string;
     /**
      * Determines whether the ColorPalette is disabled
      * ([more information and example]({% slug disabled_colorpalette %})).

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

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

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

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

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

@@ -1,14 +1,15 @@
 /**
  * The arguments for the `onChange` ColorPicker event.
  */
-/**
- * @hidden
- */
 export interface ColorPickerChangeEvent {
     /**
      * The current value of the ColorPicker.
      */
     value: string;
+    /**
+     * The current value of the ColorPicker in RGBA format.
+     */
+    rgbaValue: string;
     /**
      * A native DOM event.
      */

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

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

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

@@ -3,9 +3,6 @@ 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/es/colors/interfaces/ColorPickerPopupSettings.d.ts

@@ -2,9 +2,6 @@ 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/es/colors/interfaces/ColorPickerProps.d.ts

@@ -6,12 +6,10 @@ import { ColorPickerPopupSettings } from './ColorPickerPopupSettings';
 import { ColorPickerPaletteSettings } from './ColorPickerPaletteSettings';
 import { ColorPickerView } from './ColorPickerView';
 import { ColorGradientProps } from './ColorGradientProps';
+import { FlatColorPickerProps } from '../FlatColorPicker';
 /**
  * Represents the props of the [Kendo UI for Vue ColorPicker component]({% slug overview_colorpicker %}).
  */
-/**
- * @hidden
- */
 export interface ColorPickerProps {
     /**
      * The default value of the ColorPicker
@@ -19,7 +17,15 @@ export interface ColorPickerProps {
      */
     defaultValue?: string;
     /**
-     * Specifies the value of the ColorPicker. Currently, only the RGBA format is supported.
+     * Specifies the model value of the ColorPicker.
+     */
+    modelValue?: string;
+    /**
+     * The model rgba value of the ColorPicker.
+     */
+    modelRgbaValue?: string;
+    /**
+     * Specifies the value of the ColorPicker.
      */
     value?: string;
     /**
@@ -43,6 +49,10 @@ export interface ColorPickerProps {
      * Sets the `title` property of the ColorPicker.
      */
     title?: string;
+    /**
+     * Sets the ColorPicker selected view index. The default is `0`.
+     */
+    selectedView?: number;
     /**
      * Sets the view which the ColorPicker will render in the popup
      * ([see example]({% slug combinedview_colorpicker %})).
@@ -52,6 +62,18 @@ export interface ColorPickerProps {
      * Represents the `dir` HTML attribute.
      */
     dir?: string;
+    /**
+     * Specifies whether clear button will be rendered in the header.
+     */
+    showClearButton?: boolean;
+    /**
+     * Specifies whether preview and revert color boxes will be rendered in the header.
+     */
+    showPreview?: boolean;
+    /**
+     * Specifies whether action buttons will be rendered in the footer.
+     */
+    showButtons?: boolean;
     /**
      * 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.
@@ -73,6 +95,10 @@ export interface ColorPickerProps {
      * Configures the ColorGradient that is displayed in the ColorPicker popup.
      */
     gradientSettings?: ColorGradientProps;
+    /**
+     * Configures the FlatColorPicker that is displayed in the ColorPicker popup.
+     */
+    flatColorPickerSettings?: FlatColorPickerProps;
     /**
      * Configures the popup of the ColorPicker.
      */

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

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

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

@@ -0,0 +1,13 @@
+/**
+ * The arguments for the `onChange` ColorPicker event.
+ */
+export interface FlatColorPickerViewChangeEvent {
+    /**
+     * The current value of the ColorPicker.
+     */
+    value: string;
+    /**
+     * The viewType of the selected view.
+     */
+    viewType: 'gradient' | 'palette';
+}

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

@@ -31,6 +31,10 @@ export interface PickerProps {
      * Specifies the element which will be used as an anchor for the popup. The popup opens next to that element.
      */
     popupAnchor?: String;
+    /**
+     * Specifies the id for the popup.
+     */
+    id?: String;
     /**
      * @hidden
      */

package/dist/es/colors/utils/color-cache.d.ts

@@ -1,5 +1,18 @@
 import { HSVA } from '../models/hsva';
 import { RGBA } from '../models/rgba';
+/**
+ * @hidden
+ */
+export declare const DEFAULT_GRADIENT_SETTINGS: {
+    opacity: boolean;
+};
+/**
+ * @hidden
+ */
+export declare const DEFAULT_PALETTE_SETTINGS: {
+    palette: string;
+    tileSize: number;
+};
 /**
  * @hidden
  */

package/dist/es/colors/utils/color-cache.js

@@ -1,4 +1,18 @@
+import { DEFAULT_PRESET, DEFAULT_TILE_SIZE } from '../ColorPalette';
 var cache = {};
+/**
+ * @hidden
+ */
+export var DEFAULT_GRADIENT_SETTINGS = {
+    opacity: true
+};
+/**
+ * @hidden
+ */
+export var DEFAULT_PALETTE_SETTINGS = {
+    palette: DEFAULT_PRESET,
+    tileSize: DEFAULT_TILE_SIZE
+};
 /**
  * @hidden
  */

package/dist/es/colors/utils/color-parser.d.ts

@@ -7,7 +7,13 @@ import { RGBA } from '../models/rgba';
  *
  * Returns the hex or RGBA string representation of the color.
  */
-export declare const parseColor: (value: string, format: OutputFormat, safe?: boolean) => string | undefined;
+export declare const parseColor: (value: string, format: OutputFormat, opacityEnabled?: boolean, safe?: boolean) => string | undefined;
+/**
+ * @hidden
+ *
+ * Returns the HEX value.
+ */
+export declare const getHexValue: (color: any, opacity: boolean) => string;
 /**
  * @hidden
  *

package/dist/es/colors/utils/color-parser.js

@@ -5,7 +5,8 @@ import { isPresent, fitIntoBounds } from './misc';
  *
  * Returns the hex or RGBA string representation of the color.
  */
-export var parseColor = function (value, format, safe) {
+export var parseColor = function (value, format, opacityEnabled, safe) {
+    if (opacityEnabled === void 0) { opacityEnabled = false; }
     if (safe === void 0) { safe = true; }
     var allowedFormats = ['hex', 'rgba']; // TODO: constant?
     // Angular supports third type: name : const allowedFormats: Array<string> = ['hex', 'rgba', 'name'];
@@ -19,7 +20,15 @@ export var parseColor = function (value, format, safe) {
     if (!isPresent(parsedColor)) {
         return;
     }
-    return format === 'hex' ? parsedColor.toCss() : parsedColor.toCssRgba();
+    return format === 'hex' ? getHexValue(parsedColor, opacityEnabled) : parsedColor.toCssRgba();
+};
+/**
+ * @hidden
+ *
+ * Returns the HEX value.
+ */
+export var getHexValue = function (color, opacity) {
+    return opacity && color.a < 1 ? color.toCss({ alpha: true }) : color.toCss();
 };
 /**
  * @hidden

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

@@ -117,6 +117,10 @@ export interface InputProps extends FormComponentProps {
      * Defines additional class to the wrapper element.
      */
     wrapperClass?: String;
+    /**
+     * Defines tabindex to the input element.
+     */
+    tabIndex?: Number;
     /**
      * Defines additional class to the input element.
      */

package/dist/es/input/Input.js

@@ -112,7 +112,8 @@ var InputVue2 = {
     showLoadingIcon: Boolean,
     showClearButton: Boolean,
     inputClass: String,
-    wrapperClass: String
+    wrapperClass: String,
+    tabIndex: Number
   },
   data: function data() {
     return {
@@ -159,7 +160,8 @@ var InputVue2 = {
         iconName = _a.iconName,
         showValidationIcon = _a.showValidationIcon,
         showLoadingIcon = _a.showLoadingIcon,
-        showClearButton = _a.showClearButton;
+        showClearButton = _a.showClearButton,
+        tabIndex = _a.tabIndex;
     var inputId = id || this._inputId;
     var textbox = h('input', __assign(__assign({
       domProps: this.v3 ? null : __assign(__assign({}, this.$attrs), {
@@ -168,10 +170,13 @@ var InputVue2 = {
         required: required,
         value: this.computedValue
       }),
-      attrs: this.v3 ? undefined : this.$attrs
+      attrs: this.v3 ? undefined : __assign(__assign({}, this.$attrs), {
+        tabindex: tabIndex
+      })
     }, this.$attrs), {
       placeholder: this.$props.placeholder,
       id: inputId,
+      tabindex: tabIndex,
       required: required,
       value: this.computedValue,
       class: this.inputInnerClass,

package/dist/es/messages/index.d.ts

@@ -18,6 +18,10 @@ export declare const sliderDecreaseValue = "slider.decrement";
  * @hidden
  */
 export declare const sliderDragTitle = "slider.dragTitle";
+/**
+ * @hidden
+ */
+export declare const colorGradientDragHandle = "colorGradient.dragHandle";
 /**
  * @hidden
  */
@@ -38,6 +42,26 @@ export declare const colorGradientA = "colorGradient.a";
  * @hidden
  */
 export declare const colorGradientHex = "colorGradient.hex";
+/**
+ * @hidden
+ */
+export declare const colorGradientInputColorButton = "colorGradient.inputColorButton";
+/**
+ * @hidden
+ */
+export declare const colorGradientRLabel = "colorGradient.rLabel";
+/**
+ * @hidden
+ */
+export declare const colorGradientGLabel = "colorGradient.gLabel";
+/**
+ * @hidden
+ */
+export declare const colorGradientBLabel = "colorGradient.bLabel";
+/**
+ * @hidden
+ */
+export declare const colorGradientALabel = "colorGradient.aLabel";
 /**
  * @hidden
  */
@@ -66,6 +90,18 @@ export declare const flatColorPickerCancelBtn = "flatColorPicker.cancelBtn";
  * @hidden
  */
 export declare const flatColorPickerApplyBtn = "flatColorPicker.applyBtn";
+/**
+ * @hidden
+ */
+export declare const flatColorPickerGradientBtn = "flatColorPicker.gradientBtn";
+/**
+ * @hidden
+ */
+export declare const flatColorPickerPaletteBtn = "flatColorPicker.paletterBtn";
+/**
+ * @hidden
+ */
+export declare const flatColorPickerClearBtn = "flatColorPicker.clearBtn";
 /**
  * @hidden
  */
@@ -95,10 +131,16 @@ export declare const messages: {
     "slider.increment": string;
     "slider.decrement": string;
     "slider.dragTitle": string;
+    "colorGradient.dragHandle": string;
+    "colorGradient.inputColorButton": string;
     "colorGradient.r": string;
     "colorGradient.g": string;
     "colorGradient.b": string;
     "colorGradient.a": string;
+    "colorGradient.rLabel": string;
+    "colorGradient.gLabel": string;
+    "colorGradient.bLabel": string;
+    "colorGradient.aLabel": string;
     "colorGradient.hex": string;
     "colorGradient.contrastRatio": string;
     "colorGradient.colorGradientAALevel": string;
@@ -107,6 +149,9 @@ export declare const messages: {
     "colorGradient.colorGradientFail": string;
     "flatColorPicker.cancelBtn": string;
     "flatColorPicker.applyBtn": string;
+    "flatColorPicker.gradientBtn": string;
+    "flatColorPicker.paletterBtn": string;
+    "flatColorPicker.clearBtn": string;
     "checkbox.validation": string;
     "checkbox.optionalText": string;
     "radioButton.validation": string;

package/dist/es/messages/index.js

@@ -19,6 +19,10 @@ export var sliderDecreaseValue = 'slider.decrement';
  * @hidden
  */
 export var sliderDragTitle = 'slider.dragTitle';
+/**
+ * @hidden
+ */
+export var colorGradientDragHandle = 'colorGradient.dragHandle';
 /**
  * @hidden
  */
@@ -39,6 +43,26 @@ export var colorGradientA = 'colorGradient.a';
  * @hidden
  */
 export var colorGradientHex = 'colorGradient.hex';
+/**
+ * @hidden
+ */
+export var colorGradientInputColorButton = 'colorGradient.inputColorButton';
+/**
+ * @hidden
+ */
+export var colorGradientRLabel = 'colorGradient.rLabel';
+/**
+ * @hidden
+ */
+export var colorGradientGLabel = 'colorGradient.gLabel';
+/**
+ * @hidden
+ */
+export var colorGradientBLabel = 'colorGradient.bLabel';
+/**
+ * @hidden
+ */
+export var colorGradientALabel = 'colorGradient.aLabel';
 /**
  * @hidden
  */
@@ -67,6 +91,18 @@ export var flatColorPickerCancelBtn = 'flatColorPicker.cancelBtn';
  * @hidden
  */
 export var flatColorPickerApplyBtn = 'flatColorPicker.applyBtn';
+/**
+ * @hidden
+ */
+export var flatColorPickerGradientBtn = 'flatColorPicker.gradientBtn';
+/**
+ * @hidden
+ */
+export var flatColorPickerPaletteBtn = 'flatColorPicker.paletterBtn';
+/**
+ * @hidden
+ */
+export var flatColorPickerClearBtn = 'flatColorPicker.clearBtn';
 /**
  * @hidden
  */
@@ -96,10 +132,17 @@ export var messages = (_a = {},
     _a[sliderIncreaseValue] = 'Increase',
     _a[sliderDecreaseValue] = 'Decrease',
     _a[sliderDragTitle] = 'Drag',
+    _a[colorGradientDragHandle] = "Color well with two-dimensional slider for selecting\n      saturation and lightness. Selected color is",
+    _a[colorGradientInputColorButton] = 'Change the color input',
+    _a[colorGradientR] = 'r',
     _a[colorGradientR] = 'r',
     _a[colorGradientG] = 'g',
     _a[colorGradientB] = 'b',
     _a[colorGradientA] = 'a',
+    _a[colorGradientRLabel] = 'red chanel',
+    _a[colorGradientGLabel] = 'green chanel',
+    _a[colorGradientBLabel] = 'blue chanel',
+    _a[colorGradientALabel] = 'alpha chanel',
     _a[colorGradientHex] = 'hex',
     _a[colorGradientContrastRatio] = 'Contrast ratio',
     _a[colorGradientAALevel] = 'AA',
@@ -108,6 +151,9 @@ export var messages = (_a = {},
     _a[colorGradientFail] = 'Fail',
     _a[flatColorPickerCancelBtn] = 'Cancel',
     _a[flatColorPickerApplyBtn] = 'Apply',
+    _a[flatColorPickerGradientBtn] = 'Gradient',
+    _a[flatColorPickerPaletteBtn] = 'Palette',
+    _a[flatColorPickerClearBtn] = 'Clear',
     _a[checkboxValidation] = 'Please check this box if you want to proceed!',
     _a[checkboxOptionalText] = '(Optional)',
     _a[radioButtonValidation] = 'Please select option if you want to proceed!',

package/dist/es/numerictextbox/NumericTextBox.js

@@ -90,6 +90,7 @@ var NumericTextBoxVue2 = {
       default: false
     },
     id: String,
+    ariaLabel: String,
     iconName: String,
     inputPrefix: templateDefinition,
     inputSuffix: templateDefinition,
@@ -545,6 +546,7 @@ var NumericTextBoxVue2 = {
         accesskey: this.$props.accessKey,
         disabled: this.$props.disabled,
         title: this.$props.title,
+        "aria-label": this.$props.ariaLabel,
         "aria-valuemin": this.$props.min,
         "aria-valuemax": this.$props.max,
         placeholder: this.$props.placeholder,
@@ -559,6 +561,7 @@ var NumericTextBoxVue2 = {
       accesskey: this.$props.accessKey,
       disabled: this.$props.disabled,
       title: this.$props.title,
+      "aria-label": this.$props.ariaLabel,
       "aria-valuemin": this.$props.min,
       "aria-valuemax": this.$props.max,
       placeholder: this.$props.placeholder,

package/dist/es/numerictextbox/interfaces/NumericTextBoxProps.d.ts

@@ -110,6 +110,10 @@ export interface NumericTextBoxProps extends FormComponentProps {
      * Sets the `id` of the `input` DOM element.
      */
     id?: string;
+    /**
+     * Sets the `aria-label` of the `input` DOM element.
+     */
+    ariaLabel?: string;
     /**
      * Sets the `type` of the `input` DOM element.
      *

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-inputs',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1658485371,
+    publishDate: 1659330724,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/es/radiobutton/RadioButton.js

@@ -63,7 +63,7 @@ var RadioButtonVue2 = {
 
       return _a = {
         'k-radio': true
-      }, _a["k-radio-" + kendoThemeMaps.sizeMap[this.$props.size]] = this.$props.size, _a['k-state-invalid'] = this.$props.valid === false, _a['k-invalid'] = this.$props.valid === false, _a[this.$props.className] = this.$props.className, _a;
+      }, _a["k-radio-" + kendoThemeMaps.sizeMap[this.$props.size]] = this.$props.size, _a['k-invalid'] = this.$props.valid === false, _a[this.$props.className] = this.$props.className, _a;
     }
   },
   methods: {

package/dist/es/radiobutton/RadioGroup.js

@@ -150,7 +150,7 @@ var RadioGroupVue2 = {
       return (// @ts-ignore function children
         h(RadioButton, {
           "class": classNames('k-radio-item', {
-            'k-state-disabled': option.disabled || disabled
+            'k-disabled': option.disabled || disabled
           }),
           style: option.style,
           key: index,