@itwin/imodel-components-react 4.0.0-dev.2 → 4.0.0-dev.4

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

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

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

@@ -1,35 +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;
-      }
-    }
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* 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/cjs/imodel-components-react/color/Swatch.d.ts

@@ -1,23 +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;
+/** @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/cjs/imodel-components-react/color/Swatch.js

@@ -1,61 +1,61 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorSwatch = void 0;
-require("./Swatch.scss");
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const getCSSColorFromDef_1 = require("./getCSSColorFromDef");
-/** ColorSwatch Functional component displays a color swatch in a button
- * @beta
- */
-function ColorSwatch(props) {
-    const rgbaString = (0, getCSSColorFromDef_1.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 = (0, classnames_1.default)("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 });
-}
-exports.ColorSwatch = ColorSwatch;
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorSwatch = void 0;
+require("./Swatch.scss");
+const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
+const getCSSColorFromDef_1 = require("./getCSSColorFromDef");
+/** ColorSwatch Functional component displays a color swatch in a button
+ * @beta
+ */
+function ColorSwatch(props) {
+    const rgbaString = (0, getCSSColorFromDef_1.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 = (0, classnames_1.default)("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 });
+}
+exports.ColorSwatch = ColorSwatch;
 //# sourceMappingURL=Swatch.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Swatch.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/Swatch.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,yBAAuB;AACvB,4DAAoC;AACpC,6CAA+B;AAG/B,6DAA0D;AAc1D;;GAEG;AACH,SAAgB,WAAW,CAAC,KAAuB;IACjD,MAAM,UAAU,GAAG,IAAA,uCAAkB,EAAC,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,IAAA,oBAAU,EACxB,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;AA3BD,kCA2BC","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"]}
+{"version":3,"file":"Swatch.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/Swatch.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,yBAAuB;AACvB,4DAAoC;AACpC,6CAA+B;AAG/B,6DAA0D;AAc1D;;GAEG;AACH,SAAgB,WAAW,CAAC,KAAuB;IACjD,MAAM,UAAU,GAAG,IAAA,uCAAkB,EAAC,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,IAAA,oBAAU,EACxB,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;AA3BD,kCA2BC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Color\r\n */\r\n\r\nimport \"./Swatch.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { ColorDef } from \"@itwin/core-common\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { getCSSColorFromDef } from \"./getCSSColorFromDef\";\r\n\r\n/** Properties for the [[ColorSwatch]] React component\r\n * @beta\r\n */\r\nexport interface ColorSwatchProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\r\n  /** color specification */\r\n  colorDef: ColorDef;\r\n  /** function to run when user selects color swatch */\r\n  onColorPick?: ((color: ColorDef, e: React.MouseEvent) => void) | undefined;\r\n  /** Show swatches as squares unless round is set to true */\r\n  round?: boolean;\r\n}\r\n\r\n/** ColorSwatch Functional component displays a color swatch in a button\r\n * @beta\r\n */\r\nexport function ColorSwatch(props: ColorSwatchProps) {\r\n  const rgbaString = getCSSColorFromDef(props.colorDef);\r\n  const colorStyle: React.CSSProperties = {\r\n    backgroundColor: rgbaString,\r\n    ...props.style,\r\n  };\r\n\r\n  const handleClick = (e: React.MouseEvent) => {\r\n    // istanbul ignore else\r\n    if (props && props.onColorPick)\r\n      props.onColorPick(props.colorDef, e);\r\n  };\r\n\r\n  const classes = classnames(\r\n    \"components-color-swatch\",\r\n    props.round && \"round\",\r\n    props.className,\r\n  );\r\n\r\n  const {\r\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\r\n    onColorPick, colorDef, round, // do not pass on color swatch specific props\r\n    // eslint-disable-next-line comma-dangle\r\n    ...otherProps // pass-through props\r\n  } = props;\r\n\r\n  return <button {...otherProps} style={colorStyle} className={classes} onClick={handleClick} />;\r\n}\r\n"]}

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

@@ -1,23 +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";
-
-.components-color-swatch {
-  font-size: var(--iui-font-size-1);
-  height: 1em * 1.2;
-  width: 1em * 1.2;
-  border-width: 1px;
-  border-radius: var(--iui-border-radius-1);
-  border-style: solid;
-  border-color: $buic-inputs-border;
-
-  &.round {
-    border-radius: 50%;
-  }
-
-  &[disabled] {
-    opacity: 0.2;
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* 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/cjs/imodel-components-react/color/getCSSColorFromDef.d.ts

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

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

@@ -1,24 +1,24 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getCSSColorFromDef = void 0;
-/** @internal */
-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;
-}
-exports.getCSSColorFromDef = getCSSColorFromDef;
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCSSColorFromDef = void 0;
+/** @internal */
+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;
+}
+exports.getCSSColorFromDef = getCSSColorFromDef;
 //# sourceMappingURL=getCSSColorFromDef.js.map

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

@@ -1 +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,SAAgB,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;AAVD,gDAUC","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"]}
+{"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,SAAgB,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;AAVD,gDAUC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Color\r\n */\r\n\r\nimport { ColorDef } from \"@itwin/core-common\";\r\n\r\n/** @internal */\r\nexport function getCSSColorFromDef(colorDef: ColorDef): string {\r\n  const { b, g, r, t } = colorDef.colors;\r\n  let rgbaString = \"\";\r\n  if (t === 0)\r\n    rgbaString = `rgb(${r},${g},${b})`;\r\n  else {\r\n    const alpha = ((255 - t) / 255).toFixed(2);\r\n    rgbaString = `rgba(${r},${g},${b},${alpha})`;\r\n  }\r\n  return rgbaString;\r\n}\r\n"]}

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

@@ -1,45 +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 {};
+/** @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