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

package/dist/npm/colors/ColorGradient.js

@@ -0,0 +1,427 @@
+"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
+});
+exports.ColorGradientVue2 = exports.ColorGradient = void 0; // @ts-ignore
+
+var Vue = require("vue");
+
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
+
+var kendo_vue_common_1 = require("@progress/kendo-vue-common");
+
+var kendo_vue_common_2 = require("@progress/kendo-vue-common");
+
+var package_metadata_1 = require("../package-metadata");
+
+var main_1 = require("./../main");
+
+var misc_1 = require("./utils/misc");
+
+var color_parser_1 = require("./utils/color-parser");
+
+var color_cache_1 = require("./utils/color-cache");
+
+var ColorInput_1 = require("./ColorInput");
+
+var ColorContrastLabels_1 = require("./ColorContrastLabels");
+
+var ColorContrastSvg_1 = require("./ColorContrastSvg");
+
+var FORMAT = 'rgba';
+var DEFAULT_SELECTED_COLOR = 'rgba(255, 255, 255, 1)';
+/**
+ * @hidden
+ */
+
+var ColorGradientVue2 = {
+  name: 'KendoColorGradient',
+  // @ts-ignore
+  emits: {
+    'change': null,
+    'focus': null
+  },
+  props: {
+    defaultValue: String,
+    value: String,
+    opacity: {
+      type: Boolean,
+      default: true
+    },
+    backgroundColor: String,
+    disabled: Boolean,
+    id: String,
+    ariaLabelledBy: String,
+    ariaDescribedBy: String
+  },
+  created: function created() {
+    kendo_vue_common_2.validatePackage(package_metadata_1.packageMetadata);
+    this.guid = kendo_vue_common_1.guid();
+  },
+  computed: {
+    isUncontrolled: function isUncontrolled() {
+      return this.$props.value === undefined;
+    },
+    computedValue: function computedValue() {
+      var value = this.value || this.defaultValue || color_parser_1.parseColor(DEFAULT_SELECTED_COLOR, FORMAT);
+
+      if (!misc_1.isPresent(color_parser_1.parseColor(this.value, 'hex'))) {
+        // Validate/sanitize the input.
+        value = DEFAULT_SELECTED_COLOR;
+      }
+
+      return value;
+    },
+    hsva: function hsva() {
+      return color_cache_1.getCachedHsva(this.guid, this.computedValue) || color_parser_1.getHSV(this.computedValue);
+    },
+    rgba: function rgba() {
+      return color_cache_1.getCachedRgba(this.guid, this.computedValue) || color_parser_1.getRGBA(this.computedValue);
+    },
+    hex: function hex() {
+      return color_cache_1.getCachedHex(this.guid, this.computedValue) || color_parser_1.parseColor(this.computedValue, 'hex');
+    },
+    computedBgColor: function computedBgColor() {
+      return this.backgroundColor !== undefined ? this.backgroundColor : this.currentBgColor || color_parser_1.getColorFromHue(this.hsva.h);
+    }
+  },
+  data: function data() {
+    return {
+      currentBgColor: undefined,
+      isFirstRender: true
+    };
+  },
+  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() {
+    color_cache_1.removeCachedColor(this.guid);
+  },
+  updated: function updated() {// if (prevState.backgroundColor !== this.backgroundColor) {
+    //     this.setAlphaSliderBackground(this.backgroundColor);
+    // }
+  },
+  // private alphaSlider: any;
+  // @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 = kendo_vue_common_1.classNames('k-colorgradient', {
+      'k-disabled': this.$props.disabled
+    });
+
+    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 = top_1 + "px";
+        style.left = left + "px";
+      }
+
+      return h("div", {
+        "class": "k-hsv-draghandle k-draghandle",
+        style: style
+      });
+    };
+
+    return h("div", {
+      id: this.$props.id,
+      attrs: this.v3 ? undefined : {
+        id: this.$props.id,
+        "aria-disabled": this.$props.disabled ? 'true' : undefined,
+        tabindex: kendo_vue_common_1.getTabIndex(this.$props.tabIndex, this.$props.disabled),
+        "aria-labelledby": this.$props.ariaLabelledBy,
+        "aria-describedby": this.$props.ariaDescribedBy
+      },
+      "class": className,
+      "aria-disabled": this.$props.disabled ? 'true' : undefined,
+      tabindex: kendo_vue_common_1.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
+      }
+    }, [h("div", {
+      "class": "k-colorgradient-canvas k-hstack"
+    }, [h("div", {
+      "class": "k-hsv-rectangle",
+      style: {
+        background: this.computedBgColor
+      }
+    }, [// @ts-ignore  function children
+    h(kendo_vue_common_1.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'
+        },
+        onClick: _this2.onGradientWrapperClick,
+        on: _this2.v3 ? undefined : {
+          "click": _this2.onGradientWrapperClick
+        }
+      }, [renderRectangleDragHandle.call(_this2)])];
+    } : [h("div", {
+      "class": "k-hsv-gradient",
+      style: {
+        touchAction: 'none'
+      },
+      onClick: _this2.onGradientWrapperClick,
+      on: _this2.v3 ? undefined : {
+        "click": _this2.onGradientWrapperClick
+      }
+    }, [renderRectangleDragHandle.call(_this2)])]), this.computedBgColor && !this.isFirstRender && h(ColorContrastSvg_1.ColorContrastSvg, {
+      metrics: this.gradientWrapper ? this.getGradientRectMetrics() : undefined,
+      attrs: this.v3 ? undefined : {
+        metrics: this.gradientWrapper ? this.getGradientRectMetrics() : undefined,
+        hsva: this.hsva,
+        backgroundColor: this.computedBgColor
+      },
+      hsva: this.hsva,
+      backgroundColor: this.computedBgColor
+    })]), h("div", {
+      "class": "k-hsv-controls k-hstack"
+    }, [h(main_1.Slider, {
+      value: this.hsva.h,
+      attrs: this.v3 ? undefined : {
+        value: this.hsva.h,
+        buttons: false,
+        vertical: true,
+        min: 0,
+        max: 360,
+        step: 5,
+        disabled: this.$props.disabled
+      },
+      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(main_1.Slider, {
+      value: misc_1.isPresent(this.hsva.a) ? this.hsva.a * 100 : 100,
+      attrs: this.v3 ? undefined : {
+        value: misc_1.isPresent(this.hsva.a) ? this.hsva.a * 100 : 100,
+        buttons: false,
+        vertical: true,
+        min: 0,
+        max: 100,
+        step: 1,
+        disabled: this.$props.disabled
+      },
+      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_1.ColorInput, {
+      rgba: this.rgba,
+      attrs: this.v3 ? undefined : {
+        rgba: this.rgba,
+        hex: this.hex,
+        opacity: this.$props.opacity,
+        disabled: this.$props.disabled
+      },
+      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
+    }), this.computedBgColor && h(ColorContrastLabels_1.ColorContrastLabels, {
+      bgColor: color_parser_1.getRGBA(this.computedBgColor),
+      attrs: this.v3 ? undefined : {
+        bgColor: color_parser_1.getRGBA(this.computedBgColor),
+        rgba: this.rgba
+      },
+      rgba: this.rgba
+    })]);
+  },
+  methods: {
+    // getDerivedStateFromProps(props: ColorGradientProps, state: ColorGradientState) {
+    //     if (props.value && !state.isFirstRender) {
+    //         // The component is in controlled mode.
+    //         return ColorGradientWithoutContext.getStateFromValue(props.value, state.guid);
+    //     }
+    //     return null;
+    // },
+    onHexChange: function onHexChange(hex, value, event) {
+      if (this.isUncontrolled) {
+        var hsva = color_parser_1.getHSV(value);
+        this.hsva = hsva;
+        this.cu = color_parser_1.getColorFromHue(hsva.h);
+        this.rgba = color_parser_1.getRGBA(value);
+        this.hex = hex;
+      } else {
+        color_cache_1.cacheHex(this.guid, value, hex);
+      }
+
+      this.dispatchChangeEvent(value, event, event.nativeEvent);
+    },
+    onRgbaChange: function onRgbaChange(rgba, event) {
+      var value = color_parser_1.getColorFromRGBA(rgba);
+
+      if (this.isUncontrolled) {
+        var hsva = color_parser_1.getHSV(value);
+        var hex = color_parser_1.parseColor(value, 'hex');
+        this.hsva = hsva;
+        this.currentBgColor = color_parser_1.getColorFromHue(hsva.h);
+        this.rgba = rgba;
+        this.hex = hex;
+      } else {
+        color_cache_1.cacheRgba(this.guid, value, rgba);
+      }
+
+      this.dispatchChangeEvent(value, event.event);
+    },
+    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.changePosition(event);
+    },
+    changePosition: function changePosition(event) {
+      var gradientRectMetrics = this.getGradientRectMetrics();
+      var deltaX = event.clientX - gradientRectMetrics.left;
+      var deltaY = event.clientY - gradientRectMetrics.top;
+      var left = misc_1.fitIntoBounds(deltaX, 0, gradientRectMetrics.width);
+      var top = misc_1.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 = color_parser_1.getColorFromHSV(hsva);
+
+      if (this.isUncontrolled) {
+        var hex = color_parser_1.parseColor(value, 'hex');
+        this.hsva = hsva;
+        this.currentBgColor = color_parser_1.getColorFromHue(hsva.h);
+        this.rgba = color_parser_1.getRGBA(value);
+        this.hex = hex;
+      } else {
+        color_cache_1.cacheHsva(this.guid, value, hsva);
+      }
+
+      this.dispatchChangeEvent(value, event);
+    },
+    dispatchChangeEvent: function dispatchChangeEvent(value, event) {
+      this.$emit('change', {
+        event: event,
+        target: this,
+        value: value
+      });
+    },
+    onFocus: function onFocus(nativeEvent) {
+      if (this.$props.onFocus) {
+        this.$props.onFocus.call(undefined, {
+          nativeEvent: nativeEvent,
+          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, " + backgroundColor + ")";
+      }
+    },
+    getGradientRectMetrics: function getGradientRectMetrics() {
+      var clientRect = this.gradientWrapper.getBoundingClientRect();
+      return __assign({}, clientRect);
+    },
+    focus: function focus() {
+      kendo_vue_common_1.focusFirstFocusableChild(this.$el);
+    }
+  }
+};
+exports.ColorGradientVue2 = ColorGradientVue2;
+/**
+ * @hidden
+ */
+
+var ColorGradient = ColorGradientVue2;
+exports.ColorGradient = ColorGradient;

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

@@ -0,0 +1,54 @@
+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 {
+    rgba: RGBA;
+    onRgbaChange?: (rgba: RGBA, event: NumericTextBoxChangeEvent) => void;
+    hex: string;
+    onHexChange?: any;
+    opacity: boolean;
+    disabled?: boolean;
+}
+/**
+ * @hidden
+ */
+export interface ColorInputState {
+}
+/**
+ * @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 };