@itwin/imodel-components-react 4.1.0-dev.0 → 4.1.0-dev.1

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

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

@@ -1,90 +1,90 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-
-button.components-colorpicker-button {
-  font-family: var(--iui-font-sans);
-  font-size: var(--iui-font-size-1);
-  color: var(--iui-color-text);
-  box-sizing: border-box;
-  border: 1px solid transparent;
-  border-radius: var(--iui-border-radius-1);
-  background-color: transparent;
-  border: none;
-  padding: 0;
-
-  > .components-colorpicker-button-container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    border-radius: var(--iui-border-radius-1);
-
-    > .components-colorpicker-button-color-swatch {
-      border: 1px solid var(--iui-color-border-foreground);
-      border-radius: var(--iui-border-radius-1);
-      width: 1.25em;
-      height: 1.25em;
-    }
-
-    > .components-caret {
-      margin-left: 0.25em;
-      margin-right: 0.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 var(--iui-color-border-foreground);
-  border-radius: 6px;
-
-  .components-colorpicker-popup-container {
-    color: var(--iui-color-text);
-    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);
-        }
-      }
-    }
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+
+button.components-colorpicker-button {
+  font-family: var(--iui-font-sans);
+  font-size: var(--iui-font-size-1);
+  color: var(--iui-color-text);
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: var(--iui-border-radius-1);
+  background-color: transparent;
+  border: none;
+  padding: 0;
+
+  > .components-colorpicker-button-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-radius: var(--iui-border-radius-1);
+
+    > .components-colorpicker-button-color-swatch {
+      border: 1px solid var(--iui-color-border-foreground);
+      border-radius: var(--iui-border-radius-1);
+      width: 1.25em;
+      height: 1.25em;
+    }
+
+    > .components-caret {
+      margin-left: 0.25em;
+      margin-right: 0.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 var(--iui-color-border-foreground);
+  border-radius: 6px;
+
+  .components-colorpicker-popup-container {
+    color: var(--iui-color-text);
+    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.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,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAgB5G;;;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,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,aAAyB,EAAE,EAAE;QACzE,MAAM,WAAW,GAAG,QAAQ,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,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,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACtC,IAAI,YAAY,EAAE;YAChB,OAAO,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,UAAU,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,MAAM,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,WAAW,IAAC,aAAa,EAAE,UAAU,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,gBAAgB,EAAE,kBAAkB;gBACrG,oBAAC,YAAY,OAAG;gBACf,cAAc;oBACb,oBAAC,eAAe,IAAC,kBAAkB,EAAE,cAAc,GAAI;gBACxD,YAAY;oBACX,oBAAC,YAAY,IAAC,MAAM,EAAE,YAAY,GAAI,CAC5B,CACP,CACJ,CACR,CAAC;AACJ,CAAC","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,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAgB5G;;;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,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,aAAyB,EAAE,EAAE;QACzE,MAAM,WAAW,GAAG,QAAQ,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,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,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACtC,IAAI,YAAY,EAAE;YAChB,OAAO,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,UAAU,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,MAAM,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,WAAW,IAAC,aAAa,EAAE,UAAU,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,gBAAgB,EAAE,kBAAkB;gBACrG,oBAAC,YAAY,OAAG;gBACf,cAAc;oBACb,oBAAC,eAAe,IAAC,kBAAkB,EAAE,cAAc,GAAI;gBACxD,YAAY;oBACX,oBAAC,YAAY,IAAC,MAAM,EAAE,YAAY,GAAI,CAC5B,CACP,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 { 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/esm/imodel-components-react/color/ColorPickerPopup.d.ts

@@ -4,7 +4,7 @@
 import * as React from "react";
 import { ColorDef } from "@itwin/core-common";
 import { RelativePosition } from "@itwin/appui-abstract";
-import { CommonProps } from "@itwin/core-react";
+import type { CommonProps } from "@itwin/core-react";
 import "./ColorPickerPopup.scss";
 /** Properties for the [[ColorPickerPopup]] React component
  * @public

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerPopup.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPopup.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAIH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAe,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAwB,MAAM,mBAAmB,CAAC;AAGtE,OAAO,yBAAyB,CAAC;AAKjC;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW;IACvG,oBAAoB;IACpB,YAAY,EAAE,QAAQ,CAAC;IACvB;uCACmC;IACnC,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,uDAAuD;IACvD,aAAa,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC3D,gDAAgD;IAChD,OAAO,CAAC,EAAE,CAAC,CAAC,UAAU,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACvD,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC,gEAAgE;IAChE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,8CAA8C;IAC9C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,+BAA+B;IAC/B,cAAc,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;CACxC;AAiID;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,GAAG,CAAC,OAAO,GAAG,IAAiC,CAAC"}
+{"version":3,"file":"ColorPickerPopup.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPopup.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAIH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAe,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAC,MAAM,mBAAmB,CAAC;AAIpD,OAAO,yBAAyB,CAAC;AAKjC;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW;IACvG,oBAAoB;IACpB,YAAY,EAAE,QAAQ,CAAC;IACvB;uCACmC;IACnC,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,uDAAuD;IACvD,aAAa,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC3D,gDAAgD;IAChD,OAAO,CAAC,EAAE,CAAC,CAAC,UAAU,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACvD,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC,gEAAgE;IAChE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,8CAA8C;IAC9C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,+BAA+B;IAC/B,cAAc,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;CACxC;AAiID;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,GAAG,CAAC,OAAO,GAAG,IAAiC,CAAC"}

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

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

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

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

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

@@ -3,8 +3,8 @@
  */
 import "./HueSlider.scss";
 import * as React from "react";
-import { HSVColor } from "@itwin/core-common";
-import { CommonProps } from "@itwin/core-react";
+import type { HSVColor } from "@itwin/core-common";
+import type { CommonProps } from "@itwin/core-react";
 /** Properties for the [[HueSlider]] React component
  * @beta
  */

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

@@ -1 +1 @@
-{"version":3,"file":"HueSlider.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/HueSlider.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAyDhD;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW;IACvF,kFAAkF;IAClF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACpD,sBAAsB;IACtB,GAAG,EAAE,QAAQ,CAAC;CACf;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EAAE,YAAY,EAAE,WAAW,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,cAAc,eAwI7F"}
+{"version":3,"file":"HueSlider.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/HueSlider.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAyDrD;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW;IACvF,kFAAkF;IAClF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACpD,sBAAsB;IACtB,GAAG,EAAE,QAAQ,CAAC;CACf;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EAAE,YAAY,EAAE,WAAW,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,cAAc,eAwI7F"}

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

@@ -1 +1 @@
-{"version":3,"file":"HueSlider.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/HueSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Color\r\n */\r\n\r\nimport \"./HueSlider.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { HSVColor } from \"@itwin/core-common\";\r\nimport { SpecialKey } from \"@itwin/appui-abstract\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { UiIModelComponents } from \"../UiIModelComponents\";\r\n\r\n// hue is a value from 0 to 360\r\nfunction calculateHue(currentPos: number, high: number, isVertical: boolean) {\r\n  // istanbul ignore next\r\n  if (currentPos <= 0) {\r\n    return isVertical ? 359 : 0;\r\n  } else if (currentPos >= high) {\r\n    return isVertical ? 0 : 359;\r\n  } else {\r\n    let percent = ((currentPos * 100) / high);\r\n    if (isVertical)\r\n      percent = 100 - percent;\r\n    return Math.round(((359 * percent) / 100));\r\n  }\r\n}\r\n\r\nfunction calculateChange(currentHue: number, e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>, isHorizontal: boolean, container: HTMLDivElement) {\r\n  const { width: containerWidth, height: containerHeight, top: containerTop, left: containerLeft } = container.getBoundingClientRect();\r\n\r\n  let x: number | undefined;\r\n  if (\"pageX\" in e) {\r\n    x = e.pageX;\r\n  } else {\r\n    // istanbul ignore if\r\n    if (undefined === e.touches || 0 === e.touches.length)\r\n      return currentHue;\r\n    x = e.touches[0].pageX;\r\n  }\r\n  // istanbul ignore if\r\n  if (undefined === x)\r\n    return currentHue;\r\n\r\n  let y: number | undefined;\r\n  if (\"pageY\" in e) {\r\n    y = e.pageY;\r\n  } else {\r\n    // istanbul ignore if\r\n    if (undefined === e.touches || 0 === e.touches.length)\r\n      return currentHue;\r\n    y = e.touches[0].pageY;\r\n  }\r\n  // istanbul ignore if\r\n  if (undefined === y)\r\n    return currentHue;\r\n\r\n  const pointerX = x - (containerLeft + window.scrollX);\r\n  const pointerY = y - (containerTop + window.scrollY);\r\n\r\n  if (!isHorizontal) { // vertical\r\n    return calculateHue(pointerY, containerHeight, true);\r\n  } else {  // horizontal\r\n    return calculateHue(pointerX, containerWidth, false);\r\n  }\r\n}\r\n\r\n/** Properties for the [[HueSlider]] React component\r\n * @beta\r\n */\r\nexport interface HueSliderProps extends React.HTMLAttributes<HTMLDivElement>, CommonProps {\r\n  /** true if slider is oriented horizontal, else vertical orientation is assumed */\r\n  isHorizontal?: boolean;\r\n  /** function to run when user hue is changed */\r\n  onHueChange?: ((hue: HSVColor) => void) | undefined;\r\n  /** HSV Color Value */\r\n  hsv: HSVColor;\r\n}\r\n\r\n/** HueSlider component used to set the hue value.\r\n * @beta\r\n */\r\nexport function HueSlider({ isHorizontal, onHueChange, hsv, className, style }: HueSliderProps) {\r\n  const container = React.useRef<HTMLDivElement>(null);\r\n  const [hueLabel] = React.useState(() => UiIModelComponents.translate(\"color.hue\"));\r\n  const isDragging = React.useRef(false);\r\n\r\n  const onChange = React.useCallback((e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) => {\r\n    // istanbul ignore else\r\n    if (container.current) {\r\n      const newHue = calculateChange(hsv.h, e, !!isHorizontal, container.current);\r\n      // istanbul ignore else\r\n      const newColor = hsv.clone(newHue);\r\n      // istanbul ignore else\r\n      if (onHueChange)\r\n        onHueChange(newColor);\r\n    }\r\n  }, [isHorizontal, hsv, onHueChange]);\r\n\r\n  const onDragging = React.useCallback((e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) => {\r\n    // istanbul ignore else\r\n    if (isDragging.current) {\r\n      onChange(e);\r\n    }\r\n  }, [onChange]);\r\n\r\n  const onMouseUp = React.useCallback(() => {\r\n    // istanbul ignore else\r\n    if (isDragging.current) {\r\n      isDragging.current = false;\r\n    }\r\n  }, []);\r\n\r\n  const onTouchEnd = React.useCallback((event: React.TouchEvent<HTMLDivElement>) => {\r\n    event.preventDefault();\r\n\r\n    // istanbul ignore else\r\n    if (isDragging.current) {\r\n      onChange(event);\r\n      isDragging.current = false;\r\n    }\r\n  }, [onChange]);\r\n\r\n  const onMouseDown = React.useCallback((e: React.MouseEvent<HTMLDivElement>) => {\r\n    e.preventDefault();\r\n\r\n    // istanbul ignore else\r\n    if (e.target !== e.currentTarget) {\r\n      // istanbul ignore else\r\n      if (!isDragging.current) {\r\n        document.addEventListener(\"mouseup\", onMouseUp, { capture: true, once: true });\r\n        isDragging.current = true;\r\n      }\r\n    }\r\n\r\n    onChange(e);\r\n\r\n    // istanbul ignore else\r\n    if (container.current)\r\n      container.current.focus();\r\n  }, [onChange, onMouseUp]);\r\n\r\n  const onTouchStart = React.useCallback((e: React.TouchEvent<HTMLDivElement>) => {\r\n    // istanbul ignore else\r\n    if (e.target !== e.currentTarget)\r\n      isDragging.current = true;\r\n\r\n    onChange(e);\r\n\r\n    // istanbul ignore else\r\n    if (container.current)\r\n      container.current.focus();\r\n  }, [onChange]);\r\n\r\n  const onKeyDown = React.useCallback((evt: React.KeyboardEvent<HTMLDivElement>) => {\r\n    let newHue: number | undefined;\r\n    const hueValue = hsv.h;\r\n    if (evt.key === SpecialKey.ArrowLeft || evt.key === SpecialKey.ArrowDown) {\r\n      newHue = hueValue - (evt.ctrlKey ? 10 : 1);\r\n    } else if (evt.key === SpecialKey.ArrowRight || evt.key === SpecialKey.ArrowUp) {\r\n      newHue = hueValue + (evt.ctrlKey ? 10 : 1);\r\n    } else if (evt.key === SpecialKey.PageDown) {\r\n      newHue = hueValue - (evt.ctrlKey ? 180 : 60);\r\n    } else if (evt.key === SpecialKey.PageUp) {\r\n      newHue = hueValue + (evt.ctrlKey ? 180 : 60);\r\n    } else if (evt.key === SpecialKey.Home) {\r\n      newHue = 0;\r\n    } else {\r\n      // istanbul ignore else\r\n      if (evt.key === SpecialKey.End) {\r\n        newHue = 359;\r\n      }\r\n    }\r\n\r\n    // istanbul ignore else\r\n    if (undefined !== newHue) {\r\n      // istanbul ignore if\r\n      if (newHue > 359) newHue = 359; // 360 is same as zero\r\n      // istanbul ignore if\r\n      if (newHue < 0) newHue = 0;\r\n\r\n      const newColor = hsv.clone(newHue);\r\n      // istanbul ignore else\r\n      if (onHueChange)\r\n        onHueChange(newColor);\r\n      evt.preventDefault();\r\n    }\r\n  }, [hsv, onHueChange]);\r\n\r\n  const containerClasses = classnames(\r\n    isHorizontal ? \"components-hue-container-horizontal\" : \"components-hue-container-vertical\",\r\n    className,\r\n  );\r\n\r\n  const pointerStyle: React.CSSProperties = isHorizontal ? { left: `${(hsv.h * 100) / 360}%`, backgroundColor: `hsl(${hsv.h} ,100%, 50%)` } :\r\n    { left: `0px`, top: `${-((hsv.h * 100) / 360) + 100}%`, backgroundColor: `hsl(${hsv.h} ,100%, 50%)` };\r\n\r\n  return (\r\n    <div className={containerClasses} style={style} data-testid=\"hue-container\" >\r\n      <div\r\n        data-testid=\"hue-slider\"\r\n        role=\"slider\" aria-label={hueLabel}\r\n        aria-valuemin={0} aria-valuemax={360} aria-valuenow={hsv.h}\r\n        className=\"components-hue-slider\"\r\n        ref={container}\r\n        onMouseDown={onMouseDown}\r\n        onMouseMove={onDragging}\r\n        onTouchMove={onDragging}\r\n        onMouseUp={onMouseUp}\r\n        onTouchStart={onTouchStart}\r\n        onTouchEnd={onTouchEnd}\r\n        tabIndex={0}\r\n        onKeyDown={onKeyDown}\r\n      >\r\n        <div style={pointerStyle} className=\"components-hue-pointer\" data-testid=\"hue-pointer\" />\r\n      </div>\r\n    </div >\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"HueSlider.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/HueSlider.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 \"./HueSlider.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { HSVColor } from \"@itwin/core-common\";\nimport { SpecialKey } from \"@itwin/appui-abstract\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { UiIModelComponents } from \"../UiIModelComponents\";\n\n// hue is a value from 0 to 360\nfunction calculateHue(currentPos: number, high: number, isVertical: boolean) {\n  // istanbul ignore next\n  if (currentPos <= 0) {\n    return isVertical ? 359 : 0;\n  } else if (currentPos >= high) {\n    return isVertical ? 0 : 359;\n  } else {\n    let percent = ((currentPos * 100) / high);\n    if (isVertical)\n      percent = 100 - percent;\n    return Math.round(((359 * percent) / 100));\n  }\n}\n\nfunction calculateChange(currentHue: number, e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>, isHorizontal: boolean, container: HTMLDivElement) {\n  const { width: containerWidth, height: containerHeight, top: containerTop, left: containerLeft } = container.getBoundingClientRect();\n\n  let x: number | undefined;\n  if (\"pageX\" in e) {\n    x = e.pageX;\n  } else {\n    // istanbul ignore if\n    if (undefined === e.touches || 0 === e.touches.length)\n      return currentHue;\n    x = e.touches[0].pageX;\n  }\n  // istanbul ignore if\n  if (undefined === x)\n    return currentHue;\n\n  let y: number | undefined;\n  if (\"pageY\" in e) {\n    y = e.pageY;\n  } else {\n    // istanbul ignore if\n    if (undefined === e.touches || 0 === e.touches.length)\n      return currentHue;\n    y = e.touches[0].pageY;\n  }\n  // istanbul ignore if\n  if (undefined === y)\n    return currentHue;\n\n  const pointerX = x - (containerLeft + window.scrollX);\n  const pointerY = y - (containerTop + window.scrollY);\n\n  if (!isHorizontal) { // vertical\n    return calculateHue(pointerY, containerHeight, true);\n  } else {  // horizontal\n    return calculateHue(pointerX, containerWidth, false);\n  }\n}\n\n/** Properties for the [[HueSlider]] React component\n * @beta\n */\nexport interface HueSliderProps 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 hue is changed */\n  onHueChange?: ((hue: HSVColor) => void) | undefined;\n  /** HSV Color Value */\n  hsv: HSVColor;\n}\n\n/** HueSlider component used to set the hue value.\n * @beta\n */\nexport function HueSlider({ isHorizontal, onHueChange, hsv, className, style }: HueSliderProps) {\n  const container = React.useRef<HTMLDivElement>(null);\n  const [hueLabel] = React.useState(() => UiIModelComponents.translate(\"color.hue\"));\n  const isDragging = React.useRef(false);\n\n  const onChange = React.useCallback((e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) => {\n    // istanbul ignore else\n    if (container.current) {\n      const newHue = calculateChange(hsv.h, e, !!isHorizontal, container.current);\n      // istanbul ignore else\n      const newColor = hsv.clone(newHue);\n      // istanbul ignore else\n      if (onHueChange)\n        onHueChange(newColor);\n    }\n  }, [isHorizontal, hsv, onHueChange]);\n\n  const onDragging = React.useCallback((e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) => {\n    // istanbul ignore else\n    if (isDragging.current) {\n      onChange(e);\n    }\n  }, [onChange]);\n\n  const onMouseUp = React.useCallback(() => {\n    // istanbul ignore else\n    if (isDragging.current) {\n      isDragging.current = false;\n    }\n  }, []);\n\n  const onTouchEnd = React.useCallback((event: React.TouchEvent<HTMLDivElement>) => {\n    event.preventDefault();\n\n    // istanbul ignore else\n    if (isDragging.current) {\n      onChange(event);\n      isDragging.current = false;\n    }\n  }, [onChange]);\n\n  const onMouseDown = React.useCallback((e: React.MouseEvent<HTMLDivElement>) => {\n    e.preventDefault();\n\n    // istanbul ignore else\n    if (e.target !== e.currentTarget) {\n      // istanbul ignore else\n      if (!isDragging.current) {\n        document.addEventListener(\"mouseup\", onMouseUp, { capture: true, once: true });\n        isDragging.current = true;\n      }\n    }\n\n    onChange(e);\n\n    // istanbul ignore else\n    if (container.current)\n      container.current.focus();\n  }, [onChange, onMouseUp]);\n\n  const onTouchStart = React.useCallback((e: React.TouchEvent<HTMLDivElement>) => {\n    // istanbul ignore else\n    if (e.target !== e.currentTarget)\n      isDragging.current = true;\n\n    onChange(e);\n\n    // istanbul ignore else\n    if (container.current)\n      container.current.focus();\n  }, [onChange]);\n\n  const onKeyDown = React.useCallback((evt: React.KeyboardEvent<HTMLDivElement>) => {\n    let newHue: number | undefined;\n    const hueValue = hsv.h;\n    if (evt.key === SpecialKey.ArrowLeft || evt.key === SpecialKey.ArrowDown) {\n      newHue = hueValue - (evt.ctrlKey ? 10 : 1);\n    } else if (evt.key === SpecialKey.ArrowRight || evt.key === SpecialKey.ArrowUp) {\n      newHue = hueValue + (evt.ctrlKey ? 10 : 1);\n    } else if (evt.key === SpecialKey.PageDown) {\n      newHue = hueValue - (evt.ctrlKey ? 180 : 60);\n    } else if (evt.key === SpecialKey.PageUp) {\n      newHue = hueValue + (evt.ctrlKey ? 180 : 60);\n    } else if (evt.key === SpecialKey.Home) {\n      newHue = 0;\n    } else {\n      // istanbul ignore else\n      if (evt.key === SpecialKey.End) {\n        newHue = 359;\n      }\n    }\n\n    // istanbul ignore else\n    if (undefined !== newHue) {\n      // istanbul ignore if\n      if (newHue > 359) newHue = 359; // 360 is same as zero\n      // istanbul ignore if\n      if (newHue < 0) newHue = 0;\n\n      const newColor = hsv.clone(newHue);\n      // istanbul ignore else\n      if (onHueChange)\n        onHueChange(newColor);\n      evt.preventDefault();\n    }\n  }, [hsv, onHueChange]);\n\n  const containerClasses = classnames(\n    isHorizontal ? \"components-hue-container-horizontal\" : \"components-hue-container-vertical\",\n    className,\n  );\n\n  const pointerStyle: React.CSSProperties = isHorizontal ? { left: `${(hsv.h * 100) / 360}%`, backgroundColor: `hsl(${hsv.h} ,100%, 50%)` } :\n    { left: `0px`, top: `${-((hsv.h * 100) / 360) + 100}%`, backgroundColor: `hsl(${hsv.h} ,100%, 50%)` };\n\n  return (\n    <div className={containerClasses} style={style} data-testid=\"hue-container\" >\n      <div\n        data-testid=\"hue-slider\"\n        role=\"slider\" aria-label={hueLabel}\n        aria-valuemin={0} aria-valuemax={360} aria-valuenow={hsv.h}\n        className=\"components-hue-slider\"\n        ref={container}\n        onMouseDown={onMouseDown}\n        onMouseMove={onDragging}\n        onTouchMove={onDragging}\n        onMouseUp={onMouseUp}\n        onTouchStart={onTouchStart}\n        onTouchEnd={onTouchEnd}\n        tabIndex={0}\n        onKeyDown={onKeyDown}\n      >\n        <div style={pointerStyle} className=\"components-hue-pointer\" data-testid=\"hue-pointer\" />\n      </div>\n    </div >\n  );\n}\n"]}