@itwin/imodel-components-react 4.0.0-dev.11 → 4.0.0-dev.13

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

@@ -1,200 +1,204 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Color
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HueSlider = void 0;
-require("./HueSlider.scss");
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const UiIModelComponents_1 = require("../UiIModelComponents");
-// hue is a value from 0 to 360
-function calculateHue(currentPos, high, isVertical) {
-    // istanbul ignore next
-    if (currentPos <= 0) {
-        return isVertical ? 359 : 0;
-    }
-    else if (currentPos >= high) {
-        return isVertical ? 0 : 359;
-    }
-    else {
-        let percent = ((currentPos * 100) / high);
-        if (isVertical)
-            percent = 100 - percent;
-        return Math.round(((359 * percent) / 100));
-    }
-}
-function calculateChange(currentHue, e, isHorizontal, container) {
-    const { width: containerWidth, height: containerHeight, top: containerTop, left: containerLeft } = container.getBoundingClientRect();
-    let x;
-    if ("pageX" in e) {
-        x = e.pageX;
-    }
-    else {
-        // istanbul ignore if
-        if (undefined === e.touches || 0 === e.touches.length)
-            return currentHue;
-        x = e.touches[0].pageX;
-    }
-    // istanbul ignore if
-    if (undefined === x)
-        return currentHue;
-    let y;
-    if ("pageY" in e) {
-        y = e.pageY;
-    }
-    else {
-        // istanbul ignore if
-        if (undefined === e.touches || 0 === e.touches.length)
-            return currentHue;
-        y = e.touches[0].pageY;
-    }
-    // istanbul ignore if
-    if (undefined === y)
-        return currentHue;
-    const pointerX = x - (containerLeft + window.scrollX);
-    const pointerY = y - (containerTop + window.scrollY);
-    if (!isHorizontal) { // vertical
-        return calculateHue(pointerY, containerHeight, true);
-    }
-    else { // horizontal
-        return calculateHue(pointerX, containerWidth, false);
-    }
-}
-/** HueSlider component used to set the hue value.
- * @beta
- */
-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);
-    const onChange = React.useCallback((e) => {
-        // istanbul ignore else
-        if (container.current) {
-            const newHue = calculateChange(hsv.h, e, !!isHorizontal, container.current);
-            // istanbul ignore else
-            const newColor = hsv.clone(newHue);
-            // istanbul ignore else
-            if (onHueChange)
-                onHueChange(newColor);
-        }
-    }, [isHorizontal, hsv, onHueChange]);
-    const onDragging = React.useCallback((e) => {
-        // istanbul ignore else
-        if (isDragging.current) {
-            onChange(e);
-        }
-    }, [onChange]);
-    const onMouseUp = React.useCallback(() => {
-        // istanbul ignore else
-        if (isDragging.current) {
-            isDragging.current = false;
-        }
-    }, []);
-    const onTouchEnd = React.useCallback((event) => {
-        event.preventDefault();
-        // istanbul ignore else
-        if (isDragging.current) {
-            onChange(event);
-            isDragging.current = false;
-        }
-    }, [onChange]);
-    const onMouseDown = React.useCallback((e) => {
-        e.preventDefault();
-        // istanbul ignore else
-        if (e.target !== e.currentTarget) {
-            // istanbul ignore else
-            if (!isDragging.current) {
-                document.addEventListener("mouseup", onMouseUp, { capture: true, once: true });
-                isDragging.current = true;
-            }
-        }
-        onChange(e);
-        // istanbul ignore else
-        if (container.current)
-            container.current.focus();
-    }, [onChange, onMouseUp]);
-    const onTouchStart = React.useCallback((e) => {
-        // istanbul ignore else
-        if (e.target !== e.currentTarget)
-            isDragging.current = true;
-        onChange(e);
-        // istanbul ignore else
-        if (container.current)
-            container.current.focus();
-    }, [onChange]);
-    const onKeyDown = React.useCallback((evt) => {
-        let newHue;
-        const hueValue = hsv.h;
-        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) {
-            newHue = hueValue + (evt.ctrlKey ? 10 : 1);
-        }
-        else if (evt.key === appui_abstract_1.SpecialKey.PageDown) {
-            newHue = hueValue - (evt.ctrlKey ? 180 : 60);
-        }
-        else if (evt.key === appui_abstract_1.SpecialKey.PageUp) {
-            newHue = hueValue + (evt.ctrlKey ? 180 : 60);
-        }
-        else if (evt.key === appui_abstract_1.SpecialKey.Home) {
-            newHue = 0;
-        }
-        else {
-            // istanbul ignore else
-            if (evt.key === appui_abstract_1.SpecialKey.End) {
-                newHue = 359;
-            }
-        }
-        // istanbul ignore else
-        if (undefined !== newHue) {
-            // istanbul ignore if
-            if (newHue > 359)
-                newHue = 359; // 360 is same as zero
-            // istanbul ignore if
-            if (newHue < 0)
-                newHue = 0;
-            const newColor = hsv.clone(newHue);
-            // istanbul ignore else
-            if (onHueChange)
-                onHueChange(newColor);
-            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%)` };
-    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" }))));
-}
-exports.HueSlider = HueSlider;
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Color
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HueSlider = void 0;
+require("./HueSlider.scss");
+const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const UiIModelComponents_1 = require("../UiIModelComponents");
+// hue is a value from 0 to 360
+function calculateHue(currentPos, high, isVertical) {
+    // istanbul ignore next
+    if (currentPos <= 0) {
+        return isVertical ? 359 : 0;
+    }
+    else if (currentPos >= high) {
+        return isVertical ? 0 : 359;
+    }
+    else {
+        let percent = ((currentPos * 100) / high);
+        if (isVertical)
+            percent = 100 - percent;
+        return Math.round(((359 * percent) / 100));
+    }
+}
+function calculateChange(currentHue, e, isHorizontal, container) {
+    const { width: containerWidth, height: containerHeight, top: containerTop, left: containerLeft } = container.getBoundingClientRect();
+    let x;
+    if ("pageX" in e) {
+        x = e.pageX;
+    }
+    else {
+        // istanbul ignore if
+        if (undefined === e.touches || 0 === e.touches.length)
+            return currentHue;
+        x = e.touches[0].pageX;
+    }
+    // istanbul ignore if
+    if (undefined === x)
+        return currentHue;
+    let y;
+    if ("pageY" in e) {
+        y = e.pageY;
+    }
+    else {
+        // istanbul ignore if
+        if (undefined === e.touches || 0 === e.touches.length)
+            return currentHue;
+        y = e.touches[0].pageY;
+    }
+    // istanbul ignore if
+    if (undefined === y)
+        return currentHue;
+    const pointerX = x - (containerLeft + window.scrollX);
+    const pointerY = y - (containerTop + window.scrollY);
+    if (!isHorizontal) { // vertical
+        return calculateHue(pointerY, containerHeight, true);
+    }
+    else { // horizontal
+        return calculateHue(pointerX, containerWidth, false);
+    }
+}
+/** HueSlider component used to set the hue value.
+ * @beta
+ */
+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);
+    const onChange = React.useCallback((e) => {
+        // istanbul ignore else
+        if (container.current) {
+            const newHue = calculateChange(hsv.h, e, !!isHorizontal, container.current);
+            // istanbul ignore else
+            const newColor = hsv.clone(newHue);
+            // istanbul ignore else
+            if (onHueChange)
+                onHueChange(newColor);
+        }
+    }, [isHorizontal, hsv, onHueChange]);
+    const onDragging = React.useCallback((e) => {
+        // istanbul ignore else
+        if (isDragging.current) {
+            onChange(e);
+        }
+    }, [onChange]);
+    const onMouseUp = React.useCallback(() => {
+        // istanbul ignore else
+        if (isDragging.current) {
+            isDragging.current = false;
+        }
+    }, []);
+    const onTouchEnd = React.useCallback((event) => {
+        event.preventDefault();
+        // istanbul ignore else
+        if (isDragging.current) {
+            onChange(event);
+            isDragging.current = false;
+        }
+    }, [onChange]);
+    const onMouseDown = React.useCallback((e) => {
+        e.preventDefault();
+        // istanbul ignore else
+        if (e.target !== e.currentTarget) {
+            // istanbul ignore else
+            if (!isDragging.current) {
+                document.addEventListener("mouseup", onMouseUp, { capture: true, once: true });
+                isDragging.current = true;
+            }
+        }
+        onChange(e);
+        // istanbul ignore else
+        if (container.current)
+            container.current.focus();
+    }, [onChange, onMouseUp]);
+    const onTouchStart = React.useCallback((e) => {
+        // istanbul ignore else
+        if (e.target !== e.currentTarget)
+            isDragging.current = true;
+        onChange(e);
+        // istanbul ignore else
+        if (container.current)
+            container.current.focus();
+    }, [onChange]);
+    const onKeyDown = React.useCallback((evt) => {
+        let newHue;
+        const hueValue = hsv.h;
+        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) {
+            newHue = hueValue + (evt.ctrlKey ? 10 : 1);
+        }
+        else if (evt.key === appui_abstract_1.SpecialKey.PageDown) {
+            newHue = hueValue - (evt.ctrlKey ? 180 : 60);
+        }
+        else if (evt.key === appui_abstract_1.SpecialKey.PageUp) {
+            newHue = hueValue + (evt.ctrlKey ? 180 : 60);
+        }
+        else if (evt.key === appui_abstract_1.SpecialKey.Home) {
+            newHue = 0;
+        }
+        else {
+            // istanbul ignore else
+            if (evt.key === appui_abstract_1.SpecialKey.End) {
+                newHue = 359;
+            }
+        }
+        // istanbul ignore else
+        if (undefined !== newHue) {
+            // istanbul ignore if
+            if (newHue > 359)
+                newHue = 359; // 360 is same as zero
+            // istanbul ignore if
+            if (newHue < 0)
+                newHue = 0;
+            const newColor = hsv.clone(newHue);
+            // istanbul ignore else
+            if (onHueChange)
+                onHueChange(newColor);
+            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%)` };
+    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" }))));
+}
+exports.HueSlider = HueSlider;
 //# sourceMappingURL=HueSlider.js.map

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":["/*---------------------------------------------------------------------------------------------\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 \"./HueSlider.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { 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\n// hue is a value from 0 to 360\r\nfunction calculateHue(currentPos: number, high: number, isVertical: boolean) {\r\n  // istanbul ignore next\r\n  if (currentPos <= 0) {\r\n    return isVertical ? 359 : 0;\r\n  } else if (currentPos >= high) {\r\n    return isVertical ? 0 : 359;\r\n  } else {\r\n    let percent = ((currentPos * 100) / high);\r\n    if (isVertical)\r\n      percent = 100 - percent;\r\n    return Math.round(((359 * percent) / 100));\r\n  }\r\n}\r\n\r\nfunction calculateChange(currentHue: number, e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>, isHorizontal: boolean, container: HTMLDivElement) {\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 if\r\n    if (undefined === e.touches || 0 === e.touches.length)\r\n      return currentHue;\r\n    x = e.touches[0].pageX;\r\n  }\r\n  // istanbul ignore if\r\n  if (undefined === x)\r\n    return currentHue;\r\n\r\n  let y: number | undefined;\r\n  if (\"pageY\" in e) {\r\n    y = e.pageY;\r\n  } else {\r\n    // istanbul ignore if\r\n    if (undefined === e.touches || 0 === e.touches.length)\r\n      return currentHue;\r\n    y = e.touches[0].pageY;\r\n  }\r\n  // istanbul ignore if\r\n  if (undefined === y)\r\n    return currentHue;\r\n\r\n  const pointerX = x - (containerLeft + window.scrollX);\r\n  const pointerY = y - (containerTop + window.scrollY);\r\n\r\n  if (!isHorizontal) { // vertical\r\n    return calculateHue(pointerY, containerHeight, true);\r\n  } else {  // horizontal\r\n    return calculateHue(pointerX, containerWidth, false);\r\n  }\r\n}\r\n\r\n/** Properties for the [[HueSlider]] React component\r\n * @beta\r\n */\r\nexport interface HueSliderProps extends React.HTMLAttributes<HTMLDivElement>, CommonProps {\r\n  /** true if slider is oriented horizontal, else vertical orientation is assumed */\r\n  isHorizontal?: boolean;\r\n  /** function to run when user hue is changed */\r\n  onHueChange?: ((hue: HSVColor) => void) | undefined;\r\n  /** HSV Color Value */\r\n  hsv: HSVColor;\r\n}\r\n\r\n/** HueSlider component used to set the hue value.\r\n * @beta\r\n */\r\nexport function HueSlider({ isHorizontal, onHueChange, hsv, className, style }: HueSliderProps) {\r\n  const container = React.useRef<HTMLDivElement>(null);\r\n  const [hueLabel] = React.useState(() => UiIModelComponents.translate(\"color.hue\"));\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 newHue = calculateChange(hsv.h, e, !!isHorizontal, container.current);\r\n      // istanbul ignore else\r\n      const newColor = hsv.clone(newHue);\r\n      // istanbul ignore else\r\n      if (onHueChange)\r\n        onHueChange(newColor);\r\n    }\r\n  }, [isHorizontal, hsv, onHueChange]);\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    event.preventDefault();\r\n\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    e.preventDefault();\r\n\r\n    // istanbul ignore else\r\n    if (e.target !== e.currentTarget) {\r\n      // istanbul ignore else\r\n      if (!isDragging.current) {\r\n        document.addEventListener(\"mouseup\", onMouseUp, { capture: true, once: true });\r\n        isDragging.current = true;\r\n      }\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  }, [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    let newHue: number | undefined;\r\n    const hueValue = hsv.h;\r\n    if (evt.key === SpecialKey.ArrowLeft || evt.key === SpecialKey.ArrowDown) {\r\n      newHue = hueValue - (evt.ctrlKey ? 10 : 1);\r\n    } else if (evt.key === SpecialKey.ArrowRight || evt.key === SpecialKey.ArrowUp) {\r\n      newHue = hueValue + (evt.ctrlKey ? 10 : 1);\r\n    } else if (evt.key === SpecialKey.PageDown) {\r\n      newHue = hueValue - (evt.ctrlKey ? 180 : 60);\r\n    } else if (evt.key === SpecialKey.PageUp) {\r\n      newHue = hueValue + (evt.ctrlKey ? 180 : 60);\r\n    } else if (evt.key === SpecialKey.Home) {\r\n      newHue = 0;\r\n    } else {\r\n      // istanbul ignore else\r\n      if (evt.key === SpecialKey.End) {\r\n        newHue = 359;\r\n      }\r\n    }\r\n\r\n    // istanbul ignore else\r\n    if (undefined !== newHue) {\r\n      // istanbul ignore if\r\n      if (newHue > 359) newHue = 359; // 360 is same as zero\r\n      // istanbul ignore if\r\n      if (newHue < 0) newHue = 0;\r\n\r\n      const newColor = hsv.clone(newHue);\r\n      // istanbul ignore else\r\n      if (onHueChange)\r\n        onHueChange(newColor);\r\n      evt.preventDefault();\r\n    }\r\n  }, [hsv, onHueChange]);\r\n\r\n  const containerClasses = classnames(\r\n    isHorizontal ? \"components-hue-container-horizontal\" : \"components-hue-container-vertical\",\r\n    className,\r\n  );\r\n\r\n  const pointerStyle: React.CSSProperties = isHorizontal ? { left: `${(hsv.h * 100) / 360}%`, backgroundColor: `hsl(${hsv.h} ,100%, 50%)` } :\r\n    { left: `0px`, top: `${-((hsv.h * 100) / 360) + 100}%`, backgroundColor: `hsl(${hsv.h} ,100%, 50%)` };\r\n\r\n  return (\r\n    <div className={containerClasses} style={style} data-testid=\"hue-container\" >\r\n      <div\r\n        data-testid=\"hue-slider\"\r\n        role=\"slider\" aria-label={hueLabel}\r\n        aria-valuemin={0} aria-valuemax={360} aria-valuenow={hsv.h}\r\n        className=\"components-hue-slider\"\r\n        ref={container}\r\n        onMouseDown={onMouseDown}\r\n        onMouseMove={onDragging}\r\n        onTouchMove={onDragging}\r\n        onMouseUp={onMouseUp}\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-hue-pointer\" data-testid=\"hue-pointer\" />\r\n      </div>\r\n    </div >\r\n  );\r\n}\r\n"]}
+{"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 { HSVColor } from \"@itwin/core-common\";\nimport { SpecialKey } from \"@itwin/appui-abstract\";\nimport { 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"]}

package/lib/cjs/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;
+  }
+}