@itwin/imodel-components-react 3.4.0-dev.44 → 3.4.0-dev.47

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

@@ -1,187 +1,187 @@
-"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.AlphaSlider = void 0;
-require("./AlphaSlider.scss");
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const UiIModelComponents_1 = require("../UiIModelComponents");
-const appui_abstract_1 = require("@itwin/appui-abstract");
-/** AlphaSlider component used to set the alpha value.
- * @beta
- */
-class AlphaSlider extends React.PureComponent {
-    /** @internal */
-    constructor(props) {
-        super(props);
-        this._container = null;
-        this._transparencyLabel = UiIModelComponents_1.UiIModelComponents.translate("color.transparency");
-        this._calculateChange = (e, isHorizontal, alpha, container) => {
-            e.preventDefault();
-            const { width: containerWidth, height: containerHeight } = container.getBoundingClientRect();
-            let x = 0;
-            if ("pageX" in e) {
-                x = e.pageX;
-            }
-            else {
-                // istanbul ignore if
-                if (undefined === e.touches)
-                    return undefined;
-                x = e.touches[0].pageX;
-            }
-            // istanbul ignore if
-            if (undefined === x)
-                return undefined;
-            let y = 0;
-            if ("pageY" in e) {
-                y = e.pageY;
-            }
-            else {
-                // istanbul ignore if
-                if (undefined === e.touches)
-                    return;
-                y = e.touches[0].pageY;
-            }
-            // istanbul ignore if
-            if (undefined === y)
-                return undefined;
-            const left = x - (container.getBoundingClientRect().left + window.scrollX);
-            const top = y - (container.getBoundingClientRect().top + window.scrollY);
-            let t = 0;
-            if (!isHorizontal) {
-                // istanbul ignore next
-                if (top < 0) {
-                    t = 1;
-                }
-                else if (top > containerHeight) {
-                    t = 0;
-                }
-                else {
-                    t = 1 - (top / containerHeight);
-                }
-            }
-            else { // horizontal
-                // istanbul ignore next
-                if (left < 0) {
-                    t = 0;
-                }
-                else if (left > containerWidth) {
-                    t = 1;
-                }
-                else {
-                    t = left / containerWidth;
-                }
-            }
-            // istanbul ignore if
-            if (t < 0)
-                t = 0;
-            // istanbul ignore if
-            if (t > 1)
-                t = 1;
-            // istanbul ignore next
-            return (alpha !== t) ? t : undefined;
-        };
-        this._onChange = (e) => {
-            // istanbul ignore else
-            if (this._container && this.props.onAlphaChange) {
-                const change = this._calculateChange(e, this.props.isHorizontal ? this.props.isHorizontal : false, this.props.alpha, this._container);
-                undefined !== change && typeof this.props.onAlphaChange === "function" && this.props.onAlphaChange(change);
-            }
-        };
-        this._onMouseDown = (e) => {
-            this._onChange(e);
-            // istanbul ignore else
-            if (this._container)
-                this._container.focus();
-            window.addEventListener("mousemove", this._onChange);
-            window.addEventListener("mouseup", this._onMouseUp);
-        };
-        this._onKeyDown = (evt) => {
-            let newTransparency;
-            if (evt.key === appui_abstract_1.SpecialKey.ArrowLeft || evt.key === appui_abstract_1.SpecialKey.ArrowDown) {
-                newTransparency = this.props.alpha - (evt.ctrlKey ? .1 : .05);
-            }
-            else if (evt.key === appui_abstract_1.SpecialKey.ArrowRight || evt.key === appui_abstract_1.SpecialKey.ArrowUp) {
-                newTransparency = this.props.alpha + (evt.ctrlKey ? .1 : .05);
-            }
-            else if (evt.key === appui_abstract_1.SpecialKey.PageDown) {
-                newTransparency = this.props.alpha - (evt.ctrlKey ? .5 : .25);
-            }
-            else if (evt.key === appui_abstract_1.SpecialKey.PageUp) {
-                newTransparency = this.props.alpha + (evt.ctrlKey ? .5 : .25);
-            }
-            else if (evt.key === appui_abstract_1.SpecialKey.Home) {
-                newTransparency = 0;
-            }
-            else {
-                // istanbul ignore else
-                if (evt.key === appui_abstract_1.SpecialKey.End) {
-                    newTransparency = 1;
-                }
-            }
-            // istanbul ignore else
-            if (undefined !== newTransparency) {
-                // istanbul ignore if
-                if (newTransparency > 1)
-                    newTransparency = 1;
-                // istanbul ignore if
-                if (newTransparency < 0)
-                    newTransparency = 0;
-                // istanbul ignore else
-                if (this.props.onAlphaChange)
-                    this.props.onAlphaChange(newTransparency);
-            }
-        };
-        this._onMouseUp = () => {
-            this._unbindEventListeners();
-        };
-    }
-    /** @internal */
-    componentWillUnmount() {
-        this._unbindEventListeners();
-    }
-    _unbindEventListeners() {
-        window.removeEventListener("mousemove", this._onChange);
-        window.removeEventListener("mouseup", this._onMouseUp);
-    }
-    /** @internal */
-    render() {
-        const containerClasses = (0, classnames_1.default)(this.props.isHorizontal ? "components-alpha-container-horizontal" : "components-alpha-container-vertical", this.props.className);
-        const pointerStyle = this.props.isHorizontal ?
-            { left: `${(this.props.alpha * 100)}%` } :
-            { left: `0px`, top: `${-(this.props.alpha * 100) + 100}%` };
-        return (React.createElement("div", { className: containerClasses, style: this.props.style, "data-testid": "alpha-container" },
-            React.createElement("div", { "data-testid": "alpha-slider", role: "slider", "aria-label": this._transparencyLabel, "aria-valuemin": 0, "aria-valuemax": 1, "aria-valuenow": this.props.alpha, className: "components-alpha-slider", ref: (container) => this._container = container, onMouseDown: this._onMouseDown, onTouchMove: this._onChange, onTouchStart: this._onChange, tabIndex: 0, onKeyDown: this._onKeyDown },
-                React.createElement("div", { style: pointerStyle, className: "components-alpha-pointer", "data-testid": "alpha-pointer" }))));
-    }
-}
-exports.AlphaSlider = AlphaSlider;
+"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.AlphaSlider = void 0;
+require("./AlphaSlider.scss");
+const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
+const UiIModelComponents_1 = require("../UiIModelComponents");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+/** AlphaSlider component used to set the alpha value.
+ * @beta
+ */
+class AlphaSlider extends React.PureComponent {
+    /** @internal */
+    constructor(props) {
+        super(props);
+        this._container = null;
+        this._transparencyLabel = UiIModelComponents_1.UiIModelComponents.translate("color.transparency");
+        this._calculateChange = (e, isHorizontal, alpha, container) => {
+            e.preventDefault();
+            const { width: containerWidth, height: containerHeight } = container.getBoundingClientRect();
+            let x = 0;
+            if ("pageX" in e) {
+                x = e.pageX;
+            }
+            else {
+                // istanbul ignore if
+                if (undefined === e.touches)
+                    return undefined;
+                x = e.touches[0].pageX;
+            }
+            // istanbul ignore if
+            if (undefined === x)
+                return undefined;
+            let y = 0;
+            if ("pageY" in e) {
+                y = e.pageY;
+            }
+            else {
+                // istanbul ignore if
+                if (undefined === e.touches)
+                    return;
+                y = e.touches[0].pageY;
+            }
+            // istanbul ignore if
+            if (undefined === y)
+                return undefined;
+            const left = x - (container.getBoundingClientRect().left + window.scrollX);
+            const top = y - (container.getBoundingClientRect().top + window.scrollY);
+            let t = 0;
+            if (!isHorizontal) {
+                // istanbul ignore next
+                if (top < 0) {
+                    t = 1;
+                }
+                else if (top > containerHeight) {
+                    t = 0;
+                }
+                else {
+                    t = 1 - (top / containerHeight);
+                }
+            }
+            else { // horizontal
+                // istanbul ignore next
+                if (left < 0) {
+                    t = 0;
+                }
+                else if (left > containerWidth) {
+                    t = 1;
+                }
+                else {
+                    t = left / containerWidth;
+                }
+            }
+            // istanbul ignore if
+            if (t < 0)
+                t = 0;
+            // istanbul ignore if
+            if (t > 1)
+                t = 1;
+            // istanbul ignore next
+            return (alpha !== t) ? t : undefined;
+        };
+        this._onChange = (e) => {
+            // istanbul ignore else
+            if (this._container && this.props.onAlphaChange) {
+                const change = this._calculateChange(e, this.props.isHorizontal ? this.props.isHorizontal : false, this.props.alpha, this._container);
+                undefined !== change && typeof this.props.onAlphaChange === "function" && this.props.onAlphaChange(change);
+            }
+        };
+        this._onMouseDown = (e) => {
+            this._onChange(e);
+            // istanbul ignore else
+            if (this._container)
+                this._container.focus();
+            window.addEventListener("mousemove", this._onChange);
+            window.addEventListener("mouseup", this._onMouseUp);
+        };
+        this._onKeyDown = (evt) => {
+            let newTransparency;
+            if (evt.key === appui_abstract_1.SpecialKey.ArrowLeft || evt.key === appui_abstract_1.SpecialKey.ArrowDown) {
+                newTransparency = this.props.alpha - (evt.ctrlKey ? .1 : .05);
+            }
+            else if (evt.key === appui_abstract_1.SpecialKey.ArrowRight || evt.key === appui_abstract_1.SpecialKey.ArrowUp) {
+                newTransparency = this.props.alpha + (evt.ctrlKey ? .1 : .05);
+            }
+            else if (evt.key === appui_abstract_1.SpecialKey.PageDown) {
+                newTransparency = this.props.alpha - (evt.ctrlKey ? .5 : .25);
+            }
+            else if (evt.key === appui_abstract_1.SpecialKey.PageUp) {
+                newTransparency = this.props.alpha + (evt.ctrlKey ? .5 : .25);
+            }
+            else if (evt.key === appui_abstract_1.SpecialKey.Home) {
+                newTransparency = 0;
+            }
+            else {
+                // istanbul ignore else
+                if (evt.key === appui_abstract_1.SpecialKey.End) {
+                    newTransparency = 1;
+                }
+            }
+            // istanbul ignore else
+            if (undefined !== newTransparency) {
+                // istanbul ignore if
+                if (newTransparency > 1)
+                    newTransparency = 1;
+                // istanbul ignore if
+                if (newTransparency < 0)
+                    newTransparency = 0;
+                // istanbul ignore else
+                if (this.props.onAlphaChange)
+                    this.props.onAlphaChange(newTransparency);
+            }
+        };
+        this._onMouseUp = () => {
+            this._unbindEventListeners();
+        };
+    }
+    /** @internal */
+    componentWillUnmount() {
+        this._unbindEventListeners();
+    }
+    _unbindEventListeners() {
+        window.removeEventListener("mousemove", this._onChange);
+        window.removeEventListener("mouseup", this._onMouseUp);
+    }
+    /** @internal */
+    render() {
+        const containerClasses = (0, classnames_1.default)(this.props.isHorizontal ? "components-alpha-container-horizontal" : "components-alpha-container-vertical", this.props.className);
+        const pointerStyle = this.props.isHorizontal ?
+            { left: `${(this.props.alpha * 100)}%` } :
+            { left: `0px`, top: `${-(this.props.alpha * 100) + 100}%` };
+        return (React.createElement("div", { className: containerClasses, style: this.props.style, "data-testid": "alpha-container" },
+            React.createElement("div", { "data-testid": "alpha-slider", role: "slider", "aria-label": this._transparencyLabel, "aria-valuemin": 0, "aria-valuemax": 1, "aria-valuenow": this.props.alpha, className: "components-alpha-slider", ref: (container) => this._container = container, onMouseDown: this._onMouseDown, onTouchMove: this._onChange, onTouchStart: this._onChange, tabIndex: 0, onKeyDown: this._onKeyDown },
+                React.createElement("div", { style: pointerStyle, className: "components-alpha-pointer", "data-testid": "alpha-pointer" }))));
+    }
+}
+exports.AlphaSlider = AlphaSlider;
 //# sourceMappingURL=AlphaSlider.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AlphaSlider.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/AlphaSlider.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 \"./AlphaSlider.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { CommonProps } from \"@itwin/core-react\";\nimport { UiIModelComponents } from \"../UiIModelComponents\";\nimport { SpecialKey } from \"@itwin/appui-abstract\";\n\n/** Properties for the [[AlphaSlider]] React component\n * @beta\n */\nexport interface AlphaSliderProps 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 selects color swatch */\n  onAlphaChange?: ((alpha: number) => void) | undefined;\n  /** Alpha value between 0 (transparent) and 1 (opaque) */\n  alpha: number;\n}\n\n/** AlphaSlider component used to set the alpha value.\n * @beta\n */\nexport class AlphaSlider extends React.PureComponent<AlphaSliderProps> {\n  private _container: HTMLDivElement | null = null;\n  private _transparencyLabel = UiIModelComponents.translate(\"color.transparency\");\n\n  /** @internal */\n  constructor(props: AlphaSliderProps) {\n    super(props);\n  }\n\n  private _calculateChange = (e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>, isHorizontal: boolean, alpha: number, container: HTMLDivElement): number | undefined => {\n    e.preventDefault();\n    const { width: containerWidth, height: containerHeight } = container.getBoundingClientRect();\n\n    let x = 0;\n    if (\"pageX\" in e) {\n      x = e.pageX;\n    } else {\n      // istanbul ignore if\n      if (undefined === e.touches)\n        return undefined;\n      x = e.touches[0].pageX;\n    }\n    // istanbul ignore if\n    if (undefined === x)\n      return undefined;\n\n    let y = 0;\n    if (\"pageY\" in e) {\n      y = e.pageY;\n    } else {\n      // istanbul ignore if\n      if (undefined === e.touches)\n        return;\n      y = e.touches[0].pageY;\n    }\n    // istanbul ignore if\n    if (undefined === y)\n      return undefined;\n\n    const left = x - (container.getBoundingClientRect().left + window.scrollX);\n    const top = y - (container.getBoundingClientRect().top + window.scrollY);\n\n    let t = 0;\n\n    if (!isHorizontal) {\n      // istanbul ignore next\n      if (top < 0) {\n        t = 1;\n      } else if (top > containerHeight) {\n        t = 0;\n      } else {\n        t = 1 - (top / containerHeight);\n      }\n    } else {  // horizontal\n      // istanbul ignore next\n      if (left < 0) {\n        t = 0;\n      } else if (left > containerWidth) {\n        t = 1;\n      } else {\n        t = left / containerWidth;\n      }\n    }\n\n    // istanbul ignore if\n    if (t < 0) t = 0;\n    // istanbul ignore if\n    if (t > 1) t = 1;\n    // istanbul ignore next\n    return (alpha !== t) ? t : undefined;\n  };\n\n  /** @internal */\n  public override componentWillUnmount() {\n    this._unbindEventListeners();\n  }\n\n  private _onChange = (e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) => {\n    // istanbul ignore else\n    if (this._container && this.props.onAlphaChange) {\n      const change = this._calculateChange(e, this.props.isHorizontal ? this.props.isHorizontal : false, this.props.alpha, this._container);\n      undefined !== change && typeof this.props.onAlphaChange === \"function\" && this.props.onAlphaChange(change);\n    }\n  };\n\n  private _onMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {\n    this._onChange(e);\n    // istanbul ignore else\n    if (this._container)\n      this._container.focus();\n    window.addEventListener(\"mousemove\", this._onChange as any);\n    window.addEventListener(\"mouseup\", this._onMouseUp);\n  };\n\n  private _onKeyDown = (evt: React.KeyboardEvent<HTMLDivElement>) => {\n    let newTransparency: number | undefined;\n    if (evt.key === SpecialKey.ArrowLeft || evt.key === SpecialKey.ArrowDown) {\n      newTransparency = this.props.alpha - (evt.ctrlKey ? .1 : .05);\n    } else if (evt.key === SpecialKey.ArrowRight || evt.key === SpecialKey.ArrowUp) {\n      newTransparency = this.props.alpha + (evt.ctrlKey ? .1 : .05);\n    } else if (evt.key === SpecialKey.PageDown) {\n      newTransparency = this.props.alpha - (evt.ctrlKey ? .5 : .25);\n    } else if (evt.key === SpecialKey.PageUp) {\n      newTransparency = this.props.alpha + (evt.ctrlKey ? .5 : .25);\n    } else if (evt.key === SpecialKey.Home) {\n      newTransparency = 0;\n    } else {\n      // istanbul ignore else\n      if (evt.key === SpecialKey.End) {\n        newTransparency = 1;\n      }\n    }\n\n    // istanbul ignore else\n    if (undefined !== newTransparency) {\n      // istanbul ignore if\n      if (newTransparency > 1) newTransparency = 1;\n      // istanbul ignore if\n      if (newTransparency < 0) newTransparency = 0;\n      // istanbul ignore else\n      if (this.props.onAlphaChange)\n        this.props.onAlphaChange(newTransparency);\n    }\n  };\n\n  private _onMouseUp = () => {\n    this._unbindEventListeners();\n  };\n\n  private _unbindEventListeners() {\n    window.removeEventListener(\"mousemove\", this._onChange as any);\n    window.removeEventListener(\"mouseup\", this._onMouseUp);\n  }\n\n  /** @internal */\n  public override render(): React.ReactNode {\n    const containerClasses = classnames(\n      this.props.isHorizontal ? \"components-alpha-container-horizontal\" : \"components-alpha-container-vertical\",\n      this.props.className,\n    );\n\n    const pointerStyle: React.CSSProperties = this.props.isHorizontal ?\n      { left: `${(this.props.alpha * 100)}%` } :\n      { left: `0px`, top: `${-(this.props.alpha * 100) + 100}%` };\n\n    return (\n      <div className={containerClasses} style={this.props.style} data-testid=\"alpha-container\">\n        <div\n          data-testid=\"alpha-slider\"\n          role=\"slider\" aria-label={this._transparencyLabel}\n          aria-valuemin={0} aria-valuemax={1} aria-valuenow={this.props.alpha}\n          className=\"components-alpha-slider\"\n          ref={(container) => this._container = container}\n          onMouseDown={this._onMouseDown}\n          onTouchMove={this._onChange}\n          onTouchStart={this._onChange}\n          tabIndex={0}\n          onKeyDown={this._onKeyDown}\n        >\n          <div style={pointerStyle} className=\"components-alpha-pointer\" data-testid=\"alpha-pointer\" />\n        </div>\n      </div>\n    );\n  }\n\n}\n"]}
+{"version":3,"file":"AlphaSlider.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/AlphaSlider.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 \"./AlphaSlider.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { UiIModelComponents } from \"../UiIModelComponents\";\r\nimport { SpecialKey } from \"@itwin/appui-abstract\";\r\n\r\n/** Properties for the [[AlphaSlider]] React component\r\n * @beta\r\n */\r\nexport interface AlphaSliderProps 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 selects color swatch */\r\n  onAlphaChange?: ((alpha: number) => void) | undefined;\r\n  /** Alpha value between 0 (transparent) and 1 (opaque) */\r\n  alpha: number;\r\n}\r\n\r\n/** AlphaSlider component used to set the alpha value.\r\n * @beta\r\n */\r\nexport class AlphaSlider extends React.PureComponent<AlphaSliderProps> {\r\n  private _container: HTMLDivElement | null = null;\r\n  private _transparencyLabel = UiIModelComponents.translate(\"color.transparency\");\r\n\r\n  /** @internal */\r\n  constructor(props: AlphaSliderProps) {\r\n    super(props);\r\n  }\r\n\r\n  private _calculateChange = (e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>, isHorizontal: boolean, alpha: number, container: HTMLDivElement): number | undefined => {\r\n    e.preventDefault();\r\n    const { width: containerWidth, height: containerHeight } = container.getBoundingClientRect();\r\n\r\n    let x = 0;\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)\r\n        return undefined;\r\n      x = e.touches[0].pageX;\r\n    }\r\n    // istanbul ignore if\r\n    if (undefined === x)\r\n      return undefined;\r\n\r\n    let y = 0;\r\n    if (\"pageY\" in e) {\r\n      y = e.pageY;\r\n    } else {\r\n      // istanbul ignore if\r\n      if (undefined === e.touches)\r\n        return;\r\n      y = e.touches[0].pageY;\r\n    }\r\n    // istanbul ignore if\r\n    if (undefined === y)\r\n      return undefined;\r\n\r\n    const left = x - (container.getBoundingClientRect().left + window.scrollX);\r\n    const top = y - (container.getBoundingClientRect().top + window.scrollY);\r\n\r\n    let t = 0;\r\n\r\n    if (!isHorizontal) {\r\n      // istanbul ignore next\r\n      if (top < 0) {\r\n        t = 1;\r\n      } else if (top > containerHeight) {\r\n        t = 0;\r\n      } else {\r\n        t = 1 - (top / containerHeight);\r\n      }\r\n    } else {  // horizontal\r\n      // istanbul ignore next\r\n      if (left < 0) {\r\n        t = 0;\r\n      } else if (left > containerWidth) {\r\n        t = 1;\r\n      } else {\r\n        t = left / containerWidth;\r\n      }\r\n    }\r\n\r\n    // istanbul ignore if\r\n    if (t < 0) t = 0;\r\n    // istanbul ignore if\r\n    if (t > 1) t = 1;\r\n    // istanbul ignore next\r\n    return (alpha !== t) ? t : undefined;\r\n  };\r\n\r\n  /** @internal */\r\n  public override componentWillUnmount() {\r\n    this._unbindEventListeners();\r\n  }\r\n\r\n  private _onChange = (e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) => {\r\n    // istanbul ignore else\r\n    if (this._container && this.props.onAlphaChange) {\r\n      const change = this._calculateChange(e, this.props.isHorizontal ? this.props.isHorizontal : false, this.props.alpha, this._container);\r\n      undefined !== change && typeof this.props.onAlphaChange === \"function\" && this.props.onAlphaChange(change);\r\n    }\r\n  };\r\n\r\n  private _onMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {\r\n    this._onChange(e);\r\n    // istanbul ignore else\r\n    if (this._container)\r\n      this._container.focus();\r\n    window.addEventListener(\"mousemove\", this._onChange as any);\r\n    window.addEventListener(\"mouseup\", this._onMouseUp);\r\n  };\r\n\r\n  private _onKeyDown = (evt: React.KeyboardEvent<HTMLDivElement>) => {\r\n    let newTransparency: number | undefined;\r\n    if (evt.key === SpecialKey.ArrowLeft || evt.key === SpecialKey.ArrowDown) {\r\n      newTransparency = this.props.alpha - (evt.ctrlKey ? .1 : .05);\r\n    } else if (evt.key === SpecialKey.ArrowRight || evt.key === SpecialKey.ArrowUp) {\r\n      newTransparency = this.props.alpha + (evt.ctrlKey ? .1 : .05);\r\n    } else if (evt.key === SpecialKey.PageDown) {\r\n      newTransparency = this.props.alpha - (evt.ctrlKey ? .5 : .25);\r\n    } else if (evt.key === SpecialKey.PageUp) {\r\n      newTransparency = this.props.alpha + (evt.ctrlKey ? .5 : .25);\r\n    } else if (evt.key === SpecialKey.Home) {\r\n      newTransparency = 0;\r\n    } else {\r\n      // istanbul ignore else\r\n      if (evt.key === SpecialKey.End) {\r\n        newTransparency = 1;\r\n      }\r\n    }\r\n\r\n    // istanbul ignore else\r\n    if (undefined !== newTransparency) {\r\n      // istanbul ignore if\r\n      if (newTransparency > 1) newTransparency = 1;\r\n      // istanbul ignore if\r\n      if (newTransparency < 0) newTransparency = 0;\r\n      // istanbul ignore else\r\n      if (this.props.onAlphaChange)\r\n        this.props.onAlphaChange(newTransparency);\r\n    }\r\n  };\r\n\r\n  private _onMouseUp = () => {\r\n    this._unbindEventListeners();\r\n  };\r\n\r\n  private _unbindEventListeners() {\r\n    window.removeEventListener(\"mousemove\", this._onChange as any);\r\n    window.removeEventListener(\"mouseup\", this._onMouseUp);\r\n  }\r\n\r\n  /** @internal */\r\n  public override render(): React.ReactNode {\r\n    const containerClasses = classnames(\r\n      this.props.isHorizontal ? \"components-alpha-container-horizontal\" : \"components-alpha-container-vertical\",\r\n      this.props.className,\r\n    );\r\n\r\n    const pointerStyle: React.CSSProperties = this.props.isHorizontal ?\r\n      { left: `${(this.props.alpha * 100)}%` } :\r\n      { left: `0px`, top: `${-(this.props.alpha * 100) + 100}%` };\r\n\r\n    return (\r\n      <div className={containerClasses} style={this.props.style} data-testid=\"alpha-container\">\r\n        <div\r\n          data-testid=\"alpha-slider\"\r\n          role=\"slider\" aria-label={this._transparencyLabel}\r\n          aria-valuemin={0} aria-valuemax={1} aria-valuenow={this.props.alpha}\r\n          className=\"components-alpha-slider\"\r\n          ref={(container) => this._container = container}\r\n          onMouseDown={this._onMouseDown}\r\n          onTouchMove={this._onChange}\r\n          onTouchStart={this._onChange}\r\n          tabIndex={0}\r\n          onKeyDown={this._onKeyDown}\r\n        >\r\n          <div style={pointerStyle} className=\"components-alpha-pointer\" data-testid=\"alpha-pointer\" />\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n}\r\n"]}

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

@@ -1,63 +1,63 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-.components-alpha-pointer {
-  position: absolute;
-  width: 1.2rem;
-  height: 1.2rem;
-  border-radius: 50%;
-  background-color: rgb(248, 248, 248);
-  box-shadow: rgba(0, 0, 0, 0.37) 0px 1px 4px 0px;
-
-  &:focus {
-    outline: none;
-    border: none;
-  }
-}
-
-.components-alpha-container-horizontal {
-  width: 100%;
-  height: 1rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  .components-alpha-slider {
-    position: relative;
-    width: calc(100% - 1.2rem);
-    height: 100%;
-    background-color: linear-gradient(to right, rgba(47, 37, 72, 0) 0%, rgb(47, 37, 72) 100%);
-    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill-opacity=".15"><rect x="200" width="200" height="200" /> <rect y="200" width="200" height="200" /></svg>'),
-      linear-gradient(to right, rgba(47, 37, 72, 0) 0%, rgb(47, 37, 72) 100%);
-    background-size: 2rem 1rem, cover;
-    background-repeat: repeat, no-repeat;
-
-    .components-alpha-pointer {
-      transform: translate(-.6rem, -.1rem);
-    }
-  }
-}
-
-.components-alpha-container-vertical {
-  width: 1rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-
-  .components-alpha-slider {
-    position: relative;
-    width: 100%;
-    height: calc(100% - 1.2rem);
-    background-color: linear-gradient(to bottom, rgba(47, 37, 72, 0) 0%, rgb(47, 37, 72) 100%);
-    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill-opacity=".15"><rect x="200" width="200" height="200" /> <rect y="200" width="200" height="200" /></svg>'),
-      linear-gradient(to top, rgba(47, 37, 72, 0) 0%, rgb(47, 37, 72) 100%);
-    background-size: 1rem 2rem, cover;
-    background-repeat: repeat, no-repeat;
-
-    .components-alpha-pointer {
-      transform: translate(-.1rem, -.6rem);
-    }
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+.components-alpha-pointer {
+  position: absolute;
+  width: 1.2rem;
+  height: 1.2rem;
+  border-radius: 50%;
+  background-color: rgb(248, 248, 248);
+  box-shadow: rgba(0, 0, 0, 0.37) 0px 1px 4px 0px;
+
+  &:focus {
+    outline: none;
+    border: none;
+  }
+}
+
+.components-alpha-container-horizontal {
+  width: 100%;
+  height: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .components-alpha-slider {
+    position: relative;
+    width: calc(100% - 1.2rem);
+    height: 100%;
+    background-color: linear-gradient(to right, rgba(47, 37, 72, 0) 0%, rgb(47, 37, 72) 100%);
+    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill-opacity=".15"><rect x="200" width="200" height="200" /> <rect y="200" width="200" height="200" /></svg>'),
+      linear-gradient(to right, rgba(47, 37, 72, 0) 0%, rgb(47, 37, 72) 100%);
+    background-size: 2rem 1rem, cover;
+    background-repeat: repeat, no-repeat;
+
+    .components-alpha-pointer {
+      transform: translate(-.6rem, -.1rem);
+    }
+  }
+}
+
+.components-alpha-container-vertical {
+  width: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+
+  .components-alpha-slider {
+    position: relative;
+    width: 100%;
+    height: calc(100% - 1.2rem);
+    background-color: linear-gradient(to bottom, rgba(47, 37, 72, 0) 0%, rgb(47, 37, 72) 100%);
+    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill-opacity=".15"><rect x="200" width="200" height="200" /> <rect y="200" width="200" height="200" /></svg>'),
+      linear-gradient(to top, rgba(47, 37, 72, 0) 0%, rgb(47, 37, 72) 100%);
+    background-size: 1rem 2rem, cover;
+    background-repeat: repeat, no-repeat;
+
+    .components-alpha-pointer {
+      transform: translate(-.1rem, -.6rem);
+    }
+  }
+}

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

@@ -1,38 +1,38 @@
-/** @packageDocumentation
- * @module Color
- */
-import "./ColorPickerButton.scss";
-import * as React from "react";
-import { ColorDef } from "@itwin/core-common";
-import { CommonProps } from "@itwin/core-react";
-/** Properties for the [[ColorPickerButton]] React component
- * @beta
- */
-export interface ColorPickerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {
-    /** Active color */
-    initialColor: ColorDef;
-    /** Available colors */
-    colorDefs?: ColorDef[];
-    /** Function to run when user selects color swatch */
-    onColorPick?: ((color: ColorDef) => void) | undefined;
-    /** Show swatches as squares unless round is set to true */
-    round?: boolean;
-    /** Disabled or not */
-    disabled?: boolean;
-    /** Readonly or not */
-    readonly?: boolean;
-    /** Title to show at top of DropDown */
-    dropDownTitle?: string;
-    /** Number of columns */
-    numColumns?: number;
-    /** Provides ability to return reference to HTMLButtonElement */
-    ref?: React.Ref<HTMLButtonElement>;
-    /** If true show up/down caret next to color  */
-    showCaret?: boolean;
-}
-/** ColorPickerButton component
- * @note Using forwardRef so the ColorEditor (Type Editor) can access the ref of the button element inside this component.
- * @beta
- */
-export declare const ColorPickerButton: (props: ColorPickerProps) => JSX.Element | null;
+/** @packageDocumentation
+ * @module Color
+ */
+import "./ColorPickerButton.scss";
+import * as React from "react";
+import { ColorDef } from "@itwin/core-common";
+import { CommonProps } from "@itwin/core-react";
+/** Properties for the [[ColorPickerButton]] React component
+ * @beta
+ */
+export interface ColorPickerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {
+    /** Active color */
+    initialColor: ColorDef;
+    /** Available colors */
+    colorDefs?: ColorDef[];
+    /** Function to run when user selects color swatch */
+    onColorPick?: ((color: ColorDef) => void) | undefined;
+    /** Show swatches as squares unless round is set to true */
+    round?: boolean;
+    /** Disabled or not */
+    disabled?: boolean;
+    /** Readonly or not */
+    readonly?: boolean;
+    /** Title to show at top of DropDown */
+    dropDownTitle?: string;
+    /** Number of columns */
+    numColumns?: number;
+    /** Provides ability to return reference to HTMLButtonElement */
+    ref?: React.Ref<HTMLButtonElement>;
+    /** If true show up/down caret next to color  */
+    showCaret?: boolean;
+}
+/** ColorPickerButton component
+ * @note Using forwardRef so the ColorEditor (Type Editor) can access the ref of the button element inside this component.
+ * @beta
+ */
+export declare const ColorPickerButton: (props: ColorPickerProps) => JSX.Element | null;
 //# sourceMappingURL=ColorPickerButton.d.ts.map