@progress/kendo-vue-inputs 3.5.0 → 3.5.1-dev.202208150613

package/dist/esm/colors/FlatColorPicker.js

@@ -0,0 +1,539 @@
+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 && 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.js';
+import { ColorGradient } from './ColorGradient.js';
+import { packageMetadata } from '../package-metadata.js';
+import { messages, flatColorPickerApplyBtn, flatColorPickerCancelBtn, flatColorPickerGradientBtn, flatColorPickerPaletteBtn, flatColorPickerClearBtn } from '../messages.js';
+import { parseColor } from './utils/color-parser.js';
+import { DEFAULT_GRADIENT_SETTINGS, DEFAULT_PALETTE_SETTINGS } from './utils/color-cache.js';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+/**
+ * @hidden
+ */
+
+var FlatColorPickerVue2 = {
+  name: 'KendoFlatColorPicker',
+  // @ts-ignore
+  emits: {
+    'viewchange': null,
+    'changemodel': null,
+    'update:modelValue': null,
+    'update:modelRgbaValue': null,
+    'focus': null,
+    'blur': null,
+    'focusout': 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 ['gradient', 'palette', 'combo'].includes(value);
+      }
+    },
+    selectedView: {
+      type: Number,
+      default: undefined
+    },
+    header: [String, Function, Object],
+    footer: [String, Function, Object],
+    showClearButton: {
+      type: Boolean,
+      default: true
+    },
+    showPreview: {
+      type: Boolean,
+      default: true
+    },
+    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 !== '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: 'gradient',
+      colorValue: initialValue,
+      currentPrevColor: initialValue,
+      focused: false
+    };
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _this2 = this;
+
+    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),
+        "aria-disabled": this.$props.disabled
+      },
+      onFocus: this.onFocus,
+      on: this.v3 ? undefined : {
+        "focus": this.onFocus,
+        "blur": this.onBlur,
+        "focusout": this.onFocusout,
+        "keydown": this.onKeyDownHandler
+      },
+      onBlur: this.onBlur,
+      onFocusout: this.onFocusout,
+      onKeydown: this.onKeyDownHandler,
+      "class": classNames('k-flatcolorpicker k-coloreditor', {
+        'k-disabled': this.$props.disabled
+      }),
+      "aria-disabled": this.$props.disabled
+    }, [header, this.$props.showClearButton && this.$props.showPreview && h("div", {
+      "class": "k-coloreditor-header k-hstack"
+    }, [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, {
+        tabIndex: _this2.computedTabIndex,
+        attrs: _this2.v3 ? undefined : {
+          tabIndex: _this2.computedTabIndex,
+          type: "button",
+          togglable: true,
+          fillMode: 'flat',
+          selected: _this2.isColorGradient,
+          ariaLabel: gradientMessage
+        },
+        type: "button",
+        togglable: true,
+        fillMode: 'flat',
+        selected: _this2.isColorGradient,
+        onKeydown: _this2.handleButtonKeydown,
+        on: _this2.v3 ? undefined : {
+          "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", {
+          "class": "k-icon k-i-color-canvas"
+        })];
+      } : [h("span", {
+        "class": "k-icon k-i-color-canvas"
+      })]), // @ts-ignore  function children
+      h(Button, {
+        tabIndex: _this2.computedTabIndex,
+        attrs: _this2.v3 ? undefined : {
+          tabIndex: _this2.computedTabIndex,
+          type: "button",
+          togglable: true,
+          fillMode: 'flat',
+          selected: !_this2.isColorGradient,
+          ariaLabel: paletteMessage
+        },
+        type: "button",
+        togglable: true,
+        fillMode: 'flat',
+        selected: !_this2.isColorGradient,
+        onKeydown: _this2.handleButtonKeydown,
+        on: _this2.v3 ? undefined : {
+          "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", {
+          "class": "k-icon k-i-palette"
+        })];
+      } : [h("span", {
+        "class": "k-icon k-i-palette"
+      })])];
+    } : [h(Button, {
+      tabIndex: _this2.computedTabIndex,
+      attrs: _this2.v3 ? undefined : {
+        tabIndex: _this2.computedTabIndex,
+        type: "button",
+        togglable: true,
+        fillMode: 'flat',
+        selected: _this2.isColorGradient,
+        ariaLabel: gradientMessage
+      },
+      type: "button",
+      togglable: true,
+      fillMode: 'flat',
+      selected: _this2.isColorGradient,
+      onKeydown: _this2.handleButtonKeydown,
+      on: _this2.v3 ? undefined : {
+        "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", {
+        "class": "k-icon k-i-color-canvas"
+      })];
+    } : [h("span", {
+      "class": "k-icon k-i-color-canvas"
+    })]), h(Button, {
+      tabIndex: _this2.computedTabIndex,
+      attrs: _this2.v3 ? undefined : {
+        tabIndex: _this2.computedTabIndex,
+        type: "button",
+        togglable: true,
+        fillMode: 'flat',
+        selected: !_this2.isColorGradient,
+        ariaLabel: paletteMessage
+      },
+      type: "button",
+      togglable: true,
+      fillMode: 'flat',
+      selected: !_this2.isColorGradient,
+      onKeydown: _this2.handleButtonKeydown,
+      on: _this2.v3 ? undefined : {
+        "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", {
+        "class": "k-icon k-i-palette"
+      })];
+    } : [h("span", {
+      "class": "k-icon k-i-palette"
+    })])])]), h("div", {
+      "class": "k-spacer"
+    }), h("div", {
+      "class": "k-coloreditor-header-actions k-hstack"
+    }, [this.$props.showClearButton && // @ts-ignore  function children
+    h(Button, {
+      tabIndex: this.computedTabIndex,
+      attrs: this.v3 ? undefined : {
+        tabIndex: this.computedTabIndex,
+        type: "button",
+        fillMode: 'flat',
+        ariaLabel: clearMessage
+      },
+      type: "button",
+      fillMode: 'flat',
+      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 && h("div", {
+      "class": "k-coloreditor-preview k-vstack"
+    }, [h("span", {
+      "class": this.previewClass,
+      style: {
+        background: this.colorValue
+      }
+    }, [!this.colorValue && h("span", {
+      "class": "k-color-preview-mask"
+    })]), h("span", {
+      "class": this.currentClass,
+      style: {
+        background: this.computedPrevColor
+      },
+      onClick: this.handlePrevColorClick,
+      on: this.v3 ? undefined : {
+        "click": this.handlePrevColorClick
+      }
+    }, [!this.computedPrevColor && h("span", {
+      "class": "k-color-preview-mask"
+    })])])])]), h("div", {
+      "class": "k-coloreditor-views k-vstack"
+    }, [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, {
+      tabIndex: this.computedTabIndex,
+      attrs: this.v3 ? undefined : {
+        tabIndex: this.computedTabIndex,
+        type: "button"
+      },
+      type: "button",
+      "class": "k-coloreditor-cancel",
+      onKeydown: this.handleButtonKeydown,
+      on: this.v3 ? undefined : {
+        "keydown": this.handleButtonKeydown,
+        "click": this.handleCancelBtnClick
+      },
+      onClick: this.handleCancelBtnClick
+    }, this.v3 ? function () {
+      return [cancelMessage];
+    } : [cancelMessage]), // @ts-ignore  function children
+    h(Button, {
+      tabIndex: this.computedTabIndex,
+      attrs: this.v3 ? undefined : {
+        tabIndex: this.computedTabIndex,
+        type: "button"
+      },
+      type: "button",
+      "class": "k-coloreditor-apply k-primary",
+      onKeydown: this.handleButtonKeydown,
+      on: this.v3 ? undefined : {
+        "keydown": this.handleButtonKeydown,
+        "click": this.handleApplyBtnClick
+      },
+      onClick: this.handleApplyBtnClick
+    }, this.v3 ? function () {
+      return [applyMessage];
+    } : [applyMessage])]), footer]);
+  },
+  methods: {
+    focus: function 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;
+      this.$emit('viewchange', {
+        event: event,
+        viewType: viewType
+      });
+    },
+    handleResetColor: function handleResetColor() {
+      this.colorValue = null;
+    },
+    handleColorChange: function handleColorChange(event) {
+      this.colorValue = event.value;
+    },
+    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.colorValue = this.computedPrevColor;
+    },
+    handlePrevColorClick: function handlePrevColorClick() {
+      this.colorValue = this.computedPrevColor;
+    },
+    onFocus: function onFocus(event) {
+      this.$emit('focus', {
+        event: event,
+        target: this
+      });
+    },
+    onBlur: function onBlur(event) {
+      this.$emit('blur', {
+        event: event,
+        target: this
+      });
+    },
+    onFocusout: function onFocusout(event) {
+      this.$emit('focusout', {
+        event: event,
+        target: this
+      });
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var FlatColorPicker = FlatColorPickerVue2;
+export { FlatColorPicker, FlatColorPickerVue2 };

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

@@ -0,0 +1,52 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+/**
+ * @hidden
+ */
+export interface HexInputProps {
+    tabIndex: number;
+    hex: string;
+    onHexChange?: any;
+    disabled?: boolean;
+}
+/**
+ * @hidden
+ */
+export interface HexInputState {
+    originalHex: string;
+    hex: string;
+}
+/**
+ * @hidden
+ */
+export interface HexInputComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface HexInputMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface HexInputData {
+}
+/**
+ * @hidden
+ */
+export interface HexInputAll extends Vue2type, HexInputMethods, HexInputData, HexInputComputed, HexInputState {
+}
+/**
+ * @hidden
+ */
+declare let HexInputVue2: ComponentOptions<HexInputAll, DefaultData<HexInputData>, DefaultMethods<HexInputAll>, HexInputComputed, RecordPropsDefinition<HexInputProps>>;
+/**
+ * @hidden
+ */
+declare const HexInput: DefineComponent<HexInputProps, any, HexInputData, HexInputComputed, HexInputMethods, {}, {}, {}, string, HexInputProps, HexInputProps, {}>;
+export { HexInput, HexInputVue2 };

package/dist/esm/colors/HexInput.js

@@ -0,0 +1,110 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { parseColor } from './utils/color-parser.js';
+import { isPresent } from './utils/misc.js';
+import { Input as KInput } from '../input/Input.js';
+/**
+ * @hidden
+ */
+
+var HexInputVue2 = {
+  name: 'KendoHexInput',
+  // @ts-ignore
+  emits: {
+    'hexchange': null,
+    'blur': null,
+    'focus': null
+  },
+  props: {
+    tabIndex: Number,
+    hex: String,
+    disabled: Boolean
+  },
+  computed: {
+    isHexValid: function isHexValid() {
+      return !!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;
+    return {
+      v3: v3
+    };
+  },
+  watch: {
+    hex: function hex(newValue) {
+      this.currentHex = newValue;
+    }
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    return h(KInput, {
+      value: this.currentHex,
+      attrs: this.v3 ? undefined : {
+        value: this.currentHex,
+        valid: this.isHexValid,
+        disabled: this.$props.disabled,
+        tabIndex: this.tabIndex
+      },
+      onInput: this.onChange,
+      on: this.v3 ? undefined : {
+        "input": this.onChange,
+        "change": this.onChange,
+        "focus": this.onFocus,
+        "blur": this.onBlur
+      },
+      onChange: this.onChange,
+      onFocus: this.onFocus,
+      onBlur: this.onBlur,
+      valid: this.isHexValid,
+      disabled: this.$props.disabled,
+      tabIndex: this.tabIndex,
+      ref: 'input'
+    });
+  },
+  methods: {
+    onChange: function onChange(event) {
+      var hex = event.target.value;
+      var value = parseColor(hex, 'rgba');
+      this.currentHex = hex;
+
+      if (isPresent(value)) {
+        this.$emit('hexchange', {
+          hex: hex,
+          value: value,
+          event: event
+        });
+      }
+    },
+    onBlur: function onBlur(event) {
+      if (!isPresent(parseColor(this.hex, 'rgba'))) {
+        this.currentHex = this.originalHex;
+      }
+
+      this.$emit('blur', event);
+    },
+    onFocus: function onFocus(event) {
+      this.$emit('focus', event);
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var HexInput = HexInputVue2;
+export { HexInput, HexInputVue2 };