@progress/kendo-angular-inputs
Version:
Kendo UI for Angular Inputs Package - Everything you need to build professional form functionality (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, Te
165 lines (164 loc) • 5.33 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { parseColor as parse, Color, namedColors as colors } from '@progress/kendo-drawing';
import { isPresent, fitIntoBounds } from '../../common/utils';
/**
* @hidden
*
* Returns the hex or rgba string representation of the color.
*/
export const parseColor = (value, format, opacityEnabled = false, safe = true) => {
const allowedFormats = ['hex', 'rgba', 'name'];
if (allowedFormats.indexOf(format) === -1) {
throw new Error(`Unsupported color output format '${format}'. The available options are 'hex', 'rgba' or 'name'.`);
}
if (!isPresent(value)) {
return;
}
if (format === 'name') {
return nameFormat(value, safe);
}
const parsedColor = parse(value.trim(), safe);
if (!isPresent(parsedColor)) {
return;
}
const parsedColorResult = format === 'hex' ? getHexValue(parsedColor, opacityEnabled) : parsedColor.toCssRgba();
return parsedColorResult;
};
/**
* @hidden
*
* Returns an HSV object representation of the color string.
*/
export const getHSV = (value, safe = true) => {
const parsed = parse(value, safe);
if (!isPresent(parsed)) {
return {};
}
return parsed.toHSV();
};
/**
* @hidden
*
* Returns an RGBA object representation of the color string.
*/
export const getRGBA = (value, safe = true) => {
const parsed = parse(value, safe);
if (!isPresent(parsed)) {
return {};
}
return parsed.toBytes();
};
/**
* @hidden
*
* Returns the RGBA string representation of the color.
*/
export const getColorFromHSV = (hsva, format = 'rgba', opacityEnabled = false) => {
const hue = fitIntoBounds(hsva.h, 0, 359.9);
const saturation = fitIntoBounds(hsva.s, 0, 1);
const value = fitIntoBounds(hsva.v, 0, 1);
const alpha = fitIntoBounds(hsva.a, 0, 1);
const color = Color.fromHSV(hue, saturation, value, alpha);
return format === 'hex' ? getHexValue(color, opacityEnabled) : color.toCssRgba();
};
/**
* @hidden
*
* Returns the HEX value.
*/
export const getHexValue = (color, opacity) => {
return opacity && color.a < 1 ? color.toCss({ alpha: true }) : color.toCss();
};
/**
* @hidden
*
* Returns the RGBA string representation of the color based on the `hue`, assuming the `value`, `saturation` and `alpha` have value of `1`.
*/
export const getColorFromHue = (hue) => {
return getColorFromHSV({ h: hue, s: 1, v: 1, a: 1 });
};
/**
* @hidden
*
* Returns the RGBA string representation of the color.
*/
export const getColorFromRGBA = (rgba) => {
const red = fitIntoBounds(rgba.r, 0, 255);
const green = fitIntoBounds(rgba.g, 0, 255);
const blue = fitIntoBounds(rgba.b, 0, 255);
const alpha = fitIntoBounds(rgba.a, 0, 1);
return Color.fromBytes(red, green, blue, alpha).toCssRgba();
};
/**
*
* @hidden
*/
export function nameFormat(value, safe) {
value = value.toLowerCase().trim();
if (isPresent(colors[value])) {
return value;
}
if (parse(value, safe)) {
value = parse(value, safe).toHex();
}
const key = Object.keys(colors).find(key => colors[key] === value);
if (!key && !safe) {
throw new Error(`The provided color ${value} is not supported for 'format="name"' property.To display ${value} color, the component 'format' property should be set to 'hex' or 'rgba' `);
}
return key;
}
/**
* @hidden
*
* Returns the RGB object representation of the color based on the background color.
*/
export const getRGBFromRGBA = (foregroundColor, backgroundColor) => {
const r1 = fitIntoBounds(foregroundColor.r, 0, 255);
const g1 = fitIntoBounds(foregroundColor.g, 0, 255);
const b1 = fitIntoBounds(foregroundColor.b, 0, 255);
const a1 = fitIntoBounds(foregroundColor.a, 0, 1);
const r2 = fitIntoBounds(backgroundColor.r, 0, 255);
const g2 = fitIntoBounds(backgroundColor.g, 0, 255);
const 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 const getLuminance = (rgb) => {
const 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);
});
return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
};
/**
* @hidden
*
* Returns the color contrast.
*/
export const getContrast = (luminance1, luminance2) => {
const brightest = Math.max(luminance1, luminance2);
const darkest = Math.min(luminance1, luminance2);
return (brightest + 0.05)
/ (darkest + 0.05);
};
/**
* @hidden
*
* Returns the color contrast from two RGBA colors.
*/
export const getContrastFromTwoRGBAs = (a, b) => {
return getContrast(getLuminance(getRGBFromRGBA(a, b)), getLuminance(getRGBFromRGBA(b, { r: 0, g: 0, b: 0, a: 1 })));
};