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

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

@@ -0,0 +1,145 @@
+import { parseColor as parse, Color } from '@progress/kendo-drawing';
+import { isPresent, fitIntoBounds } from './misc.js';
+/**
+ * @hidden
+ *
+ * Returns the hex or RGBA string representation of the color.
+ */
+export var parseColor = function (value, format, opacityEnabled, safe) {
+    if (opacityEnabled === void 0) { opacityEnabled = false; }
+    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 '".concat(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' ? getHexValue(parsedColor, opacityEnabled) : parsedColor.toCssRgba();
+};
+/**
+ * @hidden
+ *
+ * Returns the HEX value.
+ */
+export var getHexValue = function (color, opacity) {
+    return opacity && color.a < 1 ? color.toCss({ alpha: true }) : color.toCss();
+};
+/**
+ * @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/esm/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/esm/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/esm/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/esm/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 ".concat(point[0], ",").concat(point[1]) :
+            // else
+            "".concat(acc, " ").concat(command(point, i, a));
+    }, '');
+    return "<path d=\"".concat(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 ".concat(cpsX, ",").concat(cpsY, " ").concat(cpeX, ",").concat(cpeY, " ").concat(point[0], ",").concat(point[1]);
+}; };

package/dist/esm/input/Input.d.ts

@@ -0,0 +1,189 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+import { FormComponentProps } from '@progress/kendo-vue-common';
+declare type DefaultData<V> = object | ((this: V) => InputData);
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+/**
+ * Represents the props of the [KendoVue Input component]({% slug overview_textbox %}).
+ * Extends the [native input props](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement).
+ */
+export interface InputProps extends FormComponentProps {
+    /**
+     * Renders a floating label for the Input component.
+     */
+    id?: string;
+    label?: string;
+    value?: string | string[] | number;
+    modelValue?: string | number;
+    defaultValue?: string | string[] | number | undefined;
+    disabled?: boolean;
+    validate?: boolean;
+    /**
+     * Configures the `size` of the MaskedTextBox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `class`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large' | string;
+    /**
+     * Configures the `roundness` of the MaskedTextBox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null&mdash;Does not set a rounded `class`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
+    /**
+     * Configures the `fillMode` of the MaskedTextBox.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - null&mdash;Does not set a fillMode `class`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'flat' | 'outline' | string;
+    dir?: string;
+    /**
+     * Fires when the `change` event of the input is triggered.
+     */
+    onChange?: (event: any) => void;
+    /**
+     * Fires when the `input` event of the input is triggered.
+     */
+    onInput?: (event: any) => void;
+    /**
+     * Fires when the input is focused.
+     */
+    onFocus?: (event: any) => void;
+    /**
+     * Fires when the input is blurred.
+     */
+    onBlur?: (event: any) => void;
+    /**
+     * Fires when the 'keyup' input event is triggered.
+     */
+    onKeyup?: (event: any) => void;
+    /**
+     * Fires when the 'keydown' input event is triggered.
+     */
+    onKeydown?: (event: any) => void;
+    /**
+     * Fires when the 'keypress' input event is triggered.
+     */
+    onKeypress?: (event: any) => void;
+    /**
+     * Specifies the placeholder of an `input` element. Used to define if the input is empty.
+     */
+    placeholder?: string;
+    /**
+     * Defines a string prop that controls the input icon.
+     */
+    iconName?: String;
+    /**
+     * Defines if the inputPrefix will be shown. Accepts a slot name, a `render` function, or a Vue component.
+     */
+    inputPrefix?: Boolean | String | Object | Function;
+    /**
+     * Defines if the inputSuffix will be shown. Accepts a slot name, a `render` function, or a Vue component.
+     */
+    inputSuffix?: Boolean | String | Object | Function;
+    /**
+     * Defines a boolean prop that controls whether to show the validation icon. Defaults to 'false'.
+     */
+    showValidationIcon?: Boolean;
+    /**
+     * Defines a boolean prop that controls whether to show the loading icon. Defaults to 'false'.
+     */
+    showLoadingIcon?: Boolean;
+    /**
+     * Defines a boolean prop that controls whether to show the clear icon. Defaults to 'false'.
+     */
+    showClearButton?: Boolean;
+    /**
+     * Defines additional class to the wrapper element.
+     */
+    wrapperClass?: String;
+    /**
+     * Defines tabindex to the input element.
+     */
+    tabIndex?: Number;
+    /**
+     * Defines additional class to the input element.
+     */
+    inputClass?: String;
+}
+/**
+ * @hidden
+ */
+export interface InputData {
+    hasMounted?: boolean;
+    autofill?: boolean;
+    currentValue?: string | string[] | number;
+    valueDuringOnChange?: string;
+    focused?: boolean;
+}
+/**
+ * @hidden
+ */
+export interface InputState {
+    inputRef: any;
+    _input: any;
+    _inputId?: string;
+    v3: boolean;
+}
+/**
+ * @hidden
+ */
+export interface InputMethods {
+    [key: string]: any;
+    emitBlur?: (_: any) => void;
+    emitFocus?: (_: any) => void;
+    focus?: () => void;
+    validity: () => any;
+    isInvalid: (state: any) => any;
+    setValidity: () => void;
+    handleInput?: () => void;
+    handleChange: (event: any) => void;
+    handleKeyup?: (event: any) => void;
+    handleKeydown?: (event: any) => void;
+    handleKeypress?: (event: any) => void;
+    handleAutoFill?: (e: any) => void;
+    handleAutoFillEnd?: (e: any) => void;
+    inputWrapperClass: () => any;
+}
+/**
+ * @hidden
+ */
+export interface InputComputed {
+    [key: string]: any;
+    computedValue?: any;
+    spanClassNames?: any;
+}
+/**
+ * @hidden
+ */
+export interface InputAllMethods extends Vue2type, InputMethods, InputComputed, InputState {
+}
+/**
+ * @hidden
+ */
+declare let InputVue2: ComponentOptions<InputAllMethods, DefaultData<InputData>, DefaultMethods<InputAllMethods>, InputComputed, RecordPropsDefinition<InputProps>>;
+/**
+ * @hidden
+ */
+declare const Input: DefineComponent<InputProps, any, InputData, InputComputed, InputMethods, {}, {}, {}, string, InputProps, InputProps, {}>;
+export { Input, InputVue2 };