npm - @itwin/imodel-components-react - Versions diffs - 4.1.0 → 4.2.0-dev.1 - Mend

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

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

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

@@ -1,8 +1,8 @@
 "use strict";
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 /** @packageDocumentation
  * @module Color
  */
@@ -49,14 +49,14 @@ function calculateHue(currentPos, high, isVertical) {
         return isVertical ? 0 : 359;
     }
     else {
-        let percent = ((currentPos * 100) / high);
+        let percent = (currentPos * 100) / high;
         if (isVertical)
             percent = 100 - percent;
-        return Math.round(((359 * percent) / 100));
+        return Math.round((359 * percent) / 100);
     }
 }
 function calculateChange(currentHue, e, isHorizontal, container) {
-    const { width: containerWidth, height: containerHeight, top: containerTop, left: containerLeft } = container.getBoundingClientRect();
+    const { width: containerWidth, height: containerHeight, top: containerTop, left: containerLeft, } = container.getBoundingClientRect();
     let x;
     if ("pageX" in e) {
         x = e.pageX;
@@ -85,17 +85,19 @@ function calculateChange(currentHue, e, isHorizontal, container) {
         return currentHue;
     const pointerX = x - (containerLeft + window.scrollX);
     const pointerY = y - (containerTop + window.scrollY);
-    if (!isHorizontal) { // vertical
+    if (!isHorizontal) {
+        // vertical
         return calculateHue(pointerY, containerHeight, true);
     }
-    else { // horizontal
+    else {
+        // horizontal
         return calculateHue(pointerX, containerWidth, false);
     }
 }
 /** HueSlider component used to set the hue value.
  * @beta
  */
-function HueSlider({ isHorizontal, onHueChange, hsv, className, style }) {
+function HueSlider({ isHorizontal, onHueChange, hsv, className, style, }) {
     const container = React.useRef(null);
     const [hueLabel] = React.useState(() => UiIModelComponents_1.UiIModelComponents.translate("color.hue"));
     const isDragging = React.useRef(false);
@@ -136,7 +138,10 @@ function HueSlider({ isHorizontal, onHueChange, hsv, className, style }) {
         if (e.target !== e.currentTarget) {
             // istanbul ignore else
             if (!isDragging.current) {
-                document.addEventListener("mouseup", onMouseUp, { capture: true, once: true });
+                document.addEventListener("mouseup", onMouseUp, {
+                    capture: true,
+                    once: true,
+                });
                 isDragging.current = true;
             }
         }
@@ -157,10 +162,12 @@ function HueSlider({ isHorizontal, onHueChange, hsv, className, style }) {
     const onKeyDown = React.useCallback((evt) => {
         let newHue;
         const hueValue = hsv.h;
-        if (evt.key === appui_abstract_1.SpecialKey.ArrowLeft || evt.key === appui_abstract_1.SpecialKey.ArrowDown) {
+        if (evt.key === appui_abstract_1.SpecialKey.ArrowLeft ||
+            evt.key === appui_abstract_1.SpecialKey.ArrowDown) {
             newHue = hueValue - (evt.ctrlKey ? 10 : 1);
         }
-        else if (evt.key === appui_abstract_1.SpecialKey.ArrowRight || evt.key === appui_abstract_1.SpecialKey.ArrowUp) {
+        else if (evt.key === appui_abstract_1.SpecialKey.ArrowRight ||
+            evt.key === appui_abstract_1.SpecialKey.ArrowUp) {
             newHue = hueValue + (evt.ctrlKey ? 10 : 1);
         }
         else if (evt.key === appui_abstract_1.SpecialKey.PageDown) {
@@ -193,9 +200,19 @@ function HueSlider({ isHorizontal, onHueChange, hsv, className, style }) {
             evt.preventDefault();
         }
     }, [hsv, onHueChange]);
-    const containerClasses = (0, classnames_1.default)(isHorizontal ? "components-hue-container-horizontal" : "components-hue-container-vertical", className);
-    const pointerStyle = isHorizontal ? { left: `${(hsv.h * 100) / 360}%`, backgroundColor: `hsl(${hsv.h} ,100%, 50%)` } :
-        { left: `0px`, top: `${-((hsv.h * 100) / 360) + 100}%`, backgroundColor: `hsl(${hsv.h} ,100%, 50%)` };
+    const containerClasses = (0, classnames_1.default)(isHorizontal
+        ? "components-hue-container-horizontal"
+        : "components-hue-container-vertical", className);
+    const pointerStyle = isHorizontal
+        ? {
+            left: `${(hsv.h * 100) / 360}%`,
+            backgroundColor: `hsl(${hsv.h} ,100%, 50%)`,
+        }
+        : {
+            left: `0px`,
+            top: `${-((hsv.h * 100) / 360) + 100}%`,
+            backgroundColor: `hsl(${hsv.h} ,100%, 50%)`,
+        };
     return (React.createElement("div", { className: containerClasses, style: style, "data-testid": "hue-container" },
         React.createElement("div", { "data-testid": "hue-slider", role: "slider", "aria-label": hueLabel, "aria-valuemin": 0, "aria-valuemax": 360, "aria-valuenow": hsv.h, className: "components-hue-slider", ref: container, onMouseDown: onMouseDown, onMouseMove: onDragging, onTouchMove: onDragging, onMouseUp: onMouseUp, onTouchStart: onTouchStart, onTouchEnd: onTouchEnd, tabIndex: 0, onKeyDown: onKeyDown },
             React.createElement("div", { style: pointerStyle, className: "components-hue-pointer", "data-testid": "hue-pointer" }))));

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":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,4BAA0B;AAC1B,4DAAoC;AACpC,6CAA+B;AAE/B,0DAAmD;AAEnD,8DAA2D;AAE3D,+BAA+B;AAC/B,SAAS,YAAY,CAAC,UAAkB,EAAE,IAAY,EAAE,UAAmB;IACzE,uBAAuB;IACvB,IAAI,UAAU,IAAI,CAAC,EAAE;QACnB,OAAO,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;KAC7B;SAAM,IAAI,UAAU,IAAI,IAAI,EAAE;QAC7B,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;KAC7B;SAAM;QACL,IAAI,OAAO,GAAG,CAAC,CAAC,UAAU,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC;QAC1C,IAAI,UAAU;YACZ,OAAO,GAAG,GAAG,GAAG,OAAO,CAAC;QAC1B,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,OAAO,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;KAC5C;AACH,CAAC;AAED,SAAS,eAAe,CAAC,UAAkB,EAAE,CAAsE,EAAE,YAAqB,EAAE,SAAyB;IACnK,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,EAAE,eAAe,EAAE,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE,aAAa,EAAE,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAC;IAErI,IAAI,CAAqB,CAAC;IAC1B,IAAI,OAAO,IAAI,CAAC,EAAE;QAChB,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC;KACb;SAAM;QACL,qBAAqB;QACrB,IAAI,SAAS,KAAK,CAAC,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,MAAM;YACnD,OAAO,UAAU,CAAC;QACpB,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;KACxB;IACD,qBAAqB;IACrB,IAAI,SAAS,KAAK,CAAC;QACjB,OAAO,UAAU,CAAC;IAEpB,IAAI,CAAqB,CAAC;IAC1B,IAAI,OAAO,IAAI,CAAC,EAAE;QAChB,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC;KACb;SAAM;QACL,qBAAqB;QACrB,IAAI,SAAS,KAAK,CAAC,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,MAAM;YACnD,OAAO,UAAU,CAAC;QACpB,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;KACxB;IACD,qBAAqB;IACrB,IAAI,SAAS,KAAK,CAAC;QACjB,OAAO,UAAU,CAAC;IAEpB,MAAM,QAAQ,GAAG,CAAC,GAAG,CAAC,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACtD,MAAM,QAAQ,GAAG,CAAC,GAAG,CAAC,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAErD,IAAI,CAAC,YAAY,EAAE,EAAE,WAAW;QAC9B,OAAO,YAAY,CAAC,QAAQ,EAAE,eAAe,EAAE,IAAI,CAAC,CAAC;KACtD;SAAM,EAAG,aAAa;QACrB,OAAO,YAAY,CAAC,QAAQ,EAAE,cAAc,EAAE,KAAK,CAAC,CAAC;KACtD;AACH,CAAC;AAcD;;GAEG;AACH,SAAgB,SAAS,CAAC,EAAE,YAAY,EAAE,WAAW,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAkB;IAC5F,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACrD,MAAM,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,uCAAkB,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC;IACnF,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAEvC,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAsE,EAAE,EAAE;QAC5G,uBAAuB;QACvB,IAAI,SAAS,CAAC,OAAO,EAAE;YACrB,MAAM,MAAM,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,YAAY,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;YAC5E,uBAAuB;YACvB,MAAM,QAAQ,GAAG,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;YACnC,uBAAuB;YACvB,IAAI,WAAW;gBACb,WAAW,CAAC,QAAQ,CAAC,CAAC;SACzB;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,GAAG,EAAE,WAAW,CAAC,CAAC,CAAC;IAErC,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAsE,EAAE,EAAE;QAC9G,uBAAuB;QACvB,IAAI,UAAU,CAAC,OAAO,EAAE;YACtB,QAAQ,CAAC,CAAC,CAAC,CAAC;SACb;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACvC,uBAAuB;QACvB,IAAI,UAAU,CAAC,OAAO,EAAE;YACtB,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC;SAC5B;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAuC,EAAE,EAAE;QAC/E,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,uBAAuB;QACvB,IAAI,UAAU,CAAC,OAAO,EAAE;YACtB,QAAQ,CAAC,KAAK,CAAC,CAAC;YAChB,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC;SAC5B;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAmC,EAAE,EAAE;QAC5E,CAAC,CAAC,cAAc,EAAE,CAAC;QAEnB,uBAAuB;QACvB,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa,EAAE;YAChC,uBAAuB;YACvB,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE;gBACvB,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;gBAC/E,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;aAC3B;SACF;QAED,QAAQ,CAAC,CAAC,CAAC,CAAC;QAEZ,uBAAuB;QACvB,IAAI,SAAS,CAAC,OAAO;YACnB,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IAC9B,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC;IAE1B,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAmC,EAAE,EAAE;QAC7E,uBAAuB;QACvB,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa;YAC9B,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;QAE5B,QAAQ,CAAC,CAAC,CAAC,CAAC;QAEZ,uBAAuB;QACvB,IAAI,SAAS,CAAC,OAAO;YACnB,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IAC9B,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,GAAwC,EAAE,EAAE;QAC/E,IAAI,MAA0B,CAAC;QAC/B,MAAM,QAAQ,GAAG,GAAG,CAAC,CAAC,CAAC;QACvB,IAAI,GAAG,CAAC,GAAG,KAAK,2BAAU,CAAC,SAAS,IAAI,GAAG,CAAC,GAAG,KAAK,2BAAU,CAAC,SAAS,EAAE;YACxE,MAAM,GAAG,QAAQ,GAAG,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SAC5C;aAAM,IAAI,GAAG,CAAC,GAAG,KAAK,2BAAU,CAAC,UAAU,IAAI,GAAG,CAAC,GAAG,KAAK,2BAAU,CAAC,OAAO,EAAE;YAC9E,MAAM,GAAG,QAAQ,GAAG,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SAC5C;aAAM,IAAI,GAAG,CAAC,GAAG,KAAK,2BAAU,CAAC,QAAQ,EAAE;YAC1C,MAAM,GAAG,QAAQ,GAAG,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;SAC9C;aAAM,IAAI,GAAG,CAAC,GAAG,KAAK,2BAAU,CAAC,MAAM,EAAE;YACxC,MAAM,GAAG,QAAQ,GAAG,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;SAC9C;aAAM,IAAI,GAAG,CAAC,GAAG,KAAK,2BAAU,CAAC,IAAI,EAAE;YACtC,MAAM,GAAG,CAAC,CAAC;SACZ;aAAM;YACL,uBAAuB;YACvB,IAAI,GAAG,CAAC,GAAG,KAAK,2BAAU,CAAC,GAAG,EAAE;gBAC9B,MAAM,GAAG,GAAG,CAAC;aACd;SACF;QAED,uBAAuB;QACvB,IAAI,SAAS,KAAK,MAAM,EAAE;YACxB,qBAAqB;YACrB,IAAI,MAAM,GAAG,GAAG;gBAAE,MAAM,GAAG,GAAG,CAAC,CAAC,sBAAsB;YACtD,qBAAqB;YACrB,IAAI,MAAM,GAAG,CAAC;gBAAE,MAAM,GAAG,CAAC,CAAC;YAE3B,MAAM,QAAQ,GAAG,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;YACnC,uBAAuB;YACvB,IAAI,WAAW;gBACb,WAAW,CAAC,QAAQ,CAAC,CAAC;YACxB,GAAG,CAAC,cAAc,EAAE,CAAC;SACtB;IACH,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC,CAAC;IAEvB,MAAM,gBAAgB,GAAG,IAAA,oBAAU,EACjC,YAAY,CAAC,CAAC,CAAC,qCAAqC,CAAC,CAAC,CAAC,mCAAmC,EAC1F,SAAS,CACV,CAAC;IAEF,MAAM,YAAY,GAAwB,YAAY,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,EAAE,eAAe,EAAE,OAAO,GAAG,CAAC,CAAC,cAAc,EAAE,CAAC,CAAC;QACzI,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,EAAE,eAAe,EAAE,OAAO,GAAG,CAAC,CAAC,cAAc,EAAE,CAAC;IAExG,OAAO,CACL,6BAAK,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,KAAK,iBAAc,eAAe;QACzE,4CACc,YAAY,EACxB,IAAI,EAAC,QAAQ,gBAAa,QAAQ,mBACnB,CAAC,mBAAiB,GAAG,mBAAiB,GAAG,CAAC,CAAC,EAC1D,SAAS,EAAC,uBAAuB,EACjC,GAAG,EAAE,SAAS,EACd,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,UAAU,EACvB,WAAW,EAAE,UAAU,EACvB,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,SAAS;YAEpB,6BAAK,KAAK,EAAE,YAAY,EAAE,SAAS,EAAC,wBAAwB,iBAAa,aAAa,GAAG,CACrF,CACD,CACR,CAAC;AACJ,CAAC;AAxID,8BAwIC","sourcesContent":["/---------------------------------------------------------------------------------------------\r\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n--------------------------------------------------------------------------------------------/\r\n/** @packageDocumentation\r\n * @module Color\r\n /\r\n\r\nimport \"./HueSlider.scss\";\r\nimport classnames from \"classnames\";\r\nimport as React from \"react\";\r\nimport type { HSVColor } from \"@itwin/core-common\";\r\nimport { SpecialKey } from \"@itwin/appui-abstract\";\r\nimport type { CommonProps } from \"@itwin/core-react\";\r\nimport { UiIModelComponents } from \"../UiIModelComponents\";\r\n\r\n// hue is a value from 0 to 360\r\nfunction calculateHue(currentPos: number, high: number, isVertical: boolean) {\r\n // istanbul ignore next\r\n if (currentPos <= 0) {\r\n return isVertical ? 359 : 0;\r\n } else if (currentPos >= high) {\r\n return isVertical ? 0 : 359;\r\n } else {\r\n let percent = ((currentPos * 100) / high);\r\n if (isVertical)\r\n percent = 100 - percent;\r\n return Math.round(((359 * percent) / 100));\r\n }\r\n}\r\n\r\nfunction calculateChange(currentHue: number, e: React.MouseEvent<HTMLDivElement> \| React.TouchEvent<HTMLDivElement>, isHorizontal: boolean, container: HTMLDivElement) {\r\n const { width: containerWidth, height: containerHeight, top: containerTop, left: containerLeft } = container.getBoundingClientRect();\r\n\r\n let x: number \| undefined;\r\n if (\"pageX\" in e) {\r\n x = e.pageX;\r\n } else {\r\n // istanbul ignore if\r\n if (undefined === e.touches \|\| 0 === e.touches.length)\r\n return currentHue;\r\n x = e.touches[0].pageX;\r\n }\r\n // istanbul ignore if\r\n if (undefined === x)\r\n return currentHue;\r\n\r\n let y: number \| undefined;\r\n if (\"pageY\" in e) {\r\n y = e.pageY;\r\n } else {\r\n // istanbul ignore if\r\n if (undefined === e.touches \|\| 0 === e.touches.length)\r\n return currentHue;\r\n y = e.touches[0].pageY;\r\n }\r\n // istanbul ignore if\r\n if (undefined === y)\r\n return currentHue;\r\n\r\n const pointerX = x - (containerLeft + window.scrollX);\r\n const pointerY = y - (containerTop + window.scrollY);\r\n\r\n if (!isHorizontal) { // vertical\r\n return calculateHue(pointerY, containerHeight, true);\r\n } else { // horizontal\r\n return calculateHue(pointerX, containerWidth, false);\r\n }\r\n}\r\n\r\n/** Properties for the [[HueSlider]] React component\r\n * @beta\r\n /\r\nexport interface HueSliderProps extends React.HTMLAttributes<HTMLDivElement>, CommonProps {\r\n /* true if slider is oriented horizontal, else vertical orientation is assumed /\r\n isHorizontal?: boolean;\r\n /* function to run when user hue is changed /\r\n onHueChange?: ((hue: HSVColor) => void) \| undefined;\r\n /* HSV Color Value /\r\n hsv: HSVColor;\r\n}\r\n\r\n/* HueSlider component used to set the hue value.\r\n * @beta\r\n /\r\nexport function HueSlider({ isHorizontal, onHueChange, hsv, className, style }: HueSliderProps) {\r\n const container = React.useRef<HTMLDivElement>(null);\r\n const [hueLabel] = React.useState(() => UiIModelComponents.translate(\"color.hue\"));\r\n const isDragging = React.useRef(false);\r\n\r\n const onChange = React.useCallback((e: React.MouseEvent<HTMLDivElement> \| React.TouchEvent<HTMLDivElement>) => {\r\n // istanbul ignore else\r\n if (container.current) {\r\n const newHue = calculateChange(hsv.h, e, !!isHorizontal, container.current);\r\n // istanbul ignore else\r\n const newColor = hsv.clone(newHue);\r\n // istanbul ignore else\r\n if (onHueChange)\r\n onHueChange(newColor);\r\n }\r\n }, [isHorizontal, hsv, onHueChange]);\r\n\r\n const onDragging = React.useCallback((e: React.MouseEvent<HTMLDivElement> \| React.TouchEvent<HTMLDivElement>) => {\r\n // istanbul ignore else\r\n if (isDragging.current) {\r\n onChange(e);\r\n }\r\n }, [onChange]);\r\n\r\n const onMouseUp = React.useCallback(() => {\r\n // istanbul ignore else\r\n if (isDragging.current) {\r\n isDragging.current = false;\r\n }\r\n }, []);\r\n\r\n const onTouchEnd = React.useCallback((event: React.TouchEvent<HTMLDivElement>) => {\r\n event.preventDefault();\r\n\r\n // istanbul ignore else\r\n if (isDragging.current) {\r\n onChange(event);\r\n isDragging.current = false;\r\n }\r\n }, [onChange]);\r\n\r\n const onMouseDown = React.useCallback((e: React.MouseEvent<HTMLDivElement>) => {\r\n e.preventDefault();\r\n\r\n // istanbul ignore else\r\n if (e.target !== e.currentTarget) {\r\n // istanbul ignore else\r\n if (!isDragging.current) {\r\n document.addEventListener(\"mouseup\", onMouseUp, { capture: true, once: true });\r\n isDragging.current = true;\r\n }\r\n }\r\n\r\n onChange(e);\r\n\r\n // istanbul ignore else\r\n if (container.current)\r\n container.current.focus();\r\n }, [onChange, onMouseUp]);\r\n\r\n const onTouchStart = React.useCallback((e: React.TouchEvent<HTMLDivElement>) => {\r\n // istanbul ignore else\r\n if (e.target !== e.currentTarget)\r\n isDragging.current = true;\r\n\r\n onChange(e);\r\n\r\n // istanbul ignore else\r\n if (container.current)\r\n container.current.focus();\r\n }, [onChange]);\r\n\r\n const onKeyDown = React.useCallback((evt: React.KeyboardEvent<HTMLDivElement>) => {\r\n let newHue: number \| undefined;\r\n const hueValue = hsv.h;\r\n if (evt.key === SpecialKey.ArrowLeft \|\| evt.key === SpecialKey.ArrowDown) {\r\n newHue = hueValue - (evt.ctrlKey ? 10 : 1);\r\n } else if (evt.key === SpecialKey.ArrowRight \|\| evt.key === SpecialKey.ArrowUp) {\r\n newHue = hueValue + (evt.ctrlKey ? 10 : 1);\r\n } else if (evt.key === SpecialKey.PageDown) {\r\n newHue = hueValue - (evt.ctrlKey ? 180 : 60);\r\n } else if (evt.key === SpecialKey.PageUp) {\r\n newHue = hueValue + (evt.ctrlKey ? 180 : 60);\r\n } else if (evt.key === SpecialKey.Home) {\r\n newHue = 0;\r\n } else {\r\n // istanbul ignore else\r\n if (evt.key === SpecialKey.End) {\r\n newHue = 359;\r\n }\r\n }\r\n\r\n // istanbul ignore else\r\n if (undefined !== newHue) {\r\n // istanbul ignore if\r\n if (newHue > 359) newHue = 359; // 360 is same as zero\r\n // istanbul ignore if\r\n if (newHue < 0) newHue = 0;\r\n\r\n const newColor = hsv.clone(newHue);\r\n // istanbul ignore else\r\n if (onHueChange)\r\n onHueChange(newColor);\r\n evt.preventDefault();\r\n }\r\n }, [hsv, onHueChange]);\r\n\r\n const containerClasses = classnames(\r\n isHorizontal ? \"components-hue-container-horizontal\" : \"components-hue-container-vertical\",\r\n className,\r\n );\r\n\r\n const pointerStyle: React.CSSProperties = isHorizontal ? { left: `${(hsv.h 100) / 360}%`, backgroundColor: `hsl(${hsv.h} ,100%, 50%)` } :\r\n { left: `0px`, top: `${-((hsv.h * 100) / 360) + 100}%`, backgroundColor: `hsl(${hsv.h} ,100%, 50%)` };\r\n\r\n return (\r\n <div className={containerClasses} style={style} data-testid=\"hue-container\" >\r\n <div\r\n data-testid=\"hue-slider\"\r\n role=\"slider\" aria-label={hueLabel}\r\n aria-valuemin={0} aria-valuemax={360} aria-valuenow={hsv.h}\r\n className=\"components-hue-slider\"\r\n ref={container}\r\n onMouseDown={onMouseDown}\r\n onMouseMove={onDragging}\r\n onTouchMove={onDragging}\r\n onMouseUp={onMouseUp}\r\n onTouchStart={onTouchStart}\r\n onTouchEnd={onTouchEnd}\r\n tabIndex={0}\r\n onKeyDown={onKeyDown}\r\n >\r\n <div style={pointerStyle} className=\"components-hue-pointer\" data-testid=\"hue-pointer\" />\r\n </div>\r\n </div >\r\n );\r\n}\r\n"]}
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 type { HSVColor } from \"@itwin/core-common\";\nimport { SpecialKey } from \"@itwin/appui-abstract\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { UiIModelComponents } from \"../UiIModelComponents\";\n\n// hue is a value from 0 to 360\nfunction calculateHue(currentPos: number, high: number, isVertical: boolean) {\n // istanbul ignore next\n if (currentPos <= 0) {\n return isVertical ? 359 : 0;\n } else if (currentPos >= high) {\n return isVertical ? 0 : 359;\n } else {\n let percent = (currentPos * 100) / high;\n if (isVertical) percent = 100 - percent;\n return Math.round((359 * percent) / 100);\n }\n}\n\nfunction calculateChange(\n currentHue: number,\n e: React.MouseEvent<HTMLDivElement> \| React.TouchEvent<HTMLDivElement>,\n isHorizontal: boolean,\n container: HTMLDivElement\n) {\n const {\n width: containerWidth,\n height: containerHeight,\n top: containerTop,\n left: containerLeft,\n } = 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) return currentHue;\n x = e.touches[0].pageX;\n }\n // istanbul ignore if\n if (undefined === x) 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) return currentHue;\n y = e.touches[0].pageY;\n }\n // istanbul ignore if\n if (undefined === y) return currentHue;\n\n const pointerX = x - (containerLeft + window.scrollX);\n const pointerY = y - (containerTop + window.scrollY);\n\n if (!isHorizontal) {\n // vertical\n return calculateHue(pointerY, containerHeight, true);\n } else {\n // horizontal\n return calculateHue(pointerX, containerWidth, false);\n }\n}\n\n/** Properties for the [[HueSlider]] React component\n * @beta\n /\nexport interface HueSliderProps\n extends React.HTMLAttributes<HTMLDivElement>,\n 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({\n isHorizontal,\n onHueChange,\n hsv,\n className,\n style,\n}: HueSliderProps) {\n const container = React.useRef<HTMLDivElement>(null);\n const [hueLabel] = React.useState(() =>\n UiIModelComponents.translate(\"color.hue\")\n );\n const isDragging = React.useRef(false);\n\n const onChange = React.useCallback(\n (\n e: React.MouseEvent<HTMLDivElement> \| React.TouchEvent<HTMLDivElement>\n ) => {\n // istanbul ignore else\n if (container.current) {\n const newHue = calculateChange(\n hsv.h,\n e,\n !!isHorizontal,\n container.current\n );\n // istanbul ignore else\n const newColor = hsv.clone(newHue);\n // istanbul ignore else\n if (onHueChange) onHueChange(newColor);\n }\n },\n [isHorizontal, hsv, onHueChange]\n );\n\n const onDragging = React.useCallback(\n (\n e: React.MouseEvent<HTMLDivElement> \| React.TouchEvent<HTMLDivElement>\n ) => {\n // istanbul ignore else\n if (isDragging.current) {\n onChange(e);\n }\n },\n [onChange]\n );\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(\n (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 },\n [onChange]\n );\n\n const onMouseDown = React.useCallback(\n (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, {\n capture: true,\n once: true,\n });\n isDragging.current = true;\n }\n }\n\n onChange(e);\n\n // istanbul ignore else\n if (container.current) container.current.focus();\n },\n [onChange, onMouseUp]\n );\n\n const onTouchStart = React.useCallback(\n (e: React.TouchEvent<HTMLDivElement>) => {\n // istanbul ignore else\n if (e.target !== e.currentTarget) isDragging.current = true;\n\n onChange(e);\n\n // istanbul ignore else\n if (container.current) container.current.focus();\n },\n [onChange]\n );\n\n const onKeyDown = React.useCallback(\n (evt: React.KeyboardEvent<HTMLDivElement>) => {\n let newHue: number \| undefined;\n const hueValue = hsv.h;\n if (\n evt.key === SpecialKey.ArrowLeft \|\|\n evt.key === SpecialKey.ArrowDown\n ) {\n newHue = hueValue - (evt.ctrlKey ? 10 : 1);\n } else if (\n evt.key === SpecialKey.ArrowRight \|\|\n evt.key === SpecialKey.ArrowUp\n ) {\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) onHueChange(newColor);\n evt.preventDefault();\n }\n },\n [hsv, onHueChange]\n );\n\n const containerClasses = classnames(\n isHorizontal\n ? \"components-hue-container-horizontal\"\n : \"components-hue-container-vertical\",\n className\n );\n\n const pointerStyle: React.CSSProperties = isHorizontal\n ? {\n left: `${(hsv.h 100) / 360}%`,\n backgroundColor: `hsl(${hsv.h} ,100%, 50%)`,\n }\n : {\n left: `0px`,\n top: `${-((hsv.h * 100) / 360) + 100}%`,\n backgroundColor: `hsl(${hsv.h} ,100%, 50%)`,\n };\n\n return (\n <div className={containerClasses} style={style} data-testid=\"hue-container\">\n <div\n data-testid=\"hue-slider\"\n role=\"slider\"\n aria-label={hueLabel}\n aria-valuemin={0}\n aria-valuemax={360}\n 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\n style={pointerStyle}\n className=\"components-hue-pointer\"\n data-testid=\"hue-pointer\"\n />\n </div>\n </div>\n );\n}\n"]}

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

@@ -1,61 +1,78 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-.components-hue-pointer {
-  position: absolute;
-  width: 1.2em;
-  height: 1.2em;
-  border-radius: 50%;
-  box-shadow: rgba(0, 0, 0, 0.37) 0px 1px 4px 0px;
-  &:focus {
-    outline: none;
-    border: none;
-  }
-}
-.components-hue-container-horizontal {
-  width: 100%;
-  height: .5em;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  .components-hue-slider {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    border-radius: 1em;
-    background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
-  }
-  .components-hue-pointer {
-    transform: translate(-.6em, -.45em);
-    cursor: pointer;
-    border: 1px solid #fff;
-  }
-}
-.components-hue-container-vertical {
-  width: .5em;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  .components-hue-slider {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    border-radius: 1em;
-    background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%,
-      #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
-  }
-  .components-hue-pointer {
-    transform: translate(-.45em, -.6em);
-    cursor: pointer;
-    border: 1px solid #fff;
-  }
-}
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.components-hue-pointer {
+  position: absolute;
+  width: 1.2em;
+  height: 1.2em;
+  border-radius: 50%;
+  box-shadow: rgba(0, 0, 0, 0.37) 0px 1px 4px 0px;
+  &:focus {
+    outline: none;
+    border: none;
+  }
+}
+.components-hue-container-horizontal {
+  width: 100%;
+  height: 0.5em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .components-hue-slider {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: 1em;
+    background: linear-gradient(
+      to right,
+      #f00 0%,
+      #ff0 17%,
+      #0f0 33%,
+      #0ff 50%,
+      #00f 67%,
+      #f0f 83%,
+      #f00 100%
+    );
+  }
+  .components-hue-pointer {
+    transform: translate(-0.6em, -0.45em);
+    cursor: pointer;
+    border: 1px solid #fff;
+  }
+}
+.components-hue-container-vertical {
+  width: 0.5em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  .components-hue-slider {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: 1em;
+    background: linear-gradient(
+      to top,
+      #f00 0%,
+      #ff0 17%,
+      #0f0 33%,
+      #0ff 50%,
+      #00f 67%,
+      #f0f 83%,
+      #f00 100%
+    );
+  }
+  .components-hue-pointer {
+    transform: translate(-0.45em, -0.6em);
+    cursor: pointer;
+    border: 1px solid #fff;
+  }
+}

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

@@ -17,5 +17,5 @@ export interface SaturationPickerProps extends React.HTMLAttributes<HTMLDivEleme
 /** SaturationPicker component used to set the saturation value.
  * @beta
  */
-export declare function SaturationPicker({ onSaturationChange, hsv, className, style }: SaturationPickerProps): JSX.Element;
+export declare function SaturationPicker({ onSaturationChange, hsv, className, style, }: SaturationPickerProps): JSX.Element;
 //# sourceMappingURL=SaturationPicker.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SaturationPicker.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/SaturationPicker.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,yBAAyB,CAAC;AAEjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAY,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAExD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAgErD;;GAEG;AACH,MAAM,WAAW,~~qBAAsB~~,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,~~EAAE~~,WAAW;~~IAC9F~~,sEAAsE;IACtE,kBAAkB,CAAC,EAAE,CAAC,CAAC,UAAU,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAClE,sBAAsB;IACtB,GAAG,EAAE,QAAQ,CAAC;CACf;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,~~EAAE~~,kBAAkB,~~EAAE~~,GAAG,~~EAAE~~,SAAS,~~EAAE~~,KAAK,~~EAAE~~,EAAE,qBAAqB,~~eA6IpG~~"}
1	+ {"version":3,"file":"SaturationPicker.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/SaturationPicker.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,yBAAyB,CAAC;AAEjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAY,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAExD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAgErD;;GAEG;AACH,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,WAAW;IACb,sEAAsE;IACtE,kBAAkB,CAAC,EAAE,CAAC,CAAC,UAAU,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAClE,sBAAsB;IACtB,GAAG,EAAE,QAAQ,CAAC;CACf;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,kBAAkB,EAClB,GAAG,EACH,SAAS,EACT,KAAK,GACN,EAAE,qBAAqB,eA+KvB"}

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

@@ -1,8 +1,8 @@
 "use strict";
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 /** @packageDocumentation
  * @module Color
  */
@@ -41,7 +41,7 @@ const core_common_1 = require("@itwin/core-common");
 const appui_abstract_1 = require("@itwin/appui-abstract");
 const UiIModelComponents_1 = require("../UiIModelComponents");
 function calculateChange(e, hsv, container) {
-    const { width: containerWidth, height: containerHeight, top: containerTop, left: containerLeft } = container.getBoundingClientRect();
+    const { width: containerWidth, height: containerHeight, top: containerTop, left: containerLeft, } = container.getBoundingClientRect();
     let x;
     if ("pageX" in e) {
         x = e.pageX;
@@ -100,7 +100,7 @@ function calculateChange(e, hsv, container) {
 /** SaturationPicker component used to set the saturation value.
  * @beta
  */
-function SaturationPicker({ onSaturationChange, hsv, className, style }) {
+function SaturationPicker({ onSaturationChange, hsv, className, style, }) {
     const container = React.useRef(null);
     const [saturationLabel] = React.useState(() => UiIModelComponents_1.UiIModelComponents.translate("color.saturation"));
     const isDragging = React.useRef(false);
@@ -139,7 +139,10 @@ function SaturationPicker({ onSaturationChange, hsv, className, style }) {
         // istanbul ignore else
         if (e.target !== e.currentTarget) {
             isDragging.current = true;
-            document.addEventListener("mouseup", onMouseUp, { capture: true, once: true });
+            document.addEventListener("mouseup", onMouseUp, {
+                capture: true,
+                once: true,
+            });
         }
         onChange(e);
         // istanbul ignore else
@@ -160,16 +163,16 @@ function SaturationPicker({ onSaturationChange, hsv, className, style }) {
         const h = hsv.h;
         let { s, v } = { ...hsv };
         if (evt.key === appui_abstract_1.SpecialKey.ArrowLeft) {
-            s -= (evt.ctrlKey ? 10 : 1);
+            s -= evt.ctrlKey ? 10 : 1;
         }
         else if (evt.key === appui_abstract_1.SpecialKey.ArrowDown) {
-            v -= (evt.ctrlKey ? 10 : 1);
+            v -= evt.ctrlKey ? 10 : 1;
         }
         else if (evt.key === appui_abstract_1.SpecialKey.ArrowRight) {
-            s += (evt.ctrlKey ? 10 : 1);
+            s += evt.ctrlKey ? 10 : 1;
         }
         else if (evt.key === appui_abstract_1.SpecialKey.ArrowUp) {
-            v += (evt.ctrlKey ? 10 : 1);
+            v += evt.ctrlKey ? 10 : 1;
         }
         else if (evt.key === appui_abstract_1.SpecialKey.PageDown) {
             v = 0;
@@ -206,7 +209,7 @@ function SaturationPicker({ onSaturationChange, hsv, className, style }) {
     }, [hsv, onSaturationChange]);
     const pointerStyle = React.useMemo(() => ({
         left: `${hsv.s}%`,
-        top: `${-(hsv.v) + 100}%`,
+        top: `${-hsv.v + 100}%`,
         backgroundColor: `${core_common_1.ColorDef.fromHSV(hsv).toRgbString()}`,
     }), [hsv]);
     const colorStyle = React.useMemo(() => ({ backgroundColor: `hsl(${hsv.h} ,100%, 50%)` }), [hsv]);

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

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

@@ -1,35 +1,36 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-.components-saturation-container {
-  width: 100%;
-  height: 100%;
-  min-width: 100px;
-  min-height: 100px;
-  .components-saturation-region {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
-    background-size: cover, cover;
-    overflow: visible;
-    .components-saturation-pointer {
-      position: absolute;
-      width: 2em;
-      height: 2em;
-      border-radius: 50%;
-      box-shadow: rgba(0, 0, 0, 0.37) 0px 4px 4px 0px;
-      border: 2px solid #fff;
-      transform: translate(-1em, -1em);
-      &:focus {
-        outline: none;
-        border: none;
-      }
-    }
-  }
-}
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.components-saturation-container {
+  width: 100%;
+  height: 100%;
+  min-width: 100px;
+  min-height: 100px;
+  .components-saturation-region {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)),
+      linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+    background-size: cover, cover;
+    overflow: visible;
+    .components-saturation-pointer {
+      position: absolute;
+      width: 2em;
+      height: 2em;
+      border-radius: 50%;
+      box-shadow: rgba(0, 0, 0, 0.37) 0px 4px 4px 0px;
+      border: 2px solid #fff;
+      transform: translate(-1em, -1em);
+      &:focus {
+        outline: none;
+        border: none;
+      }
+    }
+  }
+}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Swatch.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/Swatch.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,eAAe,CAAC;AAEvB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD;;GAEG;AACH,MAAM,WAAW,~~gBAAiB~~,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,~~EAAE~~,WAAW;~~IAClG~~,0BAA0B;IAC1B,QAAQ,EAAE,QAAQ,CAAC;IACnB,qDAAqD;IACrD,WAAW,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC3E,2DAA2D;IAC3D,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,~~eA2BlD~~"}
1	+ {"version":3,"file":"Swatch.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/Swatch.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,eAAe,CAAC;AAEvB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD;;GAEG;AACH,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,WAAW;IACb,0BAA0B;IAC1B,QAAQ,EAAE,QAAQ,CAAC;IACnB,qDAAqD;IACrD,WAAW,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC3E,2DAA2D;IAC3D,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,eAiClD"}

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

@@ -1,8 +1,8 @@
 "use strict";
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 /** @packageDocumentation
  * @module Color
  */
@@ -53,13 +53,10 @@ function ColorSwatch(props) {
             props.onColorPick(props.colorDef, e);
     };
     const classes = (0, classnames_1.default)("components-color-swatch", props.round && "round", props.className);
-    const {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onColorPick, colorDef, round, // do not pass on color swatch specific props
-    // eslint-disable-next-line comma-dangle
+    const { onColorPick, colorDef, round, // do not pass on color swatch specific props
     ...otherProps // pass-through props
      } = props;
-    return React.createElement("button", { ...otherProps, style: colorStyle, className: classes, onClick: handleClick });
+    return (React.createElement("button", { ...otherProps, style: colorStyle, className: classes, onClick: handleClick }));
 }
 exports.ColorSwatch = ColorSwatch;
 //# sourceMappingURL=Swatch.js.map

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":["/---------------------------------------------------------------------------------------------\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 \"./Swatch.scss\";\r\nimport classnames from \"classnames\";\r\nimport as React from \"react\";\r\nimport type { ColorDef } from \"@itwin/core-common\";\r\nimport type { CommonProps } from \"@itwin/core-react\";\r\nimport { getCSSColorFromDef } from \"./getCSSColorFromDef\";\r\n\r\n/** Properties for the [[ColorSwatch]] React component\r\n * @beta\r\n /\r\nexport interface ColorSwatchProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\r\n /* color specification /\r\n colorDef: ColorDef;\r\n /* function to run when user selects color swatch /\r\n onColorPick?: ((color: ColorDef, e: React.MouseEvent) => void) \| undefined;\r\n /* Show swatches as squares unless round is set to true /\r\n round?: boolean;\r\n}\r\n\r\n/* ColorSwatch Functional component displays a color swatch in a button\r\n * @beta\r\n */\r\nexport function ColorSwatch(props: ColorSwatchProps) {\r\n const rgbaString = getCSSColorFromDef(props.colorDef);\r\n const colorStyle: React.CSSProperties = {\r\n backgroundColor: rgbaString,\r\n ...props.style,\r\n };\r\n\r\n const handleClick = (e: React.MouseEvent) => {\r\n // istanbul ignore else\r\n if (props && props.onColorPick)~~\r\n~~ props.onColorPick(props.colorDef, e);\r\n };\r\n\r\n const classes = classnames(\r\n \"components-color-swatch\",\r\n props.round && \"round\",\r\n props.className~~,\r~~\n );\r\n\r\n const {\r\n ~~// eslint-disable-next-line @typescript-eslint/no-unused-vars\r\~~n ~~onColorPick,~~ colorDef, round, // do not pass on color swatch specific props\r\n ~~// eslint-disable-next-line comma-dangle\r\n~~ ...otherProps // pass-through props\r\n } = props;\r\n\r\n return <button {...otherProps} style={colorStyle} className={classes} onClick={handleClick} ~~/>;\r~~\n}\r\n"]}
1	+ {"version":3,"file":"Swatch.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/Swatch.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,yBAAuB;AACvB,4DAAoC;AACpC,6CAA+B;AAG/B,6DAA0D;AAgB1D;;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;YAAE,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;IACvE,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,IAAA,oBAAU,EACxB,yBAAyB,EACzB,KAAK,CAAC,KAAK,IAAI,OAAO,EACtB,KAAK,CAAC,SAAS,CAChB,CAAC;IAEF,MAAM,EACJ,WAAW,EACX,QAAQ,EACR,KAAK,EAAE,6CAA6C;IACpD,GAAG,UAAU,CAAC,qBAAqB;MACpC,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,mCACM,UAAU,EACd,KAAK,EAAE,UAAU,EACjB,SAAS,EAAE,OAAO,EAClB,OAAO,EAAE,WAAW,GACpB,CACH,CAAC;AACJ,CAAC;AAjCD,kCAiCC","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 type { ColorDef } from \"@itwin/core-common\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { getCSSColorFromDef } from \"./getCSSColorFromDef\";\n\n/** Properties for the [[ColorSwatch]] React component\n * @beta\n /\nexport interface ColorSwatchProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n 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) 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 onColorPick,\n colorDef,\n round, // do not pass on color swatch specific props\n ...otherProps // pass-through props\n } = props;\n\n return (\n <button\n {...otherProps}\n style={colorStyle}\n className={classes}\n onClick={handleClick}\n />\n );\n}\n"]}