@itwin/imodel-components-react 3.0.0-dev.77 → 3.0.0-dev.81

package/lib/esm/imodel-components-react/color/SaturationPicker.js

@@ -0,0 +1,188 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Color
+ */
+import "./SaturationPicker.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { ColorDef, HSVColor } from "@itwin/core-common";
+import { SpecialKey } from "@itwin/appui-abstract";
+import { UiIModelComponents } from "../UiIModelComponents";
+function calculateChange(e, hsv, container) {
+    const { width: containerWidth, height: containerHeight, top: containerTop, left: containerLeft } = container.getBoundingClientRect();
+    let x;
+    if ("pageX" in e) {
+        x = e.pageX;
+    }
+    else {
+        // istanbul ignore next
+        if (undefined !== e.touches && e.touches.length)
+            x = e.touches[0].pageX;
+    }
+    // istanbul ignore if
+    if (undefined === x)
+        return hsv;
+    let y = 0;
+    if ("pageY" in e) {
+        y = e.pageY;
+    }
+    else {
+        // istanbul ignore next
+        if (undefined !== e.touches && e.touches.length)
+            y = e.touches[0].pageY;
+    }
+    // istanbul ignore if
+    if (undefined === y)
+        return hsv;
+    let left = x - (containerLeft + window.scrollX);
+    let top = y - (containerTop + window.scrollY);
+    // istanbul ignore next
+    if (left < 0) {
+        left = 0;
+    }
+    else if (left > containerWidth) {
+        left = containerWidth;
+    }
+    else if (top < 0) {
+        top = 0;
+    }
+    else if (top > containerHeight) {
+        top = containerHeight;
+    }
+    let saturation = Math.round((left * 100) / containerWidth);
+    let value = Math.round(-((top * 100) / containerHeight) + 100);
+    // istanbul ignore if
+    if (saturation < 0)
+        saturation = 0;
+    // istanbul ignore if
+    if (saturation > 100)
+        saturation = 100;
+    // istanbul ignore if
+    if (value < 0)
+        value = 0;
+    // istanbul ignore if
+    if (value > 100)
+        value = 100;
+    return hsv.clone(hsv.h, saturation, value);
+}
+/** SaturationPicker component used to set the saturation value.
+ * @beta
+ */
+export function SaturationPicker({ onSaturationChange, hsv, className, style }) {
+    const container = React.useRef(null);
+    const [saturationLabel] = React.useState(() => UiIModelComponents.translate("color.saturation"));
+    const isDragging = React.useRef(false);
+    const onChange = React.useCallback((e) => {
+        // istanbul ignore else
+        if (container.current) {
+            const newHsvColor = calculateChange(e, hsv, container.current);
+            // istanbul ignore else
+            if (newHsvColor) {
+                // istanbul ignore else
+                if (onSaturationChange)
+                    onSaturationChange(newHsvColor);
+            }
+        }
+    }, [hsv, onSaturationChange]);
+    const onDragging = React.useCallback((e) => {
+        // istanbul ignore else
+        if (isDragging.current) {
+            onChange(e);
+        }
+    }, [onChange]);
+    const onMouseUp = React.useCallback(() => {
+        // istanbul ignore else
+        if (isDragging.current) {
+            isDragging.current = false;
+        }
+    }, []);
+    const onTouchEnd = React.useCallback((event) => {
+        // istanbul ignore else
+        if (isDragging.current) {
+            onChange(event);
+            isDragging.current = false;
+        }
+    }, [onChange]);
+    const onMouseDown = React.useCallback((e) => {
+        // istanbul ignore else
+        if (e.target !== e.currentTarget) {
+            isDragging.current = true;
+            document.addEventListener("mouseup", onMouseUp, { capture: true, once: true });
+        }
+        onChange(e);
+        // istanbul ignore else
+        if (container.current)
+            container.current.focus();
+        e.preventDefault();
+    }, [onChange, onMouseUp]);
+    const onTouchStart = React.useCallback((e) => {
+        // istanbul ignore else
+        if (e.target !== e.currentTarget)
+            isDragging.current = true;
+        onChange(e);
+        // istanbul ignore else
+        if (container.current)
+            container.current.focus();
+    }, [onChange]);
+    const onKeyDown = React.useCallback((evt) => {
+        const h = hsv.h;
+        let { s, v } = { ...hsv };
+        if (evt.key === SpecialKey.ArrowLeft) {
+            s -= (evt.ctrlKey ? 10 : 1);
+        }
+        else if (evt.key === SpecialKey.ArrowDown) {
+            v -= (evt.ctrlKey ? 10 : 1);
+        }
+        else if (evt.key === SpecialKey.ArrowRight) {
+            s += (evt.ctrlKey ? 10 : 1);
+        }
+        else if (evt.key === SpecialKey.ArrowUp) {
+            v += (evt.ctrlKey ? 10 : 1);
+        }
+        else if (evt.key === SpecialKey.PageDown) {
+            v = 0;
+        }
+        else if (evt.key === SpecialKey.PageUp) {
+            v = 100;
+        }
+        else if (evt.key === SpecialKey.Home) {
+            s = 0;
+        }
+        else {
+            // istanbul ignore else
+            if (evt.key === SpecialKey.End) {
+                s = 100;
+            }
+        }
+        // istanbul ignore if
+        if (s < 0)
+            s = 0;
+        // istanbul ignore if
+        if (s > 100)
+            s = 100;
+        // istanbul ignore if
+        if (v < 0)
+            v = 0;
+        // istanbul ignore if
+        if (v > 100)
+            v = 100;
+        const newColor = new HSVColor(h, s, v);
+        // istanbul ignore else
+        if (onSaturationChange)
+            onSaturationChange(newColor);
+        evt.preventDefault();
+    }, [hsv, onSaturationChange]);
+    const pointerStyle = React.useMemo(() => ({
+        left: `${hsv.s}%`,
+        top: `${-(hsv.v) + 100}%`,
+        backgroundColor: `${ColorDef.fromHSV(hsv).toRgbString()}`,
+    }), [hsv]);
+    const colorStyle = React.useMemo(() => ({ backgroundColor: `hsl(${hsv.h} ,100%, 50%)` }), [hsv]);
+    return (React.createElement("div", { className: classnames("components-saturation-container", className), style: style, "data-testid": "saturation-container" },
+        React.createElement("div", { "data-testid": "saturation-region", role: "slider", "aria-label": saturationLabel, "aria-valuenow": hsv.s, style: colorStyle, className: "components-saturation-region", ref: container, onMouseDown: onMouseDown, onMouseMove: onDragging, onTouchMove: onDragging, onTouchStart: onTouchStart, onTouchEnd: onTouchEnd, tabIndex: 0, onKeyDown: onKeyDown },
+            React.createElement("div", { style: pointerStyle, className: "components-saturation-pointer", "data-testid": "saturation-pointer" }))));
+}
+//# sourceMappingURL=SaturationPicker.js.map

package/lib/esm/imodel-components-react/color/SaturationPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SaturationPicker.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/SaturationPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Color\n */\n\nimport \"./SaturationPicker.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { ColorDef, HSVColor } from \"@itwin/core-common\";\nimport { SpecialKey } from \"@itwin/appui-abstract\";\nimport { CommonProps } from \"@itwin/core-react\";\nimport { UiIModelComponents } from \"../UiIModelComponents\";\n\nfunction calculateChange(e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  hsv: HSVColor, container: HTMLDivElement): HSVColor | undefined {\n  const { width: containerWidth, height: containerHeight, top: containerTop, left: containerLeft } = container.getBoundingClientRect();\n\n  let x: number | undefined;\n  if (\"pageX\" in e) {\n    x = e.pageX;\n  } else {\n    // istanbul ignore next\n    if (undefined !== e.touches && e.touches.length)\n      x = e.touches[0].pageX;\n  }\n  // istanbul ignore if\n  if (undefined === x)\n    return hsv;\n\n  let y = 0;\n  if (\"pageY\" in e) {\n    y = e.pageY;\n  } else {\n    // istanbul ignore next\n    if (undefined !== e.touches && e.touches.length)\n      y = e.touches[0].pageY;\n  }\n  // istanbul ignore if\n  if (undefined === y)\n    return hsv;\n\n  let left = x - (containerLeft + window.scrollX);\n  let top = y - (containerTop + window.scrollY);\n\n  // istanbul ignore next\n  if (left < 0) {\n    left = 0;\n  } else if (left > containerWidth) {\n    left = containerWidth;\n  } else if (top < 0) {\n    top = 0;\n  } else if (top > containerHeight) {\n    top = containerHeight;\n  }\n\n  let saturation = Math.round((left * 100) / containerWidth);\n  let value = Math.round(-((top * 100) / containerHeight) + 100);\n\n  // istanbul ignore if\n  if (saturation < 0)\n    saturation = 0;\n  // istanbul ignore if\n  if (saturation > 100)\n    saturation = 100;\n  // istanbul ignore if\n  if (value < 0)\n    value = 0;\n  // istanbul ignore if\n  if (value > 100)\n    value = 100;\n\n  return hsv.clone(hsv.h, saturation, value);\n}\n\n/** Properties for the [[SaturationPicker]] React component\n * @beta\n */\nexport interface SaturationPickerProps extends React.HTMLAttributes<HTMLDivElement>, CommonProps {\n  /** function to run when user selects location in saturation region */\n  onSaturationChange?: ((saturation: HSVColor) => void) | undefined;\n  /** HSV Color Value */\n  hsv: HSVColor;\n}\n\n/** SaturationPicker component used to set the saturation value.\n * @beta\n */\nexport function SaturationPicker({ onSaturationChange, hsv, className, style }: SaturationPickerProps) {\n  const container = React.useRef<HTMLDivElement>(null);\n  const [saturationLabel] = React.useState(() => UiIModelComponents.translate(\"color.saturation\"));\n  const isDragging = React.useRef(false);\n\n  const onChange = React.useCallback((e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) => {\n    // istanbul ignore else\n    if (container.current) {\n      const newHsvColor = calculateChange(e, hsv, container.current);\n      // istanbul ignore else\n      if (newHsvColor) {\n        // istanbul ignore else\n        if (onSaturationChange)\n          onSaturationChange(newHsvColor);\n      }\n    }\n  }, [hsv, onSaturationChange]);\n\n  const onDragging = React.useCallback((e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) => {\n    // istanbul ignore else\n    if (isDragging.current) {\n      onChange(e);\n    }\n  }, [onChange]);\n\n  const onMouseUp = React.useCallback(() => {\n    // istanbul ignore else\n    if (isDragging.current) {\n      isDragging.current = false;\n    }\n  }, []);\n\n  const onTouchEnd = React.useCallback((event: React.TouchEvent<HTMLDivElement>) => {\n    // istanbul ignore else\n    if (isDragging.current) {\n      onChange(event);\n      isDragging.current = false;\n    }\n  }, [onChange]);\n\n  const onMouseDown = React.useCallback((e: React.MouseEvent<HTMLDivElement>) => {\n    // istanbul ignore else\n    if (e.target !== e.currentTarget) {\n      isDragging.current = true;\n      document.addEventListener(\"mouseup\", onMouseUp, { capture: true, once: true });\n    }\n\n    onChange(e);\n\n    // istanbul ignore else\n    if (container.current)\n      container.current.focus();\n\n    e.preventDefault();\n  }, [onChange, onMouseUp]);\n\n  const onTouchStart = React.useCallback((e: React.TouchEvent<HTMLDivElement>) => {\n    // istanbul ignore else\n    if (e.target !== e.currentTarget)\n      isDragging.current = true;\n\n    onChange(e);\n\n    // istanbul ignore else\n    if (container.current)\n      container.current.focus();\n  }, [onChange]);\n\n  const onKeyDown = React.useCallback((evt: React.KeyboardEvent<HTMLDivElement>) => {\n    const h = hsv.h;\n    let { s, v } = { ...hsv };\n    if (evt.key === SpecialKey.ArrowLeft) {\n      s -= (evt.ctrlKey ? 10 : 1);\n    } else if (evt.key === SpecialKey.ArrowDown) {\n      v -= (evt.ctrlKey ? 10 : 1);\n    } else if (evt.key === SpecialKey.ArrowRight) {\n      s += (evt.ctrlKey ? 10 : 1);\n    } else if (evt.key === SpecialKey.ArrowUp) {\n      v += (evt.ctrlKey ? 10 : 1);\n    } else if (evt.key === SpecialKey.PageDown) {\n      v = 0;\n    } else if (evt.key === SpecialKey.PageUp) {\n      v = 100;\n    } else if (evt.key === SpecialKey.Home) {\n      s = 0;\n    } else {\n      // istanbul ignore else\n      if (evt.key === SpecialKey.End) {\n        s = 100;\n      }\n    }\n\n    // istanbul ignore if\n    if (s < 0)\n      s = 0;\n    // istanbul ignore if\n    if (s > 100)\n      s = 100;\n    // istanbul ignore if\n    if (v < 0)\n      v = 0;\n    // istanbul ignore if\n    if (v > 100)\n      v = 100;\n\n    const newColor = new HSVColor(h, s, v);\n    // istanbul ignore else\n    if (onSaturationChange)\n      onSaturationChange(newColor);\n\n    evt.preventDefault();\n  }, [hsv, onSaturationChange]);\n\n  const pointerStyle: React.CSSProperties = React.useMemo(() => ({\n    left: `${hsv.s}%`,\n    top: `${-(hsv.v) + 100}%`,\n    backgroundColor: `${ColorDef.fromHSV(hsv).toRgbString()}`,\n  }), [hsv]);\n\n  const colorStyle: React.CSSProperties = React.useMemo(() => ({ backgroundColor: `hsl(${hsv.h} ,100%, 50%)` }), [hsv]);\n\n  return (\n    <div className={classnames(\"components-saturation-container\", className)} style={style} data-testid=\"saturation-container\" >\n      <div\n        data-testid=\"saturation-region\"\n        role=\"slider\" aria-label={saturationLabel} aria-valuenow={hsv.s}\n        style={colorStyle}\n        className=\"components-saturation-region\"\n        ref={container}\n        onMouseDown={onMouseDown}\n        onMouseMove={onDragging}\n        onTouchMove={onDragging}\n        onTouchStart={onTouchStart}\n        onTouchEnd={onTouchEnd}\n        tabIndex={0}\n        onKeyDown={onKeyDown}\n      >\n        <div style={pointerStyle} className=\"components-saturation-pointer\" data-testid=\"saturation-pointer\" />\n      </div>\n    </div >\n  );\n}\n"]}

package/lib/esm/imodel-components-react/color/SaturationPicker.scss

@@ -0,0 +1,35 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+.components-saturation-container {
+  width: 100%;
+  height: 100%;
+  min-width: 100px;
+  min-height: 100px;
+
+  .components-saturation-region {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+    background-size: cover, cover;
+    overflow: visible;
+
+    .components-saturation-pointer {
+      position: absolute;
+      width: 2em;
+      height: 2em;
+      border-radius: 50%;
+      box-shadow: rgba(0, 0, 0, 0.37) 0px 4px 4px 0px;
+      border: 2px solid #fff;
+      transform: translate(-1em, -1em);
+
+      &:focus {
+        outline: none;
+        border: none;
+      }
+    }
+  }
+}

package/lib/esm/imodel-components-react/color/Swatch.d.ts

@@ -0,0 +1,23 @@
+/** @packageDocumentation
+ * @module Color
+ */
+import "./Swatch.scss";
+import * as React from "react";
+import { ColorDef } from "@itwin/core-common";
+import { CommonProps } from "@itwin/core-react";
+/** Properties for the [[ColorSwatch]] React component
+ * @beta
+ */
+export interface ColorSwatchProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {
+    /** color specification */
+    colorDef: ColorDef;
+    /** function to run when user selects color swatch */
+    onColorPick?: ((color: ColorDef, e: React.MouseEvent) => void) | undefined;
+    /** Show swatches as squares unless round is set to true */
+    round?: boolean;
+}
+/** ColorSwatch Functional component displays a color swatch in a button
+ * @beta
+ */
+export declare function ColorSwatch(props: ColorSwatchProps): JSX.Element;
+//# sourceMappingURL=Swatch.d.ts.map

package/lib/esm/imodel-components-react/color/Swatch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Swatch.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/Swatch.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,eAAe,CAAC;AAEvB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW;IAClG,0BAA0B;IAC1B,QAAQ,EAAE,QAAQ,CAAC;IACnB,qDAAqD;IACrD,WAAW,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC3E,2DAA2D;IAC3D,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,eA2BlD"}

package/lib/esm/imodel-components-react/color/Swatch.js

@@ -0,0 +1,35 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Color
+ */
+import "./Swatch.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { getCSSColorFromDef } from "./getCSSColorFromDef";
+/** ColorSwatch Functional component displays a color swatch in a button
+ * @beta
+ */
+export function ColorSwatch(props) {
+    const rgbaString = getCSSColorFromDef(props.colorDef);
+    const colorStyle = {
+        backgroundColor: rgbaString,
+        ...props.style,
+    };
+    const handleClick = (e) => {
+        // istanbul ignore else
+        if (props && props.onColorPick)
+            props.onColorPick(props.colorDef, e);
+    };
+    const classes = classnames("components-color-swatch", props.round && "round", props.className);
+    const { 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onColorPick, colorDef, round, // do not pass on color swatch specific props
+    // eslint-disable-next-line comma-dangle
+    ...otherProps // pass-through props
+     } = props;
+    return React.createElement("button", { ...otherProps, style: colorStyle, className: classes, onClick: handleClick });
+}
+//# sourceMappingURL=Swatch.js.map

package/lib/esm/imodel-components-react/color/Swatch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Swatch.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/Swatch.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAc1D;;GAEG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,UAAU,GAAG,kBAAkB,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACtD,MAAM,UAAU,GAAwB;QACtC,eAAe,EAAE,UAAU;QAC3B,GAAG,KAAK,CAAC,KAAK;KACf,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,CAAmB,EAAE,EAAE;QAC1C,uBAAuB;QACvB,IAAI,KAAK,IAAI,KAAK,CAAC,WAAW;YAC5B,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,UAAU,CACxB,yBAAyB,EACzB,KAAK,CAAC,KAAK,IAAI,OAAO,EACtB,KAAK,CAAC,SAAS,CAChB,CAAC;IAEF,MAAM;IACJ,6DAA6D;IAC7D,WAAW,EAAE,QAAQ,EAAE,KAAK,EAAE,6CAA6C;IAC3E,wCAAwC;IACxC,GAAG,UAAU,CAAC,qBAAqB;MACpC,GAAG,KAAK,CAAC;IAEV,OAAO,mCAAY,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,GAAI,CAAC;AACjG,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Color\n */\n\nimport \"./Swatch.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { ColorDef } from \"@itwin/core-common\";\nimport { CommonProps } from \"@itwin/core-react\";\nimport { getCSSColorFromDef } from \"./getCSSColorFromDef\";\n\n/** Properties for the [[ColorSwatch]] React component\n * @beta\n */\nexport interface ColorSwatchProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\n  /** color specification */\n  colorDef: ColorDef;\n  /** function to run when user selects color swatch */\n  onColorPick?: ((color: ColorDef, e: React.MouseEvent) => void) | undefined;\n  /** Show swatches as squares unless round is set to true */\n  round?: boolean;\n}\n\n/** ColorSwatch Functional component displays a color swatch in a button\n * @beta\n */\nexport function ColorSwatch(props: ColorSwatchProps) {\n  const rgbaString = getCSSColorFromDef(props.colorDef);\n  const colorStyle: React.CSSProperties = {\n    backgroundColor: rgbaString,\n    ...props.style,\n  };\n\n  const handleClick = (e: React.MouseEvent) => {\n    // istanbul ignore else\n    if (props && props.onColorPick)\n      props.onColorPick(props.colorDef, e);\n  };\n\n  const classes = classnames(\n    \"components-color-swatch\",\n    props.round && \"round\",\n    props.className,\n  );\n\n  const {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    onColorPick, colorDef, round, // do not pass on color swatch specific props\n    // eslint-disable-next-line comma-dangle\n    ...otherProps // pass-through props\n  } = props;\n\n  return <button {...otherProps} style={colorStyle} className={classes} onClick={handleClick} />;\n}\n"]}

package/lib/esm/imodel-components-react/color/Swatch.scss

@@ -0,0 +1,24 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+@import "~@itwin/itwinui-css/scss/style/typography";
+
+.components-color-swatch {
+  font-size: $iui-font-size;
+  height: 1em * 1.2;
+  width: 1em * 1.2;
+  border-width: 1px;
+  border-radius: 3px;
+  border-style: solid;
+  border-color: $buic-inputs-border;
+
+  &.round {
+    border-radius: 50%;
+  }
+
+  &[disabled] {
+    opacity: .2;
+  }
+}

package/lib/esm/imodel-components-react/color/getCSSColorFromDef.d.ts

@@ -0,0 +1,7 @@
+/** @packageDocumentation
+ * @module Color
+ */
+import { ColorDef } from "@itwin/core-common";
+/** @internal */
+export declare function getCSSColorFromDef(colorDef: ColorDef): string;
+//# sourceMappingURL=getCSSColorFromDef.d.ts.map

package/lib/esm/imodel-components-react/color/getCSSColorFromDef.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getCSSColorFromDef.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/getCSSColorFromDef.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,gBAAgB;AAChB,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,QAAQ,GAAG,MAAM,CAU7D"}

package/lib/esm/imodel-components-react/color/getCSSColorFromDef.js

@@ -0,0 +1,20 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Color
+ */
+/** @internal */
+export function getCSSColorFromDef(colorDef) {
+    const { b, g, r, t } = colorDef.colors;
+    let rgbaString = "";
+    if (t === 0)
+        rgbaString = `rgb(${r},${g},${b})`;
+    else {
+        const alpha = ((255 - t) / 255).toFixed(2);
+        rgbaString = `rgba(${r},${g},${b},${alpha})`;
+    }
+    return rgbaString;
+}
+//# sourceMappingURL=getCSSColorFromDef.js.map

package/lib/esm/imodel-components-react/color/getCSSColorFromDef.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getCSSColorFromDef.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/getCSSColorFromDef.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAIH,gBAAgB;AAChB,MAAM,UAAU,kBAAkB,CAAC,QAAkB;IACnD,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,QAAQ,CAAC,MAAM,CAAC;IACvC,IAAI,UAAU,GAAG,EAAE,CAAC;IACpB,IAAI,CAAC,KAAK,CAAC;QACT,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC;SAChC;QACH,MAAM,KAAK,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAC3C,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,GAAG,CAAC;KAC9C;IACD,OAAO,UAAU,CAAC;AACpB,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Color\n */\n\nimport { ColorDef } from \"@itwin/core-common\";\n\n/** @internal */\nexport function getCSSColorFromDef(colorDef: ColorDef): string {\n  const { b, g, r, t } = colorDef.colors;\n  let rgbaString = \"\";\n  if (t === 0)\n    rgbaString = `rgb(${r},${g},${b})`;\n  else {\n    const alpha = ((255 - t) / 255).toFixed(2);\n    rgbaString = `rgba(${r},${g},${b},${alpha})`;\n  }\n  return rgbaString;\n}\n"]}

package/lib/esm/imodel-components-react/editors/ColorEditor.d.ts

@@ -0,0 +1,45 @@
+/** @packageDocumentation
+ * @module PropertyEditors
+ */
+import "./ColorEditor.scss";
+import * as React from "react";
+import { ColorDef } from "@itwin/core-common";
+import { PropertyValue } from "@itwin/appui-abstract";
+import { PropertyEditorBase, PropertyEditorProps, TypeEditor } from "@itwin/components-react";
+/** @internal */
+interface ColorEditorState {
+    colorValue: number;
+    readonly: boolean;
+    isDisabled?: boolean;
+    numColumns: number;
+    availableColors: ColorDef[];
+}
+/** ColorEditor React component that is a property editor with text input
+ * @beta
+ */
+export declare class ColorEditor extends React.PureComponent<PropertyEditorProps, ColorEditorState> implements TypeEditor {
+    private _buttonElement;
+    /** @internal */
+    readonly state: Readonly<ColorEditorState>;
+    getPropertyValue(): Promise<PropertyValue | undefined>;
+    get htmlElement(): HTMLElement | null;
+    get hasFocus(): boolean;
+    private setFocus;
+    private _onColorPick;
+    /** @internal */
+    componentDidMount(): void;
+    /** @internal */
+    componentDidUpdate(prevProps: PropertyEditorProps): void;
+    private setStateFromProps;
+    /** @internal */
+    render(): JSX.Element;
+}
+/** Color Property Editor registered for the "number" type name and "color-picker" editor name.
+ * It uses the [[ColorEditor]] React component.
+ * @beta
+ */
+export declare class ColorPropertyEditor extends PropertyEditorBase {
+    get reactNode(): React.ReactNode;
+}
+export {};
+//# sourceMappingURL=ColorEditor.d.ts.map

package/lib/esm/imodel-components-react/editors/ColorEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorEditor.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/editors/ColorEditor.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAC8E,aAAa,EAEjG,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,kBAAkB,EAAyB,mBAAmB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAGrH,gBAAgB;AAChB,UAAU,gBAAgB;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,QAAQ,EAAE,CAAC;CAC7B;AAED;;GAEG;AACH,qBAAa,WAAY,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE,gBAAgB,CAAE,YAAW,UAAU;IAC/G,OAAO,CAAC,cAAc,CAAyD;IAE/E,gBAAgB;IAChB,SAAyB,KAAK,EAAE,QAAQ,CAAC,gBAAgB,CAAC,CAKxD;IAEW,gBAAgB,IAAI,OAAO,CAAC,aAAa,GAAG,SAAS,CAAC;IAgBnE,IAAW,WAAW,IAAI,WAAW,GAAG,IAAI,CAE3C;IAED,IAAW,QAAQ,IAAI,OAAO,CAE7B;IAED,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,YAAY,CAelB;IAEF,gBAAgB;IACA,iBAAiB;IAIjC,gBAAgB;IACA,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;YAMnD,iBAAiB;IAkC/B,gBAAgB;IACA,MAAM;CAevB;AAED;;;GAGG;AACH,qBAAa,mBAAoB,SAAQ,kBAAkB;IACzD,IAAW,SAAS,IAAI,KAAK,CAAC,SAAS,CAEtC;CACF"}

package/lib/esm/imodel-components-react/editors/ColorEditor.js

@@ -0,0 +1,125 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module PropertyEditors
+ */
+import "./ColorEditor.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { ColorDef } from "@itwin/core-common";
+import { PropertyEditorParamTypes, PropertyValueFormat, StandardEditorNames, StandardTypeNames, } from "@itwin/appui-abstract";
+import { PropertyEditorBase, PropertyEditorManager } from "@itwin/components-react";
+import { ColorPickerButton } from "../color/ColorPickerButton";
+/** ColorEditor React component that is a property editor with text input
+ * @beta
+ */
+export class ColorEditor extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this._buttonElement = React.createRef();
+        /** @internal */
+        this.state = {
+            colorValue: 0,
+            readonly: false,
+            numColumns: 4,
+            availableColors: [],
+        };
+        this._onColorPick = (color) => {
+            const propertyRecord = this.props.propertyRecord;
+            this.setState({
+                colorValue: color.tbgr,
+            }, async () => {
+                // istanbul ignore else
+                if (propertyRecord && this.props.onCommit) {
+                    const propertyValue = await this.getPropertyValue();
+                    // istanbul ignore else
+                    if (propertyValue !== undefined) {
+                        this.props.onCommit({ propertyRecord, newValue: propertyValue });
+                    }
+                }
+            });
+        };
+    }
+    async getPropertyValue() {
+        const record = this.props.propertyRecord;
+        let propertyValue;
+        // istanbul ignore else
+        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
+            propertyValue = {
+                valueFormat: PropertyValueFormat.Primitive,
+                value: this.state.colorValue,
+                displayValue: "",
+            };
+        }
+        return propertyValue;
+    }
+    get htmlElement() {
+        return this._buttonElement.current;
+    }
+    get hasFocus() {
+        return document.activeElement === this._buttonElement.current;
+    }
+    setFocus() {
+        // istanbul ignore else
+        if (this._buttonElement && this._buttonElement.current && !this.state.isDisabled) {
+            this._buttonElement.current.focus();
+        }
+    }
+    /** @internal */
+    componentDidMount() {
+        this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
+    }
+    /** @internal */
+    componentDidUpdate(prevProps) {
+        if (this.props.propertyRecord !== prevProps.propertyRecord) {
+            this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
+        }
+    }
+    async setStateFromProps() {
+        const record = this.props.propertyRecord;
+        // istanbul ignore else
+        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
+            const colorValue = record.value.value;
+            let numColumns = 4;
+            const availableColors = new Array();
+            const readonly = record && undefined !== record.isReadonly ? record.isReadonly : /* istanbul ignore next */ false;
+            const isDisabled = record ? record.isDisabled : /* istanbul ignore next */ undefined;
+            if (record.property.editor && record.property.editor.params) {
+                const colorParams = record.property.editor.params.find((param) => param.type === PropertyEditorParamTypes.ColorData);
+                // istanbul ignore else
+                if (colorParams) {
+                    colorParams.colorValues.forEach((colorNumber) => {
+                        availableColors.push(ColorDef.create(colorNumber));
+                    });
+                    // istanbul ignore else
+                    if (colorParams.numColumns)
+                        numColumns = colorParams.numColumns;
+                }
+            }
+            this.setState({ colorValue, readonly, isDisabled, numColumns, availableColors }, () => {
+                if (this.props.setFocus) {
+                    this.setFocus();
+                }
+            });
+        }
+    }
+    /** @internal */
+    render() {
+        const colorDef = ColorDef.create(this.state.colorValue);
+        return (React.createElement("div", { className: classnames("components-color-editor", this.props.className), style: this.props.style },
+            React.createElement(ColorPickerButton, { ref: this._buttonElement, initialColor: colorDef, colorDefs: this.state.availableColors.length > 0 ? this.state.availableColors : [colorDef], numColumns: this.state.numColumns, disabled: this.state.isDisabled ? true : false, readonly: this.state.readonly, onColorPick: this._onColorPick, "data-testid": "components-color-editor" })));
+    }
+}
+/** Color Property Editor registered for the "number" type name and "color-picker" editor name.
+ * It uses the [[ColorEditor]] React component.
+ * @beta
+ */
+export class ColorPropertyEditor extends PropertyEditorBase {
+    get reactNode() {
+        return React.createElement(ColorEditor, null);
+    }
+}
+PropertyEditorManager.registerEditor(StandardTypeNames.Number, ColorPropertyEditor, StandardEditorNames.ColorPicker);
+//# sourceMappingURL=ColorEditor.js.map

package/lib/esm/imodel-components-react/editors/ColorEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorEditor.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/editors/ColorEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyEditors\n */\n\nimport \"./ColorEditor.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { ColorDef } from \"@itwin/core-common\";\nimport {\n  ColorEditorParams, PropertyEditorParams, PropertyEditorParamTypes, PropertyRecord, PropertyValue, PropertyValueFormat,\n  StandardEditorNames, StandardTypeNames,\n} from \"@itwin/appui-abstract\";\nimport { PropertyEditorBase, PropertyEditorManager, PropertyEditorProps, TypeEditor } from \"@itwin/components-react\";\nimport { ColorPickerButton } from \"../color/ColorPickerButton\";\n\n/** @internal */\ninterface ColorEditorState {\n  colorValue: number;\n  readonly: boolean;\n  isDisabled?: boolean;\n  numColumns: number;\n  availableColors: ColorDef[];\n}\n\n/** ColorEditor React component that is a property editor with text input\n * @beta\n */\nexport class ColorEditor extends React.PureComponent<PropertyEditorProps, ColorEditorState> implements TypeEditor {\n  private _buttonElement: React.RefObject<HTMLButtonElement> = React.createRef();\n\n  /** @internal */\n  public override readonly state: Readonly<ColorEditorState> = {\n    colorValue: 0,\n    readonly: false,\n    numColumns: 4,\n    availableColors: [],\n  };\n\n  public async getPropertyValue(): Promise<PropertyValue | undefined> {\n    const record = this.props.propertyRecord;\n    let propertyValue: PropertyValue | undefined;\n\n    // istanbul ignore else\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n      propertyValue = {\n        valueFormat: PropertyValueFormat.Primitive,\n        value: this.state.colorValue,\n        displayValue: \"\",\n      };\n    }\n\n    return propertyValue;\n  }\n\n  public get htmlElement(): HTMLElement | null {\n    return this._buttonElement.current;\n  }\n\n  public get hasFocus(): boolean {\n    return document.activeElement === this._buttonElement.current;\n  }\n\n  private setFocus(): void {\n    // istanbul ignore else\n    if (this._buttonElement && this._buttonElement.current && !this.state.isDisabled) {\n      this._buttonElement.current.focus();\n    }\n  }\n\n  private _onColorPick = (color: ColorDef) => {\n    const propertyRecord = this.props.propertyRecord as PropertyRecord;\n\n    this.setState({\n      colorValue: color.tbgr,\n    }, async () => {\n      // istanbul ignore else\n      if (propertyRecord && this.props.onCommit) {\n        const propertyValue = await this.getPropertyValue();\n        // istanbul ignore else\n        if (propertyValue !== undefined) {\n          this.props.onCommit({ propertyRecord, newValue: propertyValue });\n        }\n      }\n    });\n  };\n\n  /** @internal */\n  public override componentDidMount() {\n    this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\n  }\n\n  /** @internal */\n  public override componentDidUpdate(prevProps: PropertyEditorProps) {\n    if (this.props.propertyRecord !== prevProps.propertyRecord) {\n      this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\n    }\n  }\n\n  private async setStateFromProps() {\n    const record = this.props.propertyRecord;\n\n    // istanbul ignore else\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n      const colorValue = record.value.value as number;\n      let numColumns = 4;\n      const availableColors = new Array<ColorDef>();\n      const readonly = record && undefined !== record.isReadonly ? record.isReadonly : /* istanbul ignore next */ false;\n      const isDisabled = record ? record.isDisabled : /* istanbul ignore next */ undefined;\n\n      if (record.property.editor && record.property.editor.params) {\n        const colorParams = record.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.ColorData) as ColorEditorParams;\n        // istanbul ignore else\n        if (colorParams) {\n          colorParams.colorValues.forEach((colorNumber: number) => {\n            availableColors.push(ColorDef.create(colorNumber));\n          });\n          // istanbul ignore else\n          if (colorParams.numColumns)\n            numColumns = colorParams.numColumns;\n        }\n      }\n      this.setState(\n        { colorValue, readonly, isDisabled, numColumns, availableColors },\n        () => {\n          if (this.props.setFocus) {\n            this.setFocus();\n          }\n        },\n      );\n    }\n  }\n\n  /** @internal */\n  public override render() {\n    const colorDef = ColorDef.create(this.state.colorValue);\n    return (\n      <div className={classnames(\"components-color-editor\", this.props.className)} style={this.props.style}>\n        <ColorPickerButton ref={this._buttonElement}\n          initialColor={colorDef}\n          colorDefs={this.state.availableColors.length > 0 ? this.state.availableColors : [colorDef]}\n          numColumns={this.state.numColumns}\n          disabled={this.state.isDisabled ? true : false}\n          readonly={this.state.readonly}\n          onColorPick={this._onColorPick}\n          data-testid=\"components-color-editor\" />\n      </div>\n    );\n  }\n}\n\n/** Color Property Editor registered for the \"number\" type name and \"color-picker\" editor name.\n * It uses the [[ColorEditor]] React component.\n * @beta\n */\nexport class ColorPropertyEditor extends PropertyEditorBase {\n  public get reactNode(): React.ReactNode {\n    return <ColorEditor />;\n  }\n}\n\nPropertyEditorManager.registerEditor(StandardTypeNames.Number, ColorPropertyEditor, StandardEditorNames.ColorPicker);\n"]}

package/lib/esm/imodel-components-react/editors/ColorEditor.scss

@@ -0,0 +1,19 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+@import "~@itwin/itwinui-css/scss/style/typography";
+
+$components-color-editor-item-height: 100%;
+
+.components-color-editor {
+  font-family: $iui-font-family;
+  font-size: $iui-font-size;
+  color: $buic-foreground-body;
+  border: none;
+  box-sizing: border-box;
+  height: $components-color-editor-item-height;
+  display: flex;
+  align-items: center;
+}