@itwin/imodel-components-react 3.5.0-dev.27 → 3.5.0-dev.28

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;
+  }
+}

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

@@ -1,21 +1,21 @@
-/** @packageDocumentation
- * @module Color
- */
-import "./SaturationPicker.scss";
-import * as React from "react";
-import { HSVColor } from "@itwin/core-common";
-import { CommonProps } from "@itwin/core-react";
-/** Properties for the [[SaturationPicker]] React component
- * @beta
- */
-export interface SaturationPickerProps extends React.HTMLAttributes<HTMLDivElement>, CommonProps {
-    /** function to run when user selects location in saturation region */
-    onSaturationChange?: ((saturation: HSVColor) => void) | undefined;
-    /** HSV Color Value */
-    hsv: HSVColor;
-}
-/** SaturationPicker component used to set the saturation value.
- * @beta
- */
-export declare function SaturationPicker({ onSaturationChange, hsv, className, style }: SaturationPickerProps): JSX.Element;
+/** @packageDocumentation
+ * @module Color
+ */
+import "./SaturationPicker.scss";
+import * as React from "react";
+import { HSVColor } from "@itwin/core-common";
+import { CommonProps } from "@itwin/core-react";
+/** Properties for the [[SaturationPicker]] React component
+ * @beta
+ */
+export interface SaturationPickerProps extends React.HTMLAttributes<HTMLDivElement>, CommonProps {
+    /** function to run when user selects location in saturation region */
+    onSaturationChange?: ((saturation: HSVColor) => void) | undefined;
+    /** HSV Color Value */
+    hsv: HSVColor;
+}
+/** SaturationPicker component used to set the saturation value.
+ * @beta
+ */
+export declare function SaturationPicker({ onSaturationChange, hsv, className, style }: SaturationPickerProps): JSX.Element;
 //# sourceMappingURL=SaturationPicker.d.ts.map

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

@@ -1,214 +1,214 @@
-"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.SaturationPicker = void 0;
-require("./SaturationPicker.scss");
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-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();
-    let x;
-    if ("pageX" in e) {
-        x = e.pageX;
-    }
-    else {
-        // istanbul ignore next
-        if (undefined !== e.touches && e.touches.length)
-            x = e.touches[0].pageX;
-    }
-    // istanbul ignore if
-    if (undefined === x)
-        return hsv;
-    let y = 0;
-    if ("pageY" in e) {
-        y = e.pageY;
-    }
-    else {
-        // istanbul ignore next
-        if (undefined !== e.touches && e.touches.length)
-            y = e.touches[0].pageY;
-    }
-    // istanbul ignore if
-    if (undefined === y)
-        return hsv;
-    let left = x - (containerLeft + window.scrollX);
-    let top = y - (containerTop + window.scrollY);
-    // istanbul ignore next
-    if (left < 0) {
-        left = 0;
-    }
-    else if (left > containerWidth) {
-        left = containerWidth;
-    }
-    else if (top < 0) {
-        top = 0;
-    }
-    else if (top > containerHeight) {
-        top = containerHeight;
-    }
-    let saturation = Math.round((left * 100) / containerWidth);
-    let value = Math.round(-((top * 100) / containerHeight) + 100);
-    // istanbul ignore if
-    if (saturation < 0)
-        saturation = 0;
-    // istanbul ignore if
-    if (saturation > 100)
-        saturation = 100;
-    // istanbul ignore if
-    if (value < 0)
-        value = 0;
-    // istanbul ignore if
-    if (value > 100)
-        value = 100;
-    return hsv.clone(hsv.h, saturation, value);
-}
-/** SaturationPicker component used to set the saturation value.
- * @beta
- */
-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);
-    const onChange = React.useCallback((e) => {
-        // istanbul ignore else
-        if (container.current) {
-            const newHsvColor = calculateChange(e, hsv, container.current);
-            // istanbul ignore else
-            if (newHsvColor) {
-                // istanbul ignore else
-                if (onSaturationChange)
-                    onSaturationChange(newHsvColor);
-            }
-        }
-    }, [hsv, onSaturationChange]);
-    const onDragging = React.useCallback((e) => {
-        // istanbul ignore else
-        if (isDragging.current) {
-            onChange(e);
-        }
-    }, [onChange]);
-    const onMouseUp = React.useCallback(() => {
-        // istanbul ignore else
-        if (isDragging.current) {
-            isDragging.current = false;
-        }
-    }, []);
-    const onTouchEnd = React.useCallback((event) => {
-        // istanbul ignore else
-        if (isDragging.current) {
-            onChange(event);
-            isDragging.current = false;
-        }
-    }, [onChange]);
-    const onMouseDown = React.useCallback((e) => {
-        // istanbul ignore else
-        if (e.target !== e.currentTarget) {
-            isDragging.current = true;
-            document.addEventListener("mouseup", onMouseUp, { capture: true, once: true });
-        }
-        onChange(e);
-        // istanbul ignore else
-        if (container.current)
-            container.current.focus();
-        e.preventDefault();
-    }, [onChange, onMouseUp]);
-    const onTouchStart = React.useCallback((e) => {
-        // istanbul ignore else
-        if (e.target !== e.currentTarget)
-            isDragging.current = true;
-        onChange(e);
-        // istanbul ignore else
-        if (container.current)
-            container.current.focus();
-    }, [onChange]);
-    const onKeyDown = React.useCallback((evt) => {
-        const h = hsv.h;
-        let { s, v } = { ...hsv };
-        if (evt.key === appui_abstract_1.SpecialKey.ArrowLeft) {
-            s -= (evt.ctrlKey ? 10 : 1);
-        }
-        else if (evt.key === appui_abstract_1.SpecialKey.ArrowDown) {
-            v -= (evt.ctrlKey ? 10 : 1);
-        }
-        else if (evt.key === appui_abstract_1.SpecialKey.ArrowRight) {
-            s += (evt.ctrlKey ? 10 : 1);
-        }
-        else if (evt.key === appui_abstract_1.SpecialKey.ArrowUp) {
-            v += (evt.ctrlKey ? 10 : 1);
-        }
-        else if (evt.key === appui_abstract_1.SpecialKey.PageDown) {
-            v = 0;
-        }
-        else if (evt.key === appui_abstract_1.SpecialKey.PageUp) {
-            v = 100;
-        }
-        else if (evt.key === appui_abstract_1.SpecialKey.Home) {
-            s = 0;
-        }
-        else {
-            // istanbul ignore else
-            if (evt.key === appui_abstract_1.SpecialKey.End) {
-                s = 100;
-            }
-        }
-        // istanbul ignore if
-        if (s < 0)
-            s = 0;
-        // istanbul ignore if
-        if (s > 100)
-            s = 100;
-        // istanbul ignore if
-        if (v < 0)
-            v = 0;
-        // istanbul ignore if
-        if (v > 100)
-            v = 100;
-        const newColor = new core_common_1.HSVColor(h, s, v);
-        // istanbul ignore else
-        if (onSaturationChange)
-            onSaturationChange(newColor);
-        evt.preventDefault();
-    }, [hsv, onSaturationChange]);
-    const pointerStyle = React.useMemo(() => ({
-        left: `${hsv.s}%`,
-        top: `${-(hsv.v) + 100}%`,
-        backgroundColor: `${core_common_1.ColorDef.fromHSV(hsv).toRgbString()}`,
-    }), [hsv]);
-    const colorStyle = React.useMemo(() => ({ backgroundColor: `hsl(${hsv.h} ,100%, 50%)` }), [hsv]);
-    return (React.createElement("div", { className: (0, classnames_1.default)("components-saturation-container", className), style: style, "data-testid": "saturation-container" },
-        React.createElement("div", { "data-testid": "saturation-region", role: "slider", "aria-label": saturationLabel, "aria-valuenow": hsv.s, style: colorStyle, className: "components-saturation-region", ref: container, onMouseDown: onMouseDown, onMouseMove: onDragging, onTouchMove: onDragging, onTouchStart: onTouchStart, onTouchEnd: onTouchEnd, tabIndex: 0, onKeyDown: onKeyDown },
-            React.createElement("div", { style: pointerStyle, className: "components-saturation-pointer", "data-testid": "saturation-pointer" }))));
-}
-exports.SaturationPicker = SaturationPicker;
+"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.SaturationPicker = void 0;
+require("./SaturationPicker.scss");
+const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
+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();
+    let x;
+    if ("pageX" in e) {
+        x = e.pageX;
+    }
+    else {
+        // istanbul ignore next
+        if (undefined !== e.touches && e.touches.length)
+            x = e.touches[0].pageX;
+    }
+    // istanbul ignore if
+    if (undefined === x)
+        return hsv;
+    let y = 0;
+    if ("pageY" in e) {
+        y = e.pageY;
+    }
+    else {
+        // istanbul ignore next
+        if (undefined !== e.touches && e.touches.length)
+            y = e.touches[0].pageY;
+    }
+    // istanbul ignore if
+    if (undefined === y)
+        return hsv;
+    let left = x - (containerLeft + window.scrollX);
+    let top = y - (containerTop + window.scrollY);
+    // istanbul ignore next
+    if (left < 0) {
+        left = 0;
+    }
+    else if (left > containerWidth) {
+        left = containerWidth;
+    }
+    else if (top < 0) {
+        top = 0;
+    }
+    else if (top > containerHeight) {
+        top = containerHeight;
+    }
+    let saturation = Math.round((left * 100) / containerWidth);
+    let value = Math.round(-((top * 100) / containerHeight) + 100);
+    // istanbul ignore if
+    if (saturation < 0)
+        saturation = 0;
+    // istanbul ignore if
+    if (saturation > 100)
+        saturation = 100;
+    // istanbul ignore if
+    if (value < 0)
+        value = 0;
+    // istanbul ignore if
+    if (value > 100)
+        value = 100;
+    return hsv.clone(hsv.h, saturation, value);
+}
+/** SaturationPicker component used to set the saturation value.
+ * @beta
+ */
+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);
+    const onChange = React.useCallback((e) => {
+        // istanbul ignore else
+        if (container.current) {
+            const newHsvColor = calculateChange(e, hsv, container.current);
+            // istanbul ignore else
+            if (newHsvColor) {
+                // istanbul ignore else
+                if (onSaturationChange)
+                    onSaturationChange(newHsvColor);
+            }
+        }
+    }, [hsv, onSaturationChange]);
+    const onDragging = React.useCallback((e) => {
+        // istanbul ignore else
+        if (isDragging.current) {
+            onChange(e);
+        }
+    }, [onChange]);
+    const onMouseUp = React.useCallback(() => {
+        // istanbul ignore else
+        if (isDragging.current) {
+            isDragging.current = false;
+        }
+    }, []);
+    const onTouchEnd = React.useCallback((event) => {
+        // istanbul ignore else
+        if (isDragging.current) {
+            onChange(event);
+            isDragging.current = false;
+        }
+    }, [onChange]);
+    const onMouseDown = React.useCallback((e) => {
+        // istanbul ignore else
+        if (e.target !== e.currentTarget) {
+            isDragging.current = true;
+            document.addEventListener("mouseup", onMouseUp, { capture: true, once: true });
+        }
+        onChange(e);
+        // istanbul ignore else
+        if (container.current)
+            container.current.focus();
+        e.preventDefault();
+    }, [onChange, onMouseUp]);
+    const onTouchStart = React.useCallback((e) => {
+        // istanbul ignore else
+        if (e.target !== e.currentTarget)
+            isDragging.current = true;
+        onChange(e);
+        // istanbul ignore else
+        if (container.current)
+            container.current.focus();
+    }, [onChange]);
+    const onKeyDown = React.useCallback((evt) => {
+        const h = hsv.h;
+        let { s, v } = { ...hsv };
+        if (evt.key === appui_abstract_1.SpecialKey.ArrowLeft) {
+            s -= (evt.ctrlKey ? 10 : 1);
+        }
+        else if (evt.key === appui_abstract_1.SpecialKey.ArrowDown) {
+            v -= (evt.ctrlKey ? 10 : 1);
+        }
+        else if (evt.key === appui_abstract_1.SpecialKey.ArrowRight) {
+            s += (evt.ctrlKey ? 10 : 1);
+        }
+        else if (evt.key === appui_abstract_1.SpecialKey.ArrowUp) {
+            v += (evt.ctrlKey ? 10 : 1);
+        }
+        else if (evt.key === appui_abstract_1.SpecialKey.PageDown) {
+            v = 0;
+        }
+        else if (evt.key === appui_abstract_1.SpecialKey.PageUp) {
+            v = 100;
+        }
+        else if (evt.key === appui_abstract_1.SpecialKey.Home) {
+            s = 0;
+        }
+        else {
+            // istanbul ignore else
+            if (evt.key === appui_abstract_1.SpecialKey.End) {
+                s = 100;
+            }
+        }
+        // istanbul ignore if
+        if (s < 0)
+            s = 0;
+        // istanbul ignore if
+        if (s > 100)
+            s = 100;
+        // istanbul ignore if
+        if (v < 0)
+            v = 0;
+        // istanbul ignore if
+        if (v > 100)
+            v = 100;
+        const newColor = new core_common_1.HSVColor(h, s, v);
+        // istanbul ignore else
+        if (onSaturationChange)
+            onSaturationChange(newColor);
+        evt.preventDefault();
+    }, [hsv, onSaturationChange]);
+    const pointerStyle = React.useMemo(() => ({
+        left: `${hsv.s}%`,
+        top: `${-(hsv.v) + 100}%`,
+        backgroundColor: `${core_common_1.ColorDef.fromHSV(hsv).toRgbString()}`,
+    }), [hsv]);
+    const colorStyle = React.useMemo(() => ({ backgroundColor: `hsl(${hsv.h} ,100%, 50%)` }), [hsv]);
+    return (React.createElement("div", { className: (0, classnames_1.default)("components-saturation-container", className), style: style, "data-testid": "saturation-container" },
+        React.createElement("div", { "data-testid": "saturation-region", role: "slider", "aria-label": saturationLabel, "aria-valuenow": hsv.s, style: colorStyle, className: "components-saturation-region", ref: container, onMouseDown: onMouseDown, onMouseMove: onDragging, onTouchMove: onDragging, onTouchStart: onTouchStart, onTouchEnd: onTouchEnd, tabIndex: 0, onKeyDown: onKeyDown },
+            React.createElement("div", { style: pointerStyle, className: "components-saturation-pointer", "data-testid": "saturation-pointer" }))));
+}
+exports.SaturationPicker = SaturationPicker;
 //# sourceMappingURL=SaturationPicker.js.map