@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
322 lines (321 loc) • 9.61 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import Color from "color";
import { c as calciteSpacingFixedXl, a as calciteSpacingFixedMd, b as calciteSpacingFixedSm } from "./global.js";
const CSS = {
channel: "channel",
channels: "channels",
colorField: "color-field",
colorFieldScope: "scope--color-field",
colorMode: "color-mode",
colorModeContainer: "color-mode-container",
container: "container",
control: "control",
controlAndScope: "control-and-scope",
controlSection: "control-section",
deleteColor: "delete-color",
header: "header",
hexAndChannelsGroup: "hex-and-channels-group",
hexOptions: "color-hex-options",
hueScope: "scope--hue",
hueSlider: "hue-slider",
opacityScope: "scope--opacity",
opacitySlider: "opacity-slider",
preview: "preview",
previewAndSliders: "preview-and-sliders",
saveColor: "save-color",
savedColor: "saved-color",
savedColorsButtons: "saved-colors-buttons",
savedColorsSection: "saved-colors-section",
scope: "scope",
section: "section",
slider: "slider",
sliders: "sliders",
splitSection: "section--split",
swatchGroup: "swatch-group"
};
const DEFAULT_COLOR = Color("#007AC2");
const DEFAULT_STORAGE_KEY_PREFIX = "calcite-color-";
const RGB_LIMITS = {
r: 255,
g: 255,
b: 255
};
const HSV_LIMITS = {
h: 360,
s: 100,
v: 100
};
const HUE_LIMIT_CONSTRAINED = HSV_LIMITS.h - 1;
const OPACITY_LIMITS = {
min: 0,
max: 100
};
const STATIC_DIMENSIONS = {
s: {
gap: parseInt(calciteSpacingFixedSm),
slider: {
height: 12
},
thumb: {
radius: 7
},
preview: {
size: 20
},
minWidth: 200
},
m: {
gap: parseInt(calciteSpacingFixedMd),
slider: {
height: 12
},
thumb: {
radius: 7
},
preview: {
size: 24
},
minWidth: 240
},
l: {
gap: parseInt(calciteSpacingFixedXl),
slider: {
height: 12
},
thumb: {
radius: 7
},
preview: {
size: 32
},
minWidth: 304
}
};
const SCOPE_SIZE = 1;
const ICONS = {
minus: "minus",
plus: "plus"
};
const hexChar = /^[0-9A-F]$/i;
const shorthandHex = /^#[0-9A-F]{3}$/i;
const longhandHex = /^#[0-9A-F]{6}$/i;
const shorthandHexWithAlpha = /^#[0-9A-F]{4}$/i;
const longhandHexWithAlpha = /^#[0-9A-F]{8}$/i;
function colorFromValue(value, clearable = false, mode) {
if (clearable && !value) {
return null;
}
return Color(
value != null && typeof value === "object" && alphaCompatible(mode) ? normalizeColor(value) : value
);
}
const alphaToOpacity = (alpha) => Number((alpha * 100).toFixed());
const opacityToAlpha = (opacity) => Number((opacity / 100).toFixed(2));
function isValidHex(hex, hasAlpha = false) {
return isShorthandHex(hex, hasAlpha) || isLonghandHex(hex, hasAlpha);
}
function evaluateHex(hex, length, pattern) {
if (!hex) {
return false;
}
return hex.length === length && pattern.test(hex);
}
function isShorthandHex(hex, hasAlpha = false) {
const hexLength = hasAlpha ? 5 : 4;
const hexPattern = hasAlpha ? shorthandHexWithAlpha : shorthandHex;
return evaluateHex(hex, hexLength, hexPattern);
}
function isLonghandHex(hex, hasAlpha = false) {
const hexLength = hasAlpha ? 9 : 7;
const hexPattern = hasAlpha ? longhandHexWithAlpha : longhandHex;
return evaluateHex(hex, hexLength, hexPattern);
}
function normalizeHex(hex, hasAlpha = false, convertFromHexToHexa = false) {
hex = hex.toLowerCase();
if (!hex.startsWith("#")) {
hex = `#${hex}`;
}
if (isShorthandHex(hex, hasAlpha)) {
return rgbToHex(hexToRGB(hex, hasAlpha));
}
if (hasAlpha && convertFromHexToHexa && isValidHex(
hex,
false
/* we only care about RGB hex for conversion */
)) {
const isShorthand = isShorthandHex(hex, false);
return rgbToHex(hexToRGB(`${hex}${isShorthand ? "f" : "ff"}`, true));
}
return hex;
}
function hexify(color, hasAlpha = false) {
return hasAlpha ? color.hexa() : color.hex();
}
function rgbToHex(color) {
const { r, g, b } = color;
const rChars = numToHex(r);
const gChars = numToHex(g);
const bChars = numToHex(b);
const alphaChars = "a" in color ? numToHex(color.a * 255) : "";
return `#${rChars}${gChars}${bChars}${alphaChars}`.toLowerCase();
}
function numToHex(num) {
return num.toString(16).padStart(2, "0");
}
function normalizeAlpha(colorObject) {
const normalized = {
...colorObject,
a: colorObject.alpha ?? 1
/* Color() will omit alpha if 1 */
};
delete normalized.alpha;
return normalized;
}
function normalizeColor(alphaColorObject) {
const normalized = { ...alphaColorObject, alpha: alphaColorObject.a ?? 1 };
delete normalized.a;
return normalized;
}
function hexToRGB(hex, hasAlpha = false) {
if (!isValidHex(hex, hasAlpha)) {
return null;
}
hex = hex.replace("#", "");
let r;
let g;
let b;
let a;
const isShorthand = hex.length === 3 || hex.length === 4;
if (isShorthand) {
const [first, second, third, fourth] = hex.split("");
r = parseInt(`${first}${first}`, 16);
g = parseInt(`${second}${second}`, 16);
b = parseInt(`${third}${third}`, 16);
a = parseInt(`${fourth}${fourth}`, 16) / 255;
} else {
r = parseInt(hex.slice(0, 2), 16);
g = parseInt(hex.slice(2, 4), 16);
b = parseInt(hex.slice(4, 6), 16);
a = parseInt(hex.slice(6, 8), 16) / 255;
}
return isNaN(a) ? { r, g, b } : { r, g, b, a };
}
const enumify = (x) => x;
const CSSColorMode = enumify({
HEX: "hex",
HEXA: "hexa",
RGB_CSS: "rgb-css",
RGBA_CSS: "rgba-css",
HSL_CSS: "hsl-css",
HSLA_CSS: "hsla-css"
});
const ObjectColorMode = enumify({
RGB: "rgb",
RGBA: "rgba",
HSL: "hsl",
HSLA: "hsla",
HSV: "hsv",
HSVA: "hsva"
});
function parseMode(colorValue) {
if (typeof colorValue === "string") {
if (colorValue.startsWith("#")) {
const { length } = colorValue;
if (length === 4 || length === 7) {
return CSSColorMode.HEX;
}
if (length === 5 || length === 9) {
return CSSColorMode.HEXA;
}
}
if (colorValue.startsWith("rgba(")) {
return CSSColorMode.RGBA_CSS;
}
if (colorValue.startsWith("rgb(")) {
return CSSColorMode.RGB_CSS;
}
if (colorValue.startsWith("hsl(")) {
return CSSColorMode.HSL_CSS;
}
if (colorValue.startsWith("hsla(")) {
return CSSColorMode.HSLA_CSS;
}
}
if (typeof colorValue === "object") {
if (hasChannels(colorValue, "r", "g", "b")) {
return hasChannels(colorValue, "a") ? ObjectColorMode.RGBA : ObjectColorMode.RGB;
}
if (hasChannels(colorValue, "h", "s", "l")) {
return hasChannels(colorValue, "a") ? ObjectColorMode.HSLA : ObjectColorMode.HSL;
}
if (hasChannels(colorValue, "h", "s", "v")) {
return hasChannels(colorValue, "a") ? ObjectColorMode.HSVA : ObjectColorMode.HSV;
}
}
return null;
}
function hasChannels(colorObject, ...channels) {
return channels.every((channel) => channel && colorObject && `${channel}` in colorObject);
}
function colorEqual(value1, value2) {
return value1?.rgb().array().toString() === value2?.rgb().array().toString();
}
function alphaCompatible(mode) {
return mode === CSSColorMode.HEXA || mode === CSSColorMode.RGBA_CSS || mode === CSSColorMode.HSLA_CSS || mode === ObjectColorMode.RGBA || mode === ObjectColorMode.HSLA || mode === ObjectColorMode.HSVA;
}
function toAlphaMode(mode) {
const alphaMode = mode === CSSColorMode.HEX ? CSSColorMode.HEXA : mode === CSSColorMode.RGB_CSS ? CSSColorMode.RGBA_CSS : mode === CSSColorMode.HSL_CSS ? CSSColorMode.HSLA_CSS : mode === ObjectColorMode.RGB ? ObjectColorMode.RGBA : mode === ObjectColorMode.HSL ? ObjectColorMode.HSLA : mode === ObjectColorMode.HSV ? ObjectColorMode.HSVA : mode;
return alphaMode;
}
function toNonAlphaMode(mode) {
const nonAlphaMode = mode === CSSColorMode.HEXA ? CSSColorMode.HEX : mode === CSSColorMode.RGBA_CSS ? CSSColorMode.RGB_CSS : mode === CSSColorMode.HSLA_CSS ? CSSColorMode.HSL_CSS : mode === ObjectColorMode.RGBA ? ObjectColorMode.RGB : mode === ObjectColorMode.HSLA ? ObjectColorMode.HSL : mode === ObjectColorMode.HSVA ? ObjectColorMode.HSV : mode;
return nonAlphaMode;
}
const borderWidthInPx = 1;
const inlineSizeBorderTotalWidth = borderWidthInPx * 2;
function getSliderWidth(availableWidth, activeStaticDimensions, hasAlpha) {
const previewWidth = hasAlpha ? STATIC_DIMENSIONS["l"].preview.size : activeStaticDimensions.preview.size;
const effectiveWidth = availableWidth - inlineSizeBorderTotalWidth;
const inlineSpaceAroundElements = activeStaticDimensions.gap * 3;
return Math.max(effectiveWidth - inlineSpaceAroundElements - previewWidth, 0);
}
function getColorFieldDimensions(availableWidth) {
const colorFieldAspectRatio = 1.8;
const effectiveWidth = availableWidth - inlineSizeBorderTotalWidth;
return {
width: Math.max(effectiveWidth, 0),
height: Math.max(Math.floor(effectiveWidth / colorFieldAspectRatio), 0)
};
}
export {
CSSColorMode as C,
DEFAULT_COLOR as D,
HSV_LIMITS as H,
ICONS as I,
OPACITY_LIMITS as O,
RGB_LIMITS as R,
STATIC_DIMENSIONS as S,
getColorFieldDimensions as a,
hexify as b,
colorFromValue as c,
DEFAULT_STORAGE_KEY_PREFIX as d,
alphaCompatible as e,
colorEqual as f,
getSliderWidth as g,
hexToRGB as h,
isValidHex as i,
CSS as j,
toNonAlphaMode as k,
HUE_LIMIT_CONSTRAINED as l,
normalizeAlpha as m,
normalizeHex as n,
opacityToAlpha as o,
parseMode as p,
alphaToOpacity as q,
SCOPE_SIZE as r,
isLonghandHex as s,
toAlphaMode as t,
isShorthandHex as u,
rgbToHex as v,
hexChar as w
};