@progress/kendo-vue-inputs 3.4.2 → 3.4.3

package/dist/es/colors/utils/color-palette.service.js

@@ -18,8 +18,10 @@ var ColorPaletteService = /** @class */ (function () {
             this.colorRows.push(row);
         }
     };
+    ColorPaletteService.prototype.isInColors = function (colors, current) {
+        return colors.some(function (c) { return c === current; });
+    };
     ColorPaletteService.prototype.getCellCoordsFor = function (color) {
-        var _this = this;
         if (!isPresent(color)) {
             return;
         }
@@ -28,23 +30,12 @@ var ColorPaletteService = /** @class */ (function () {
         if (isPresent(parsedColor)) {
             colors.push(parsedColor.toCss(), parsedColor.toCssRgba());
         }
-        var _loop_1 = function (row) {
-            var _loop_2 = function (col) {
-                if (colors.some(function (c) { return c === _this.colorRows[row][col]; })) {
-                    return { value: { row: row, col: col } };
+        for (var row = 0; row < this.colorRows.length; row++) {
+            for (var col = 0; col < this.colorRows[row].length; col++) {
+                if (this.isInColors(colors, this.colorRows[row][col])) {
+                    return { row: row, col: col };
                 }
-            };
-            for (var col = 0; col < this_1.colorRows[row].length; col++) {
-                var state_2 = _loop_2(col);
-                if (typeof state_2 === "object")
-                    return state_2;
             }
-        };
-        var this_1 = this;
-        for (var row = 0; row < this.colorRows.length; row++) {
-            var state_1 = _loop_1(row);
-            if (typeof state_1 === "object")
-                return state_1.value;
         }
     };
     ColorPaletteService.prototype.getColorAt = function (cellCoords) {

package/dist/es/main.d.ts

@@ -1,5 +1,6 @@
 import { FormComponentValidity } from '@progress/kendo-vue-common';
 export { FormComponentValidity };
+export { ColorGradient, ColorGradientState } from './colors/ColorGradient';
 export { ColorPalette, ColorPaletteState } from './colors/ColorPalette';
 export * from './colors/ColorPicker';
 export * from './colors/interfaces/ColorPaletteChangeEvent';

package/dist/es/main.js

@@ -1,3 +1,4 @@
+export { ColorGradient } from './colors/ColorGradient';
 export { ColorPalette } from './colors/ColorPalette';
 export * from './colors/ColorPicker';
 export * from './colors/interfaces/ColorPaletteChangeEvent';

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: 1657171976,
+    publishDate: 1657627749,
     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/slider/Slider.js

@@ -20,6 +20,14 @@ var SliderVue2 = {
   model: {
     event: 'changemodel'
   },
+  // @ts-ignore
+  emits: {
+    'changemodel': null,
+    'update:modelValue': null,
+    'change': null,
+    'blur': null,
+    'focus': null
+  },
   props: {
     modelValue: {
       type: Number,
@@ -308,11 +316,13 @@ var SliderVue2 = {
 
       return false;
     },
-    onFocus: function onFocus() {
+    onFocus: function onFocus(event) {
       this.currentFocused = true;
+      this.$emit('focus', event);
     },
-    onBlur: function onBlur() {
+    onBlur: function onBlur(event) {
       this.currentFocused = false;
+      this.$emit('blur', event);
     },
     onKeyDown: function onKeyDown(e) {
       var newValue = undefined;

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

@@ -8,7 +8,7 @@ import { HSVA } from './models/hsva';
  * @hidden
  */
 export interface ColorContrastSvgProps {
-    metrics: ClientRect | undefined;
+    metrics: any;
     backgroundColor: string;
     hsva: HSVA;
 }

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

@@ -12,6 +12,7 @@ import { ColorGradientProps } from './interfaces/ColorGradientProps';
 export interface ColorGradientState {
     guidId: string;
     gradientWrapper: any;
+    alphaSlider: any;
 }
 /**
  * @hidden

package/dist/npm/colors/ColorGradient.js

@@ -1,21 +1,5 @@
 "use strict";
 
-var __assign = undefined && undefined.__assign || function () {
-  __assign = Object.assign || function (t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-
-      for (var p in s) {
-        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-      }
-    }
-
-    return t;
-  };
-
-  return __assign.apply(this, arguments);
-};
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -58,7 +42,9 @@ var ColorGradientVue2 = {
   // @ts-ignore
   emits: {
     'change': null,
-    'focus': null
+    'focus': null,
+    'blur': null,
+    'keydown': null
   },
   props: {
     defaultValue: String,
@@ -82,9 +68,9 @@ var ColorGradientVue2 = {
       return this.$props.value === undefined;
     },
     computedValue: function computedValue() {
-      var value = this.value || this.defaultValue || color_parser_1.parseColor(DEFAULT_SELECTED_COLOR, FORMAT);
+      var value = this.value || this.defaultValue || this.currentValue || color_parser_1.parseColor(DEFAULT_SELECTED_COLOR, FORMAT);
 
-      if (!misc_1.isPresent(color_parser_1.parseColor(this.value, 'hex'))) {
+      if (!misc_1.isPresent(color_parser_1.parseColor(value, 'hex'))) {
         // Validate/sanitize the input.
         value = DEFAULT_SELECTED_COLOR;
       }
@@ -92,13 +78,13 @@ var ColorGradientVue2 = {
       return value;
     },
     hsva: function hsva() {
-      return color_cache_1.getCachedHsva(this.guid, this.computedValue) || color_parser_1.getHSV(this.computedValue);
+      return this.currentHsva || color_cache_1.getCachedHsva(this.guid, this.computedValue) || color_parser_1.getHSV(this.computedValue);
     },
     rgba: function rgba() {
-      return color_cache_1.getCachedRgba(this.guid, this.computedValue) || color_parser_1.getRGBA(this.computedValue);
+      return this.currentRgba || color_cache_1.getCachedRgba(this.guid, this.computedValue) || color_parser_1.getRGBA(this.computedValue);
     },
     hex: function hex() {
-      return color_cache_1.getCachedHex(this.guid, this.computedValue) || color_parser_1.parseColor(this.computedValue, 'hex');
+      return this.currentHex || color_cache_1.getCachedHex(this.guid, this.computedValue) || color_parser_1.parseColor(this.computedValue, 'hex');
     },
     computedBgColor: function computedBgColor() {
       return this.backgroundColor !== undefined ? this.backgroundColor : this.currentBgColor || color_parser_1.getColorFromHue(this.hsva.h);
@@ -106,8 +92,12 @@ var ColorGradientVue2 = {
   },
   data: function data() {
     return {
+      currentValue: undefined,
       currentBgColor: undefined,
-      isFirstRender: true
+      isFirstRender: true,
+      currentHsva: undefined,
+      currentRgba: undefined,
+      currentHex: undefined
     };
   },
   mounted: function mounted() {
@@ -127,11 +117,10 @@ var ColorGradientVue2 = {
   destroyed: function destroyed() {
     color_cache_1.removeCachedColor(this.guid);
   },
-  updated: function updated() {// if (prevState.backgroundColor !== this.backgroundColor) {
-    //     this.setAlphaSliderBackground(this.backgroundColor);
-    // }
+  updated: function updated() {
+    // if (prevState.backgroundColor !== this.backgroundColor) {
+    this.setAlphaSliderBackground(this.computedBgColor); // }
   },
-  // private alphaSlider: any;
   // @ts-ignore
   setup: !isV3 ? undefined : function () {
     var v3 = !!isV3;
@@ -183,8 +172,12 @@ var ColorGradientVue2 = {
       "aria-describedby": this.$props.ariaDescribedBy,
       onFocus: this.onFocus,
       on: this.v3 ? undefined : {
-        "focus": this.onFocus
-      }
+        "focus": this.onFocus,
+        "blur": this.onBlur,
+        "keydown": this.onKeyDownHandler
+      },
+      onBlur: this.onBlur,
+      onKeydown: this.onKeyDownHandler
     }, [h("div", {
       "class": "k-colorgradient-canvas k-hstack"
     }, [h("div", {
@@ -250,8 +243,12 @@ var ColorGradientVue2 = {
       step: 5,
       onChange: this.onHueSliderChange,
       on: this.v3 ? undefined : {
-        "change": this.onHueSliderChange
+        "change": this.onHueSliderChange,
+        "focus": this.onFocus,
+        "blur": this.onBlur
       },
+      onFocus: this.onFocus,
+      onBlur: this.onBlur,
       "class": "k-hue-slider k-colorgradient-slider",
       disabled: this.$props.disabled
     }), this.$props.opacity && h(main_1.Slider, {
@@ -272,8 +269,12 @@ var ColorGradientVue2 = {
       step: 1,
       onChange: this.onAlphaSliderChange,
       on: this.v3 ? undefined : {
-        "change": this.onAlphaSliderChange
+        "change": this.onAlphaSliderChange,
+        "focus": this.onFocus,
+        "blur": this.onBlur
       },
+      onFocus: this.onFocus,
+      onBlur: this.onBlur,
       "class": "k-alpha-slider k-colorgradient-slider",
       disabled: this.$props.disabled,
       ref: this.v3 ? function (el) {
@@ -287,13 +288,17 @@ var ColorGradientVue2 = {
         opacity: this.$props.opacity,
         disabled: this.$props.disabled
       },
-      onRgbaChange: this.onRgbaChange,
+      onRgbachange: this.onRgbaChange,
       on: this.v3 ? undefined : {
-        "rgbaChange": this.onRgbaChange,
-        "hexChange": this.onHexChange
+        "rgbachange": this.onRgbaChange,
+        "focus": this.onFocus,
+        "blur": this.onBlur,
+        "hexchange": this.onHexChange
       },
       hex: this.hex,
-      onHexChange: this.onHexChange,
+      onFocus: this.onFocus,
+      onBlur: this.onBlur,
+      onHexchange: this.onHexChange,
       opacity: this.$props.opacity,
       disabled: this.$props.disabled
     }), this.computedBgColor && h(ColorContrastLabels_1.ColorContrastLabels, {
@@ -313,13 +318,16 @@ var ColorGradientVue2 = {
     //     }
     //     return null;
     // },
+    onKeyDownHandler: function onKeyDownHandler(e) {
+      this.$emit('keydown', e);
+    },
     onHexChange: function onHexChange(hex, value, event) {
       if (this.isUncontrolled) {
         var hsva = color_parser_1.getHSV(value);
-        this.hsva = hsva;
-        this.cu = color_parser_1.getColorFromHue(hsva.h);
-        this.rgba = color_parser_1.getRGBA(value);
-        this.hex = hex;
+        this.currentHsva = hsva;
+        this.currentBgColor = color_parser_1.getColorFromHue(hsva.h);
+        this.currentRgba = color_parser_1.getRGBA(value);
+        this.currentHex = hex;
       } else {
         color_cache_1.cacheHex(this.guid, value, hex);
       }
@@ -332,10 +340,10 @@ var ColorGradientVue2 = {
       if (this.isUncontrolled) {
         var hsva = color_parser_1.getHSV(value);
         var hex = color_parser_1.parseColor(value, 'hex');
-        this.hsva = hsva;
+        this.currentHsva = hsva;
         this.currentBgColor = color_parser_1.getColorFromHue(hsva.h);
-        this.rgba = rgba;
-        this.hex = hex;
+        this.currentRgba = rgba;
+        this.currentHex = hex;
       } else {
         color_cache_1.cacheRgba(this.guid, value, rgba);
       }
@@ -379,10 +387,10 @@ var ColorGradientVue2 = {
 
       if (this.isUncontrolled) {
         var hex = color_parser_1.parseColor(value, 'hex');
-        this.hsva = hsva;
+        this.currentHsva = hsva;
         this.currentBgColor = color_parser_1.getColorFromHue(hsva.h);
-        this.rgba = color_parser_1.getRGBA(value);
-        this.hex = hex;
+        this.currentRgba = color_parser_1.getRGBA(value);
+        this.currentHex = hex;
       } else {
         color_cache_1.cacheHsva(this.guid, value, hsva);
       }
@@ -390,19 +398,24 @@ var ColorGradientVue2 = {
       this.dispatchChangeEvent(value, event);
     },
     dispatchChangeEvent: function dispatchChangeEvent(value, event) {
+      this.currentValue = value;
       this.$emit('change', {
         event: event,
         target: this,
         value: value
       });
     },
-    onFocus: function onFocus(nativeEvent) {
-      if (this.$props.onFocus) {
-        this.$props.onFocus.call(undefined, {
-          nativeEvent: nativeEvent,
-          target: this
-        });
-      }
+    onFocus: function onFocus(event) {
+      this.$emit('focus', {
+        event: event,
+        target: this
+      });
+    },
+    onBlur: function onBlur(event) {
+      this.$emit('blur', {
+        event: event,
+        target: this
+      });
     },
     setAlphaSliderBackground: function setAlphaSliderBackground(backgroundColor) {
       if (this.$props.opacity && this.alphaSlider && this.alphaSlider.sliderTrack) {
@@ -410,8 +423,17 @@ var ColorGradientVue2 = {
       }
     },
     getGradientRectMetrics: function getGradientRectMetrics() {
-      var clientRect = this.gradientWrapper.getBoundingClientRect();
-      return __assign({}, clientRect);
+      var rect = this.gradientWrapper.getBoundingClientRect();
+      return {
+        top: rect.top,
+        right: rect.right,
+        bottom: rect.bottom,
+        left: rect.left,
+        width: rect.width,
+        height: rect.height,
+        x: rect.x,
+        y: rect.y
+      };
     },
     focus: function focus() {
       kendo_vue_common_1.focusFirstFocusableChild(this.$el);

package/dist/npm/colors/ColorInput.js

@@ -50,12 +50,24 @@ var modes = ['rgba', 'rgb', 'hex'];
 
 var ColorInputVue2 = {
   name: 'KendoColorInput',
+  // @ts-ignore
+  emits: {
+    'focus': null,
+    'blur': null,
+    'hexchange': null,
+    'rgbachange': null
+  },
   props: {
     rgba: Object,
     hex: String,
     opacity: Boolean,
     disabled: Boolean
   },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
   data: function data() {
     return {
       inputMode: modes[1]
@@ -88,11 +100,15 @@ var ColorInputVue2 = {
         icon: 'arrows-kpi'
       },
       icon: 'arrows-kpi',
-      "class": "k-colorgradient-toggle-mode k-icon-button",
-      onClick: this.onToggleModeChange.bind(this),
+      onFocus: this.onFocus,
       on: this.v3 ? undefined : {
-        "click": this.onToggleModeChange.bind(this)
-      }
+        "focus": this.onFocus,
+        "blur": this.onBlur,
+        "click": this.onToggleModeChange
+      },
+      onBlur: this.onBlur,
+      "class": "k-colorgradient-toggle-mode k-icon-button",
+      onClick: this.onToggleModeChange
     })]), this.inputMode === 'hex' && h("div", {
       "class": "k-vstack k-flex-1"
     }, [h("span", {
@@ -103,10 +119,14 @@ var ColorInputVue2 = {
         hex: this.$props.hex,
         disabled: this.$props.disabled
       },
-      onHexChange: this.$props.onHexChange,
+      onFocus: this.onFocus,
       on: this.v3 ? undefined : {
-        "hexChange": this.$props.onHexChange
+        "focus": this.onFocus,
+        "blur": this.onBlur,
+        "hexchange": this.onHexChange
       },
+      onBlur: this.onBlur,
+      onHexchange: this.onHexChange,
       disabled: this.$props.disabled
     })]), // @ts-ignore  function children
     h(kendo_vue_labels_1.Label, {
@@ -129,10 +149,14 @@ var ColorInputVue2 = {
       max: 255,
       spinners: false,
       format: "n",
-      onChange: this.onRgbaRChange,
+      onFocus: this.onFocus,
       on: this.v3 ? undefined : {
+        "focus": this.onFocus,
+        "blur": this.onBlur,
         "change": this.onRgbaRChange
       },
+      onBlur: this.onBlur,
+      onChange: this.onRgbaRChange,
       disabled: this.$props.disabled
     }), // @ts-ignore  function children
     h(kendo_vue_labels_1.Label, {
@@ -155,10 +179,14 @@ var ColorInputVue2 = {
       max: 255,
       spinners: false,
       format: "n",
-      onChange: this.onRgbaGChange,
+      onFocus: this.onFocus,
       on: this.v3 ? undefined : {
+        "focus": this.onFocus,
+        "blur": this.onBlur,
         "change": this.onRgbaGChange
       },
+      onBlur: this.onBlur,
+      onChange: this.onRgbaGChange,
       disabled: this.$props.disabled
     }), // @ts-ignore  function children
     h(kendo_vue_labels_1.Label, {
@@ -181,10 +209,14 @@ var ColorInputVue2 = {
       max: 255,
       spinners: false,
       format: "n",
-      onChange: this.onRgbaBChange,
+      onFocus: this.onFocus,
       on: this.v3 ? undefined : {
+        "focus": this.onFocus,
+        "blur": this.onBlur,
         "change": this.onRgbaBChange
       },
+      onBlur: this.onBlur,
+      onChange: this.onRgbaBChange,
       disabled: this.$props.disabled
     }), // @ts-ignore  function children
     h(kendo_vue_labels_1.Label, {
@@ -209,19 +241,32 @@ var ColorInputVue2 = {
       step: 0.01,
       spinners: false,
       format: "n2",
-      onChange: this.onRgbaAChange,
+      onFocus: this.onFocus,
       on: this.v3 ? undefined : {
+        "focus": this.onFocus,
+        "blur": this.onBlur,
         "change": this.onRgbaAChange
       },
+      onBlur: this.onBlur,
+      onChange: this.onRgbaAChange,
       disabled: this.$props.disabled
-    }), "(this.$props.opacity &&", // @ts-ignore  function children
+    }), this.$props.opacity && // @ts-ignore  function children
     h(kendo_vue_labels_1.Label, {
       "class": "k-colorgradient-input-label"
     }, this.v3 ? function () {
       return [aMessage];
-    } : [aMessage]), ")"])]);
+    } : [aMessage])])]);
   },
   methods: {
+    onFocus: function onFocus(event) {
+      this.$emit('focus', event);
+    },
+    onBlur: function onBlur(event) {
+      this.$emit('blur', event);
+    },
+    onHexChange: function onHexChange(event) {
+      this.$emit('hexchange', event);
+    },
     onRgbaRChange: function onRgbaRChange(event) {
       this.dispatchRgbaChange({
         r: event.value
@@ -261,7 +306,7 @@ var ColorInputVue2 = {
         rgba.a = newValue.a;
       }
 
-      this.$props.onRgbaChange(rgba, event);
+      this.$emit('rgbachange', rgba, event);
     },
     onToggleModeChange: function onToggleModeChange() {
       var index = modes.length - 1 === modes.indexOf(this.inputMode) ? 0 : modes.indexOf(this.inputMode) + 1;

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

@@ -43,7 +43,6 @@ export interface ColorPaletteMethods {
 export interface ColorPaletteData {
     selectedColor?: string;
     focusedColor?: string;
-    isFirstRender: boolean;
 }
 /**
  * @hidden

package/dist/npm/colors/ColorPalette.js

@@ -92,9 +92,8 @@ var ColorPaletteVue2 = {
   },
   data: function data() {
     return {
-      focusedColor: undefined,
-      currentValue: undefined,
-      isFirstRender: true
+      focusedColor: this.$props.value,
+      currentValue: undefined
     };
   },
   // @ts-ignore
@@ -113,7 +112,7 @@ var ColorPaletteVue2 = {
     var selectedCellCoords = svc.getCellCoordsFor(this.selectedColor);
     var focusedCellCoords = svc.getCellCoordsFor(this.focusedColor);
     var className = kendo_vue_common_1.classNames('k-colorpalette', {
-      'k-state-disabled': this.$props.disabled
+      'k-disabled': this.$props.disabled
     });
 
     var renderColumns = function renderColumns(columns, rowIndex, cSelectedCellCoords, cFocusedCellCoords) {
@@ -132,8 +131,8 @@ var ColorPaletteVue2 = {
 
         var isSelected = rowIsSelected && selectedColumn === i;
         var tdClassName = kendo_vue_common_1.classNames('k-colorpalette-tile', {
-          'k-state-selected': isSelected,
-          'k-state-focus': rowIsFocused && focusedColumn === i
+          'k-selected': isSelected,
+          'k-focus': rowIsFocused && focusedColumn === i
         });
         return h("td", {
           "class": tdClassName,
@@ -233,27 +232,6 @@ var ColorPaletteVue2 = {
         this.wrapper.focus();
       }
     },
-    getDerivedStateFromProps: function getDerivedStateFromProps(props, state) {
-      if (!state.isFirstRender && props.value !== undefined) {
-        // The component is in controlled mode.
-        if (props.value === '' && state.selectedColor !== undefined) {
-          // The selection has to be removed.
-          return {
-            selectedColor: undefined
-          };
-        } else if (props.value !== '' && props.value !== state.selectedColor) {
-          return {
-            selectedColor: props.value
-          };
-        }
-      } else if (state.isFirstRender) {
-        return {
-          isFirstRender: false
-        };
-      }
-
-      return null;
-    },
     onKeyDown: function onKeyDown(event) {
       switch (event.keyCode) {
         case kendo_vue_common_1.Keys.down:
@@ -281,7 +259,6 @@ var ColorPaletteVue2 = {
           return;
       }
 
-      event.preventDefault();
       this.$emit('keydown', event);
     },
     onColorClick: function onColorClick(color, event) {

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

@@ -15,7 +15,6 @@ export interface ColorPickerHandle {
  */
 export interface ColorPickerState {
     focusableElementGuid: string;
-    focusableElement: any;
     palette: any | null;
     blurTimeout: any | undefined;
     button: HTMLSpanElement | null;