@progress/kendo-vue-inputs 3.4.3 → 3.4.5-dev.202207300828

package/dist/es/colors/HexInput.js

@@ -2,10 +2,10 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
-var isV3 = allVue.version[0] === '3';
+var isV3 = allVue.version && allVue.version[0] === '3';
 import { parseColor } from './utils/color-parser';
 import { isPresent } from './utils/misc';
-import { Input } from '../input/Input';
+import { Input as KInput } from '../input/Input';
 /**
  * @hidden
  */
@@ -19,19 +19,23 @@ var HexInputVue2 = {
     'focus': null
   },
   props: {
+    tabIndex: Number,
     hex: String,
     disabled: Boolean
   },
+  computed: {
+    isHexValid: function isHexValid() {
+      return !!parseColor(this.currentHex, 'rgba');
+    }
+  },
   data: function data() {
     return {
       currentHex: this.$props.hex,
       originalHex: this.$props.hex
     };
   },
-  computed: {
-    computedHex: function computedHex() {
-      return this.hex !== undefined ? this.hex : this.currentHex;
-    }
+  mounted: function mounted() {
+    this._input = this.$refs.input._input;
   },
   // @ts-ignore
   setup: !isV3 ? undefined : function () {
@@ -40,24 +44,36 @@ var HexInputVue2 = {
       v3: v3
     };
   },
+  watch: {
+    hex: function hex(newValue) {
+      this.currentHex = newValue;
+    }
+  },
   // @ts-ignore
   render: function render(createElement) {
     var h = gh || createElement;
-    return h(Input, {
-      value: this.computedHex,
+    return h(KInput, {
+      value: this.currentHex,
       attrs: this.v3 ? undefined : {
-        value: this.computedHex,
-        disabled: this.$props.disabled
+        value: this.currentHex,
+        valid: this.isHexValid,
+        disabled: this.$props.disabled,
+        tabIndex: this.tabIndex
       },
-      onChange: this.onChange,
+      onInput: this.onChange,
       on: this.v3 ? undefined : {
+        "input": this.onChange,
         "change": this.onChange,
         "focus": this.onFocus,
         "blur": this.onBlur
       },
+      onChange: this.onChange,
       onFocus: this.onFocus,
       onBlur: this.onBlur,
-      disabled: this.$props.disabled
+      valid: this.isHexValid,
+      disabled: this.$props.disabled,
+      tabIndex: this.tabIndex,
+      ref: 'input'
     });
   },
   methods: {
@@ -67,7 +83,11 @@ var HexInputVue2 = {
       this.currentHex = hex;
 
       if (isPresent(value)) {
-        this.$emit('hexchange', hex, value, event);
+        this.$emit('hexchange', {
+          hex: hex,
+          value: value,
+          event: event
+        });
       }
     },
     onBlur: function onBlur(event) {

package/dist/es/colors/Picker.js

@@ -2,7 +2,7 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
-var isV3 = allVue.version[0] === '3';
+var isV3 = allVue.version && allVue.version[0] === '3';
 import { Popup } from '@progress/kendo-vue-popup';
 import { classNames, getDefaultSlots } from '@progress/kendo-vue-common';
 /**
@@ -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

@@ -18,7 +18,7 @@ var __assign = this && this.__assign || function () {
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
-var isV3 = allVue.version[0] === '3';
+var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
 import { guid, templateDefinition, validatePackage, kendoThemeMaps, templateRendering, getListeners, getTemplate } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
@@ -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/input-separator/InputSeparator.js

@@ -3,7 +3,7 @@ import { validatePackage } from '@progress/kendo-licensing';
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
-var isV3 = allVue.version[0] === '3';
+var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
 import { packageMetadata } from '../package-metadata';
 /**

package/dist/es/maskedtextbox/MaskedTextBox.js

@@ -2,7 +2,7 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
-var isV3 = allVue.version[0] === '3';
+var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
 import { MaskingService } from './masking.service';
 import { defaultRules, maskingChanged, returnFalse } from './utils';

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;