npm - @itwin/imodel-components-react - Versions diffs - 3.0.0-dev.83 → 3.0.0-dev.87 - Mend

@itwin/imodel-components-react 3.0.0-dev.83 → 3.0.0-dev.87

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 (151) hide show

package/README.md CHANGED Viewed

@@ -1,11 +1,11 @@
-# @itwin/imodel-components-react
-Copyright © Bentley Systems, Incorporated. All rights reserved. See LICENSE.md for license terms and full copyright notice.
-## Description
-The __@itwin/imodel-components-react__ package contains React components that depend on the imodeljs-frontend, imodeljs-common or imodeljs-quantity packages.
-## Documentation
-See the [iTwin.js](https://www.itwinjs.org) documentation for more information.
+# @itwin/imodel-components-react
+Copyright © Bentley Systems, Incorporated. All rights reserved. See LICENSE.md for license terms and full copyright notice.
+## Description
+The __@itwin/imodel-components-react__ package contains React components that depend on the imodeljs-frontend, imodeljs-common or imodeljs-quantity packages.
+## Documentation
+See the [iTwin.js](https://www.itwinjs.org) documentation for more information.

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

	@@ -1 +1 @@
1	- {"version":3,"file":"UiIModelComponents.js","sourceRoot":"","sources":["../../../src/imodel-components-react/UiIModelComponents.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,iCAAsC;AACtC,sDAA6C;AAC7C,wDAAiD;AAEjD,0DAA8D;AAC9D,8DAAuD;AAEvD;;;GAGG;AACH,MAAa,kBAAkB;IAI7B;;;OAGG;IACI,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,YAA2B;QACxD,IAAI,kBAAkB,CAAC,YAAY,EAAE;YACnC,qBAAM,CAAC,OAAO,CAAC,kBAAkB,CAAC,cAAc,CAAC,kBAAkB,CAAC,EAAE,8CAA8C,CAAC,CAAC;YACtH,OAAO;SACR;QAED,IAAA,qBAAa,GAAE,CAAC;QAChB,kBAAkB,CAAC,aAAa,GAAG,YAAY,IAAI,yBAAS,CAAC,YAAY,CAAC;QAC1E,MAAM,kBAAkB,CAAC,aAAa,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,qBAAqB,CAAC,CAAC;QAEnG,MAAM,+BAAY,CAAC,UAAU,CAAC,kBAAkB,CAAC,aAAa,CAAC,CAAC;QAChE,kBAAkB,CAAC,YAAY,GAAG,IAAI,CAAC;IACzC,CAAC;IAED,gEAAgE;IACzD,MAAM,CAAC,SAAS;QACrB,IAAI,kBAAkB,CAAC,aAAa;YAClC,kBAAkB,CAAC,aAAa,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,qBAAqB,CAAC,CAAC;QACjG,kBAAkB,CAAC,aAAa,GAAG,SAAS,CAAC;QAE7C,+BAAY,CAAC,SAAS,EAAE,CAAC;QACzB,kBAAkB,CAAC,YAAY,GAAG,KAAK,CAAC;IAC1C,CAAC;IAED,4DAA4D;IACrD,MAAM,KAAK,WAAW,KAAc,OAAO,kBAAkB,CAAC,YAAY,CAAC,CAAC,CAAC;IAEpF,mEAAmE;IAC5D,MAAM,KAAK,YAAY;QAC5B,IAAI,CAAC,kBAAkB,CAAC,aAAa;YACnC,MAAM,IAAI,wBAAO,CAAC,kBAAkB,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,wGAAwG,CAAC,CAAC;QACvK,OAAO,kBAAkB,CAAC,aAAa,CAAC;IAC1C,CAAC;IAED,kDAAkD;IAC3C,MAAM,KAAK,qBAAqB;QACrC,OAAO,oBAAoB,CAAC;IAC9B,CAAC;IAED,gBAAgB;IACT,MAAM,KAAK,WAAW;QAC3B,OAAO,yBAAyB,CAAC;IACnC,CAAC;IAED;;OAEG;IACI,MAAM,CAAC,SAAS,CAAC,GAAsB;QAC5C,IAAI,CAAC,kBAAkB,CAAC,WAAW,EAAE;YACnC,qBAAM,CAAC,QAAQ,CAAC,kBAAkB,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,uFAAuF,CAAC,CAAC;YAClJ,OAAO,EAAE,CAAC;SACX;QACD,OAAO,kBAAkB,CAAC,YAAY,CAAC,+BAA+B,CAAC,kBAAkB,CAAC,qBAAqB,EAAE,GAAG,CAAC,CAAC;IACxH,CAAC;IAED,gBAAgB;IACT,MAAM,CAAC,cAAc,CAAC,GAAQ;QACnC,MAAM,SAAS,GAAG,IAAA,6BAAY,EAAC,GAAG,CAAC,CAAC;QACpC,MAAM,QAAQ,GAAG,kBAAkB,CAAC,WAAW,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QACrF,OAAO,QAAQ,CAAC;IAClB,CAAC;;AApEH,gDAsEC;AArEgB,+BAAY,GAAG,KAAK,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 Common\n /\n\nimport { enablePatches } from \"immer\";\nimport { Logger } from \"@itwin/core-bentley\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { Localization } from \"@itwin/core-common\";\nimport { getClassName, UiError } from \"@itwin/appui-abstract\";\nimport { UiComponents } from \"@itwin/components-react\";\n\n/\n Manages the localization service for the imodel-components-react package.\n * @public\n /\nexport class UiIModelComponents {\n private static _initialized = false;\n private static _localization?: Localization;\n\n /\n Registers the localization service namespace for UiIModelComponents. Also initializes UiCore.\n * @param localization The internationalization service created by the application. Defaults to IModelApp.localization.\n /\n public static async initialize(localization?: Localization): Promise<void> {\n if (UiIModelComponents._initialized) {\n Logger.logInfo(UiIModelComponents.loggerCategory(UiIModelComponents), `UiIModelComponents.initialize already called`);\n return;\n }\n\n enablePatches();\n UiIModelComponents._localization = localization \|\| IModelApp.localization;\n await UiIModelComponents._localization.registerNamespace(UiIModelComponents.localizationNamespace);\n\n await UiComponents.initialize(UiIModelComponents._localization);\n UiIModelComponents._initialized = true;\n }\n\n /* Unregisters the UiIModelComponents localization namespace /\n public static terminate() {\n if (UiIModelComponents._localization)\n UiIModelComponents._localization.unregisterNamespace(UiIModelComponents.localizationNamespace);\n UiIModelComponents._localization = undefined;\n\n UiComponents.terminate();\n UiIModelComponents._initialized = false;\n }\n\n /* Determines if UiIModelComponents has been initialized /\n public static get initialized(): boolean { return UiIModelComponents._initialized; }\n\n /* The internationalization service created by the application. /\n public static get localization(): Localization {\n if (!UiIModelComponents._localization)\n throw new UiError(UiIModelComponents.loggerCategory(this), \"localization: UiIModelComponents.initialize has not been called. Unable to return Localization object.\");\n return UiIModelComponents._localization;\n }\n\n /* The internationalization service namespace. /\n public static get localizationNamespace(): string {\n return \"UiIModelComponents\";\n }\n\n /* @internal /\n public static get packageName(): string {\n return \"imodel-components-react\";\n }\n\n /* Calls localization.getLocalizedStringWithNamespace with the \"UiIModelComponents\" namespace. Do NOT include the namespace in the key.\n * @internal\n /\n public static translate(key: string \| string[]): string {\n if (!UiIModelComponents.initialized) {\n Logger.logError(UiIModelComponents.loggerCategory(this), `translate: UiIModelComponents.initialize has not been called. Returning blank string.`);\n return \"\";\n }\n return UiIModelComponents.localization.getLocalizedStringWithNamespace(UiIModelComponents.localizationNamespace, key);\n }\n\n /* @internal */\n public static loggerCategory(obj: any): string {\n const className = getClassName(obj);\n const category = UiIModelComponents.packageName + (className ? `.${className}` : \"\");\n return category;\n }\n\n}\n"]}
1	+ {"version":3,"file":"UiIModelComponents.js","sourceRoot":"","sources":["../../../src/imodel-components-react/UiIModelComponents.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,iCAAsC;AACtC,sDAA6C;AAC7C,wDAAiD;AAEjD,0DAA8D;AAC9D,8DAAuD;AAEvD;;;GAGG;AACH,MAAa,kBAAkB;IAI7B;;;OAGG;IACI,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,YAA2B;QACxD,IAAI,kBAAkB,CAAC,YAAY,EAAE;YACnC,qBAAM,CAAC,OAAO,CAAC,kBAAkB,CAAC,cAAc,CAAC,kBAAkB,CAAC,EAAE,8CAA8C,CAAC,CAAC;YACtH,OAAO;SACR;QAED,IAAA,qBAAa,GAAE,CAAC;QAChB,kBAAkB,CAAC,aAAa,GAAG,YAAY,IAAI,yBAAS,CAAC,YAAY,CAAC;QAC1E,MAAM,kBAAkB,CAAC,aAAa,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,qBAAqB,CAAC,CAAC;QAEnG,MAAM,+BAAY,CAAC,UAAU,CAAC,kBAAkB,CAAC,aAAa,CAAC,CAAC;QAChE,kBAAkB,CAAC,YAAY,GAAG,IAAI,CAAC;IACzC,CAAC;IAED,gEAAgE;IACzD,MAAM,CAAC,SAAS;QACrB,IAAI,kBAAkB,CAAC,aAAa;YAClC,kBAAkB,CAAC,aAAa,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,qBAAqB,CAAC,CAAC;QACjG,kBAAkB,CAAC,aAAa,GAAG,SAAS,CAAC;QAE7C,+BAAY,CAAC,SAAS,EAAE,CAAC;QACzB,kBAAkB,CAAC,YAAY,GAAG,KAAK,CAAC;IAC1C,CAAC;IAED,4DAA4D;IACrD,MAAM,KAAK,WAAW,KAAc,OAAO,kBAAkB,CAAC,YAAY,CAAC,CAAC,CAAC;IAEpF,mEAAmE;IAC5D,MAAM,KAAK,YAAY;QAC5B,IAAI,CAAC,kBAAkB,CAAC,aAAa;YACnC,MAAM,IAAI,wBAAO,CAAC,kBAAkB,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,wGAAwG,CAAC,CAAC;QACvK,OAAO,kBAAkB,CAAC,aAAa,CAAC;IAC1C,CAAC;IAED,kDAAkD;IAC3C,MAAM,KAAK,qBAAqB;QACrC,OAAO,oBAAoB,CAAC;IAC9B,CAAC;IAED,gBAAgB;IACT,MAAM,KAAK,WAAW;QAC3B,OAAO,yBAAyB,CAAC;IACnC,CAAC;IAED;;OAEG;IACI,MAAM,CAAC,SAAS,CAAC,GAAsB;QAC5C,IAAI,CAAC,kBAAkB,CAAC,WAAW,EAAE;YACnC,qBAAM,CAAC,QAAQ,CAAC,kBAAkB,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,uFAAuF,CAAC,CAAC;YAClJ,OAAO,EAAE,CAAC;SACX;QACD,OAAO,kBAAkB,CAAC,YAAY,CAAC,+BAA+B,CAAC,kBAAkB,CAAC,qBAAqB,EAAE,GAAG,CAAC,CAAC;IACxH,CAAC;IAED,gBAAgB;IACT,MAAM,CAAC,cAAc,CAAC,GAAQ;QACnC,MAAM,SAAS,GAAG,IAAA,6BAAY,EAAC,GAAG,CAAC,CAAC;QACpC,MAAM,QAAQ,GAAG,kBAAkB,CAAC,WAAW,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QACrF,OAAO,QAAQ,CAAC;IAClB,CAAC;;AApEH,gDAsEC;AArEgB,+BAAY,GAAG,KAAK,CAAC","sourcesContent":["/---------------------------------------------------------------------------------------------\r\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n--------------------------------------------------------------------------------------------/\r\n/** @packageDocumentation\r\n * @module Common\r\n /\r\n\r\nimport { enablePatches } from \"immer\";\r\nimport { Logger } from \"@itwin/core-bentley\";\r\nimport { IModelApp } from \"@itwin/core-frontend\";\r\nimport { Localization } from \"@itwin/core-common\";\r\nimport { getClassName, UiError } from \"@itwin/appui-abstract\";\r\nimport { UiComponents } from \"@itwin/components-react\";\r\n\r\n/\r\n Manages the localization service for the imodel-components-react package.\r\n * @public\r\n /\r\nexport class UiIModelComponents {\r\n private static _initialized = false;\r\n private static _localization?: Localization;\r\n\r\n /\r\n Registers the localization service namespace for UiIModelComponents. Also initializes UiCore.\r\n * @param localization The internationalization service created by the application. Defaults to IModelApp.localization.\r\n /\r\n public static async initialize(localization?: Localization): Promise<void> {\r\n if (UiIModelComponents._initialized) {\r\n Logger.logInfo(UiIModelComponents.loggerCategory(UiIModelComponents), `UiIModelComponents.initialize already called`);\r\n return;\r\n }\r\n\r\n enablePatches();\r\n UiIModelComponents._localization = localization \|\| IModelApp.localization;\r\n await UiIModelComponents._localization.registerNamespace(UiIModelComponents.localizationNamespace);\r\n\r\n await UiComponents.initialize(UiIModelComponents._localization);\r\n UiIModelComponents._initialized = true;\r\n }\r\n\r\n /* Unregisters the UiIModelComponents localization namespace /\r\n public static terminate() {\r\n if (UiIModelComponents._localization)\r\n UiIModelComponents._localization.unregisterNamespace(UiIModelComponents.localizationNamespace);\r\n UiIModelComponents._localization = undefined;\r\n\r\n UiComponents.terminate();\r\n UiIModelComponents._initialized = false;\r\n }\r\n\r\n /* Determines if UiIModelComponents has been initialized /\r\n public static get initialized(): boolean { return UiIModelComponents._initialized; }\r\n\r\n /* The internationalization service created by the application. /\r\n public static get localization(): Localization {\r\n if (!UiIModelComponents._localization)\r\n throw new UiError(UiIModelComponents.loggerCategory(this), \"localization: UiIModelComponents.initialize has not been called. Unable to return Localization object.\");\r\n return UiIModelComponents._localization;\r\n }\r\n\r\n /* The internationalization service namespace. /\r\n public static get localizationNamespace(): string {\r\n return \"UiIModelComponents\";\r\n }\r\n\r\n /* @internal /\r\n public static get packageName(): string {\r\n return \"imodel-components-react\";\r\n }\r\n\r\n /* Calls localization.getLocalizedStringWithNamespace with the \"UiIModelComponents\" namespace. Do NOT include the namespace in the key.\r\n * @internal\r\n /\r\n public static translate(key: string \| string[]): string {\r\n if (!UiIModelComponents.initialized) {\r\n Logger.logError(UiIModelComponents.loggerCategory(this), `translate: UiIModelComponents.initialize has not been called. Returning blank string.`);\r\n return \"\";\r\n }\r\n return UiIModelComponents.localization.getLocalizedStringWithNamespace(UiIModelComponents.localizationNamespace, key);\r\n }\r\n\r\n /* @internal */\r\n public static loggerCategory(obj: any): string {\r\n const className = getClassName(obj);\r\n const category = UiIModelComponents.packageName + (className ? `.${className}` : \"\");\r\n return category;\r\n }\r\n\r\n}\r\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AlphaSlider.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/AlphaSlider.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 \"./AlphaSlider.scss\";\nimport classnames from \"classnames\";\nimport as React from \"react\";\nimport { CommonProps } from \"@itwin/core-react\";\nimport { UiIModelComponents } from \"../UiIModelComponents\";\nimport { SpecialKey } from \"@itwin/appui-abstract\";\n\n/** Properties for the [[AlphaSlider]] React component\n * @beta\n /\nexport interface AlphaSliderProps extends React.HTMLAttributes<HTMLDivElement>, CommonProps {\n /* true if slider is oriented horizontal, else vertical orientation is assumed /\n isHorizontal?: boolean;\n /* function to run when user selects color swatch /\n onAlphaChange?: ((alpha: number) => void) \| undefined;\n /* Alpha value between 0 (transparent) and 1 (opaque) /\n alpha: number;\n}\n\n/* AlphaSlider component used to set the alpha value.\n * @beta\n /\nexport class AlphaSlider extends React.PureComponent<AlphaSliderProps> {\n private _container: HTMLDivElement \| null = null;\n private _transparencyLabel = UiIModelComponents.translate(\"color.transparency\");\n\n /* @internal /\n constructor(props: AlphaSliderProps) {\n super(props);\n }\n\n private _calculateChange = (e: React.MouseEvent<HTMLDivElement> \| React.TouchEvent<HTMLDivElement>, isHorizontal: boolean, alpha: number, container: HTMLDivElement): number \| undefined => {\n e.preventDefault();\n const { width: containerWidth, height: containerHeight } = container.getBoundingClientRect();\n\n let x = 0;\n if (\"pageX\" in e) {\n x = e.pageX;\n } else {\n // istanbul ignore if\n if (undefined === e.touches)\n return undefined;\n x = e.touches[0].pageX;\n }\n // istanbul ignore if\n if (undefined === x)\n return undefined;\n\n let y = 0;\n if (\"pageY\" in e) {\n y = e.pageY;\n } else {\n // istanbul ignore if\n if (undefined === e.touches)\n return;\n y = e.touches[0].pageY;\n }\n // istanbul ignore if\n if (undefined === y)\n return undefined;\n\n const left = x - (container.getBoundingClientRect().left + window.scrollX);\n const top = y - (container.getBoundingClientRect().top + window.scrollY);\n\n let t = 0;\n\n if (!isHorizontal) {\n // istanbul ignore next\n if (top < 0) {\n t = 1;\n } else if (top > containerHeight) {\n t = 0;\n } else {\n t = 1 - (top / containerHeight);\n }\n } else { // horizontal\n // istanbul ignore next\n if (left < 0) {\n t = 0;\n } else if (left > containerWidth) {\n t = 1;\n } else {\n t = left / containerWidth;\n }\n }\n\n // istanbul ignore if\n if (t < 0) t = 0;\n // istanbul ignore if\n if (t > 1) t = 1;\n // istanbul ignore next\n return (alpha !== t) ? t : undefined;\n };\n\n /* @internal /\n public override componentWillUnmount() {\n this._unbindEventListeners();\n }\n\n private _onChange = (e: React.MouseEvent<HTMLDivElement> \| React.TouchEvent<HTMLDivElement>) => {\n // istanbul ignore else\n if (this._container && this.props.onAlphaChange) {\n const change = this._calculateChange(e, this.props.isHorizontal ? this.props.isHorizontal : false, this.props.alpha, this._container);\n undefined !== change && typeof this.props.onAlphaChange === \"function\" && this.props.onAlphaChange(change);\n }\n };\n\n private _onMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {\n this._onChange(e);\n // istanbul ignore else\n if (this._container)\n this._container.focus();\n window.addEventListener(\"mousemove\", this._onChange as any);\n window.addEventListener(\"mouseup\", this._onMouseUp);\n };\n\n private _onKeyDown = (evt: React.KeyboardEvent<HTMLDivElement>) => {\n let newTransparency: number \| undefined;\n if (evt.key === SpecialKey.ArrowLeft \|\| evt.key === SpecialKey.ArrowDown) {\n newTransparency = this.props.alpha - (evt.ctrlKey ? .1 : .05);\n } else if (evt.key === SpecialKey.ArrowRight \|\| evt.key === SpecialKey.ArrowUp) {\n newTransparency = this.props.alpha + (evt.ctrlKey ? .1 : .05);\n } else if (evt.key === SpecialKey.PageDown) {\n newTransparency = this.props.alpha - (evt.ctrlKey ? .5 : .25);\n } else if (evt.key === SpecialKey.PageUp) {\n newTransparency = this.props.alpha + (evt.ctrlKey ? .5 : .25);\n } else if (evt.key === SpecialKey.Home) {\n newTransparency = 0;\n } else {\n // istanbul ignore else\n if (evt.key === SpecialKey.End) {\n newTransparency = 1;\n }\n }\n\n // istanbul ignore else\n if (undefined !== newTransparency) {\n // istanbul ignore if\n if (newTransparency > 1) newTransparency = 1;\n // istanbul ignore if\n if (newTransparency < 0) newTransparency = 0;\n // istanbul ignore else\n if (this.props.onAlphaChange)\n this.props.onAlphaChange(newTransparency);\n }\n };\n\n private _onMouseUp = () => {\n this._unbindEventListeners();\n };\n\n private _unbindEventListeners() {\n window.removeEventListener(\"mousemove\", this._onChange as any);\n window.removeEventListener(\"mouseup\", this._onMouseUp);\n }\n\n /* @internal /\n public override render(): React.ReactNode {\n const containerClasses = classnames(\n this.props.isHorizontal ? \"components-alpha-container-horizontal\" : \"components-alpha-container-vertical\",\n this.props.className,\n );\n\n const pointerStyle: React.CSSProperties = this.props.isHorizontal ?\n { left: `${(this.props.alpha 100)}%` } :\n { left: `0px`, top: `${-(this.props.alpha * 100) + 100}%` };\n\n return (\n <div className={containerClasses} style={this.props.style} data-testid=\"alpha-container\">\n <div\n data-testid=\"alpha-slider\"\n role=\"slider\" aria-label={this._transparencyLabel}\n aria-valuemin={0} aria-valuemax={1} aria-valuenow={this.props.alpha}\n className=\"components-alpha-slider\"\n ref={(container) => this._container = container}\n onMouseDown={this._onMouseDown}\n onTouchMove={this._onChange}\n onTouchStart={this._onChange}\n tabIndex={0}\n onKeyDown={this._onKeyDown}\n >\n <div style={pointerStyle} className=\"components-alpha-pointer\" data-testid=\"alpha-pointer\" />\n </div>\n </div>\n );\n }\n\n}\n"]}
1	+ {"version":3,"file":"AlphaSlider.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/AlphaSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["/---------------------------------------------------------------------------------------------\r\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n--------------------------------------------------------------------------------------------/\r\n/** @packageDocumentation\r\n * @module Color\r\n /\r\n\r\nimport \"./AlphaSlider.scss\";\r\nimport classnames from \"classnames\";\r\nimport as React from \"react\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { UiIModelComponents } from \"../UiIModelComponents\";\r\nimport { SpecialKey } from \"@itwin/appui-abstract\";\r\n\r\n/** Properties for the [[AlphaSlider]] React component\r\n * @beta\r\n /\r\nexport interface AlphaSliderProps extends React.HTMLAttributes<HTMLDivElement>, CommonProps {\r\n /* true if slider is oriented horizontal, else vertical orientation is assumed /\r\n isHorizontal?: boolean;\r\n /* function to run when user selects color swatch /\r\n onAlphaChange?: ((alpha: number) => void) \| undefined;\r\n /* Alpha value between 0 (transparent) and 1 (opaque) /\r\n alpha: number;\r\n}\r\n\r\n/* AlphaSlider component used to set the alpha value.\r\n * @beta\r\n /\r\nexport class AlphaSlider extends React.PureComponent<AlphaSliderProps> {\r\n private _container: HTMLDivElement \| null = null;\r\n private _transparencyLabel = UiIModelComponents.translate(\"color.transparency\");\r\n\r\n /* @internal /\r\n constructor(props: AlphaSliderProps) {\r\n super(props);\r\n }\r\n\r\n private _calculateChange = (e: React.MouseEvent<HTMLDivElement> \| React.TouchEvent<HTMLDivElement>, isHorizontal: boolean, alpha: number, container: HTMLDivElement): number \| undefined => {\r\n e.preventDefault();\r\n const { width: containerWidth, height: containerHeight } = container.getBoundingClientRect();\r\n\r\n let x = 0;\r\n if (\"pageX\" in e) {\r\n x = e.pageX;\r\n } else {\r\n // istanbul ignore if\r\n if (undefined === e.touches)\r\n return undefined;\r\n x = e.touches[0].pageX;\r\n }\r\n // istanbul ignore if\r\n if (undefined === x)\r\n return undefined;\r\n\r\n let y = 0;\r\n if (\"pageY\" in e) {\r\n y = e.pageY;\r\n } else {\r\n // istanbul ignore if\r\n if (undefined === e.touches)\r\n return;\r\n y = e.touches[0].pageY;\r\n }\r\n // istanbul ignore if\r\n if (undefined === y)\r\n return undefined;\r\n\r\n const left = x - (container.getBoundingClientRect().left + window.scrollX);\r\n const top = y - (container.getBoundingClientRect().top + window.scrollY);\r\n\r\n let t = 0;\r\n\r\n if (!isHorizontal) {\r\n // istanbul ignore next\r\n if (top < 0) {\r\n t = 1;\r\n } else if (top > containerHeight) {\r\n t = 0;\r\n } else {\r\n t = 1 - (top / containerHeight);\r\n }\r\n } else { // horizontal\r\n // istanbul ignore next\r\n if (left < 0) {\r\n t = 0;\r\n } else if (left > containerWidth) {\r\n t = 1;\r\n } else {\r\n t = left / containerWidth;\r\n }\r\n }\r\n\r\n // istanbul ignore if\r\n if (t < 0) t = 0;\r\n // istanbul ignore if\r\n if (t > 1) t = 1;\r\n // istanbul ignore next\r\n return (alpha !== t) ? t : undefined;\r\n };\r\n\r\n /* @internal /\r\n public override componentWillUnmount() {\r\n this._unbindEventListeners();\r\n }\r\n\r\n private _onChange = (e: React.MouseEvent<HTMLDivElement> \| React.TouchEvent<HTMLDivElement>) => {\r\n // istanbul ignore else\r\n if (this._container && this.props.onAlphaChange) {\r\n const change = this._calculateChange(e, this.props.isHorizontal ? this.props.isHorizontal : false, this.props.alpha, this._container);\r\n undefined !== change && typeof this.props.onAlphaChange === \"function\" && this.props.onAlphaChange(change);\r\n }\r\n };\r\n\r\n private _onMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {\r\n this._onChange(e);\r\n // istanbul ignore else\r\n if (this._container)\r\n this._container.focus();\r\n window.addEventListener(\"mousemove\", this._onChange as any);\r\n window.addEventListener(\"mouseup\", this._onMouseUp);\r\n };\r\n\r\n private _onKeyDown = (evt: React.KeyboardEvent<HTMLDivElement>) => {\r\n let newTransparency: number \| undefined;\r\n if (evt.key === SpecialKey.ArrowLeft \|\| evt.key === SpecialKey.ArrowDown) {\r\n newTransparency = this.props.alpha - (evt.ctrlKey ? .1 : .05);\r\n } else if (evt.key === SpecialKey.ArrowRight \|\| evt.key === SpecialKey.ArrowUp) {\r\n newTransparency = this.props.alpha + (evt.ctrlKey ? .1 : .05);\r\n } else if (evt.key === SpecialKey.PageDown) {\r\n newTransparency = this.props.alpha - (evt.ctrlKey ? .5 : .25);\r\n } else if (evt.key === SpecialKey.PageUp) {\r\n newTransparency = this.props.alpha + (evt.ctrlKey ? .5 : .25);\r\n } else if (evt.key === SpecialKey.Home) {\r\n newTransparency = 0;\r\n } else {\r\n // istanbul ignore else\r\n if (evt.key === SpecialKey.End) {\r\n newTransparency = 1;\r\n }\r\n }\r\n\r\n // istanbul ignore else\r\n if (undefined !== newTransparency) {\r\n // istanbul ignore if\r\n if (newTransparency > 1) newTransparency = 1;\r\n // istanbul ignore if\r\n if (newTransparency < 0) newTransparency = 0;\r\n // istanbul ignore else\r\n if (this.props.onAlphaChange)\r\n this.props.onAlphaChange(newTransparency);\r\n }\r\n };\r\n\r\n private _onMouseUp = () => {\r\n this._unbindEventListeners();\r\n };\r\n\r\n private _unbindEventListeners() {\r\n window.removeEventListener(\"mousemove\", this._onChange as any);\r\n window.removeEventListener(\"mouseup\", this._onMouseUp);\r\n }\r\n\r\n /* @internal /\r\n public override render(): React.ReactNode {\r\n const containerClasses = classnames(\r\n this.props.isHorizontal ? \"components-alpha-container-horizontal\" : \"components-alpha-container-vertical\",\r\n this.props.className,\r\n );\r\n\r\n const pointerStyle: React.CSSProperties = this.props.isHorizontal ?\r\n { left: `${(this.props.alpha 100)}%` } :\r\n { left: `0px`, top: `${-(this.props.alpha * 100) + 100}%` };\r\n\r\n return (\r\n <div className={containerClasses} style={this.props.style} data-testid=\"alpha-container\">\r\n <div\r\n data-testid=\"alpha-slider\"\r\n role=\"slider\" aria-label={this._transparencyLabel}\r\n aria-valuemin={0} aria-valuemax={1} aria-valuenow={this.props.alpha}\r\n className=\"components-alpha-slider\"\r\n ref={(container) => this._container = container}\r\n onMouseDown={this._onMouseDown}\r\n onTouchMove={this._onChange}\r\n onTouchStart={this._onChange}\r\n tabIndex={0}\r\n onKeyDown={this._onKeyDown}\r\n >\r\n <div style={pointerStyle} className=\"components-alpha-pointer\" data-testid=\"alpha-pointer\" />\r\n </div>\r\n </div>\r\n );\r\n }\r\n\r\n}\r\n"]}

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

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

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

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

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

@@ -1,92 +1,92 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-@import "~@itwin/itwinui-css/scss/style/typography";
-button.components-colorpicker-button {
-  font-family: $iui-font-family;
-  font-size: $iui-font-size;
-  color: $buic-foreground-body;
-  box-sizing: border-box;
-  border: 1px solid transparent;
-  border-radius: 3px;
-  background-color: transparent;
-  border: none;
-  padding: 0;
-  >.components-colorpicker-button-container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    border-radius: 3px;
-    >.components-colorpicker-button-color-swatch {
-      border: 1px solid $buic-inputs-border;
-      border-radius: 3px;
-      width: 1.25em;
-      height: 1.25em;
-    }
-    >.components-caret {
-      margin-left: .25em;
-      margin-right: .25em;
-    }
-  }
-  &:not(.readonly) {
-    cursor: pointer;
-  }
-  &:disabled {
-    pointer-events: none;
-    >.components-colorpicker-button-container {
-      >.components-caret {
-        color: $buic-icon-color-disabled;
-      }
-    }
-  }
-  &.round {
-    .components-colorpicker-button-container {
-      border-bottom-left-radius: 50%;
-      border-top-left-radius: 50%;
-    }
-    .components-colorpicker-button-color-swatch {
-      border-radius: 50%;
-    }
-  }
-}
-.components-colorpicker-popup {
-  border: 1px solid $buic-inputs-border;
-  border-radius: 6px;
-  .components-colorpicker-popup-container {
-    color: $buic-foreground-body;
-    background: $buic-background-control;
-    border-radius: 6px;
-    >.components-colorpicker-popup-colors {
-      display: grid;
-      grid-gap: 8px;
-      padding: 8px;
-      >.components-colorpicker-swatch {
-        height: 1.5em;
-        width: 1.5em;
-        transition: scale 0.2s ease;
-        cursor: pointer;
-        outline: none;
-        &:hover {
-          transform: scale(1.15);
-        }
-      }
-    }
-  }
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+@import "~@itwin/itwinui-css/scss/style/typography";
+button.components-colorpicker-button {
+  font-family: $iui-font-family;
+  font-size: $iui-font-size;
+  color: $buic-foreground-body;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  >.components-colorpicker-button-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-radius: 3px;
+    >.components-colorpicker-button-color-swatch {
+      border: 1px solid $buic-inputs-border;
+      border-radius: 3px;
+      width: 1.25em;
+      height: 1.25em;
+    }
+    >.components-caret {
+      margin-left: .25em;
+      margin-right: .25em;
+    }
+  }
+  &:not(.readonly) {
+    cursor: pointer;
+  }
+  &:disabled {
+    pointer-events: none;
+    >.components-colorpicker-button-container {
+      >.components-caret {
+        color: $buic-icon-color-disabled;
+      }
+    }
+  }
+  &.round {
+    .components-colorpicker-button-container {
+      border-bottom-left-radius: 50%;
+      border-top-left-radius: 50%;
+    }
+    .components-colorpicker-button-color-swatch {
+      border-radius: 50%;
+    }
+  }
+}
+.components-colorpicker-popup {
+  border: 1px solid $buic-inputs-border;
+  border-radius: 6px;
+  .components-colorpicker-popup-container {
+    color: $buic-foreground-body;
+    background: $buic-background-control;
+    border-radius: 6px;
+    >.components-colorpicker-popup-colors {
+      display: grid;
+      grid-gap: 8px;
+      padding: 8px;
+      >.components-colorpicker-swatch {
+        height: 1.5em;
+        width: 1.5em;
+        transition: scale 0.2s ease;
+        cursor: pointer;
+        outline: none;
+        &:hover {
+          transform: scale(1.15);
+        }
+      }
+    }
+  }
 }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPickerDialog.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerDialog.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;AAEH,4BAA4B;AAE5B,6CAA+B;AAC/B,0DAAyD;AACzD,kDAA2C;AAE3C,yDAAsD;AAetD;;;GAGG;AACH,SAAgB,iBAAiB,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAA0B;IACxI,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE3D,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACtC,UAAU,CAAC,WAAW,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC;IAC9B,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC1C,uBAAuB;QACvB,IAAI,cAAc;YAChB,cAAc,EAAE,CAAC;IACrB,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,WAAqB,EAAE,EAAE;QACpE,cAAc,CAAC,WAAW,CAAC,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC;QACxC,EAAE,IAAI,EAAE,iCAAgB,CAAC,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAChD,EAAE,IAAI,EAAE,iCAAgB,CAAC,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE;KACzD,EAAE,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE7B,OAAO,CACL,6BAAK,GAAG,EAAE,eAAe;QACvB,oBAAC,mBAAM,IACL,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,IAAI,EACZ,SAAS,EAAE,IAAI,EACf,OAAO,EAAE,IAAI,EACb,KAAK,EAAE,IAAI,EACX,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,GAAG;YAEb,oBAAC,mCAAgB,IAAC,cAAc,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,iBAAiB,GAAI,CACrI,CACJ,CACR,CAAC;AACJ,CAAC;AAxCD,8CAwCC","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n--------------------------------------------------------------------------------------------/\n/** @packageDocumentation\n * @module Color\n /\n\n// cSpell:ignore colorpicker\n\nimport as React from \"react\";\nimport { DialogButtonType } from \"@itwin/appui-abstract\";\nimport { Dialog } from \"@itwin/core-react\";\nimport { ColorDef } from \"@itwin/core-common\";\nimport { ColorPickerPanel } from \"./ColorPickerPanel\";\n\n/** Properties for the [[ColorPickerDialog]] React component\n * @beta\n /\nexport interface ColorPickerDialogProps {\n dialogTitle: string;\n color: ColorDef;\n onOkResult: (selectedColor: ColorDef) => void;\n onCancelResult: () => void;\n colorPresets?: ColorDef[];\n /* If set show either HSL or RGB input values. If undefined no input value is shown /\n colorInputType?: \"HSL\" \| \"RGB\";\n}\n\n/\n Color Picker Dialog to use as modal dialog.\n * @beta\n */\nexport function ColorPickerDialog({ dialogTitle, color, onOkResult, onCancelResult, colorPresets, colorInputType }: ColorPickerDialogProps) {\n const [activeColor, setActiveColor] = React.useState(color);\n const dialogContainer = React.useRef<HTMLDivElement>(null);\n\n const handleOk = React.useCallback(() => {\n onOkResult(activeColor);\n }, [onOkResult, activeColor]);\n const handleCancel = React.useCallback(() => {\n // istanbul ignore else\n if (onCancelResult)\n onCancelResult();\n }, [onCancelResult]);\n\n const handleColorChange = React.useCallback((newColorDef: ColorDef) => {\n setActiveColor(newColorDef);\n }, []);\n\n const buttonCluster = React.useMemo(() => [\n { type: DialogButtonType.OK, onClick: handleOk },\n { type: DialogButtonType.Cancel, onClick: handleCancel },\n ], [handleCancel, handleOk]);\n\n return (\n <div ref={dialogContainer}>\n <Dialog\n title={dialogTitle}\n opened={true}\n resizable={true}\n movable={true}\n modal={true}\n buttonCluster={buttonCluster}\n onClose={handleCancel}\n onEscape={handleCancel}\n minHeight={340}\n maxWidth={400}\n >\n <ColorPickerPanel colorInputType={colorInputType} activeColor={activeColor} colorPresets={colorPresets} onColorChange={handleColorChange} />\n </Dialog>\n </div >\n );\n}\n"]}
1	+ {"version":3,"file":"ColorPickerDialog.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerDialog.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;AAEH,4BAA4B;AAE5B,6CAA+B;AAC/B,0DAAyD;AACzD,kDAA2C;AAE3C,yDAAsD;AAetD;;;GAGG;AACH,SAAgB,iBAAiB,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAA0B;IACxI,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE3D,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACtC,UAAU,CAAC,WAAW,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC;IAC9B,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC1C,uBAAuB;QACvB,IAAI,cAAc;YAChB,cAAc,EAAE,CAAC;IACrB,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,WAAqB,EAAE,EAAE;QACpE,cAAc,CAAC,WAAW,CAAC,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC;QACxC,EAAE,IAAI,EAAE,iCAAgB,CAAC,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAChD,EAAE,IAAI,EAAE,iCAAgB,CAAC,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE;KACzD,EAAE,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE7B,OAAO,CACL,6BAAK,GAAG,EAAE,eAAe;QACvB,oBAAC,mBAAM,IACL,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,IAAI,EACZ,SAAS,EAAE,IAAI,EACf,OAAO,EAAE,IAAI,EACb,KAAK,EAAE,IAAI,EACX,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,GAAG;YAEb,oBAAC,mCAAgB,IAAC,cAAc,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,iBAAiB,GAAI,CACrI,CACJ,CACR,CAAC;AACJ,CAAC;AAxCD,8CAwCC","sourcesContent":["/---------------------------------------------------------------------------------------------\r\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n--------------------------------------------------------------------------------------------/\r\n/** @packageDocumentation\r\n * @module Color\r\n /\r\n\r\n// cSpell:ignore colorpicker\r\n\r\nimport as React from \"react\";\r\nimport { DialogButtonType } from \"@itwin/appui-abstract\";\r\nimport { Dialog } from \"@itwin/core-react\";\r\nimport { ColorDef } from \"@itwin/core-common\";\r\nimport { ColorPickerPanel } from \"./ColorPickerPanel\";\r\n\r\n/** Properties for the [[ColorPickerDialog]] React component\r\n * @beta\r\n /\r\nexport interface ColorPickerDialogProps {\r\n dialogTitle: string;\r\n color: ColorDef;\r\n onOkResult: (selectedColor: ColorDef) => void;\r\n onCancelResult: () => void;\r\n colorPresets?: ColorDef[];\r\n /* If set show either HSL or RGB input values. If undefined no input value is shown /\r\n colorInputType?: \"HSL\" \| \"RGB\";\r\n}\r\n\r\n/\r\n Color Picker Dialog to use as modal dialog.\r\n * @beta\r\n */\r\nexport function ColorPickerDialog({ dialogTitle, color, onOkResult, onCancelResult, colorPresets, colorInputType }: ColorPickerDialogProps) {\r\n const [activeColor, setActiveColor] = React.useState(color);\r\n const dialogContainer = React.useRef<HTMLDivElement>(null);\r\n\r\n const handleOk = React.useCallback(() => {\r\n onOkResult(activeColor);\r\n }, [onOkResult, activeColor]);\r\n const handleCancel = React.useCallback(() => {\r\n // istanbul ignore else\r\n if (onCancelResult)\r\n onCancelResult();\r\n }, [onCancelResult]);\r\n\r\n const handleColorChange = React.useCallback((newColorDef: ColorDef) => {\r\n setActiveColor(newColorDef);\r\n }, []);\r\n\r\n const buttonCluster = React.useMemo(() => [\r\n { type: DialogButtonType.OK, onClick: handleOk },\r\n { type: DialogButtonType.Cancel, onClick: handleCancel },\r\n ], [handleCancel, handleOk]);\r\n\r\n return (\r\n <div ref={dialogContainer}>\r\n <Dialog\r\n title={dialogTitle}\r\n opened={true}\r\n resizable={true}\r\n movable={true}\r\n modal={true}\r\n buttonCluster={buttonCluster}\r\n onClose={handleCancel}\r\n onEscape={handleCancel}\r\n minHeight={340}\r\n maxWidth={400}\r\n >\r\n <ColorPickerPanel colorInputType={colorInputType} activeColor={activeColor} colorPresets={colorPresets} onColorChange={handleColorChange} />\r\n </Dialog>\r\n </div >\r\n );\r\n}\r\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPickerPanel.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPanel.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;AAEH,4BAA4B;AAE5B,6CAA+B;AAC/B,oDAAwD;AACxD,qCAAuC;AACvC,2CAAwC;AACxC,yDAAsD;AACtD,mCAAiC;AACjC,kDAAgD;AAahD;;;GAGG;AACH,uBAAuB;AACvB,SAAgB,gBAAgB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,cAAc,EAAyB;IAElH,MAAM,qBAAqB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,QAAkB,EAAE,CAAwC,EAAE,EAAE;QAC/G,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,aAAa,EAAE;YACjB,aAAa,CAAC,QAAQ,CAAC,CAAC;SACzB;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,WAAqB,EAAE,EAAE;QAClE,qDAAqD;QACrD,IAAI,WAAW,CAAC,CAAC,KAAK,CAAC,EAAE;YACvB,WAAW,GAAG,WAAW,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;SACjD;QAED,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,EAAE,CAAC;QAC7C,IAAI,aAAa,EAAE;YACjB,aAAa,CAAC,WAAW,CAAC,CAAC;SAC5B;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,sBAAsB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,WAAqB,EAAE,EAAE;QACzE,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,EAAE,CAAC;QAC7C,IAAI,aAAa,EAAE;YACjB,aAAa,CAAC,WAAW,CAAC,CAAC;SAC5B;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAC3E,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAC3E,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAErE,MAAM,0BAA0B,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAyB,EAAE,YAAoB,EAAE,EAAE;QACvG,MAAM,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,EAAE,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;QAE1E,IAAI,aAAa,EAAE;YACjB,MAAM,WAAW,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC;YACxC,aAAa,CAAC,WAAW,CAAC,CAAC;SAC5B;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC;IAEhC,MAAM,oBAAoB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAyB,EAAE,YAAoB,EAAE,EAAE;QACjG,MAAM,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,CAAC,CAAC,GAAG,GAAG,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;QAE1E,IAAI,aAAa,EAAE;YACjB,MAAM,WAAW,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC;YACxC,aAAa,CAAC,WAAW,CAAC,CAAC;SAC5B;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC;IAEhC,MAAM,2BAA2B,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAyB,EAAE,YAAoB,EAAE,EAAE;QACxG,MAAM,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,CAAC,CAAC,GAAG,GAAG,EAAE,SAAS,CAAC,CAAC;QAE1E,IAAI,aAAa,EAAE;YACjB,MAAM,WAAW,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC;YACxC,aAAa,CAAC,WAAW,CAAC,CAAC;SAC5B;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC;IAEhC,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAyB,EAAE,YAAoB,EAAE,EAAE;QAC5F,IAAI,SAAS,KAAK,KAAK,EAAE;YACvB,MAAM,WAAW,GAAG,sBAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;YAC3D,IAAI,aAAa,EAAE;gBACjB,aAAa,CAAC,WAAW,CAAC,CAAC;aAC5B;SACF;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC;IAE3B,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAyB,EAAE,YAAoB,EAAE,EAAE;QAC9F,IAAI,SAAS,KAAK,KAAK,EAAE;YACvB,MAAM,WAAW,GAAG,sBAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;YAC3D,IAAI,aAAa,EAAE;gBACjB,aAAa,CAAC,WAAW,CAAC,CAAC;aAC5B;SACF;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC;IAE3B,MAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAyB,EAAE,YAAoB,EAAE,EAAE;QAC7F,IAAI,SAAS,KAAK,KAAK,EAAE;YACvB,MAAM,WAAW,GAAG,sBAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;YAC3D,IAAI,aAAa,EAAE;gBACjB,aAAa,CAAC,WAAW,CAAC,CAAC;aAC5B;SACF;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC;IAE3B,OAAO,CACL,4CAAiB,8BAA8B,EAAC,SAAS,EAAC,8BAA8B;QACtF,6BAAK,SAAS,EAAC,oCAAoC;YACjD,6BAAK,SAAS,EAAC,mCAAmC;gBAChD,oBAAC,mCAAgB,IAAC,GAAG,EAAE,UAAU,EAAE,kBAAkB,EAAE,sBAAsB,GAAI,CAC7E;YACN,6BAAK,SAAS,EAAC,4BAA4B;gBACzC,oBAAC,qBAAS,IAAC,GAAG,EAAE,UAAU,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,KAAK,GAAI,CAC7E,CACF;QACL,CAAC,cAAc,KAAK,KAAK,CAAC;YACzB,4CAAiB,oCAAoC,EAAC,SAAS,EAAC,oCAAoC;gBAClG,6BAAK,SAAS,EAAC,4CAA4C;oBACzD,8BAAM,SAAS,EAAC,6BAA6B,QAAS;oBACtD,oBAAC,wBAAW,mBAAa,wCAAwC,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,GAAI,CAC7H;gBACN,6BAAK,SAAS,EAAC,4CAA4C;oBACzD,8BAAM,SAAS,EAAC,6BAA6B,QAAS;oBACtD,oBAAC,wBAAW,mBAAa,0CAA0C,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,iBAAiB,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,GAAI,CACjI;gBACN,6BAAK,SAAS,EAAC,4CAA4C;oBACzD,8BAAM,SAAS,EAAC,6BAA6B,QAAS;oBACtD,oBAAC,wBAAW,mBAAa,yCAAyC,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,GAAI,CAC/H,CACF;QACP,CAAC,cAAc,KAAK,KAAK,CAAC;YACzB,4CAAiB,oCAAoC,EAAC,SAAS,EAAC,oCAAoC;gBAClG,6BAAK,SAAS,EAAC,4CAA4C;oBACzD,8BAAM,SAAS,EAAC,6BAA6B,QAAS;oBACtD,oBAAC,wBAAW,mBAAa,wCAAwC,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,GAAG,GAAG,CAAC,EAAE,QAAQ,EAAE,oBAAoB,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,GAAI,CACzJ;gBACN,6BAAK,SAAS,EAAC,4CAA4C;oBACzD,8BAAM,SAAS,EAAC,6BAA6B,QAAS;oBACtD,oBAAC,wBAAW,mBAAa,+CAA+C,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,GAAG,GAAG,CAAC,EAAE,QAAQ,EAAE,2BAA2B,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,GAAI,CACvK;gBACN,6BAAK,SAAS,EAAC,4CAA4C;oBACzD,8BAAM,SAAS,EAAC,6BAA6B,QAAS;oBACtD,oBAAC,wBAAW,mBAAa,8CAA8C,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,GAAG,GAAG,CAAC,EAAE,QAAQ,EAAE,0BAA0B,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,GAAI,CACrK,CACF;QAGN,YAAY,IAAI,YAAY,CAAC,MAAM;YACnC,6BAAK,SAAS,EAAC,sCAAsC,IAClD,YAAY,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,oBAAC,oBAAW,IAAC,SAAS,EAAC,qCAAqC,EAAC,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,qBAAqB,GAAI,CAAC,CACjL,CAEJ,CACP,CAAC;AACJ,CAAC;AAvID,4CAuIC","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n--------------------------------------------------------------------------------------------/\n/** @packageDocumentation\n * @module Color\n /\n\n// cSpell:ignore colorpicker\n\nimport as React from \"react\";\nimport { ColorDef, HSVColor } from \"@itwin/core-common\";\nimport { ColorSwatch } from \"./Swatch\";\nimport { HueSlider } from \"./HueSlider\";\nimport { SaturationPicker } from \"./SaturationPicker\";\nimport \"./ColorPickerPanel.scss\";\nimport { NumberInput } from \"@itwin/core-react\";\n\n/** Properties for the [[ColorPickerPanel]] React component\n * @public\n /\nexport interface ColorPickerPanelProps {\n activeColor: ColorDef;\n onColorChange: (selectedColor: ColorDef) => void;\n colorPresets?: ColorDef[];\n /* If set show either HSL or RGB input values. If undefined no input value is shown /\n colorInputType?: \"HSL\" \| \"RGB\";\n}\n\n/\n Color Picker Dialog to use as modal dialog.\n * @public\n /\n// istanbul ignore next\nexport function ColorPickerPanel({ activeColor, onColorChange, colorPresets, colorInputType }: ColorPickerPanelProps) {\n\n const handlePresetColorPick = React.useCallback((newColor: ColorDef, e: React.MouseEvent<Element, MouseEvent>) => {\n e.preventDefault();\n if (onColorChange) {\n onColorChange(newColor);\n }\n }, [onColorChange]);\n\n const handleHueChange = React.useCallback((newHsvColor: HSVColor) => {\n // for a ColorDef to be created from hsv s can't be 0\n if (newHsvColor.s === 0) {\n newHsvColor = newHsvColor.clone(undefined, 0.5);\n }\n\n const newColorDef = newHsvColor.toColorDef();\n if (onColorChange) {\n onColorChange(newColorDef);\n }\n }, [onColorChange]);\n\n const handleSaturationChange = React.useCallback((newHsvColor: HSVColor) => {\n const newColorDef = newHsvColor.toColorDef();\n if (onColorChange) {\n onColorChange(newColorDef);\n }\n }, [onColorChange]);\n\n const currentHsl = React.useMemo(() => activeColor.toHSL(), [activeColor]);\n const currentHsv = React.useMemo(() => activeColor.toHSV(), [activeColor]);\n const color = React.useMemo(() => activeColor.colors, [activeColor]);\n\n const handleLightnessValueChange = React.useCallback((value: number \| undefined, _stringValue: string) => {\n const newHsl = currentHsl.clone(undefined, undefined, (value ?? 0) / 100);\n\n if (onColorChange) {\n const newColorDef = newHsl.toColorDef();\n onColorChange(newColorDef);\n }\n }, [currentHsl, onColorChange]);\n\n const handleHueValueChange = React.useCallback((value: number \| undefined, _stringValue: string) => {\n const newHsl = currentHsl.clone((value ?? 0) / 360, undefined, undefined);\n\n if (onColorChange) {\n const newColorDef = newHsl.toColorDef();\n onColorChange(newColorDef);\n }\n }, [currentHsl, onColorChange]);\n\n const handleSaturationValueChange = React.useCallback((value: number \| undefined, _stringValue: string) => {\n const newHsl = currentHsl.clone(undefined, (value ?? 0) / 100, undefined);\n\n if (onColorChange) {\n const newColorDef = newHsl.toColorDef();\n onColorChange(newColorDef);\n }\n }, [currentHsl, onColorChange]);\n\n const handleRedChange = React.useCallback((value: number \| undefined, _stringValue: string) => {\n if (undefined !== value) {\n const newColorDef = ColorDef.from(value, color.g, color.b);\n if (onColorChange) {\n onColorChange(newColorDef);\n }\n }\n }, [color, onColorChange]);\n\n const handleGreenChange = React.useCallback((value: number \| undefined, _stringValue: string) => {\n if (undefined !== value) {\n const newColorDef = ColorDef.from(color.r, value, color.b);\n if (onColorChange) {\n onColorChange(newColorDef);\n }\n }\n }, [color, onColorChange]);\n\n const handleBlueChange = React.useCallback((value: number \| undefined, _stringValue: string) => {\n if (undefined !== value) {\n const newColorDef = ColorDef.from(color.r, color.g, value);\n if (onColorChange) {\n onColorChange(newColorDef);\n }\n }\n }, [color, onColorChange]);\n\n return (\n <div data-testid=\"components-colorpicker-panel\" className=\"components-colorpicker-panel\">\n <div className=\"components-colorpicker-panel-color\">\n <div className=\"components-colorpicker-saturation\">\n <SaturationPicker hsv={currentHsv} onSaturationChange={handleSaturationChange} />\n </div>\n <div className=\"components-colorpicker-hue\">\n <HueSlider hsv={currentHsv} onHueChange={handleHueChange} isHorizontal={false} />\n </div>\n </div>\n {(colorInputType === \"RGB\") &&\n <div data-testid=\"components-colorpicker-input-panel\" className=\"components-colorpicker-input-panel\">\n <div className=\"components-colorpicker-input-value-wrapper\">\n <span className=\"uicore-inputs-labeled-input\">R</span>\n <NumberInput data-testid=\"components-colorpicker-input-value-red\" value={color.r} onChange={handleRedChange} min={0} max={255} />\n </div>\n <div className=\"components-colorpicker-input-value-wrapper\">\n <span className=\"uicore-inputs-labeled-input\">G</span>\n <NumberInput data-testid=\"components-colorpicker-input-value-green\" value={color.g} onChange={handleGreenChange} min={0} max={255} />\n </div>\n <div className=\"components-colorpicker-input-value-wrapper\">\n <span className=\"uicore-inputs-labeled-input\">B</span>\n <NumberInput data-testid=\"components-colorpicker-input-value-blue\" value={color.b} onChange={handleBlueChange} min={0} max={255} />\n </div>\n </div>}\n {(colorInputType === \"HSL\") &&\n <div data-testid=\"components-colorpicker-input-panel\" className=\"components-colorpicker-input-panel\">\n <div className=\"components-colorpicker-input-value-wrapper\">\n <span className=\"uicore-inputs-labeled-input\">H</span>\n <NumberInput data-testid=\"components-colorpicker-input-value-hue\" value={Math.round(currentHsl.h 360)} onChange={handleHueValueChange} min={0} max={360} />\n </div>\n <div className=\"components-colorpicker-input-value-wrapper\">\n <span className=\"uicore-inputs-labeled-input\">S</span>\n <NumberInput data-testid=\"components-colorpicker-input-value-saturation\" value={Math.round(currentHsl.s * 100)} onChange={handleSaturationValueChange} min={0} max={100} />\n </div>\n <div className=\"components-colorpicker-input-value-wrapper\">\n <span className=\"uicore-inputs-labeled-input\">L</span>\n <NumberInput data-testid=\"components-colorpicker-input-value-lightness\" value={Math.round(currentHsl.l * 100)} onChange={handleLightnessValueChange} min={0} max={100} />\n </div>\n </div>}\n\n {\n colorPresets && colorPresets.length &&\n <div className=\"components-colorpicker-panel-presets\">\n {colorPresets.map((preset, index) => <ColorSwatch className=\"components-colorpicker-panel-swatch\" key={index} colorDef={preset} round={false} onColorPick={handlePresetColorPick} />)}\n </div>\n }\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"ColorPickerPanel.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["/---------------------------------------------------------------------------------------------\r\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n--------------------------------------------------------------------------------------------/\r\n/** @packageDocumentation\r\n * @module Color\r\n /\r\n\r\n// cSpell:ignore colorpicker\r\n\r\nimport as React from \"react\";\r\nimport { ColorDef, HSVColor } from \"@itwin/core-common\";\r\nimport { ColorSwatch } from \"./Swatch\";\r\nimport { HueSlider } from \"./HueSlider\";\r\nimport { SaturationPicker } from \"./SaturationPicker\";\r\nimport \"./ColorPickerPanel.scss\";\r\nimport { NumberInput } from \"@itwin/core-react\";\r\n\r\n/** Properties for the [[ColorPickerPanel]] React component\r\n * @public\r\n /\r\nexport interface ColorPickerPanelProps {\r\n activeColor: ColorDef;\r\n onColorChange: (selectedColor: ColorDef) => void;\r\n colorPresets?: ColorDef[];\r\n /* If set show either HSL or RGB input values. If undefined no input value is shown /\r\n colorInputType?: \"HSL\" \| \"RGB\";\r\n}\r\n\r\n/\r\n Color Picker Dialog to use as modal dialog.\r\n * @public\r\n /\r\n// istanbul ignore next\r\nexport function ColorPickerPanel({ activeColor, onColorChange, colorPresets, colorInputType }: ColorPickerPanelProps) {\r\n\r\n const handlePresetColorPick = React.useCallback((newColor: ColorDef, e: React.MouseEvent<Element, MouseEvent>) => {\r\n e.preventDefault();\r\n if (onColorChange) {\r\n onColorChange(newColor);\r\n }\r\n }, [onColorChange]);\r\n\r\n const handleHueChange = React.useCallback((newHsvColor: HSVColor) => {\r\n // for a ColorDef to be created from hsv s can't be 0\r\n if (newHsvColor.s === 0) {\r\n newHsvColor = newHsvColor.clone(undefined, 0.5);\r\n }\r\n\r\n const newColorDef = newHsvColor.toColorDef();\r\n if (onColorChange) {\r\n onColorChange(newColorDef);\r\n }\r\n }, [onColorChange]);\r\n\r\n const handleSaturationChange = React.useCallback((newHsvColor: HSVColor) => {\r\n const newColorDef = newHsvColor.toColorDef();\r\n if (onColorChange) {\r\n onColorChange(newColorDef);\r\n }\r\n }, [onColorChange]);\r\n\r\n const currentHsl = React.useMemo(() => activeColor.toHSL(), [activeColor]);\r\n const currentHsv = React.useMemo(() => activeColor.toHSV(), [activeColor]);\r\n const color = React.useMemo(() => activeColor.colors, [activeColor]);\r\n\r\n const handleLightnessValueChange = React.useCallback((value: number \| undefined, _stringValue: string) => {\r\n const newHsl = currentHsl.clone(undefined, undefined, (value ?? 0) / 100);\r\n\r\n if (onColorChange) {\r\n const newColorDef = newHsl.toColorDef();\r\n onColorChange(newColorDef);\r\n }\r\n }, [currentHsl, onColorChange]);\r\n\r\n const handleHueValueChange = React.useCallback((value: number \| undefined, _stringValue: string) => {\r\n const newHsl = currentHsl.clone((value ?? 0) / 360, undefined, undefined);\r\n\r\n if (onColorChange) {\r\n const newColorDef = newHsl.toColorDef();\r\n onColorChange(newColorDef);\r\n }\r\n }, [currentHsl, onColorChange]);\r\n\r\n const handleSaturationValueChange = React.useCallback((value: number \| undefined, _stringValue: string) => {\r\n const newHsl = currentHsl.clone(undefined, (value ?? 0) / 100, undefined);\r\n\r\n if (onColorChange) {\r\n const newColorDef = newHsl.toColorDef();\r\n onColorChange(newColorDef);\r\n }\r\n }, [currentHsl, onColorChange]);\r\n\r\n const handleRedChange = React.useCallback((value: number \| undefined, _stringValue: string) => {\r\n if (undefined !== value) {\r\n const newColorDef = ColorDef.from(value, color.g, color.b);\r\n if (onColorChange) {\r\n onColorChange(newColorDef);\r\n }\r\n }\r\n }, [color, onColorChange]);\r\n\r\n const handleGreenChange = React.useCallback((value: number \| undefined, _stringValue: string) => {\r\n if (undefined !== value) {\r\n const newColorDef = ColorDef.from(color.r, value, color.b);\r\n if (onColorChange) {\r\n onColorChange(newColorDef);\r\n }\r\n }\r\n }, [color, onColorChange]);\r\n\r\n const handleBlueChange = React.useCallback((value: number \| undefined, _stringValue: string) => {\r\n if (undefined !== value) {\r\n const newColorDef = ColorDef.from(color.r, color.g, value);\r\n if (onColorChange) {\r\n onColorChange(newColorDef);\r\n }\r\n }\r\n }, [color, onColorChange]);\r\n\r\n return (\r\n <div data-testid=\"components-colorpicker-panel\" className=\"components-colorpicker-panel\">\r\n <div className=\"components-colorpicker-panel-color\">\r\n <div className=\"components-colorpicker-saturation\">\r\n <SaturationPicker hsv={currentHsv} onSaturationChange={handleSaturationChange} />\r\n </div>\r\n <div className=\"components-colorpicker-hue\">\r\n <HueSlider hsv={currentHsv} onHueChange={handleHueChange} isHorizontal={false} />\r\n </div>\r\n </div>\r\n {(colorInputType === \"RGB\") &&\r\n <div data-testid=\"components-colorpicker-input-panel\" className=\"components-colorpicker-input-panel\">\r\n <div className=\"components-colorpicker-input-value-wrapper\">\r\n <span className=\"uicore-inputs-labeled-input\">R</span>\r\n <NumberInput data-testid=\"components-colorpicker-input-value-red\" value={color.r} onChange={handleRedChange} min={0} max={255} />\r\n </div>\r\n <div className=\"components-colorpicker-input-value-wrapper\">\r\n <span className=\"uicore-inputs-labeled-input\">G</span>\r\n <NumberInput data-testid=\"components-colorpicker-input-value-green\" value={color.g} onChange={handleGreenChange} min={0} max={255} />\r\n </div>\r\n <div className=\"components-colorpicker-input-value-wrapper\">\r\n <span className=\"uicore-inputs-labeled-input\">B</span>\r\n <NumberInput data-testid=\"components-colorpicker-input-value-blue\" value={color.b} onChange={handleBlueChange} min={0} max={255} />\r\n </div>\r\n </div>}\r\n {(colorInputType === \"HSL\") &&\r\n <div data-testid=\"components-colorpicker-input-panel\" className=\"components-colorpicker-input-panel\">\r\n <div className=\"components-colorpicker-input-value-wrapper\">\r\n <span className=\"uicore-inputs-labeled-input\">H</span>\r\n <NumberInput data-testid=\"components-colorpicker-input-value-hue\" value={Math.round(currentHsl.h 360)} onChange={handleHueValueChange} min={0} max={360} />\r\n </div>\r\n <div className=\"components-colorpicker-input-value-wrapper\">\r\n <span className=\"uicore-inputs-labeled-input\">S</span>\r\n <NumberInput data-testid=\"components-colorpicker-input-value-saturation\" value={Math.round(currentHsl.s * 100)} onChange={handleSaturationValueChange} min={0} max={100} />\r\n </div>\r\n <div className=\"components-colorpicker-input-value-wrapper\">\r\n <span className=\"uicore-inputs-labeled-input\">L</span>\r\n <NumberInput data-testid=\"components-colorpicker-input-value-lightness\" value={Math.round(currentHsl.l * 100)} onChange={handleLightnessValueChange} min={0} max={100} />\r\n </div>\r\n </div>}\r\n\r\n {\r\n colorPresets && colorPresets.length &&\r\n <div className=\"components-colorpicker-panel-presets\">\r\n {colorPresets.map((preset, index) => <ColorSwatch className=\"components-colorpicker-panel-swatch\" key={index} colorDef={preset} round={false} onColorPick={handlePresetColorPick} />)}\r\n </div>\r\n }\r\n </div>\r\n );\r\n}\r\n"]}