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

package/dist/es/colors/FlatColorPicker.js

@@ -1,34 +1,70 @@
-// @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 { classNames, validatePackage, getTabIndex } from '@progress/kendo-vue-common';
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { classNames, validatePackage, getTabIndex, setRef, focusContainer, focusFirstFocusableChild, Keys, templateRendering, getListeners, getTemplate } from '@progress/kendo-vue-common';
 import { ButtonGroup, Button } from '@progress/kendo-vue-buttons';
 import { ColorPalette } from './ColorPalette';
 import { ColorGradient } from './ColorGradient';
 import { packageMetadata } from '../package-metadata';
-import { messages, flatColorPickerApplyBtn, flatColorPickerCancelBtn } from '../messages';
+import { messages, flatColorPickerApplyBtn, flatColorPickerCancelBtn, flatColorPickerGradientBtn, flatColorPickerPaletteBtn, flatColorPickerClearBtn } from '../messages';
+import { parseColor } from './utils/color-parser';
+import { DEFAULT_GRADIENT_SETTINGS, DEFAULT_PALETTE_SETTINGS } from './utils/color-cache';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
 /**
  * @hidden
  */
 
 var FlatColorPickerVue2 = {
   name: 'KendoFlatColorPicker',
-  created: function created() {
-    validatePackage(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
@@ -40,18 +76,63 @@ var FlatColorPickerVue2 = {
     showButtons: {
       type: Boolean,
       default: true
+    },
+    gradientSettings: {
+      type: Object,
+      default: function _default() {
+        return DEFAULT_GRADIENT_SETTINGS;
+      }
+    },
+    paletteSettings: {
+      type: Object,
+      default: function _default() {
+        return DEFAULT_PALETTE_SETTINGS;
+      }
     }
   },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  created: function created() {
+    validatePackage(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
@@ -68,43 +149,110 @@ var FlatColorPickerVue2 = {
     var _this = this;
 
     var h = gh || createElement;
+    var localizationService = provideLocalizationService(this);
+    var gradientMessage = localizationService.toLanguageString(flatColorPickerGradientBtn, messages[flatColorPickerGradientBtn]);
+    var paletteMessage = localizationService.toLanguageString(flatColorPickerPaletteBtn, messages[flatColorPickerPaletteBtn]);
+    var clearMessage = localizationService.toLanguageString(flatColorPickerClearBtn, messages[flatColorPickerClearBtn]);
+    var cancelMessage = localizationService.toLanguageString(flatColorPickerCancelBtn, messages[flatColorPickerCancelBtn]);
+    var applyMessage = localizationService.toLanguageString(flatColorPickerApplyBtn, messages[flatColorPickerApplyBtn]);
+    var headerTemplate = templateRendering.call(this, this.$props.header, getListeners.call(this));
+    var footerTemplate = templateRendering.call(this, this.$props.footer, getListeners.call(this));
+    var header = getTemplate.call(this, {
+      h: h,
+      template: headerTemplate
+    });
+    var footer = getTemplate.call(this, {
+      h: h,
+      template: footerTemplate
+    });
+
+    var renderGradiente = function renderGradiente() {
+      return h(ColorGradient, __assign({
+        attrs: this.v3 ? undefined : __assign({
+          tabIndex: -1,
+          value: this.colorValue,
+          innerTabIndex: this.computedTabIndex
+        }, this.gradientSettings),
+        ref: 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, __assign({
+        on: this.v3 ? undefined : {
+          'change': this.handlePaletteColorChange,
+          'keydown': this.gradientKeyDown
+        },
+        ref: 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: getTabIndex(this.$props.tabIndex, this.$props.disabled),
       attrs: this.v3 ? undefined : {
-        tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled)
+        tabindex: 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": 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(ButtonGroup, this.v3 ? function () {
       return [// @ts-ignore  function children
       h(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", {
@@ -114,23 +262,29 @@ var FlatColorPickerVue2 = {
         "class": "k-icon k-i-color-canvas"
       })]), // @ts-ignore  function children
       h(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", {
@@ -140,23 +294,29 @@ var FlatColorPickerVue2 = {
         "class": "k-icon k-i-palette"
       })])];
     } : [h(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", {
@@ -165,23 +325,29 @@ var FlatColorPickerVue2 = {
     } : [h("span", {
       "class": "k-icon k-i-color-canvas"
     })]), h(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", {
@@ -195,98 +361,101 @@ var FlatColorPickerVue2 = {
       "class": "k-coloreditor-header-actions k-hstack"
     }, [this.$props.showClearButton && // @ts-ignore  function children
     h(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 // 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, {
-      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(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[flatColorPickerCancelBtn]];
-    } : [messages[flatColorPickerCancelBtn]]), // @ts-ignore  function children
+      return [cancelMessage];
+    } : [cancelMessage]), // @ts-ignore  function children
     h(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[flatColorPickerApplyBtn]];
-    } : [messages[flatColorPickerApplyBtn]])])]);
+      return [applyMessage];
+    } : [applyMessage])]), footer]);
   },
   methods: {
     focus: function focus() {
-      if (this.$el) {
-        this.$el.focus();
-      }
+      var _this = this;
+
+      this.focused = true;
+      setTimeout(function () {
+        focusFirstFocusableChild(_this.$el);
+      }, 1);
+    },
+    onKeyDownHandler: function onKeyDownHandler(e) {
+      var element = this.$el;
+      this.focused = focusContainer(e, element);
+      this.$emit('keydown', e);
     },
     handleViewChange: function handleViewChange(event, viewType) {
       this.currentView = viewType;
@@ -296,35 +465,63 @@ 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 = 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 === Keys.enter) {
+        this.handleApplyBtnClick(event);
+      }
+    },
+    gradientKeyDown: function gradientKeyDown(event) {
+      event.stopPropagation();
+
+      if (!this.showButtons && event.keyCode === Keys.enter) {
+        this.handleApplyBtnClick(event);
+      }
+    },
+    handleButtonKeydown: function handleButtonKeydown(e) {
+      if (e.keyCode === 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
+      });
     }
   }
 };
-var defaultProps = {
-  showClearButton: true,
-  showPreview: true,
-  showButtons: true
-};
 /**
  * @hidden
  */

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

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