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

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,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,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,aAAa,EAAE,CAAC;QAChB,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;;AA9Dc,+BAAY,GAAG,KAAK,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Common\n */\n\nimport { enablePatches } from \"immer\";\nimport { Logger } from \"@itwin/core-bentley\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { getClassName } from \"@itwin/appui-abstract\";\nimport { UiComponents } from \"@itwin/components-react\";\nimport { EmptyLocalization } from \"@itwin/core-common\";\n\n/**\n * Manages the localization service for the imodel-components-react package.\n * @public\n */\nexport class UiIModelComponents {\n  private static _initialized = false;\n\n  /**\n   * initialize UiIModelComponents.\n   */\n  public static async initialize(): Promise<void> {\n    if (UiIModelComponents._initialized) {\n      Logger.logInfo(UiIModelComponents.loggerCategory(UiIModelComponents), `UiIModelComponents.initialize already called`);\n      return;\n    }\n\n    enablePatches();\n    await IModelApp.localization?.registerNamespace(UiIModelComponents.localizationNamespace);\n\n    if (!IModelApp.localization) {\n      // it should only get here in unit test where IModelApp is not setup\n      const localization = new EmptyLocalization();\n      await localization.initialize();\n      await UiComponents.initialize(localization);\n    } else {\n      await UiComponents.initialize(IModelApp.localization);\n    }\n\n    UiIModelComponents._initialized = true;\n  }\n\n  /** Unregisters the UiIModelComponents localization namespace */\n  public static terminate() {\n    IModelApp.localization?.unregisterNamespace(UiIModelComponents.localizationNamespace);\n    UiComponents.terminate();\n    UiIModelComponents._initialized = false;\n  }\n\n  /** Determines if UiIModelComponents has been initialized */\n  public static get initialized(): boolean { return UiIModelComponents._initialized; }\n\n  /** The internationalization service namespace. */\n  public static get localizationNamespace(): string {\n    return \"UiIModelComponents\";\n  }\n\n  /** @internal */\n  public static get packageName(): string {\n    return \"imodel-components-react\";\n  }\n\n  /** Calls localization.getLocalizedStringWithNamespace with the \"UiIModelComponents\" namespace. Do NOT include the namespace in the key.\n   * @internal\n   */\n  public static translate(key: string | string[]): string {\n    if (!UiIModelComponents.initialized || /* istanbul ignore next */ !IModelApp.localization) {\n      Logger.logError(UiIModelComponents.loggerCategory(this), `translate: IModelApp.localization has not been setup. Returning blank string.`);\n      return \"\";\n    }\n    return IModelApp.localization.getLocalizedString(key, { ns: UiIModelComponents.localizationNamespace });\n  }\n\n  /** @internal */\n  public static loggerCategory(obj: any): string {\n    const className = getClassName(obj);\n    const category = UiIModelComponents.packageName + (className ? `.${className}` : \"\");\n    return category;\n  }\n\n}\n"]}
+{"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"]}

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/AlphaSlider.js.map

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

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

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