@itwin/imodel-components-react 4.0.0-dev.12 → 4.0.0-dev.14

package/lib/esm/imodel-components-react/UiIModelComponents.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiIModelComponents.js","sourceRoot":"","sources":["../../../src/imodel-components-react/UiIModelComponents.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD;;;GAGG;AACH,MAAM,OAAO,kBAAkB;IAG7B;;OAEG;IACI,MAAM,CAAC,KAAK,CAAC,UAAU;;QAC5B,IAAI,kBAAkB,CAAC,YAAY,EAAE;YACnC,MAAM,CAAC,OAAO,CAAC,kBAAkB,CAAC,cAAc,CAAC,kBAAkB,CAAC,EAAE,8CAA8C,CAAC,CAAC;YACtH,OAAO;SACR;QAED,MAAM,CAAA,MAAA,SAAS,CAAC,YAAY,0CAAE,iBAAiB,CAAC,kBAAkB,CAAC,qBAAqB,CAAC,CAAA,CAAC;QAE1F,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE;YAC3B,oEAAoE;YACpE,MAAM,YAAY,GAAG,IAAI,iBAAiB,EAAE,CAAC;YAC7C,MAAM,YAAY,CAAC,UAAU,EAAE,CAAC;YAChC,MAAM,YAAY,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;SAC7C;aAAM;YACL,MAAM,YAAY,CAAC,UAAU,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;SACvD;QAED,kBAAkB,CAAC,YAAY,GAAG,IAAI,CAAC;IACzC,CAAC;IAED,gEAAgE;IACzD,MAAM,CAAC,SAAS;;QACrB,MAAA,SAAS,CAAC,YAAY,0CAAE,mBAAmB,CAAC,kBAAkB,CAAC,qBAAqB,CAAC,CAAC;QACtF,YAAY,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,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,IAAI,0BAA0B,CAAC,CAAC,SAAS,CAAC,YAAY,EAAE;YACzF,MAAM,CAAC,QAAQ,CAAC,kBAAkB,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,+EAA+E,CAAC,CAAC;YAC1I,OAAO,EAAE,CAAC;SACX;QACD,OAAO,SAAS,CAAC,YAAY,CAAC,kBAAkB,CAAC,GAAG,EAAE,EAAE,EAAE,EAAE,kBAAkB,CAAC,qBAAqB,EAAE,CAAC,CAAC;IAC1G,CAAC;IAED,gBAAgB;IACT,MAAM,CAAC,cAAc,CAAC,GAAQ;QACnC,MAAM,SAAS,GAAG,YAAY,CAAC,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;;AA7Dc,+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 { Logger } from \"@itwin/core-bentley\";\r\nimport { IModelApp } from \"@itwin/core-frontend\";\r\nimport { getClassName } from \"@itwin/appui-abstract\";\r\nimport { UiComponents } from \"@itwin/components-react\";\r\nimport { EmptyLocalization } from \"@itwin/core-common\";\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\r\n  /**\r\n   * initialize UiIModelComponents.\r\n   */\r\n  public static async initialize(): 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    await IModelApp.localization?.registerNamespace(UiIModelComponents.localizationNamespace);\r\n\r\n    if (!IModelApp.localization) {\r\n      // it should only get here in unit test where IModelApp is not setup\r\n      const localization = new EmptyLocalization();\r\n      await localization.initialize();\r\n      await UiComponents.initialize(localization);\r\n    } else {\r\n      await UiComponents.initialize(IModelApp.localization);\r\n    }\r\n\r\n    UiIModelComponents._initialized = true;\r\n  }\r\n\r\n  /** Unregisters the UiIModelComponents localization namespace */\r\n  public static terminate() {\r\n    IModelApp.localization?.unregisterNamespace(UiIModelComponents.localizationNamespace);\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 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 || /* istanbul ignore next */ !IModelApp.localization) {\r\n      Logger.logError(UiIModelComponents.loggerCategory(this), `translate: IModelApp.localization has not been setup. Returning blank string.`);\r\n      return \"\";\r\n    }\r\n    return IModelApp.localization.getLocalizedString(key, { ns: UiIModelComponents.localizationNamespace });\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"]}
+{"version":3,"file":"UiIModelComponents.js","sourceRoot":"","sources":["../../../src/imodel-components-react/UiIModelComponents.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD;;;GAGG;AACH,MAAa,kBAAkB;IAG7B;;OAEG;IACI,MAAM,CAAC,KAAK,CAAC,UAAU;QAC5B,IAAI,kBAAkB,CAAC,YAAY,EAAE;YACnC,MAAM,CAAC,OAAO,CAAC,kBAAkB,CAAC,cAAc,CAAC,kBAAkB,CAAC,EAAE,8CAA8C,CAAC,CAAC;YACtH,OAAO;SACR;QAED,MAAM,SAAS,CAAC,YAAY,EAAE,iBAAiB,CAAC,kBAAkB,CAAC,qBAAqB,CAAC,CAAC;QAE1F,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE;YAC3B,oEAAoE;YACpE,MAAM,YAAY,GAAG,IAAI,iBAAiB,EAAE,CAAC;YAC7C,MAAM,YAAY,CAAC,UAAU,EAAE,CAAC;YAChC,MAAM,YAAY,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;SAC7C;aAAM;YACL,MAAM,YAAY,CAAC,UAAU,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;SACvD;QAED,kBAAkB,CAAC,YAAY,GAAG,IAAI,CAAC;IACzC,CAAC;IAED,gEAAgE;IACzD,MAAM,CAAC,SAAS;QACrB,SAAS,CAAC,YAAY,EAAE,mBAAmB,CAAC,kBAAkB,CAAC,qBAAqB,CAAC,CAAC;QACtF,YAAY,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,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,IAAI,0BAA0B,CAAC,CAAC,SAAS,CAAC,YAAY,EAAE;YACzF,MAAM,CAAC,QAAQ,CAAC,kBAAkB,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,+EAA+E,CAAC,CAAC;YAC1I,OAAO,EAAE,CAAC;SACX;QACD,OAAO,SAAS,CAAC,YAAY,CAAC,kBAAkB,CAAC,GAAG,EAAE,EAAE,EAAE,EAAE,kBAAkB,CAAC,qBAAqB,EAAE,CAAC,CAAC;IAC1G,CAAC;IAED,gBAAgB;IACT,MAAM,CAAC,cAAc,CAAC,GAAQ;QACnC,MAAM,SAAS,GAAG,YAAY,CAAC,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;;AA7Dc,+BAAY,GAAG,KAAK,CAAC;SADzB,kBAAkB","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 { Logger } from \"@itwin/core-bentley\";\r\nimport { IModelApp } from \"@itwin/core-frontend\";\r\nimport { getClassName } from \"@itwin/appui-abstract\";\r\nimport { UiComponents } from \"@itwin/components-react\";\r\nimport { EmptyLocalization } from \"@itwin/core-common\";\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\r\n  /**\r\n   * initialize UiIModelComponents.\r\n   */\r\n  public static async initialize(): 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    await IModelApp.localization?.registerNamespace(UiIModelComponents.localizationNamespace);\r\n\r\n    if (!IModelApp.localization) {\r\n      // it should only get here in unit test where IModelApp is not setup\r\n      const localization = new EmptyLocalization();\r\n      await localization.initialize();\r\n      await UiComponents.initialize(localization);\r\n    } else {\r\n      await UiComponents.initialize(IModelApp.localization);\r\n    }\r\n\r\n    UiIModelComponents._initialized = true;\r\n  }\r\n\r\n  /** Unregisters the UiIModelComponents localization namespace */\r\n  public static terminate() {\r\n    IModelApp.localization?.unregisterNamespace(UiIModelComponents.localizationNamespace);\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 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 || /* istanbul ignore next */ !IModelApp.localization) {\r\n      Logger.logError(UiIModelComponents.loggerCategory(this), `translate: IModelApp.localization has not been setup. Returning blank string.`);\r\n      return \"\";\r\n    }\r\n    return IModelApp.localization.getLocalizedString(key, { ns: UiIModelComponents.localizationNamespace });\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/esm/imodel-components-react/color/AlphaSlider.d.ts

@@ -1,37 +1,37 @@
-/** @packageDocumentation
- * @module Color
- */
-import "./AlphaSlider.scss";
-import * as React from "react";
-import { CommonProps } from "@itwin/core-react";
-/** Properties for the [[AlphaSlider]] React component
- * @beta
- */
-export interface AlphaSliderProps extends React.HTMLAttributes<HTMLDivElement>, CommonProps {
-    /** true if slider is oriented horizontal, else vertical orientation is assumed */
-    isHorizontal?: boolean;
-    /** function to run when user selects color swatch */
-    onAlphaChange?: ((alpha: number) => void) | undefined;
-    /** Alpha value between 0 (transparent) and 1 (opaque) */
-    alpha: number;
-}
-/** AlphaSlider component used to set the alpha value.
- * @beta
- */
-export declare class AlphaSlider extends React.PureComponent<AlphaSliderProps> {
-    private _container;
-    private _transparencyLabel;
-    /** @internal */
-    constructor(props: AlphaSliderProps);
-    private _calculateChange;
-    /** @internal */
-    componentWillUnmount(): void;
-    private _onChange;
-    private _onMouseDown;
-    private _onKeyDown;
-    private _onMouseUp;
-    private _unbindEventListeners;
-    /** @internal */
-    render(): React.ReactNode;
-}
+/** @packageDocumentation
+ * @module Color
+ */
+import "./AlphaSlider.scss";
+import * as React from "react";
+import { CommonProps } from "@itwin/core-react";
+/** Properties for the [[AlphaSlider]] React component
+ * @beta
+ */
+export interface AlphaSliderProps extends React.HTMLAttributes<HTMLDivElement>, CommonProps {
+    /** true if slider is oriented horizontal, else vertical orientation is assumed */
+    isHorizontal?: boolean;
+    /** function to run when user selects color swatch */
+    onAlphaChange?: ((alpha: number) => void) | undefined;
+    /** Alpha value between 0 (transparent) and 1 (opaque) */
+    alpha: number;
+}
+/** AlphaSlider component used to set the alpha value.
+ * @beta
+ */
+export declare class AlphaSlider extends React.PureComponent<AlphaSliderProps> {
+    private _container;
+    private _transparencyLabel;
+    /** @internal */
+    constructor(props: AlphaSliderProps);
+    private _calculateChange;
+    /** @internal */
+    componentWillUnmount(): void;
+    private _onChange;
+    private _onMouseDown;
+    private _onKeyDown;
+    private _onMouseUp;
+    private _unbindEventListeners;
+    /** @internal */
+    render(): React.ReactNode;
+}
 //# sourceMappingURL=AlphaSlider.d.ts.map

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

@@ -1,161 +1,161 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Color
- */
-import "./AlphaSlider.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { UiIModelComponents } from "../UiIModelComponents";
-import { SpecialKey } from "@itwin/appui-abstract";
-/** AlphaSlider component used to set the alpha value.
- * @beta
- */
-export class AlphaSlider extends React.PureComponent {
-    /** @internal */
-    constructor(props) {
-        super(props);
-        this._container = null;
-        this._transparencyLabel = UiIModelComponents.translate("color.transparency");
-        this._calculateChange = (e, isHorizontal, alpha, container) => {
-            e.preventDefault();
-            const { width: containerWidth, height: containerHeight } = container.getBoundingClientRect();
-            let x = 0;
-            if ("pageX" in e) {
-                x = e.pageX;
-            }
-            else {
-                // istanbul ignore if
-                if (undefined === e.touches)
-                    return undefined;
-                x = e.touches[0].pageX;
-            }
-            // istanbul ignore if
-            if (undefined === x)
-                return undefined;
-            let y = 0;
-            if ("pageY" in e) {
-                y = e.pageY;
-            }
-            else {
-                // istanbul ignore if
-                if (undefined === e.touches)
-                    return;
-                y = e.touches[0].pageY;
-            }
-            // istanbul ignore if
-            if (undefined === y)
-                return undefined;
-            const left = x - (container.getBoundingClientRect().left + window.scrollX);
-            const top = y - (container.getBoundingClientRect().top + window.scrollY);
-            let t = 0;
-            if (!isHorizontal) {
-                // istanbul ignore next
-                if (top < 0) {
-                    t = 1;
-                }
-                else if (top > containerHeight) {
-                    t = 0;
-                }
-                else {
-                    t = 1 - (top / containerHeight);
-                }
-            }
-            else { // horizontal
-                // istanbul ignore next
-                if (left < 0) {
-                    t = 0;
-                }
-                else if (left > containerWidth) {
-                    t = 1;
-                }
-                else {
-                    t = left / containerWidth;
-                }
-            }
-            // istanbul ignore if
-            if (t < 0)
-                t = 0;
-            // istanbul ignore if
-            if (t > 1)
-                t = 1;
-            // istanbul ignore next
-            return (alpha !== t) ? t : undefined;
-        };
-        this._onChange = (e) => {
-            // istanbul ignore else
-            if (this._container && this.props.onAlphaChange) {
-                const change = this._calculateChange(e, this.props.isHorizontal ? this.props.isHorizontal : false, this.props.alpha, this._container);
-                undefined !== change && typeof this.props.onAlphaChange === "function" && this.props.onAlphaChange(change);
-            }
-        };
-        this._onMouseDown = (e) => {
-            this._onChange(e);
-            // istanbul ignore else
-            if (this._container)
-                this._container.focus();
-            window.addEventListener("mousemove", this._onChange);
-            window.addEventListener("mouseup", this._onMouseUp);
-        };
-        this._onKeyDown = (evt) => {
-            let newTransparency;
-            if (evt.key === SpecialKey.ArrowLeft || evt.key === SpecialKey.ArrowDown) {
-                newTransparency = this.props.alpha - (evt.ctrlKey ? .1 : .05);
-            }
-            else if (evt.key === SpecialKey.ArrowRight || evt.key === SpecialKey.ArrowUp) {
-                newTransparency = this.props.alpha + (evt.ctrlKey ? .1 : .05);
-            }
-            else if (evt.key === SpecialKey.PageDown) {
-                newTransparency = this.props.alpha - (evt.ctrlKey ? .5 : .25);
-            }
-            else if (evt.key === SpecialKey.PageUp) {
-                newTransparency = this.props.alpha + (evt.ctrlKey ? .5 : .25);
-            }
-            else if (evt.key === SpecialKey.Home) {
-                newTransparency = 0;
-            }
-            else {
-                // istanbul ignore else
-                if (evt.key === SpecialKey.End) {
-                    newTransparency = 1;
-                }
-            }
-            // istanbul ignore else
-            if (undefined !== newTransparency) {
-                // istanbul ignore if
-                if (newTransparency > 1)
-                    newTransparency = 1;
-                // istanbul ignore if
-                if (newTransparency < 0)
-                    newTransparency = 0;
-                // istanbul ignore else
-                if (this.props.onAlphaChange)
-                    this.props.onAlphaChange(newTransparency);
-            }
-        };
-        this._onMouseUp = () => {
-            this._unbindEventListeners();
-        };
-    }
-    /** @internal */
-    componentWillUnmount() {
-        this._unbindEventListeners();
-    }
-    _unbindEventListeners() {
-        window.removeEventListener("mousemove", this._onChange);
-        window.removeEventListener("mouseup", this._onMouseUp);
-    }
-    /** @internal */
-    render() {
-        const containerClasses = classnames(this.props.isHorizontal ? "components-alpha-container-horizontal" : "components-alpha-container-vertical", this.props.className);
-        const pointerStyle = this.props.isHorizontal ?
-            { left: `${(this.props.alpha * 100)}%` } :
-            { left: `0px`, top: `${-(this.props.alpha * 100) + 100}%` };
-        return (React.createElement("div", { className: containerClasses, style: this.props.style, "data-testid": "alpha-container" },
-            React.createElement("div", { "data-testid": "alpha-slider", role: "slider", "aria-label": this._transparencyLabel, "aria-valuemin": 0, "aria-valuemax": 1, "aria-valuenow": this.props.alpha, className: "components-alpha-slider", ref: (container) => this._container = container, onMouseDown: this._onMouseDown, onTouchMove: this._onChange, onTouchStart: this._onChange, tabIndex: 0, onKeyDown: this._onKeyDown },
-                React.createElement("div", { style: pointerStyle, className: "components-alpha-pointer", "data-testid": "alpha-pointer" }))));
-    }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Color
+ */
+import "./AlphaSlider.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { UiIModelComponents } from "../UiIModelComponents";
+import { SpecialKey } from "@itwin/appui-abstract";
+/** AlphaSlider component used to set the alpha value.
+ * @beta
+ */
+export class AlphaSlider extends React.PureComponent {
+    /** @internal */
+    constructor(props) {
+        super(props);
+        this._container = null;
+        this._transparencyLabel = UiIModelComponents.translate("color.transparency");
+        this._calculateChange = (e, isHorizontal, alpha, container) => {
+            e.preventDefault();
+            const { width: containerWidth, height: containerHeight } = container.getBoundingClientRect();
+            let x = 0;
+            if ("pageX" in e) {
+                x = e.pageX;
+            }
+            else {
+                // istanbul ignore if
+                if (undefined === e.touches)
+                    return undefined;
+                x = e.touches[0].pageX;
+            }
+            // istanbul ignore if
+            if (undefined === x)
+                return undefined;
+            let y = 0;
+            if ("pageY" in e) {
+                y = e.pageY;
+            }
+            else {
+                // istanbul ignore if
+                if (undefined === e.touches)
+                    return;
+                y = e.touches[0].pageY;
+            }
+            // istanbul ignore if
+            if (undefined === y)
+                return undefined;
+            const left = x - (container.getBoundingClientRect().left + window.scrollX);
+            const top = y - (container.getBoundingClientRect().top + window.scrollY);
+            let t = 0;
+            if (!isHorizontal) {
+                // istanbul ignore next
+                if (top < 0) {
+                    t = 1;
+                }
+                else if (top > containerHeight) {
+                    t = 0;
+                }
+                else {
+                    t = 1 - (top / containerHeight);
+                }
+            }
+            else { // horizontal
+                // istanbul ignore next
+                if (left < 0) {
+                    t = 0;
+                }
+                else if (left > containerWidth) {
+                    t = 1;
+                }
+                else {
+                    t = left / containerWidth;
+                }
+            }
+            // istanbul ignore if
+            if (t < 0)
+                t = 0;
+            // istanbul ignore if
+            if (t > 1)
+                t = 1;
+            // istanbul ignore next
+            return (alpha !== t) ? t : undefined;
+        };
+        this._onChange = (e) => {
+            // istanbul ignore else
+            if (this._container && this.props.onAlphaChange) {
+                const change = this._calculateChange(e, this.props.isHorizontal ? this.props.isHorizontal : false, this.props.alpha, this._container);
+                undefined !== change && typeof this.props.onAlphaChange === "function" && this.props.onAlphaChange(change);
+            }
+        };
+        this._onMouseDown = (e) => {
+            this._onChange(e);
+            // istanbul ignore else
+            if (this._container)
+                this._container.focus();
+            window.addEventListener("mousemove", this._onChange);
+            window.addEventListener("mouseup", this._onMouseUp);
+        };
+        this._onKeyDown = (evt) => {
+            let newTransparency;
+            if (evt.key === SpecialKey.ArrowLeft || evt.key === SpecialKey.ArrowDown) {
+                newTransparency = this.props.alpha - (evt.ctrlKey ? .1 : .05);
+            }
+            else if (evt.key === SpecialKey.ArrowRight || evt.key === SpecialKey.ArrowUp) {
+                newTransparency = this.props.alpha + (evt.ctrlKey ? .1 : .05);
+            }
+            else if (evt.key === SpecialKey.PageDown) {
+                newTransparency = this.props.alpha - (evt.ctrlKey ? .5 : .25);
+            }
+            else if (evt.key === SpecialKey.PageUp) {
+                newTransparency = this.props.alpha + (evt.ctrlKey ? .5 : .25);
+            }
+            else if (evt.key === SpecialKey.Home) {
+                newTransparency = 0;
+            }
+            else {
+                // istanbul ignore else
+                if (evt.key === SpecialKey.End) {
+                    newTransparency = 1;
+                }
+            }
+            // istanbul ignore else
+            if (undefined !== newTransparency) {
+                // istanbul ignore if
+                if (newTransparency > 1)
+                    newTransparency = 1;
+                // istanbul ignore if
+                if (newTransparency < 0)
+                    newTransparency = 0;
+                // istanbul ignore else
+                if (this.props.onAlphaChange)
+                    this.props.onAlphaChange(newTransparency);
+            }
+        };
+        this._onMouseUp = () => {
+            this._unbindEventListeners();
+        };
+    }
+    /** @internal */
+    componentWillUnmount() {
+        this._unbindEventListeners();
+    }
+    _unbindEventListeners() {
+        window.removeEventListener("mousemove", this._onChange);
+        window.removeEventListener("mouseup", this._onMouseUp);
+    }
+    /** @internal */
+    render() {
+        const containerClasses = classnames(this.props.isHorizontal ? "components-alpha-container-horizontal" : "components-alpha-container-vertical", this.props.className);
+        const pointerStyle = this.props.isHorizontal ?
+            { left: `${(this.props.alpha * 100)}%` } :
+            { left: `0px`, top: `${-(this.props.alpha * 100) + 100}%` };
+        return (React.createElement("div", { className: containerClasses, style: this.props.style, "data-testid": "alpha-container" },
+            React.createElement("div", { "data-testid": "alpha-slider", role: "slider", "aria-label": this._transparencyLabel, "aria-valuemin": 0, "aria-valuemax": 1, "aria-valuenow": this.props.alpha, className: "components-alpha-slider", ref: (container) => this._container = container, onMouseDown: this._onMouseDown, onTouchMove: this._onChange, onTouchStart: this._onChange, tabIndex: 0, onKeyDown: this._onKeyDown },
+                React.createElement("div", { style: pointerStyle, className: "components-alpha-pointer", "data-testid": "alpha-pointer" }))));
+    }
+}
 //# sourceMappingURL=AlphaSlider.js.map

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

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