@itwin/imodel-components-react 3.4.2 → 3.4.4

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

@@ -1,75 +1,75 @@
-"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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorPickerDialog = void 0;
-// cSpell:ignore colorpicker
-const React = __importStar(require("react"));
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const core_react_1 = require("@itwin/core-react");
-const core_common_1 = require("@itwin/core-common");
-const itwinui_react_1 = require("@itwin/itwinui-react");
-/**
- * Color Picker Dialog to use as modal dialog.
- * @beta
- */
-function ColorPickerDialog({ dialogTitle, color, onOkResult, onCancelResult, colorPresets, colorInputType }) {
-    const [activeColor, setActiveColor] = React.useState(color);
-    const dialogContainer = React.useRef(null);
-    const handleOk = React.useCallback(() => {
-        onOkResult(activeColor);
-    }, [onOkResult, activeColor]);
-    const handleCancel = React.useCallback(() => {
-        // istanbul ignore else
-        if (onCancelResult)
-            onCancelResult();
-    }, [onCancelResult]);
-    const handleColorChanged = React.useCallback((newColorValue) => {
-        const newColorDef = core_common_1.ColorDef.fromTbgr(newColorValue.toTbgr());
-        setActiveColor(newColorDef);
-    }, []);
-    const buttonCluster = React.useMemo(() => [
-        { type: appui_abstract_1.DialogButtonType.OK, onClick: handleOk },
-        { type: appui_abstract_1.DialogButtonType.Cancel, onClick: handleCancel },
-    ], [handleCancel, handleOk]);
-    const colorOptions = React.useMemo(() => {
-        if (colorPresets) {
-            return colorPresets.map((def) => itwinui_react_1.ColorValue.fromTbgr(def.tbgr));
-        }
-        return undefined;
-    }, [colorPresets]);
-    return (React.createElement("div", { ref: dialogContainer },
-        React.createElement(core_react_1.Dialog, { title: dialogTitle, opened: true, resizable: false, movable: true, modal: true, buttonCluster: buttonCluster, onClose: handleCancel, onEscape: handleCancel, maxWidth: 320 },
-            React.createElement(itwinui_react_1.ColorPicker, { selectedColor: itwinui_react_1.ColorValue.fromTbgr(activeColor.tbgr), onChangeComplete: handleColorChanged },
-                React.createElement(itwinui_react_1.ColorBuilder, null),
-                colorInputType &&
-                    React.createElement(itwinui_react_1.ColorInputPanel, { defaultColorFormat: colorInputType }),
-                colorOptions &&
-                    React.createElement(itwinui_react_1.ColorPalette, { colors: colorOptions })))));
-}
-exports.ColorPickerDialog = ColorPickerDialog;
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorPickerDialog = void 0;
+// cSpell:ignore colorpicker
+const React = __importStar(require("react"));
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const core_react_1 = require("@itwin/core-react");
+const core_common_1 = require("@itwin/core-common");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+/**
+ * Color Picker Dialog to use as modal dialog.
+ * @beta
+ */
+function ColorPickerDialog({ dialogTitle, color, onOkResult, onCancelResult, colorPresets, colorInputType }) {
+    const [activeColor, setActiveColor] = React.useState(color);
+    const dialogContainer = React.useRef(null);
+    const handleOk = React.useCallback(() => {
+        onOkResult(activeColor);
+    }, [onOkResult, activeColor]);
+    const handleCancel = React.useCallback(() => {
+        // istanbul ignore else
+        if (onCancelResult)
+            onCancelResult();
+    }, [onCancelResult]);
+    const handleColorChanged = React.useCallback((newColorValue) => {
+        const newColorDef = core_common_1.ColorDef.fromTbgr(newColorValue.toTbgr());
+        setActiveColor(newColorDef);
+    }, []);
+    const buttonCluster = React.useMemo(() => [
+        { type: appui_abstract_1.DialogButtonType.OK, onClick: handleOk },
+        { type: appui_abstract_1.DialogButtonType.Cancel, onClick: handleCancel },
+    ], [handleCancel, handleOk]);
+    const colorOptions = React.useMemo(() => {
+        if (colorPresets) {
+            return colorPresets.map((def) => itwinui_react_1.ColorValue.fromTbgr(def.tbgr));
+        }
+        return undefined;
+    }, [colorPresets]);
+    return (React.createElement("div", { ref: dialogContainer },
+        React.createElement(core_react_1.Dialog, { title: dialogTitle, opened: true, resizable: false, movable: true, modal: true, buttonCluster: buttonCluster, onClose: handleCancel, onEscape: handleCancel, maxWidth: 320 },
+            React.createElement(itwinui_react_1.ColorPicker, { selectedColor: itwinui_react_1.ColorValue.fromTbgr(activeColor.tbgr), onChangeComplete: handleColorChanged },
+                React.createElement(itwinui_react_1.ColorBuilder, null),
+                colorInputType &&
+                    React.createElement(itwinui_react_1.ColorInputPanel, { defaultColorFormat: colorInputType }),
+                colorOptions &&
+                    React.createElement(itwinui_react_1.ColorPalette, { colors: colorOptions })))));
+}
+exports.ColorPickerDialog = ColorPickerDialog;
 //# sourceMappingURL=ColorPickerDialog.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerDialog.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerDialog.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;AAEH,4BAA4B;AAE5B,6CAA+B;AAC/B,0DAAyD;AACzD,kDAA2C;AAC3C,oDAA8C;AAC9C,wDAA4G;AAgB5G;;;GAGG;AACH,SAAgB,iBAAiB,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAA0B;IACxI,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE3D,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACtC,UAAU,CAAC,WAAW,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC;IAC9B,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC1C,uBAAuB;QACvB,IAAI,cAAc;YAChB,cAAc,EAAE,CAAC;IACrB,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,aAAyB,EAAE,EAAE;QACzE,MAAM,WAAW,GAAG,sBAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC,CAAC;QAC9D,cAAc,CAAC,WAAW,CAAC,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC;QACxC,EAAE,IAAI,EAAE,iCAAgB,CAAC,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAChD,EAAE,IAAI,EAAE,iCAAgB,CAAC,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE;KACzD,EAAE,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE7B,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACtC,IAAI,YAAY,EAAE;YAChB,OAAO,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,0BAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;SACjE;QACD,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,OAAO,CACL,6BAAK,GAAG,EAAE,eAAe;QACvB,oBAAC,mBAAM,IACL,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,IAAI,EACZ,SAAS,EAAE,KAAK,EAChB,OAAO,EAAE,IAAI,EACb,KAAK,EAAE,IAAI,EACX,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,GAAG;YAEb,oBAAC,2BAAW,IAAC,aAAa,EAAE,0BAAU,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,gBAAgB,EAAE,kBAAkB;gBACrG,oBAAC,4BAAY,OAAG;gBACf,cAAc;oBACb,oBAAC,+BAAe,IAAC,kBAAkB,EAAE,cAAc,GAAI;gBACxD,YAAY;oBACX,oBAAC,4BAAY,IAAC,MAAM,EAAE,YAAY,GAAI,CAC5B,CACP,CACJ,CACR,CAAC;AACJ,CAAC;AArDD,8CAqDC","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 { DialogButtonType } from \"@itwin/appui-abstract\";\r\nimport { Dialog } from \"@itwin/core-react\";\r\nimport { ColorDef } from \"@itwin/core-common\";\r\nimport { ColorBuilder, ColorInputPanel, ColorPalette, ColorPicker, ColorValue } from \"@itwin/itwinui-react\";\r\n\r\n/** Properties for the [[ColorPickerDialog]] React component\r\n * @beta\r\n */\r\nexport interface ColorPickerDialogProps {\r\n  dialogTitle: string;\r\n  color: ColorDef;\r\n  onOkResult: (selectedColor: ColorDef) => void;\r\n  onCancelResult: () => void;\r\n  /** displayed in rows of 9 items */\r\n  colorPresets?: ColorDef[];\r\n  /** If set show either HSL, RGB, or HEX input values. If undefined no input value is shown */\r\n  colorInputType?: \"hsl\" | \"rgb\" | \"hex\";\r\n}\r\n\r\n/**\r\n * Color Picker Dialog to use as modal dialog.\r\n * @beta\r\n */\r\nexport function ColorPickerDialog({ dialogTitle, color, onOkResult, onCancelResult, colorPresets, colorInputType }: ColorPickerDialogProps) {\r\n  const [activeColor, setActiveColor] = React.useState(color);\r\n  const dialogContainer = React.useRef<HTMLDivElement>(null);\r\n\r\n  const handleOk = React.useCallback(() => {\r\n    onOkResult(activeColor);\r\n  }, [onOkResult, activeColor]);\r\n  const handleCancel = React.useCallback(() => {\r\n    // istanbul ignore else\r\n    if (onCancelResult)\r\n      onCancelResult();\r\n  }, [onCancelResult]);\r\n\r\n  const handleColorChanged = React.useCallback((newColorValue: ColorValue) => {\r\n    const newColorDef = ColorDef.fromTbgr(newColorValue.toTbgr());\r\n    setActiveColor(newColorDef);\r\n  }, []);\r\n\r\n  const buttonCluster = React.useMemo(() => [\r\n    { type: DialogButtonType.OK, onClick: handleOk },\r\n    { type: DialogButtonType.Cancel, onClick: handleCancel },\r\n  ], [handleCancel, handleOk]);\r\n\r\n  const colorOptions = React.useMemo(() => {\r\n    if (colorPresets) {\r\n      return colorPresets.map((def) => ColorValue.fromTbgr(def.tbgr));\r\n    }\r\n    return undefined;\r\n  }, [colorPresets]);\r\n\r\n  return (\r\n    <div ref={dialogContainer}>\r\n      <Dialog\r\n        title={dialogTitle}\r\n        opened={true}\r\n        resizable={false}\r\n        movable={true}\r\n        modal={true}\r\n        buttonCluster={buttonCluster}\r\n        onClose={handleCancel}\r\n        onEscape={handleCancel}\r\n        maxWidth={320}\r\n      >\r\n        <ColorPicker selectedColor={ColorValue.fromTbgr(activeColor.tbgr)} onChangeComplete={handleColorChanged} >\r\n          <ColorBuilder />\r\n          {colorInputType &&\r\n            <ColorInputPanel defaultColorFormat={colorInputType} />}\r\n          {colorOptions &&\r\n            <ColorPalette colors={colorOptions} />}\r\n        </ColorPicker>\r\n      </Dialog>\r\n    </div >\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"ColorPickerDialog.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerDialog.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;AAEH,4BAA4B;AAE5B,6CAA+B;AAC/B,0DAAyD;AACzD,kDAA2C;AAC3C,oDAA8C;AAC9C,wDAA4G;AAgB5G;;;GAGG;AACH,SAAgB,iBAAiB,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAA0B;IACxI,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE3D,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACtC,UAAU,CAAC,WAAW,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC;IAC9B,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC1C,uBAAuB;QACvB,IAAI,cAAc;YAChB,cAAc,EAAE,CAAC;IACrB,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,aAAyB,EAAE,EAAE;QACzE,MAAM,WAAW,GAAG,sBAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC,CAAC;QAC9D,cAAc,CAAC,WAAW,CAAC,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC;QACxC,EAAE,IAAI,EAAE,iCAAgB,CAAC,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAChD,EAAE,IAAI,EAAE,iCAAgB,CAAC,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE;KACzD,EAAE,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE7B,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACtC,IAAI,YAAY,EAAE;YAChB,OAAO,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,0BAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;SACjE;QACD,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,OAAO,CACL,6BAAK,GAAG,EAAE,eAAe;QACvB,oBAAC,mBAAM,IACL,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,IAAI,EACZ,SAAS,EAAE,KAAK,EAChB,OAAO,EAAE,IAAI,EACb,KAAK,EAAE,IAAI,EACX,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,GAAG;YAEb,oBAAC,2BAAW,IAAC,aAAa,EAAE,0BAAU,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,gBAAgB,EAAE,kBAAkB;gBACrG,oBAAC,4BAAY,OAAG;gBACf,cAAc;oBACb,oBAAC,+BAAe,IAAC,kBAAkB,EAAE,cAAc,GAAI;gBACxD,YAAY;oBACX,oBAAC,4BAAY,IAAC,MAAM,EAAE,YAAY,GAAI,CAC5B,CACP,CACJ,CACR,CAAC;AACJ,CAAC;AArDD,8CAqDC","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 { DialogButtonType } from \"@itwin/appui-abstract\";\nimport { Dialog } from \"@itwin/core-react\";\nimport { ColorDef } from \"@itwin/core-common\";\nimport { ColorBuilder, ColorInputPanel, ColorPalette, ColorPicker, ColorValue } from \"@itwin/itwinui-react\";\n\n/** Properties for the [[ColorPickerDialog]] React component\n * @beta\n */\nexport interface ColorPickerDialogProps {\n  dialogTitle: string;\n  color: ColorDef;\n  onOkResult: (selectedColor: ColorDef) => void;\n  onCancelResult: () => void;\n  /** displayed in rows of 9 items */\n  colorPresets?: ColorDef[];\n  /** If set show either HSL, RGB, or HEX input values. If undefined no input value is shown */\n  colorInputType?: \"hsl\" | \"rgb\" | \"hex\";\n}\n\n/**\n * Color Picker Dialog to use as modal dialog.\n * @beta\n */\nexport function ColorPickerDialog({ dialogTitle, color, onOkResult, onCancelResult, colorPresets, colorInputType }: ColorPickerDialogProps) {\n  const [activeColor, setActiveColor] = React.useState(color);\n  const dialogContainer = React.useRef<HTMLDivElement>(null);\n\n  const handleOk = React.useCallback(() => {\n    onOkResult(activeColor);\n  }, [onOkResult, activeColor]);\n  const handleCancel = React.useCallback(() => {\n    // istanbul ignore else\n    if (onCancelResult)\n      onCancelResult();\n  }, [onCancelResult]);\n\n  const handleColorChanged = React.useCallback((newColorValue: ColorValue) => {\n    const newColorDef = ColorDef.fromTbgr(newColorValue.toTbgr());\n    setActiveColor(newColorDef);\n  }, []);\n\n  const buttonCluster = React.useMemo(() => [\n    { type: DialogButtonType.OK, onClick: handleOk },\n    { type: DialogButtonType.Cancel, onClick: handleCancel },\n  ], [handleCancel, handleOk]);\n\n  const colorOptions = React.useMemo(() => {\n    if (colorPresets) {\n      return colorPresets.map((def) => ColorValue.fromTbgr(def.tbgr));\n    }\n    return undefined;\n  }, [colorPresets]);\n\n  return (\n    <div ref={dialogContainer}>\n      <Dialog\n        title={dialogTitle}\n        opened={true}\n        resizable={false}\n        movable={true}\n        modal={true}\n        buttonCluster={buttonCluster}\n        onClose={handleCancel}\n        onEscape={handleCancel}\n        maxWidth={320}\n      >\n        <ColorPicker selectedColor={ColorValue.fromTbgr(activeColor.tbgr)} onChangeComplete={handleColorChanged} >\n          <ColorBuilder />\n          {colorInputType &&\n            <ColorInputPanel defaultColorFormat={colorInputType} />}\n          {colorOptions &&\n            <ColorPalette colors={colorOptions} />}\n        </ColorPicker>\n      </Dialog>\n    </div >\n  );\n}\n"]}

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

@@ -1,22 +1,22 @@
-/** @packageDocumentation
- * @module Color
- */
-/// <reference types="react" />
-import { ColorDef } from "@itwin/core-common";
-import "./ColorPickerPanel.scss";
-/** Properties for the [[ColorPickerPanel]] React component
- * @public @deprecated use `ColorPicker` for itwinui-react
- */
-export interface ColorPickerPanelProps {
-    activeColor: ColorDef;
-    onColorChange: (selectedColor: ColorDef) => void;
-    colorPresets?: ColorDef[];
-    /** If set show either HSL or RGB input values. If undefined no input value is shown */
-    colorInputType?: "HSL" | "RGB";
-}
-/**
- * Color Picker Dialog to use as modal dialog.
- * @public @deprecated use `ColorPicker` for itwinui-react
- */
-export declare function ColorPickerPanel({ activeColor, onColorChange, colorPresets, colorInputType }: ColorPickerPanelProps): JSX.Element;
+/** @packageDocumentation
+ * @module Color
+ */
+/// <reference types="react" />
+import { ColorDef } from "@itwin/core-common";
+import "./ColorPickerPanel.scss";
+/** Properties for the [[ColorPickerPanel]] React component
+ * @public @deprecated use `ColorPicker` for itwinui-react
+ */
+export interface ColorPickerPanelProps {
+    activeColor: ColorDef;
+    onColorChange: (selectedColor: ColorDef) => void;
+    colorPresets?: ColorDef[];
+    /** If set show either HSL or RGB input values. If undefined no input value is shown */
+    colorInputType?: "HSL" | "RGB";
+}
+/**
+ * Color Picker Dialog to use as modal dialog.
+ * @public @deprecated use `ColorPicker` for itwinui-react
+ */
+export declare function ColorPickerPanel({ activeColor, onColorChange, colorPresets, colorInputType }: ColorPickerPanelProps): JSX.Element;
 //# sourceMappingURL=ColorPickerPanel.d.ts.map

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

@@ -1,146 +1,146 @@
-"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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorPickerPanel = void 0;
-// cSpell:ignore colorpicker
-const React = __importStar(require("react"));
-const core_common_1 = require("@itwin/core-common");
-const Swatch_1 = require("./Swatch");
-const HueSlider_1 = require("./HueSlider");
-const SaturationPicker_1 = require("./SaturationPicker");
-require("./ColorPickerPanel.scss");
-const core_react_1 = require("@itwin/core-react");
-/**
- * Color Picker Dialog to use as modal dialog.
- * @public @deprecated use `ColorPicker` for itwinui-react
- */
-// istanbul ignore next
-function ColorPickerPanel({ activeColor, onColorChange, colorPresets, colorInputType }) {
-    const handlePresetColorPick = React.useCallback((newColor, e) => {
-        e.preventDefault();
-        if (onColorChange) {
-            onColorChange(newColor);
-        }
-    }, [onColorChange]);
-    const handleHueChange = React.useCallback((newHsvColor) => {
-        // for a ColorDef to be created from hsv s can't be 0
-        if (newHsvColor.s === 0) {
-            newHsvColor = newHsvColor.clone(undefined, 0.5);
-        }
-        const newColorDef = newHsvColor.toColorDef();
-        if (onColorChange) {
-            onColorChange(newColorDef);
-        }
-    }, [onColorChange]);
-    const handleSaturationChange = React.useCallback((newHsvColor) => {
-        const newColorDef = newHsvColor.toColorDef();
-        if (onColorChange) {
-            onColorChange(newColorDef);
-        }
-    }, [onColorChange]);
-    const currentHsl = React.useMemo(() => activeColor.toHSL(), [activeColor]);
-    const currentHsv = React.useMemo(() => activeColor.toHSV(), [activeColor]);
-    const color = React.useMemo(() => activeColor.colors, [activeColor]);
-    const handleLightnessValueChange = React.useCallback((value, _stringValue) => {
-        const newHsl = currentHsl.clone(undefined, undefined, (value !== null && value !== void 0 ? value : 0) / 100);
-        if (onColorChange) {
-            const newColorDef = newHsl.toColorDef();
-            onColorChange(newColorDef);
-        }
-    }, [currentHsl, onColorChange]);
-    const handleHueValueChange = React.useCallback((value, _stringValue) => {
-        const newHsl = currentHsl.clone((value !== null && value !== void 0 ? value : 0) / 360, undefined, undefined);
-        if (onColorChange) {
-            const newColorDef = newHsl.toColorDef();
-            onColorChange(newColorDef);
-        }
-    }, [currentHsl, onColorChange]);
-    const handleSaturationValueChange = React.useCallback((value, _stringValue) => {
-        const newHsl = currentHsl.clone(undefined, (value !== null && value !== void 0 ? value : 0) / 100, undefined);
-        if (onColorChange) {
-            const newColorDef = newHsl.toColorDef();
-            onColorChange(newColorDef);
-        }
-    }, [currentHsl, onColorChange]);
-    const handleRedChange = React.useCallback((value, _stringValue) => {
-        if (undefined !== value) {
-            const newColorDef = core_common_1.ColorDef.from(value, color.g, color.b);
-            if (onColorChange) {
-                onColorChange(newColorDef);
-            }
-        }
-    }, [color, onColorChange]);
-    const handleGreenChange = React.useCallback((value, _stringValue) => {
-        if (undefined !== value) {
-            const newColorDef = core_common_1.ColorDef.from(color.r, value, color.b);
-            if (onColorChange) {
-                onColorChange(newColorDef);
-            }
-        }
-    }, [color, onColorChange]);
-    const handleBlueChange = React.useCallback((value, _stringValue) => {
-        if (undefined !== value) {
-            const newColorDef = core_common_1.ColorDef.from(color.r, color.g, value);
-            if (onColorChange) {
-                onColorChange(newColorDef);
-            }
-        }
-    }, [color, onColorChange]);
-    return (React.createElement("div", { "data-testid": "components-colorpicker-panel", className: "components-colorpicker-panel" },
-        React.createElement("div", { className: "components-colorpicker-panel-color" },
-            React.createElement("div", { className: "components-colorpicker-saturation" },
-                React.createElement(SaturationPicker_1.SaturationPicker, { hsv: currentHsv, onSaturationChange: handleSaturationChange })),
-            React.createElement("div", { className: "components-colorpicker-hue" },
-                React.createElement(HueSlider_1.HueSlider, { hsv: currentHsv, onHueChange: handleHueChange, isHorizontal: false }))),
-        (colorInputType === "RGB") &&
-            React.createElement("div", { "data-testid": "components-colorpicker-input-panel", className: "components-colorpicker-input-panel" },
-                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
-                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "R"),
-                    React.createElement(core_react_1.NumberInput, { "data-testid": "components-colorpicker-input-value-red", value: color.r, onChange: handleRedChange, min: 0, max: 255 })),
-                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
-                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "G"),
-                    React.createElement(core_react_1.NumberInput, { "data-testid": "components-colorpicker-input-value-green", value: color.g, onChange: handleGreenChange, min: 0, max: 255 })),
-                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
-                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "B"),
-                    React.createElement(core_react_1.NumberInput, { "data-testid": "components-colorpicker-input-value-blue", value: color.b, onChange: handleBlueChange, min: 0, max: 255 }))),
-        (colorInputType === "HSL") &&
-            React.createElement("div", { "data-testid": "components-colorpicker-input-panel", className: "components-colorpicker-input-panel" },
-                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
-                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "H"),
-                    React.createElement(core_react_1.NumberInput, { "data-testid": "components-colorpicker-input-value-hue", value: Math.round(currentHsl.h * 360), onChange: handleHueValueChange, min: 0, max: 360 })),
-                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
-                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "S"),
-                    React.createElement(core_react_1.NumberInput, { "data-testid": "components-colorpicker-input-value-saturation", value: Math.round(currentHsl.s * 100), onChange: handleSaturationValueChange, min: 0, max: 100 })),
-                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
-                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "L"),
-                    React.createElement(core_react_1.NumberInput, { "data-testid": "components-colorpicker-input-value-lightness", value: Math.round(currentHsl.l * 100), onChange: handleLightnessValueChange, min: 0, max: 100 }))),
-        colorPresets && colorPresets.length &&
-            React.createElement("div", { className: "components-colorpicker-panel-presets" }, colorPresets.map((preset, index) => React.createElement(Swatch_1.ColorSwatch, { className: "components-colorpicker-panel-swatch", key: index, colorDef: preset, round: false, onColorPick: handlePresetColorPick })))));
-}
-exports.ColorPickerPanel = ColorPickerPanel;
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorPickerPanel = void 0;
+// cSpell:ignore colorpicker
+const React = __importStar(require("react"));
+const core_common_1 = require("@itwin/core-common");
+const Swatch_1 = require("./Swatch");
+const HueSlider_1 = require("./HueSlider");
+const SaturationPicker_1 = require("./SaturationPicker");
+require("./ColorPickerPanel.scss");
+const core_react_1 = require("@itwin/core-react");
+/**
+ * Color Picker Dialog to use as modal dialog.
+ * @public @deprecated use `ColorPicker` for itwinui-react
+ */
+// istanbul ignore next
+function ColorPickerPanel({ activeColor, onColorChange, colorPresets, colorInputType }) {
+    const handlePresetColorPick = React.useCallback((newColor, e) => {
+        e.preventDefault();
+        if (onColorChange) {
+            onColorChange(newColor);
+        }
+    }, [onColorChange]);
+    const handleHueChange = React.useCallback((newHsvColor) => {
+        // for a ColorDef to be created from hsv s can't be 0
+        if (newHsvColor.s === 0) {
+            newHsvColor = newHsvColor.clone(undefined, 0.5);
+        }
+        const newColorDef = newHsvColor.toColorDef();
+        if (onColorChange) {
+            onColorChange(newColorDef);
+        }
+    }, [onColorChange]);
+    const handleSaturationChange = React.useCallback((newHsvColor) => {
+        const newColorDef = newHsvColor.toColorDef();
+        if (onColorChange) {
+            onColorChange(newColorDef);
+        }
+    }, [onColorChange]);
+    const currentHsl = React.useMemo(() => activeColor.toHSL(), [activeColor]);
+    const currentHsv = React.useMemo(() => activeColor.toHSV(), [activeColor]);
+    const color = React.useMemo(() => activeColor.colors, [activeColor]);
+    const handleLightnessValueChange = React.useCallback((value, _stringValue) => {
+        const newHsl = currentHsl.clone(undefined, undefined, (value !== null && value !== void 0 ? value : 0) / 100);
+        if (onColorChange) {
+            const newColorDef = newHsl.toColorDef();
+            onColorChange(newColorDef);
+        }
+    }, [currentHsl, onColorChange]);
+    const handleHueValueChange = React.useCallback((value, _stringValue) => {
+        const newHsl = currentHsl.clone((value !== null && value !== void 0 ? value : 0) / 360, undefined, undefined);
+        if (onColorChange) {
+            const newColorDef = newHsl.toColorDef();
+            onColorChange(newColorDef);
+        }
+    }, [currentHsl, onColorChange]);
+    const handleSaturationValueChange = React.useCallback((value, _stringValue) => {
+        const newHsl = currentHsl.clone(undefined, (value !== null && value !== void 0 ? value : 0) / 100, undefined);
+        if (onColorChange) {
+            const newColorDef = newHsl.toColorDef();
+            onColorChange(newColorDef);
+        }
+    }, [currentHsl, onColorChange]);
+    const handleRedChange = React.useCallback((value, _stringValue) => {
+        if (undefined !== value) {
+            const newColorDef = core_common_1.ColorDef.from(value, color.g, color.b);
+            if (onColorChange) {
+                onColorChange(newColorDef);
+            }
+        }
+    }, [color, onColorChange]);
+    const handleGreenChange = React.useCallback((value, _stringValue) => {
+        if (undefined !== value) {
+            const newColorDef = core_common_1.ColorDef.from(color.r, value, color.b);
+            if (onColorChange) {
+                onColorChange(newColorDef);
+            }
+        }
+    }, [color, onColorChange]);
+    const handleBlueChange = React.useCallback((value, _stringValue) => {
+        if (undefined !== value) {
+            const newColorDef = core_common_1.ColorDef.from(color.r, color.g, value);
+            if (onColorChange) {
+                onColorChange(newColorDef);
+            }
+        }
+    }, [color, onColorChange]);
+    return (React.createElement("div", { "data-testid": "components-colorpicker-panel", className: "components-colorpicker-panel" },
+        React.createElement("div", { className: "components-colorpicker-panel-color" },
+            React.createElement("div", { className: "components-colorpicker-saturation" },
+                React.createElement(SaturationPicker_1.SaturationPicker, { hsv: currentHsv, onSaturationChange: handleSaturationChange })),
+            React.createElement("div", { className: "components-colorpicker-hue" },
+                React.createElement(HueSlider_1.HueSlider, { hsv: currentHsv, onHueChange: handleHueChange, isHorizontal: false }))),
+        (colorInputType === "RGB") &&
+            React.createElement("div", { "data-testid": "components-colorpicker-input-panel", className: "components-colorpicker-input-panel" },
+                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
+                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "R"),
+                    React.createElement(core_react_1.NumberInput, { "data-testid": "components-colorpicker-input-value-red", value: color.r, onChange: handleRedChange, min: 0, max: 255 })),
+                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
+                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "G"),
+                    React.createElement(core_react_1.NumberInput, { "data-testid": "components-colorpicker-input-value-green", value: color.g, onChange: handleGreenChange, min: 0, max: 255 })),
+                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
+                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "B"),
+                    React.createElement(core_react_1.NumberInput, { "data-testid": "components-colorpicker-input-value-blue", value: color.b, onChange: handleBlueChange, min: 0, max: 255 }))),
+        (colorInputType === "HSL") &&
+            React.createElement("div", { "data-testid": "components-colorpicker-input-panel", className: "components-colorpicker-input-panel" },
+                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
+                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "H"),
+                    React.createElement(core_react_1.NumberInput, { "data-testid": "components-colorpicker-input-value-hue", value: Math.round(currentHsl.h * 360), onChange: handleHueValueChange, min: 0, max: 360 })),
+                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
+                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "S"),
+                    React.createElement(core_react_1.NumberInput, { "data-testid": "components-colorpicker-input-value-saturation", value: Math.round(currentHsl.s * 100), onChange: handleSaturationValueChange, min: 0, max: 100 })),
+                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
+                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "L"),
+                    React.createElement(core_react_1.NumberInput, { "data-testid": "components-colorpicker-input-value-lightness", value: Math.round(currentHsl.l * 100), onChange: handleLightnessValueChange, min: 0, max: 100 }))),
+        colorPresets && colorPresets.length &&
+            React.createElement("div", { className: "components-colorpicker-panel-presets" }, colorPresets.map((preset, index) => React.createElement(Swatch_1.ColorSwatch, { className: "components-colorpicker-panel-swatch", key: index, colorDef: preset, round: false, onColorPick: handlePresetColorPick })))));
+}
+exports.ColorPickerPanel = ColorPickerPanel;
 //# sourceMappingURL=ColorPickerPanel.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerPanel.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPanel.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 { ColorDef, HSVColor } from \"@itwin/core-common\";\r\nimport { ColorSwatch } from \"./Swatch\";\r\nimport { HueSlider } from \"./HueSlider\";\r\nimport { SaturationPicker } from \"./SaturationPicker\";\r\nimport \"./ColorPickerPanel.scss\";\r\nimport { NumberInput } from \"@itwin/core-react\";\r\n\r\n/** Properties for the [[ColorPickerPanel]] React component\r\n * @public @deprecated use `ColorPicker` for itwinui-react\r\n */\r\nexport interface ColorPickerPanelProps {\r\n  activeColor: ColorDef;\r\n  onColorChange: (selectedColor: ColorDef) => void;\r\n  colorPresets?: ColorDef[];\r\n  /** If set show either HSL or RGB input values. If undefined no input value is shown */\r\n  colorInputType?: \"HSL\" | \"RGB\";\r\n}\r\n\r\n/**\r\n * Color Picker Dialog to use as modal dialog.\r\n * @public @deprecated use `ColorPicker` for itwinui-react\r\n */\r\n// istanbul ignore next\r\nexport function ColorPickerPanel({ activeColor, onColorChange, colorPresets, colorInputType }: ColorPickerPanelProps) { // eslint-disable-line deprecation/deprecation\r\n  const handlePresetColorPick = React.useCallback((newColor: ColorDef, e: React.MouseEvent<Element, MouseEvent>) => {\r\n    e.preventDefault();\r\n    if (onColorChange) {\r\n      onColorChange(newColor);\r\n    }\r\n  }, [onColorChange]);\r\n\r\n  const handleHueChange = React.useCallback((newHsvColor: HSVColor) => {\r\n    // for a ColorDef to be created from hsv s can't be 0\r\n    if (newHsvColor.s === 0) {\r\n      newHsvColor = newHsvColor.clone(undefined, 0.5);\r\n    }\r\n\r\n    const newColorDef = newHsvColor.toColorDef();\r\n    if (onColorChange) {\r\n      onColorChange(newColorDef);\r\n    }\r\n  }, [onColorChange]);\r\n\r\n  const handleSaturationChange = React.useCallback((newHsvColor: HSVColor) => {\r\n    const newColorDef = newHsvColor.toColorDef();\r\n    if (onColorChange) {\r\n      onColorChange(newColorDef);\r\n    }\r\n  }, [onColorChange]);\r\n\r\n  const currentHsl = React.useMemo(() => activeColor.toHSL(), [activeColor]);\r\n  const currentHsv = React.useMemo(() => activeColor.toHSV(), [activeColor]);\r\n  const color = React.useMemo(() => activeColor.colors, [activeColor]);\r\n\r\n  const handleLightnessValueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n    const newHsl = currentHsl.clone(undefined, undefined, (value ?? 0) / 100);\r\n\r\n    if (onColorChange) {\r\n      const newColorDef = newHsl.toColorDef();\r\n      onColorChange(newColorDef);\r\n    }\r\n  }, [currentHsl, onColorChange]);\r\n\r\n  const handleHueValueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n    const newHsl = currentHsl.clone((value ?? 0) / 360, undefined, undefined);\r\n\r\n    if (onColorChange) {\r\n      const newColorDef = newHsl.toColorDef();\r\n      onColorChange(newColorDef);\r\n    }\r\n  }, [currentHsl, onColorChange]);\r\n\r\n  const handleSaturationValueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n    const newHsl = currentHsl.clone(undefined, (value ?? 0) / 100, undefined);\r\n\r\n    if (onColorChange) {\r\n      const newColorDef = newHsl.toColorDef();\r\n      onColorChange(newColorDef);\r\n    }\r\n  }, [currentHsl, onColorChange]);\r\n\r\n  const handleRedChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n    if (undefined !== value) {\r\n      const newColorDef = ColorDef.from(value, color.g, color.b);\r\n      if (onColorChange) {\r\n        onColorChange(newColorDef);\r\n      }\r\n    }\r\n  }, [color, onColorChange]);\r\n\r\n  const handleGreenChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n    if (undefined !== value) {\r\n      const newColorDef = ColorDef.from(color.r, value, color.b);\r\n      if (onColorChange) {\r\n        onColorChange(newColorDef);\r\n      }\r\n    }\r\n  }, [color, onColorChange]);\r\n\r\n  const handleBlueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n    if (undefined !== value) {\r\n      const newColorDef = ColorDef.from(color.r, color.g, value);\r\n      if (onColorChange) {\r\n        onColorChange(newColorDef);\r\n      }\r\n    }\r\n  }, [color, onColorChange]);\r\n\r\n  return (\r\n    <div data-testid=\"components-colorpicker-panel\" className=\"components-colorpicker-panel\">\r\n      <div className=\"components-colorpicker-panel-color\">\r\n        <div className=\"components-colorpicker-saturation\">\r\n          <SaturationPicker hsv={currentHsv} onSaturationChange={handleSaturationChange} />\r\n        </div>\r\n        <div className=\"components-colorpicker-hue\">\r\n          <HueSlider hsv={currentHsv} onHueChange={handleHueChange} isHorizontal={false} />\r\n        </div>\r\n      </div>\r\n      {(colorInputType === \"RGB\") &&\r\n        <div data-testid=\"components-colorpicker-input-panel\" className=\"components-colorpicker-input-panel\">\r\n          <div className=\"components-colorpicker-input-value-wrapper\">\r\n            <span className=\"uicore-inputs-labeled-input\">R</span>\r\n            <NumberInput data-testid=\"components-colorpicker-input-value-red\" value={color.r} onChange={handleRedChange} min={0} max={255} />\r\n          </div>\r\n          <div className=\"components-colorpicker-input-value-wrapper\">\r\n            <span className=\"uicore-inputs-labeled-input\">G</span>\r\n            <NumberInput data-testid=\"components-colorpicker-input-value-green\" value={color.g} onChange={handleGreenChange} min={0} max={255} />\r\n          </div>\r\n          <div className=\"components-colorpicker-input-value-wrapper\">\r\n            <span className=\"uicore-inputs-labeled-input\">B</span>\r\n            <NumberInput data-testid=\"components-colorpicker-input-value-blue\" value={color.b} onChange={handleBlueChange} min={0} max={255} />\r\n          </div>\r\n        </div>}\r\n      {(colorInputType === \"HSL\") &&\r\n        <div data-testid=\"components-colorpicker-input-panel\" className=\"components-colorpicker-input-panel\">\r\n          <div className=\"components-colorpicker-input-value-wrapper\">\r\n            <span className=\"uicore-inputs-labeled-input\">H</span>\r\n            <NumberInput data-testid=\"components-colorpicker-input-value-hue\" value={Math.round(currentHsl.h * 360)} onChange={handleHueValueChange} min={0} max={360} />\r\n          </div>\r\n          <div className=\"components-colorpicker-input-value-wrapper\">\r\n            <span className=\"uicore-inputs-labeled-input\">S</span>\r\n            <NumberInput data-testid=\"components-colorpicker-input-value-saturation\" value={Math.round(currentHsl.s * 100)} onChange={handleSaturationValueChange} min={0} max={100} />\r\n          </div>\r\n          <div className=\"components-colorpicker-input-value-wrapper\">\r\n            <span className=\"uicore-inputs-labeled-input\">L</span>\r\n            <NumberInput data-testid=\"components-colorpicker-input-value-lightness\" value={Math.round(currentHsl.l * 100)} onChange={handleLightnessValueChange} min={0} max={100} />\r\n          </div>\r\n        </div>}\r\n\r\n      {\r\n        colorPresets && colorPresets.length &&\r\n        <div className=\"components-colorpicker-panel-presets\">\r\n          {colorPresets.map((preset, index) => <ColorSwatch className=\"components-colorpicker-panel-swatch\" key={index} colorDef={preset} round={false} onColorPick={handlePresetColorPick} />)}\r\n        </div>\r\n      }\r\n    </div>\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"ColorPickerPanel.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPanel.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 { ColorDef, HSVColor } from \"@itwin/core-common\";\nimport { ColorSwatch } from \"./Swatch\";\nimport { HueSlider } from \"./HueSlider\";\nimport { SaturationPicker } from \"./SaturationPicker\";\nimport \"./ColorPickerPanel.scss\";\nimport { NumberInput } from \"@itwin/core-react\";\n\n/** Properties for the [[ColorPickerPanel]] React component\n * @public @deprecated use `ColorPicker` for itwinui-react\n */\nexport interface ColorPickerPanelProps {\n  activeColor: ColorDef;\n  onColorChange: (selectedColor: ColorDef) => void;\n  colorPresets?: ColorDef[];\n  /** If set show either HSL or RGB input values. If undefined no input value is shown */\n  colorInputType?: \"HSL\" | \"RGB\";\n}\n\n/**\n * Color Picker Dialog to use as modal dialog.\n * @public @deprecated use `ColorPicker` for itwinui-react\n */\n// istanbul ignore next\nexport function ColorPickerPanel({ activeColor, onColorChange, colorPresets, colorInputType }: ColorPickerPanelProps) { // eslint-disable-line deprecation/deprecation\n  const handlePresetColorPick = React.useCallback((newColor: ColorDef, e: React.MouseEvent<Element, MouseEvent>) => {\n    e.preventDefault();\n    if (onColorChange) {\n      onColorChange(newColor);\n    }\n  }, [onColorChange]);\n\n  const handleHueChange = React.useCallback((newHsvColor: HSVColor) => {\n    // for a ColorDef to be created from hsv s can't be 0\n    if (newHsvColor.s === 0) {\n      newHsvColor = newHsvColor.clone(undefined, 0.5);\n    }\n\n    const newColorDef = newHsvColor.toColorDef();\n    if (onColorChange) {\n      onColorChange(newColorDef);\n    }\n  }, [onColorChange]);\n\n  const handleSaturationChange = React.useCallback((newHsvColor: HSVColor) => {\n    const newColorDef = newHsvColor.toColorDef();\n    if (onColorChange) {\n      onColorChange(newColorDef);\n    }\n  }, [onColorChange]);\n\n  const currentHsl = React.useMemo(() => activeColor.toHSL(), [activeColor]);\n  const currentHsv = React.useMemo(() => activeColor.toHSV(), [activeColor]);\n  const color = React.useMemo(() => activeColor.colors, [activeColor]);\n\n  const handleLightnessValueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\n    const newHsl = currentHsl.clone(undefined, undefined, (value ?? 0) / 100);\n\n    if (onColorChange) {\n      const newColorDef = newHsl.toColorDef();\n      onColorChange(newColorDef);\n    }\n  }, [currentHsl, onColorChange]);\n\n  const handleHueValueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\n    const newHsl = currentHsl.clone((value ?? 0) / 360, undefined, undefined);\n\n    if (onColorChange) {\n      const newColorDef = newHsl.toColorDef();\n      onColorChange(newColorDef);\n    }\n  }, [currentHsl, onColorChange]);\n\n  const handleSaturationValueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\n    const newHsl = currentHsl.clone(undefined, (value ?? 0) / 100, undefined);\n\n    if (onColorChange) {\n      const newColorDef = newHsl.toColorDef();\n      onColorChange(newColorDef);\n    }\n  }, [currentHsl, onColorChange]);\n\n  const handleRedChange = React.useCallback((value: number | undefined, _stringValue: string) => {\n    if (undefined !== value) {\n      const newColorDef = ColorDef.from(value, color.g, color.b);\n      if (onColorChange) {\n        onColorChange(newColorDef);\n      }\n    }\n  }, [color, onColorChange]);\n\n  const handleGreenChange = React.useCallback((value: number | undefined, _stringValue: string) => {\n    if (undefined !== value) {\n      const newColorDef = ColorDef.from(color.r, value, color.b);\n      if (onColorChange) {\n        onColorChange(newColorDef);\n      }\n    }\n  }, [color, onColorChange]);\n\n  const handleBlueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\n    if (undefined !== value) {\n      const newColorDef = ColorDef.from(color.r, color.g, value);\n      if (onColorChange) {\n        onColorChange(newColorDef);\n      }\n    }\n  }, [color, onColorChange]);\n\n  return (\n    <div data-testid=\"components-colorpicker-panel\" className=\"components-colorpicker-panel\">\n      <div className=\"components-colorpicker-panel-color\">\n        <div className=\"components-colorpicker-saturation\">\n          <SaturationPicker hsv={currentHsv} onSaturationChange={handleSaturationChange} />\n        </div>\n        <div className=\"components-colorpicker-hue\">\n          <HueSlider hsv={currentHsv} onHueChange={handleHueChange} isHorizontal={false} />\n        </div>\n      </div>\n      {(colorInputType === \"RGB\") &&\n        <div data-testid=\"components-colorpicker-input-panel\" className=\"components-colorpicker-input-panel\">\n          <div className=\"components-colorpicker-input-value-wrapper\">\n            <span className=\"uicore-inputs-labeled-input\">R</span>\n            <NumberInput data-testid=\"components-colorpicker-input-value-red\" value={color.r} onChange={handleRedChange} min={0} max={255} />\n          </div>\n          <div className=\"components-colorpicker-input-value-wrapper\">\n            <span className=\"uicore-inputs-labeled-input\">G</span>\n            <NumberInput data-testid=\"components-colorpicker-input-value-green\" value={color.g} onChange={handleGreenChange} min={0} max={255} />\n          </div>\n          <div className=\"components-colorpicker-input-value-wrapper\">\n            <span className=\"uicore-inputs-labeled-input\">B</span>\n            <NumberInput data-testid=\"components-colorpicker-input-value-blue\" value={color.b} onChange={handleBlueChange} min={0} max={255} />\n          </div>\n        </div>}\n      {(colorInputType === \"HSL\") &&\n        <div data-testid=\"components-colorpicker-input-panel\" className=\"components-colorpicker-input-panel\">\n          <div className=\"components-colorpicker-input-value-wrapper\">\n            <span className=\"uicore-inputs-labeled-input\">H</span>\n            <NumberInput data-testid=\"components-colorpicker-input-value-hue\" value={Math.round(currentHsl.h * 360)} onChange={handleHueValueChange} min={0} max={360} />\n          </div>\n          <div className=\"components-colorpicker-input-value-wrapper\">\n            <span className=\"uicore-inputs-labeled-input\">S</span>\n            <NumberInput data-testid=\"components-colorpicker-input-value-saturation\" value={Math.round(currentHsl.s * 100)} onChange={handleSaturationValueChange} min={0} max={100} />\n          </div>\n          <div className=\"components-colorpicker-input-value-wrapper\">\n            <span className=\"uicore-inputs-labeled-input\">L</span>\n            <NumberInput data-testid=\"components-colorpicker-input-value-lightness\" value={Math.round(currentHsl.l * 100)} onChange={handleLightnessValueChange} min={0} max={100} />\n          </div>\n        </div>}\n\n      {\n        colorPresets && colorPresets.length &&\n        <div className=\"components-colorpicker-panel-presets\">\n          {colorPresets.map((preset, index) => <ColorSwatch className=\"components-colorpicker-panel-swatch\" key={index} colorDef={preset} round={false} onColorPick={handlePresetColorPick} />)}\n        </div>\n      }\n    </div>\n  );\n}\n"]}