@itwin/imodel-components-react 4.1.0-dev.0 → 4.1.0-dev.1

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

@@ -1,61 +1,61 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-.components-hue-pointer {
-  position: absolute;
-  width: 1.2em;
-  height: 1.2em;
-  border-radius: 50%;
-  box-shadow: rgba(0, 0, 0, 0.37) 0px 1px 4px 0px;
-
-  &:focus {
-    outline: none;
-    border: none;
-  }
-}
-
-.components-hue-container-horizontal {
-  width: 100%;
-  height: .5em;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  .components-hue-slider {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    border-radius: 1em;
-    background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
-  }
-
-  .components-hue-pointer {
-    transform: translate(-.6em, -.45em);
-    cursor: pointer;
-    border: 1px solid #fff;
-  }
-}
-
-.components-hue-container-vertical {
-  width: .5em;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-
-  .components-hue-slider {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    border-radius: 1em;
-    background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%,
-      #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
-  }
-
-  .components-hue-pointer {
-    transform: translate(-.45em, -.6em);
-    cursor: pointer;
-    border: 1px solid #fff;
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+.components-hue-pointer {
+  position: absolute;
+  width: 1.2em;
+  height: 1.2em;
+  border-radius: 50%;
+  box-shadow: rgba(0, 0, 0, 0.37) 0px 1px 4px 0px;
+
+  &:focus {
+    outline: none;
+    border: none;
+  }
+}
+
+.components-hue-container-horizontal {
+  width: 100%;
+  height: .5em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .components-hue-slider {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: 1em;
+    background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+  }
+
+  .components-hue-pointer {
+    transform: translate(-.6em, -.45em);
+    cursor: pointer;
+    border: 1px solid #fff;
+  }
+}
+
+.components-hue-container-vertical {
+  width: .5em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+
+  .components-hue-slider {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: 1em;
+    background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%,
+      #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+  }
+
+  .components-hue-pointer {
+    transform: translate(-.45em, -.6em);
+    cursor: pointer;
+    border: 1px solid #fff;
+  }
+}

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

@@ -4,7 +4,7 @@
 import "./SaturationPicker.scss";
 import * as React from "react";
 import { HSVColor } from "@itwin/core-common";
-import { CommonProps } from "@itwin/core-react";
+import type { CommonProps } from "@itwin/core-react";
 /** Properties for the [[SaturationPicker]] React component
  * @beta
  */

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

@@ -1 +1 @@
-{"version":3,"file":"SaturationPicker.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/SaturationPicker.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,yBAAyB,CAAC;AAEjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAY,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAExD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAgEhD;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW;IAC9F,sEAAsE;IACtE,kBAAkB,CAAC,EAAE,CAAC,CAAC,UAAU,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAClE,sBAAsB;IACtB,GAAG,EAAE,QAAQ,CAAC;CACf;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,kBAAkB,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,qBAAqB,eA6IpG"}
+{"version":3,"file":"SaturationPicker.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/SaturationPicker.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,yBAAyB,CAAC;AAEjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAY,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAExD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAgErD;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW;IAC9F,sEAAsE;IACtE,kBAAkB,CAAC,EAAE,CAAC,CAAC,UAAU,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAClE,sBAAsB;IACtB,GAAG,EAAE,QAAQ,CAAC;CACf;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,kBAAkB,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,qBAAqB,eA6IpG"}

package/lib/esm/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":["/*---------------------------------------------------------------------------------------------\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"]}
+{"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 type { 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

@@ -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/esm/imodel-components-react/color/Swatch.d.ts

@@ -3,8 +3,8 @@
  */
 import "./Swatch.scss";
 import * as React from "react";
-import { ColorDef } from "@itwin/core-common";
-import { CommonProps } from "@itwin/core-react";
+import type { ColorDef } from "@itwin/core-common";
+import type { CommonProps } from "@itwin/core-react";
 /** Properties for the [[ColorSwatch]] React component
  * @beta
  */

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

@@ -1 +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"}
+{"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,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD;;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.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,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":["/*---------------------------------------------------------------------------------------------\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"]}
+{"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 type { ColorDef } from \"@itwin/core-common\";\nimport type { 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

@@ -1,22 +1,22 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-
-.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: var(--iui-color-border-subtle);
-
-  &.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.
+*--------------------------------------------------------------------------------------------*/
+
+.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: var(--iui-color-border-subtle);
+
+  &.round {
+    border-radius: 50%;
+  }
+
+  &[disabled] {
+    opacity: 0.2;
+  }
+}

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

@@ -1,7 +1,7 @@
 /** @packageDocumentation
  * @module Color
  */
-import { ColorDef } from "@itwin/core-common";
+import type { 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

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

package/lib/esm/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,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":["/*---------------------------------------------------------------------------------------------\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"]}
+{"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 type { 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

@@ -4,8 +4,9 @@
 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";
+import type { PropertyValue } from "@itwin/appui-abstract";
+import type { PropertyEditorProps, TypeEditor } from "@itwin/components-react";
+import { PropertyEditorBase } from "@itwin/components-react";
 /** @internal */
 interface ColorEditorState {
     colorValue: number;

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

@@ -1 +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"}
+{"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,KAAK,EAC+C,aAAa,EAAC,MAAM,uBAAuB,CAAC;AAIvG,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC/E,OAAO,EAAE,kBAAkB,EAAyB,MAAM,yBAAyB,CAAC;AAGpF,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.map

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

@@ -1,18 +1,18 @@
-/*---------------------------------------------------------------------------------------------
-* 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-editor-item-height: 100%;
-
-.components-color-editor {
-  font-family: var(--iui-font-sans);
-  font-size: var(--iui-font-size-1);
-  color: var(--iui-color-text);
-  border: none;
-  box-sizing: border-box;
-  height: $components-color-editor-item-height;
-  display: flex;
-  align-items: center;
-}
+/*---------------------------------------------------------------------------------------------
+* 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-editor-item-height: 100%;
+
+.components-color-editor {
+  font-family: var(--iui-font-sans);
+  font-size: var(--iui-font-size-1);
+  color: var(--iui-color-text);
+  border: none;
+  box-sizing: border-box;
+  height: $components-color-editor-item-height;
+  display: flex;
+  align-items: center;
+}

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

@@ -3,8 +3,9 @@
  */
 import "./WeightEditor.scss";
 import * as React from "react";
-import { PropertyValue } from "@itwin/appui-abstract";
-import { PropertyEditorBase, PropertyEditorProps, TypeEditor } from "@itwin/components-react";
+import type { PropertyValue } from "@itwin/appui-abstract";
+import type { PropertyEditorProps, TypeEditor } from "@itwin/components-react";
+import { PropertyEditorBase } from "@itwin/components-react";
 /** @internal */
 interface WeightEditorState {
     weightValue: number;

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

@@ -1 +1 @@
-{"version":3,"file":"WeightEditor.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/editors/WeightEditor.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,qBAAqB,CAAC;AAE7B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAkB,aAAa,EAA+D,MAAM,uBAAuB,CAAC;AACnI,OAAO,EAAE,kBAAkB,EAAyB,mBAAmB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAKrH,gBAAgB;AAChB,UAAU,iBAAiB;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,qBAAa,YAAa,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE,iBAAiB,CAAE,YAAW,UAAU;IACjH,OAAO,CAAC,QAAQ,CAAoB;IACpC,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,iBAAiB,CAAgB;IACzC,OAAO,CAAC,WAAW,CAAqC;IAExD,gBAAgB;IAChB,SAAyB,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,CAGzD;gBAEU,KAAK,EAAE,mBAAmB;IAgBzB,gBAAgB,IAAI,OAAO,CAAC,aAAa,GAAG,SAAS,CAAC;IAgBnE,IAAW,WAAW,IAAI,WAAW,GAAG,IAAI,CAE3C;IAED,IAAW,QAAQ,IAAI,OAAO,CAM7B;IAED,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,iBAAiB,CAevB;IAEF,gBAAgB;IACA,iBAAiB;IAKjC,gBAAgB;IACA,oBAAoB;IAIpC,gBAAgB;IACA,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;YAMnD,iBAAiB;IAwB/B,gBAAgB;IACA,MAAM;CAavB;AAED;;;GAGG;AACH,qBAAa,oBAAqB,SAAQ,kBAAkB;IAE1D,IAAW,SAAS,IAAI,KAAK,CAAC,SAAS,CAEtC;CACF"}
+{"version":3,"file":"WeightEditor.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/editors/WeightEditor.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,qBAAqB,CAAC;AAE7B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAkB,aAAa,EAAC,MAAM,uBAAuB,CAAC;AAE1E,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC/E,OAAO,EAAE,kBAAkB,EAAyB,MAAM,yBAAyB,CAAC;AAKpF,gBAAgB;AAChB,UAAU,iBAAiB;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,qBAAa,YAAa,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE,iBAAiB,CAAE,YAAW,UAAU;IACjH,OAAO,CAAC,QAAQ,CAAoB;IACpC,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,iBAAiB,CAAgB;IACzC,OAAO,CAAC,WAAW,CAAqC;IAExD,gBAAgB;IAChB,SAAyB,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,CAGzD;gBAEU,KAAK,EAAE,mBAAmB;IAgBzB,gBAAgB,IAAI,OAAO,CAAC,aAAa,GAAG,SAAS,CAAC;IAgBnE,IAAW,WAAW,IAAI,WAAW,GAAG,IAAI,CAE3C;IAED,IAAW,QAAQ,IAAI,OAAO,CAM7B;IAED,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,iBAAiB,CAevB;IAEF,gBAAgB;IACA,iBAAiB;IAKjC,gBAAgB;IACA,oBAAoB;IAIpC,gBAAgB;IACA,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;YAMnD,iBAAiB;IAwB/B,gBAAgB;IACA,MAAM;CAavB;AAED;;;GAGG;AACH,qBAAa,oBAAqB,SAAQ,kBAAkB;IAE1D,IAAW,SAAS,IAAI,KAAK,CAAC,SAAS,CAEtC;CACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"WeightEditor.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/editors/WeightEditor.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 PropertyEditors\r\n */\r\n\r\nimport \"./WeightEditor.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { PropertyRecord, PropertyValue, PropertyValueFormat, StandardEditorNames, StandardTypeNames } from \"@itwin/appui-abstract\";\r\nimport { PropertyEditorBase, PropertyEditorManager, PropertyEditorProps, TypeEditor } from \"@itwin/components-react\";\r\nimport { WeightPickerButton } from \"../lineweight/WeightPickerButton\";\r\n\r\n// cspell:ignore lineweight\r\n\r\n/** @internal */\r\ninterface WeightEditorState {\r\n  weightValue: number;\r\n  readonly: boolean;\r\n  isDisabled?: boolean;\r\n}\r\n\r\n/** WeightEditor React component that is a property editor for picking a weight using a [[WeightPickerButton]] component\r\n * @public\r\n */\r\nexport class WeightEditor extends React.PureComponent<PropertyEditorProps, WeightEditorState> implements TypeEditor {\r\n  private _control: any | null = null;\r\n  private _isMounted = false;\r\n  private _availableWeights: number[] = [];\r\n  private _divElement = React.createRef<HTMLDivElement>();\r\n\r\n  /** @internal */\r\n  public override readonly state: Readonly<WeightEditorState> = {\r\n    weightValue: 0,\r\n    readonly: false,\r\n  };\r\n\r\n  constructor(props: PropertyEditorProps) {\r\n    super(props);\r\n\r\n    // TODO: add support for following if we need to specify set of weights to display\r\n    //  const record = this.props.propertyRecord;\r\n    //  if (record && record.property && record.property.editor && record.property.editor.params) {\r\n    //    const weightParams = record.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.ColorData) as WeightEditorParams;\r\n    //    // istanbul ignore else\r\n    //    if (weightParams) {\r\n    //      weightParams.weightValues.forEach((weight: number) => {\r\n    //        this._availableWeights.push(weight);\r\n    //      });\r\n    //    }\r\n    //   }\r\n  }\r\n\r\n  public async getPropertyValue(): Promise<PropertyValue | undefined> {\r\n    const record = this.props.propertyRecord;\r\n    let propertyValue: PropertyValue | undefined;\r\n\r\n    // istanbul ignore else\r\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\r\n      propertyValue = {\r\n        valueFormat: PropertyValueFormat.Primitive,\r\n        value: this.state.weightValue,\r\n        displayValue: \"\",\r\n      };\r\n    }\r\n\r\n    return propertyValue;\r\n  }\r\n\r\n  public get htmlElement(): HTMLElement | null {\r\n    return this._divElement.current;\r\n  }\r\n\r\n  public get hasFocus(): boolean {\r\n    let containsFocus = false;\r\n    // istanbul ignore else\r\n    if (this._divElement.current)\r\n      containsFocus = this._divElement.current.contains(document.activeElement);\r\n    return containsFocus;\r\n  }\r\n\r\n  private setFocus(): void {\r\n    // istanbul ignore else\r\n    if (this._control && !this.state.isDisabled) {\r\n      this._control.setFocus();\r\n    }\r\n  }\r\n\r\n  private _onLineWeightPick = (weight: number) => {\r\n    const propertyRecord = this.props.propertyRecord as PropertyRecord;\r\n\r\n    this.setState({\r\n      weightValue: weight,\r\n    }, async () => {\r\n      // istanbul ignore else\r\n      if (propertyRecord && this.props.onCommit) {\r\n        const propertyValue = await this.getPropertyValue();\r\n        // istanbul ignore else\r\n        if (propertyValue !== undefined) {\r\n          this.props.onCommit({ propertyRecord, newValue: propertyValue });\r\n        }\r\n      }\r\n    });\r\n  };\r\n\r\n  /** @internal */\r\n  public override componentDidMount() {\r\n    this._isMounted = true;\r\n    this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentWillUnmount() {\r\n    this._isMounted = false;\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentDidUpdate(prevProps: PropertyEditorProps) {\r\n    if (this.props.propertyRecord !== prevProps.propertyRecord) {\r\n      this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\r\n    }\r\n  }\r\n\r\n  private async setStateFromProps() {\r\n    const record = this.props.propertyRecord;\r\n    let initialValue = 0;\r\n\r\n    // istanbul ignore else\r\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\r\n      initialValue = record.value.value as number;\r\n    }\r\n\r\n    const readonly = record && undefined !== record.isReadonly ? record.isReadonly : false;\r\n    const isDisabled = record ? record.isDisabled : undefined;\r\n\r\n    // istanbul ignore else\r\n    if (this._isMounted)\r\n      this.setState(\r\n        { weightValue: initialValue, readonly, isDisabled },\r\n        () => {\r\n          if (this.props.setFocus) {\r\n            this.setFocus();\r\n          }\r\n        },\r\n      );\r\n  }\r\n\r\n  /** @internal */\r\n  public override render() {\r\n    return (\r\n      <div className={classnames(\"components-weight-editor\", this.props.className)} style={this.props.style} ref={this._divElement}>\r\n        <WeightPickerButton ref={(control) => this._control = control}\r\n          activeWeight={this.state.weightValue}\r\n          weights={this._availableWeights.length > 0 ? /* istanbul ignore next */ this._availableWeights : undefined}\r\n          disabled={this.state.isDisabled ? true : false}\r\n          readonly={this.state.readonly}\r\n          onLineWeightPick={this._onLineWeightPick}\r\n          data-testid=\"components-weight-editor\" />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\n/** Weight Property Editor registered for the \"number\" type name and \"weight-picker\" editor name.\r\n * It uses the [[WeightEditor]] React component.\r\n * @public\r\n */\r\nexport class WeightPropertyEditor extends PropertyEditorBase {\r\n  // istanbul ignore next\r\n  public get reactNode(): React.ReactNode {\r\n    return <WeightEditor />;\r\n  }\r\n}\r\n\r\nPropertyEditorManager.registerEditor(StandardTypeNames.Number, WeightPropertyEditor, StandardEditorNames.WeightPicker);\r\n"]}
+{"version":3,"file":"WeightEditor.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/editors/WeightEditor.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 \"./WeightEditor.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { PropertyRecord, PropertyValue} from \"@itwin/appui-abstract\";\nimport { PropertyValueFormat, StandardEditorNames, StandardTypeNames } from \"@itwin/appui-abstract\";\nimport type { PropertyEditorProps, TypeEditor } from \"@itwin/components-react\";\nimport { PropertyEditorBase, PropertyEditorManager } from \"@itwin/components-react\";\nimport { WeightPickerButton } from \"../lineweight/WeightPickerButton\";\n\n// cspell:ignore lineweight\n\n/** @internal */\ninterface WeightEditorState {\n  weightValue: number;\n  readonly: boolean;\n  isDisabled?: boolean;\n}\n\n/** WeightEditor React component that is a property editor for picking a weight using a [[WeightPickerButton]] component\n * @public\n */\nexport class WeightEditor extends React.PureComponent<PropertyEditorProps, WeightEditorState> implements TypeEditor {\n  private _control: any | null = null;\n  private _isMounted = false;\n  private _availableWeights: number[] = [];\n  private _divElement = React.createRef<HTMLDivElement>();\n\n  /** @internal */\n  public override readonly state: Readonly<WeightEditorState> = {\n    weightValue: 0,\n    readonly: false,\n  };\n\n  constructor(props: PropertyEditorProps) {\n    super(props);\n\n    // TODO: add support for following if we need to specify set of weights to display\n    //  const record = this.props.propertyRecord;\n    //  if (record && record.property && record.property.editor && record.property.editor.params) {\n    //    const weightParams = record.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.ColorData) as WeightEditorParams;\n    //    // istanbul ignore else\n    //    if (weightParams) {\n    //      weightParams.weightValues.forEach((weight: number) => {\n    //        this._availableWeights.push(weight);\n    //      });\n    //    }\n    //   }\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.weightValue,\n        displayValue: \"\",\n      };\n    }\n\n    return propertyValue;\n  }\n\n  public get htmlElement(): HTMLElement | null {\n    return this._divElement.current;\n  }\n\n  public get hasFocus(): boolean {\n    let containsFocus = false;\n    // istanbul ignore else\n    if (this._divElement.current)\n      containsFocus = this._divElement.current.contains(document.activeElement);\n    return containsFocus;\n  }\n\n  private setFocus(): void {\n    // istanbul ignore else\n    if (this._control && !this.state.isDisabled) {\n      this._control.setFocus();\n    }\n  }\n\n  private _onLineWeightPick = (weight: number) => {\n    const propertyRecord = this.props.propertyRecord as PropertyRecord;\n\n    this.setState({\n      weightValue: weight,\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._isMounted = true;\n    this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\n  }\n\n  /** @internal */\n  public override componentWillUnmount() {\n    this._isMounted = false;\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    let initialValue = 0;\n\n    // istanbul ignore else\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n      initialValue = record.value.value as number;\n    }\n\n    const readonly = record && undefined !== record.isReadonly ? record.isReadonly : false;\n    const isDisabled = record ? record.isDisabled : undefined;\n\n    // istanbul ignore else\n    if (this._isMounted)\n      this.setState(\n        { weightValue: initialValue, readonly, isDisabled },\n        () => {\n          if (this.props.setFocus) {\n            this.setFocus();\n          }\n        },\n      );\n  }\n\n  /** @internal */\n  public override render() {\n    return (\n      <div className={classnames(\"components-weight-editor\", this.props.className)} style={this.props.style} ref={this._divElement}>\n        <WeightPickerButton ref={(control) => this._control = control}\n          activeWeight={this.state.weightValue}\n          weights={this._availableWeights.length > 0 ? /* istanbul ignore next */ this._availableWeights : undefined}\n          disabled={this.state.isDisabled ? true : false}\n          readonly={this.state.readonly}\n          onLineWeightPick={this._onLineWeightPick}\n          data-testid=\"components-weight-editor\" />\n      </div>\n    );\n  }\n}\n\n/** Weight Property Editor registered for the \"number\" type name and \"weight-picker\" editor name.\n * It uses the [[WeightEditor]] React component.\n * @public\n */\nexport class WeightPropertyEditor extends PropertyEditorBase {\n  // istanbul ignore next\n  public get reactNode(): React.ReactNode {\n    return <WeightEditor />;\n  }\n}\n\nPropertyEditorManager.registerEditor(StandardTypeNames.Number, WeightPropertyEditor, StandardEditorNames.WeightPicker);\n"]}

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

@@ -1,16 +1,16 @@
-/*---------------------------------------------------------------------------------------------
-* 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-weight-editor-item-height: 100%;
-
-.components-weight-editor {
-  font-family: var(--iui-font-sans);
-  font-size: var(--iui-font-size-1);
-  color: var(--iui-color-text);
-  border: none;
-  box-sizing: border-box;
-  height: $components-weight-editor-item-height;
-}
+/*---------------------------------------------------------------------------------------------
+* 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-weight-editor-item-height: 100%;
+
+.components-weight-editor {
+  font-family: var(--iui-font-sans);
+  font-size: var(--iui-font-size-1);
+  color: var(--iui-color-text);
+  border: none;
+  box-sizing: border-box;
+  height: $components-weight-editor-item-height;
+}