@itwin/imodel-components-react 3.0.0-dev.77 → 3.0.0-dev.81

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

@@ -0,0 +1 @@
+{"version":3,"file":"AlphaSlider.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/AlphaSlider.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAC5B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAcnD;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,KAAK,CAAC,aAA+B;IAIpE,gBAAgB;IAChB,YAAY,KAAuB;QACjC,KAAK,CAAC,KAAK,CAAC,CAAC;QALP,eAAU,GAA0B,IAAI,CAAC;QACzC,uBAAkB,GAAG,kBAAkB,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAC;QAOxE,qBAAgB,GAAG,CAAC,CAAsE,EAAE,YAAqB,EAAE,KAAa,EAAE,SAAyB,EAAsB,EAAE;YACzL,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,EAAE,eAAe,EAAE,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAC;YAE7F,IAAI,CAAC,GAAG,CAAC,CAAC;YACV,IAAI,OAAO,IAAI,CAAC,EAAE;gBAChB,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC;aACb;iBAAM;gBACL,qBAAqB;gBACrB,IAAI,SAAS,KAAK,CAAC,CAAC,OAAO;oBACzB,OAAO,SAAS,CAAC;gBACnB,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;aACxB;YACD,qBAAqB;YACrB,IAAI,SAAS,KAAK,CAAC;gBACjB,OAAO,SAAS,CAAC;YAEnB,IAAI,CAAC,GAAG,CAAC,CAAC;YACV,IAAI,OAAO,IAAI,CAAC,EAAE;gBAChB,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC;aACb;iBAAM;gBACL,qBAAqB;gBACrB,IAAI,SAAS,KAAK,CAAC,CAAC,OAAO;oBACzB,OAAO;gBACT,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;aACxB;YACD,qBAAqB;YACrB,IAAI,SAAS,KAAK,CAAC;gBACjB,OAAO,SAAS,CAAC;YAEnB,MAAM,IAAI,GAAG,CAAC,GAAG,CAAC,SAAS,CAAC,qBAAqB,EAAE,CAAC,IAAI,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;YAC3E,MAAM,GAAG,GAAG,CAAC,GAAG,CAAC,SAAS,CAAC,qBAAqB,EAAE,CAAC,GAAG,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;YAEzE,IAAI,CAAC,GAAG,CAAC,CAAC;YAEV,IAAI,CAAC,YAAY,EAAE;gBACjB,uBAAuB;gBACvB,IAAI,GAAG,GAAG,CAAC,EAAE;oBACX,CAAC,GAAG,CAAC,CAAC;iBACP;qBAAM,IAAI,GAAG,GAAG,eAAe,EAAE;oBAChC,CAAC,GAAG,CAAC,CAAC;iBACP;qBAAM;oBACL,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,eAAe,CAAC,CAAC;iBACjC;aACF;iBAAM,EAAG,aAAa;gBACrB,uBAAuB;gBACvB,IAAI,IAAI,GAAG,CAAC,EAAE;oBACZ,CAAC,GAAG,CAAC,CAAC;iBACP;qBAAM,IAAI,IAAI,GAAG,cAAc,EAAE;oBAChC,CAAC,GAAG,CAAC,CAAC;iBACP;qBAAM;oBACL,CAAC,GAAG,IAAI,GAAG,cAAc,CAAC;iBAC3B;aACF;YAED,qBAAqB;YACrB,IAAI,CAAC,GAAG,CAAC;gBAAE,CAAC,GAAG,CAAC,CAAC;YACjB,qBAAqB;YACrB,IAAI,CAAC,GAAG,CAAC;gBAAE,CAAC,GAAG,CAAC,CAAC;YACjB,uBAAuB;YACvB,OAAO,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QACvC,CAAC,CAAC;QAOM,cAAS,GAAG,CAAC,CAAsE,EAAE,EAAE;YAC7F,uBAAuB;YACvB,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE;gBAC/C,MAAM,MAAM,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;gBACtI,SAAS,KAAK,MAAM,IAAI,OAAO,IAAI,CAAC,KAAK,CAAC,aAAa,KAAK,UAAU,IAAI,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;aAC5G;QACH,CAAC,CAAC;QAEM,iBAAY,GAAG,CAAC,CAAmC,EAAE,EAAE;YAC7D,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;YAClB,uBAAuB;YACvB,IAAI,IAAI,CAAC,UAAU;gBACjB,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;YAC1B,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,SAAgB,CAAC,CAAC;YAC5D,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QACtD,CAAC,CAAC;QAEM,eAAU,GAAG,CAAC,GAAwC,EAAE,EAAE;YAChE,IAAI,eAAmC,CAAC;YACxC,IAAI,GAAG,CAAC,GAAG,KAAK,UAAU,CAAC,SAAS,IAAI,GAAG,CAAC,GAAG,KAAK,UAAU,CAAC,SAAS,EAAE;gBACxE,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;aAC/D;iBAAM,IAAI,GAAG,CAAC,GAAG,KAAK,UAAU,CAAC,UAAU,IAAI,GAAG,CAAC,GAAG,KAAK,UAAU,CAAC,OAAO,EAAE;gBAC9E,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;aAC/D;iBAAM,IAAI,GAAG,CAAC,GAAG,KAAK,UAAU,CAAC,QAAQ,EAAE;gBAC1C,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;aAC/D;iBAAM,IAAI,GAAG,CAAC,GAAG,KAAK,UAAU,CAAC,MAAM,EAAE;gBACxC,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;aAC/D;iBAAM,IAAI,GAAG,CAAC,GAAG,KAAK,UAAU,CAAC,IAAI,EAAE;gBACtC,eAAe,GAAG,CAAC,CAAC;aACrB;iBAAM;gBACL,uBAAuB;gBACvB,IAAI,GAAG,CAAC,GAAG,KAAK,UAAU,CAAC,GAAG,EAAE;oBAC9B,eAAe,GAAG,CAAC,CAAC;iBACrB;aACF;YAED,uBAAuB;YACvB,IAAI,SAAS,KAAK,eAAe,EAAE;gBACjC,qBAAqB;gBACrB,IAAI,eAAe,GAAG,CAAC;oBAAE,eAAe,GAAG,CAAC,CAAC;gBAC7C,qBAAqB;gBACrB,IAAI,eAAe,GAAG,CAAC;oBAAE,eAAe,GAAG,CAAC,CAAC;gBAC7C,uBAAuB;gBACvB,IAAI,IAAI,CAAC,KAAK,CAAC,aAAa;oBAC1B,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;aAC7C;QACH,CAAC,CAAC;QAEM,eAAU,GAAG,GAAG,EAAE;YACxB,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC/B,CAAC,CAAC;IAxHF,CAAC;IAiED,gBAAgB;IACA,oBAAoB;QAClC,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC;IAsDO,qBAAqB;QAC3B,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,SAAgB,CAAC,CAAC;QAC/D,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;IACzD,CAAC;IAED,gBAAgB;IACA,MAAM;QACpB,MAAM,gBAAgB,GAAG,UAAU,CACjC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,uCAAuC,CAAC,CAAC,CAAC,qCAAqC,EACzG,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QAEF,MAAM,YAAY,GAAwB,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;YACjE,EAAE,IAAI,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC;YAC1C,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;QAE9D,OAAO,CACL,6BAAK,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,iBAAc,iBAAiB;YACtF,4CACc,cAAc,EAC1B,IAAI,EAAC,QAAQ,gBAAa,IAAI,CAAC,kBAAkB,mBAClC,CAAC,mBAAiB,CAAC,mBAAiB,IAAI,CAAC,KAAK,CAAC,KAAK,EACnE,SAAS,EAAC,yBAAyB,EACnC,GAAG,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,GAAG,SAAS,EAC/C,WAAW,EAAE,IAAI,CAAC,YAAY,EAC9B,WAAW,EAAE,IAAI,CAAC,SAAS,EAC3B,YAAY,EAAE,IAAI,CAAC,SAAS,EAC5B,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,IAAI,CAAC,UAAU;gBAE1B,6BAAK,KAAK,EAAE,YAAY,EAAE,SAAS,EAAC,0BAA0B,iBAAa,eAAe,GAAG,CACzF,CACF,CACP,CAAC;IACJ,CAAC;CAEF","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Color\n */\n\nimport \"./AlphaSlider.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { CommonProps } from \"@itwin/core-react\";\nimport { UiIModelComponents } from \"../UiIModelComponents\";\nimport { SpecialKey } from \"@itwin/appui-abstract\";\n\n/** Properties for the [[AlphaSlider]] React component\n * @beta\n */\nexport interface AlphaSliderProps extends React.HTMLAttributes<HTMLDivElement>, CommonProps {\n  /** true if slider is oriented horizontal, else vertical orientation is assumed */\n  isHorizontal?: boolean;\n  /** function to run when user selects color swatch */\n  onAlphaChange?: ((alpha: number) => void) | undefined;\n  /** Alpha value between 0 (transparent) and 1 (opaque) */\n  alpha: number;\n}\n\n/** AlphaSlider component used to set the alpha value.\n * @beta\n */\nexport class AlphaSlider extends React.PureComponent<AlphaSliderProps> {\n  private _container: HTMLDivElement | null = null;\n  private _transparencyLabel = UiIModelComponents.translate(\"color.transparency\");\n\n  /** @internal */\n  constructor(props: AlphaSliderProps) {\n    super(props);\n  }\n\n  private _calculateChange = (e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>, isHorizontal: boolean, alpha: number, container: HTMLDivElement): number | undefined => {\n    e.preventDefault();\n    const { width: containerWidth, height: containerHeight } = container.getBoundingClientRect();\n\n    let x = 0;\n    if (\"pageX\" in e) {\n      x = e.pageX;\n    } else {\n      // istanbul ignore if\n      if (undefined === e.touches)\n        return undefined;\n      x = e.touches[0].pageX;\n    }\n    // istanbul ignore if\n    if (undefined === x)\n      return undefined;\n\n    let y = 0;\n    if (\"pageY\" in e) {\n      y = e.pageY;\n    } else {\n      // istanbul ignore if\n      if (undefined === e.touches)\n        return;\n      y = e.touches[0].pageY;\n    }\n    // istanbul ignore if\n    if (undefined === y)\n      return undefined;\n\n    const left = x - (container.getBoundingClientRect().left + window.scrollX);\n    const top = y - (container.getBoundingClientRect().top + window.scrollY);\n\n    let t = 0;\n\n    if (!isHorizontal) {\n      // istanbul ignore next\n      if (top < 0) {\n        t = 1;\n      } else if (top > containerHeight) {\n        t = 0;\n      } else {\n        t = 1 - (top / containerHeight);\n      }\n    } else {  // horizontal\n      // istanbul ignore next\n      if (left < 0) {\n        t = 0;\n      } else if (left > containerWidth) {\n        t = 1;\n      } else {\n        t = left / containerWidth;\n      }\n    }\n\n    // istanbul ignore if\n    if (t < 0) t = 0;\n    // istanbul ignore if\n    if (t > 1) t = 1;\n    // istanbul ignore next\n    return (alpha !== t) ? t : undefined;\n  };\n\n  /** @internal */\n  public override componentWillUnmount() {\n    this._unbindEventListeners();\n  }\n\n  private _onChange = (e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) => {\n    // istanbul ignore else\n    if (this._container && this.props.onAlphaChange) {\n      const change = this._calculateChange(e, this.props.isHorizontal ? this.props.isHorizontal : false, this.props.alpha, this._container);\n      undefined !== change && typeof this.props.onAlphaChange === \"function\" && this.props.onAlphaChange(change);\n    }\n  };\n\n  private _onMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {\n    this._onChange(e);\n    // istanbul ignore else\n    if (this._container)\n      this._container.focus();\n    window.addEventListener(\"mousemove\", this._onChange as any);\n    window.addEventListener(\"mouseup\", this._onMouseUp);\n  };\n\n  private _onKeyDown = (evt: React.KeyboardEvent<HTMLDivElement>) => {\n    let newTransparency: number | undefined;\n    if (evt.key === SpecialKey.ArrowLeft || evt.key === SpecialKey.ArrowDown) {\n      newTransparency = this.props.alpha - (evt.ctrlKey ? .1 : .05);\n    } else if (evt.key === SpecialKey.ArrowRight || evt.key === SpecialKey.ArrowUp) {\n      newTransparency = this.props.alpha + (evt.ctrlKey ? .1 : .05);\n    } else if (evt.key === SpecialKey.PageDown) {\n      newTransparency = this.props.alpha - (evt.ctrlKey ? .5 : .25);\n    } else if (evt.key === SpecialKey.PageUp) {\n      newTransparency = this.props.alpha + (evt.ctrlKey ? .5 : .25);\n    } else if (evt.key === SpecialKey.Home) {\n      newTransparency = 0;\n    } else {\n      // istanbul ignore else\n      if (evt.key === SpecialKey.End) {\n        newTransparency = 1;\n      }\n    }\n\n    // istanbul ignore else\n    if (undefined !== newTransparency) {\n      // istanbul ignore if\n      if (newTransparency > 1) newTransparency = 1;\n      // istanbul ignore if\n      if (newTransparency < 0) newTransparency = 0;\n      // istanbul ignore else\n      if (this.props.onAlphaChange)\n        this.props.onAlphaChange(newTransparency);\n    }\n  };\n\n  private _onMouseUp = () => {\n    this._unbindEventListeners();\n  };\n\n  private _unbindEventListeners() {\n    window.removeEventListener(\"mousemove\", this._onChange as any);\n    window.removeEventListener(\"mouseup\", this._onMouseUp);\n  }\n\n  /** @internal */\n  public override render(): React.ReactNode {\n    const containerClasses = classnames(\n      this.props.isHorizontal ? \"components-alpha-container-horizontal\" : \"components-alpha-container-vertical\",\n      this.props.className,\n    );\n\n    const pointerStyle: React.CSSProperties = this.props.isHorizontal ?\n      { left: `${(this.props.alpha * 100)}%` } :\n      { left: `0px`, top: `${-(this.props.alpha * 100) + 100}%` };\n\n    return (\n      <div className={containerClasses} style={this.props.style} data-testid=\"alpha-container\">\n        <div\n          data-testid=\"alpha-slider\"\n          role=\"slider\" aria-label={this._transparencyLabel}\n          aria-valuemin={0} aria-valuemax={1} aria-valuenow={this.props.alpha}\n          className=\"components-alpha-slider\"\n          ref={(container) => this._container = container}\n          onMouseDown={this._onMouseDown}\n          onTouchMove={this._onChange}\n          onTouchStart={this._onChange}\n          tabIndex={0}\n          onKeyDown={this._onKeyDown}\n        >\n          <div style={pointerStyle} className=\"components-alpha-pointer\" data-testid=\"alpha-pointer\" />\n        </div>\n      </div>\n    );\n  }\n\n}\n"]}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerButton.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerButton.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,0BAA0B,CAAC;AAElC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAe,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE3D,OAAO,EAAE,WAAW,EAA+B,MAAM,mBAAmB,CAAC;AAmB7E;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW;IAClG,mBAAmB;IACnB,YAAY,EAAE,QAAQ,CAAC;IACvB,uBAAuB;IACvB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,qDAAqD;IACrD,WAAW,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACtD,2DAA2D;IAC3D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,wBAAwB;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gEAAgE;IAChE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAyFD;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,GAAG,CAAC,OAAO,GAAG,IAAkC,CAAC"}

package/lib/esm/imodel-components-react/color/ColorPickerButton.js

@@ -0,0 +1,83 @@
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+import "./ColorPickerButton.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { ColorByName, ColorDef } from "@itwin/core-common";
+import { RelativePosition } from "@itwin/appui-abstract";
+import { Popup, useRefs, WebFontIcon } from "@itwin/core-react";
+import { ColorSwatch } from "./Swatch";
+import { getCSSColorFromDef } from "./getCSSColorFromDef";
+// cSpell:ignore colorpicker
+function ColorOptions({ handleColorPicked, options, numColumns, round, title }) {
+    const containerStyle = { gridTemplateColumns: `repeat(${numColumns}, 1fr)` };
+    return (React.createElement("div", { className: "components-colorpicker-popup-container" },
+        title && React.createElement("h4", null, title),
+        React.createElement("div", { "data-testid": "components-colorpicker-popup-colors", className: "components-colorpicker-popup-colors", style: containerStyle }, options.map((color, index) => React.createElement(ColorSwatch, { className: "components-colorpicker-swatch", key: index, colorDef: color, onColorPick: handleColorPicked, round: round })))));
+}
+// Defined using following pattern (const ColorPickerButton at bottom) to ensure useful API documentation is extracted
+const ForwardRefColorPickerButton = React.forwardRef(function ForwardRefColorPickerButton({ className, colorDefs, disabled, dropDownTitle, initialColor, numColumns, onColorPick, readonly, round, showCaret, style }, ref) {
+    const target = React.useRef();
+    const refs = useRefs(target, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.
+    const [showPopup, setShowPopup] = React.useState(false);
+    const [colorDef, setColorDef] = React.useState(initialColor);
+    // See if new initialColor props have changed since component mounted
+    React.useEffect(() => {
+        setColorDef(initialColor);
+    }, [initialColor]);
+    const defaultColors = React.useRef([
+        ColorDef.create(ColorByName.red),
+        ColorDef.create(ColorByName.orange),
+        ColorDef.create(ColorByName.yellow),
+        ColorDef.create(ColorByName.green),
+        ColorDef.create(ColorByName.blue),
+        ColorDef.create(ColorByName.indigo),
+        ColorDef.create(ColorByName.violet),
+        ColorDef.create(ColorByName.black),
+        ColorDef.create(ColorByName.white),
+        ColorDef.create(ColorByName.cyan),
+        ColorDef.create(ColorByName.fuchsia),
+        ColorDef.create(ColorByName.tan),
+        ColorDef.create(ColorByName.gray),
+        ColorDef.create(ColorByName.brown),
+        ColorDef.create(ColorByName.purple),
+        ColorDef.create(ColorByName.olive),
+    ]);
+    const closePopup = React.useCallback(() => {
+        setShowPopup(false);
+    }, []);
+    const togglePopup = React.useCallback(() => {
+        setShowPopup(!showPopup);
+    }, [showPopup]);
+    const handleColorPicked = React.useCallback((color) => {
+        closePopup();
+        // istanbul ignore else
+        if (!color.equals(colorDef)) {
+            setColorDef(color);
+            onColorPick && onColorPick(color);
+        }
+    }, [closePopup, colorDef, onColorPick]);
+    const rgbaString = getCSSColorFromDef(colorDef);
+    const buttonStyle = { ...style };
+    const swatchStyle = { backgroundColor: rgbaString };
+    const buttonClassNames = classnames("components-colorpicker-button", round && "round", readonly && "readonly", className);
+    const colorOptions = colorDefs && colorDefs.length ? colorDefs : defaultColors.current;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("button", { "data-testid": "components-colorpicker-button", "data-value": rgbaString, onClick: togglePopup, className: buttonClassNames, style: buttonStyle, disabled: disabled, ref: refs },
+            React.createElement("div", { className: "components-colorpicker-button-container" },
+                React.createElement("div", { className: "components-colorpicker-button-color-swatch", style: swatchStyle }),
+                showCaret && React.createElement(WebFontIcon, { className: "components-caret", iconName: showPopup ? "icon-caret-up" : "icon-caret-down", iconSize: "x-small" }))),
+        React.createElement(Popup, { className: "components-colorpicker-popup", isOpen: showPopup, position: RelativePosition.BottomLeft, onClose: closePopup, target: target.current, closeOnNestedPopupOutsideClick: true },
+            React.createElement(ColorOptions, { handleColorPicked: handleColorPicked, options: colorOptions, numColumns: numColumns !== null && numColumns !== void 0 ? numColumns : 4, round: !!round, title: dropDownTitle }))));
+});
+/** ColorPickerButton component
+ * @note Using forwardRef so the ColorEditor (Type Editor) can access the ref of the button element inside this component.
+ * @beta
+ */
+export const ColorPickerButton = ForwardRefColorPickerButton;
+//# sourceMappingURL=ColorPickerButton.js.map

package/lib/esm/imodel-components-react/color/ColorPickerButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerButton.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerButton.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Color\n */\n\nimport \"./ColorPickerButton.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { ColorByName, ColorDef } from \"@itwin/core-common\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\nimport { CommonProps, Popup, useRefs, WebFontIcon } from \"@itwin/core-react\";\nimport { ColorSwatch } from \"./Swatch\";\nimport { getCSSColorFromDef } from \"./getCSSColorFromDef\";\n\n// cSpell:ignore colorpicker\n\nfunction ColorOptions({ handleColorPicked, options, numColumns, round, title }: { handleColorPicked: ((color: ColorDef) => void), options: ColorDef[], numColumns: number, round: boolean, title?: string }) {\n  const containerStyle: React.CSSProperties = { gridTemplateColumns: `repeat(${numColumns}, 1fr)` };\n  return (\n    <div className=\"components-colorpicker-popup-container\">\n      {title && <h4>{title}</h4>}\n      <div data-testid=\"components-colorpicker-popup-colors\" className=\"components-colorpicker-popup-colors\" style={containerStyle}>\n        {options.map((color, index) => <ColorSwatch className=\"components-colorpicker-swatch\" key={index} colorDef={color}\n          onColorPick={handleColorPicked} round={round} />)}\n      </div>\n    </div>\n  );\n}\n\n/** Properties for the [[ColorPickerButton]] React component\n * @beta\n */\nexport interface ColorPickerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\n  /** Active color */\n  initialColor: ColorDef;\n  /** Available colors */\n  colorDefs?: ColorDef[];\n  /** Function to run when user selects color swatch */\n  onColorPick?: ((color: ColorDef) => void) | undefined;\n  /** Show swatches as squares unless round is set to true */\n  round?: boolean;\n  /** Disabled or not */\n  disabled?: boolean;\n  /** Readonly or not */\n  readonly?: boolean;\n  /** Title to show at top of DropDown */\n  dropDownTitle?: string;\n  /** Number of columns */\n  numColumns?: number;\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}\n\n// Defined using following pattern (const ColorPickerButton at bottom) to ensure useful API documentation is extracted\nconst ForwardRefColorPickerButton = React.forwardRef<HTMLButtonElement, ColorPickerProps>(\n  function ForwardRefColorPickerButton({ className, colorDefs, disabled, dropDownTitle, initialColor, numColumns, onColorPick, readonly, round, showCaret, style }, ref) {\n    const target = React.useRef<HTMLButtonElement>();\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(initialColor);\n\n    // See if new initialColor props have changed since component mounted\n    React.useEffect(() => {\n      setColorDef(initialColor);\n    }, [initialColor]);\n\n    const defaultColors = React.useRef(\n      [\n        ColorDef.create(ColorByName.red),\n        ColorDef.create(ColorByName.orange),\n        ColorDef.create(ColorByName.yellow),\n        ColorDef.create(ColorByName.green),\n        ColorDef.create(ColorByName.blue),\n        ColorDef.create(ColorByName.indigo),\n        ColorDef.create(ColorByName.violet),\n        ColorDef.create(ColorByName.black),\n        ColorDef.create(ColorByName.white),\n        ColorDef.create(ColorByName.cyan),\n        ColorDef.create(ColorByName.fuchsia),\n        ColorDef.create(ColorByName.tan),\n        ColorDef.create(ColorByName.gray),\n        ColorDef.create(ColorByName.brown),\n        ColorDef.create(ColorByName.purple),\n        ColorDef.create(ColorByName.olive),\n      ]);\n\n    const closePopup = React.useCallback(() => {\n      setShowPopup(false);\n    }, []);\n\n    const togglePopup = React.useCallback(() => {\n      setShowPopup(!showPopup);\n    }, [showPopup]);\n\n    const handleColorPicked = React.useCallback((color: ColorDef) => {\n      closePopup();\n\n      // istanbul ignore else\n      if (!color.equals(colorDef)) {\n        setColorDef(color);\n        onColorPick && onColorPick(color);\n      }\n    }, [closePopup, colorDef, onColorPick]);\n\n    const rgbaString = getCSSColorFromDef(colorDef);\n\n    const buttonStyle = { ...style } as React.CSSProperties;\n    const swatchStyle = { backgroundColor: rgbaString } as React.CSSProperties;\n\n    const buttonClassNames = classnames(\"components-colorpicker-button\",\n      round && \"round\",\n      readonly && \"readonly\",\n      className,\n    );\n\n    const colorOptions = colorDefs && colorDefs.length ? colorDefs : defaultColors.current;\n    return (\n      <>\n        <button data-testid=\"components-colorpicker-button\" data-value={rgbaString} onClick={togglePopup} className={buttonClassNames}\n          style={buttonStyle} disabled={disabled} ref={refs} >\n          <div className=\"components-colorpicker-button-container\">\n            <div className=\"components-colorpicker-button-color-swatch\" style={swatchStyle} />\n            {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={RelativePosition.BottomLeft}\n          onClose={closePopup}\n          target={target.current}\n          closeOnNestedPopupOutsideClick\n        >\n          <ColorOptions handleColorPicked={handleColorPicked} options={colorOptions} numColumns={numColumns ?? 4} round={!!round} title={dropDownTitle} />\n        </Popup>\n      </>\n    );\n  }\n);\n\n/** ColorPickerButton component\n * @note Using forwardRef so the ColorEditor (Type Editor) can access the ref of the button element inside this component.\n * @beta\n */\nexport const ColorPickerButton: (props: ColorPickerProps) => JSX.Element | null = ForwardRefColorPickerButton;\n\n"]}

package/lib/esm/imodel-components-react/color/ColorPickerButton.scss

@@ -0,0 +1,92 @@
+/*---------------------------------------------------------------------------------------------
+* 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";
+@import "~@itwin/itwinui-css/scss/style/typography";
+
+button.components-colorpicker-button {
+  font-family: $iui-font-family;
+  font-size: $iui-font-size;
+  color: $buic-foreground-body;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  background-color: transparent;
+  border: none;
+  padding: 0;
+
+  >.components-colorpicker-button-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-radius: 3px;
+
+    >.components-colorpicker-button-color-swatch {
+      border: 1px solid $buic-inputs-border;
+      border-radius: 3px;
+      width: 1.25em;
+      height: 1.25em;
+    }
+
+    >.components-caret {
+      margin-left: .25em;
+      margin-right: .25em;
+    }
+  }
+
+  &:not(.readonly) {
+    cursor: pointer;
+  }
+
+  &:disabled {
+    pointer-events: none;
+
+    >.components-colorpicker-button-container {
+      >.components-caret {
+        color: $buic-icon-color-disabled;
+      }
+    }
+  }
+
+  &.round {
+    .components-colorpicker-button-container {
+      border-bottom-left-radius: 50%;
+      border-top-left-radius: 50%;
+    }
+
+    .components-colorpicker-button-color-swatch {
+      border-radius: 50%;
+    }
+  }
+
+}
+
+.components-colorpicker-popup {
+  border: 1px solid $buic-inputs-border;
+  border-radius: 6px;
+
+  .components-colorpicker-popup-container {
+    color: $buic-foreground-body;
+    background: $buic-background-control;
+    border-radius: 6px;
+
+    >.components-colorpicker-popup-colors {
+      display: grid;
+      grid-gap: 8px;
+      padding: 8px;
+
+      >.components-colorpicker-swatch {
+        height: 1.5em;
+        width: 1.5em;
+        transition: scale 0.2s ease;
+        cursor: pointer;
+        outline: none;
+
+        &:hover {
+          transform: scale(1.15);
+        }
+      }
+    }
+  }
+}

package/lib/esm/imodel-components-react/color/ColorPickerDialog.d.ts

@@ -0,0 +1,23 @@
+/** @packageDocumentation
+ * @module Color
+ */
+/// <reference types="react" />
+import { ColorDef } from "@itwin/core-common";
+/** Properties for the [[ColorPickerDialog]] React component
+ * @beta
+ */
+export interface ColorPickerDialogProps {
+    dialogTitle: string;
+    color: ColorDef;
+    onOkResult: (selectedColor: ColorDef) => void;
+    onCancelResult: () => 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.
+ * @beta
+ */
+export declare function ColorPickerDialog({ dialogTitle, color, onOkResult, onCancelResult, colorPresets, colorInputType }: ColorPickerDialogProps): JSX.Element;
+//# sourceMappingURL=ColorPickerDialog.d.ts.map

package/lib/esm/imodel-components-react/color/ColorPickerDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerDialog.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerDialog.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAOH,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAG9C;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,QAAQ,CAAC;IAChB,UAAU,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC1B,uFAAuF;IACvF,cAAc,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;CAChC;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,sBAAsB,eAwCzI"}

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

@@ -0,0 +1,39 @@
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+// cSpell:ignore colorpicker
+import * as React from "react";
+import { DialogButtonType } from "@itwin/appui-abstract";
+import { Dialog } from "@itwin/core-react";
+import { ColorPickerPanel } from "./ColorPickerPanel";
+/**
+ * Color Picker Dialog to use as modal dialog.
+ * @beta
+ */
+export 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 handleColorChange = React.useCallback((newColorDef) => {
+        setActiveColor(newColorDef);
+    }, []);
+    const buttonCluster = React.useMemo(() => [
+        { type: DialogButtonType.OK, onClick: handleOk },
+        { type: DialogButtonType.Cancel, onClick: handleCancel },
+    ], [handleCancel, handleOk]);
+    return (React.createElement("div", { ref: dialogContainer },
+        React.createElement(Dialog, { title: dialogTitle, opened: true, resizable: true, movable: true, modal: true, buttonCluster: buttonCluster, onClose: handleCancel, onEscape: handleCancel, minHeight: 340, maxWidth: 400 },
+            React.createElement(ColorPickerPanel, { colorInputType: colorInputType, activeColor: activeColor, colorPresets: colorPresets, onColorChange: handleColorChange }))));
+}
+//# sourceMappingURL=ColorPickerDialog.js.map

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

@@ -0,0 +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,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAetD;;;GAGG;AACH,MAAM,UAAU,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,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,WAAqB,EAAE,EAAE;QACpE,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,gBAAgB,CAAC,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAChD,EAAE,IAAI,EAAE,gBAAgB,CAAC,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE;KACzD,EAAE,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE7B,OAAO,CACL,6BAAK,GAAG,EAAE,eAAe;QACvB,oBAAC,MAAM,IACL,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,IAAI,EACZ,SAAS,EAAE,IAAI,EACf,OAAO,EAAE,IAAI,EACb,KAAK,EAAE,IAAI,EACX,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,GAAG;YAEb,oBAAC,gBAAgB,IAAC,cAAc,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,iBAAiB,GAAI,CACrI,CACJ,CACR,CAAC;AACJ,CAAC","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 { ColorPickerPanel } from \"./ColorPickerPanel\";\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  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 * @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 handleColorChange = React.useCallback((newColorDef: ColorDef) => {\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  return (\n    <div ref={dialogContainer}>\n      <Dialog\n        title={dialogTitle}\n        opened={true}\n        resizable={true}\n        movable={true}\n        modal={true}\n        buttonCluster={buttonCluster}\n        onClose={handleCancel}\n        onEscape={handleCancel}\n        minHeight={340}\n        maxWidth={400}\n      >\n        <ColorPickerPanel colorInputType={colorInputType} activeColor={activeColor} colorPresets={colorPresets} onColorChange={handleColorChange} />\n      </Dialog>\n    </div >\n  );\n}\n"]}

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

@@ -0,0 +1,22 @@
+/** @packageDocumentation
+ * @module Color
+ */
+/// <reference types="react" />
+import { ColorDef } from "@itwin/core-common";
+import "./ColorPickerPanel.scss";
+/** Properties for the [[ColorPickerPanel]] React component
+ * @public
+ */
+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
+ */
+export declare function ColorPickerPanel({ activeColor, onColorChange, colorPresets, colorInputType }: ColorPickerPanelProps): JSX.Element;
+//# sourceMappingURL=ColorPickerPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerPanel.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPanel.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAKH,OAAO,EAAE,QAAQ,EAAY,MAAM,oBAAoB,CAAC;AAIxD,OAAO,yBAAyB,CAAC;AAGjC;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,WAAW,EAAE,QAAQ,CAAC;IACtB,aAAa,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAC;IACjD,YAAY,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC1B,uFAAuF;IACvF,cAAc,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;CAChC;AAED;;;GAGG;AAEH,wBAAgB,gBAAgB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,qBAAqB,eAuInH"}

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

@@ -0,0 +1,123 @@
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+// cSpell:ignore colorpicker
+import * as React from "react";
+import { ColorDef } from "@itwin/core-common";
+import { ColorSwatch } from "./Swatch";
+import { HueSlider } from "./HueSlider";
+import { SaturationPicker } from "./SaturationPicker";
+import "./ColorPickerPanel.scss";
+import { NumberInput } from "@itwin/core-react";
+/**
+ * Color Picker Dialog to use as modal dialog.
+ * @public
+ */
+// istanbul ignore next
+export 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 = ColorDef.from(value, color.g, color.b);
+            if (onColorChange) {
+                onColorChange(newColorDef);
+            }
+        }
+    }, [color, onColorChange]);
+    const handleGreenChange = React.useCallback((value, _stringValue) => {
+        if (undefined !== value) {
+            const newColorDef = ColorDef.from(color.r, value, color.b);
+            if (onColorChange) {
+                onColorChange(newColorDef);
+            }
+        }
+    }, [color, onColorChange]);
+    const handleBlueChange = React.useCallback((value, _stringValue) => {
+        if (undefined !== value) {
+            const newColorDef = 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, { hsv: currentHsv, onSaturationChange: handleSaturationChange })),
+            React.createElement("div", { className: "components-colorpicker-hue" },
+                React.createElement(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(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(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(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(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(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(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(ColorSwatch, { className: "components-colorpicker-panel-swatch", key: index, colorDef: preset, round: false, onColorPick: handlePresetColorPick })))));
+}
+//# sourceMappingURL=ColorPickerPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerPanel.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPanel.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,4BAA4B;AAE5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAY,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,yBAAyB,CAAC;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAahD;;;GAGG;AACH,uBAAuB;AACvB,MAAM,UAAU,gBAAgB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,cAAc,EAAyB;IAElH,MAAM,qBAAqB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,QAAkB,EAAE,CAAwC,EAAE,EAAE;QAC/G,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,aAAa,EAAE;YACjB,aAAa,CAAC,QAAQ,CAAC,CAAC;SACzB;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,WAAqB,EAAE,EAAE;QAClE,qDAAqD;QACrD,IAAI,WAAW,CAAC,CAAC,KAAK,CAAC,EAAE;YACvB,WAAW,GAAG,WAAW,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;SACjD;QAED,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,EAAE,CAAC;QAC7C,IAAI,aAAa,EAAE;YACjB,aAAa,CAAC,WAAW,CAAC,CAAC;SAC5B;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,sBAAsB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,WAAqB,EAAE,EAAE;QACzE,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,EAAE,CAAC;QAC7C,IAAI,aAAa,EAAE;YACjB,aAAa,CAAC,WAAW,CAAC,CAAC;SAC5B;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAC3E,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAC3E,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAErE,MAAM,0BAA0B,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAyB,EAAE,YAAoB,EAAE,EAAE;QACvG,MAAM,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,EAAE,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;QAE1E,IAAI,aAAa,EAAE;YACjB,MAAM,WAAW,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC;YACxC,aAAa,CAAC,WAAW,CAAC,CAAC;SAC5B;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC;IAEhC,MAAM,oBAAoB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAyB,EAAE,YAAoB,EAAE,EAAE;QACjG,MAAM,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,CAAC,CAAC,GAAG,GAAG,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;QAE1E,IAAI,aAAa,EAAE;YACjB,MAAM,WAAW,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC;YACxC,aAAa,CAAC,WAAW,CAAC,CAAC;SAC5B;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC;IAEhC,MAAM,2BAA2B,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAyB,EAAE,YAAoB,EAAE,EAAE;QACxG,MAAM,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,CAAC,CAAC,GAAG,GAAG,EAAE,SAAS,CAAC,CAAC;QAE1E,IAAI,aAAa,EAAE;YACjB,MAAM,WAAW,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC;YACxC,aAAa,CAAC,WAAW,CAAC,CAAC;SAC5B;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC;IAEhC,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAyB,EAAE,YAAoB,EAAE,EAAE;QAC5F,IAAI,SAAS,KAAK,KAAK,EAAE;YACvB,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;YAC3D,IAAI,aAAa,EAAE;gBACjB,aAAa,CAAC,WAAW,CAAC,CAAC;aAC5B;SACF;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC;IAE3B,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAyB,EAAE,YAAoB,EAAE,EAAE;QAC9F,IAAI,SAAS,KAAK,KAAK,EAAE;YACvB,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;YAC3D,IAAI,aAAa,EAAE;gBACjB,aAAa,CAAC,WAAW,CAAC,CAAC;aAC5B;SACF;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC;IAE3B,MAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAyB,EAAE,YAAoB,EAAE,EAAE;QAC7F,IAAI,SAAS,KAAK,KAAK,EAAE;YACvB,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;YAC3D,IAAI,aAAa,EAAE;gBACjB,aAAa,CAAC,WAAW,CAAC,CAAC;aAC5B;SACF;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC;IAE3B,OAAO,CACL,4CAAiB,8BAA8B,EAAC,SAAS,EAAC,8BAA8B;QACtF,6BAAK,SAAS,EAAC,oCAAoC;YACjD,6BAAK,SAAS,EAAC,mCAAmC;gBAChD,oBAAC,gBAAgB,IAAC,GAAG,EAAE,UAAU,EAAE,kBAAkB,EAAE,sBAAsB,GAAI,CAC7E;YACN,6BAAK,SAAS,EAAC,4BAA4B;gBACzC,oBAAC,SAAS,IAAC,GAAG,EAAE,UAAU,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,KAAK,GAAI,CAC7E,CACF;QACL,CAAC,cAAc,KAAK,KAAK,CAAC;YACzB,4CAAiB,oCAAoC,EAAC,SAAS,EAAC,oCAAoC;gBAClG,6BAAK,SAAS,EAAC,4CAA4C;oBACzD,8BAAM,SAAS,EAAC,6BAA6B,QAAS;oBACtD,oBAAC,WAAW,mBAAa,wCAAwC,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,GAAI,CAC7H;gBACN,6BAAK,SAAS,EAAC,4CAA4C;oBACzD,8BAAM,SAAS,EAAC,6BAA6B,QAAS;oBACtD,oBAAC,WAAW,mBAAa,0CAA0C,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,iBAAiB,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,GAAI,CACjI;gBACN,6BAAK,SAAS,EAAC,4CAA4C;oBACzD,8BAAM,SAAS,EAAC,6BAA6B,QAAS;oBACtD,oBAAC,WAAW,mBAAa,yCAAyC,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,GAAI,CAC/H,CACF;QACP,CAAC,cAAc,KAAK,KAAK,CAAC;YACzB,4CAAiB,oCAAoC,EAAC,SAAS,EAAC,oCAAoC;gBAClG,6BAAK,SAAS,EAAC,4CAA4C;oBACzD,8BAAM,SAAS,EAAC,6BAA6B,QAAS;oBACtD,oBAAC,WAAW,mBAAa,wCAAwC,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,GAAG,GAAG,CAAC,EAAE,QAAQ,EAAE,oBAAoB,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,GAAI,CACzJ;gBACN,6BAAK,SAAS,EAAC,4CAA4C;oBACzD,8BAAM,SAAS,EAAC,6BAA6B,QAAS;oBACtD,oBAAC,WAAW,mBAAa,+CAA+C,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,GAAG,GAAG,CAAC,EAAE,QAAQ,EAAE,2BAA2B,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,GAAI,CACvK;gBACN,6BAAK,SAAS,EAAC,4CAA4C;oBACzD,8BAAM,SAAS,EAAC,6BAA6B,QAAS;oBACtD,oBAAC,WAAW,mBAAa,8CAA8C,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,GAAG,GAAG,CAAC,EAAE,QAAQ,EAAE,0BAA0B,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,GAAI,CACrK,CACF;QAGN,YAAY,IAAI,YAAY,CAAC,MAAM;YACnC,6BAAK,SAAS,EAAC,sCAAsC,IAClD,YAAY,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,oBAAC,WAAW,IAAC,SAAS,EAAC,qCAAqC,EAAC,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,qBAAqB,GAAI,CAAC,CACjL,CAEJ,CACP,CAAC;AACJ,CAAC","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\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\n */\n// istanbul ignore next\nexport function ColorPickerPanel({ activeColor, onColorChange, colorPresets, colorInputType }: ColorPickerPanelProps) {\n\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"]}