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

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

@@ -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;
 var inject = allVue.inject;
 import { canUseDOM, getDefaultSlots, getListeners, getRef, getTemplate, kendoThemeMaps, setRef, templateDefinition, templateRendering } from '@progress/kendo-vue-common';
@@ -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: 1657627749,
+    publishDate: 1659169206,
     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

@@ -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;
 var inject = allVue.inject;
 import { guid, getTabIndex, getDefaultSlots, templateRendering, getTemplate, getListeners, kendoThemeMaps, setRef, getRef } from '@progress/kendo-vue-common';
@@ -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

@@ -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;
 var inject = allVue.inject;
 import { RadioButton } from './RadioButton';
@@ -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,

package/dist/es/range-slider/RangeSlider.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;
 var inject = allVue.inject;
 import { Draggable, Keys, // useDir,
@@ -181,7 +181,7 @@ var RangeSliderVue2 = {
       dir: this.currentDir,
       "class": classNames('k-widget k-slider', {
         'k-rtl': this.currentDir === 'rtl',
-        'k-state-disabled': this.$props.disabled,
+        'k-disabled': this.$props.disabled,
         'k-slider-vertical': this.$props.vertical,
         'k-slider-horizontal': !this.$props.vertical
       }, this.$props.class),

package/dist/es/slider/Slider.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;
 var inject = allVue.inject;
 import { Button } from '@progress/kendo-vue-buttons';
@@ -178,8 +178,8 @@ var SliderVue2 = {
       onBlur: this.onBlur,
       onKeydown: this.onKeyDown,
       "class": classNames('k-slider k-widget', {
-        'k-state-focused': this.currentFocused,
-        'k-state-disabled': this.$props.disabled,
+        'k-focus': this.currentFocused,
+        'k-disabled': this.$props.disabled,
         'k-slider-horizontal': !this.$props.vertical,
         'k-slider-vertical': this.$props.vertical
       }, this.$props.className)

package/dist/es/slider/SliderLabel.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 { getDefaultSlots } from '@progress/kendo-vue-common';
 /**

package/dist/es/switch/Switch.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 { guid, noop, Keys, getTabIndex, validatePackage, isRtl, kendoThemeMaps, setRef, getRef } from '@progress/kendo-vue-common';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, switchValidation } from './../messages';

package/dist/es/textarea/TextArea.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';
 import { guid, isRtl, getTabIndex, validatePackage, kendoThemeMaps, templateDefinition, templateRendering, getListeners, getTemplate // useDir,
 } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';

package/dist/npm/checkbox/Checkbox.js

@@ -9,7 +9,7 @@ var Vue = require("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;
 var inject = allVue.inject;
 
@@ -214,11 +214,11 @@ var CheckboxVue2 = {
     this.defaultValidationMessage = this.localizeMessage(messages_1.checkboxValidation);
     this.optionalMessage = this.localizeMessage(messages_1.checkboxOptionalText);
     var checkboxClasses = kendo_vue_common_1.classNames({
-      'k-state-disabled': disabled
+      'k-disabled': disabled
     });
     var inputClasses = kendo_vue_common_1.classNames((_a = {
       'k-checkbox': true
-    }, _a["k-checkbox-" + kendo_vue_common_1.kendoThemeMaps.sizeMap[size]] = size, _a["k-rounded-" + kendo_vue_common_1.kendoThemeMaps.roundedMap[rounded]] = rounded, _a['k-state-indeterminate'] = this.indeterminateProp, _a['k-state-invalid k-invalid'] = !(this.isValid || validityStyles !== undefined || validityStyles === true), _a));
+    }, _a["k-checkbox-" + kendo_vue_common_1.kendoThemeMaps.sizeMap[size]] = size, _a["k-rounded-" + kendo_vue_common_1.kendoThemeMaps.roundedMap[rounded]] = rounded, _a['k-indeterminate'] = this.indeterminateProp, _a['k-invalid k-invalid'] = !(this.isValid || validityStyles !== undefined || validityStyles === true), _a));
 
     var checkboxInput = function checkboxInput() {
       return h("input", {

package/dist/npm/colors/ColorContrastLabels.js

@@ -9,7 +9,7 @@ var Vue = require("vue");
 
 var allVue = Vue;
 var gh = allVue.h;
-var isV3 = allVue.version[0] === '3';
+var isV3 = allVue.version && allVue.version[0] === '3';
 
 var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
 
@@ -54,12 +54,16 @@ var ColorContrastLabelsVue2 = {
     var contrastText = contrastRatioMessage + ": " + contrast.toFixed(2);
     var aaText = AALevelMessage + ": " + requiredAAContrast;
     var aaaText = AAALevelMessage + ": " + requiredAAAContrast;
+    var aaPass = contrast >= 4.5;
+    var aaaPass = contrast >= 7;
     var success = h("span", {
+      key: 1,
       "class": "k-contrast-validation k-text-success"
     }, [passMessage, " ", h("span", {
       "class": "k-icon k-i-check"
     })]);
     var error = h("span", {
+      key: 2,
       "class": "k-contrast-validation k-text-error"
     }, [failMessage, " ", h("span", {
       "class": "k-icon k-i-close"
@@ -70,17 +74,17 @@ var ColorContrastLabelsVue2 = {
       "class": "k-contrast-ratio"
     }, [h("span", {
       "class": "k-contrast-ratio-text"
-    }, [contrastText]), contrast >= 4.5 ? h("span", {
+    }, [contrastText]), aaPass ? h("span", {
       "class": "k-contrast-validation k-text-success"
     }, [h("span", {
       "class": "k-icon k-i-check"
-    }), contrast >= 7 && h("span", {
+    }), aaaPass && h("span", {
       "class": "k-icon k-i-check"
     })]) : h("span", {
       "class": "k-contrast-validation k-text-error"
     }, [h("span", {
       "class": "k-icon k-i-close"
-    })])]), h("div", [h("span", [aaText]), contrast >= 4.5 ? success : error]), h("div", [h("span", [aaaText]), contrast >= 7 ? success : error])]);
+    })])]), h("div", [h("span", [aaText]), aaPass ? success : error]), h("div", [h("span", [aaaText]), aaaPass ? success : error])]);
   }
 };
 exports.ColorContrastLabelsVue2 = ColorContrastLabelsVue2;

package/dist/npm/colors/ColorContrastSvg.js

@@ -9,7 +9,7 @@ var Vue = require("vue");
 
 var allVue = Vue;
 var gh = allVue.h;
-var isV3 = allVue.version[0] === '3';
+var isV3 = allVue.version && allVue.version[0] === '3';
 
 var svg_calc_1 = require("./utils/svg-calc");
 
@@ -38,62 +38,83 @@ var ColorContrastSvgVue2 = {
   },
   // @ts-ignore
   render: function render(createElement) {
-    var h = gh || createElement;
+    var _this = this;
 
-    var renderSvgCurveLine = function renderSvgCurveLine() {
-      var _this = this;
+    var h = gh || createElement;
 
-      var gradientRectMetrics = this.$props.metrics;
+    var svgPath = function svgPath(points, command) {
+      if (points.length === 0) {
+        return '';
+      } // build the d attributes by looping over the points
+
+
+      var d = points.reduce(function (acc, point, i, a) {
+        return i === 0 ? // if first point
+        "M " + point[0] + "," + point[1] : // else
+        acc + " " + command(point, i, a);
+      }, '');
+      return h("path", {
+        d: d,
+        attrs: this.v3 ? undefined : {
+          d: d,
+          fill: "none",
+          stroke: "white",
+          "stroke-width": "1"
+        },
+        fill: "none",
+        stroke: "white",
+        "stroke-width": "1"
+      });
+    };
 
-      var findValue = function findValue(contrast, saturation, low, high, comparer) {
-        var mid = (low + high) / 2;
-        var hsva = Object.assign({}, _this.$props.hsva, {
-          s: saturation / gradientRectMetrics.width,
-          v: 1 - mid / gradientRectMetrics.height
-        });
-        var currentContrast = color_parser_1.getContrastFromTwoRGBAs(color_parser_1.getRGBA(color_parser_1.getColorFromHSV(hsva)), color_parser_1.getRGBA(_this.$props.backgroundColor || ''));
-
-        if (low + 0.5 > high) {
-          if (currentContrast < contrast + 1 && currentContrast > contrast - 1) {
-            return mid;
-          } else {
-            return null;
-          }
+    var gradientRectMetrics = this.$props.metrics;
+
+    var findValue = function findValue(contrast, saturation, low, high, comparer) {
+      var mid = (low + high) / 2;
+      var hsva = Object.assign({}, _this.$props.hsva, {
+        s: saturation / gradientRectMetrics.width,
+        v: 1 - mid / gradientRectMetrics.height
+      });
+      var currentContrast = color_parser_1.getContrastFromTwoRGBAs(color_parser_1.getRGBA(color_parser_1.getColorFromHSV(hsva)), color_parser_1.getRGBA(_this.$props.backgroundColor || ''));
+
+      if (low + 0.5 > high) {
+        if (currentContrast < contrast + 1 && currentContrast > contrast - 1) {
+          return mid;
+        } else {
+          return null;
         }
+      }
 
-        if (comparer(currentContrast, contrast)) {
-          return findValue(contrast, saturation, low, high - (high - low) / 2, comparer);
-        }
+      if (comparer(currentContrast, contrast)) {
+        return findValue(contrast, saturation, low, high - (high - low) / 2, comparer);
+      }
 
-        return findValue(contrast, saturation, low + (high - low) / 2, high, comparer);
-      };
+      return findValue(contrast, saturation, low + (high - low) / 2, high, comparer);
+    };
 
-      var getPaths = function getPaths(contrast, stepCount, reversed) {
-        if (reversed === void 0) {
-          reversed = false;
-        }
+    var getPaths = function getPaths(contrast, stepCount, reversed) {
+      if (reversed === void 0) {
+        reversed = false;
+      }
 
-        var points = [];
+      var points = [];
 
-        for (var i = 0; i <= gradientRectMetrics.width; i += gradientRectMetrics.width / stepCount) {
-          var value = findValue(contrast, i, 0, gradientRectMetrics.height, reversed ? function (a, b) {
-            return a < b;
-          } : function (a, b) {
-            return a > b;
-          });
+      for (var i = 0; i <= gradientRectMetrics.width; i += gradientRectMetrics.width / stepCount) {
+        var value = findValue(contrast, i, 0, gradientRectMetrics.height, reversed ? function (a, b) {
+          return a < b;
+        } : function (a, b) {
+          return a > b;
+        });
 
-          if (value !== null) {
-            points.push([i, value]);
-          }
+        if (value !== null) {
+          points.push([i, value]);
         }
+      }
 
-        return points;
-      };
-
-      var bezierCommandCalc = svg_calc_1.bezierCommand(svg_calc_1.controlPoint(svg_calc_1.line));
-      return svg_calc_1.svgPath(getPaths(AA_CONTRAST, STEP_COUNT), bezierCommandCalc) + svg_calc_1.svgPath(getPaths(AA_CONTRAST, STEP_COUNT, true), bezierCommandCalc) + svg_calc_1.svgPath(getPaths(AAA_CONTRAST, STEP_COUNT), bezierCommandCalc) + svg_calc_1.svgPath(getPaths(AAA_CONTRAST, STEP_COUNT, true), bezierCommandCalc);
+      return points;
     };
 
+    var bezierCommandCalc = svg_calc_1.bezierCommand(svg_calc_1.controlPoint(svg_calc_1.line));
     return h("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       attrs: this.v3 ? undefined : {
@@ -108,7 +129,7 @@ var ColorContrastSvgVue2 = {
         top: 0,
         zIndex: 3
       }
-    }, [renderSvgCurveLine.call(this)]);
+    }, [svgPath.call(this, getPaths(AA_CONTRAST, STEP_COUNT), bezierCommandCalc), svgPath.call(this, getPaths(AA_CONTRAST, STEP_COUNT, true), bezierCommandCalc), svgPath.call(this, getPaths(AAA_CONTRAST, STEP_COUNT), bezierCommandCalc), svgPath.call(this, getPaths(AAA_CONTRAST, STEP_COUNT, true), bezierCommandCalc)]);
   }
 };
 exports.ColorContrastSvgVue2 = ColorContrastSvgVue2;

package/dist/npm/colors/ColorGradient.d.ts

@@ -13,6 +13,8 @@ export interface ColorGradientState {
     guidId: string;
     gradientWrapper: any;
     alphaSlider: any;
+    firstFocusable: any;
+    lastFocusable: any;
 }
 /**
  * @hidden
@@ -31,7 +33,7 @@ export interface ColorGradientMethods {
  */
 export interface ColorGradientData {
     hsva: HSVA;
-    backgroundColor: string;
+    currentBgColor: string;
     rgba: RGBA;
     hex: string;
     isFirstRender: boolean;