@progress/kendo-vue-inputs 5.3.0-dev.202409130647 → 5.3.0-develop.1

package/dist/es/colors/ColorGradient.js

@@ -1,503 +0,0 @@
-// @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';
-import { Slider } from './../main';
-import { fitIntoBounds, isPresent } from './utils/misc';
-import { getColorFromHue, parseColor, getHSV, getColorFromHSV, getRGBA, getColorFromRGBA } from './utils/color-parser';
-import { removeCachedColor } from './utils/color-cache';
-import { ColorInput } from './ColorInput';
-import { ColorContrastLabels } from './ColorContrastLabels';
-import { ColorContrastSvg } from './ColorContrastSvg';
-import { provideLocalizationService } from '@progress/kendo-vue-intl';
-import { colorGradientDragHandle, colorGradientHueSliderLabel, colorGradientAlphaSliderLabel, messages } from '../messages/main';
-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);
-    // tslint:disable-next-line:max-line-length
-    var colorGradientHueSliderLabelMessage = localizationService.toLanguageString(colorGradientHueSliderLabel, messages[colorGradientHueSliderLabel]);
-    // tslint:disable-next-line:max-line-length
-    var colorGradientAlphaSliderLabelMessage = localizationService.toLanguageString(colorGradientAlphaSliderLabel, messages[colorGradientAlphaSliderLabel]);
-    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-orientation": 'undefined',
-          "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-orientation": 'undefined',
-        "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,
-        ariaLabel: colorGradientHueSliderLabelMessage
-      },
-      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,
-      ariaLabel: colorGradientHueSliderLabelMessage
-    }), 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,
-        ariaLabel: colorGradientAlphaSliderLabelMessage
-      },
-      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,
-      ariaLabel: colorGradientAlphaSliderLabelMessage,
-      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');
-      if (this.firstFocusable) {
-        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/es/colors/ColorInput.d.ts

@@ -1,57 +0,0 @@
-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 };