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

package/dist/esm/colors/ColorContrastLabels.js

@@ -0,0 +1,84 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { messages, colorGradientContrastRatio, colorGradientAALevel, colorGradientAAALevel, colorGradientPass, colorGradientFail } from '../messages.js';
+import { getContrastFromTwoRGBAs } from './utils/color-parser.js';
+/**
+ * @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 = "".concat(contrastRatioMessage, ": ").concat(contrast.toFixed(2));
+    var aaText = "".concat(AALevelMessage, ": ").concat(requiredAAContrast);
+    var aaaText = "".concat(AAALevelMessage, ": ").concat(requiredAAAContrast);
+    var aaPass = contrast >= 4.5;
+    var aaaPass = contrast >= 7;
+    var success = h("span", {
+      key: 1,
+      "class": "k-contrast-validation k-text-success"
+    }, [passMessage, " ", h("span", {
+      "class": "k-icon k-i-check"
+    })]);
+    var error = h("span", {
+      key: 2,
+      "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]), aaPass ? h("span", {
+      "class": "k-contrast-validation k-text-success"
+    }, [h("span", {
+      "class": "k-icon k-i-check"
+    }), aaaPass && 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]), aaPass ? success : error]), h("div", [h("span", [aaaText]), aaaPass ? success : error])]);
+  }
+};
+/**
+ * @hidden
+ */
+
+var ColorContrastLabels = ColorContrastLabelsVue2;
+export { ColorContrastLabels, ColorContrastLabelsVue2 };

package/dist/esm/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: any;
+    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/esm/colors/ColorContrastSvg.js

@@ -0,0 +1,130 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { bezierCommand, controlPoint, line } from './utils/svg-calc.js';
+import { getColorFromHSV, getRGBA, getContrastFromTwoRGBAs } from './utils/color-parser.js';
+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 _this = this;
+
+    var h = gh || createElement;
+
+    var svgPath = function svgPath(points, command) {
+      if (points.length === 0) {
+        return '';
+      } // build the d attributes by looping over the points
+
+
+      var d = points.reduce(function (acc, point, i, a) {
+        return i === 0 ? // if first point
+        "M ".concat(point[0], ",").concat(point[1]) : // else
+        "".concat(acc, " ").concat(command(point, i, a));
+      }, '');
+      return h("path", {
+        d: d,
+        attrs: this.v3 ? undefined : {
+          d: d,
+          fill: "none",
+          stroke: "white",
+          "stroke-width": "1"
+        },
+        fill: "none",
+        stroke: "white",
+        "stroke-width": "1"
+      });
+    };
+
+    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 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
+      }
+    }, [svgPath.call(this, getPaths(AA_CONTRAST, STEP_COUNT), bezierCommandCalc), svgPath.call(this, getPaths(AA_CONTRAST, STEP_COUNT, true), bezierCommandCalc), svgPath.call(this, getPaths(AAA_CONTRAST, STEP_COUNT), bezierCommandCalc), svgPath.call(this, getPaths(AAA_CONTRAST, STEP_COUNT, true), bezierCommandCalc)]);
+  }
+};
+/**
+ * @hidden
+ */
+
+var ColorContrastSvg = ColorContrastSvgVue2;
+export { ColorContrastSvg, ColorContrastSvgVue2 };

package/dist/esm/colors/ColorGradient.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 { HSVA } from './models/hsva';
+import { RGBA } from './models/rgba';
+import { ColorGradientProps } from './interfaces/ColorGradientProps';
+/**
+ * @hidden
+ */
+export interface ColorGradientState {
+    guidId: string;
+    gradientWrapper: any;
+    alphaSlider: any;
+    firstFocusable: any;
+    lastFocusable: any;
+}
+/**
+ * @hidden
+ */
+export interface ColorGradientComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ColorGradientMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ColorGradientData {
+    hsva: HSVA;
+    currentBgColor: 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 };