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

package/dist/npm/colors/ColorGradient.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_common_1 = require("@progress/kendo-vue-common");
 
@@ -31,6 +31,10 @@ var ColorContrastLabels_1 = require("./ColorContrastLabels");
 
 var ColorContrastSvg_1 = require("./ColorContrastSvg");
 
+var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
+
+var messages_1 = require("../messages");
+
 var FORMAT = 'rgba';
 var DEFAULT_SELECTED_COLOR = 'rgba(255, 255, 255, 1)';
 /**
@@ -39,14 +43,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: {
@@ -57,7 +74,12 @@ var ColorGradientVue2 = {
     disabled: Boolean,
     id: String,
     ariaLabelledBy: String,
-    ariaDescribedBy: String
+    ariaDescribedBy: String,
+    tabIndex: Number,
+    innerTabIndex: {
+      type: Number,
+      default: undefined
+    }
   },
   created: function created() {
     kendo_vue_common_2.validatePackage(package_metadata_1.packageMetadata);
@@ -68,9 +90,9 @@ var ColorGradientVue2 = {
       return this.$props.value === undefined;
     },
     computedValue: function computedValue() {
-      var value = this.value || this.defaultValue || this.currentValue || color_parser_1.parseColor(DEFAULT_SELECTED_COLOR, FORMAT);
+      var value = this.value || this.defaultValue || this.modelValue || this.modelRgbaValue || this.currentValue || color_parser_1.parseColor(DEFAULT_SELECTED_COLOR, FORMAT);
 
-      if (!misc_1.isPresent(color_parser_1.parseColor(value, 'hex'))) {
+      if (!misc_1.isPresent(color_parser_1.parseColor(value, 'hex', this.opacity))) {
         // Validate/sanitize the input.
         value = DEFAULT_SELECTED_COLOR;
       }
@@ -84,10 +106,13 @@ var ColorGradientVue2 = {
       return this.currentRgba || color_cache_1.getCachedRgba(this.guid, this.computedValue) || color_parser_1.getRGBA(this.computedValue);
     },
     hex: function hex() {
-      return this.currentHex || 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', this.opacity);
     },
     computedBgColor: function computedBgColor() {
-      return this.backgroundColor !== undefined ? this.backgroundColor : this.currentBgColor || color_parser_1.getColorFromHue(this.hsva.h);
+      return this.currentBgColor || color_parser_1.getColorFromHue(this.hsva.h);
+    },
+    computedTabIndex: function computedTabIndex() {
+      return this.innerTabIndex !== undefined ? this.innerTabIndex : this.focused ? 0 : -1;
     }
   },
   data: function data() {
@@ -97,7 +122,8 @@ var ColorGradientVue2 = {
       isFirstRender: true,
       currentHsva: undefined,
       currentRgba: undefined,
-      currentHex: undefined
+      currentHex: undefined,
+      focused: false
     };
   },
   mounted: function mounted() {
@@ -118,8 +144,7 @@ var ColorGradientVue2 = {
     color_cache_1.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 () {
@@ -138,6 +163,8 @@ var ColorGradientVue2 = {
     var className = kendo_vue_common_1.classNames('k-colorgradient', {
       'k-disabled': this.$props.disabled
     });
+    var localizationService = kendo_vue_intl_1.provideLocalizationService(this);
+    var dragHandle = localizationService.toLanguageString(messages_1.colorGradientDragHandle, messages_1.messages[messages_1.colorGradientDragHandle]);
 
     var renderRectangleDragHandle = function renderRectangleDragHandle() {
       var style = {};
@@ -152,7 +179,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: kendo_vue_common_1.setRef(this, 'draghandle')
       });
     };
 
@@ -160,23 +204,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: kendo_vue_common_1.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: kendo_vue_common_1.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"
@@ -200,6 +246,10 @@ var ColorGradientVue2 = {
         style: {
           touchAction: 'none'
         },
+        tabindex: -1,
+        attrs: _this2.v3 ? undefined : {
+          tabindex: -1
+        },
         onClick: _this2.onGradientWrapperClick,
         on: _this2.v3 ? undefined : {
           "click": _this2.onGradientWrapperClick
@@ -210,24 +260,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_1.ColorContrastSvg, {
+    }, [renderRectangleDragHandle.call(_this2)])]), this.backgroundColor && !this.isFirstRender && h(ColorContrastSvg_1.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(main_1.Slider, {
-      value: this.hsva.h,
+      tabIndex: this.computedTabIndex,
       attrs: this.v3 ? undefined : {
+        tabIndex: this.computedTabIndex,
         value: this.hsva.h,
         buttons: false,
         vertical: true,
@@ -236,6 +291,7 @@ var ColorGradientVue2 = {
         step: 5,
         disabled: this.$props.disabled
       },
+      value: this.hsva.h,
       buttons: false,
       vertical: true,
       min: 0,
@@ -243,17 +299,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(main_1.Slider, {
-      value: misc_1.isPresent(this.hsva.a) ? this.hsva.a * 100 : 100,
+      tabIndex: this.computedTabIndex,
       attrs: this.v3 ? undefined : {
+        tabIndex: this.computedTabIndex,
         value: misc_1.isPresent(this.hsva.a) ? this.hsva.a * 100 : 100,
         buttons: false,
         vertical: true,
@@ -262,6 +315,7 @@ var ColorGradientVue2 = {
         step: 1,
         disabled: this.$props.disabled
       },
+      value: misc_1.isPresent(this.hsva.a) ? this.hsva.a * 100 : 100,
       buttons: false,
       vertical: true,
       min: 0,
@@ -269,77 +323,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_1.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_1.ColorContrastLabels, {
-      bgColor: color_parser_1.getRGBA(this.computedBgColor),
+      disabled: this.$props.disabled,
+      ref: 'colorInput'
+    }), this.backgroundColor && h(ColorContrastLabels_1.ColorContrastLabels, {
+      bgColor: color_parser_1.getRGBA(this.backgroundColor),
       attrs: this.v3 ? undefined : {
-        bgColor: color_parser_1.getRGBA(this.computedBgColor),
+        bgColor: color_parser_1.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 = kendo_vue_common_1.focusContainer(e, element);
+      }
+
       this.$emit('keydown', e);
     },
     onHexChange: function onHexChange(hex, value, event) {
+      var rgba = color_parser_1.getRGBA(value);
+
       if (this.isUncontrolled) {
         var hsva = color_parser_1.getHSV(value);
         this.currentHsva = hsva;
         this.currentBgColor = color_parser_1.getColorFromHue(hsva.h);
-        this.currentRgba = color_parser_1.getRGBA(value);
+        this.currentRgba = rgba;
         this.currentHex = hex;
       } else {
         color_cache_1.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 = color_parser_1.getColorFromRGBA(rgba);
+      var hex = color_parser_1.parseColor(value, 'hex', this.opacity);
 
       if (this.isUncontrolled) {
         var hsva = color_parser_1.getHSV(value);
-        var hex = color_parser_1.parseColor(value, 'hex');
         this.currentHsva = hsva;
         this.currentBgColor = color_parser_1.getColorFromHue(hsva.h);
         this.currentRgba = rgba;
@@ -348,7 +398,7 @@ var ColorGradientVue2 = {
         color_cache_1.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, {
@@ -368,8 +418,53 @@ var ColorGradientVue2 = {
       this.gradientWrapper.classList.remove('k-dragging');
     },
     onGradientWrapperClick: function onGradientWrapperClick(event) {
+      this.firstFocusable = kendo_vue_common_1.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 kendo_vue_common_1.Keys.left:
+          this.move(e, 's', -1);
+          break;
+
+        case kendo_vue_common_1.Keys.right:
+          this.move(e, 's', 1);
+          break;
+
+        case kendo_vue_common_1.Keys.up:
+          this.move(e, 'v', 1);
+          break;
+
+        case kendo_vue_common_1.Keys.down:
+          this.move(e, 'v', -1);
+          break;
+
+        case kendo_vue_common_1.Keys.enter:
+          break;
+
+        case kendo_vue_common_1.Keys.esc:
+          break;
+
+        default:
+          break;
+      }
+    },
     changePosition: function changePosition(event) {
       var gradientRectMetrics = this.getGradientRectMetrics();
       var deltaX = event.clientX - gradientRectMetrics.left;
@@ -384,9 +479,10 @@ var ColorGradientVue2 = {
     },
     handleHsvaChange: function handleHsvaChange(hsva, event) {
       var value = color_parser_1.getColorFromHSV(hsva);
+      var hex = color_parser_1.parseColor(value, 'hex', this.opacity);
+      var rgba = color_parser_1.parseColor(value, 'rgba');
 
       if (this.isUncontrolled) {
-        var hex = color_parser_1.parseColor(value, 'hex');
         this.currentHsva = hsva;
         this.currentBgColor = color_parser_1.getColorFromHue(hsva.h);
         this.currentRgba = color_parser_1.getRGBA(value);
@@ -395,14 +491,18 @@ var ColorGradientVue2 = {
         color_cache_1.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) {
@@ -436,7 +536,12 @@ var ColorGradientVue2 = {
       };
     },
     focus: function focus() {
-      kendo_vue_common_1.focusFirstFocusableChild(this.$el);
+      var _this = this;
+
+      this.focused = true;
+      setTimeout(function () {
+        kendo_vue_common_1.focusFirstFocusableChild(_this.$el);
+      }, 1);
     }
   }
 };

package/dist/npm/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