@esri/calcite-components 1.4.0-next.0 → 1.4.0-next.10

package/dist/collection/components/color-picker/resources.js

@@ -1,34 +1,40 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.0
+ * v1.4.0-next.10
  */
 import Color from "color";
 export 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",
-  hexOptions: "color-hex-options",
-  section: "section",
+  deleteColor: "delete-color",
   header: "header",
-  control: "control",
-  splitSection: "section--split",
-  colorModeContainer: "color-mode-container",
-  colorMode: "color-mode",
-  channels: "channels",
-  channel: "channel",
-  savedColors: "saved-colors",
-  savedColorsSection: "saved-colors-section",
+  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",
-  deleteColor: "delete-color",
+  savedColor: "saved-color",
+  savedColors: "saved-colors",
   savedColorsButtons: "saved-colors-buttons",
-  headerHex: "header--hex",
-  colorFieldAndSlider: "color-field-and-slider",
-  colorFieldAndSliderInteractive: "color-field-and-slider--interactive",
-  colorFieldAndSliderWrap: "color-field-and-slider-wrap",
+  savedColorsSection: "saved-colors-section",
   scope: "scope",
-  hueScope: "scope--hue",
-  colorFieldScope: "scope--color-field",
-  savedColor: "saved-color"
+  section: "section",
+  slider: "slider",
+  sliders: "sliders",
+  splitSection: "section--split"
 };
 export const DEFAULT_COLOR = Color("#007AC2");
 export const DEFAULT_STORAGE_KEY_PREFIX = "calcite-color-";
@@ -42,24 +48,28 @@ export const HSV_LIMITS = {
   s: 100,
   v: 100
 };
+export const OPACITY_LIMITS = {
+  min: 0,
+  max: 100
+};
 export const DIMENSIONS = {
   s: {
     slider: {
-      height: 10,
-      width: 160
+      height: 12,
+      width: 104
     },
     colorField: {
       height: 80,
       width: 160
     },
     thumb: {
-      radius: 8
+      radius: 10
     }
   },
   m: {
     slider: {
-      height: 14,
-      width: 272
+      height: 12,
+      width: 204
     },
     colorField: {
       height: 150,
@@ -71,15 +81,15 @@ export const DIMENSIONS = {
   },
   l: {
     slider: {
-      height: 16,
-      width: 464
+      height: 12,
+      width: 384
     },
     colorField: {
       height: 200,
       width: 464
     },
     thumb: {
-      radius: 12
+      radius: 10
     }
   }
 };

package/dist/collection/components/color-picker/utils.js

@@ -1,52 +1,98 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.0
+ * v1.4.0-next.10
  */
-export function rgbToHex(color) {
-  const { r, g, b } = color;
-  return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b
-    .toString(16)
-    .padStart(2, "0")}`.toLowerCase();
-}
 export const hexChar = /^[0-9A-F]$/i;
-const shortHandHex = /^#[0-9A-F]{3}$/i;
+const shorthandHex = /^#[0-9A-F]{3}$/i;
 const longhandHex = /^#[0-9A-F]{6}$/i;
-export function isValidHex(hex) {
-  return isShorthandHex(hex) || isLonghandHex(hex);
+const shorthandHexWithAlpha = /^#[0-9A-F]{4}$/i;
+const longhandHexWithAlpha = /^#[0-9A-F]{8}$/i;
+export const alphaToOpacity = (alpha) => Number((alpha * 100).toFixed());
+export const opacityToAlpha = (opacity) => Number((opacity / 100).toFixed(2));
+export function isValidHex(hex, hasAlpha = false) {
+  return isShorthandHex(hex, hasAlpha) || isLonghandHex(hex, hasAlpha);
 }
-export function isShorthandHex(hex) {
-  return hex && hex.length === 4 && shortHandHex.test(hex);
+export function canConvertToHexa(hex) {
+  const validHex = isValidHex(hex, false);
+  const validHexa = isValidHex(hex, true);
+  return !validHexa && validHex;
+}
+function evaluateHex(hex, length, pattern) {
+  if (!hex) {
+    return false;
+  }
+  return hex.length === length && pattern.test(hex);
 }
-export function isLonghandHex(hex) {
-  return hex && hex.length === 7 && longhandHex.test(hex);
+export function isShorthandHex(hex, hasAlpha = false) {
+  const hexLength = hasAlpha ? 5 : 4;
+  const hexPattern = hasAlpha ? shorthandHexWithAlpha : shorthandHex;
+  return evaluateHex(hex, hexLength, hexPattern);
 }
-export function normalizeHex(hex) {
+export function isLonghandHex(hex, hasAlpha = false) {
+  const hexLength = hasAlpha ? 9 : 7;
+  const hexPattern = hasAlpha ? longhandHexWithAlpha : longhandHex;
+  return evaluateHex(hex, hexLength, hexPattern);
+}
+export function normalizeHex(hex, hasAlpha = false, convertFromHexToHexa = false) {
   hex = hex.toLowerCase();
   if (!hex.startsWith("#")) {
     hex = `#${hex}`;
   }
-  if (isShorthandHex(hex)) {
-    return rgbToHex(hexToRGB(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;
 }
-export function hexToRGB(hex) {
-  if (!isValidHex(hex)) {
+export function hexify(color, hasAlpha = false) {
+  return hasAlpha ? color.hexa() : color.hex();
+}
+export 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");
+}
+export function normalizeAlpha(colorObject) {
+  const normalized = { ...colorObject, a: colorObject.alpha ?? 1 /* Color() will omit alpha if 1 */ };
+  delete normalized.alpha;
+  return normalized;
+}
+export function normalizeColor(alphaColorObject) {
+  const normalized = { ...alphaColorObject, alpha: alphaColorObject.a ?? 1 };
+  delete normalized.a;
+  return normalized;
+}
+export function hexToRGB(hex, hasAlpha = false) {
+  if (!isValidHex(hex, hasAlpha)) {
     return null;
   }
   hex = hex.replace("#", "");
-  if (hex.length === 3) {
-    const [first, second, third] = hex.split("");
-    const r = parseInt(`${first}${first}`, 16);
-    const g = parseInt(`${second}${second}`, 16);
-    const b = parseInt(`${third}${third}`, 16);
-    return { r, g, b };
+  let r, g, b, 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;
   }
-  const r = parseInt(hex.slice(0, 2), 16);
-  const g = parseInt(hex.slice(2, 4), 16);
-  const b = parseInt(hex.slice(4, 6), 16);
-  return { r, g, b };
+  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 };
 }
 // these utils allow users to pass enum values as strings without having to access the enum
 // based on the approach suggested by https://github.com/microsoft/TypeScript/issues/17690#issuecomment-321365759,
@@ -108,5 +154,45 @@ function hasChannels(colorObject, ...channels) {
   return channels.every((channel) => channel && colorObject && `${channel}` in colorObject);
 }
 export function colorEqual(value1, value2) {
-  return value1?.rgbNumber() === value2?.rgbNumber();
+  return value1?.rgb().array().toString() === value2?.rgb().array().toString();
+}
+export function alphaCompatible(mode) {
+  return (mode === CSSColorMode.HEXA ||
+    mode === CSSColorMode.RGBA_CSS ||
+    mode === CSSColorMode.HSLA_CSS ||
+    mode === ObjectColorMode.RGBA ||
+    mode === ObjectColorMode.HSLA ||
+    mode === ObjectColorMode.HSVA);
+}
+export 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;
+}
+export 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;
 }

package/dist/collection/components/color-picker-hex-input/color-picker-hex-input.css

@@ -90,28 +90,31 @@
 }
 
 .container {
-  display: inline-grid;
+  display: flex;
   inline-size: 100%;
+  flex-wrap: nowrap;
   align-items: center;
-  grid-template-columns: 1fr auto;
 }
 
-.preview {
-  grid-column: 2/3;
-  pointer-events: none;
-  margin-block: 0px;
-  margin-inline: 0.25rem;
-  display: flex;
-  align-items: center;
+.hex-input {
+  flex-grow: 1;
+  text-transform: uppercase;
 }
 
-.preview,
-.input {
-  grid-row: 1;
+.opacity-input {
+  inline-size: 68px;
+  margin-inline-start: -1px;
 }
 
-.input {
-  grid-column: 1/3;
-  inline-size: 100%;
-  text-transform: uppercase;
+:host([scale=s]) .container {
+  flex-wrap: wrap;
+  row-gap: 0.125rem;
+}
+:host([scale=s]) .opacity-input {
+  inline-size: unset;
+  margin-inline-start: unset;
+}
+
+:host([scale=l]) .opacity-input {
+  inline-size: 88px;
 }