@progress/kendo-vue-inputs 3.4.2 → 3.4.3-dev.202207111225

package/dist/es/colors/ColorPicker.js

@@ -1,14 +1,31 @@
-// @ts-ignore
+var __assign = this && this.__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);
+}; // @ts-ignore
+
+
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version[0] === '3';
 import { Button } from '@progress/kendo-vue-buttons';
 import { classNames, Keys, // useDir, 
-getTabIndex, guid, kendoThemeMaps, validatePackage } from '@progress/kendo-vue-common';
+getTabIndex, guid, kendoThemeMaps, validatePackage, setRef, getRef } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
 import { Picker } from './Picker';
 import { ColorPalette, DEFAULT_PRESET, DEFAULT_TILE_SIZE } from './ColorPalette';
+import { ColorGradient } from './ColorGradient';
 /**
  * @hidden
  */
@@ -38,6 +55,15 @@ var isControlled = function isControlled(prop) {
 
 var ColorPickerVue2 = {
   name: 'KendoColorPicker',
+  // @ts-ignore
+  emits: {
+    'open': null,
+    'close': null,
+    'activecolorclick': null,
+    'focus': null,
+    'blur': null,
+    'change': null
+  },
   props: {
     value: {
       type: String,
@@ -66,7 +92,18 @@ var ColorPickerVue2 = {
     title: String,
     icon: String,
     iconClassName: String,
-    popupSettings: Object,
+    popupSettings: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    },
+    gradientSettings: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    },
     open: {
       type: Boolean,
       default: undefined
@@ -91,27 +128,34 @@ var ColorPickerVue2 = {
       validator: function validator(value) {
         return [null, 'solid', 'flat', 'outline'].includes(value);
       }
+    },
+    view: {
+      type: String,
+      default: 'palette',
+      validator: function validator(value) {
+        return ['gradient', 'palette', 'combo'].includes(value);
+      }
     }
   },
   data: function data() {
     return {
       focused: false,
-      stateValue: '',
-      stateOpen: false
+      currentValue: this.$props.defaultValue,
+      currentOpen: false
     };
   },
   computed: {
     isValueControlled: function isValueControlled() {
-      return isControlled(this.$props.value);
+      return this.$props.value !== undefined;
     },
     isOpenControlled: function isOpenControlled() {
-      return isControlled(this.$props.open);
+      return this.$props.open !== undefined;
     },
     computedValue: function computedValue() {
-      return this.isValueControlled ? this.$props.value : this.stateValue;
+      return this.isValueControlled ? this.$props.value : this.currentValue;
     },
     computedOpen: function computedOpen() {
-      return this.isOpenControlled ? this.$props.open : this.stateOpen;
+      return this.isOpenControlled ? this.$props.open : this.currentOpen;
     },
     computedIconClassName: function computedIconClassName() {
       var icon = this.$props.icon;
@@ -126,7 +170,8 @@ var ColorPickerVue2 = {
           rounded = _b.rounded;
       return _a = {
         'k-picker': true,
-        'k-colorpicker': true
+        'k-colorpicker': true,
+        'k-icon-picker': true
       }, _a["k-picker-" + (kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-picker-" + fillMode] = fillMode, _a["k-rounded-" + (kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-invalid'] = !this.valid, _a['k-disabled'] = this.disabled, _a['k-focus'] = this.focused, _a;
     }
   },
@@ -135,13 +180,9 @@ var ColorPickerVue2 = {
     this.focusableElementGuid = guid();
   },
   mounted: function mounted() {
-    this.focusableElement = this.$refs[this.focusableElementGuid];
-    this.button = this.v3 ? this.buttonRef : this.$refs.button;
-    this.palette = this.v3 ? this.paletteRef : this.$refs.palette;
+    this.button = getRef(this, 'button');
   },
-  updated: function updated() {
-    this.button = this.v3 ? this.buttonRef : this.$refs.button;
-    this.palette = this.v3 ? this.paletteRef : this.$refs.palette;
+  updated: function updated() {// this.button = getRef(this, 'button');
   },
   // @ts-ignore
   setup: !isV3 ? undefined : function () {
@@ -162,7 +203,49 @@ var ColorPickerVue2 = {
     var _b = this.$props,
         disabled = _b.disabled,
         tabIndex = _b.tabIndex,
-        dir = _b.dir; // const dir = useDir(focusableElementGuid, props.dir);
+        dir = _b.dir,
+        view = _b.view;
+
+    var renderGradiente = function renderGradiente() {
+      return h(ColorGradient, __assign({
+        tabIndex: 0,
+        attrs: this.v3 ? undefined : __assign({
+          tabIndex: 0,
+          value: this.computedValue || undefined
+        }, this.gradientSettings),
+        ref: setRef(this, 'gradient'),
+        value: this.computedValue || undefined,
+        onChange: this.onGradientChangeHandler,
+        on: this.v3 ? undefined : {
+          'change': this.onGradientChangeHandler,
+          'focus': this.onFocusHandler,
+          'blur': this.onBlurHandler,
+          'keydown': this.onKeyDownHandler
+        },
+        onFocus: this.onFocusHandler,
+        onBlur: this.onBlurHandler,
+        onKeydown: this.onKeyDownHandler
+      }, this.gradientSettings));
+    };
+
+    var renderPalette = function renderPalette() {
+      return h(ColorPalette, __assign({
+        onKeydown: this.onKeyDownHandler,
+        on: this.v3 ? undefined : {
+          'keydown': this.onKeyDownHandler,
+          'change': this.onPaletteChangeHandler,
+          'blur': this.onBlurHandler
+        },
+        ref: setRef(this, 'palette'),
+        value: this.computedValue || undefined,
+        attrs: this.v3 ? undefined : __assign({
+          value: this.computedValue || undefined
+        }, this.paletteSettings),
+        onChange: this.onPaletteChangeHandler,
+        onBlur: this.onBlurHandler
+      }, this.paletteSettings));
+    }; // const dir = useDir(focusableElementGuid, props.dir);
+
 
     return h("span", {
       "class": this.wrapperClassName,
@@ -181,14 +264,12 @@ var ColorPickerVue2 = {
       ref: this.focusableElementGuid,
       tabindex: getTabIndex(tabIndex, disabled),
       title: this.$props.title,
-      onKeydown: this.onKeyDownHandler,
+      onKeydown: this.onButtonKeyDown,
       on: this.v3 ? undefined : {
-        "keydown": this.onKeyDownHandler,
-        "focusin": this.onFocusHandler,
-        "focusout": this.onBlurHandler
+        "keydown": this.onButtonKeyDown,
+        "focusin": this.onFocusHandler
       },
-      onFocusin: this.onFocusHandler,
-      onFocusout: this.onBlurHandler
+      onFocusin: this.onFocusHandler
     }, [h("span", {
       onClick: this.onActiveColorClickHandler,
       on: this.v3 ? undefined : {
@@ -212,9 +293,11 @@ var ColorPickerVue2 = {
       type: "button",
       attrs: this.v3 ? undefined : {
         type: "button",
+        tabindex: -1,
         rounded: null,
         icon: 'arrow-s'
       },
+      tabindex: -1,
       ref: this.v3 ? function (el) {
         _this.buttonRef = el;
       } : 'button',
@@ -240,94 +323,78 @@ var ColorPickerVue2 = {
       },
       popupAnchor: this.focusableElementGuid
     }, this.v3 ? function () {
-      return [// @ts-ignore function children
-      h(ColorPalette, {
-        onKeydown: _this2.onKeyDownHandler //      {...paletteSettings}
-        ,
-        on: _this2.v3 ? undefined : {
-          "keydown": _this2.onKeyDownHandler,
-          "change": _this2.onPaletteChangeHandler,
-          "blur": _this2.onBlurHandler
-        },
-        ref: _this2.v3 ? function (el) {
-          _this.paletteRef = el;
-        } : 'palette',
-        value: _this2.computedValue || undefined,
-        attrs: _this2.v3 ? undefined : {
-          value: _this2.computedValue || undefined
-        },
-        onChange: _this2.onPaletteChangeHandler,
-        onBlur: _this2.onBlurHandler
-      })];
-    } : [h(ColorPalette, {
-      onKeydown: _this2.onKeyDownHandler,
-      on: _this2.v3 ? undefined : {
-        "keydown": _this2.onKeyDownHandler,
-        "change": _this2.onPaletteChangeHandler,
-        "blur": _this2.onBlurHandler
-      },
-      ref: _this2.v3 ? function (el) {
-        _this.paletteRef = el;
-      } : 'palette',
-      value: _this2.computedValue || undefined,
-      attrs: _this2.v3 ? undefined : {
-        value: _this2.computedValue || undefined
-      },
-      onChange: _this2.onPaletteChangeHandler,
-      onBlur: _this2.onBlurHandler
-    })])]);
+      return [(view === 'combo' || view === 'gradient') && renderGradiente.call(_this2), (view === 'combo' || view === 'palette') && renderPalette.call(_this2)];
+    } : [(view === 'combo' || view === 'gradient') && renderGradiente.call(_this2), (view === 'combo' || view === 'palette') && renderPalette.call(_this2)])]);
   },
   methods: {
     focusElement: function focusElement() {
-      if (this.focusableElement) {
-        this.focusableElement.focus();
+      if (this.$el) {
+        this.$el.focus();
       }
     },
     setOpen: function setOpen(nextOpen, isBlur) {
-      if (!this.isOpenControlled) {
-        if (!nextOpen && !isBlur && this.focusableElement) {
-          this.focusableElement.focus();
-        }
-
-        this.stateOpen = nextOpen;
+      if (!nextOpen && !isBlur && this.$el) {
+        this.$el.focus();
       }
+
+      this.currentOpen = nextOpen;
+      this.$emit(nextOpen ? 'open' : 'close');
     },
-    onKeyDownHandler: function onKeyDownHandler(event) {
+    onButtonKeyDown: function onButtonKeyDown(event) {
       var altKey = event.altKey,
           keyCode = event.keyCode;
 
       if (keyCode === Keys.esc) {
+        event.preventDefault();
+        event.stopPropagation();
         this.setOpen(false);
         return;
       }
 
-      if (keyCode === Keys.enter && !this.isOpenControlled) {
+      if (keyCode === Keys.enter) {
         event.preventDefault();
         event.stopPropagation();
         this.setOpen(!this.computedOpen);
         return;
       }
 
-      if (altKey && (keyCode === Keys.up || keyCode === Keys.down)) {
+      if (altKey && keyCode === Keys.down) {
         event.preventDefault();
         event.stopPropagation();
+        this.setOpen(true);
+      }
+    },
+    onKeyDownHandler: function onKeyDownHandler(event) {
+      var altKey = event.altKey,
+          keyCode = event.keyCode;
 
-        if (keyCode === Keys.up && this.focusableElement) {
-          this.focusableElement.focus();
-          this.setOpen(false);
-        }
+      if (keyCode === Keys.esc) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.setOpen(false);
+        return;
+      }
 
-        if (keyCode === Keys.down) {
-          this.setOpen(true);
-        }
+      if (keyCode === Keys.enter) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.focusElement();
+        return;
+      }
+
+      if (altKey && keyCode === Keys.up) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.setOpen(false);
+        this.focusElement();
       }
     },
     onOpenHandler: function onOpenHandler() {
       // Skip content autofocus when in controlled mode
-      if (!this.isOpenControlled) {
-        if (this.palette) {
-          this.palette.focus();
-        }
+      var palette = getRef(this, 'palette');
+
+      if (palette) {
+        palette.focus();
       }
     },
     onClickHandler: function onClickHandler() {
@@ -343,9 +410,10 @@ var ColorPickerVue2 = {
       if (this.blurTimeoutRef) {
         clearTimeout(this.blurTimeoutRef);
         this.blurTimeoutRef = undefined; // case where moving back to input from popup
-        // if (event.target === this.focusableElement) {
-        //     this.setOpen(false); // in this case we should focus input on keydown
-        // }
+
+        if (event.target === this.$el) {
+          this.setOpen(false); // in this case we should focus input on keydown
+        }
       } else {
         this.focused = true;
       }
@@ -355,18 +423,22 @@ var ColorPickerVue2 = {
       });
     },
     onBlurTimeout: function onBlurTimeout() {
-      var paleteIsFocused = this.palette && document.activeElement === this.palette.$el;
+      var _a, _b;
 
-      if (!paleteIsFocused) {
+      var viewIsFocused = !!((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest('.k-palette')) || !!((_b = document.activeElement) === null || _b === void 0 ? void 0 : _b.closest('.k-colorgradient'));
+
+      if (!viewIsFocused) {
         this.setOpen(false, true);
       }
 
-      this.focused = paleteIsFocused;
+      this.focused = viewIsFocused;
       this.blurTimeoutRef = undefined;
     },
     onBlurHandler: function onBlurHandler(event) {
       clearTimeout(this.blurTimeoutRef);
-      this.blurTimeoutRef = window.setTimeout(this.onBlurTimeout, 200);
+      this.palette = getRef(this, 'palette');
+      this.gradient = getRef(this, 'gradient');
+      this.blurTimeoutRef = setTimeout(this.onBlurTimeout, 200);
       this.$emit('blur', {
         event: event
       });
@@ -375,7 +447,7 @@ var ColorPickerVue2 = {
       var currentValue = isPalette ? event.rgbaValue : event.value;
 
       if (!this.isValueControlled) {
-        this.stateValue = currentValue;
+        this.currentValue = currentValue;
       }
 
       if (isPalette) {
@@ -387,6 +459,9 @@ var ColorPickerVue2 = {
         event: event
       });
     },
+    onGradientChangeHandler: function onGradientChangeHandler(event) {
+      this.onChangeHandler(event, false);
+    },
     onPaletteChangeHandler: function onPaletteChangeHandler(event) {
       this.onChangeHandler(event, true);
     }

package/dist/es/colors/FlatColorPicker.js

@@ -63,6 +63,8 @@ var FlatColorPickerVue2 = {
   },
   // @ts-ignore
   render: function render(createElement) {
+    var _this2 = this;
+
     var _this = this;
 
     var h = gh || createElement;
@@ -87,16 +89,24 @@ var FlatColorPickerVue2 = {
       return [// @ts-ignore  function children
       h(Button, {
         type: "button",
-        attrs: _this.v3 ? undefined : {
+        attrs: _this2.v3 ? undefined : {
           type: "button",
           togglable: true,
           fillMode: 'flat',
-          selected: _this.colorGradientView
+          selected: _this2.isColorGradient
         },
         togglable: true,
         fillMode: 'flat',
-        selected: _this.colorGradientView
-      }, _this.v3 ? function () {
+        selected: _this2.isColorGradient,
+        onClick: function onClick(e) {
+          return _this.handleViewChange(e, 'ColorGradient');
+        },
+        on: _this2.v3 ? undefined : {
+          "click": function onClick(e) {
+            return _this.handleViewChange(e, 'ColorGradient');
+          }
+        }
+      }, _this2.v3 ? function () {
         return [h("span", {
           "class": "k-icon k-i-color-canvas"
         })];
@@ -105,16 +115,24 @@ var FlatColorPickerVue2 = {
       })]), // @ts-ignore  function children
       h(Button, {
         type: "button",
-        attrs: _this.v3 ? undefined : {
+        attrs: _this2.v3 ? undefined : {
           type: "button",
           togglable: true,
           fillMode: 'flat',
-          selected: !_this.colorGradientView
+          selected: !_this2.isColorGradient
         },
         togglable: true,
         fillMode: 'flat',
-        selected: !_this.colorGradientView
-      }, _this.v3 ? function () {
+        selected: !_this2.isColorGradient,
+        onClick: function onClick(e) {
+          return _this.handleViewChange(e, 'ColorPalette');
+        },
+        on: _this2.v3 ? undefined : {
+          "click": function onClick(e) {
+            return _this.handleViewChange(e, 'ColorPalette');
+          }
+        }
+      }, _this2.v3 ? function () {
         return [h("span", {
           "class": "k-icon k-i-palette"
         })];
@@ -123,16 +141,24 @@ var FlatColorPickerVue2 = {
       })])];
     } : [h(Button, {
       type: "button",
-      attrs: _this.v3 ? undefined : {
+      attrs: _this2.v3 ? undefined : {
         type: "button",
         togglable: true,
         fillMode: 'flat',
-        selected: _this.colorGradientView
+        selected: _this2.isColorGradient
       },
       togglable: true,
       fillMode: 'flat',
-      selected: _this.colorGradientView
-    }, _this.v3 ? function () {
+      selected: _this2.isColorGradient,
+      onClick: function onClick(e) {
+        return _this.handleViewChange(e, 'ColorGradient');
+      },
+      on: _this2.v3 ? undefined : {
+        "click": function onClick(e) {
+          return _this.handleViewChange(e, 'ColorGradient');
+        }
+      }
+    }, _this2.v3 ? function () {
       return [h("span", {
         "class": "k-icon k-i-color-canvas"
       })];
@@ -140,16 +166,24 @@ var FlatColorPickerVue2 = {
       "class": "k-icon k-i-color-canvas"
     })]), h(Button, {
       type: "button",
-      attrs: _this.v3 ? undefined : {
+      attrs: _this2.v3 ? undefined : {
         type: "button",
         togglable: true,
         fillMode: 'flat',
-        selected: !_this.colorGradientView
+        selected: !_this2.isColorGradient
       },
       togglable: true,
       fillMode: 'flat',
-      selected: !_this.colorGradientView
-    }, _this.v3 ? function () {
+      selected: !_this2.isColorGradient,
+      onClick: function onClick(e) {
+        return _this.handleViewChange(e, 'ColorPalette');
+      },
+      on: _this2.v3 ? undefined : {
+        "click": function onClick(e) {
+          return _this.handleViewChange(e, 'ColorPalette');
+        }
+      }
+    }, _this2.v3 ? function () {
       return [h("span", {
         "class": "k-icon k-i-palette"
       })];
@@ -254,8 +288,12 @@ var FlatColorPickerVue2 = {
         this.$el.focus();
       }
     },
-    handleViewChange: function handleViewChange(viewType) {
+    handleViewChange: function handleViewChange(event, viewType) {
       this.currentView = viewType;
+      this.$emit('viewchange', {
+        event: event,
+        viewType: viewType
+      });
     },
     handleResetColor: function handleResetColor() {
       this.colorValue = 'rgba(255, 255, 255, 1)';
@@ -278,7 +316,7 @@ var FlatColorPickerVue2 = {
       }
     },
     handleFlatColorPickerBlur: function handleFlatColorPickerBlur() {
-      this.prevColor(this.colorValue);
+      this.prevColor = this.colorValue;
     }
   }
 };

package/dist/es/colors/HexInput.js

@@ -12,16 +12,27 @@ import { Input } from '../input/Input';
 
 var HexInputVue2 = {
   name: 'KendoHexInput',
+  // @ts-ignore
+  emits: {
+    'hexchange': null,
+    'blur': null,
+    'focus': null
+  },
   props: {
     hex: String,
     disabled: Boolean
   },
   data: function data() {
     return {
-      hex: this.$props.hex,
+      currentHex: this.$props.hex,
       originalHex: this.$props.hex
     };
   },
+  computed: {
+    computedHex: function computedHex() {
+      return this.hex !== undefined ? this.hex : this.currentHex;
+    }
+  },
   // @ts-ignore
   setup: !isV3 ? undefined : function () {
     var v3 = !!isV3;
@@ -33,16 +44,18 @@ var HexInputVue2 = {
   render: function render(createElement) {
     var h = gh || createElement;
     return h(Input, {
-      value: this.hex,
+      value: this.computedHex,
       attrs: this.v3 ? undefined : {
-        value: this.hex,
+        value: this.computedHex,
         disabled: this.$props.disabled
       },
       onChange: this.onChange,
       on: this.v3 ? undefined : {
         "change": this.onChange,
+        "focus": this.onFocus,
         "blur": this.onBlur
       },
+      onFocus: this.onFocus,
       onBlur: this.onBlur,
       disabled: this.$props.disabled
     });
@@ -51,16 +64,21 @@ var HexInputVue2 = {
     onChange: function onChange(event) {
       var hex = event.target.value;
       var value = parseColor(hex, 'rgba');
-      this.hex = hex;
+      this.currentHex = hex;
 
       if (isPresent(value)) {
-        this.$props.onHexChange(hex, value, event);
+        this.$emit('hexchange', hex, value, event);
       }
     },
-    onBlur: function onBlur() {
+    onBlur: function onBlur(event) {
       if (!isPresent(parseColor(this.hex, 'rgba'))) {
-        this.hex = this.originalHex;
+        this.currentHex = this.originalHex;
       }
+
+      this.$emit('blur', event);
+    },
+    onFocus: function onFocus(event) {
+      this.$emit('focus', event);
     }
   }
 };

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

@@ -5,6 +5,7 @@ import { ColorPickerActiveColorClick } from './ColorPickerActiveColorClick';
 import { ColorPickerPopupSettings } from './ColorPickerPopupSettings';
 import { ColorPickerPaletteSettings } from './ColorPickerPaletteSettings';
 import { ColorPickerView } from './ColorPickerView';
+import { ColorGradientProps } from './ColorGradientProps';
 /**
  * Represents the props of the [Kendo UI for Vue ColorPicker component]({% slug overview_colorpicker %}).
  */
@@ -46,7 +47,7 @@ export interface ColorPickerProps {
      * Sets the view which the ColorPicker will render in the popup
      * ([see example]({% slug combinedview_colorpicker %})).
      */
-    view?: ColorPickerView;
+    view?: ColorPickerView | string;
     /**
      * Represents the `dir` HTML attribute.
      */
@@ -68,6 +69,10 @@ export interface ColorPickerProps {
      * ([see example]({% slug customizecolorpicker_colorpicker %}#toc-customizing-the-palette-popup)).
      */
     paletteSettings?: ColorPickerPaletteSettings;
+    /**
+     * Configures the ColorGradient that is displayed in the ColorPicker popup.
+     */
+    gradientSettings?: ColorGradientProps;
     /**
      * Configures the popup of the ColorPicker.
      */

package/dist/es/colors/utils/color-palette.service.d.ts

@@ -5,6 +5,7 @@ import { TableCell } from '../models/table-cell';
 export declare class ColorPaletteService {
     colorRows: string[][];
     setColorMatrix(palette: string[], columns: number): void;
+    isInColors(colors: any, current: any): boolean;
     getCellCoordsFor(color?: string): TableCell | undefined;
     getColorAt(cellCoords: TableCell): string | undefined;
     getNextCell(current: TableCell, horizontalStep: number, verticalStep: number): TableCell;