@progress/kendo-vue-inputs 3.4.4 → 3.4.5

package/dist/npm/colors/ColorInput.js

@@ -38,6 +38,8 @@ var kendo_vue_labels_1 = require("@progress/kendo-vue-labels");
 var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
 
 var messages_1 = require("../messages");
+
+var kendo_vue_common_1 = require("@progress/kendo-vue-common");
 /**
  * @hidden
  */
@@ -52,12 +54,11 @@ var ColorInputVue2 = {
   name: 'KendoColorInput',
   // @ts-ignore
   emits: {
-    'focus': null,
-    'blur': null,
     'hexchange': null,
     'rgbachange': null
   },
   props: {
+    tabIndex: Number,
     rgba: Object,
     hex: String,
     opacity: Boolean,
@@ -68,11 +69,20 @@ var ColorInputVue2 = {
       default: null
     }
   },
+  created: function created() {
+    this.hexInputId = kendo_vue_common_1.guid();
+  },
   data: function data() {
     return {
       inputMode: modes[1]
     };
   },
+  mounted: function mounted() {
+    this.lastFocusable = this.$refs.hexinput || this.$refs.numerica || this.$refs.numericb;
+  },
+  updated: function updated() {
+    this.lastFocusable = this.$refs.hexinput || this.$refs.numerica || this.$refs.numericb;
+  },
   // @ts-ignore
   setup: !isV3 ? undefined : function () {
     var v3 = !!isV3;
@@ -84,79 +94,93 @@ var ColorInputVue2 = {
   render: function render(createElement) {
     var h = gh || createElement;
     var localizationService = kendo_vue_intl_1.provideLocalizationService(this);
-    var hexMessage = localizationService.toLanguageString(messages_1.colorGradientR, messages_1.messages[messages_1.colorGradientHex]);
+    var hexMessage = localizationService.toLanguageString(messages_1.colorGradientHex, messages_1.messages[messages_1.colorGradientHex]);
+    var buttonMessage = localizationService.toLanguageString(messages_1.colorGradientInputColorButton, messages_1.messages[messages_1.colorGradientInputColorButton]);
     var rMessage = localizationService.toLanguageString(messages_1.colorGradientR, messages_1.messages[messages_1.colorGradientR]);
-    var gMessage = localizationService.toLanguageString(messages_1.colorGradientR, messages_1.messages[messages_1.colorGradientG]);
-    var bMessage = localizationService.toLanguageString(messages_1.colorGradientR, messages_1.messages[messages_1.colorGradientB]);
-    var aMessage = localizationService.toLanguageString(messages_1.colorGradientR, messages_1.messages[messages_1.colorGradientA]);
+    var gMessage = localizationService.toLanguageString(messages_1.colorGradientG, messages_1.messages[messages_1.colorGradientG]);
+    var bMessage = localizationService.toLanguageString(messages_1.colorGradientB, messages_1.messages[messages_1.colorGradientB]);
+    var aMessage = localizationService.toLanguageString(messages_1.colorGradientA, messages_1.messages[messages_1.colorGradientA]);
+    var rLabelMessage = localizationService.toLanguageString(messages_1.colorGradientRLabel, messages_1.messages[messages_1.colorGradientRLabel]);
+    var gLabelMessage = localizationService.toLanguageString(messages_1.colorGradientGLabel, messages_1.messages[messages_1.colorGradientGLabel]);
+    var bLabelMessage = localizationService.toLanguageString(messages_1.colorGradientBLabel, messages_1.messages[messages_1.colorGradientBLabel]);
+    var aLabelMessage = localizationService.toLanguageString(messages_1.colorGradientALabel, messages_1.messages[messages_1.colorGradientALabel]);
     return h("div", {
       "class": "k-colorgradient-inputs k-hstack"
     }, [h("div", {
       "class": "k-vstack"
     }, [h(kendo_vue_buttons_1.Button, {
-      fillMode: 'flat',
+      ariaLabel: buttonMessage,
       attrs: this.v3 ? undefined : {
+        ariaLabel: buttonMessage,
+        tabIndex: this.tabIndex,
+        type: "button",
         fillMode: 'flat',
         icon: 'arrows-kpi'
       },
+      tabIndex: this.tabIndex,
+      type: "button",
+      fillMode: 'flat',
       icon: 'arrows-kpi',
-      onFocus: this.onFocus,
+      "class": "k-colorgradient-toggle-mode k-icon-button",
+      onClick: this.onToggleModeChange,
       on: this.v3 ? undefined : {
-        "focus": this.onFocus,
-        "blur": this.onBlur,
-        "click": this.onToggleModeChange
+        "click": this.onToggleModeChange,
+        "keydown": this.onKeyDown
       },
-      onBlur: this.onBlur,
-      "class": "k-colorgradient-toggle-mode k-icon-button",
-      onClick: this.onToggleModeChange
+      onKeydown: this.onKeyDown
     })]), this.inputMode === 'hex' && h("div", {
       "class": "k-vstack k-flex-1"
     }, [h("span", {
-      "class": "k-hex-value k-textbox k-input"
+      "class": "k-hex-value"
     }, [h(HexInput_1.HexInput, {
-      hex: this.$props.hex,
+      id: this.hexInputId,
       attrs: this.v3 ? undefined : {
+        id: this.hexInputId,
+        tabIndex: this.tabIndex,
         hex: this.$props.hex,
         disabled: this.$props.disabled
       },
-      onFocus: this.onFocus,
+      tabIndex: this.tabIndex,
+      hex: this.$props.hex,
+      onHexchange: this.onHexChange,
       on: this.v3 ? undefined : {
-        "focus": this.onFocus,
-        "blur": this.onBlur,
         "hexchange": this.onHexChange
       },
-      onBlur: this.onBlur,
-      onHexchange: this.onHexChange,
-      disabled: this.$props.disabled
+      disabled: this.$props.disabled,
+      ref: 'hexinput'
     })]), // @ts-ignore  function children
     h(kendo_vue_labels_1.Label, {
-      "class": "k-colorgradient-input-label"
+      "class": "k-colorgradient-input-label",
+      "for": this.hexInputId,
+      attrs: this.v3 ? undefined : {
+        "for": this.hexInputId
+      }
     }, this.v3 ? function () {
       return [hexMessage];
     } : [hexMessage])]), (this.inputMode === 'rgb' || this.inputMode === 'rgba') && [h("div", {
       "class": "k-vstack"
     }, [h(main_1.NumericTextBox, {
-      value: this.$props.rgba.r,
+      tabIndex: this.tabIndex,
       attrs: this.v3 ? undefined : {
+        tabIndex: this.tabIndex,
         value: this.$props.rgba.r,
         min: 0,
         max: 255,
         spinners: false,
         format: "n",
+        ariaLabel: rLabelMessage,
         disabled: this.$props.disabled
       },
+      value: this.$props.rgba.r,
       min: 0,
       max: 255,
       spinners: false,
       format: "n",
-      onFocus: this.onFocus,
+      ariaLabel: rLabelMessage,
+      onChange: this.onRgbaRChange,
       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, {
@@ -166,27 +190,27 @@ var ColorInputVue2 = {
     } : [rMessage])]), h("div", {
       "class": "k-vstack"
     }, [h(main_1.NumericTextBox, {
-      value: this.$props.rgba.g,
+      tabIndex: this.tabIndex,
       attrs: this.v3 ? undefined : {
+        tabIndex: this.tabIndex,
         value: this.$props.rgba.g,
         min: 0,
         max: 255,
         spinners: false,
         format: "n",
+        ariaLabel: gLabelMessage,
         disabled: this.$props.disabled
       },
+      value: this.$props.rgba.g,
       min: 0,
       max: 255,
       spinners: false,
       format: "n",
-      onFocus: this.onFocus,
+      ariaLabel: gLabelMessage,
+      onChange: this.onRgbaGChange,
       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, {
@@ -196,28 +220,29 @@ var ColorInputVue2 = {
     } : [gMessage])]), h("div", {
       "class": "k-vstack"
     }, [h(main_1.NumericTextBox, {
-      value: this.$props.rgba.b,
+      tabIndex: this.tabIndex,
       attrs: this.v3 ? undefined : {
+        tabIndex: this.tabIndex,
         value: this.$props.rgba.b,
         min: 0,
         max: 255,
         spinners: false,
         format: "n",
+        ariaLabel: bLabelMessage,
         disabled: this.$props.disabled
       },
+      value: this.$props.rgba.b,
       min: 0,
       max: 255,
       spinners: false,
       format: "n",
-      onFocus: this.onFocus,
+      ariaLabel: bLabelMessage,
+      onChange: this.onRgbaBChange,
       on: this.v3 ? undefined : {
-        "focus": this.onFocus,
-        "blur": this.onBlur,
         "change": this.onRgbaBChange
       },
-      onBlur: this.onBlur,
-      onChange: this.onRgbaBChange,
-      disabled: this.$props.disabled
+      disabled: this.$props.disabled,
+      ref: 'numericb'
     }), // @ts-ignore  function children
     h(kendo_vue_labels_1.Label, {
       "class": "k-colorgradient-input-label"
@@ -226,30 +251,31 @@ var ColorInputVue2 = {
     } : [bMessage])])], this.inputMode === 'rgba' && h("div", {
       "class": "k-vstack"
     }, [this.$props.opacity && h(main_1.NumericTextBox, {
-      value: this.$props.rgba.a,
+      tabIndex: this.tabIndex,
       attrs: this.v3 ? undefined : {
+        tabIndex: this.tabIndex,
         value: this.$props.rgba.a,
         min: 0,
         max: 1,
         step: 0.01,
         spinners: false,
         format: "n2",
+        ariaLabel: aLabelMessage,
         disabled: this.$props.disabled
       },
+      value: this.$props.rgba.a,
       min: 0,
       max: 1,
       step: 0.01,
       spinners: false,
       format: "n2",
-      onFocus: this.onFocus,
+      ariaLabel: aLabelMessage,
+      onChange: this.onRgbaAChange,
       on: this.v3 ? undefined : {
-        "focus": this.onFocus,
-        "blur": this.onBlur,
         "change": this.onRgbaAChange
       },
-      onBlur: this.onBlur,
-      onChange: this.onRgbaAChange,
-      disabled: this.$props.disabled
+      disabled: this.$props.disabled,
+      ref: 'numerica'
     }), this.$props.opacity && // @ts-ignore  function children
     h(kendo_vue_labels_1.Label, {
       "class": "k-colorgradient-input-label"
@@ -258,12 +284,6 @@ var ColorInputVue2 = {
     } : [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.hex, event.value, event);
     },
@@ -317,6 +337,11 @@ var ColorInputVue2 = {
       } else {
         this.inputMode = modes[index];
       }
+    },
+    onKeyDown: function onKeyDown(e) {
+      if (e.keyCode === kendo_vue_common_1.Keys.enter) {
+        e.stopPropagation();
+      }
     }
   }
 };

package/dist/npm/colors/ColorPalette.js

@@ -44,11 +44,17 @@ exports.DEFAULT_PRESET = 'office';
 
 var ColorPaletteVue2 = {
   name: 'KendoColorPalette',
+  model: {
+    event: 'changemodel'
+  },
   // @ts-ignore
   emits: {
     'keydown': null,
     'focus': null,
     'blur': null,
+    'changemodel': null,
+    'update:modelValue': null,
+    'update:modelRgbaValue': null,
     'change': null
   },
   props: {
@@ -61,6 +67,8 @@ var ColorPaletteVue2 = {
       type: [Number, Object],
       default: exports.DEFAULT_TILE_SIZE
     },
+    modelValue: String,
+    modelRgbaValue: String,
     defaultValue: String,
     value: String,
     disabled: Boolean,
@@ -87,7 +95,7 @@ var ColorPaletteVue2 = {
       return this.$props.value === undefined;
     },
     selectedColor: function selectedColor() {
-      return this.$props.value !== undefined ? this.$props.value : this.currentValue !== undefined ? this.currentValue : this.$props.defaultValue;
+      return this.$props.value !== undefined ? this.$props.value : this.modelValue !== undefined ? this.modelValue : this.modelRgbaValue !== undefined ? this.modelRgbaValue : this.currentValue !== undefined ? this.currentValue : this.$props.defaultValue;
     }
   },
   data: function data() {
@@ -143,7 +151,8 @@ var ColorPaletteVue2 = {
             id: this.createCellId({
               row: rowIndex,
               col: i
-            })
+            }),
+            role: 'gridcell'
           },
           "aria-selected": isSelected ? true : this.$props.disabled ? undefined : false,
           style: {
@@ -164,7 +173,8 @@ var ColorPaletteVue2 = {
             row: rowIndex,
             col: i
           }),
-          key: i
+          key: i,
+          role: 'gridcell'
         });
       }, this);
     };
@@ -187,9 +197,10 @@ var ColorPaletteVue2 = {
         attrs: this.v3 ? undefined : {
           id: this.$props.id,
           "aria-disabled": this.$props.disabled ? 'true' : undefined,
-          "aria-activedescendant": selectedCellCoords && this.createCellId(selectedCellCoords),
+          "aria-activedescendant": focusedCellCoords && this.createCellId(focusedCellCoords),
           "aria-labelledby": this.$props.ariaLabelledBy,
           "aria-describedby": this.$props.ariaDescribedBy,
+          role: "grid",
           tabindex: kendo_vue_common_1.getTabIndex(this.$props.tabIndex, this.$props.disabled)
         },
         "class": className,
@@ -202,17 +213,14 @@ var ColorPaletteVue2 = {
         onFocusout: this.onBlur,
         onKeydown: this.onKeyDown,
         "aria-disabled": this.$props.disabled ? 'true' : undefined,
-        "aria-activedescendant": selectedCellCoords && this.createCellId(selectedCellCoords),
+        "aria-activedescendant": focusedCellCoords && this.createCellId(focusedCellCoords),
         "aria-labelledby": this.$props.ariaLabelledBy,
         "aria-describedby": this.$props.ariaDescribedBy,
+        role: "grid",
         tabindex: kendo_vue_common_1.getTabIndex(this.$props.tabIndex, this.$props.disabled),
         ref: kendo_vue_common_1.setRef(this, 'wrapper')
       }, [h("div", {
-        "class": "k-colorpalette-table-wrap",
-        role: "grid",
-        attrs: this.v3 ? undefined : {
-          role: "grid"
-        }
+        "class": "k-colorpalette-table-wrap"
       }, [h("table", {
         "class": "k-colorpalette-table k-palette",
         role: "presentation",
@@ -235,19 +243,19 @@ var ColorPaletteVue2 = {
     onKeyDown: function onKeyDown(event) {
       switch (event.keyCode) {
         case kendo_vue_common_1.Keys.down:
-          this.handleCellNavigation(0, 1);
+          this.handleCellNavigation(event, 0, 1);
           break;
 
         case kendo_vue_common_1.Keys.up:
-          this.handleCellNavigation(0, -1);
+          this.handleCellNavigation(event, 0, -1);
           break;
 
         case kendo_vue_common_1.Keys.right:
-          this.handleCellNavigation(1, 0);
+          this.handleCellNavigation(event, 1, 0);
           break;
 
         case kendo_vue_common_1.Keys.left:
-          this.handleCellNavigation(-1, 0);
+          this.handleCellNavigation(event, -1, 0);
           break;
 
         case kendo_vue_common_1.Keys.enter:
@@ -285,7 +293,9 @@ var ColorPaletteVue2 = {
         target: this
       });
     },
-    handleCellNavigation: function handleCellNavigation(horizontalStep, verticalStep) {
+    handleCellNavigation: function handleCellNavigation(event, horizontalStep, verticalStep) {
+      event.preventDefault();
+
       if (this.focusedColorCooridanates) {
         var newCoords = this.paletteService.getNextCell(this.focusedColorCooridanates, horizontalStep, verticalStep);
         this.focusedColor = this.paletteService.getColorAt(newCoords);
@@ -301,11 +311,15 @@ var ColorPaletteVue2 = {
       this.dispatchChangeEvent(this.focusedColor, event);
     },
     dispatchChangeEvent: function dispatchChangeEvent(value, event) {
+      var rgbaValue = color_parser_1.parseColor(value, 'rgba');
+      this.$emit('changemodel', value);
+      this.$emit('update:modelValue', value);
+      this.$emit('update:modelRgbaValue', rgbaValue);
       this.$emit('change', {
         event: event,
         component: this,
         value: value,
-        rgbaValue: color_parser_1.parseColor(value, 'rgba')
+        rgbaValue: rgbaValue
       });
     },
     getPaletteInfo: function getPaletteInfo() {

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

@@ -14,6 +14,7 @@ export interface ColorPickerHandle {
  * @hidden
  */
 export interface ColorPickerState {
+    _popupId: string;
     focusableElementGuid: string;
     palette: any | null;
     blurTimeout: any | undefined;