@progress/kendo-vue-inputs 3.4.0 → 3.4.2-dev.202207070519

package/dist/es/colors/FlatColorPicker.js

@@ -0,0 +1,295 @@
+// @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';
+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';
+/**
+ * @hidden
+ */
+
+var FlatColorPickerVue2 = {
+  name: 'KendoFlatColorPicker',
+  created: function created() {
+    validatePackage(packageMetadata);
+  },
+  props: {
+    value: String,
+    tabIndex: Number,
+    disabled: Boolean,
+    view: {
+      type: String,
+      validator: function validator(value) {
+        return ['ColorGradient', 'ColorPalette'].includes(value);
+      }
+    },
+    header: [String, Object, Function, Boolean],
+    showClearButton: {
+      type: Boolean,
+      default: true
+    },
+    showPreview: {
+      type: Boolean,
+      default: true
+    },
+    showButtons: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    isColorGradient: function isColorGradient() {
+      return this.view ? this.view === 'ColorGradient' : this.currentView === 'ColorGradient';
+    }
+  },
+  data: function data() {
+    return {
+      currentView: 'ColorGradient',
+      colorValue: 'rgba(255, 255, 255, 1)',
+      prevColor: 'rgba(255, 255, 255, 1)'
+    };
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _this = this;
+
+    var h = gh || createElement;
+    return h("div", {
+      tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled),
+      attrs: this.v3 ? undefined : {
+        tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled)
+      },
+      "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", {
+      "class": "k-coloreditor-header k-hstack"
+    }, [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",
+        attrs: _this.v3 ? undefined : {
+          type: "button",
+          togglable: true,
+          fillMode: 'flat',
+          selected: _this.colorGradientView
+        },
+        togglable: true,
+        fillMode: 'flat',
+        selected: _this.colorGradientView
+      }, _this.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, {
+        type: "button",
+        attrs: _this.v3 ? undefined : {
+          type: "button",
+          togglable: true,
+          fillMode: 'flat',
+          selected: !_this.colorGradientView
+        },
+        togglable: true,
+        fillMode: 'flat',
+        selected: !_this.colorGradientView
+      }, _this.v3 ? function () {
+        return [h("span", {
+          "class": "k-icon k-i-palette"
+        })];
+      } : [h("span", {
+        "class": "k-icon k-i-palette"
+      })])];
+    } : [h(Button, {
+      type: "button",
+      attrs: _this.v3 ? undefined : {
+        type: "button",
+        togglable: true,
+        fillMode: 'flat',
+        selected: _this.colorGradientView
+      },
+      togglable: true,
+      fillMode: 'flat',
+      selected: _this.colorGradientView
+    }, _this.v3 ? function () {
+      return [h("span", {
+        "class": "k-icon k-i-color-canvas"
+      })];
+    } : [h("span", {
+      "class": "k-icon k-i-color-canvas"
+    })]), h(Button, {
+      type: "button",
+      attrs: _this.v3 ? undefined : {
+        type: "button",
+        togglable: true,
+        fillMode: 'flat',
+        selected: !_this.colorGradientView
+      },
+      togglable: true,
+      fillMode: 'flat',
+      selected: !_this.colorGradientView
+    }, _this.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, {
+      type: "button",
+      attrs: this.v3 ? undefined : {
+        type: "button",
+        fillMode: 'flat'
+      },
+      fillMode: 'flat',
+      onClick: this.handleResetColor,
+      on: this.v3 ? undefined : {
+        "click": 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", {
+      "class": "k-coloreditor-preview k-vstack"
+    }, [h("span", {
+      "class": "k-coloreditor-preview-color k-color-preview",
+      style: {
+        background: this.colorValue
+      }
+    }), h("span", {
+      "class": "k-coloreditor-current-color k-color-preview",
+      style: {
+        background: this.prevColor
+      },
+      onClick: this.handlePrevColorClick,
+      on: this.v3 ? undefined : {
+        "click": this.handlePrevColorClick
+      }
+    })])])]), 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", {
+      "class": "k-coloreditor-footer k-actions k-actions-end"
+    }, [// @ts-ignore  function children
+    h(Button, {
+      type: "button",
+      attrs: this.v3 ? undefined : {
+        type: "button"
+      },
+      "class": "k-coloreditor-cancel",
+      onClick: this.handleCancelBtnClick,
+      on: this.v3 ? undefined : {
+        "click": this.handleCancelBtnClick
+      }
+    }, this.v3 ? function () {
+      return [messages[flatColorPickerCancelBtn]];
+    } : [messages[flatColorPickerCancelBtn]]), // @ts-ignore  function children
+    h(Button, {
+      type: "button",
+      attrs: this.v3 ? undefined : {
+        type: "button"
+      },
+      "class": "k-coloreditor-apply k-primary",
+      onClick: this.handleApplyBtnClick,
+      on: this.v3 ? undefined : {
+        "click": this.handleApplyBtnClick
+      }
+    }, this.v3 ? function () {
+      return [messages[flatColorPickerApplyBtn]];
+    } : [messages[flatColorPickerApplyBtn]])])]);
+  },
+  methods: {
+    focus: function focus() {
+      if (this.$el) {
+        this.$el.focus();
+      }
+    },
+    handleViewChange: function handleViewChange(viewType) {
+      this.currentView = viewType;
+    },
+    handleResetColor: function handleResetColor() {
+      this.colorValue = 'rgba(255, 255, 255, 1)';
+    },
+    handleColorChange: function handleColorChange(event) {
+      this.colorValue = event.value;
+    },
+    handleApplyBtnClick: function handleApplyBtnClick() {
+      this.prevColor = this.colorValue;
+    },
+    handleCancelBtnClick: function handleCancelBtnClick() {
+      this.prevColor = 'rgba(255, 255, 255, 1)';
+    },
+    handlePrevColorClick: function handlePrevColorClick() {
+      this.colorValue = this.prevColor;
+    },
+    handleFocus: function handleFocus() {
+      if (this.$el) {
+        this.$el.focus();
+      }
+    },
+    handleFlatColorPickerBlur: function handleFlatColorPickerBlur() {
+      this.prevColor(this.colorValue);
+    }
+  }
+};
+var defaultProps = {
+  showClearButton: true,
+  showPreview: true,
+  showButtons: true
+};
+/**
+ * @hidden
+ */
+
+var FlatColorPicker = FlatColorPickerVue2;
+export { FlatColorPicker, FlatColorPickerVue2 };

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

@@ -0,0 +1,51 @@
+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 {
+    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/es/colors/HexInput.js

@@ -0,0 +1,72 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
+import { parseColor } from './utils/color-parser';
+import { isPresent } from './utils/misc';
+import { Input } from '../input/Input';
+/**
+ * @hidden
+ */
+
+var HexInputVue2 = {
+  name: 'KendoHexInput',
+  props: {
+    hex: String,
+    disabled: Boolean
+  },
+  data: function data() {
+    return {
+      hex: this.$props.hex,
+      originalHex: this.$props.hex
+    };
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    return h(Input, {
+      value: this.hex,
+      attrs: this.v3 ? undefined : {
+        value: this.hex,
+        disabled: this.$props.disabled
+      },
+      onChange: this.onChange,
+      on: this.v3 ? undefined : {
+        "change": this.onChange,
+        "blur": this.onBlur
+      },
+      onBlur: this.onBlur,
+      disabled: this.$props.disabled
+    });
+  },
+  methods: {
+    onChange: function onChange(event) {
+      var hex = event.target.value;
+      var value = parseColor(hex, 'rgba');
+      this.hex = hex;
+
+      if (isPresent(value)) {
+        this.$props.onHexChange(hex, value, event);
+      }
+    },
+    onBlur: function onBlur() {
+      if (!isPresent(parseColor(this.hex, 'rgba'))) {
+        this.hex = this.originalHex;
+      }
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var HexInput = HexInputVue2;
+export { HexInput, HexInputVue2 };

package/dist/es/colors/Picker.js

@@ -2,6 +2,7 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 import { Popup } from '@progress/kendo-vue-popup';
 import { classNames, getDefaultSlots } from '@progress/kendo-vue-common';
 /**
@@ -44,8 +45,8 @@ var PickerVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };

package/dist/es/colors/interfaces/ColorGradientChangeEvent.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The arguments for the `onChange` ColorGradient event.
+ */
+export interface ColorGradientChangeEvent {
+    /**
+     * The current value of the ColorGradient.
+     */
+    value: string;
+}

package/dist/es/colors/interfaces/ColorGradientProps.d.ts

@@ -0,0 +1,56 @@
+import { ColorGradientChangeEvent } from './ColorGradientChangeEvent';
+/**
+ * Represents the props of the [KendoReact ColorGradient component]({% slug overview_colorgradient %}).
+ */
+export interface ColorGradientProps {
+    /**
+     * The default value of the ColorGradient.
+     */
+    defaultValue?: string;
+    /**
+     * The value of the ColorGradient.
+     */
+    value?: string;
+    /**
+     * Determines the event handler that will be fired when the user edits the value.
+     */
+    onChange?: (event: ColorGradientChangeEvent) => void;
+    /**
+     * Represents the focus event.
+     */
+    onFocus?: (event: any) => void;
+    /**
+     * Determines whether the alpha slider and the alpha input will be displayed. Defaults to `true`.
+     */
+    opacity?: boolean;
+    /**
+     * Enables the color contrast tool.
+     * Sets the background color that will be compared to the selected value.
+     * The tool will calculate the contrast ratio between two colors.
+     * Currently, only the RGBA format is supported.
+     */
+    backgroundColor?: string;
+    /**
+     * Determines whether the ColorGradient is disabled
+     * ([more information and example]({% slug disabled_colorgradient %})).
+     *
+     */
+    disabled?: boolean;
+    /**
+     * Sets the `tabIndex` property of the ColorGradient.
+     */
+    tabIndex?: number;
+    /**
+     * Specifies the id of the component.
+     */
+    id?: string;
+    /**
+     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
+     * For example these elements could contain error or hint message.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Identifies the element(s) which will label the component.
+     */
+    ariaLabelledBy?: string;
+}

package/dist/es/input/Input.js

@@ -18,6 +18,7 @@ var __assign = this && this.__assign || function () {
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var ref = allVue.ref;
 import { guid, templateDefinition, validatePackage, kendoThemeMaps, templateRendering, getListeners, getTemplate } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
@@ -138,8 +139,8 @@ var InputVue2 = {
     this.setValidity();
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     var inputRef = ref(null);
     return {
       v3: v3,

package/dist/es/input-separator/InputSeparator.js

@@ -3,6 +3,7 @@ import { validatePackage } from '@progress/kendo-licensing';
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var ref = allVue.ref;
 import { packageMetadata } from '../package-metadata';
 /**
@@ -14,8 +15,8 @@ var InputSeparatorVue2 = {
     validatePackage(packageMetadata);
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };

package/dist/es/main.d.ts

@@ -10,6 +10,7 @@ export * from './colors/interfaces/ColorPickerFocusEvent';
 export * from './colors/interfaces/ColorPickerPaletteSettings';
 export * from './colors/interfaces/ColorPickerPopupSettings';
 export * from './colors/interfaces/ColorPickerProps';
+export * from './colors/FlatColorPicker';
 export { Switch, SwitchVue2, SwitchProps, SwitchState, SwitchChangeEvent } from './switch/Switch';
 export * from './input-separator/InputSeparator';
 export * from './input/Input';

package/dist/es/main.js

@@ -8,6 +8,7 @@ export * from './colors/interfaces/ColorPickerFocusEvent';
 export * from './colors/interfaces/ColorPickerPaletteSettings';
 export * from './colors/interfaces/ColorPickerPopupSettings';
 export * from './colors/interfaces/ColorPickerProps';
+export * from './colors/FlatColorPicker';
 export { Switch, SwitchVue2 } from './switch/Switch';
 export * from './input-separator/InputSeparator';
 export * from './input/Input';

package/dist/es/maskedtextbox/MaskedTextBox.js

@@ -2,10 +2,11 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var ref = allVue.ref;
 import { MaskingService } from './masking.service';
 import { defaultRules, maskingChanged, returnFalse } from './utils';
-import { guid, getTabIndex, validatePackage, kendoThemeMaps, templateDefinition, templateRendering, getListeners, getTemplate } from '@progress/kendo-vue-common';
+import { guid, getTabIndex, validatePackage, kendoThemeMaps, templateDefinition, templateRendering, getListeners, getTemplate, setRef } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
 /**
  * @hidden
@@ -120,8 +121,8 @@ var MaskedTextBoxVue2 = {
     this.isPasted = false;
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     var inputRef = ref(null);
     return {
       v3: v3,
@@ -372,8 +373,6 @@ var MaskedTextBoxVue2 = {
   },
   // @ts-ignore
   render: function render(createElement) {
-    var _this = this;
-
     var h = gh || createElement;
     var inputId = this.$props.id || this.inputId;
     var _a = this.$props,
@@ -419,26 +418,26 @@ var MaskedTextBoxVue2 = {
       type: this.$props.type,
       attrs: this.v3 ? undefined : {
         type: this.$props.type,
-        autoComplete: "off",
-        autoCorrect: "off",
-        autoCapitalize: "off",
-        spellCheck: false,
+        autocomplete: "off",
+        autocorrect: "off",
+        autocapitalize: "off",
+        spellcheck: false,
         id: inputId,
         "aria-labelledby": this.$props.ariaLabelledBy,
         "aria-describedby": this.$props.ariaDescribedBy,
         name: this.$props.name,
-        tabIndex: getTabIndex(this.$props.tabIndex, this.$props.disabled, true),
-        accessKey: this.$props.accessKey,
+        tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled, true),
+        accesskey: this.$props.accessKey,
         title: this.$props.title,
         disabled: this.$props.disabled || undefined,
-        readOnly: this.$props.readonly || undefined,
+        readonly: this.$props.readonly || undefined,
         placeholder: this.$props.placeholder,
         required: this.$props.required
       },
-      autoComplete: "off",
-      autoCorrect: "off",
-      autoCapitalize: "off",
-      spellCheck: false,
+      autocomplete: "off",
+      autocorrect: "off",
+      autocapitalize: "off",
+      spellcheck: false,
       "class": this.inputInnerClass,
       value: this.v3 ? newValue : null,
       domProps: this.v3 ? undefined : {
@@ -448,29 +447,27 @@ var MaskedTextBoxVue2 = {
       "aria-labelledby": this.$props.ariaLabelledBy,
       "aria-describedby": this.$props.ariaDescribedBy,
       name: this.$props.name,
-      tabIndex: getTabIndex(this.$props.tabIndex, this.$props.disabled, true),
-      accessKey: this.$props.accessKey,
+      tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled, true),
+      accesskey: this.$props.accessKey,
       title: this.$props.title,
       disabled: this.$props.disabled || undefined,
-      readOnly: this.$props.readonly || undefined,
+      readonly: this.$props.readonly || undefined,
       placeholder: this.$props.placeholder,
       required: this.$props.required,
-      ref: this.v3 ? function (el) {
-        _this.inputRef = el;
-      } : 'input',
+      ref: setRef(this, 'input'),
       onInput: this.onChangeHandler,
       on: this.v3 ? undefined : {
         "input": this.onChangeHandler,
         "paste": this.pasteHandler,
         "focus": this.focusHandler,
         "blur": this.blurHandler,
-        "dragStart": returnFalse,
+        "dragstart": returnFalse,
         "drop": returnFalse
       },
       onPaste: this.pasteHandler,
       onFocus: this.focusHandler,
       onBlur: this.blurHandler,
-      onDragStart: returnFalse,
+      onDragstart: returnFalse,
       onDrop: returnFalse
     }), this.$props.inputSuffix && h("span", {
       "class": "k-input-suffix"