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

package/dist/es/colors/ColorGradient.js

@@ -2,8 +2,8 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
-var isV3 = allVue.version[0] === '3';
-import { Draggable, guid, classNames, focusFirstFocusableChild, getTabIndex } from '@progress/kendo-vue-common';
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { Draggable, guid, classNames, focusFirstFocusableChild, getTabIndex, Keys, setRef, getRef, focusContainer } from '@progress/kendo-vue-common';
 import { validatePackage } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
 import { Slider } from './../main';
@@ -13,6 +13,8 @@ import { cacheHsva, removeCachedColor, getCachedHsva, getCachedRgba, getCachedHe
 import { ColorInput } from './ColorInput';
 import { ColorContrastLabels } from './ColorContrastLabels';
 import { ColorContrastSvg } from './ColorContrastSvg';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { colorGradientDragHandle, messages } from '../messages';
 var FORMAT = 'rgba';
 var DEFAULT_SELECTED_COLOR = 'rgba(255, 255, 255, 1)';
 /**
@@ -21,14 +23,27 @@ var DEFAULT_SELECTED_COLOR = 'rgba(255, 255, 255, 1)';
 
 var ColorGradientVue2 = {
   name: 'KendoColorGradient',
+  model: {
+    event: 'changemodel'
+  },
   // @ts-ignore
   emits: {
     'change': null,
     'focus': null,
     'blur': null,
+    'changemodel': null,
+    'update:modelValue': null,
+    'update:modelRgbaValue': null,
     'keydown': null
   },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
   props: {
+    modelValue: String,
+    modelRgbaValue: String,
     defaultValue: String,
     value: String,
     opacity: {
@@ -39,7 +54,12 @@ var ColorGradientVue2 = {
     disabled: Boolean,
     id: String,
     ariaLabelledBy: String,
-    ariaDescribedBy: String
+    ariaDescribedBy: String,
+    tabIndex: Number,
+    innerTabIndex: {
+      type: Number,
+      default: undefined
+    }
   },
   created: function created() {
     validatePackage(packageMetadata);
@@ -50,9 +70,9 @@ var ColorGradientVue2 = {
       return this.$props.value === undefined;
     },
     computedValue: function computedValue() {
-      var value = this.value || this.defaultValue || this.currentValue || parseColor(DEFAULT_SELECTED_COLOR, FORMAT);
+      var value = this.value || this.defaultValue || this.modelValue || this.modelRgbaValue || this.currentValue || parseColor(DEFAULT_SELECTED_COLOR, FORMAT);
 
-      if (!isPresent(parseColor(value, 'hex'))) {
+      if (!isPresent(parseColor(value, 'hex', this.opacity))) {
         // Validate/sanitize the input.
         value = DEFAULT_SELECTED_COLOR;
       }
@@ -66,10 +86,13 @@ var ColorGradientVue2 = {
       return this.currentRgba || getCachedRgba(this.guid, this.computedValue) || getRGBA(this.computedValue);
     },
     hex: function hex() {
-      return this.currentHex || getCachedHex(this.guid, this.computedValue) || parseColor(this.computedValue, 'hex');
+      return this.currentHex || getCachedHex(this.guid, this.computedValue) || parseColor(this.computedValue, 'hex', this.opacity);
     },
     computedBgColor: function computedBgColor() {
-      return this.backgroundColor !== undefined ? this.backgroundColor : this.currentBgColor || getColorFromHue(this.hsva.h);
+      return this.currentBgColor || getColorFromHue(this.hsva.h);
+    },
+    computedTabIndex: function computedTabIndex() {
+      return this.innerTabIndex !== undefined ? this.innerTabIndex : this.focused ? 0 : -1;
     }
   },
   data: function data() {
@@ -79,7 +102,8 @@ var ColorGradientVue2 = {
       isFirstRender: true,
       currentHsva: undefined,
       currentRgba: undefined,
-      currentHex: undefined
+      currentHex: undefined,
+      focused: false
     };
   },
   mounted: function mounted() {
@@ -100,8 +124,7 @@ var ColorGradientVue2 = {
     removeCachedColor(this.guid);
   },
   updated: function updated() {
-    // if (prevState.backgroundColor !== this.backgroundColor) {
-    this.setAlphaSliderBackground(this.computedBgColor); // }
+    this.setAlphaSliderBackground(this.computedBgColor);
   },
   // @ts-ignore
   setup: !isV3 ? undefined : function () {
@@ -120,6 +143,8 @@ var ColorGradientVue2 = {
     var className = classNames('k-colorgradient', {
       'k-disabled': this.$props.disabled
     });
+    var localizationService = provideLocalizationService(this);
+    var dragHandle = localizationService.toLanguageString(colorGradientDragHandle, messages[colorGradientDragHandle]);
 
     var renderRectangleDragHandle = function renderRectangleDragHandle() {
       var style = {};
@@ -134,7 +159,24 @@ var ColorGradientVue2 = {
 
       return h("div", {
         "class": "k-hsv-draghandle k-draghandle",
-        style: style
+        role: "slider",
+        attrs: this.v3 ? undefined : {
+          role: "slider",
+          "aria-label": dragHandle + ("" + (this.value || 'none')),
+          "aria-valuenow": Math.round(this.hsva.s * 100),
+          "aria-valuetext": "\n                    saturation: " + Math.round(this.hsva.s * 100) + "%,\n                    value: " + Math.round(this.hsva.v * 100) + "%",
+          tabindex: this.computedTabIndex
+        },
+        "aria-label": dragHandle + ("" + (this.value || 'none')),
+        "aria-valuenow": Math.round(this.hsva.s * 100),
+        "aria-valuetext": "\n                    saturation: " + Math.round(this.hsva.s * 100) + "%,\n                    value: " + Math.round(this.hsva.v * 100) + "%",
+        tabindex: this.computedTabIndex,
+        onKeydown: this.dragKeyDown,
+        on: this.v3 ? undefined : {
+          "keydown": this.dragKeyDown
+        },
+        style: style,
+        ref: setRef(this, 'draghandle')
       });
     };
 
@@ -142,23 +184,25 @@ var ColorGradientVue2 = {
       id: this.$props.id,
       attrs: this.v3 ? undefined : {
         id: this.$props.id,
-        "aria-disabled": this.$props.disabled ? 'true' : undefined,
+        role: this.$props.tabIndex !== -1 ? 'textbox' : undefined,
+        "aria-disabled": this.$props.disabled,
         tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled),
         "aria-labelledby": this.$props.ariaLabelledBy,
         "aria-describedby": this.$props.ariaDescribedBy
       },
       "class": className,
-      "aria-disabled": this.$props.disabled ? 'true' : undefined,
+      role: this.$props.tabIndex !== -1 ? 'textbox' : undefined,
+      "aria-disabled": this.$props.disabled,
       tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled),
       "aria-labelledby": this.$props.ariaLabelledBy,
       "aria-describedby": this.$props.ariaDescribedBy,
-      onFocus: this.onFocus,
+      onFocusin: this.onFocus,
       on: this.v3 ? undefined : {
-        "focus": this.onFocus,
-        "blur": this.onBlur,
+        "focusin": this.onFocus,
+        "focusout": this.onBlur,
         "keydown": this.onKeyDownHandler
       },
-      onBlur: this.onBlur,
+      onFocusout: this.onBlur,
       onKeydown: this.onKeyDownHandler
     }, [h("div", {
       "class": "k-colorgradient-canvas k-hstack"
@@ -182,6 +226,10 @@ var ColorGradientVue2 = {
         style: {
           touchAction: 'none'
         },
+        tabindex: -1,
+        attrs: _this2.v3 ? undefined : {
+          tabindex: -1
+        },
         onClick: _this2.onGradientWrapperClick,
         on: _this2.v3 ? undefined : {
           "click": _this2.onGradientWrapperClick
@@ -192,24 +240,29 @@ var ColorGradientVue2 = {
       style: {
         touchAction: 'none'
       },
+      tabindex: -1,
+      attrs: _this2.v3 ? undefined : {
+        tabindex: -1
+      },
       onClick: _this2.onGradientWrapperClick,
       on: _this2.v3 ? undefined : {
         "click": _this2.onGradientWrapperClick
       }
-    }, [renderRectangleDragHandle.call(_this2)])]), this.computedBgColor && !this.isFirstRender && h(ColorContrastSvg, {
+    }, [renderRectangleDragHandle.call(_this2)])]), this.backgroundColor && !this.isFirstRender && h(ColorContrastSvg, {
       metrics: this.gradientWrapper ? this.getGradientRectMetrics() : undefined,
       attrs: this.v3 ? undefined : {
         metrics: this.gradientWrapper ? this.getGradientRectMetrics() : undefined,
         hsva: this.hsva,
-        backgroundColor: this.computedBgColor
+        backgroundColor: this.backgroundColor
       },
       hsva: this.hsva,
-      backgroundColor: this.computedBgColor
+      backgroundColor: this.backgroundColor
     })]), h("div", {
       "class": "k-hsv-controls k-hstack"
     }, [h(Slider, {
-      value: this.hsva.h,
+      tabIndex: this.computedTabIndex,
       attrs: this.v3 ? undefined : {
+        tabIndex: this.computedTabIndex,
         value: this.hsva.h,
         buttons: false,
         vertical: true,
@@ -218,6 +271,7 @@ var ColorGradientVue2 = {
         step: 5,
         disabled: this.$props.disabled
       },
+      value: this.hsva.h,
       buttons: false,
       vertical: true,
       min: 0,
@@ -225,17 +279,14 @@ var ColorGradientVue2 = {
       step: 5,
       onChange: this.onHueSliderChange,
       on: this.v3 ? undefined : {
-        "change": this.onHueSliderChange,
-        "focus": this.onFocus,
-        "blur": this.onBlur
+        "change": this.onHueSliderChange
       },
-      onFocus: this.onFocus,
-      onBlur: this.onBlur,
       "class": "k-hue-slider k-colorgradient-slider",
       disabled: this.$props.disabled
     }), this.$props.opacity && h(Slider, {
-      value: isPresent(this.hsva.a) ? this.hsva.a * 100 : 100,
+      tabIndex: this.computedTabIndex,
       attrs: this.v3 ? undefined : {
+        tabIndex: this.computedTabIndex,
         value: isPresent(this.hsva.a) ? this.hsva.a * 100 : 100,
         buttons: false,
         vertical: true,
@@ -244,6 +295,7 @@ var ColorGradientVue2 = {
         step: 1,
         disabled: this.$props.disabled
       },
+      value: isPresent(this.hsva.a) ? this.hsva.a * 100 : 100,
       buttons: false,
       vertical: true,
       min: 0,
@@ -251,77 +303,73 @@ var ColorGradientVue2 = {
       step: 1,
       onChange: this.onAlphaSliderChange,
       on: this.v3 ? undefined : {
-        "change": this.onAlphaSliderChange,
-        "focus": this.onFocus,
-        "blur": this.onBlur
+        "change": this.onAlphaSliderChange
       },
-      onFocus: this.onFocus,
-      onBlur: this.onBlur,
       "class": "k-alpha-slider k-colorgradient-slider",
       disabled: this.$props.disabled,
       ref: this.v3 ? function (el) {
         _this.alphaSliderRef = el;
       } : 'alphaSlider'
     })])]), h(ColorInput, {
-      rgba: this.rgba,
+      tabIndex: this.computedTabIndex,
       attrs: this.v3 ? undefined : {
+        tabIndex: this.computedTabIndex,
         rgba: this.rgba,
         hex: this.hex,
         opacity: this.$props.opacity,
         disabled: this.$props.disabled
       },
+      rgba: this.rgba,
       onRgbachange: this.onRgbaChange,
       on: this.v3 ? undefined : {
         "rgbachange": this.onRgbaChange,
-        "focus": this.onFocus,
-        "blur": this.onBlur,
         "hexchange": this.onHexChange
       },
       hex: this.hex,
-      onFocus: this.onFocus,
-      onBlur: this.onBlur,
       onHexchange: this.onHexChange,
       opacity: this.$props.opacity,
-      disabled: this.$props.disabled
-    }), this.computedBgColor && h(ColorContrastLabels, {
-      bgColor: getRGBA(this.computedBgColor),
+      disabled: this.$props.disabled,
+      ref: 'colorInput'
+    }), this.backgroundColor && h(ColorContrastLabels, {
+      bgColor: getRGBA(this.backgroundColor),
       attrs: this.v3 ? undefined : {
-        bgColor: getRGBA(this.computedBgColor),
+        bgColor: getRGBA(this.backgroundColor),
         rgba: this.rgba
       },
       rgba: this.rgba
     })]);
   },
   methods: {
-    // getDerivedStateFromProps(props: ColorGradientProps, state: ColorGradientState) {
-    //     if (props.value && !state.isFirstRender) {
-    //         // The component is in controlled mode.
-    //         return ColorGradientWithoutContext.getStateFromValue(props.value, state.guid);
-    //     }
-    //     return null;
-    // },
     onKeyDownHandler: function onKeyDownHandler(e) {
+      var element = this.$el;
+
+      if (this.innerTabIndex === undefined) {
+        this.focused = focusContainer(e, element);
+      }
+
       this.$emit('keydown', e);
     },
     onHexChange: function onHexChange(hex, value, event) {
+      var rgba = getRGBA(value);
+
       if (this.isUncontrolled) {
         var hsva = getHSV(value);
         this.currentHsva = hsva;
         this.currentBgColor = getColorFromHue(hsva.h);
-        this.currentRgba = getRGBA(value);
+        this.currentRgba = rgba;
         this.currentHex = hex;
       } else {
         cacheHex(this.guid, value, hex);
       }
 
-      this.dispatchChangeEvent(value, event, event.nativeEvent);
+      this.dispatchChangeEvent(value, event.event, hex, value);
     },
     onRgbaChange: function onRgbaChange(rgba, event) {
       var value = getColorFromRGBA(rgba);
+      var hex = parseColor(value, 'hex', this.opacity);
 
       if (this.isUncontrolled) {
         var hsva = getHSV(value);
-        var hex = parseColor(value, 'hex');
         this.currentHsva = hsva;
         this.currentBgColor = getColorFromHue(hsva.h);
         this.currentRgba = rgba;
@@ -330,7 +378,7 @@ var ColorGradientVue2 = {
         cacheRgba(this.guid, value, rgba);
       }
 
-      this.dispatchChangeEvent(value, event.event);
+      this.dispatchChangeEvent(value, event.event, hex, value);
     },
     onAlphaSliderChange: function onAlphaSliderChange(event) {
       this.handleHsvaChange(Object.assign({}, this.hsva, {
@@ -350,8 +398,53 @@ var ColorGradientVue2 = {
       this.gradientWrapper.classList.remove('k-dragging');
     },
     onGradientWrapperClick: function onGradientWrapperClick(event) {
+      this.firstFocusable = getRef(this, 'draghandle');
+      this.firstFocusable.focus();
       this.changePosition(event);
     },
+    move: function move(e, prop, d) {
+      var c = this.hsva;
+      c[prop] += d * (e.shiftKey ? 0.01 : 0.05);
+
+      if (c[prop] < 0) {
+        c[prop] = 0;
+      }
+
+      if (c[prop] > 1) {
+        c[prop] = 1;
+      }
+
+      e.preventDefault();
+      this.handleHsvaChange(c, e);
+    },
+    dragKeyDown: function dragKeyDown(e) {
+      switch (e.keyCode) {
+        case Keys.left:
+          this.move(e, 's', -1);
+          break;
+
+        case Keys.right:
+          this.move(e, 's', 1);
+          break;
+
+        case Keys.up:
+          this.move(e, 'v', 1);
+          break;
+
+        case Keys.down:
+          this.move(e, 'v', -1);
+          break;
+
+        case Keys.enter:
+          break;
+
+        case Keys.esc:
+          break;
+
+        default:
+          break;
+      }
+    },
     changePosition: function changePosition(event) {
       var gradientRectMetrics = this.getGradientRectMetrics();
       var deltaX = event.clientX - gradientRectMetrics.left;
@@ -366,9 +459,10 @@ var ColorGradientVue2 = {
     },
     handleHsvaChange: function handleHsvaChange(hsva, event) {
       var value = getColorFromHSV(hsva);
+      var hex = parseColor(value, 'hex', this.opacity);
+      var rgba = parseColor(value, 'rgba');
 
       if (this.isUncontrolled) {
-        var hex = parseColor(value, 'hex');
         this.currentHsva = hsva;
         this.currentBgColor = getColorFromHue(hsva.h);
         this.currentRgba = getRGBA(value);
@@ -377,14 +471,18 @@ var ColorGradientVue2 = {
         cacheHsva(this.guid, value, hsva);
       }
 
-      this.dispatchChangeEvent(value, event);
+      this.dispatchChangeEvent(value, event, hex, rgba);
     },
-    dispatchChangeEvent: function dispatchChangeEvent(value, event) {
+    dispatchChangeEvent: function dispatchChangeEvent(value, event, hex, rgbaValue) {
       this.currentValue = value;
+      this.$emit('changemodel', hex);
+      this.$emit('update:modelRgbaValue', rgbaValue);
+      this.$emit('update:modelValue', hex);
       this.$emit('change', {
         event: event,
         target: this,
-        value: value
+        value: hex,
+        rgbaValue: rgbaValue
       });
     },
     onFocus: function onFocus(event) {
@@ -418,7 +516,12 @@ var ColorGradientVue2 = {
       };
     },
     focus: function focus() {
-      focusFirstFocusableChild(this.$el);
+      var _this = this;
+
+      this.focused = true;
+      setTimeout(function () {
+        focusFirstFocusableChild(_this.$el);
+      }, 1);
     }
   }
 };

package/dist/es/colors/ColorInput.d.ts

@@ -9,6 +9,7 @@ import { RGBA } from './models/rgba';
  * @hidden
  */
 export interface ColorInputProps {
+    tabIndex?: number;
     rgba: RGBA;
     onRgbaChange?: (rgba: RGBA, event: NumericTextBoxChangeEvent) => void;
     hex: string;
@@ -20,6 +21,8 @@ export interface ColorInputProps {
  * @hidden
  */
 export interface ColorInputState {
+    lastFocusable: any;
+    hexInputId: string;
 }
 /**
  * @hidden