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

package/dist/npm/colors/FlatColorPicker.js

@@ -1,5 +1,21 @@
 "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
 });
@@ -22,6 +38,12 @@ var ColorGradient_1 = require("./ColorGradient");
 var package_metadata_1 = require("../package-metadata");
 
 var messages_1 = require("../messages");
+
+var color_parser_1 = require("./utils/color-parser");
+
+var color_cache_1 = require("./utils/color-cache");
+
+var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
 /**
  * @hidden
  */
@@ -29,20 +51,37 @@ var messages_1 = require("../messages");
 
 var FlatColorPickerVue2 = {
   name: 'KendoFlatColorPicker',
-  created: function created() {
-    kendo_vue_common_1.validatePackage(package_metadata_1.packageMetadata);
+  // @ts-ignore
+  emits: {
+    'viewchange': null,
+    'changemodel': null,
+    'update:modelValue': null,
+    'update:modelRgbaValue': null,
+    'focus': null,
+    'blur': null,
+    'keydown': null,
+    'change': null
   },
   props: {
+    modelValue: String,
+    modelRgbaValue: String,
     value: String,
+    prevValue: String,
     tabIndex: Number,
     disabled: Boolean,
     view: {
       type: String,
+      default: 'combo',
       validator: function validator(value) {
-        return ['ColorGradient', 'ColorPalette'].includes(value);
+        return ['gradient', 'palette', 'combo'].includes(value);
       }
     },
-    header: [String, Object, Function, Boolean],
+    selectedView: {
+      type: Number,
+      default: undefined
+    },
+    header: [String, Function, Object],
+    footer: [String, Function, Object],
     showClearButton: {
       type: Boolean,
       default: true
@@ -54,18 +93,63 @@ var FlatColorPickerVue2 = {
     showButtons: {
       type: Boolean,
       default: true
+    },
+    gradientSettings: {
+      type: Object,
+      default: function _default() {
+        return color_cache_1.DEFAULT_GRADIENT_SETTINGS;
+      }
+    },
+    paletteSettings: {
+      type: Object,
+      default: function _default() {
+        return color_cache_1.DEFAULT_PALETTE_SETTINGS;
+      }
+    }
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
     }
   },
+  created: function created() {
+    kendo_vue_common_1.validatePackage(package_metadata_1.packageMetadata);
+  },
   computed: {
     isColorGradient: function isColorGradient() {
-      return this.view ? this.view === 'ColorGradient' : this.currentView === 'ColorGradient';
+      return this.view !== 'combo' ? this.view === 'gradient' : this.selectedView !== undefined ? this.selectedView === 0 : this.currentView === 'gradient';
+    },
+    computedColor: function computedColor() {
+      return this.value !== undefined ? this.value : this.modelValue !== undefined ? this.modelValue : this.modelRgbaValue !== undefined ? this.modelRgbaValue : this.colorValue;
+    },
+    computedPrevColor: function computedPrevColor() {
+      return this.prevValue !== undefined ? this.prevValue : this.currentPrevColor;
+    },
+    previewClass: function previewClass() {
+      return {
+        'k-coloreditor-preview-color': true,
+        'k-color-preview': true,
+        'k-no-color': !this.colorValue
+      };
+    },
+    currentClass: function currentClass() {
+      return {
+        'k-coloreditor-current-color': true,
+        'k-color-preview': true,
+        'k-no-color': !this.computedPrevColor
+      };
+    },
+    computedTabIndex: function computedTabIndex() {
+      return this.focused ? 0 : -1;
     }
   },
   data: function data() {
+    var initialValue = this.value || this.defaultValue || this.modelValue || this.modelRgbaValue;
     return {
-      currentView: 'ColorGradient',
-      colorValue: 'rgba(255, 255, 255, 1)',
-      prevColor: 'rgba(255, 255, 255, 1)'
+      currentView: 'gradient',
+      colorValue: initialValue,
+      currentPrevColor: initialValue,
+      focused: false
     };
   },
   // @ts-ignore
@@ -82,43 +166,110 @@ var FlatColorPickerVue2 = {
     var _this = this;
 
     var h = gh || createElement;
+    var localizationService = kendo_vue_intl_1.provideLocalizationService(this);
+    var gradientMessage = localizationService.toLanguageString(messages_1.flatColorPickerGradientBtn, messages_1.messages[messages_1.flatColorPickerGradientBtn]);
+    var paletteMessage = localizationService.toLanguageString(messages_1.flatColorPickerPaletteBtn, messages_1.messages[messages_1.flatColorPickerPaletteBtn]);
+    var clearMessage = localizationService.toLanguageString(messages_1.flatColorPickerClearBtn, messages_1.messages[messages_1.flatColorPickerClearBtn]);
+    var cancelMessage = localizationService.toLanguageString(messages_1.flatColorPickerCancelBtn, messages_1.messages[messages_1.flatColorPickerCancelBtn]);
+    var applyMessage = localizationService.toLanguageString(messages_1.flatColorPickerApplyBtn, messages_1.messages[messages_1.flatColorPickerApplyBtn]);
+    var headerTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.header, kendo_vue_common_1.getListeners.call(this));
+    var footerTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.footer, kendo_vue_common_1.getListeners.call(this));
+    var header = kendo_vue_common_1.getTemplate.call(this, {
+      h: h,
+      template: headerTemplate
+    });
+    var footer = kendo_vue_common_1.getTemplate.call(this, {
+      h: h,
+      template: footerTemplate
+    });
+
+    var renderGradiente = function renderGradiente() {
+      return h(ColorGradient_1.ColorGradient, __assign({
+        attrs: this.v3 ? undefined : __assign({
+          tabIndex: -1,
+          value: this.colorValue,
+          innerTabIndex: this.computedTabIndex
+        }, this.gradientSettings),
+        ref: kendo_vue_common_1.setRef(this, 'gradient'),
+        tabIndex: -1,
+        value: this.colorValue,
+        innerTabIndex: this.computedTabIndex,
+        onChange: this.handleColorChange,
+        onKeydown: this.innerKeyDown,
+        on: this.v3 ? undefined : {
+          'change': this.handleColorChange,
+          'keydown': this.innerKeyDown
+        }
+      }, this.gradientSettings));
+    };
+
+    var renderPalette = function renderPalette() {
+      return h(ColorPalette_1.ColorPalette, __assign({
+        on: this.v3 ? undefined : {
+          'change': this.handlePaletteColorChange,
+          'keydown': this.gradientKeyDown
+        },
+        ref: kendo_vue_common_1.setRef(this, 'palette'),
+        tabIndex: this.computedTabIndex,
+        value: this.colorValue,
+        attrs: this.v3 ? undefined : __assign({
+          tabIndex: this.computedTabIndex,
+          value: this.colorValue
+        }, this.paletteSettings),
+        onChange: this.handlePaletteColorChange,
+        onKeydown: this.gradientKeyDown
+      }, this.paletteSettings));
+    };
+
     return h("div", {
       tabindex: kendo_vue_common_1.getTabIndex(this.$props.tabIndex, this.$props.disabled),
       attrs: this.v3 ? undefined : {
-        tabindex: kendo_vue_common_1.getTabIndex(this.$props.tabIndex, this.$props.disabled)
+        tabindex: kendo_vue_common_1.getTabIndex(this.$props.tabIndex, this.$props.disabled),
+        "aria-disabled": this.$props.disabled
       },
+      onFocusin: this.onFocus,
+      on: this.v3 ? undefined : {
+        "focusin": this.onFocus,
+        "focusout": this.onBlur,
+        "keydown": this.onKeyDownHandler
+      },
+      onFocusout: this.onBlur,
+      onKeydown: this.onKeyDownHandler,
       "class": kendo_vue_common_1.classNames('k-flatcolorpicker k-coloreditor', {
         'k-disabled': this.$props.disabled
       }),
-      onBlur: this.handleFlatColorPickerBlur,
-      on: this.v3 ? undefined : {
-        "blur": this.handleFlatColorPickerBlur
-      }
-    }, [this.$props.header || h("div", {
+      "aria-disabled": this.$props.disabled
+    }, [header, this.$props.showClearButton && this.$props.showPreview && h("div", {
       "class": "k-coloreditor-header k-hstack"
-    }, [h("div", {
+    }, [this.$props.view === 'combo' && h("div", {
       "class": "k-coloreditor-header-actions k-hstack"
     }, [// @ts-ignore  function children
     h(kendo_vue_buttons_1.ButtonGroup, this.v3 ? function () {
       return [// @ts-ignore  function children
       h(kendo_vue_buttons_1.Button, {
-        type: "button",
+        tabIndex: _this2.computedTabIndex,
         attrs: _this2.v3 ? undefined : {
+          tabIndex: _this2.computedTabIndex,
           type: "button",
           togglable: true,
           fillMode: 'flat',
-          selected: _this2.isColorGradient
+          selected: _this2.isColorGradient,
+          ariaLabel: gradientMessage
         },
+        type: "button",
         togglable: true,
         fillMode: 'flat',
         selected: _this2.isColorGradient,
-        onClick: function onClick(e) {
-          return _this.handleViewChange(e, 'ColorGradient');
-        },
+        onKeydown: _this2.handleButtonKeydown,
         on: _this2.v3 ? undefined : {
-          "click": function onClick(e) {
-            return _this.handleViewChange(e, 'ColorGradient');
+          "keydown": _this2.handleButtonKeydown,
+          "click": function click(e) {
+            return _this.handleViewChange(e, 'gradient');
           }
+        },
+        ariaLabel: gradientMessage,
+        onClick: function click(e) {
+          return _this.handleViewChange(e, 'gradient');
         }
       }, _this2.v3 ? function () {
         return [h("span", {
@@ -128,23 +279,29 @@ var FlatColorPickerVue2 = {
         "class": "k-icon k-i-color-canvas"
       })]), // @ts-ignore  function children
       h(kendo_vue_buttons_1.Button, {
-        type: "button",
+        tabIndex: _this2.computedTabIndex,
         attrs: _this2.v3 ? undefined : {
+          tabIndex: _this2.computedTabIndex,
           type: "button",
           togglable: true,
           fillMode: 'flat',
-          selected: !_this2.isColorGradient
+          selected: !_this2.isColorGradient,
+          ariaLabel: paletteMessage
         },
+        type: "button",
         togglable: true,
         fillMode: 'flat',
         selected: !_this2.isColorGradient,
-        onClick: function onClick(e) {
-          return _this.handleViewChange(e, 'ColorPalette');
-        },
+        onKeydown: _this2.handleButtonKeydown,
         on: _this2.v3 ? undefined : {
-          "click": function onClick(e) {
-            return _this.handleViewChange(e, 'ColorPalette');
+          "keydown": _this2.handleButtonKeydown,
+          "click": function click(e) {
+            return _this.handleViewChange(e, 'palette');
           }
+        },
+        ariaLabel: paletteMessage,
+        onClick: function click(e) {
+          return _this.handleViewChange(e, 'palette');
         }
       }, _this2.v3 ? function () {
         return [h("span", {
@@ -154,23 +311,29 @@ var FlatColorPickerVue2 = {
         "class": "k-icon k-i-palette"
       })])];
     } : [h(kendo_vue_buttons_1.Button, {
-      type: "button",
+      tabIndex: _this2.computedTabIndex,
       attrs: _this2.v3 ? undefined : {
+        tabIndex: _this2.computedTabIndex,
         type: "button",
         togglable: true,
         fillMode: 'flat',
-        selected: _this2.isColorGradient
+        selected: _this2.isColorGradient,
+        ariaLabel: gradientMessage
       },
+      type: "button",
       togglable: true,
       fillMode: 'flat',
       selected: _this2.isColorGradient,
-      onClick: function onClick(e) {
-        return _this.handleViewChange(e, 'ColorGradient');
-      },
+      onKeydown: _this2.handleButtonKeydown,
       on: _this2.v3 ? undefined : {
-        "click": function onClick(e) {
-          return _this.handleViewChange(e, 'ColorGradient');
+        "keydown": _this2.handleButtonKeydown,
+        "click": function click(e) {
+          return _this.handleViewChange(e, 'gradient');
         }
+      },
+      ariaLabel: gradientMessage,
+      onClick: function click(e) {
+        return _this.handleViewChange(e, 'gradient');
       }
     }, _this2.v3 ? function () {
       return [h("span", {
@@ -179,23 +342,29 @@ var FlatColorPickerVue2 = {
     } : [h("span", {
       "class": "k-icon k-i-color-canvas"
     })]), h(kendo_vue_buttons_1.Button, {
-      type: "button",
+      tabIndex: _this2.computedTabIndex,
       attrs: _this2.v3 ? undefined : {
+        tabIndex: _this2.computedTabIndex,
         type: "button",
         togglable: true,
         fillMode: 'flat',
-        selected: !_this2.isColorGradient
+        selected: !_this2.isColorGradient,
+        ariaLabel: paletteMessage
       },
+      type: "button",
       togglable: true,
       fillMode: 'flat',
       selected: !_this2.isColorGradient,
-      onClick: function onClick(e) {
-        return _this.handleViewChange(e, 'ColorPalette');
-      },
+      onKeydown: _this2.handleButtonKeydown,
       on: _this2.v3 ? undefined : {
-        "click": function onClick(e) {
-          return _this.handleViewChange(e, 'ColorPalette');
+        "keydown": _this2.handleButtonKeydown,
+        "click": function click(e) {
+          return _this.handleViewChange(e, 'palette');
         }
+      },
+      ariaLabel: paletteMessage,
+      onClick: function click(e) {
+        return _this.handleViewChange(e, 'palette');
       }
     }, _this2.v3 ? function () {
       return [h("span", {
@@ -209,98 +378,101 @@ var FlatColorPickerVue2 = {
       "class": "k-coloreditor-header-actions k-hstack"
     }, [this.$props.showClearButton && // @ts-ignore  function children
     h(kendo_vue_buttons_1.Button, {
-      type: "button",
+      tabIndex: this.computedTabIndex,
       attrs: this.v3 ? undefined : {
+        tabIndex: this.computedTabIndex,
         type: "button",
-        fillMode: 'flat'
+        fillMode: 'flat',
+        ariaLabel: clearMessage
       },
+      type: "button",
       fillMode: 'flat',
-      onClick: this.handleResetColor,
+      ariaLabel: clearMessage,
+      onKeydown: this.handleButtonKeydown,
       on: this.v3 ? undefined : {
+        "keydown": this.handleButtonKeydown,
         "click": this.handleResetColor
-      }
+      },
+      onClick: this.handleResetColor
     }, this.v3 ? function () {
       return [h("span", {
         "class": "k-icon k-i-reset-color"
       })];
     } : [h("span", {
       "class": "k-icon k-i-reset-color"
-    })]), this.$props.showPreview && defaultProps.showPreview && h("div", {
+    })]), this.$props.showPreview && h("div", {
       "class": "k-coloreditor-preview k-vstack"
     }, [h("span", {
-      "class": "k-coloreditor-preview-color k-color-preview",
+      "class": this.previewClass,
       style: {
         background: this.colorValue
       }
-    }), h("span", {
-      "class": "k-coloreditor-current-color k-color-preview",
+    }, [!this.colorValue && h("span", {
+      "class": "k-color-preview-mask"
+    })]), h("span", {
+      "class": this.currentClass,
       style: {
-        background: this.prevColor
+        background: this.computedPrevColor
       },
       onClick: this.handlePrevColorClick,
       on: this.v3 ? undefined : {
         "click": this.handlePrevColorClick
       }
-    })])])]), h("div", {
+    }, [!this.computedPrevColor && h("span", {
+      "class": "k-color-preview-mask"
+    })])])])]), h("div", {
       "class": "k-coloreditor-views k-vstack"
-    }, [this.isColorGradient ? h(ColorGradient_1.ColorGradient, {
-      // ref={colorGradientRef} 
-      value: this.colorValue,
-      attrs: this.v3 ? undefined : {
-        value: this.colorValue
-      },
-      onChange: this.handleColorChange,
-      on: this.v3 ? undefined : {
-        "change": this.handleColorChange,
-        "focus": this.handleFocus
-      },
-      onFocus: this.handleFocus
-    }) : h(ColorPalette_1.ColorPalette, {
-      value: this.colorValue,
-      attrs: this.v3 ? undefined : {
-        value: this.colorValue
-      },
-      onChange: this.handleColorChange,
-      on: this.v3 ? undefined : {
-        "change": this.handleColorChange,
-        "focus": this.handleFocus
-      },
-      onFocus: this.handleFocus
-    })]), this.$props.showButtons && defaultProps.showButtons && h("div", {
+    }, [this.isColorGradient ? renderGradiente.call(this) : renderPalette.call(this)]), this.$props.showButtons && h("div", {
       "class": "k-coloreditor-footer k-actions k-actions-end"
     }, [// @ts-ignore  function children
     h(kendo_vue_buttons_1.Button, {
-      type: "button",
+      tabIndex: this.computedTabIndex,
       attrs: this.v3 ? undefined : {
+        tabIndex: this.computedTabIndex,
         type: "button"
       },
+      type: "button",
       "class": "k-coloreditor-cancel",
-      onClick: this.handleCancelBtnClick,
+      onKeydown: this.handleButtonKeydown,
       on: this.v3 ? undefined : {
+        "keydown": this.handleButtonKeydown,
         "click": this.handleCancelBtnClick
-      }
+      },
+      onClick: this.handleCancelBtnClick
     }, this.v3 ? function () {
-      return [messages_1.messages[messages_1.flatColorPickerCancelBtn]];
-    } : [messages_1.messages[messages_1.flatColorPickerCancelBtn]]), // @ts-ignore  function children
+      return [cancelMessage];
+    } : [cancelMessage]), // @ts-ignore  function children
     h(kendo_vue_buttons_1.Button, {
-      type: "button",
+      tabIndex: this.computedTabIndex,
       attrs: this.v3 ? undefined : {
+        tabIndex: this.computedTabIndex,
         type: "button"
       },
+      type: "button",
       "class": "k-coloreditor-apply k-primary",
-      onClick: this.handleApplyBtnClick,
+      onKeydown: this.handleButtonKeydown,
       on: this.v3 ? undefined : {
+        "keydown": this.handleButtonKeydown,
         "click": this.handleApplyBtnClick
-      }
+      },
+      onClick: this.handleApplyBtnClick
     }, this.v3 ? function () {
-      return [messages_1.messages[messages_1.flatColorPickerApplyBtn]];
-    } : [messages_1.messages[messages_1.flatColorPickerApplyBtn]])])]);
+      return [applyMessage];
+    } : [applyMessage])]), footer]);
   },
   methods: {
     focus: function focus() {
-      if (this.$el) {
-        this.$el.focus();
-      }
+      var _this = this;
+
+      this.focused = true;
+      setTimeout(function () {
+        kendo_vue_common_1.focusFirstFocusableChild(_this.$el);
+      }, 1);
+    },
+    onKeyDownHandler: function onKeyDownHandler(e) {
+      var element = this.$el;
+      this.focused = kendo_vue_common_1.focusContainer(e, element);
+      this.$emit('keydown', e);
     },
     handleViewChange: function handleViewChange(event, viewType) {
       this.currentView = viewType;
@@ -310,36 +482,64 @@ var FlatColorPickerVue2 = {
       });
     },
     handleResetColor: function handleResetColor() {
-      this.colorValue = 'rgba(255, 255, 255, 1)';
+      this.colorValue = null;
     },
     handleColorChange: function handleColorChange(event) {
       this.colorValue = event.value;
     },
-    handleApplyBtnClick: function handleApplyBtnClick() {
-      this.prevColor = this.colorValue;
+    handlePaletteColorChange: function handlePaletteColorChange(event) {
+      this.colorValue = event.value;
+    },
+    handleApplyBtnClick: function handleApplyBtnClick(event) {
+      var rgbaValue = color_parser_1.parseColor(this.colorValue, 'rgba');
+      this.currentPrevColor = this.colorValue;
+      this.$emit('changemodel', this.colorValue);
+      this.$emit('update:modelValue', this.colorValue);
+      this.$emit('update:modelRgbaValue', rgbaValue);
+      this.$emit('change', {
+        event: event,
+        value: this.colorValue,
+        rgbaValue: rgbaValue
+      });
+    },
+    innerKeyDown: function innerKeyDown(event) {
+      if (event.keyCode === kendo_vue_common_1.Keys.enter) {
+        this.handleApplyBtnClick(event);
+      }
+    },
+    gradientKeyDown: function gradientKeyDown(event) {
+      event.stopPropagation();
+
+      if (!this.showButtons && event.keyCode === kendo_vue_common_1.Keys.enter) {
+        this.handleApplyBtnClick(event);
+      }
+    },
+    handleButtonKeydown: function handleButtonKeydown(e) {
+      if (e.keyCode === kendo_vue_common_1.Keys.enter) {
+        e.stopPropagation();
+      }
     },
     handleCancelBtnClick: function handleCancelBtnClick() {
-      this.prevColor = 'rgba(255, 255, 255, 1)';
+      this.colorValue = this.computedPrevColor;
     },
     handlePrevColorClick: function handlePrevColorClick() {
-      this.colorValue = this.prevColor;
+      this.colorValue = this.computedPrevColor;
     },
-    handleFocus: function handleFocus() {
-      if (this.$el) {
-        this.$el.focus();
-      }
+    onFocus: function onFocus(event) {
+      this.$emit('focus', {
+        event: event,
+        target: this
+      });
     },
-    handleFlatColorPickerBlur: function handleFlatColorPickerBlur() {
-      this.prevColor = this.colorValue;
+    onBlur: function onBlur(event) {
+      this.$emit('blur', {
+        event: event,
+        target: this
+      });
     }
   }
 };
 exports.FlatColorPickerVue2 = FlatColorPickerVue2;
-var defaultProps = {
-  showClearButton: true,
-  showPreview: true,
-  showButtons: true
-};
 /**
  * @hidden
  */

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

@@ -7,6 +7,7 @@ declare type DefaultMethods<V> = {
  * @hidden
  */
 export interface HexInputProps {
+    tabIndex: number;
     hex: string;
     onHexChange?: any;
     disabled?: boolean;

package/dist/npm/colors/HexInput.js

@@ -30,15 +30,24 @@ var HexInputVue2 = {
     'focus': null
   },
   props: {
+    tabIndex: Number,
     hex: String,
     disabled: Boolean
   },
+  computed: {
+    isHexValid: function isHexValid() {
+      return !!color_parser_1.parseColor(this.currentHex, 'rgba');
+    }
+  },
   data: function data() {
     return {
       currentHex: this.$props.hex,
       originalHex: this.$props.hex
     };
   },
+  mounted: function mounted() {
+    this._input = this.$refs.input._input;
+  },
   // @ts-ignore
   setup: !isV3 ? undefined : function () {
     var v3 = !!isV3;
@@ -58,7 +67,9 @@ var HexInputVue2 = {
       value: this.currentHex,
       attrs: this.v3 ? undefined : {
         value: this.currentHex,
-        disabled: this.$props.disabled
+        valid: this.isHexValid,
+        disabled: this.$props.disabled,
+        tabIndex: this.tabIndex
       },
       onInput: this.onChange,
       on: this.v3 ? undefined : {
@@ -70,7 +81,10 @@ var HexInputVue2 = {
       onChange: this.onChange,
       onFocus: this.onFocus,
       onBlur: this.onBlur,
-      disabled: this.$props.disabled
+      valid: this.isHexValid,
+      disabled: this.$props.disabled,
+      tabIndex: this.tabIndex,
+      ref: 'input'
     });
   },
   methods: {