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

package/dist/esm/colors/ColorGradient.js

@@ -0,0 +1,515 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { Draggable, guid, classNames, focusFirstFocusableChild, getTabIndex, Keys, setRef, getRef, focusContainer } from '@progress/kendo-vue-common';
+import { validatePackage } from '@progress/kendo-vue-common';
+import { packageMetadata } from '../package-metadata.js';
+import { Slider } from './../main.js';
+import { fitIntoBounds, isPresent } from './utils/misc.js';
+import { getColorFromHue, parseColor, getHSV, getColorFromHSV, getRGBA, getColorFromRGBA } from './utils/color-parser.js';
+import { removeCachedColor } from './utils/color-cache.js';
+import { ColorInput } from './ColorInput.js';
+import { ColorContrastLabels } from './ColorContrastLabels.js';
+import { ColorContrastSvg } from './ColorContrastSvg.js';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { colorGradientDragHandle, messages } from '../messages.js';
+var FORMAT = 'rgba';
+var DEFAULT_SELECTED_COLOR = 'rgba(255, 255, 255, 1)';
+/**
+ * @hidden
+ */
+
+var ColorGradientVue2 = {
+  name: 'KendoColorGradient',
+  model: {
+    event: 'changemodel'
+  },
+  // @ts-ignore
+  emits: {
+    'change': null,
+    'focus': null,
+    'blur': null,
+    'changemodel': null,
+    'update:modelValue': null,
+    'update:modelRgbaValue': null,
+    'keydown': null
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  props: {
+    modelValue: String,
+    modelRgbaValue: String,
+    defaultValue: String,
+    value: String,
+    opacity: {
+      type: Boolean,
+      default: true
+    },
+    backgroundColor: String,
+    disabled: Boolean,
+    id: String,
+    ariaLabelledBy: String,
+    ariaDescribedBy: String,
+    tabIndex: Number,
+    innerTabIndex: {
+      type: Number,
+      default: undefined
+    }
+  },
+  created: function created() {
+    validatePackage(packageMetadata);
+    this.guid = guid();
+  },
+  computed: {
+    valueSet: function valueSet() {
+      return this.value || this.modelValue || this.modelRgbaValue;
+    },
+    computedValue: function computedValue() {
+      var value = this.valueSet || this.currentValue || this.defaultValue || parseColor(DEFAULT_SELECTED_COLOR, FORMAT);
+
+      if (!isPresent(parseColor(value, 'hex', this.opacity))) {
+        // Validate/sanitize the input.
+        value = DEFAULT_SELECTED_COLOR;
+      }
+
+      return value;
+    },
+    hsva: function hsva() {
+      return this.valueSet ? getHSV(this.computedValue) : this.currentHsva || getHSV(this.computedValue);
+    },
+    rgba: function rgba() {
+      return this.valueSet ? getRGBA(this.computedValue) : this.currentRgba;
+    },
+    hex: function hex() {
+      return this.valueSet ? parseColor(this.computedValue, 'hex', this.opacity) : this.currentHex;
+    },
+    computedBgColor: function computedBgColor() {
+      return this.currentBgColor || getColorFromHue(this.hsva.h);
+    },
+    computedTabIndex: function computedTabIndex() {
+      return this.innerTabIndex !== undefined ? this.innerTabIndex : this.focused ? 0 : -1;
+    }
+  },
+  data: function data() {
+    return {
+      currentValue: undefined,
+      currentBgColor: undefined,
+      isFirstRender: true,
+      currentHsva: undefined,
+      currentRgba: undefined,
+      currentHex: undefined,
+      focused: false
+    };
+  },
+  mounted: function mounted() {
+    this.setAlphaSliderBackground(this.computedBgColor);
+
+    if (this.$el) {
+      this.draggable = this.$refs.draggable;
+      this.gradientWrapper = this.draggable && this.draggable.element;
+    }
+
+    this.alphaSlider = this.v3 ? this.alphaSliderRef : this.$refs.alphaSlider;
+
+    if (this.isFirstRender) {
+      this.isFirstRender = false;
+    }
+  },
+  destroyed: function destroyed() {
+    removeCachedColor(this.guid);
+  },
+  updated: function updated() {
+    this.setAlphaSliderBackground(this.computedBgColor);
+  },
+  // @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 className = classNames('k-colorgradient', {
+      'k-disabled': this.$props.disabled
+    });
+    var localizationService = provideLocalizationService(this);
+    var dragHandle = localizationService.toLanguageString(colorGradientDragHandle, messages[colorGradientDragHandle]);
+
+    var renderRectangleDragHandle = function renderRectangleDragHandle() {
+      var style = {};
+
+      if (!this.isFirstRender) {
+        var gradientRectMetrics = this.getGradientRectMetrics();
+        var top_1 = (1 - this.hsva.v) * gradientRectMetrics.height;
+        var left = this.hsva.s * gradientRectMetrics.width;
+        style.top = "".concat(top_1, "px");
+        style.left = "".concat(left, "px");
+      }
+
+      return h("div", {
+        "class": "k-hsv-draghandle k-draghandle",
+        role: "slider",
+        attrs: this.v3 ? undefined : {
+          role: "slider",
+          "aria-label": dragHandle + "".concat(this.value || 'none'),
+          "aria-valuenow": Math.round(this.hsva.s * 100),
+          "aria-valuetext": "\n                    saturation: ".concat(Math.round(this.hsva.s * 100), "%,\n                    value: ").concat(Math.round(this.hsva.v * 100), "%"),
+          tabindex: this.computedTabIndex
+        },
+        "aria-label": dragHandle + "".concat(this.value || 'none'),
+        "aria-valuenow": Math.round(this.hsva.s * 100),
+        "aria-valuetext": "\n                    saturation: ".concat(Math.round(this.hsva.s * 100), "%,\n                    value: ").concat(Math.round(this.hsva.v * 100), "%"),
+        tabindex: this.computedTabIndex,
+        onKeydown: this.dragKeyDown,
+        on: this.v3 ? undefined : {
+          "keydown": this.dragKeyDown
+        },
+        style: style,
+        ref: setRef(this, 'draghandle')
+      });
+    };
+
+    return h("div", {
+      id: this.$props.id,
+      attrs: this.v3 ? undefined : {
+        id: this.$props.id,
+        role: this.$props.tabIndex !== -1 ? 'textbox' : undefined,
+        "aria-disabled": this.$props.disabled,
+        tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled),
+        "aria-labelledby": this.$props.ariaLabelledBy,
+        "aria-describedby": this.$props.ariaDescribedBy
+      },
+      "class": className,
+      role: this.$props.tabIndex !== -1 ? 'textbox' : undefined,
+      "aria-disabled": this.$props.disabled,
+      tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled),
+      "aria-labelledby": this.$props.ariaLabelledBy,
+      "aria-describedby": this.$props.ariaDescribedBy,
+      onFocus: this.onFocus,
+      on: this.v3 ? undefined : {
+        "focus": this.onFocus,
+        "blur": this.onBlur,
+        "keydown": this.onKeyDownHandler
+      },
+      onBlur: this.onBlur,
+      onKeydown: this.onKeyDownHandler
+    }, [h("div", {
+      "class": "k-colorgradient-canvas k-hstack"
+    }, [h("div", {
+      "class": "k-hsv-rectangle",
+      style: {
+        background: this.computedBgColor
+      }
+    }, [// @ts-ignore  function children
+    h(Draggable, {
+      onDrag: this.onDrag,
+      on: this.v3 ? undefined : {
+        "drag": this.onDrag,
+        "release": this.onRelease
+      },
+      onRelease: this.onRelease,
+      ref: 'draggable'
+    }, this.v3 ? function () {
+      return [h("div", {
+        "class": "k-hsv-gradient",
+        style: {
+          touchAction: 'none'
+        },
+        tabindex: -1,
+        attrs: _this2.v3 ? undefined : {
+          tabindex: -1
+        },
+        onClick: _this2.onGradientWrapperClick,
+        on: _this2.v3 ? undefined : {
+          "click": _this2.onGradientWrapperClick
+        }
+      }, [renderRectangleDragHandle.call(_this2)])];
+    } : [h("div", {
+      "class": "k-hsv-gradient",
+      style: {
+        touchAction: 'none'
+      },
+      tabindex: -1,
+      attrs: _this2.v3 ? undefined : {
+        tabindex: -1
+      },
+      onClick: _this2.onGradientWrapperClick,
+      on: _this2.v3 ? undefined : {
+        "click": _this2.onGradientWrapperClick
+      }
+    }, [renderRectangleDragHandle.call(_this2)])]), this.backgroundColor && !this.isFirstRender && h(ColorContrastSvg, {
+      metrics: this.gradientWrapper ? this.getGradientRectMetrics() : undefined,
+      attrs: this.v3 ? undefined : {
+        metrics: this.gradientWrapper ? this.getGradientRectMetrics() : undefined,
+        hsva: this.hsva,
+        backgroundColor: this.backgroundColor
+      },
+      hsva: this.hsva,
+      backgroundColor: this.backgroundColor
+    })]), h("div", {
+      "class": "k-hsv-controls k-hstack"
+    }, [h(Slider, {
+      tabIndex: this.computedTabIndex,
+      attrs: this.v3 ? undefined : {
+        tabIndex: this.computedTabIndex,
+        value: this.hsva.h,
+        buttons: false,
+        vertical: true,
+        min: 0,
+        max: 360,
+        step: 5,
+        disabled: this.$props.disabled
+      },
+      value: this.hsva.h,
+      buttons: false,
+      vertical: true,
+      min: 0,
+      max: 360,
+      step: 5,
+      onChange: this.onHueSliderChange,
+      on: this.v3 ? undefined : {
+        "change": this.onHueSliderChange
+      },
+      "class": "k-hue-slider k-colorgradient-slider",
+      disabled: this.$props.disabled
+    }), this.$props.opacity && h(Slider, {
+      tabIndex: this.computedTabIndex,
+      attrs: this.v3 ? undefined : {
+        tabIndex: this.computedTabIndex,
+        value: isPresent(this.hsva.a) ? this.hsva.a * 100 : 100,
+        buttons: false,
+        vertical: true,
+        min: 0,
+        max: 100,
+        step: 1,
+        disabled: this.$props.disabled
+      },
+      value: isPresent(this.hsva.a) ? this.hsva.a * 100 : 100,
+      buttons: false,
+      vertical: true,
+      min: 0,
+      max: 100,
+      step: 1,
+      onChange: this.onAlphaSliderChange,
+      on: this.v3 ? undefined : {
+        "change": this.onAlphaSliderChange
+      },
+      "class": "k-alpha-slider k-colorgradient-slider",
+      disabled: this.$props.disabled,
+      ref: this.v3 ? function (el) {
+        _this.alphaSliderRef = el;
+      } : 'alphaSlider'
+    })])]), h(ColorInput, {
+      tabIndex: this.computedTabIndex,
+      attrs: this.v3 ? undefined : {
+        tabIndex: this.computedTabIndex,
+        rgba: this.rgba,
+        hex: this.hex,
+        opacity: this.$props.opacity,
+        disabled: this.$props.disabled
+      },
+      rgba: this.rgba,
+      onRgbachange: this.onRgbaChange,
+      on: this.v3 ? undefined : {
+        "rgbachange": this.onRgbaChange,
+        "hexchange": this.onHexChange
+      },
+      hex: this.hex,
+      onHexchange: this.onHexChange,
+      opacity: this.$props.opacity,
+      disabled: this.$props.disabled,
+      ref: 'colorInput'
+    }), this.backgroundColor && h(ColorContrastLabels, {
+      bgColor: getRGBA(this.backgroundColor),
+      attrs: this.v3 ? undefined : {
+        bgColor: getRGBA(this.backgroundColor),
+        rgba: this.rgba
+      },
+      rgba: this.rgba
+    })]);
+  },
+  methods: {
+    onKeyDownHandler: function onKeyDownHandler(e) {
+      var element = this.$el;
+
+      if (this.innerTabIndex === undefined) {
+        this.focused = focusContainer(e, element);
+      }
+
+      this.$emit('keydown', e);
+    },
+    onHexChange: function onHexChange(hex, value, event) {
+      var rgba = getRGBA(value);
+      var hsva = getHSV(value);
+      this.currentHsva = hsva;
+      this.currentBgColor = getColorFromHue(hsva.h);
+      this.currentRgba = rgba;
+      this.currentHex = hex;
+      this.dispatchChangeEvent(value, event.event, hex, value);
+    },
+    onRgbaChange: function onRgbaChange(rgba, event) {
+      var value = getColorFromRGBA(rgba);
+      var hex = parseColor(value, 'hex', this.opacity);
+      var hsva = getHSV(value);
+      this.currentHsva = hsva;
+      this.currentBgColor = getColorFromHue(hsva.h);
+      this.currentRgba = rgba;
+      this.currentHex = hex;
+      this.dispatchChangeEvent(value, event.event, hex, value);
+    },
+    onAlphaSliderChange: function onAlphaSliderChange(event) {
+      this.handleHsvaChange(Object.assign({}, this.hsva, {
+        a: event.value / 100
+      }), event.event);
+    },
+    onHueSliderChange: function onHueSliderChange(event) {
+      this.handleHsvaChange(Object.assign({}, this.hsva, {
+        h: event.value
+      }), event.event);
+    },
+    onDrag: function onDrag(e) {
+      this.gradientWrapper.classList.add('k-dragging');
+      this.changePosition(e);
+    },
+    onRelease: function onRelease() {
+      this.gradientWrapper.classList.remove('k-dragging');
+    },
+    onGradientWrapperClick: function onGradientWrapperClick(event) {
+      this.firstFocusable = getRef(this, 'draghandle');
+      this.firstFocusable.focus();
+      this.changePosition(event);
+    },
+    move: function move(e, prop, d) {
+      var c = this.hsva;
+      c[prop] += d * (e.shiftKey ? 0.01 : 0.05);
+
+      if (c[prop] < 0) {
+        c[prop] = 0;
+      }
+
+      if (c[prop] > 1) {
+        c[prop] = 1;
+      }
+
+      e.preventDefault();
+      this.handleHsvaChange(c, e);
+    },
+    dragKeyDown: function dragKeyDown(e) {
+      switch (e.keyCode) {
+        case Keys.left:
+          this.move(e, 's', -1);
+          break;
+
+        case Keys.right:
+          this.move(e, 's', 1);
+          break;
+
+        case Keys.up:
+          this.move(e, 'v', 1);
+          break;
+
+        case Keys.down:
+          this.move(e, 'v', -1);
+          break;
+
+        case Keys.enter:
+          break;
+
+        case Keys.esc:
+          break;
+
+        default:
+          break;
+      }
+    },
+    changePosition: function changePosition(event) {
+      var gradientRectMetrics = this.getGradientRectMetrics();
+      var deltaX = event.clientX - gradientRectMetrics.left;
+      var deltaY = event.clientY - gradientRectMetrics.top;
+      var left = fitIntoBounds(deltaX, 0, gradientRectMetrics.width);
+      var top = fitIntoBounds(deltaY, 0, gradientRectMetrics.height);
+      var hsva = Object.assign({}, this.hsva, {
+        s: left / gradientRectMetrics.width,
+        v: 1 - top / gradientRectMetrics.height
+      });
+      this.handleHsvaChange(hsva, event, event.event);
+    },
+    handleHsvaChange: function handleHsvaChange(hsva, event) {
+      var value = getColorFromHSV(hsva);
+      var hex = parseColor(value, 'hex', this.opacity);
+      var rgba = parseColor(value, 'rgba');
+      this.currentHsva = hsva;
+      this.currentBgColor = getColorFromHue(hsva.h);
+      this.currentRgba = getRGBA(value);
+      this.currentHex = hex;
+      this.dispatchChangeEvent(value, event, hex, rgba);
+    },
+    dispatchChangeEvent: function dispatchChangeEvent(value, event, hex, rgbaValue) {
+      this.currentValue = value;
+      this.$emit('changemodel', hex);
+      this.$emit('update:modelRgbaValue', rgbaValue);
+      this.$emit('update:modelValue', hex);
+      this.$emit('change', {
+        event: event,
+        target: this,
+        value: hex,
+        rgbaValue: rgbaValue
+      });
+    },
+    onFocus: function onFocus(event) {
+      this.$emit('focus', {
+        event: event,
+        target: this
+      });
+    },
+    onBlur: function onBlur(event) {
+      this.$emit('blur', {
+        event: event,
+        target: this
+      });
+    },
+    setAlphaSliderBackground: function setAlphaSliderBackground(backgroundColor) {
+      if (this.$props.opacity && this.alphaSlider && this.alphaSlider.sliderTrack) {
+        this.alphaSlider.sliderTrack.style.background = "linear-gradient(to top, transparent, ".concat(backgroundColor, ")");
+      }
+    },
+    getGradientRectMetrics: function getGradientRectMetrics() {
+      var rect = this.gradientWrapper.getBoundingClientRect();
+      return {
+        top: rect.top,
+        right: rect.right,
+        bottom: rect.bottom,
+        left: rect.left,
+        width: rect.width,
+        height: rect.height,
+        x: rect.x,
+        y: rect.y
+      };
+    },
+    focus: function focus() {
+      var _this = this;
+
+      this.focused = true;
+      setTimeout(function () {
+        focusFirstFocusableChild(_this.$el);
+      }, 1);
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var ColorGradient = ColorGradientVue2;
+export { ColorGradient, ColorGradientVue2 };

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

@@ -0,0 +1,57 @@
+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;
+};
+import { NumericTextBoxChangeEvent } from '../main';
+import { RGBA } from './models/rgba';
+/**
+ * @hidden
+ */
+export interface ColorInputProps {
+    tabIndex?: number;
+    rgba: RGBA;
+    onRgbaChange?: (rgba: RGBA, event: NumericTextBoxChangeEvent) => void;
+    hex: string;
+    onHexChange?: any;
+    opacity: boolean;
+    disabled?: boolean;
+}
+/**
+ * @hidden
+ */
+export interface ColorInputState {
+    lastFocusable: any;
+    hexInputId: string;
+}
+/**
+ * @hidden
+ */
+export interface ColorInputComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ColorInputMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ColorInputData {
+}
+/**
+ * @hidden
+ */
+export interface ColorInputAll extends Vue2type, ColorInputMethods, ColorInputData, ColorInputComputed, ColorInputState {
+}
+/**
+ * @hidden
+ */
+declare let ColorInputVue2: ComponentOptions<ColorInputAll, DefaultData<ColorInputData>, DefaultMethods<ColorInputAll>, ColorInputComputed, RecordPropsDefinition<ColorInputProps>>;
+/**
+ * @hidden
+ */
+declare const ColorInput: DefineComponent<ColorInputProps, any, ColorInputData, ColorInputComputed, ColorInputMethods, {}, {}, {}, string, ColorInputProps, ColorInputProps, {}>;
+export { ColorInput, ColorInputVue2 };