@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
311 lines (310 loc) • 9.42 kB
JavaScript
/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
v3.2.1 */
import Color from "color";
import { h as calciteSpacingFixedXl, i as calciteSpacingFixedMd, j 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",
savedColors: "saved-colors",
savedColorsButtons: "saved-colors-buttons",
savedColorsSection: "saved-colors-section",
scope: "scope",
section: "section",
slider: "slider",
sliders: "sliders",
splitSection: "section--split"
};
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 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;
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,
OPACITY_LIMITS as O,
RGB_LIMITS as R,
STATIC_DIMENSIONS as S,
isLonghandHex as a,
isShorthandHex as b,
alphaToOpacity as c,
hexChar as d,
getColorFieldDimensions as e,
DEFAULT_STORAGE_KEY_PREFIX as f,
getSliderWidth as g,
hexify as h,
isValidHex as i,
alphaCompatible as j,
normalizeColor as k,
colorEqual as l,
CSS as m,
normalizeHex as n,
opacityToAlpha as o,
parseMode as p,
toNonAlphaMode as q,
rgbToHex as r,
HUE_LIMIT_CONSTRAINED as s,
toAlphaMode as t,
normalizeAlpha as u,
SCOPE_SIZE as v,
hexToRGB as w
};