@itwin/imodel-components-react 4.0.0-dev.10 → 4.0.0-dev.12

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

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

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

@@ -1,63 +1,62 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-
-button.components-colorpicker-popup-button {
-  font-family: var(--iui-font-sans);
-  font-size: var(--iui-font-size-1);
-  color: $buic-foreground-body;
-  background-color: transparent;
-  box-sizing: border-box;
-  border-radius: var(--iui-border-radius-1);
-  border: none;
-  padding: 0;
-
-  &:not(.readonly) {
-    cursor: pointer;
-  }
-
-  > .components-colorpicker-button-container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-
-    > .components-colorpicker-button-color-swatch {
-      border: 1px solid $buic-inputs-border;
-      border-radius: var(--iui-border-radius-1);
-      width: 1.25em;
-      height: 1.25em;
-    }
-
-    > .components-caret {
-      margin-left: 0.25em;
-      margin-right: 0.25em;
-    }
-  }
-
-  &:disabled {
-    pointer-events: none;
-
-    > .components-colorpicker-button-container {
-      > .components-caret {
-        color: $buic-icon-color-disabled;
-      }
-    }
-  }
-}
-
-.components-colorpicker-popup-panel-padding {
-  padding: 3px 6px 6px 6px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-
-  button.core-dialog-close {
-    cursor: pointer;
-    margin-left: auto;
-    background: transparent;
-    border: none;
-    color: var(--buic-foreground-body);
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+button.components-colorpicker-popup-button {
+  font-family: var(--iui-font-sans);
+  font-size: var(--iui-font-size-1);
+  color: var(--iui-color-text);
+  background-color: transparent;
+  box-sizing: border-box;
+  border-radius: var(--iui-border-radius-1);
+  border: none;
+  padding: 0;
+
+  &:not(.readonly) {
+    cursor: pointer;
+  }
+
+  > .components-colorpicker-button-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    > .components-colorpicker-button-color-swatch {
+      border: 1px solid var(--iui-color-border);
+      border-radius: var(--iui-border-radius-1);
+      width: 1.25em;
+      height: 1.25em;
+    }
+
+    > .components-caret {
+      margin-left: 0.25em;
+      margin-right: 0.25em;
+    }
+  }
+
+  &:disabled {
+    pointer-events: none;
+
+    > .components-colorpicker-button-container {
+      > .components-caret {
+        color: var(--iui-color-text-disabled);
+      }
+    }
+  }
+}
+
+.components-colorpicker-popup-panel-padding {
+  padding: 3px 6px 6px 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  button.core-dialog-close {
+    cursor: pointer;
+    margin-left: auto;
+    background: transparent;
+    border: none;
+    color: var(--iui-color-text);
+  }
+}

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

@@ -1,23 +1,23 @@
-/** @packageDocumentation
- * @module Color
- */
-import "./HueSlider.scss";
-import * as React from "react";
-import { HSVColor } from "@itwin/core-common";
-import { CommonProps } from "@itwin/core-react";
-/** Properties for the [[HueSlider]] React component
- * @beta
- */
-export interface HueSliderProps extends React.HTMLAttributes<HTMLDivElement>, CommonProps {
-    /** true if slider is oriented horizontal, else vertical orientation is assumed */
-    isHorizontal?: boolean;
-    /** function to run when user hue is changed */
-    onHueChange?: ((hue: HSVColor) => void) | undefined;
-    /** HSV Color Value */
-    hsv: HSVColor;
-}
-/** HueSlider component used to set the hue value.
- * @beta
- */
-export declare function HueSlider({ isHorizontal, onHueChange, hsv, className, style }: HueSliderProps): JSX.Element;
+/** @packageDocumentation
+ * @module Color
+ */
+import "./HueSlider.scss";
+import * as React from "react";
+import { HSVColor } from "@itwin/core-common";
+import { CommonProps } from "@itwin/core-react";
+/** Properties for the [[HueSlider]] React component
+ * @beta
+ */
+export interface HueSliderProps extends React.HTMLAttributes<HTMLDivElement>, CommonProps {
+    /** true if slider is oriented horizontal, else vertical orientation is assumed */
+    isHorizontal?: boolean;
+    /** function to run when user hue is changed */
+    onHueChange?: ((hue: HSVColor) => void) | undefined;
+    /** HSV Color Value */
+    hsv: HSVColor;
+}
+/** HueSlider component used to set the hue value.
+ * @beta
+ */
+export declare function HueSlider({ isHorizontal, onHueChange, hsv, className, style }: HueSliderProps): JSX.Element;
 //# sourceMappingURL=HueSlider.d.ts.map

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

@@ -1,200 +1,200 @@
-"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;
+    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;
 //# sourceMappingURL=HueSlider.js.map