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

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

@@ -1,8 +1,8 @@
 "use strict";
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * 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
  */
@@ -113,7 +113,9 @@ const ForwardRefColorPickerPopup = React.forwardRef(function ForwardRefColorPick
             return undefined;
         return defaultColors.current;
     }, [props.colorDefs]);
-    const popupPosition = undefined !== props.popupPosition ? props.popupPosition : appui_abstract_1.RelativePosition.BottomLeft;
+    const popupPosition = undefined !== props.popupPosition
+        ? props.popupPosition
+        : appui_abstract_1.RelativePosition.BottomLeft;
     const [closeLabel] = React.useState(() => UiIModelComponents_1.UiIModelComponents.translate("color.close"));
     const [togglePopupLabel] = React.useState(() => UiIModelComponents_1.UiIModelComponents.translate("color.toggleColorPopup"));
     return (
@@ -122,18 +124,15 @@ const ForwardRefColorPickerPopup = React.forwardRef(function ForwardRefColorPick
         React.createElement("button", { "data-testid": "components-colorpicker-popup-button", onClick: togglePopup, className: buttonClassNames, style: buttonStyle, disabled: props.disabled, ref: refs, title: togglePopupLabel },
             React.createElement("div", { className: "components-colorpicker-button-container" },
                 React.createElement("div", { className: "components-colorpicker-button-color-swatch", style: swatchStyle, "data-testid": showPopup ? "caret-up" : "caret-down" }),
-                props.showCaret && React.createElement(core_react_1.Icon, { className: "components-caret", iconSpec: showPopup ? React.createElement(itwinui_icons_react_1.SvgCaretUpSmall, null) : React.createElement(itwinui_icons_react_1.SvgCaretDownSmall, null) }))),
+                props.showCaret && (React.createElement(core_react_1.Icon, { className: "components-caret", iconSpec: showPopup ? React.createElement(itwinui_icons_react_1.SvgCaretUpSmall, null) : React.createElement(itwinui_icons_react_1.SvgCaretDownSmall, null) })))),
         React.createElement(core_react_1.Popup, { className: "components-colorpicker-popup", isOpen: showPopup, position: popupPosition, onClose: closePopup, target: target.current, closeOnNestedPopupOutsideClick: true },
             React.createElement("div", { className: "components-colorpicker-popup-panel-padding" },
-                !props.hideCloseButton &&
-                    React.createElement("button", { title: closeLabel, className: "core-focus-trap-ignore-initial core-dialog-close icon", "data-testid": "core-dialog-close", onClick: togglePopup },
-                        React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgClose, null) })),
+                !props.hideCloseButton && (React.createElement("button", { title: closeLabel, className: "core-focus-trap-ignore-initial core-dialog-close icon", "data-testid": "core-dialog-close", onClick: togglePopup },
+                    React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgClose, null) }))),
                 React.createElement(itwinui_react_1.ColorPicker, { selectedColor: itwinui_react_1.ColorValue.fromTbgr(colorDef.tbgr), onChangeComplete: handleColorChanged },
                     React.createElement(itwinui_react_1.ColorBuilder, null),
-                    props.colorInputType &&
-                        React.createElement(itwinui_react_1.ColorInputPanel, { defaultColorFormat: props.colorInputType }),
-                    colorOptions &&
-                        React.createElement(itwinui_react_1.ColorPalette, { colors: colorOptions }))))));
+                    props.colorInputType && (React.createElement(itwinui_react_1.ColorInputPanel, { defaultColorFormat: props.colorInputType })),
+                    colorOptions && React.createElement(itwinui_react_1.ColorPalette, { colors: colorOptions }))))));
 });
 /**
  * ColorPickerButton component that allows user to select a color from a set of color swatches or to define a new color.

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerPopup.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPopup.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\n// cSpell:ignore colorpicker\n\nimport * as React from \"react\";\nimport classnames from \"classnames\";\nimport { ColorByName, ColorDef } from \"@itwin/core-common\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\nimport type { CommonProps} from \"@itwin/core-react\";\nimport { Icon, Popup, useRefs } from \"@itwin/core-react\";\n// import { ColorPickerPanel } from \"./ColorPickerPanel\";\nimport { ColorBuilder, ColorInputPanel, ColorPalette, ColorPicker, ColorValue } from \"@itwin/itwinui-react\";\nimport \"./ColorPickerPopup.scss\";\nimport { getCSSColorFromDef } from \"./getCSSColorFromDef\";\nimport { UiIModelComponents } from \"../UiIModelComponents\";\nimport { SvgCaretDownSmall, SvgCaretUpSmall, SvgClose } from \"@itwin/itwinui-icons-react\";\n\n/** Properties for the [[ColorPickerPopup]] React component\n * @public\n */\nexport interface ColorPickerPopupProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\n  /** Current color */\n  initialColor: ColorDef;\n  /** Preset colors. Pass undefined to show default preset colors. Pass empty array to show no presets.\n   *  Displayed in rows of 9 items */\n  colorDefs?: ColorDef[];\n  /** Function to call when the color value is changed */\n  onColorChange?: ((newColor: ColorDef) => void) | undefined;\n  /** Function to call when the popup is closed */\n  onClose?: ((colorValue: ColorDef) => void) | undefined;\n  /** Disabled or not */\n  disabled?: boolean;\n  /** Readonly or not, color displayed on button but button will not trigger pop-up */\n  readonly?: boolean;\n  /** popup position. If not set RelativePosition.BottomLeft is used */\n  popupPosition?: RelativePosition;\n  /** Provides ability to return reference to HTMLButtonElement */\n  ref?: React.Ref<HTMLButtonElement>;\n  /** If true show up/down caret next to color  */\n  showCaret?: boolean;\n  /** If true, don't propagate clicks out of the ColorPicker */\n  captureClicks?: boolean;\n  /** If true, don't show close button at top */\n  hideCloseButton?: boolean;\n  /** If set show input values */\n  colorInputType?: \"hsl\" | \"rgb\" | \"hex\";\n}\n\n// Defined using following pattern (const ColorPickerPopup at bottom) to ensure useful API documentation is extracted\n\nconst ForwardRefColorPickerPopup = React.forwardRef<HTMLButtonElement, ColorPickerPopupProps>(\n  function ForwardRefColorPickerPopup(props, ref) {\n    const target = React.useRef<HTMLButtonElement>(null);\n    const refs = useRefs(target, ref);  // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.\n    const [showPopup, setShowPopup] = React.useState(false);\n    const [colorDef, setColorDef] = React.useState(props.initialColor);\n    const initialColorRef = React.useRef(props.initialColor);\n\n    React.useEffect(() => {\n      if (props.initialColor !== initialColorRef.current) {\n        initialColorRef.current = props.initialColor;\n        setColorDef(props.initialColor);\n      }\n    }, [props.initialColor]);\n\n    const defaultColors = React.useRef(\n      [\n        ColorValue.fromTbgr(ColorByName.red),\n        ColorValue.fromTbgr(ColorByName.orange),\n        ColorValue.fromTbgr(ColorByName.yellow),\n        ColorValue.fromTbgr(ColorByName.green),\n        ColorValue.fromTbgr(ColorByName.blue),\n        ColorValue.fromTbgr(ColorByName.mediumBlue),\n        ColorValue.fromTbgr(ColorByName.indigo),\n        ColorValue.fromTbgr(ColorByName.violet),\n        ColorValue.fromTbgr(ColorByName.black),\n        ColorValue.fromTbgr(ColorByName.white),\n        ColorValue.fromTbgr(ColorByName.cyan),\n        ColorValue.fromTbgr(ColorByName.fuchsia),\n        ColorValue.fromTbgr(ColorByName.tan),\n        ColorValue.fromTbgr(ColorByName.gray),\n        ColorValue.fromTbgr(ColorByName.brown),\n        ColorValue.fromTbgr(ColorByName.purple),\n        ColorValue.fromTbgr(ColorByName.olive),\n        ColorValue.fromTbgr(ColorByName.darkGreen),\n      ]);\n\n    // istanbul ignore next\n    const closePopup = React.useCallback(() => {\n      props.onClose && props.onClose(colorDef);\n      setShowPopup(false);\n    }, [colorDef, props]);\n\n    const togglePopup = React.useCallback(() => {\n      setShowPopup(!showPopup);\n    }, [showPopup]);\n\n    const handleColorChanged = React.useCallback((newColorValue: ColorValue) => {\n      const newColor = ColorDef.fromTbgr(newColorValue.toTbgr());\n      // istanbul ignore else\n      if (!newColor.equals(colorDef)) {\n        setColorDef(newColor);\n\n        // istanbul ignore else\n        props.onColorChange && props.onColorChange(newColor);\n      }\n    }, [colorDef, props]);\n\n    const rgbaString = getCSSColorFromDef(colorDef);\n\n    const buttonStyle = { ...props.style } as React.CSSProperties;\n    const swatchStyle = { backgroundColor: rgbaString } as React.CSSProperties;\n    const buttonClassNames = classnames(\"components-colorpicker-popup-button\",\n      props.readonly && \"readonly\",\n      props.className,\n    );\n\n    const clickHandler = (event: React.MouseEvent) => {\n      // istanbul ignore else\n      if (props.captureClicks)\n        event.stopPropagation();\n    };\n\n    const colorOptions = React.useMemo(() => {\n      if (props.colorDefs && props.colorDefs.length) {\n        return props.colorDefs.map((def) => ColorValue.fromTbgr(def.tbgr));\n      }\n      if (props.colorDefs && 0 === props.colorDefs.length)\n        return undefined;\n      return defaultColors.current;\n    }, [props.colorDefs]);\n    const popupPosition = undefined !== props.popupPosition ? props.popupPosition : RelativePosition.BottomLeft;\n\n    const [closeLabel] = React.useState(() => UiIModelComponents.translate(\"color.close\"));\n    const [togglePopupLabel] = React.useState(() => UiIModelComponents.translate(\"color.toggleColorPopup\"));\n\n    return (\n      /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */\n      <div onClick={clickHandler}>\n        <button data-testid=\"components-colorpicker-popup-button\" onClick={togglePopup} className={buttonClassNames} style={buttonStyle}\n          disabled={props.disabled} ref={refs} title={togglePopupLabel} >\n          <div className=\"components-colorpicker-button-container\">\n            <div className=\"components-colorpicker-button-color-swatch\" style={swatchStyle} data-testid={showPopup ? \"caret-up\" : \"caret-down\"} />\n            {props.showCaret && <Icon className=\"components-caret\" iconSpec={showPopup ? <SvgCaretUpSmall /> : <SvgCaretDownSmall /> } />}\n          </div>\n        </button>\n        <Popup\n          className=\"components-colorpicker-popup\"\n          isOpen={showPopup}\n          position={popupPosition}\n          onClose={closePopup}\n          target={target.current}\n          closeOnNestedPopupOutsideClick\n        >\n          <div className=\"components-colorpicker-popup-panel-padding\">\n            {!props.hideCloseButton &&\n              <button title={closeLabel}\n                className={\"core-focus-trap-ignore-initial core-dialog-close icon\"}\n                data-testid=\"core-dialog-close\"\n                onClick={togglePopup}\n              ><Icon iconSpec={<SvgClose />}/></button>}\n            <ColorPicker selectedColor={ColorValue.fromTbgr(colorDef.tbgr)} onChangeComplete={handleColorChanged} >\n              <ColorBuilder />\n              {props.colorInputType &&\n                <ColorInputPanel defaultColorFormat={props.colorInputType} />}\n              {colorOptions &&\n                <ColorPalette colors={colorOptions} />}\n            </ColorPicker>\n          </div>\n        </Popup>\n      </div>\n    );\n  }\n);\n\n/**\n * ColorPickerButton component that allows user to select a color from a set of color swatches or to define a new color.\n * @note Using forwardRef so the ColorEditor (Type Editor) can access the ref of the button element inside this component.\n * @public\n */\nexport const ColorPickerPopup: (props: ColorPickerPopupProps) => JSX.Element | null = ForwardRefColorPickerPopup;\n"]}
+{"version":3,"file":"ColorPickerPopup.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPopup.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\n// cSpell:ignore colorpicker\n\nimport * as React from \"react\";\nimport classnames from \"classnames\";\nimport { ColorByName, ColorDef } from \"@itwin/core-common\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Icon, Popup, useRefs } from \"@itwin/core-react\";\n// import { ColorPickerPanel } from \"./ColorPickerPanel\";\nimport {\n  ColorBuilder,\n  ColorInputPanel,\n  ColorPalette,\n  ColorPicker,\n  ColorValue,\n} from \"@itwin/itwinui-react\";\nimport \"./ColorPickerPopup.scss\";\nimport { getCSSColorFromDef } from \"./getCSSColorFromDef\";\nimport { UiIModelComponents } from \"../UiIModelComponents\";\nimport {\n  SvgCaretDownSmall,\n  SvgCaretUpSmall,\n  SvgClose,\n} from \"@itwin/itwinui-icons-react\";\n\n/** Properties for the [[ColorPickerPopup]] React component\n * @public\n */\nexport interface ColorPickerPopupProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    CommonProps {\n  /** Current color */\n  initialColor: ColorDef;\n  /** Preset colors. Pass undefined to show default preset colors. Pass empty array to show no presets.\n   *  Displayed in rows of 9 items */\n  colorDefs?: ColorDef[];\n  /** Function to call when the color value is changed */\n  onColorChange?: ((newColor: ColorDef) => void) | undefined;\n  /** Function to call when the popup is closed */\n  onClose?: ((colorValue: ColorDef) => void) | undefined;\n  /** Disabled or not */\n  disabled?: boolean;\n  /** Readonly or not, color displayed on button but button will not trigger pop-up */\n  readonly?: boolean;\n  /** popup position. If not set RelativePosition.BottomLeft is used */\n  popupPosition?: RelativePosition;\n  /** Provides ability to return reference to HTMLButtonElement */\n  ref?: React.Ref<HTMLButtonElement>;\n  /** If true show up/down caret next to color  */\n  showCaret?: boolean;\n  /** If true, don't propagate clicks out of the ColorPicker */\n  captureClicks?: boolean;\n  /** If true, don't show close button at top */\n  hideCloseButton?: boolean;\n  /** If set show input values */\n  colorInputType?: \"hsl\" | \"rgb\" | \"hex\";\n}\n\n// Defined using following pattern (const ColorPickerPopup at bottom) to ensure useful API documentation is extracted\n\nconst ForwardRefColorPickerPopup = React.forwardRef<\n  HTMLButtonElement,\n  ColorPickerPopupProps\n>(function ForwardRefColorPickerPopup(props, ref) {\n  const target = React.useRef<HTMLButtonElement>(null);\n  const refs = useRefs(target, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.\n  const [showPopup, setShowPopup] = React.useState(false);\n  const [colorDef, setColorDef] = React.useState(props.initialColor);\n  const initialColorRef = React.useRef(props.initialColor);\n\n  React.useEffect(() => {\n    if (props.initialColor !== initialColorRef.current) {\n      initialColorRef.current = props.initialColor;\n      setColorDef(props.initialColor);\n    }\n  }, [props.initialColor]);\n\n  const defaultColors = React.useRef([\n    ColorValue.fromTbgr(ColorByName.red),\n    ColorValue.fromTbgr(ColorByName.orange),\n    ColorValue.fromTbgr(ColorByName.yellow),\n    ColorValue.fromTbgr(ColorByName.green),\n    ColorValue.fromTbgr(ColorByName.blue),\n    ColorValue.fromTbgr(ColorByName.mediumBlue),\n    ColorValue.fromTbgr(ColorByName.indigo),\n    ColorValue.fromTbgr(ColorByName.violet),\n    ColorValue.fromTbgr(ColorByName.black),\n    ColorValue.fromTbgr(ColorByName.white),\n    ColorValue.fromTbgr(ColorByName.cyan),\n    ColorValue.fromTbgr(ColorByName.fuchsia),\n    ColorValue.fromTbgr(ColorByName.tan),\n    ColorValue.fromTbgr(ColorByName.gray),\n    ColorValue.fromTbgr(ColorByName.brown),\n    ColorValue.fromTbgr(ColorByName.purple),\n    ColorValue.fromTbgr(ColorByName.olive),\n    ColorValue.fromTbgr(ColorByName.darkGreen),\n  ]);\n\n  // istanbul ignore next\n  const closePopup = React.useCallback(() => {\n    props.onClose && props.onClose(colorDef);\n    setShowPopup(false);\n  }, [colorDef, props]);\n\n  const togglePopup = React.useCallback(() => {\n    setShowPopup(!showPopup);\n  }, [showPopup]);\n\n  const handleColorChanged = React.useCallback(\n    (newColorValue: ColorValue) => {\n      const newColor = ColorDef.fromTbgr(newColorValue.toTbgr());\n      // istanbul ignore else\n      if (!newColor.equals(colorDef)) {\n        setColorDef(newColor);\n\n        // istanbul ignore else\n        props.onColorChange && props.onColorChange(newColor);\n      }\n    },\n    [colorDef, props]\n  );\n\n  const rgbaString = getCSSColorFromDef(colorDef);\n\n  const buttonStyle = { ...props.style } as React.CSSProperties;\n  const swatchStyle = { backgroundColor: rgbaString } as React.CSSProperties;\n  const buttonClassNames = classnames(\n    \"components-colorpicker-popup-button\",\n    props.readonly && \"readonly\",\n    props.className\n  );\n\n  const clickHandler = (event: React.MouseEvent) => {\n    // istanbul ignore else\n    if (props.captureClicks) event.stopPropagation();\n  };\n\n  const colorOptions = React.useMemo(() => {\n    if (props.colorDefs && props.colorDefs.length) {\n      return props.colorDefs.map((def) => ColorValue.fromTbgr(def.tbgr));\n    }\n    if (props.colorDefs && 0 === props.colorDefs.length) return undefined;\n    return defaultColors.current;\n  }, [props.colorDefs]);\n  const popupPosition =\n    undefined !== props.popupPosition\n      ? props.popupPosition\n      : RelativePosition.BottomLeft;\n\n  const [closeLabel] = React.useState(() =>\n    UiIModelComponents.translate(\"color.close\")\n  );\n  const [togglePopupLabel] = React.useState(() =>\n    UiIModelComponents.translate(\"color.toggleColorPopup\")\n  );\n\n  return (\n    /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */\n    <div onClick={clickHandler}>\n      <button\n        data-testid=\"components-colorpicker-popup-button\"\n        onClick={togglePopup}\n        className={buttonClassNames}\n        style={buttonStyle}\n        disabled={props.disabled}\n        ref={refs}\n        title={togglePopupLabel}\n      >\n        <div className=\"components-colorpicker-button-container\">\n          <div\n            className=\"components-colorpicker-button-color-swatch\"\n            style={swatchStyle}\n            data-testid={showPopup ? \"caret-up\" : \"caret-down\"}\n          />\n          {props.showCaret && (\n            <Icon\n              className=\"components-caret\"\n              iconSpec={showPopup ? <SvgCaretUpSmall /> : <SvgCaretDownSmall />}\n            />\n          )}\n        </div>\n      </button>\n      <Popup\n        className=\"components-colorpicker-popup\"\n        isOpen={showPopup}\n        position={popupPosition}\n        onClose={closePopup}\n        target={target.current}\n        closeOnNestedPopupOutsideClick\n      >\n        <div className=\"components-colorpicker-popup-panel-padding\">\n          {!props.hideCloseButton && (\n            <button\n              title={closeLabel}\n              className={\n                \"core-focus-trap-ignore-initial core-dialog-close icon\"\n              }\n              data-testid=\"core-dialog-close\"\n              onClick={togglePopup}\n            >\n              <Icon iconSpec={<SvgClose />} />\n            </button>\n          )}\n          <ColorPicker\n            selectedColor={ColorValue.fromTbgr(colorDef.tbgr)}\n            onChangeComplete={handleColorChanged}\n          >\n            <ColorBuilder />\n            {props.colorInputType && (\n              <ColorInputPanel defaultColorFormat={props.colorInputType} />\n            )}\n            {colorOptions && <ColorPalette colors={colorOptions} />}\n          </ColorPicker>\n        </div>\n      </Popup>\n    </div>\n  );\n});\n\n/**\n * ColorPickerButton component that allows user to select a color from a set of color swatches or to define a new color.\n * @note Using forwardRef so the ColorEditor (Type Editor) can access the ref of the button element inside this component.\n * @public\n */\nexport const ColorPickerPopup: (\n  props: ColorPickerPopupProps\n) => React.ReactElement | null = ForwardRefColorPickerPopup;\n"]}

package/lib/cjs/imodel-components-react/color/HueSlider.d.ts

@@ -19,5 +19,5 @@ export interface HueSliderProps extends React.HTMLAttributes<HTMLDivElement>, Co
 /** HueSlider component used to set the hue value.
  * @beta
  */
-export declare function HueSlider({ isHorizontal, onHueChange, hsv, className, style }: HueSliderProps): JSX.Element;
+export declare function HueSlider({ isHorizontal, onHueChange, hsv, className, style, }: HueSliderProps): JSX.Element;
 //# sourceMappingURL=HueSlider.d.ts.map

package/lib/cjs/imodel-components-react/color/HueSlider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HueSlider.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/HueSlider.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAyDrD;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW;IACvF,kFAAkF;IAClF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACpD,sBAAsB;IACtB,GAAG,EAAE,QAAQ,CAAC;CACf;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EAAE,YAAY,EAAE,WAAW,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,cAAc,eAwI7F"}
+{"version":3,"file":"HueSlider.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/HueSlider.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAgErD;;GAEG;AACH,MAAM,WAAW,cACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,WAAW;IACb,kFAAkF;IAClF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACpD,sBAAsB;IACtB,GAAG,EAAE,QAAQ,CAAC;CACf;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EACxB,YAAY,EACZ,WAAW,EACX,GAAG,EACH,SAAS,EACT,KAAK,GACN,EAAE,cAAc,eA0LhB"}

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

@@ -1,8 +1,8 @@
 "use strict";
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * 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
  */
@@ -49,14 +49,14 @@ function calculateHue(currentPos, high, isVertical) {
         return isVertical ? 0 : 359;
     }
     else {
-        let percent = ((currentPos * 100) / high);
+        let percent = (currentPos * 100) / high;
         if (isVertical)
             percent = 100 - percent;
-        return Math.round(((359 * percent) / 100));
+        return Math.round((359 * percent) / 100);
     }
 }
 function calculateChange(currentHue, e, isHorizontal, container) {
-    const { width: containerWidth, height: containerHeight, top: containerTop, left: containerLeft } = container.getBoundingClientRect();
+    const { width: containerWidth, height: containerHeight, top: containerTop, left: containerLeft, } = container.getBoundingClientRect();
     let x;
     if ("pageX" in e) {
         x = e.pageX;
@@ -85,17 +85,19 @@ function calculateChange(currentHue, e, isHorizontal, container) {
         return currentHue;
     const pointerX = x - (containerLeft + window.scrollX);
     const pointerY = y - (containerTop + window.scrollY);
-    if (!isHorizontal) { // vertical
+    if (!isHorizontal) {
+        // vertical
         return calculateHue(pointerY, containerHeight, true);
     }
-    else { // horizontal
+    else {
+        // horizontal
         return calculateHue(pointerX, containerWidth, false);
     }
 }
 /** HueSlider component used to set the hue value.
  * @beta
  */
-function HueSlider({ isHorizontal, onHueChange, hsv, className, style }) {
+function HueSlider({ isHorizontal, onHueChange, hsv, className, style, }) {
     const container = React.useRef(null);
     const [hueLabel] = React.useState(() => UiIModelComponents_1.UiIModelComponents.translate("color.hue"));
     const isDragging = React.useRef(false);
@@ -136,7 +138,10 @@ function HueSlider({ isHorizontal, onHueChange, hsv, className, style }) {
         if (e.target !== e.currentTarget) {
             // istanbul ignore else
             if (!isDragging.current) {
-                document.addEventListener("mouseup", onMouseUp, { capture: true, once: true });
+                document.addEventListener("mouseup", onMouseUp, {
+                    capture: true,
+                    once: true,
+                });
                 isDragging.current = true;
             }
         }
@@ -157,10 +162,12 @@ function HueSlider({ isHorizontal, onHueChange, hsv, className, style }) {
     const onKeyDown = React.useCallback((evt) => {
         let newHue;
         const hueValue = hsv.h;
-        if (evt.key === appui_abstract_1.SpecialKey.ArrowLeft || evt.key === appui_abstract_1.SpecialKey.ArrowDown) {
+        if (evt.key === appui_abstract_1.SpecialKey.ArrowLeft ||
+            evt.key === appui_abstract_1.SpecialKey.ArrowDown) {
             newHue = hueValue - (evt.ctrlKey ? 10 : 1);
         }
-        else if (evt.key === appui_abstract_1.SpecialKey.ArrowRight || evt.key === appui_abstract_1.SpecialKey.ArrowUp) {
+        else if (evt.key === appui_abstract_1.SpecialKey.ArrowRight ||
+            evt.key === appui_abstract_1.SpecialKey.ArrowUp) {
             newHue = hueValue + (evt.ctrlKey ? 10 : 1);
         }
         else if (evt.key === appui_abstract_1.SpecialKey.PageDown) {
@@ -193,9 +200,19 @@ function HueSlider({ isHorizontal, onHueChange, hsv, className, style }) {
             evt.preventDefault();
         }
     }, [hsv, onHueChange]);
-    const containerClasses = (0, classnames_1.default)(isHorizontal ? "components-hue-container-horizontal" : "components-hue-container-vertical", className);
-    const pointerStyle = isHorizontal ? { left: `${(hsv.h * 100) / 360}%`, backgroundColor: `hsl(${hsv.h} ,100%, 50%)` } :
-        { left: `0px`, top: `${-((hsv.h * 100) / 360) + 100}%`, backgroundColor: `hsl(${hsv.h} ,100%, 50%)` };
+    const containerClasses = (0, classnames_1.default)(isHorizontal
+        ? "components-hue-container-horizontal"
+        : "components-hue-container-vertical", className);
+    const pointerStyle = isHorizontal
+        ? {
+            left: `${(hsv.h * 100) / 360}%`,
+            backgroundColor: `hsl(${hsv.h} ,100%, 50%)`,
+        }
+        : {
+            left: `0px`,
+            top: `${-((hsv.h * 100) / 360) + 100}%`,
+            backgroundColor: `hsl(${hsv.h} ,100%, 50%)`,
+        };
     return (React.createElement("div", { className: containerClasses, style: style, "data-testid": "hue-container" },
         React.createElement("div", { "data-testid": "hue-slider", role: "slider", "aria-label": hueLabel, "aria-valuemin": 0, "aria-valuemax": 360, "aria-valuenow": hsv.h, className: "components-hue-slider", ref: container, onMouseDown: onMouseDown, onMouseMove: onDragging, onTouchMove: onDragging, onMouseUp: onMouseUp, onTouchStart: onTouchStart, onTouchEnd: onTouchEnd, tabIndex: 0, onKeyDown: onKeyDown },
             React.createElement("div", { style: pointerStyle, className: "components-hue-pointer", "data-testid": "hue-pointer" }))));

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

@@ -1 +1 @@
-{"version":3,"file":"HueSlider.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/HueSlider.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 \"./HueSlider.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { HSVColor } from \"@itwin/core-common\";\nimport { SpecialKey } from \"@itwin/appui-abstract\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { UiIModelComponents } from \"../UiIModelComponents\";\n\n// hue is a value from 0 to 360\nfunction calculateHue(currentPos: number, high: number, isVertical: boolean) {\n  // istanbul ignore next\n  if (currentPos <= 0) {\n    return isVertical ? 359 : 0;\n  } else if (currentPos >= high) {\n    return isVertical ? 0 : 359;\n  } else {\n    let percent = ((currentPos * 100) / high);\n    if (isVertical)\n      percent = 100 - percent;\n    return Math.round(((359 * percent) / 100));\n  }\n}\n\nfunction calculateChange(currentHue: number, e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>, isHorizontal: boolean, container: HTMLDivElement) {\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 if\n    if (undefined === e.touches || 0 === e.touches.length)\n      return currentHue;\n    x = e.touches[0].pageX;\n  }\n  // istanbul ignore if\n  if (undefined === x)\n    return currentHue;\n\n  let y: number | undefined;\n  if (\"pageY\" in e) {\n    y = e.pageY;\n  } else {\n    // istanbul ignore if\n    if (undefined === e.touches || 0 === e.touches.length)\n      return currentHue;\n    y = e.touches[0].pageY;\n  }\n  // istanbul ignore if\n  if (undefined === y)\n    return currentHue;\n\n  const pointerX = x - (containerLeft + window.scrollX);\n  const pointerY = y - (containerTop + window.scrollY);\n\n  if (!isHorizontal) { // vertical\n    return calculateHue(pointerY, containerHeight, true);\n  } else {  // horizontal\n    return calculateHue(pointerX, containerWidth, false);\n  }\n}\n\n/** Properties for the [[HueSlider]] React component\n * @beta\n */\nexport interface HueSliderProps extends React.HTMLAttributes<HTMLDivElement>, CommonProps {\n  /** true if slider is oriented horizontal, else vertical orientation is assumed */\n  isHorizontal?: boolean;\n  /** function to run when user hue is changed */\n  onHueChange?: ((hue: HSVColor) => void) | undefined;\n  /** HSV Color Value */\n  hsv: HSVColor;\n}\n\n/** HueSlider component used to set the hue value.\n * @beta\n */\nexport function HueSlider({ isHorizontal, onHueChange, hsv, className, style }: HueSliderProps) {\n  const container = React.useRef<HTMLDivElement>(null);\n  const [hueLabel] = React.useState(() => UiIModelComponents.translate(\"color.hue\"));\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 newHue = calculateChange(hsv.h, e, !!isHorizontal, container.current);\n      // istanbul ignore else\n      const newColor = hsv.clone(newHue);\n      // istanbul ignore else\n      if (onHueChange)\n        onHueChange(newColor);\n    }\n  }, [isHorizontal, hsv, onHueChange]);\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    event.preventDefault();\n\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    e.preventDefault();\n\n    // istanbul ignore else\n    if (e.target !== e.currentTarget) {\n      // istanbul ignore else\n      if (!isDragging.current) {\n        document.addEventListener(\"mouseup\", onMouseUp, { capture: true, once: true });\n        isDragging.current = true;\n      }\n    }\n\n    onChange(e);\n\n    // istanbul ignore else\n    if (container.current)\n      container.current.focus();\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    let newHue: number | undefined;\n    const hueValue = hsv.h;\n    if (evt.key === SpecialKey.ArrowLeft || evt.key === SpecialKey.ArrowDown) {\n      newHue = hueValue - (evt.ctrlKey ? 10 : 1);\n    } else if (evt.key === SpecialKey.ArrowRight || evt.key === SpecialKey.ArrowUp) {\n      newHue = hueValue + (evt.ctrlKey ? 10 : 1);\n    } else if (evt.key === SpecialKey.PageDown) {\n      newHue = hueValue - (evt.ctrlKey ? 180 : 60);\n    } else if (evt.key === SpecialKey.PageUp) {\n      newHue = hueValue + (evt.ctrlKey ? 180 : 60);\n    } else if (evt.key === SpecialKey.Home) {\n      newHue = 0;\n    } else {\n      // istanbul ignore else\n      if (evt.key === SpecialKey.End) {\n        newHue = 359;\n      }\n    }\n\n    // istanbul ignore else\n    if (undefined !== newHue) {\n      // istanbul ignore if\n      if (newHue > 359) newHue = 359; // 360 is same as zero\n      // istanbul ignore if\n      if (newHue < 0) newHue = 0;\n\n      const newColor = hsv.clone(newHue);\n      // istanbul ignore else\n      if (onHueChange)\n        onHueChange(newColor);\n      evt.preventDefault();\n    }\n  }, [hsv, onHueChange]);\n\n  const containerClasses = classnames(\n    isHorizontal ? \"components-hue-container-horizontal\" : \"components-hue-container-vertical\",\n    className,\n  );\n\n  const pointerStyle: React.CSSProperties = isHorizontal ? { left: `${(hsv.h * 100) / 360}%`, backgroundColor: `hsl(${hsv.h} ,100%, 50%)` } :\n    { left: `0px`, top: `${-((hsv.h * 100) / 360) + 100}%`, backgroundColor: `hsl(${hsv.h} ,100%, 50%)` };\n\n  return (\n    <div className={containerClasses} style={style} data-testid=\"hue-container\" >\n      <div\n        data-testid=\"hue-slider\"\n        role=\"slider\" aria-label={hueLabel}\n        aria-valuemin={0} aria-valuemax={360} aria-valuenow={hsv.h}\n        className=\"components-hue-slider\"\n        ref={container}\n        onMouseDown={onMouseDown}\n        onMouseMove={onDragging}\n        onTouchMove={onDragging}\n        onMouseUp={onMouseUp}\n        onTouchStart={onTouchStart}\n        onTouchEnd={onTouchEnd}\n        tabIndex={0}\n        onKeyDown={onKeyDown}\n      >\n        <div style={pointerStyle} className=\"components-hue-pointer\" data-testid=\"hue-pointer\" />\n      </div>\n    </div >\n  );\n}\n"]}
+{"version":3,"file":"HueSlider.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/HueSlider.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,4BAA0B;AAC1B,4DAAoC;AACpC,6CAA+B;AAE/B,0DAAmD;AAEnD,8DAA2D;AAE3D,+BAA+B;AAC/B,SAAS,YAAY,CAAC,UAAkB,EAAE,IAAY,EAAE,UAAmB;IACzE,uBAAuB;IACvB,IAAI,UAAU,IAAI,CAAC,EAAE;QACnB,OAAO,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;KAC7B;SAAM,IAAI,UAAU,IAAI,IAAI,EAAE;QAC7B,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;KAC7B;SAAM;QACL,IAAI,OAAO,GAAG,CAAC,UAAU,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC;QACxC,IAAI,UAAU;YAAE,OAAO,GAAG,GAAG,GAAG,OAAO,CAAC;QACxC,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,OAAO,CAAC,GAAG,GAAG,CAAC,CAAC;KAC1C;AACH,CAAC;AAED,SAAS,eAAe,CACtB,UAAkB,EAClB,CAAsE,EACtE,YAAqB,EACrB,SAAyB;IAEzB,MAAM,EACJ,KAAK,EAAE,cAAc,EACrB,MAAM,EAAE,eAAe,EACvB,GAAG,EAAE,YAAY,EACjB,IAAI,EAAE,aAAa,GACpB,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAC;IAEtC,IAAI,CAAqB,CAAC;IAC1B,IAAI,OAAO,IAAI,CAAC,EAAE;QAChB,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC;KACb;SAAM;QACL,qBAAqB;QACrB,IAAI,SAAS,KAAK,CAAC,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,MAAM;YAAE,OAAO,UAAU,CAAC;QACzE,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;KACxB;IACD,qBAAqB;IACrB,IAAI,SAAS,KAAK,CAAC;QAAE,OAAO,UAAU,CAAC;IAEvC,IAAI,CAAqB,CAAC;IAC1B,IAAI,OAAO,IAAI,CAAC,EAAE;QAChB,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC;KACb;SAAM;QACL,qBAAqB;QACrB,IAAI,SAAS,KAAK,CAAC,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,MAAM;YAAE,OAAO,UAAU,CAAC;QACzE,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;KACxB;IACD,qBAAqB;IACrB,IAAI,SAAS,KAAK,CAAC;QAAE,OAAO,UAAU,CAAC;IAEvC,MAAM,QAAQ,GAAG,CAAC,GAAG,CAAC,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACtD,MAAM,QAAQ,GAAG,CAAC,GAAG,CAAC,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAErD,IAAI,CAAC,YAAY,EAAE;QACjB,WAAW;QACX,OAAO,YAAY,CAAC,QAAQ,EAAE,eAAe,EAAE,IAAI,CAAC,CAAC;KACtD;SAAM;QACL,aAAa;QACb,OAAO,YAAY,CAAC,QAAQ,EAAE,cAAc,EAAE,KAAK,CAAC,CAAC;KACtD;AACH,CAAC;AAgBD;;GAEG;AACH,SAAgB,SAAS,CAAC,EACxB,YAAY,EACZ,WAAW,EACX,GAAG,EACH,SAAS,EACT,KAAK,GACU;IACf,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACrD,MAAM,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,CACrC,uCAAkB,CAAC,SAAS,CAAC,WAAW,CAAC,CAC1C,CAAC;IACF,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAEvC,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAChC,CACE,CAAsE,EACtE,EAAE;QACF,uBAAuB;QACvB,IAAI,SAAS,CAAC,OAAO,EAAE;YACrB,MAAM,MAAM,GAAG,eAAe,CAC5B,GAAG,CAAC,CAAC,EACL,CAAC,EACD,CAAC,CAAC,YAAY,EACd,SAAS,CAAC,OAAO,CAClB,CAAC;YACF,uBAAuB;YACvB,MAAM,QAAQ,GAAG,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;YACnC,uBAAuB;YACvB,IAAI,WAAW;gBAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;SACxC;IACH,CAAC,EACD,CAAC,YAAY,EAAE,GAAG,EAAE,WAAW,CAAC,CACjC,CAAC;IAEF,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAClC,CACE,CAAsE,EACtE,EAAE;QACF,uBAAuB;QACvB,IAAI,UAAU,CAAC,OAAO,EAAE;YACtB,QAAQ,CAAC,CAAC,CAAC,CAAC;SACb;IACH,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACvC,uBAAuB;QACvB,IAAI,UAAU,CAAC,OAAO,EAAE;YACtB,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC;SAC5B;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAClC,CAAC,KAAuC,EAAE,EAAE;QAC1C,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,uBAAuB;QACvB,IAAI,UAAU,CAAC,OAAO,EAAE;YACtB,QAAQ,CAAC,KAAK,CAAC,CAAC;YAChB,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC;SAC5B;IACH,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACnC,CAAC,CAAmC,EAAE,EAAE;QACtC,CAAC,CAAC,cAAc,EAAE,CAAC;QAEnB,uBAAuB;QACvB,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa,EAAE;YAChC,uBAAuB;YACvB,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE;gBACvB,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,EAAE;oBAC9C,OAAO,EAAE,IAAI;oBACb,IAAI,EAAE,IAAI;iBACX,CAAC,CAAC;gBACH,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;aAC3B;SACF;QAED,QAAQ,CAAC,CAAC,CAAC,CAAC;QAEZ,uBAAuB;QACvB,IAAI,SAAS,CAAC,OAAO;YAAE,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IACnD,CAAC,EACD,CAAC,QAAQ,EAAE,SAAS,CAAC,CACtB,CAAC;IAEF,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,CAAmC,EAAE,EAAE;QACtC,uBAAuB;QACvB,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa;YAAE,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;QAE5D,QAAQ,CAAC,CAAC,CAAC,CAAC;QAEZ,uBAAuB;QACvB,IAAI,SAAS,CAAC,OAAO;YAAE,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IACnD,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CACjC,CAAC,GAAwC,EAAE,EAAE;QAC3C,IAAI,MAA0B,CAAC;QAC/B,MAAM,QAAQ,GAAG,GAAG,CAAC,CAAC,CAAC;QACvB,IACE,GAAG,CAAC,GAAG,KAAK,2BAAU,CAAC,SAAS;YAChC,GAAG,CAAC,GAAG,KAAK,2BAAU,CAAC,SAAS,EAChC;YACA,MAAM,GAAG,QAAQ,GAAG,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SAC5C;aAAM,IACL,GAAG,CAAC,GAAG,KAAK,2BAAU,CAAC,UAAU;YACjC,GAAG,CAAC,GAAG,KAAK,2BAAU,CAAC,OAAO,EAC9B;YACA,MAAM,GAAG,QAAQ,GAAG,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SAC5C;aAAM,IAAI,GAAG,CAAC,GAAG,KAAK,2BAAU,CAAC,QAAQ,EAAE;YAC1C,MAAM,GAAG,QAAQ,GAAG,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;SAC9C;aAAM,IAAI,GAAG,CAAC,GAAG,KAAK,2BAAU,CAAC,MAAM,EAAE;YACxC,MAAM,GAAG,QAAQ,GAAG,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;SAC9C;aAAM,IAAI,GAAG,CAAC,GAAG,KAAK,2BAAU,CAAC,IAAI,EAAE;YACtC,MAAM,GAAG,CAAC,CAAC;SACZ;aAAM;YACL,uBAAuB;YACvB,IAAI,GAAG,CAAC,GAAG,KAAK,2BAAU,CAAC,GAAG,EAAE;gBAC9B,MAAM,GAAG,GAAG,CAAC;aACd;SACF;QAED,uBAAuB;QACvB,IAAI,SAAS,KAAK,MAAM,EAAE;YACxB,qBAAqB;YACrB,IAAI,MAAM,GAAG,GAAG;gBAAE,MAAM,GAAG,GAAG,CAAC,CAAC,sBAAsB;YACtD,qBAAqB;YACrB,IAAI,MAAM,GAAG,CAAC;gBAAE,MAAM,GAAG,CAAC,CAAC;YAE3B,MAAM,QAAQ,GAAG,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;YACnC,uBAAuB;YACvB,IAAI,WAAW;gBAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;YACvC,GAAG,CAAC,cAAc,EAAE,CAAC;SACtB;IACH,CAAC,EACD,CAAC,GAAG,EAAE,WAAW,CAAC,CACnB,CAAC;IAEF,MAAM,gBAAgB,GAAG,IAAA,oBAAU,EACjC,YAAY;QACV,CAAC,CAAC,qCAAqC;QACvC,CAAC,CAAC,mCAAmC,EACvC,SAAS,CACV,CAAC;IAEF,MAAM,YAAY,GAAwB,YAAY;QACpD,CAAC,CAAC;YACE,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG;YAC/B,eAAe,EAAE,OAAO,GAAG,CAAC,CAAC,cAAc;SAC5C;QACH,CAAC,CAAC;YACE,IAAI,EAAE,KAAK;YACX,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG;YACvC,eAAe,EAAE,OAAO,GAAG,CAAC,CAAC,cAAc;SAC5C,CAAC;IAEN,OAAO,CACL,6BAAK,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,KAAK,iBAAc,eAAe;QACzE,4CACc,YAAY,EACxB,IAAI,EAAC,QAAQ,gBACD,QAAQ,mBACL,CAAC,mBACD,GAAG,mBACH,GAAG,CAAC,CAAC,EACpB,SAAS,EAAC,uBAAuB,EACjC,GAAG,EAAE,SAAS,EACd,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,UAAU,EACvB,WAAW,EAAE,UAAU,EACvB,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,SAAS;YAEpB,6BACE,KAAK,EAAE,YAAY,EACnB,SAAS,EAAC,wBAAwB,iBACtB,aAAa,GACzB,CACE,CACF,CACP,CAAC;AACJ,CAAC;AAhMD,8BAgMC","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 \"./HueSlider.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { HSVColor } from \"@itwin/core-common\";\nimport { SpecialKey } from \"@itwin/appui-abstract\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { UiIModelComponents } from \"../UiIModelComponents\";\n\n// hue is a value from 0 to 360\nfunction calculateHue(currentPos: number, high: number, isVertical: boolean) {\n  // istanbul ignore next\n  if (currentPos <= 0) {\n    return isVertical ? 359 : 0;\n  } else if (currentPos >= high) {\n    return isVertical ? 0 : 359;\n  } else {\n    let percent = (currentPos * 100) / high;\n    if (isVertical) percent = 100 - percent;\n    return Math.round((359 * percent) / 100);\n  }\n}\n\nfunction calculateChange(\n  currentHue: number,\n  e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  isHorizontal: boolean,\n  container: HTMLDivElement\n) {\n  const {\n    width: containerWidth,\n    height: containerHeight,\n    top: containerTop,\n    left: containerLeft,\n  } = container.getBoundingClientRect();\n\n  let x: number | undefined;\n  if (\"pageX\" in e) {\n    x = e.pageX;\n  } else {\n    // istanbul ignore if\n    if (undefined === e.touches || 0 === e.touches.length) return currentHue;\n    x = e.touches[0].pageX;\n  }\n  // istanbul ignore if\n  if (undefined === x) return currentHue;\n\n  let y: number | undefined;\n  if (\"pageY\" in e) {\n    y = e.pageY;\n  } else {\n    // istanbul ignore if\n    if (undefined === e.touches || 0 === e.touches.length) return currentHue;\n    y = e.touches[0].pageY;\n  }\n  // istanbul ignore if\n  if (undefined === y) return currentHue;\n\n  const pointerX = x - (containerLeft + window.scrollX);\n  const pointerY = y - (containerTop + window.scrollY);\n\n  if (!isHorizontal) {\n    // vertical\n    return calculateHue(pointerY, containerHeight, true);\n  } else {\n    // horizontal\n    return calculateHue(pointerX, containerWidth, false);\n  }\n}\n\n/** Properties for the [[HueSlider]] React component\n * @beta\n */\nexport interface HueSliderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    CommonProps {\n  /** true if slider is oriented horizontal, else vertical orientation is assumed */\n  isHorizontal?: boolean;\n  /** function to run when user hue is changed */\n  onHueChange?: ((hue: HSVColor) => void) | undefined;\n  /** HSV Color Value */\n  hsv: HSVColor;\n}\n\n/** HueSlider component used to set the hue value.\n * @beta\n */\nexport function HueSlider({\n  isHorizontal,\n  onHueChange,\n  hsv,\n  className,\n  style,\n}: HueSliderProps) {\n  const container = React.useRef<HTMLDivElement>(null);\n  const [hueLabel] = React.useState(() =>\n    UiIModelComponents.translate(\"color.hue\")\n  );\n  const isDragging = React.useRef(false);\n\n  const onChange = React.useCallback(\n    (\n      e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>\n    ) => {\n      // istanbul ignore else\n      if (container.current) {\n        const newHue = calculateChange(\n          hsv.h,\n          e,\n          !!isHorizontal,\n          container.current\n        );\n        // istanbul ignore else\n        const newColor = hsv.clone(newHue);\n        // istanbul ignore else\n        if (onHueChange) onHueChange(newColor);\n      }\n    },\n    [isHorizontal, hsv, onHueChange]\n  );\n\n  const onDragging = React.useCallback(\n    (\n      e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>\n    ) => {\n      // istanbul ignore else\n      if (isDragging.current) {\n        onChange(e);\n      }\n    },\n    [onChange]\n  );\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(\n    (event: React.TouchEvent<HTMLDivElement>) => {\n      event.preventDefault();\n\n      // istanbul ignore else\n      if (isDragging.current) {\n        onChange(event);\n        isDragging.current = false;\n      }\n    },\n    [onChange]\n  );\n\n  const onMouseDown = React.useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      e.preventDefault();\n\n      // istanbul ignore else\n      if (e.target !== e.currentTarget) {\n        // istanbul ignore else\n        if (!isDragging.current) {\n          document.addEventListener(\"mouseup\", onMouseUp, {\n            capture: true,\n            once: true,\n          });\n          isDragging.current = true;\n        }\n      }\n\n      onChange(e);\n\n      // istanbul ignore else\n      if (container.current) container.current.focus();\n    },\n    [onChange, onMouseUp]\n  );\n\n  const onTouchStart = React.useCallback(\n    (e: React.TouchEvent<HTMLDivElement>) => {\n      // istanbul ignore else\n      if (e.target !== e.currentTarget) isDragging.current = true;\n\n      onChange(e);\n\n      // istanbul ignore else\n      if (container.current) container.current.focus();\n    },\n    [onChange]\n  );\n\n  const onKeyDown = React.useCallback(\n    (evt: React.KeyboardEvent<HTMLDivElement>) => {\n      let newHue: number | undefined;\n      const hueValue = hsv.h;\n      if (\n        evt.key === SpecialKey.ArrowLeft ||\n        evt.key === SpecialKey.ArrowDown\n      ) {\n        newHue = hueValue - (evt.ctrlKey ? 10 : 1);\n      } else if (\n        evt.key === SpecialKey.ArrowRight ||\n        evt.key === SpecialKey.ArrowUp\n      ) {\n        newHue = hueValue + (evt.ctrlKey ? 10 : 1);\n      } else if (evt.key === SpecialKey.PageDown) {\n        newHue = hueValue - (evt.ctrlKey ? 180 : 60);\n      } else if (evt.key === SpecialKey.PageUp) {\n        newHue = hueValue + (evt.ctrlKey ? 180 : 60);\n      } else if (evt.key === SpecialKey.Home) {\n        newHue = 0;\n      } else {\n        // istanbul ignore else\n        if (evt.key === SpecialKey.End) {\n          newHue = 359;\n        }\n      }\n\n      // istanbul ignore else\n      if (undefined !== newHue) {\n        // istanbul ignore if\n        if (newHue > 359) newHue = 359; // 360 is same as zero\n        // istanbul ignore if\n        if (newHue < 0) newHue = 0;\n\n        const newColor = hsv.clone(newHue);\n        // istanbul ignore else\n        if (onHueChange) onHueChange(newColor);\n        evt.preventDefault();\n      }\n    },\n    [hsv, onHueChange]\n  );\n\n  const containerClasses = classnames(\n    isHorizontal\n      ? \"components-hue-container-horizontal\"\n      : \"components-hue-container-vertical\",\n    className\n  );\n\n  const pointerStyle: React.CSSProperties = isHorizontal\n    ? {\n        left: `${(hsv.h * 100) / 360}%`,\n        backgroundColor: `hsl(${hsv.h} ,100%, 50%)`,\n      }\n    : {\n        left: `0px`,\n        top: `${-((hsv.h * 100) / 360) + 100}%`,\n        backgroundColor: `hsl(${hsv.h} ,100%, 50%)`,\n      };\n\n  return (\n    <div className={containerClasses} style={style} data-testid=\"hue-container\">\n      <div\n        data-testid=\"hue-slider\"\n        role=\"slider\"\n        aria-label={hueLabel}\n        aria-valuemin={0}\n        aria-valuemax={360}\n        aria-valuenow={hsv.h}\n        className=\"components-hue-slider\"\n        ref={container}\n        onMouseDown={onMouseDown}\n        onMouseMove={onDragging}\n        onTouchMove={onDragging}\n        onMouseUp={onMouseUp}\n        onTouchStart={onTouchStart}\n        onTouchEnd={onTouchEnd}\n        tabIndex={0}\n        onKeyDown={onKeyDown}\n      >\n        <div\n          style={pointerStyle}\n          className=\"components-hue-pointer\"\n          data-testid=\"hue-pointer\"\n        />\n      </div>\n    </div>\n  );\n}\n"]}

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

@@ -1,7 +1,7 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * 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;
@@ -17,7 +17,7 @@
 
 .components-hue-container-horizontal {
   width: 100%;
-  height: .5em;
+  height: 0.5em;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -27,18 +27,27 @@
     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%);
+    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);
+    transform: translate(-0.6em, -0.45em);
     cursor: pointer;
     border: 1px solid #fff;
   }
 }
 
 .components-hue-container-vertical {
-  width: .5em;
+  width: 0.5em;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -49,12 +58,20 @@
     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%);
+    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);
+    transform: translate(-0.45em, -0.6em);
     cursor: pointer;
     border: 1px solid #fff;
   }

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

@@ -17,5 +17,5 @@ export interface SaturationPickerProps extends React.HTMLAttributes<HTMLDivEleme
 /** SaturationPicker component used to set the saturation value.
  * @beta
  */
-export declare function SaturationPicker({ onSaturationChange, hsv, className, style }: SaturationPickerProps): JSX.Element;
+export declare function SaturationPicker({ onSaturationChange, hsv, className, style, }: SaturationPickerProps): JSX.Element;
 //# sourceMappingURL=SaturationPicker.d.ts.map

package/lib/cjs/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,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"}
+{"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,qBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,WAAW;IACb,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,EAC/B,kBAAkB,EAClB,GAAG,EACH,SAAS,EACT,KAAK,GACN,EAAE,qBAAqB,eA+KvB"}

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

@@ -1,8 +1,8 @@
 "use strict";
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * 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
  */
@@ -41,7 +41,7 @@ const core_common_1 = require("@itwin/core-common");
 const appui_abstract_1 = require("@itwin/appui-abstract");
 const UiIModelComponents_1 = require("../UiIModelComponents");
 function calculateChange(e, hsv, container) {
-    const { width: containerWidth, height: containerHeight, top: containerTop, left: containerLeft } = container.getBoundingClientRect();
+    const { width: containerWidth, height: containerHeight, top: containerTop, left: containerLeft, } = container.getBoundingClientRect();
     let x;
     if ("pageX" in e) {
         x = e.pageX;
@@ -100,7 +100,7 @@ function calculateChange(e, hsv, container) {
 /** SaturationPicker component used to set the saturation value.
  * @beta
  */
-function SaturationPicker({ onSaturationChange, hsv, className, style }) {
+function SaturationPicker({ onSaturationChange, hsv, className, style, }) {
     const container = React.useRef(null);
     const [saturationLabel] = React.useState(() => UiIModelComponents_1.UiIModelComponents.translate("color.saturation"));
     const isDragging = React.useRef(false);
@@ -139,7 +139,10 @@ function SaturationPicker({ onSaturationChange, hsv, className, style }) {
         // istanbul ignore else
         if (e.target !== e.currentTarget) {
             isDragging.current = true;
-            document.addEventListener("mouseup", onMouseUp, { capture: true, once: true });
+            document.addEventListener("mouseup", onMouseUp, {
+                capture: true,
+                once: true,
+            });
         }
         onChange(e);
         // istanbul ignore else
@@ -160,16 +163,16 @@ function SaturationPicker({ onSaturationChange, hsv, className, style }) {
         const h = hsv.h;
         let { s, v } = { ...hsv };
         if (evt.key === appui_abstract_1.SpecialKey.ArrowLeft) {
-            s -= (evt.ctrlKey ? 10 : 1);
+            s -= evt.ctrlKey ? 10 : 1;
         }
         else if (evt.key === appui_abstract_1.SpecialKey.ArrowDown) {
-            v -= (evt.ctrlKey ? 10 : 1);
+            v -= evt.ctrlKey ? 10 : 1;
         }
         else if (evt.key === appui_abstract_1.SpecialKey.ArrowRight) {
-            s += (evt.ctrlKey ? 10 : 1);
+            s += evt.ctrlKey ? 10 : 1;
         }
         else if (evt.key === appui_abstract_1.SpecialKey.ArrowUp) {
-            v += (evt.ctrlKey ? 10 : 1);
+            v += evt.ctrlKey ? 10 : 1;
         }
         else if (evt.key === appui_abstract_1.SpecialKey.PageDown) {
             v = 0;
@@ -206,7 +209,7 @@ function SaturationPicker({ onSaturationChange, hsv, className, style }) {
     }, [hsv, onSaturationChange]);
     const pointerStyle = React.useMemo(() => ({
         left: `${hsv.s}%`,
-        top: `${-(hsv.v) + 100}%`,
+        top: `${-hsv.v + 100}%`,
         backgroundColor: `${core_common_1.ColorDef.fromHSV(hsv).toRgbString()}`,
     }), [hsv]);
     const colorStyle = React.useMemo(() => ({ backgroundColor: `hsl(${hsv.h} ,100%, 50%)` }), [hsv]);

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 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"]}
+{"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(\n  e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  hsv: HSVColor,\n  container: HTMLDivElement\n): HSVColor | undefined {\n  const {\n    width: containerWidth,\n    height: containerHeight,\n    top: containerTop,\n    left: containerLeft,\n  } = 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) x = e.touches[0].pageX;\n  }\n  // istanbul ignore if\n  if (undefined === x) 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) y = e.touches[0].pageY;\n  }\n  // istanbul ignore if\n  if (undefined === y) 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) saturation = 0;\n  // istanbul ignore if\n  if (saturation > 100) saturation = 100;\n  // istanbul ignore if\n  if (value < 0) value = 0;\n  // istanbul ignore if\n  if (value > 100) 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\n  extends React.HTMLAttributes<HTMLDivElement>,\n    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({\n  onSaturationChange,\n  hsv,\n  className,\n  style,\n}: SaturationPickerProps) {\n  const container = React.useRef<HTMLDivElement>(null);\n  const [saturationLabel] = React.useState(() =>\n    UiIModelComponents.translate(\"color.saturation\")\n  );\n  const isDragging = React.useRef(false);\n\n  const onChange = React.useCallback(\n    (\n      e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>\n    ) => {\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) onSaturationChange(newHsvColor);\n        }\n      }\n    },\n    [hsv, onSaturationChange]\n  );\n\n  const onDragging = React.useCallback(\n    (\n      e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>\n    ) => {\n      // istanbul ignore else\n      if (isDragging.current) {\n        onChange(e);\n      }\n    },\n    [onChange]\n  );\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(\n    (event: React.TouchEvent<HTMLDivElement>) => {\n      // istanbul ignore else\n      if (isDragging.current) {\n        onChange(event);\n        isDragging.current = false;\n      }\n    },\n    [onChange]\n  );\n\n  const onMouseDown = React.useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      // istanbul ignore else\n      if (e.target !== e.currentTarget) {\n        isDragging.current = true;\n        document.addEventListener(\"mouseup\", onMouseUp, {\n          capture: true,\n          once: true,\n        });\n      }\n\n      onChange(e);\n\n      // istanbul ignore else\n      if (container.current) container.current.focus();\n\n      e.preventDefault();\n    },\n    [onChange, onMouseUp]\n  );\n\n  const onTouchStart = React.useCallback(\n    (e: React.TouchEvent<HTMLDivElement>) => {\n      // istanbul ignore else\n      if (e.target !== e.currentTarget) isDragging.current = true;\n\n      onChange(e);\n\n      // istanbul ignore else\n      if (container.current) container.current.focus();\n    },\n    [onChange]\n  );\n\n  const onKeyDown = React.useCallback(\n    (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) s = 0;\n      // istanbul ignore if\n      if (s > 100) s = 100;\n      // istanbul ignore if\n      if (v < 0) v = 0;\n      // istanbul ignore if\n      if (v > 100) v = 100;\n\n      const newColor = new HSVColor(h, s, v);\n      // istanbul ignore else\n      if (onSaturationChange) onSaturationChange(newColor);\n\n      evt.preventDefault();\n    },\n    [hsv, onSaturationChange]\n  );\n\n  const pointerStyle: React.CSSProperties = React.useMemo(\n    () => ({\n      left: `${hsv.s}%`,\n      top: `${-hsv.v + 100}%`,\n      backgroundColor: `${ColorDef.fromHSV(hsv).toRgbString()}`,\n    }),\n    [hsv]\n  );\n\n  const colorStyle: React.CSSProperties = React.useMemo(\n    () => ({ backgroundColor: `hsl(${hsv.h} ,100%, 50%)` }),\n    [hsv]\n  );\n\n  return (\n    <div\n      className={classnames(\"components-saturation-container\", className)}\n      style={style}\n      data-testid=\"saturation-container\"\n    >\n      <div\n        data-testid=\"saturation-region\"\n        role=\"slider\"\n        aria-label={saturationLabel}\n        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\n          style={pointerStyle}\n          className=\"components-saturation-pointer\"\n          data-testid=\"saturation-pointer\"\n        />\n      </div>\n    </div>\n  );\n}\n"]}

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

@@ -1,7 +1,7 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * 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%;
@@ -13,7 +13,8 @@
     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-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;
 

package/lib/cjs/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,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"}
+{"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,gBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,WAAW;IACb,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,eAiClD"}

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

@@ -1,8 +1,8 @@
 "use strict";
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * 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
  */
@@ -53,13 +53,10 @@ function ColorSwatch(props) {
             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
+    const { onColorPick, colorDef, round, // do not pass on color swatch specific props
     ...otherProps // pass-through props
      } = props;
-    return React.createElement("button", { ...otherProps, style: colorStyle, className: classes, onClick: handleClick });
+    return (React.createElement("button", { ...otherProps, style: colorStyle, className: classes, onClick: handleClick }));
 }
 exports.ColorSwatch = ColorSwatch;
 //# sourceMappingURL=Swatch.js.map