npm - @itwin/imodel-components-react - Versions diffs - 4.0.0-dev.2 → 4.0.0-dev.20 - Mend

@itwin/imodel-components-react 4.0.0-dev.2 → 4.0.0-dev.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (226) hide show

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

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

@@ -2,12 +2,11 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
 button.components-colorpicker-popup-button {
   font-family: var(--iui-font-sans);
   font-size: var(--iui-font-size-1);
-  color: $buic-foreground-body;
+  color: var(--iui-color-text);
   background-color: transparent;
   box-sizing: border-box;
   border-radius: var(--iui-border-radius-1);
@@ -24,7 +23,7 @@ button.components-colorpicker-popup-button {
     align-items: center;
     > .components-colorpicker-button-color-swatch {
-      border: 1px solid $buic-inputs-border;
+      border: 1px solid var(--iui-color-border);
       border-radius: var(--iui-border-radius-1);
       width: 1.25em;
       height: 1.25em;
@@ -41,7 +40,7 @@ button.components-colorpicker-popup-button {
     > .components-colorpicker-button-container {
       > .components-caret {
-        color: $buic-icon-color-disabled;
+        color: var(--iui-color-text-disabled);
       }
     }
   }
@@ -58,6 +57,6 @@ button.components-colorpicker-popup-button {
     margin-left: auto;
     background: transparent;
     border: none;
-    color: var(--buic-foreground-body);
+    color: var(--iui-color-text);
   }
 }

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

@@ -8,7 +8,11 @@
  */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

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

	@@ -1 +1 @@
1	- {"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 { HSVColor } from \"@itwin/core-common\";\nimport { SpecialKey } from \"@itwin/appui-abstract\";\nimport { 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"]}
1	+ {"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 { HSVColor } from \"@itwin/core-common\";\nimport { SpecialKey } from \"@itwin/appui-abstract\";\nimport { 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"]}

package/lib/cjs/imodel-components-react/color/SaturationPicker.js CHANGED Viewed

@@ -8,7 +8,11 @@
  */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/lib/cjs/imodel-components-react/color/SaturationPicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SaturationPicker.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/SaturationPicker.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 \"./SaturationPicker.scss\";\nimport classnames from \"classnames\";\nimport as React from \"react\";\nimport { ColorDef, HSVColor } from \"@itwin/core-common\";\nimport { SpecialKey } from \"@itwin/appui-abstract\";\nimport { CommonProps } from \"@itwin/core-react\";\nimport { UiIModelComponents } from \"../UiIModelComponents\";\n\nfunction calculateChange(e: React.MouseEvent<HTMLDivElement> \| React.TouchEvent<HTMLDivElement>,\n hsv: HSVColor, container: HTMLDivElement): HSVColor \| undefined {\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 next\n if (undefined !== e.touches && e.touches.length)\n x = e.touches[0].pageX;\n }\n // istanbul ignore if\n if (undefined === x)\n return hsv;\n\n let y = 0;\n if (\"pageY\" in e) {\n y = e.pageY;\n } else {\n // istanbul ignore next\n if (undefined !== e.touches && e.touches.length)\n y = e.touches[0].pageY;\n }\n // istanbul ignore if\n if (undefined === y)\n return hsv;\n\n let left = x - (containerLeft + window.scrollX);\n let top = y - (containerTop + window.scrollY);\n\n // istanbul ignore next\n if (left < 0) {\n left = 0;\n } else if (left > containerWidth) {\n left = containerWidth;\n } else if (top < 0) {\n top = 0;\n } else if (top > containerHeight) {\n top = containerHeight;\n }\n\n let saturation = Math.round((left * 100) / containerWidth);\n let value = Math.round(-((top * 100) / containerHeight) + 100);\n\n // istanbul ignore if\n if (saturation < 0)\n saturation = 0;\n // istanbul ignore if\n if (saturation > 100)\n saturation = 100;\n // istanbul ignore if\n if (value < 0)\n value = 0;\n // istanbul ignore if\n if (value > 100)\n value = 100;\n\n return hsv.clone(hsv.h, saturation, value);\n}\n\n/** Properties for the [[SaturationPicker]] React component\n * @beta\n /\nexport interface SaturationPickerProps extends React.HTMLAttributes<HTMLDivElement>, CommonProps {\n /* function to run when user selects location in saturation region /\n onSaturationChange?: ((saturation: HSVColor) => void) \| undefined;\n /* HSV Color Value /\n hsv: HSVColor;\n}\n\n/* SaturationPicker component used to set the saturation value.\n * @beta\n */\nexport function SaturationPicker({ onSaturationChange, hsv, className, style }: SaturationPickerProps) {\n const container = React.useRef<HTMLDivElement>(null);\n const [saturationLabel] = React.useState(() => UiIModelComponents.translate(\"color.saturation\"));\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 newHsvColor = calculateChange(e, hsv, container.current);\n // istanbul ignore else\n if (newHsvColor) {\n // istanbul ignore else\n if (onSaturationChange)\n onSaturationChange(newHsvColor);\n }\n }\n }, [hsv, onSaturationChange]);\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 // 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 // istanbul ignore else\n if (e.target !== e.currentTarget) {\n isDragging.current = true;\n document.addEventListener(\"mouseup\", onMouseUp, { capture: true, once: true });\n }\n\n onChange(e);\n\n // istanbul ignore else\n if (container.current)\n container.current.focus();\n\n e.preventDefault();\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 const h = hsv.h;\n let { s, v } = { ...hsv };\n if (evt.key === SpecialKey.ArrowLeft) {\n s -= (evt.ctrlKey ? 10 : 1);\n } else if (evt.key === SpecialKey.ArrowDown) {\n v -= (evt.ctrlKey ? 10 : 1);\n } else if (evt.key === SpecialKey.ArrowRight) {\n s += (evt.ctrlKey ? 10 : 1);\n } else if (evt.key === SpecialKey.ArrowUp) {\n v += (evt.ctrlKey ? 10 : 1);\n } else if (evt.key === SpecialKey.PageDown) {\n v = 0;\n } else if (evt.key === SpecialKey.PageUp) {\n v = 100;\n } else if (evt.key === SpecialKey.Home) {\n s = 0;\n } else {\n // istanbul ignore else\n if (evt.key === SpecialKey.End) {\n s = 100;\n }\n }\n\n // istanbul ignore if\n if (s < 0)\n s = 0;\n // istanbul ignore if\n if (s > 100)\n s = 100;\n // istanbul ignore if\n if (v < 0)\n v = 0;\n // istanbul ignore if\n if (v > 100)\n v = 100;\n\n const newColor = new HSVColor(h, s, v);\n // istanbul ignore else\n if (onSaturationChange)\n onSaturationChange(newColor);\n\n evt.preventDefault();\n }, [hsv, onSaturationChange]);\n\n const pointerStyle: React.CSSProperties = React.useMemo(() => ({\n left: `${hsv.s}%`,\n top: `${-(hsv.v) + 100}%`,\n backgroundColor: `${ColorDef.fromHSV(hsv).toRgbString()}`,\n }), [hsv]);\n\n const colorStyle: React.CSSProperties = React.useMemo(() => ({ backgroundColor: `hsl(${hsv.h} ,100%, 50%)` }), [hsv]);\n\n return (\n <div className={classnames(\"components-saturation-container\", className)} style={style} data-testid=\"saturation-container\" >\n <div\n data-testid=\"saturation-region\"\n role=\"slider\" aria-label={saturationLabel} aria-valuenow={hsv.s}\n style={colorStyle}\n className=\"components-saturation-region\"\n ref={container}\n onMouseDown={onMouseDown}\n onMouseMove={onDragging}\n onTouchMove={onDragging}\n onTouchStart={onTouchStart}\n onTouchEnd={onTouchEnd}\n tabIndex={0}\n onKeyDown={onKeyDown}\n >\n <div style={pointerStyle} className=\"components-saturation-pointer\" data-testid=\"saturation-pointer\" />\n </div>\n </div >\n );\n}\n"]}
1	+ {"version":3,"file":"SaturationPicker.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/SaturationPicker.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 \"./SaturationPicker.scss\";\nimport classnames from \"classnames\";\nimport as React from \"react\";\nimport { ColorDef, HSVColor } from \"@itwin/core-common\";\nimport { SpecialKey } from \"@itwin/appui-abstract\";\nimport { CommonProps } from \"@itwin/core-react\";\nimport { UiIModelComponents } from \"../UiIModelComponents\";\n\nfunction calculateChange(e: React.MouseEvent<HTMLDivElement> \| React.TouchEvent<HTMLDivElement>,\n hsv: HSVColor, container: HTMLDivElement): HSVColor \| undefined {\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 next\n if (undefined !== e.touches && e.touches.length)\n x = e.touches[0].pageX;\n }\n // istanbul ignore if\n if (undefined === x)\n return hsv;\n\n let y = 0;\n if (\"pageY\" in e) {\n y = e.pageY;\n } else {\n // istanbul ignore next\n if (undefined !== e.touches && e.touches.length)\n y = e.touches[0].pageY;\n }\n // istanbul ignore if\n if (undefined === y)\n return hsv;\n\n let left = x - (containerLeft + window.scrollX);\n let top = y - (containerTop + window.scrollY);\n\n // istanbul ignore next\n if (left < 0) {\n left = 0;\n } else if (left > containerWidth) {\n left = containerWidth;\n } else if (top < 0) {\n top = 0;\n } else if (top > containerHeight) {\n top = containerHeight;\n }\n\n let saturation = Math.round((left * 100) / containerWidth);\n let value = Math.round(-((top * 100) / containerHeight) + 100);\n\n // istanbul ignore if\n if (saturation < 0)\n saturation = 0;\n // istanbul ignore if\n if (saturation > 100)\n saturation = 100;\n // istanbul ignore if\n if (value < 0)\n value = 0;\n // istanbul ignore if\n if (value > 100)\n value = 100;\n\n return hsv.clone(hsv.h, saturation, value);\n}\n\n/** Properties for the [[SaturationPicker]] React component\n * @beta\n /\nexport interface SaturationPickerProps extends React.HTMLAttributes<HTMLDivElement>, CommonProps {\n /* function to run when user selects location in saturation region /\n onSaturationChange?: ((saturation: HSVColor) => void) \| undefined;\n /* HSV Color Value /\n hsv: HSVColor;\n}\n\n/* SaturationPicker component used to set the saturation value.\n * @beta\n */\nexport function SaturationPicker({ onSaturationChange, hsv, className, style }: SaturationPickerProps) {\n const container = React.useRef<HTMLDivElement>(null);\n const [saturationLabel] = React.useState(() => UiIModelComponents.translate(\"color.saturation\"));\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 newHsvColor = calculateChange(e, hsv, container.current);\n // istanbul ignore else\n if (newHsvColor) {\n // istanbul ignore else\n if (onSaturationChange)\n onSaturationChange(newHsvColor);\n }\n }\n }, [hsv, onSaturationChange]);\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 // 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 // istanbul ignore else\n if (e.target !== e.currentTarget) {\n isDragging.current = true;\n document.addEventListener(\"mouseup\", onMouseUp, { capture: true, once: true });\n }\n\n onChange(e);\n\n // istanbul ignore else\n if (container.current)\n container.current.focus();\n\n e.preventDefault();\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 const h = hsv.h;\n let { s, v } = { ...hsv };\n if (evt.key === SpecialKey.ArrowLeft) {\n s -= (evt.ctrlKey ? 10 : 1);\n } else if (evt.key === SpecialKey.ArrowDown) {\n v -= (evt.ctrlKey ? 10 : 1);\n } else if (evt.key === SpecialKey.ArrowRight) {\n s += (evt.ctrlKey ? 10 : 1);\n } else if (evt.key === SpecialKey.ArrowUp) {\n v += (evt.ctrlKey ? 10 : 1);\n } else if (evt.key === SpecialKey.PageDown) {\n v = 0;\n } else if (evt.key === SpecialKey.PageUp) {\n v = 100;\n } else if (evt.key === SpecialKey.Home) {\n s = 0;\n } else {\n // istanbul ignore else\n if (evt.key === SpecialKey.End) {\n s = 100;\n }\n }\n\n // istanbul ignore if\n if (s < 0)\n s = 0;\n // istanbul ignore if\n if (s > 100)\n s = 100;\n // istanbul ignore if\n if (v < 0)\n v = 0;\n // istanbul ignore if\n if (v > 100)\n v = 100;\n\n const newColor = new HSVColor(h, s, v);\n // istanbul ignore else\n if (onSaturationChange)\n onSaturationChange(newColor);\n\n evt.preventDefault();\n }, [hsv, onSaturationChange]);\n\n const pointerStyle: React.CSSProperties = React.useMemo(() => ({\n left: `${hsv.s}%`,\n top: `${-(hsv.v) + 100}%`,\n backgroundColor: `${ColorDef.fromHSV(hsv).toRgbString()}`,\n }), [hsv]);\n\n const colorStyle: React.CSSProperties = React.useMemo(() => ({ backgroundColor: `hsl(${hsv.h} ,100%, 50%)` }), [hsv]);\n\n return (\n <div className={classnames(\"components-saturation-container\", className)} style={style} data-testid=\"saturation-container\" >\n <div\n data-testid=\"saturation-region\"\n role=\"slider\" aria-label={saturationLabel} aria-valuenow={hsv.s}\n style={colorStyle}\n className=\"components-saturation-region\"\n ref={container}\n onMouseDown={onMouseDown}\n onMouseMove={onDragging}\n onTouchMove={onDragging}\n onTouchStart={onTouchStart}\n onTouchEnd={onTouchEnd}\n tabIndex={0}\n onKeyDown={onKeyDown}\n >\n <div style={pointerStyle} className=\"components-saturation-pointer\" data-testid=\"saturation-pointer\" />\n </div>\n </div >\n );\n}\n"]}

package/lib/cjs/imodel-components-react/color/Swatch.js CHANGED Viewed

@@ -8,7 +8,11 @@
  */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/lib/cjs/imodel-components-react/color/Swatch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Swatch.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/Swatch.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG~~;;;;;;;;;;;;;;;;;;;;;;;;;~~AAEH,yBAAuB;AACvB,4DAAoC;AACpC,6CAA+B;AAG/B,6DAA0D;AAc1D;;GAEG;AACH,SAAgB,WAAW,CAAC,KAAuB;IACjD,MAAM,UAAU,GAAG,IAAA,uCAAkB,EAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACtD,MAAM,UAAU,GAAwB;QACtC,eAAe,EAAE,UAAU;QAC3B,GAAG,KAAK,CAAC,KAAK;KACf,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,CAAmB,EAAE,EAAE;QAC1C,uBAAuB;QACvB,IAAI,KAAK,IAAI,KAAK,CAAC,WAAW;YAC5B,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,IAAA,oBAAU,EACxB,yBAAyB,EACzB,KAAK,CAAC,KAAK,IAAI,OAAO,EACtB,KAAK,CAAC,SAAS,CAChB,CAAC;IAEF,MAAM;IACJ,6DAA6D;IAC7D,WAAW,EAAE,QAAQ,EAAE,KAAK,EAAE,6CAA6C;IAC3E,wCAAwC;IACxC,GAAG,UAAU,CAAC,qBAAqB;MACpC,GAAG,KAAK,CAAC;IAEV,OAAO,mCAAY,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,GAAI,CAAC;AACjG,CAAC;AA3BD,kCA2BC","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 \"./Swatch.scss\";\nimport classnames from \"classnames\";\nimport as React from \"react\";\nimport { ColorDef } from \"@itwin/core-common\";\nimport { CommonProps } from \"@itwin/core-react\";\nimport { getCSSColorFromDef } from \"./getCSSColorFromDef\";\n\n/** Properties for the [[ColorSwatch]] React component\n * @beta\n /\nexport interface ColorSwatchProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\n /* color specification /\n colorDef: ColorDef;\n /* function to run when user selects color swatch /\n onColorPick?: ((color: ColorDef, e: React.MouseEvent) => void) \| undefined;\n /* Show swatches as squares unless round is set to true /\n round?: boolean;\n}\n\n/* ColorSwatch Functional component displays a color swatch in a button\n * @beta\n */\nexport function ColorSwatch(props: ColorSwatchProps) {\n const rgbaString = getCSSColorFromDef(props.colorDef);\n const colorStyle: React.CSSProperties = {\n backgroundColor: rgbaString,\n ...props.style,\n };\n\n const handleClick = (e: React.MouseEvent) => {\n // istanbul ignore else\n if (props && props.onColorPick)\n props.onColorPick(props.colorDef, e);\n };\n\n const classes = classnames(\n \"components-color-swatch\",\n props.round && \"round\",\n props.className,\n );\n\n const {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n onColorPick, colorDef, round, // do not pass on color swatch specific props\n // eslint-disable-next-line comma-dangle\n ...otherProps // pass-through props\n } = props;\n\n return <button {...otherProps} style={colorStyle} className={classes} onClick={handleClick} />;\n}\n"]}
1	+ {"version":3,"file":"Swatch.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/Swatch.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,yBAAuB;AACvB,4DAAoC;AACpC,6CAA+B;AAG/B,6DAA0D;AAc1D;;GAEG;AACH,SAAgB,WAAW,CAAC,KAAuB;IACjD,MAAM,UAAU,GAAG,IAAA,uCAAkB,EAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACtD,MAAM,UAAU,GAAwB;QACtC,eAAe,EAAE,UAAU;QAC3B,GAAG,KAAK,CAAC,KAAK;KACf,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,CAAmB,EAAE,EAAE;QAC1C,uBAAuB;QACvB,IAAI,KAAK,IAAI,KAAK,CAAC,WAAW;YAC5B,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,IAAA,oBAAU,EACxB,yBAAyB,EACzB,KAAK,CAAC,KAAK,IAAI,OAAO,EACtB,KAAK,CAAC,SAAS,CAChB,CAAC;IAEF,MAAM;IACJ,6DAA6D;IAC7D,WAAW,EAAE,QAAQ,EAAE,KAAK,EAAE,6CAA6C;IAC3E,wCAAwC;IACxC,GAAG,UAAU,CAAC,qBAAqB;MACpC,GAAG,KAAK,CAAC;IAEV,OAAO,mCAAY,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,GAAI,CAAC;AACjG,CAAC;AA3BD,kCA2BC","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 \"./Swatch.scss\";\nimport classnames from \"classnames\";\nimport as React from \"react\";\nimport { ColorDef } from \"@itwin/core-common\";\nimport { CommonProps } from \"@itwin/core-react\";\nimport { getCSSColorFromDef } from \"./getCSSColorFromDef\";\n\n/** Properties for the [[ColorSwatch]] React component\n * @beta\n /\nexport interface ColorSwatchProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\n /* color specification /\n colorDef: ColorDef;\n /* function to run when user selects color swatch /\n onColorPick?: ((color: ColorDef, e: React.MouseEvent) => void) \| undefined;\n /* Show swatches as squares unless round is set to true /\n round?: boolean;\n}\n\n/* ColorSwatch Functional component displays a color swatch in a button\n * @beta\n */\nexport function ColorSwatch(props: ColorSwatchProps) {\n const rgbaString = getCSSColorFromDef(props.colorDef);\n const colorStyle: React.CSSProperties = {\n backgroundColor: rgbaString,\n ...props.style,\n };\n\n const handleClick = (e: React.MouseEvent) => {\n // istanbul ignore else\n if (props && props.onColorPick)\n props.onColorPick(props.colorDef, e);\n };\n\n const classes = classnames(\n \"components-color-swatch\",\n props.round && \"round\",\n props.className,\n );\n\n const {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n onColorPick, colorDef, round, // do not pass on color swatch specific props\n // eslint-disable-next-line comma-dangle\n ...otherProps // pass-through props\n } = props;\n\n return <button {...otherProps} style={colorStyle} className={classes} onClick={handleClick} />;\n}\n"]}

package/lib/cjs/imodel-components-react/color/Swatch.scss CHANGED Viewed

@@ -2,7 +2,6 @@
 * 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";
 .components-color-swatch {
   font-size: var(--iui-font-size-1);
@@ -11,7 +10,7 @@
   border-width: 1px;
   border-radius: var(--iui-border-radius-1);
   border-style: solid;
-  border-color: $buic-inputs-border;
+  border-color: var(--iui-color-border-subtle);
   &.round {
     border-radius: 50%;

package/lib/cjs/imodel-components-react/editors/ColorEditor.js CHANGED Viewed

@@ -8,7 +8,11 @@
  */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/lib/cjs/imodel-components-react/editors/ColorEditor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorEditor.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/editors/ColorEditor.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 PropertyEditors\n /\n\nimport \"./ColorEditor.scss\";\nimport classnames from \"classnames\";\nimport as React from \"react\";\nimport { ColorDef } from \"@itwin/core-common\";\nimport {\n ColorEditorParams, PropertyEditorParams, PropertyEditorParamTypes, PropertyRecord, PropertyValue, PropertyValueFormat,\n StandardEditorNames, StandardTypeNames,\n} from \"@itwin/appui-abstract\";\nimport { PropertyEditorBase, PropertyEditorManager, PropertyEditorProps, TypeEditor } from \"@itwin/components-react\";\nimport { ColorPickerButton } from \"../color/ColorPickerButton\";\n\n/** @internal /\ninterface ColorEditorState {\n colorValue: number;\n readonly: boolean;\n isDisabled?: boolean;\n numColumns: number;\n availableColors: ColorDef[];\n}\n\n/* ColorEditor React component that is a property editor with text input\n * @beta\n /\nexport class ColorEditor extends React.PureComponent<PropertyEditorProps, ColorEditorState> implements TypeEditor {\n private _buttonElement: React.RefObject<HTMLButtonElement> = React.createRef();\n\n /* @internal /\n public override readonly state: Readonly<ColorEditorState> = {\n colorValue: 0,\n readonly: false,\n numColumns: 4,\n availableColors: [],\n };\n\n public async getPropertyValue(): Promise<PropertyValue \| undefined> {\n const record = this.props.propertyRecord;\n let propertyValue: PropertyValue \| undefined;\n\n // istanbul ignore else\n if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n propertyValue = {\n valueFormat: PropertyValueFormat.Primitive,\n value: this.state.colorValue,\n displayValue: \"\",\n };\n }\n\n return propertyValue;\n }\n\n public get htmlElement(): HTMLElement \| null {\n return this._buttonElement.current;\n }\n\n public get hasFocus(): boolean {\n return document.activeElement === this._buttonElement.current;\n }\n\n private setFocus(): void {\n // istanbul ignore else\n if (this._buttonElement && this._buttonElement.current && !this.state.isDisabled) {\n this._buttonElement.current.focus();\n }\n }\n\n private _onColorPick = (color: ColorDef) => {\n const propertyRecord = this.props.propertyRecord as PropertyRecord;\n\n this.setState({\n colorValue: color.tbgr,\n }, async () => {\n // istanbul ignore else\n if (propertyRecord && this.props.onCommit) {\n const propertyValue = await this.getPropertyValue();\n // istanbul ignore else\n if (propertyValue !== undefined) {\n this.props.onCommit({ propertyRecord, newValue: propertyValue });\n }\n }\n });\n };\n\n /* @internal /\n public override componentDidMount() {\n this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\n }\n\n /* @internal /\n public override componentDidUpdate(prevProps: PropertyEditorProps) {\n if (this.props.propertyRecord !== prevProps.propertyRecord) {\n this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\n }\n }\n\n private async setStateFromProps() {\n const record = this.props.propertyRecord;\n\n // istanbul ignore else\n if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n const colorValue = record.value.value as number;\n let numColumns = 4;\n const availableColors = new Array<ColorDef>();\n const readonly = record && undefined !== record.isReadonly ? record.isReadonly : / istanbul ignore next / false;\n const isDisabled = record ? record.isDisabled : / istanbul ignore next / undefined;\n\n if (record.property.editor && record.property.editor.params) {\n const colorParams = record.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.ColorData) as ColorEditorParams;\n // istanbul ignore else\n if (colorParams) {\n colorParams.colorValues.forEach((colorNumber: number) => {\n availableColors.push(ColorDef.create(colorNumber));\n });\n // istanbul ignore else\n if (colorParams.numColumns)\n numColumns = colorParams.numColumns;\n }\n }\n this.setState(\n { colorValue, readonly, isDisabled, numColumns, availableColors },\n () => {\n if (this.props.setFocus) {\n this.setFocus();\n }\n },\n );\n }\n }\n\n /* @internal /\n public override render() {\n const colorDef = ColorDef.create(this.state.colorValue);\n return (\n <div className={classnames(\"components-color-editor\", this.props.className)} style={this.props.style}>\n <ColorPickerButton ref={this._buttonElement}\n initialColor={colorDef}\n colorDefs={this.state.availableColors.length > 0 ? this.state.availableColors : [colorDef]}\n numColumns={this.state.numColumns}\n disabled={this.state.isDisabled ? true : false}\n readonly={this.state.readonly}\n onColorPick={this._onColorPick}\n data-testid=\"components-color-editor\" />\n </div>\n );\n }\n}\n\n/* Color Property Editor registered for the \"number\" type name and \"color-picker\" editor name.\n * It uses the [[ColorEditor]] React component.\n * @beta\n */\nexport class ColorPropertyEditor extends PropertyEditorBase {\n public get reactNode(): React.ReactNode {\n return <ColorEditor />;\n }\n}\n\nPropertyEditorManager.registerEditor(StandardTypeNames.Number, ColorPropertyEditor, StandardEditorNames.ColorPicker);\n"]}
1	+ {"version":3,"file":"ColorEditor.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/editors/ColorEditor.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 PropertyEditors\n /\n\nimport \"./ColorEditor.scss\";\nimport classnames from \"classnames\";\nimport as React from \"react\";\nimport { ColorDef } from \"@itwin/core-common\";\nimport {\n ColorEditorParams, PropertyEditorParams, PropertyEditorParamTypes, PropertyRecord, PropertyValue, PropertyValueFormat,\n StandardEditorNames, StandardTypeNames,\n} from \"@itwin/appui-abstract\";\nimport { PropertyEditorBase, PropertyEditorManager, PropertyEditorProps, TypeEditor } from \"@itwin/components-react\";\nimport { ColorPickerButton } from \"../color/ColorPickerButton\";\n\n/** @internal /\ninterface ColorEditorState {\n colorValue: number;\n readonly: boolean;\n isDisabled?: boolean;\n numColumns: number;\n availableColors: ColorDef[];\n}\n\n/* ColorEditor React component that is a property editor with text input\n * @beta\n /\nexport class ColorEditor extends React.PureComponent<PropertyEditorProps, ColorEditorState> implements TypeEditor {\n private _buttonElement: React.RefObject<HTMLButtonElement> = React.createRef();\n\n /* @internal /\n public override readonly state: Readonly<ColorEditorState> = {\n colorValue: 0,\n readonly: false,\n numColumns: 4,\n availableColors: [],\n };\n\n public async getPropertyValue(): Promise<PropertyValue \| undefined> {\n const record = this.props.propertyRecord;\n let propertyValue: PropertyValue \| undefined;\n\n // istanbul ignore else\n if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n propertyValue = {\n valueFormat: PropertyValueFormat.Primitive,\n value: this.state.colorValue,\n displayValue: \"\",\n };\n }\n\n return propertyValue;\n }\n\n public get htmlElement(): HTMLElement \| null {\n return this._buttonElement.current;\n }\n\n public get hasFocus(): boolean {\n return document.activeElement === this._buttonElement.current;\n }\n\n private setFocus(): void {\n // istanbul ignore else\n if (this._buttonElement && this._buttonElement.current && !this.state.isDisabled) {\n this._buttonElement.current.focus();\n }\n }\n\n private _onColorPick = (color: ColorDef) => {\n const propertyRecord = this.props.propertyRecord as PropertyRecord;\n\n this.setState({\n colorValue: color.tbgr,\n }, async () => {\n // istanbul ignore else\n if (propertyRecord && this.props.onCommit) {\n const propertyValue = await this.getPropertyValue();\n // istanbul ignore else\n if (propertyValue !== undefined) {\n this.props.onCommit({ propertyRecord, newValue: propertyValue });\n }\n }\n });\n };\n\n /* @internal /\n public override componentDidMount() {\n this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\n }\n\n /* @internal /\n public override componentDidUpdate(prevProps: PropertyEditorProps) {\n if (this.props.propertyRecord !== prevProps.propertyRecord) {\n this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\n }\n }\n\n private async setStateFromProps() {\n const record = this.props.propertyRecord;\n\n // istanbul ignore else\n if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n const colorValue = record.value.value as number;\n let numColumns = 4;\n const availableColors = new Array<ColorDef>();\n const readonly = record && undefined !== record.isReadonly ? record.isReadonly : / istanbul ignore next / false;\n const isDisabled = record ? record.isDisabled : / istanbul ignore next / undefined;\n\n if (record.property.editor && record.property.editor.params) {\n const colorParams = record.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.ColorData) as ColorEditorParams;\n // istanbul ignore else\n if (colorParams) {\n colorParams.colorValues.forEach((colorNumber: number) => {\n availableColors.push(ColorDef.create(colorNumber));\n });\n // istanbul ignore else\n if (colorParams.numColumns)\n numColumns = colorParams.numColumns;\n }\n }\n this.setState(\n { colorValue, readonly, isDisabled, numColumns, availableColors },\n () => {\n if (this.props.setFocus) {\n this.setFocus();\n }\n },\n );\n }\n }\n\n /* @internal /\n public override render() {\n const colorDef = ColorDef.create(this.state.colorValue);\n return (\n <div className={classnames(\"components-color-editor\", this.props.className)} style={this.props.style}>\n <ColorPickerButton ref={this._buttonElement}\n initialColor={colorDef}\n colorDefs={this.state.availableColors.length > 0 ? this.state.availableColors : [colorDef]}\n numColumns={this.state.numColumns}\n disabled={this.state.isDisabled ? true : false}\n readonly={this.state.readonly}\n onColorPick={this._onColorPick}\n data-testid=\"components-color-editor\" />\n </div>\n );\n }\n}\n\n/* Color Property Editor registered for the \"number\" type name and \"color-picker\" editor name.\n * It uses the [[ColorEditor]] React component.\n * @beta\n */\nexport class ColorPropertyEditor extends PropertyEditorBase {\n public get reactNode(): React.ReactNode {\n return <ColorEditor />;\n }\n}\n\nPropertyEditorManager.registerEditor(StandardTypeNames.Number, ColorPropertyEditor, StandardEditorNames.ColorPicker);\n"]}

package/lib/cjs/imodel-components-react/editors/ColorEditor.scss CHANGED Viewed

@@ -9,7 +9,7 @@ $components-color-editor-item-height: 100%;
 .components-color-editor {
   font-family: var(--iui-font-sans);
   font-size: var(--iui-font-size-1);
-  color: $buic-foreground-body;
+  color: var(--iui-color-text);
   border: none;
   box-sizing: border-box;
   height: $components-color-editor-item-height;

package/lib/cjs/imodel-components-react/editors/WeightEditor.js CHANGED Viewed

@@ -8,7 +8,11 @@
  */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/lib/cjs/imodel-components-react/editors/WeightEditor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"WeightEditor.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/editors/WeightEditor.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 PropertyEditors\n /\n\nimport \"./WeightEditor.scss\";\nimport classnames from \"classnames\";\nimport as React from \"react\";\nimport { PropertyRecord, PropertyValue, PropertyValueFormat, StandardEditorNames, StandardTypeNames } from \"@itwin/appui-abstract\";\nimport { PropertyEditorBase, PropertyEditorManager, PropertyEditorProps, TypeEditor } from \"@itwin/components-react\";\nimport { WeightPickerButton } from \"../lineweight/WeightPickerButton\";\n\n// cspell:ignore lineweight\n\n/** @internal /\ninterface WeightEditorState {\n weightValue: number;\n readonly: boolean;\n isDisabled?: boolean;\n}\n\n/* WeightEditor React component that is a property editor for picking a weight using a [[WeightPickerButton]] component\n * @public\n /\nexport class WeightEditor extends React.PureComponent<PropertyEditorProps, WeightEditorState> implements TypeEditor {\n private _control: any \| null = null;\n private _isMounted = false;\n private _availableWeights: number[] = [];\n private _divElement = React.createRef<HTMLDivElement>();\n\n /* @internal /\n public override readonly state: Readonly<WeightEditorState> = {\n weightValue: 0,\n readonly: false,\n };\n\n constructor(props: PropertyEditorProps) {\n super(props);\n\n // TODO: add support for following if we need to specify set of weights to display\n // const record = this.props.propertyRecord;\n // if (record && record.property && record.property.editor && record.property.editor.params) {\n // const weightParams = record.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.ColorData) as WeightEditorParams;\n // // istanbul ignore else\n // if (weightParams) {\n // weightParams.weightValues.forEach((weight: number) => {\n // this._availableWeights.push(weight);\n // });\n // }\n // }\n }\n\n public async getPropertyValue(): Promise<PropertyValue \| undefined> {\n const record = this.props.propertyRecord;\n let propertyValue: PropertyValue \| undefined;\n\n // istanbul ignore else\n if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n propertyValue = {\n valueFormat: PropertyValueFormat.Primitive,\n value: this.state.weightValue,\n displayValue: \"\",\n };\n }\n\n return propertyValue;\n }\n\n public get htmlElement(): HTMLElement \| null {\n return this._divElement.current;\n }\n\n public get hasFocus(): boolean {\n let containsFocus = false;\n // istanbul ignore else\n if (this._divElement.current)\n containsFocus = this._divElement.current.contains(document.activeElement);\n return containsFocus;\n }\n\n private setFocus(): void {\n // istanbul ignore else\n if (this._control && !this.state.isDisabled) {\n this._control.setFocus();\n }\n }\n\n private _onLineWeightPick = (weight: number) => {\n const propertyRecord = this.props.propertyRecord as PropertyRecord;\n\n this.setState({\n weightValue: weight,\n }, async () => {\n // istanbul ignore else\n if (propertyRecord && this.props.onCommit) {\n const propertyValue = await this.getPropertyValue();\n // istanbul ignore else\n if (propertyValue !== undefined) {\n this.props.onCommit({ propertyRecord, newValue: propertyValue });\n }\n }\n });\n };\n\n /* @internal /\n public override componentDidMount() {\n this._isMounted = true;\n this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\n }\n\n /* @internal /\n public override componentWillUnmount() {\n this._isMounted = false;\n }\n\n /* @internal /\n public override componentDidUpdate(prevProps: PropertyEditorProps) {\n if (this.props.propertyRecord !== prevProps.propertyRecord) {\n this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\n }\n }\n\n private async setStateFromProps() {\n const record = this.props.propertyRecord;\n let initialValue = 0;\n\n // istanbul ignore else\n if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n initialValue = record.value.value as number;\n }\n\n const readonly = record && undefined !== record.isReadonly ? record.isReadonly : false;\n const isDisabled = record ? record.isDisabled : undefined;\n\n // istanbul ignore else\n if (this._isMounted)\n this.setState(\n { weightValue: initialValue, readonly, isDisabled },\n () => {\n if (this.props.setFocus) {\n this.setFocus();\n }\n },\n );\n }\n\n /* @internal /\n public override render() {\n return (\n <div className={classnames(\"components-weight-editor\", this.props.className)} style={this.props.style} ref={this._divElement}>\n <WeightPickerButton ref={(control) => this._control = control}\n activeWeight={this.state.weightValue}\n weights={this._availableWeights.length > 0 ? / istanbul ignore next / this._availableWeights : undefined}\n disabled={this.state.isDisabled ? true : false}\n readonly={this.state.readonly}\n onLineWeightPick={this._onLineWeightPick}\n data-testid=\"components-weight-editor\" />\n </div>\n );\n }\n}\n\n/* Weight Property Editor registered for the \"number\" type name and \"weight-picker\" editor name.\n * It uses the [[WeightEditor]] React component.\n * @public\n */\nexport class WeightPropertyEditor extends PropertyEditorBase {\n // istanbul ignore next\n public get reactNode(): React.ReactNode {\n return <WeightEditor />;\n }\n}\n\nPropertyEditorManager.registerEditor(StandardTypeNames.Number, WeightPropertyEditor, StandardEditorNames.WeightPicker);\n"]}
1	+ {"version":3,"file":"WeightEditor.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/editors/WeightEditor.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,+BAA6B;AAC7B,4DAAoC;AACpC,6CAA+B;AAC/B,0DAAmI;AACnI,8DAAqH;AACrH,yEAAsE;AAWtE;;GAEG;AACH,MAAa,YAAa,SAAQ,KAAK,CAAC,aAAqD;IAY3F,YAAY,KAA0B;QACpC,KAAK,CAAC,KAAK,CAAC,CAAC;QAZP,aAAQ,GAAe,IAAI,CAAC;QAC5B,eAAU,GAAG,KAAK,CAAC;QACnB,sBAAiB,GAAa,EAAE,CAAC;QACjC,gBAAW,GAAG,KAAK,CAAC,SAAS,EAAkB,CAAC;QAExD,gBAAgB;QACS,UAAK,GAAgC;YAC5D,WAAW,EAAE,CAAC;YACd,QAAQ,EAAE,KAAK;SAChB,CAAC;QAqDM,sBAAiB,GAAG,CAAC,MAAc,EAAE,EAAE;YAC7C,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,cAAgC,CAAC;YAEnE,IAAI,CAAC,QAAQ,CAAC;gBACZ,WAAW,EAAE,MAAM;aACpB,EAAE,KAAK,IAAI,EAAE;gBACZ,uBAAuB;gBACvB,IAAI,cAAc,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;oBACzC,MAAM,aAAa,GAAG,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC;oBACpD,uBAAuB;oBACvB,IAAI,aAAa,KAAK,SAAS,EAAE;wBAC/B,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,cAAc,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC,CAAC;qBAClE;iBACF;YACH,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QA/DA,kFAAkF;QAClF,6CAA6C;QAC7C,+FAA+F;QAC/F,wKAAwK;QACxK,6BAA6B;QAC7B,yBAAyB;QACzB,+DAA+D;QAC/D,8CAA8C;QAC9C,WAAW;QACX,OAAO;QACP,MAAM;IACR,CAAC;IAEM,KAAK,CAAC,gBAAgB;QAC3B,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC;QACzC,IAAI,aAAwC,CAAC;QAE7C,uBAAuB;QACvB,IAAI,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,WAAW,KAAK,oCAAmB,CAAC,SAAS,EAAE;YACxE,aAAa,GAAG;gBACd,WAAW,EAAE,oCAAmB,CAAC,SAAS;gBAC1C,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW;gBAC7B,YAAY,EAAE,EAAE;aACjB,CAAC;SACH;QAED,OAAO,aAAa,CAAC;IACvB,CAAC;IAED,IAAW,WAAW;QACpB,OAAO,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC;IAClC,CAAC;IAED,IAAW,QAAQ;QACjB,IAAI,aAAa,GAAG,KAAK,CAAC;QAC1B,uBAAuB;QACvB,IAAI,IAAI,CAAC,WAAW,CAAC,OAAO;YAC1B,aAAa,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;QAC5E,OAAO,aAAa,CAAC;IACvB,CAAC;IAEO,QAAQ;QACd,uBAAuB;QACvB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE;YAC3C,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;SAC1B;IACH,CAAC;IAmBD,gBAAgB;IACA,iBAAiB;QAC/B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,8DAA8D;IAC1F,CAAC;IAED,gBAAgB;IACA,oBAAoB;QAClC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;IAC1B,CAAC;IAED,gBAAgB;IACA,kBAAkB,CAAC,SAA8B;QAC/D,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,KAAK,SAAS,CAAC,cAAc,EAAE;YAC1D,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,8DAA8D;SACzF;IACH,CAAC;IAEO,KAAK,CAAC,iBAAiB;QAC7B,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC;QACzC,IAAI,YAAY,GAAG,CAAC,CAAC;QAErB,uBAAuB;QACvB,IAAI,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,WAAW,KAAK,oCAAmB,CAAC,SAAS,EAAE;YACxE,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,KAAe,CAAC;SAC7C;QAED,MAAM,QAAQ,GAAG,MAAM,IAAI,SAAS,KAAK,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC;QACvF,MAAM,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC;QAE1D,uBAAuB;QACvB,IAAI,IAAI,CAAC,UAAU;YACjB,IAAI,CAAC,QAAQ,CACX,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,EACnD,GAAG,EAAE;gBACH,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;oBACvB,IAAI,CAAC,QAAQ,EAAE,CAAC;iBACjB;YACH,CAAC,CACF,CAAC;IACN,CAAC;IAED,gBAAgB;IACA,MAAM;QACpB,OAAO,CACL,6BAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,0BAA0B,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,WAAW;YAC1H,oBAAC,uCAAkB,IAAC,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,OAAO,EAC3D,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,EACpC,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,0BAA0B,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,EAC1G,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EAC9C,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAC7B,gBAAgB,EAAE,IAAI,CAAC,iBAAiB,iBAC5B,0BAA0B,GAAG,CACvC,CACP,CAAC;IACJ,CAAC;CACF;AAxID,oCAwIC;AAED;;;GAGG;AACH,MAAa,oBAAqB,SAAQ,qCAAkB;IAC1D,uBAAuB;IACvB,IAAW,SAAS;QAClB,OAAO,oBAAC,YAAY,OAAG,CAAC;IAC1B,CAAC;CACF;AALD,oDAKC;AAED,wCAAqB,CAAC,cAAc,CAAC,kCAAiB,CAAC,MAAM,EAAE,oBAAoB,EAAE,oCAAmB,CAAC,YAAY,CAAC,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 PropertyEditors\n /\n\nimport \"./WeightEditor.scss\";\nimport classnames from \"classnames\";\nimport as React from \"react\";\nimport { PropertyRecord, PropertyValue, PropertyValueFormat, StandardEditorNames, StandardTypeNames } from \"@itwin/appui-abstract\";\nimport { PropertyEditorBase, PropertyEditorManager, PropertyEditorProps, TypeEditor } from \"@itwin/components-react\";\nimport { WeightPickerButton } from \"../lineweight/WeightPickerButton\";\n\n// cspell:ignore lineweight\n\n/** @internal /\ninterface WeightEditorState {\n weightValue: number;\n readonly: boolean;\n isDisabled?: boolean;\n}\n\n/* WeightEditor React component that is a property editor for picking a weight using a [[WeightPickerButton]] component\n * @public\n /\nexport class WeightEditor extends React.PureComponent<PropertyEditorProps, WeightEditorState> implements TypeEditor {\n private _control: any \| null = null;\n private _isMounted = false;\n private _availableWeights: number[] = [];\n private _divElement = React.createRef<HTMLDivElement>();\n\n /* @internal /\n public override readonly state: Readonly<WeightEditorState> = {\n weightValue: 0,\n readonly: false,\n };\n\n constructor(props: PropertyEditorProps) {\n super(props);\n\n // TODO: add support for following if we need to specify set of weights to display\n // const record = this.props.propertyRecord;\n // if (record && record.property && record.property.editor && record.property.editor.params) {\n // const weightParams = record.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.ColorData) as WeightEditorParams;\n // // istanbul ignore else\n // if (weightParams) {\n // weightParams.weightValues.forEach((weight: number) => {\n // this._availableWeights.push(weight);\n // });\n // }\n // }\n }\n\n public async getPropertyValue(): Promise<PropertyValue \| undefined> {\n const record = this.props.propertyRecord;\n let propertyValue: PropertyValue \| undefined;\n\n // istanbul ignore else\n if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n propertyValue = {\n valueFormat: PropertyValueFormat.Primitive,\n value: this.state.weightValue,\n displayValue: \"\",\n };\n }\n\n return propertyValue;\n }\n\n public get htmlElement(): HTMLElement \| null {\n return this._divElement.current;\n }\n\n public get hasFocus(): boolean {\n let containsFocus = false;\n // istanbul ignore else\n if (this._divElement.current)\n containsFocus = this._divElement.current.contains(document.activeElement);\n return containsFocus;\n }\n\n private setFocus(): void {\n // istanbul ignore else\n if (this._control && !this.state.isDisabled) {\n this._control.setFocus();\n }\n }\n\n private _onLineWeightPick = (weight: number) => {\n const propertyRecord = this.props.propertyRecord as PropertyRecord;\n\n this.setState({\n weightValue: weight,\n }, async () => {\n // istanbul ignore else\n if (propertyRecord && this.props.onCommit) {\n const propertyValue = await this.getPropertyValue();\n // istanbul ignore else\n if (propertyValue !== undefined) {\n this.props.onCommit({ propertyRecord, newValue: propertyValue });\n }\n }\n });\n };\n\n /* @internal /\n public override componentDidMount() {\n this._isMounted = true;\n this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\n }\n\n /* @internal /\n public override componentWillUnmount() {\n this._isMounted = false;\n }\n\n /* @internal /\n public override componentDidUpdate(prevProps: PropertyEditorProps) {\n if (this.props.propertyRecord !== prevProps.propertyRecord) {\n this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\n }\n }\n\n private async setStateFromProps() {\n const record = this.props.propertyRecord;\n let initialValue = 0;\n\n // istanbul ignore else\n if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n initialValue = record.value.value as number;\n }\n\n const readonly = record && undefined !== record.isReadonly ? record.isReadonly : false;\n const isDisabled = record ? record.isDisabled : undefined;\n\n // istanbul ignore else\n if (this._isMounted)\n this.setState(\n { weightValue: initialValue, readonly, isDisabled },\n () => {\n if (this.props.setFocus) {\n this.setFocus();\n }\n },\n );\n }\n\n /* @internal /\n public override render() {\n return (\n <div className={classnames(\"components-weight-editor\", this.props.className)} style={this.props.style} ref={this._divElement}>\n <WeightPickerButton ref={(control) => this._control = control}\n activeWeight={this.state.weightValue}\n weights={this._availableWeights.length > 0 ? / istanbul ignore next / this._availableWeights : undefined}\n disabled={this.state.isDisabled ? true : false}\n readonly={this.state.readonly}\n onLineWeightPick={this._onLineWeightPick}\n data-testid=\"components-weight-editor\" />\n </div>\n );\n }\n}\n\n/* Weight Property Editor registered for the \"number\" type name and \"weight-picker\" editor name.\n * It uses the [[WeightEditor]] React component.\n * @public\n */\nexport class WeightPropertyEditor extends PropertyEditorBase {\n // istanbul ignore next\n public get reactNode(): React.ReactNode {\n return <WeightEditor />;\n }\n}\n\nPropertyEditorManager.registerEditor(StandardTypeNames.Number, WeightPropertyEditor, StandardEditorNames.WeightPicker);\n"]}

package/lib/cjs/imodel-components-react/editors/WeightEditor.scss CHANGED Viewed

@@ -9,7 +9,7 @@ $components-weight-editor-item-height: 100%;
 .components-weight-editor {
   font-family: var(--iui-font-sans);
   font-size: var(--iui-font-size-1);
-  color: $buic-foreground-body;
+  color: var(--iui-color-text);
   border: none;
   box-sizing: border-box;
   height: $components-weight-editor-item-height;

package/lib/cjs/imodel-components-react/inputs/QuantityInput.js CHANGED Viewed

@@ -8,7 +8,11 @@
  */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/lib/cjs/imodel-components-react/inputs/QuantityInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"QuantityInput.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/inputs/QuantityInput.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG~~;;;;;;;;;;;;;;;;;;;;;;;;;~~AAEH,4DAAoC;AACpC,6CAA+B;AAC/B,wDAA8F;AAC9F,wDAA8C;AAG9C,8DAA2D;AAC3D,8DAAsD;AAkBtD;;GAEG;AACH,SAAgB,aAAa,CAAC,EAAE,YAAY,EAAE,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,gBAAgB,EAAE,GAAG,EAAiB;IAC5H,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,yBAAS,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,YAAY,CAAC,CAAC,CAAC;IAC1I,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,yBAAS,CAAC,iBAAiB,CAAC,4BAA4B,CAAC,YAAY,CAAC,CAAC,CAAC;IAEjI,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAa,EAAE,EAAE;QACtD,uBAAuB;QACvB,IAAI,aAAa,EAAE;YACjB,OAAO,aAAa,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;SAC7C;QACD,uBAAuB;QACvB,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,SAAiB,EAAgB,EAAE;QACxE,uBAAuB;QACvB,IAAI,UAAU,EAAE;YACd,MAAM,WAAW,GAAG,yBAAS,CAAC,iBAAiB,CAAC,oBAAoB,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;YAC5F,uBAAuB;YACvB,IAAI,sBAAM,CAAC,gBAAgB,CAAC,WAAW,CAAC,EAAE;gBACxC,OAAO,EAAE,KAAK,EAAE,WAAW,CAAC,KAAK,EAAE,CAAC;aACrC;iBAAM;gBACL,MAAM,QAAQ,GAAG,sBAAM,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;gBAC7F,OAAO,EAAE,UAAU,EAAE,GAAG,uCAAkB,CAAC,SAAS,CAAC,+BAA+B,CAAC,GAAG,QAAQ,EAAE,EAAE,CAAC;aACtG;SACF;QACD,uBAAuB;QACvB,OAAO,EAAE,UAAU,EAAE,uCAAkB,CAAC,SAAS,CAAC,+BAA+B,CAAC,EAAE,CAAC;IACvF,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,UAAU,GAAG,IAAA,oBAAU,EAAC,SAAS,EAAE,2BAA2B,CAAC,CAAC;IAEtE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,uBAAuB,GAAG,CAAC,GAAS,EAAE;YAC1C,gBAAgB,CAAC,yBAAS,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,YAAY,CAAC,CAAC,CAAC;YAC5F,aAAa,CAAC,yBAAS,CAAC,iBAAiB,CAAC,4BAA4B,CAAC,YAAY,CAAC,CAAC,CAAC;QACxF,CAAC,CAAC,CAAC;QAEH,yBAAS,CAAC,iBAAiB,CAAC,mCAAmC,CAAC,WAAW,CAAC,uBAAuB,CAAC,CAAC;QACrG,OAAO,GAAG,EAAE;YACV,yBAAS,CAAC,iBAAiB,CAAC,mCAAmC,CAAC,cAAc,CAAC,uBAAuB,CAAC,CAAC;QAC1G,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,uBAAuB,GAAG,CAAC,CAAC,IAAgC,EAAQ,EAAE;YAC1E,MAAM,WAAW,GAAG,yBAAS,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,YAAY,CAAC,CAAC;YACjF,uBAAuB;YACvB,IAAI,IAAI,CAAC,YAAY,KAAK,WAAW,EAAE;gBACrC,gBAAgB,CAAC,yBAAS,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,YAAY,CAAC,CAAC,CAAC;gBAC5F,aAAa,CAAC,yBAAS,CAAC,iBAAiB,CAAC,4BAA4B,CAAC,YAAY,CAAC,CAAC,CAAC;aACvF;QACH,CAAC,CAAC,CAAC;QAEH,yBAAS,CAAC,iBAAiB,CAAC,wBAAwB,CAAC,WAAW,CAAC,uBAAuB,CAAC,CAAC;QAC1F,OAAO,GAAG,EAAE;YACV,yBAAS,CAAC,iBAAiB,CAAC,wBAAwB,CAAC,cAAc,CAAC,uBAAuB,CAAC,CAAC;QAC/F,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,OAAO,oBAAC,8BAAW,mBAAa,2BAA2B,EAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EACvG,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,GAAI,CAAC;AACvI,CAAC;AA7DD,sCA6DC","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 Inputs\n /\n\nimport classnames from \"classnames\";\nimport as React from \"react\";\nimport { IModelApp, QuantityFormatsChangedArgs, QuantityTypeArg } from \"@itwin/core-frontend\";\nimport { Parser } from \"@itwin/core-quantity\";\nimport { ParseResults } from \"@itwin/appui-abstract\";\nimport { CommonProps } from \"@itwin/core-react\";\nimport { UiIModelComponents } from \"../UiIModelComponents\";\nimport { ParsedInput } from \"@itwin/components-react\";\n\n/** Props for [[QuantityInput]] control\n * @beta\n /\nexport interface QuantityProps extends CommonProps {\n /* Initial magnitude in 'persistence' units. See `getPersistenceUnitByQuantityType` in [QuantityFormatter]($core-frontend) /\n initialValue: number;\n /* Type of quantity being input. /\n quantityType: QuantityTypeArg;\n /* Function to call in the quantity value is changed. The value returned will be in 'persistence' units. /\n onQuantityChange: (newQuantityValue: number) => void;\n /* Set to `true` if value is for display only /\n readonly?: boolean;\n /* Provides ability to return reference to HTMLInputElement /\n ref?: React.Ref<HTMLInputElement>;\n}\n\n/* Input control that allows users to input a quantity and show the formatted string that represents the value.\n * @beta\n */\nexport function QuantityInput({ initialValue, quantityType, readonly, className, style, onQuantityChange, ref }: QuantityProps) {\n const [formatterSpec, setFormatterSpec] = React.useState(() => IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType));\n const [parserSpec, setParserSpec] = React.useState(() => IModelApp.quantityFormatter.findParserSpecByQuantityType(quantityType));\n\n const formatValue = React.useCallback((value: number) => {\n // istanbul ignore else\n if (formatterSpec) {\n return formatterSpec.applyFormatting(value);\n }\n // istanbul ignore next\n return value.toFixed(2);\n }, [formatterSpec]);\n\n const parseString = React.useCallback((userInput: string): ParseResults => {\n // istanbul ignore else\n if (parserSpec) {\n const parseResult = IModelApp.quantityFormatter.parseToQuantityValue(userInput, parserSpec);\n // istanbul ignore else\n if (Parser.isParsedQuantity(parseResult)) {\n return { value: parseResult.value };\n } else {\n const statusId = Parser.isParseError(parseResult) ? parseResult.error.toString() : \"Unknown\";\n return { parseError: `${UiIModelComponents.translate(\"QuantityInput.NoParserDefined\")}${statusId}` };\n }\n }\n // istanbul ignore next\n return { parseError: UiIModelComponents.translate(\"QuantityInput.NoParserDefined\") };\n }, [parserSpec]);\n\n const classNames = classnames(className, \"components-quantity-input\");\n\n React.useEffect(() => {\n const handleUnitSystemChanged = ((): void => {\n setFormatterSpec(IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType));\n setParserSpec(IModelApp.quantityFormatter.findParserSpecByQuantityType(quantityType));\n });\n\n IModelApp.quantityFormatter.onActiveFormattingUnitSystemChanged.addListener(handleUnitSystemChanged);\n return () => {\n IModelApp.quantityFormatter.onActiveFormattingUnitSystemChanged.removeListener(handleUnitSystemChanged);\n };\n }, [quantityType]);\n\n React.useEffect(() => {\n const handleUnitSystemChanged = ((args: QuantityFormatsChangedArgs): void => {\n const quantityKey = IModelApp.quantityFormatter.getQuantityTypeKey(quantityType);\n // istanbul ignore else\n if (args.quantityType === quantityKey) {\n setFormatterSpec(IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType));\n setParserSpec(IModelApp.quantityFormatter.findParserSpecByQuantityType(quantityType));\n }\n });\n\n IModelApp.quantityFormatter.onQuantityFormatsChanged.addListener(handleUnitSystemChanged);\n return () => {\n IModelApp.quantityFormatter.onQuantityFormatsChanged.removeListener(handleUnitSystemChanged);\n };\n }, [quantityType]);\n\n return <ParsedInput data-testid=\"components-quantity-input\" ref={ref} style={style} className={classNames}\n onChange={onQuantityChange} initialValue={initialValue} readonly={readonly} formatValue={formatValue} parseString={parseString} />;\n}\n"]}
1	+ {"version":3,"file":"QuantityInput.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/inputs/QuantityInput.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 Inputs\n /\n\nimport classnames from \"classnames\";\nimport as React from \"react\";\nimport { IModelApp, QuantityFormatsChangedArgs, QuantityTypeArg } from \"@itwin/core-frontend\";\nimport { Parser } from \"@itwin/core-quantity\";\nimport { ParseResults } from \"@itwin/appui-abstract\";\nimport { CommonProps } from \"@itwin/core-react\";\nimport { UiIModelComponents } from \"../UiIModelComponents\";\nimport { ParsedInput } from \"@itwin/components-react\";\n\n/** Props for [[QuantityInput]] control\n * @beta\n /\nexport interface QuantityProps extends CommonProps {\n /* Initial magnitude in 'persistence' units. See `getPersistenceUnitByQuantityType` in [QuantityFormatter]($core-frontend) /\n initialValue: number;\n /* Type of quantity being input. /\n quantityType: QuantityTypeArg;\n /* Function to call in the quantity value is changed. The value returned will be in 'persistence' units. /\n onQuantityChange: (newQuantityValue: number) => void;\n /* Set to `true` if value is for display only /\n readonly?: boolean;\n /* Provides ability to return reference to HTMLInputElement /\n ref?: React.Ref<HTMLInputElement>;\n}\n\n/* Input control that allows users to input a quantity and show the formatted string that represents the value.\n * @beta\n */\nexport function QuantityInput({ initialValue, quantityType, readonly, className, style, onQuantityChange, ref }: QuantityProps) {\n const [formatterSpec, setFormatterSpec] = React.useState(() => IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType));\n const [parserSpec, setParserSpec] = React.useState(() => IModelApp.quantityFormatter.findParserSpecByQuantityType(quantityType));\n\n const formatValue = React.useCallback((value: number) => {\n // istanbul ignore else\n if (formatterSpec) {\n return formatterSpec.applyFormatting(value);\n }\n // istanbul ignore next\n return value.toFixed(2);\n }, [formatterSpec]);\n\n const parseString = React.useCallback((userInput: string): ParseResults => {\n // istanbul ignore else\n if (parserSpec) {\n const parseResult = IModelApp.quantityFormatter.parseToQuantityValue(userInput, parserSpec);\n // istanbul ignore else\n if (Parser.isParsedQuantity(parseResult)) {\n return { value: parseResult.value };\n } else {\n const statusId = Parser.isParseError(parseResult) ? parseResult.error.toString() : \"Unknown\";\n return { parseError: `${UiIModelComponents.translate(\"QuantityInput.NoParserDefined\")}${statusId}` };\n }\n }\n // istanbul ignore next\n return { parseError: UiIModelComponents.translate(\"QuantityInput.NoParserDefined\") };\n }, [parserSpec]);\n\n const classNames = classnames(className, \"components-quantity-input\");\n\n React.useEffect(() => {\n const handleUnitSystemChanged = ((): void => {\n setFormatterSpec(IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType));\n setParserSpec(IModelApp.quantityFormatter.findParserSpecByQuantityType(quantityType));\n });\n\n IModelApp.quantityFormatter.onActiveFormattingUnitSystemChanged.addListener(handleUnitSystemChanged);\n return () => {\n IModelApp.quantityFormatter.onActiveFormattingUnitSystemChanged.removeListener(handleUnitSystemChanged);\n };\n }, [quantityType]);\n\n React.useEffect(() => {\n const handleUnitSystemChanged = ((args: QuantityFormatsChangedArgs): void => {\n const quantityKey = IModelApp.quantityFormatter.getQuantityTypeKey(quantityType);\n // istanbul ignore else\n if (args.quantityType === quantityKey) {\n setFormatterSpec(IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType));\n setParserSpec(IModelApp.quantityFormatter.findParserSpecByQuantityType(quantityType));\n }\n });\n\n IModelApp.quantityFormatter.onQuantityFormatsChanged.addListener(handleUnitSystemChanged);\n return () => {\n IModelApp.quantityFormatter.onQuantityFormatsChanged.removeListener(handleUnitSystemChanged);\n };\n }, [quantityType]);\n\n return <ParsedInput data-testid=\"components-quantity-input\" ref={ref} style={style} className={classNames}\n onChange={onQuantityChange} initialValue={initialValue} readonly={readonly} formatValue={formatValue} parseString={parseString} />;\n}\n"]}

package/lib/cjs/imodel-components-react/inputs/QuantityNumberInput.d.ts CHANGED Viewed

@@ -8,7 +8,7 @@ import { InputProps } from "@itwin/itwinui-react";
 /** Step function prototype for [[QuantityNumberInput]] component
  * @beta
  */
-export declare type StepFunctionProp = number | ((direction: string) => number | undefined);
+export type StepFunctionProp = number | ((direction: string) => number | undefined);
 /** Properties for the [[QuantityNumberInput]] component
  * @beta
  */

package/lib/cjs/imodel-components-react/inputs/QuantityNumberInput.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"QuantityNumberInput.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/inputs/QuantityNumberInput.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,4BAA4B,CAAC;AAEpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAyC,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAE9F,OAAO,EAAS,UAAU,EAAE,MAAM,sBAAsB,CAAC;~~AAEzD~~;;GAEG;AACH,~~oBAAY~~,gBAAgB,GAAG,MAAM,GAAG,CAAC,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC,CAAC;AAEpF;;GAEG;AACH,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,UAAU,EAAE,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC;IAC3H;qDACiD;IACjD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yEAAyE;IACzE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iDAAiD;IACjD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,6DAA6D;IAC7D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kHAAkH;IAClH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,0HAA0H;IAC1H,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,8GAA8G;IAC9G,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,gEAAgE;IAChE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,+DAA+D;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC,oCAAoC;IACpC,YAAY,EAAE,eAAe,CAAC;CAC/B;~~AA8QD~~;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,GAAG,CAAC,OAAO,GAAG,IAAoC,CAAC"}
1	+ {"version":3,"file":"QuantityNumberInput.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/inputs/QuantityNumberInput.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,4BAA4B,CAAC;AAEpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAyC,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAE9F,OAAO,EAAS,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAGzD;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,CAAC,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC,CAAC;AAEpF;;GAEG;AACH,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,UAAU,EAAE,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC;IAC3H;qDACiD;IACjD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yEAAyE;IACzE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iDAAiD;IACjD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,6DAA6D;IAC7D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kHAAkH;IAClH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,0HAA0H;IAC1H,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,8GAA8G;IAC9G,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,gEAAgE;IAChE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,+DAA+D;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC,oCAAoC;IACpC,YAAY,EAAE,eAAe,CAAC;CAC/B;AAkRD;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,GAAG,CAAC,OAAO,GAAG,IAAoC,CAAC"}