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

package/dist/es/checkbox/Checkbox.js

@@ -2,9 +2,10 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var ref = allVue.ref;
 var inject = allVue.inject;
-import { Keys, classNames, guid, getTabIndex, getDefaultSlots, validatePackage, templateRendering, getTemplate, getListeners, kendoThemeMaps } from '@progress/kendo-vue-common';
+import { Keys, classNames, guid, getTabIndex, getDefaultSlots, validatePackage, templateRendering, getTemplate, getListeners, kendoThemeMaps, setRef, getRef } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, checkboxValidation, checkboxOptionalText } from './../messages';
@@ -145,7 +146,7 @@ var CheckboxVue2 = {
     }
   },
   mounted: function mounted() {
-    this.input = this.v3 ? this.inputRef : this.$refs.input;
+    this.input = getRef(this, 'input');
 
     if (!this.currentDir && window && this.$el) {
       // Note: getComputedStyle forces reflow
@@ -160,14 +161,14 @@ var CheckboxVue2 = {
   },
   updated: function updated() {
     if (!this.input) {
-      this.input = this.v3 ? this.inputRef : this.$refs.input;
+      this.input = getRef(this, 'input');
     }
 
     this.setValidity();
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     var inputRef = ref(null);
     var kendoLocalizationService = inject('kendoLocalizationService', {});
     return {
@@ -208,8 +209,6 @@ var CheckboxVue2 = {
     }, _a["k-checkbox-" + kendoThemeMaps.sizeMap[size]] = size, _a["k-rounded-" + kendoThemeMaps.roundedMap[rounded]] = rounded, _a['k-state-indeterminate'] = this.indeterminateProp, _a['k-state-invalid k-invalid'] = !(this.isValid || validityStyles !== undefined || validityStyles === true), _a));
 
     var checkboxInput = function checkboxInput() {
-      var _this = this;
-
       return h("input", {
         type: 'checkbox',
         attrs: this.v3 ? undefined : {
@@ -219,7 +218,7 @@ var CheckboxVue2 = {
           "aria-labelledby": ariaLabelledBy,
           "aria-describedby": ariaDescribedBy,
           disabled: disabled,
-          tabIndex: getTabIndex(tabIndex, disabled),
+          tabindex: getTabIndex(tabIndex, disabled),
           role: 'checkbox',
           required: required !== undefined ? required : false,
           "aria-checked": this.computedChecked || this.checkedProp ? true : this.indeterminateProp ? 'mixed' : false,
@@ -228,9 +227,7 @@ var CheckboxVue2 = {
         "class": inputClasses,
         name: name,
         id: id || this.calculatedId,
-        ref: this.v3 ? function (el) {
-          _this.inputRef = el;
-        } : 'input',
+        ref: setRef(this, 'input'),
         "aria-labelledby": ariaLabelledBy,
         "aria-describedby": ariaDescribedBy,
         checked: this.v3 ? Boolean(this.checkedProp) : null,
@@ -238,7 +235,7 @@ var CheckboxVue2 = {
           "checked": Boolean(this.checkedProp)
         },
         disabled: disabled,
-        tabIndex: getTabIndex(tabIndex, disabled),
+        tabindex: getTabIndex(tabIndex, disabled),
         role: 'checkbox',
         required: required !== undefined ? required : false,
         "aria-checked": this.computedChecked || this.checkedProp ? true : this.indeterminateProp ? 'mixed' : false,

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

@@ -0,0 +1,49 @@
+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 { RGBA } from './models/rgba';
+/**
+ * @hidden
+ */
+export interface ColorContrastLabelsProps {
+    bgColor: RGBA;
+    rgba: RGBA;
+}
+/**
+ * @hidden
+ */
+export interface ColorContrastLabelsState {
+}
+/**
+ * @hidden
+ */
+export interface ColorContrastLabelsComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ColorContrastLabelsMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ColorContrastLabelsData {
+}
+/**
+ * @hidden
+ */
+export interface ColorContrastLabelsAll extends Vue2type, ColorContrastLabelsMethods, ColorContrastLabelsData, ColorContrastLabelsComputed, ColorContrastLabelsState {
+}
+/**
+ * @hidden
+ */
+declare let ColorContrastLabelsVue2: ComponentOptions<ColorContrastLabelsAll, DefaultData<ColorContrastLabelsData>, DefaultMethods<ColorContrastLabelsAll>, ColorContrastLabelsComputed, RecordPropsDefinition<ColorContrastLabelsProps>>;
+/**
+ * @hidden
+ */
+declare const ColorContrastLabels: DefineComponent<ColorContrastLabelsProps, any, ColorContrastLabelsData, ColorContrastLabelsComputed, ColorContrastLabelsMethods, {}, {}, {}, string, ColorContrastLabelsProps, ColorContrastLabelsProps, {}>;
+export { ColorContrastLabels, ColorContrastLabelsVue2 };

package/dist/es/colors/ColorContrastLabels.js

@@ -0,0 +1,80 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { messages, colorGradientContrastRatio, colorGradientAALevel, colorGradientAAALevel, colorGradientPass, colorGradientFail } from '../messages';
+import { getContrastFromTwoRGBAs } from './utils/color-parser';
+/**
+ * @hidden
+ */
+
+var ColorContrastLabelsVue2 = {
+  name: 'KendoColorContrastLabels',
+  props: {
+    bgColor: Object,
+    rgba: Object
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var ls = provideLocalizationService(this);
+    var contrastRatioMessage = ls.toLanguageString(colorGradientContrastRatio, messages[colorGradientContrastRatio]);
+    var AALevelMessage = ls.toLanguageString(colorGradientAALevel, messages[colorGradientAALevel]);
+    var AAALevelMessage = ls.toLanguageString(colorGradientAAALevel, messages[colorGradientAAALevel]);
+    var passMessage = ls.toLanguageString(colorGradientPass, messages[colorGradientPass]);
+    var failMessage = ls.toLanguageString(colorGradientFail, messages[colorGradientFail]);
+    var contrast = getContrastFromTwoRGBAs(this.$props.rgba, this.$props.bgColor);
+    var requiredAAContrast = 4.5.toFixed(1);
+    var requiredAAAContrast = 7.0.toFixed(1);
+    var contrastText = contrastRatioMessage + ": " + contrast.toFixed(2);
+    var aaText = AALevelMessage + ": " + requiredAAContrast;
+    var aaaText = AAALevelMessage + ": " + requiredAAAContrast;
+    var success = h("span", {
+      "class": "k-contrast-validation k-text-success"
+    }, [passMessage, " ", h("span", {
+      "class": "k-icon k-i-check"
+    })]);
+    var error = h("span", {
+      "class": "k-contrast-validation k-text-error"
+    }, [failMessage, " ", h("span", {
+      "class": "k-icon k-i-close"
+    })]);
+    return h("div", {
+      "class": "k-vbox k-colorgradient-color-contrast"
+    }, [h("div", {
+      "class": "k-contrast-ratio"
+    }, [h("span", {
+      "class": "k-contrast-ratio-text"
+    }, [contrastText]), contrast >= 4.5 ? h("span", {
+      "class": "k-contrast-validation k-text-success"
+    }, [h("span", {
+      "class": "k-icon k-i-check"
+    }), contrast >= 7 && h("span", {
+      "class": "k-icon k-i-check"
+    })]) : h("span", {
+      "class": "k-contrast-validation k-text-error"
+    }, [h("span", {
+      "class": "k-icon k-i-close"
+    })])]), h("div", [h("span", [aaText]), contrast >= 4.5 ? success : error]), h("div", [h("span", [aaaText]), contrast >= 7 ? success : error])]);
+  }
+};
+/**
+ * @hidden
+ */
+
+var ColorContrastLabels = ColorContrastLabelsVue2;
+export { ColorContrastLabels, ColorContrastLabelsVue2 };

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

@@ -0,0 +1,50 @@
+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 { HSVA } from './models/hsva';
+/**
+ * @hidden
+ */
+export interface ColorContrastSvgProps {
+    metrics: ClientRect | undefined;
+    backgroundColor: string;
+    hsva: HSVA;
+}
+/**
+ * @hidden
+ */
+export interface ColorContrastSvgState {
+}
+/**
+ * @hidden
+ */
+export interface ColorContrastSvgComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ColorContrastSvgMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ColorContrastSvgData {
+}
+/**
+ * @hidden
+ */
+export interface ColorContrastSvgAll extends Vue2type, ColorContrastSvgMethods, ColorContrastSvgData, ColorContrastSvgComputed, ColorContrastSvgState {
+}
+/**
+ * @hidden
+ */
+declare let ColorContrastSvgVue2: ComponentOptions<ColorContrastSvgAll, DefaultData<ColorContrastSvgData>, DefaultMethods<ColorContrastSvgAll>, ColorContrastSvgComputed, RecordPropsDefinition<ColorContrastSvgProps>>;
+/**
+ * @hidden
+ */
+declare const ColorContrastSvg: DefineComponent<ColorContrastSvgProps, any, ColorContrastSvgData, ColorContrastSvgComputed, ColorContrastSvgMethods, {}, {}, {}, string, ColorContrastSvgProps, ColorContrastSvgProps, {}>;
+export { ColorContrastSvg, ColorContrastSvgVue2 };

package/dist/es/colors/ColorContrastSvg.js

@@ -0,0 +1,109 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
+import { bezierCommand, controlPoint, line, svgPath } from './utils/svg-calc';
+import { getColorFromHSV, getRGBA, getContrastFromTwoRGBAs } from './utils/color-parser';
+var AA_CONTRAST = 4.5;
+var AAA_CONTRAST = 7;
+var STEP_COUNT = 16;
+/**
+ * @hidden
+ */
+
+var ColorContrastSvgVue2 = {
+  name: 'KendoColorContrastSvg',
+  props: {
+    metrics: Object,
+    backgroundColor: String,
+    hsva: Object
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+
+    var renderSvgCurveLine = function renderSvgCurveLine() {
+      var _this = this;
+
+      var gradientRectMetrics = this.$props.metrics;
+
+      var findValue = function findValue(contrast, saturation, low, high, comparer) {
+        var mid = (low + high) / 2;
+        var hsva = Object.assign({}, _this.$props.hsva, {
+          s: saturation / gradientRectMetrics.width,
+          v: 1 - mid / gradientRectMetrics.height
+        });
+        var currentContrast = getContrastFromTwoRGBAs(getRGBA(getColorFromHSV(hsva)), getRGBA(_this.$props.backgroundColor || ''));
+
+        if (low + 0.5 > high) {
+          if (currentContrast < contrast + 1 && currentContrast > contrast - 1) {
+            return mid;
+          } else {
+            return null;
+          }
+        }
+
+        if (comparer(currentContrast, contrast)) {
+          return findValue(contrast, saturation, low, high - (high - low) / 2, comparer);
+        }
+
+        return findValue(contrast, saturation, low + (high - low) / 2, high, comparer);
+      };
+
+      var getPaths = function getPaths(contrast, stepCount, reversed) {
+        if (reversed === void 0) {
+          reversed = false;
+        }
+
+        var points = [];
+
+        for (var i = 0; i <= gradientRectMetrics.width; i += gradientRectMetrics.width / stepCount) {
+          var value = findValue(contrast, i, 0, gradientRectMetrics.height, reversed ? function (a, b) {
+            return a < b;
+          } : function (a, b) {
+            return a > b;
+          });
+
+          if (value !== null) {
+            points.push([i, value]);
+          }
+        }
+
+        return points;
+      };
+
+      var bezierCommandCalc = bezierCommand(controlPoint(line));
+      return svgPath(getPaths(AA_CONTRAST, STEP_COUNT), bezierCommandCalc) + svgPath(getPaths(AA_CONTRAST, STEP_COUNT, true), bezierCommandCalc) + svgPath(getPaths(AAA_CONTRAST, STEP_COUNT), bezierCommandCalc) + svgPath(getPaths(AAA_CONTRAST, STEP_COUNT, true), bezierCommandCalc);
+    };
+
+    return h("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      attrs: this.v3 ? undefined : {
+        xmlns: "http://www.w3.org/2000/svg"
+      },
+      "class": 'k-color-contrast-svg',
+      style: {
+        position: 'absolute',
+        overflow: 'visible',
+        pointerEvents: 'none',
+        left: 0,
+        top: 0,
+        zIndex: 3
+      }
+    }, [renderSvgCurveLine.call(this)]);
+  }
+};
+/**
+ * @hidden
+ */
+
+var ColorContrastSvg = ColorContrastSvgVue2;
+export { ColorContrastSvg, ColorContrastSvgVue2 };

package/dist/es/colors/ColorGradient.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;
+};
+import { HSVA } from './models/hsva';
+import { RGBA } from './models/rgba';
+import { ColorGradientProps } from './interfaces/ColorGradientProps';
+/**
+ * @hidden
+ */
+export interface ColorGradientState {
+    guidId: string;
+    gradientWrapper: any;
+}
+/**
+ * @hidden
+ */
+export interface ColorGradientComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ColorGradientMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ColorGradientData {
+    hsva: HSVA;
+    backgroundColor: string;
+    rgba: RGBA;
+    hex: string;
+    isFirstRender: boolean;
+}
+/**
+ * @hidden
+ */
+export interface ColorGradientAll extends Vue2type, ColorGradientMethods, ColorGradientData, ColorGradientComputed, ColorGradientState {
+}
+/**
+ * @hidden
+ */
+declare let ColorGradientVue2: ComponentOptions<ColorGradientAll, DefaultData<ColorGradientData>, DefaultMethods<ColorGradientAll>, ColorGradientComputed, RecordPropsDefinition<ColorGradientProps>>;
+/**
+ * @hidden
+ */
+declare const ColorGradient: DefineComponent<ColorGradientProps, any, ColorGradientData, ColorGradientComputed, ColorGradientMethods, {}, {}, {}, string, ColorGradientProps, ColorGradientProps, {}>;
+export { ColorGradient, ColorGradientVue2 };