@progress/kendo-vue-inputs 2.7.1 → 2.7.3-dev.202201070829

package/dist/es/colors/utils/color-parser.d.ts

@@ -0,0 +1,65 @@
+import { HSVA } from '../models/hsva';
+import { OutputFormat } from '../models/output-format';
+import { RGB } from '../models/rgb';
+import { RGBA } from '../models/rgba';
+/**
+ * @hidden
+ *
+ * Returns the hex or RGBA string representation of the color.
+ */
+export declare const parseColor: (value: string, format: OutputFormat, safe?: boolean) => string | undefined;
+/**
+ * @hidden
+ *
+ * Returns an HSV object representation of the color string.
+ */
+export declare const getHSV: (value: string, safe?: boolean) => HSVA;
+/**
+ * @hidden
+ *
+ * Returns an RGBA object representation of the color string.
+ */
+export declare const getRGBA: (value: string, safe?: boolean) => RGBA;
+/**
+ * @hidden
+ *
+ * Returns the RGBA string representation of the color.
+ */
+export declare const getColorFromHSV: (hsva: HSVA) => string;
+/**
+ * @hidden
+ *
+ * Returns the RGBA string representation of the color based on the `hue` and
+ * assuming the `value`, `saturation`, and `alpha` have a value of `1`.
+ */
+export declare const getColorFromHue: (hue: number) => string;
+/**
+ * @hidden
+ *
+ * Returns the RGBA string representation of the color.
+ */
+export declare const getColorFromRGBA: (rgba: RGBA) => string;
+/**
+ * @hidden
+ *
+ * Returns the RGB object representation of the color based on the background color.
+ */
+export declare const getRGBFromRGBA: (foregroundColor: RGBA, backgroundColor: RGBA) => RGB;
+/**
+ * @hidden
+ *
+ * Returns the relative luminance.
+ */
+export declare const getLuminance: (rgb: RGB) => number;
+/**
+ * @hidden
+ *
+ * Returns the color contrast.
+ */
+export declare const getContrast: (luminance1: number, luminance2: number) => number;
+/**
+ * @hidden
+ *
+ * Returns the color contrast from two RGBA colors.
+ */
+export declare const getContrastFromTwoRGBAs: (a: RGBA, b: RGBA) => number;

package/dist/es/colors/utils/color-parser.js

@@ -0,0 +1,136 @@
+import { parseColor as parse, Color } from '@progress/kendo-drawing';
+import { isPresent, fitIntoBounds } from './misc';
+/**
+ * @hidden
+ *
+ * Returns the hex or RGBA string representation of the color.
+ */
+export var parseColor = function (value, format, safe) {
+    if (safe === void 0) { safe = true; }
+    var allowedFormats = ['hex', 'rgba']; // TODO: constant?
+    // Angular supports third type: name : const allowedFormats: Array<string> = ['hex', 'rgba', 'name'];
+    if (allowedFormats.indexOf(format) === -1) {
+        throw new Error("Unsupported color output format '" + format + "'. The available options are 'hex' or 'rgba'.");
+    }
+    if (!isPresent(value)) {
+        return;
+    }
+    var parsedColor = parse(value.trim(), safe);
+    if (!isPresent(parsedColor)) {
+        return;
+    }
+    return format === 'hex' ? parsedColor.toCss() : parsedColor.toCssRgba();
+};
+/**
+ * @hidden
+ *
+ * Returns an HSV object representation of the color string.
+ */
+export var getHSV = function (value, safe) {
+    if (safe === void 0) { safe = true; }
+    var parsed = parse(value, safe);
+    if (!isPresent(parsed)) {
+        return {};
+    }
+    return parsed.toHSV();
+};
+/**
+ * @hidden
+ *
+ * Returns an RGBA object representation of the color string.
+ */
+export var getRGBA = function (value, safe) {
+    if (safe === void 0) { safe = true; }
+    var parsed = parse(value, safe);
+    if (!isPresent(parsed)) {
+        return {};
+    }
+    return parsed.toBytes();
+};
+/**
+ * @hidden
+ *
+ * Returns the RGBA string representation of the color.
+ */
+export var getColorFromHSV = function (hsva) {
+    var hue = fitIntoBounds(hsva.h, 0, 359.9);
+    var saturation = fitIntoBounds(hsva.s, 0, 1);
+    var value = fitIntoBounds(hsva.v, 0, 1);
+    var alpha = fitIntoBounds(hsva.a, 0, 1);
+    return Color.fromHSV(hue, saturation, value, alpha).toCssRgba();
+};
+/**
+ * @hidden
+ *
+ * Returns the RGBA string representation of the color based on the `hue` and
+ * assuming the `value`, `saturation`, and `alpha` have a value of `1`.
+ */
+export var getColorFromHue = function (hue) {
+    return getColorFromHSV({ h: hue, s: 1, v: 1, a: 1 });
+};
+/**
+ * @hidden
+ *
+ * Returns the RGBA string representation of the color.
+ */
+export var getColorFromRGBA = function (rgba) {
+    var red = fitIntoBounds(rgba.r, 0, 255);
+    var green = fitIntoBounds(rgba.g, 0, 255);
+    var blue = fitIntoBounds(rgba.b, 0, 255);
+    var alpha = fitIntoBounds(rgba.a, 0, 1);
+    return Color.fromBytes(red, green, blue, alpha).toCssRgba();
+};
+/**
+ * @hidden
+ *
+ * Returns the RGB object representation of the color based on the background color.
+ */
+export var getRGBFromRGBA = function (foregroundColor, backgroundColor) {
+    var r1 = fitIntoBounds(foregroundColor.r, 0, 255);
+    var g1 = fitIntoBounds(foregroundColor.g, 0, 255);
+    var b1 = fitIntoBounds(foregroundColor.b, 0, 255);
+    var a1 = fitIntoBounds(foregroundColor.a, 0, 1);
+    var r2 = fitIntoBounds(backgroundColor.r, 0, 255);
+    var g2 = fitIntoBounds(backgroundColor.g, 0, 255);
+    var b2 = fitIntoBounds(backgroundColor.b, 0, 255);
+    return {
+        r: Math.round(((1 - a1) * r2) + (a1 * r1)),
+        g: Math.round(((1 - a1) * g2) + (a1 * g1)),
+        b: Math.round(((1 - a1) * b2) + (a1 * b1))
+    };
+};
+/**
+ * @hidden
+ *
+ * Returns the relative luminance.
+ */
+export var getLuminance = function (rgb) {
+    // @ts-ignore
+    var a = [rgb.r, rgb.g, rgb.b].map(function (v) {
+        v /= 255;
+        return v <= 0.03928
+            ? v / 12.92
+            : Math.pow((v + 0.055) / 1.055, 2.4);
+    });
+    // @ts-ignore
+    return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
+};
+/**
+ * @hidden
+ *
+ * Returns the color contrast.
+ */
+export var getContrast = function (luminance1, luminance2) {
+    var brightest = Math.max(luminance1, luminance2);
+    var darkest = Math.min(luminance1, luminance2);
+    return (brightest + 0.05)
+        / (darkest + 0.05);
+};
+/**
+ * @hidden
+ *
+ * Returns the color contrast from two RGBA colors.
+ */
+export var getContrastFromTwoRGBAs = function (a, b) {
+    return getContrast(getLuminance(getRGBFromRGBA(a, b)), getLuminance(getRGBFromRGBA(b, { r: 0, g: 0, b: 0, a: 1 })));
+};

package/dist/es/colors/utils/misc.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @hidden
+ */
+export declare const isPresent: (value: any) => boolean;
+/**
+ * @hidden
+ *
+ * Fits the contender number into the specified bounds.
+ * If the number is NaN or null, the minimum is returned.
+ *
+ * @param contender Represents the number you want to fit into the specified bounds.
+ * @param min The inclusive lower bound number.
+ * @param max The inclusive upper bound number.
+ */
+export declare const fitIntoBounds: (contender: number | undefined, min: number, max: number) => number;

package/dist/es/colors/utils/misc.js

@@ -0,0 +1,20 @@
+/**
+ * @hidden
+ */
+export var isPresent = function (value) { return value !== null && value !== undefined; };
+/**
+ * @hidden
+ *
+ * Fits the contender number into the specified bounds.
+ * If the number is NaN or null, the minimum is returned.
+ *
+ * @param contender Represents the number you want to fit into the specified bounds.
+ * @param min The inclusive lower bound number.
+ * @param max The inclusive upper bound number.
+ */
+export var fitIntoBounds = function (contender, min, max) {
+    if (!isPresent(contender) || isNaN(contender)) {
+        return min;
+    }
+    return contender <= min ? min : contender >= max ? max : contender;
+};

package/dist/es/colors/utils/svg-calc.d.ts

@@ -0,0 +1,62 @@
+/**
+ * @hidden
+ *
+ * Render the svg <path> element.
+ *
+ * @param points (array) Represents the points coordinates as an array of tuples.
+ * @param command (function) The command that is used (bezierCommand, lineCommand).
+ *      @param point (array) [x,y] Represents the current point coordinates.
+ *      @param i (integer) Represents the index of 'point' in the array 'a'.
+ *      @param a (array) Represents the complete array of points coordinates.
+ *      @output (string) a svg path command.
+ * @output (string) a Svg <path> element
+ */
+export declare const svgPath: (points: number[][], command: Function) => string;
+/**
+ * @hidden
+ *
+ * Returns the properties of a line.
+ *
+ * @param pointA (array) [x,y] Represents the start point coordinates.
+ * @param pointB (array) [x,y] Represents the end point coordinates.
+ * @output (object) { length: (integer), angle: (integer) }
+ */
+export declare const line: (pointA: number[], pointB: number[]) => {
+    length: number;
+    angle: number;
+};
+/**
+ * @hidden
+ *
+ * Create a function to calculate the position of the control point.
+ *
+ * @param lineCalc (function) Represents the line function.
+ *      @param pointA (array) [x,y] Represents the start point coordinates.
+ *      @param pointB (array) [x,y] Represents the end point coordinates.
+ *      @output (object) { length: (integer), angle: (integer) }
+ * @output (function) closure.
+ *      @param current (array) [x, y] Represents the current point coordinates.
+ *      @param previous (array) [x, y] Represents the previous point coordinates.
+ *      @param next (array) [x, y] ]Represents the next point coordinates.
+ *      @param reverse (boolean, optional) Sets the direction.
+ *      @output (array) [x, y] coordinates of a control point.
+ */
+export declare const controlPoint: (lineCalc: Function) => (current: number[], previous: number[], next: number[], reverse?: boolean) => number[];
+/**
+ * @hidden
+ *
+ * Create a function to calculate a bezier curve command.
+ *
+ * @param controlPointCalc (function) Represents the controlPoint function.
+ *      @param current (array) [x, y] Represents the current point coordinates.
+ *      @param previous (array) [x, y] Represents the previous point coordinates.
+ *      @param next (array) [x, y] ]Represents the next point coordinates.
+ *      @param reverse (boolean, optional) Sets the direction.
+ *      @output (array) [x, y] coordinates of a control point.
+ * @output (function) closure.
+ *      @param point (array) [x,y] Represents the current point coordinates.
+ *      @param i (integer) Represents the index of 'point' in the array 'a'.
+ *      @param a (array) Represents the complete array of points coordinates.
+ *      @output (string) 'C x2,y2 x1,y1 x,y' Cubic bezier command.
+ */
+export declare const bezierCommand: (controlPointCalc: Function) => (point: number[], i: number, a: number[]) => string;

package/dist/es/colors/utils/svg-calc.js

@@ -0,0 +1,103 @@
+/**
+ * @hidden
+ *
+ * Render the svg <path> element.
+ *
+ * @param points (array) Represents the points coordinates as an array of tuples.
+ * @param command (function) The command that is used (bezierCommand, lineCommand).
+ *      @param point (array) [x,y] Represents the current point coordinates.
+ *      @param i (integer) Represents the index of 'point' in the array 'a'.
+ *      @param a (array) Represents the complete array of points coordinates.
+ *      @output (string) a svg path command.
+ * @output (string) a Svg <path> element
+ */
+export var svgPath = function (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 " + point[0] + "," + point[1] :
+            // else
+            acc + " " + command(point, i, a);
+    }, '');
+    return "<path d=\"" + d + "\" fill=\"none\" stroke=\"white\" stroke-width=\"1\"/>";
+};
+/**
+ * @hidden
+ *
+ * Returns the properties of a line.
+ *
+ * @param pointA (array) [x,y] Represents the start point coordinates.
+ * @param pointB (array) [x,y] Represents the end point coordinates.
+ * @output (object) { length: (integer), angle: (integer) }
+ */
+export var line = function (pointA, pointB) {
+    var lengthX = pointB[0] - pointA[0];
+    var lengthY = pointB[1] - pointA[1];
+    return {
+        length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),
+        angle: Math.atan2(lengthY, lengthX)
+    };
+};
+/**
+ * @hidden
+ *
+ * Create a function to calculate the position of the control point.
+ *
+ * @param lineCalc (function) Represents the line function.
+ *      @param pointA (array) [x,y] Represents the start point coordinates.
+ *      @param pointB (array) [x,y] Represents the end point coordinates.
+ *      @output (object) { length: (integer), angle: (integer) }
+ * @output (function) closure.
+ *      @param current (array) [x, y] Represents the current point coordinates.
+ *      @param previous (array) [x, y] Represents the previous point coordinates.
+ *      @param next (array) [x, y] ]Represents the next point coordinates.
+ *      @param reverse (boolean, optional) Sets the direction.
+ *      @output (array) [x, y] coordinates of a control point.
+ */
+export var controlPoint = function (lineCalc) {
+    return function (current, previous, next, reverse) {
+        // when 'current' is the first or last point of the array
+        // 'previous' and 'next' are undefined 
+        // replace with 'current'
+        var p = previous || current;
+        var n = next || current;
+        var smooth = 0.1;
+        // properties of the line between previous and next 
+        var l = lineCalc(p, n);
+        // If is end-control-point, add PI to the angle to go backward
+        var angle = l.angle + (reverse ? Math.PI : 0);
+        var length = l.length * smooth;
+        // The control point position is relative to the current point
+        var x = current[0] + Math.cos(angle) * length;
+        var y = current[1] + Math.sin(angle) * length;
+        return [x, y];
+    };
+};
+/**
+ * @hidden
+ *
+ * Create a function to calculate a bezier curve command.
+ *
+ * @param controlPointCalc (function) Represents the controlPoint function.
+ *      @param current (array) [x, y] Represents the current point coordinates.
+ *      @param previous (array) [x, y] Represents the previous point coordinates.
+ *      @param next (array) [x, y] ]Represents the next point coordinates.
+ *      @param reverse (boolean, optional) Sets the direction.
+ *      @output (array) [x, y] coordinates of a control point.
+ * @output (function) closure.
+ *      @param point (array) [x,y] Represents the current point coordinates.
+ *      @param i (integer) Represents the index of 'point' in the array 'a'.
+ *      @param a (array) Represents the complete array of points coordinates.
+ *      @output (string) 'C x2,y2 x1,y1 x,y' Cubic bezier command.
+ */
+export var bezierCommand = function (controlPointCalc) { return function (point, i, a) {
+    // start control point
+    var _a = controlPointCalc(a[i - 1], a[i - 2], point), cpsX = _a[0], cpsY = _a[1];
+    // end control point
+    var _b = controlPointCalc(point, a[i - 1], a[i + 1], true), cpeX = _b[0], cpeY = _b[1];
+    return "C " + cpsX + "," + cpsY + " " + cpeX + "," + cpeY + " " + point[0] + "," + point[1];
+}; };

package/dist/es/main.d.ts

@@ -1,5 +1,15 @@
 import { FormComponentValidity } from '@progress/kendo-vue-common';
 export { FormComponentValidity };
+export { ColorPalette, ColorPaletteState } from './colors/ColorPalette';
+export * from './colors/ColorPicker';
+export * from './colors/interfaces/ColorPaletteChangeEvent';
+export * from './colors/interfaces/ColorPaletteProps';
+export * from './colors/interfaces/ColorPickerBlurEvent';
+export * from './colors/interfaces/ColorPickerChangeEvent';
+export * from './colors/interfaces/ColorPickerFocusEvent';
+export * from './colors/interfaces/ColorPickerPaletteSettings';
+export * from './colors/interfaces/ColorPickerPopupSettings';
+export * from './colors/interfaces/ColorPickerProps';
 export { Switch, SwitchProps, SwitchState, SwitchChangeEvent } from './switch/Switch';
 export * from './input/Input';
 export * from './numerictextbox/NumericTextBox';

package/dist/es/main.js

@@ -1,3 +1,13 @@
+export { ColorPalette } from './colors/ColorPalette';
+export * from './colors/ColorPicker';
+export * from './colors/interfaces/ColorPaletteChangeEvent';
+export * from './colors/interfaces/ColorPaletteProps';
+export * from './colors/interfaces/ColorPickerBlurEvent';
+export * from './colors/interfaces/ColorPickerChangeEvent';
+export * from './colors/interfaces/ColorPickerFocusEvent';
+export * from './colors/interfaces/ColorPickerPaletteSettings';
+export * from './colors/interfaces/ColorPickerPopupSettings';
+export * from './colors/interfaces/ColorPickerProps';
 export { Switch } from './switch/Switch';
 export * from './input/Input';
 export * from './numerictextbox/NumericTextBox';

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-inputs',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1640003732,
+    publishDate: 1641543462,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/es/switch/Switch.js

@@ -66,7 +66,10 @@ var Switch = {
       default: false
     },
     validationMessage: String,
-    value: [String, Number, Boolean],
+    value: {
+      type: [String, Number, Boolean],
+      default: undefined
+    },
     modelValue: {
       type: Boolean,
       default: undefined

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

@@ -0,0 +1,55 @@
+import { DefineComponent } from '../additionalTypes';
+import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { ColorPaletteService } from './utils/color-palette.service';
+import { ColorPaletteProps } from './interfaces/ColorPaletteProps';
+/**
+ * @hidden
+ */
+export declare const DEFAULT_TILE_SIZE = 24;
+/**
+ * @hidden
+ */
+export declare const DEFAULT_COLUMNS_COUNT = 10;
+/**
+ * @hidden
+ */
+export declare const DEFAULT_PRESET = "office";
+/**
+ * @hidden
+ */
+export interface ColorPaletteState {
+    wrapper: HTMLDivElement | null;
+    paletteService: ColorPaletteService;
+}
+/**
+ * @hidden
+ */
+export interface ColorPaletteComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ColorPaletteMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ColorPaletteData {
+    selectedColor?: string;
+    focusedColor?: string;
+    isFirstRender: boolean;
+}
+/**
+ * @hidden
+ */
+export interface ColorPaletteAll extends Vue, ColorPaletteMethods, ColorPaletteData, ColorPaletteComputed, ColorPaletteState {
+}
+declare let ColorPalette: ComponentOptions<ColorPaletteAll, DefaultData<ColorPaletteData>, DefaultMethods<ColorPaletteAll>, ColorPaletteComputed, RecordPropsDefinition<ColorPaletteProps>>;
+declare const ColorPaletteVue3: DefineComponent<ColorPaletteProps, any, ColorPaletteData, ColorPaletteComputed, ColorPaletteMethods, {}, {}, {}, string, ColorPaletteProps, ColorPaletteProps, {}>;
+export { ColorPalette, ColorPaletteVue3 };