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

package/README.md

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

package/lib/cjs/imodel-components-react/UiIModelComponents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UiIModelComponents.d.ts","sourceRoot":"","sources":["../../../src/imodel-components-react/UiIModelComponents.ts"],"names":[],"mappings":"AAIA;;GAEG;AAQH;;;GAGG;AACH,qBAAa,kBAAkB;IAC7B,OAAO,CAAC,MAAM,CAAC,YAAY,CAAS;IAEpC;;OAEG;WACiB,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IAoB/C,gEAAgE;WAClD,SAAS;IAMvB,4DAA4D;IAC5D,WAAkB,WAAW,IAAI,OAAO,CAA4C;IAEpF,kDAAkD;IAClD,WAAkB,qBAAqB,IAAI,MAAM,CAEhD;IAED,gBAAgB;IAChB,WAAkB,WAAW,IAAI,MAAM,CAEtC;IAED;;OAEG;WACW,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,MAAM;IAQvD,gBAAgB;WACF,cAAc,CAAC,GAAG,EAAE,GAAG,GAAG,MAAM;CAM/C"}
+{"version":3,"file":"UiIModelComponents.d.ts","sourceRoot":"","sources":["../../../src/imodel-components-react/UiIModelComponents.ts"],"names":[],"mappings":"AAIA;;GAEG;AAQH;;;GAGG;AACH,qBAAa,kBAAkB;IAC7B,OAAO,CAAC,MAAM,CAAC,YAAY,CAAS;IAEpC;;OAEG;WACiB,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IAyB/C,gEAAgE;WAClD,SAAS;IAQvB,4DAA4D;IAC5D,WAAkB,WAAW,IAAI,OAAO,CAEvC;IAED,kDAAkD;IAClD,WAAkB,qBAAqB,IAAI,MAAM,CAEhD;IAED,gBAAgB;IAChB,WAAkB,WAAW,IAAI,MAAM,CAEtC;IAED;;OAEG;WACW,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,MAAM;IAgBvD,gBAAgB;WACF,cAAc,CAAC,GAAG,EAAE,GAAG,GAAG,MAAM;CAM/C"}

package/lib/cjs/imodel-components-react/UiIModelComponents.js

@@ -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 Common
  */
@@ -47,7 +47,9 @@ class UiIModelComponents {
         UiIModelComponents._initialized = false;
     }
     /** Determines if UiIModelComponents has been initialized */
-    static get initialized() { return UiIModelComponents._initialized; }
+    static get initialized() {
+        return UiIModelComponents._initialized;
+    }
     /** The internationalization service namespace. */
     static get localizationNamespace() {
         return "UiIModelComponents";
@@ -60,11 +62,14 @@ class UiIModelComponents {
      * @internal
      */
     static translate(key) {
-        if (!UiIModelComponents.initialized || /* istanbul ignore next */ !core_frontend_1.IModelApp.localization) {
+        if (!UiIModelComponents.initialized ||
+            /* istanbul ignore next */ !core_frontend_1.IModelApp.localization) {
             core_bentley_1.Logger.logError(UiIModelComponents.loggerCategory(this), `translate: IModelApp.localization has not been setup. Returning blank string.`);
             return "";
         }
-        return core_frontend_1.IModelApp.localization.getLocalizedString(key, { ns: UiIModelComponents.localizationNamespace });
+        return core_frontend_1.IModelApp.localization.getLocalizedString(key, {
+            ns: UiIModelComponents.localizationNamespace,
+        });
     }
     /** @internal */
     static loggerCategory(obj) {

package/lib/cjs/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,sDAA6C;AAC7C,wDAAiD;AACjD,0DAAqD;AACrD,8DAAuD;AACvD,oDAAuD;AAEvD;;;GAGG;AACH,MAAa,kBAAkB;IAG7B;;OAEG;IACI,MAAM,CAAC,KAAK,CAAC,UAAU;;QAC5B,IAAI,kBAAkB,CAAC,YAAY,EAAE;YACnC,qBAAM,CAAC,OAAO,CAAC,kBAAkB,CAAC,cAAc,CAAC,kBAAkB,CAAC,EAAE,8CAA8C,CAAC,CAAC;YACtH,OAAO;SACR;QAED,MAAM,CAAA,MAAA,yBAAS,CAAC,YAAY,0CAAE,iBAAiB,CAAC,kBAAkB,CAAC,qBAAqB,CAAC,CAAA,CAAC;QAE1F,IAAI,CAAC,yBAAS,CAAC,YAAY,EAAE;YAC3B,oEAAoE;YACpE,MAAM,YAAY,GAAG,IAAI,+BAAiB,EAAE,CAAC;YAC7C,MAAM,YAAY,CAAC,UAAU,EAAE,CAAC;YAChC,MAAM,+BAAY,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;SAC7C;aAAM;YACL,MAAM,+BAAY,CAAC,UAAU,CAAC,yBAAS,CAAC,YAAY,CAAC,CAAC;SACvD;QAED,kBAAkB,CAAC,YAAY,GAAG,IAAI,CAAC;IACzC,CAAC;IAED,gEAAgE;IACzD,MAAM,CAAC,SAAS;;QACrB,MAAA,yBAAS,CAAC,YAAY,0CAAE,mBAAmB,CAAC,kBAAkB,CAAC,qBAAqB,CAAC,CAAC;QACtF,+BAAY,CAAC,SAAS,EAAE,CAAC;QACzB,kBAAkB,CAAC,YAAY,GAAG,KAAK,CAAC;IAC1C,CAAC;IAED,4DAA4D;IACrD,MAAM,KAAK,WAAW,KAAc,OAAO,kBAAkB,CAAC,YAAY,CAAC,CAAC,CAAC;IAEpF,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,yBAAS,CAAC,YAAY,EAAE;YACzF,qBAAM,CAAC,QAAQ,CAAC,kBAAkB,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,+EAA+E,CAAC,CAAC;YAC1I,OAAO,EAAE,CAAC;SACX;QACD,OAAO,yBAAS,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,IAAA,6BAAY,EAAC,GAAG,CAAC,CAAC;QACpC,MAAM,QAAQ,GAAG,kBAAkB,CAAC,WAAW,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QACrF,OAAO,QAAQ,CAAC;IAClB,CAAC;;AA7Dc,+BAAY,GAAG,KAAK,CAAC;AADzB,gDAAkB","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;;;gGAGgG;AAChG;;GAEG;;;AAEH,sDAA6C;AAC7C,wDAAiD;AACjD,0DAAqD;AACrD,8DAAuD;AACvD,oDAAuD;AAEvD;;;GAGG;AACH,MAAa,kBAAkB;IAG7B;;OAEG;IACI,MAAM,CAAC,KAAK,CAAC,UAAU;;QAC5B,IAAI,kBAAkB,CAAC,YAAY,EAAE;YACnC,qBAAM,CAAC,OAAO,CACZ,kBAAkB,CAAC,cAAc,CAAC,kBAAkB,CAAC,EACrD,8CAA8C,CAC/C,CAAC;YACF,OAAO;SACR;QAED,MAAM,CAAA,MAAA,yBAAS,CAAC,YAAY,0CAAE,iBAAiB,CAC7C,kBAAkB,CAAC,qBAAqB,CACzC,CAAA,CAAC;QAEF,IAAI,CAAC,yBAAS,CAAC,YAAY,EAAE;YAC3B,oEAAoE;YACpE,MAAM,YAAY,GAAG,IAAI,+BAAiB,EAAE,CAAC;YAC7C,MAAM,YAAY,CAAC,UAAU,EAAE,CAAC;YAChC,MAAM,+BAAY,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;SAC7C;aAAM;YACL,MAAM,+BAAY,CAAC,UAAU,CAAC,yBAAS,CAAC,YAAY,CAAC,CAAC;SACvD;QAED,kBAAkB,CAAC,YAAY,GAAG,IAAI,CAAC;IACzC,CAAC;IAED,gEAAgE;IACzD,MAAM,CAAC,SAAS;;QACrB,MAAA,yBAAS,CAAC,YAAY,0CAAE,mBAAmB,CACzC,kBAAkB,CAAC,qBAAqB,CACzC,CAAC;QACF,+BAAY,CAAC,SAAS,EAAE,CAAC;QACzB,kBAAkB,CAAC,YAAY,GAAG,KAAK,CAAC;IAC1C,CAAC;IAED,4DAA4D;IACrD,MAAM,KAAK,WAAW;QAC3B,OAAO,kBAAkB,CAAC,YAAY,CAAC;IACzC,CAAC;IAED,kDAAkD;IAC3C,MAAM,KAAK,qBAAqB;QACrC,OAAO,oBAAoB,CAAC;IAC9B,CAAC;IAED,gBAAgB;IACT,MAAM,KAAK,WAAW;QAC3B,OAAO,yBAAyB,CAAC;IACnC,CAAC;IAED;;OAEG;IACI,MAAM,CAAC,SAAS,CAAC,GAAsB;QAC5C,IACE,CAAC,kBAAkB,CAAC,WAAW;YAC/B,0BAA0B,CAAC,CAAC,yBAAS,CAAC,YAAY,EAClD;YACA,qBAAM,CAAC,QAAQ,CACb,kBAAkB,CAAC,cAAc,CAAC,IAAI,CAAC,EACvC,+EAA+E,CAChF,CAAC;YACF,OAAO,EAAE,CAAC;SACX;QACD,OAAO,yBAAS,CAAC,YAAY,CAAC,kBAAkB,CAAC,GAAG,EAAE;YACpD,EAAE,EAAE,kBAAkB,CAAC,qBAAqB;SAC7C,CAAC,CAAC;IACL,CAAC;IAED,gBAAgB;IACT,MAAM,CAAC,cAAc,CAAC,GAAQ;QACnC,MAAM,SAAS,GAAG,IAAA,6BAAY,EAAC,GAAG,CAAC,CAAC;QACpC,MAAM,QAAQ,GACZ,kBAAkB,CAAC,WAAW,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QACtE,OAAO,QAAQ,CAAC;IAClB,CAAC;;AA/Ec,+BAAY,GAAG,KAAK,CAAC;AADzB,gDAAkB","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 { 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(\n        UiIModelComponents.loggerCategory(UiIModelComponents),\n        `UiIModelComponents.initialize already called`\n      );\n      return;\n    }\n\n    await IModelApp.localization?.registerNamespace(\n      UiIModelComponents.localizationNamespace\n    );\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(\n      UiIModelComponents.localizationNamespace\n    );\n    UiComponents.terminate();\n    UiIModelComponents._initialized = false;\n  }\n\n  /** Determines if UiIModelComponents has been initialized */\n  public static get initialized(): boolean {\n    return UiIModelComponents._initialized;\n  }\n\n  /** The internationalization service namespace. */\n  public static get localizationNamespace(): string {\n    return \"UiIModelComponents\";\n  }\n\n  /** @internal */\n  public static get packageName(): string {\n    return \"imodel-components-react\";\n  }\n\n  /** Calls localization.getLocalizedStringWithNamespace with the \"UiIModelComponents\" namespace. Do NOT include the namespace in the key.\n   * @internal\n   */\n  public static translate(key: string | string[]): string {\n    if (\n      !UiIModelComponents.initialized ||\n      /* istanbul ignore next */ !IModelApp.localization\n    ) {\n      Logger.logError(\n        UiIModelComponents.loggerCategory(this),\n        `translate: IModelApp.localization has not been setup. Returning blank string.`\n      );\n      return \"\";\n    }\n    return IModelApp.localization.getLocalizedString(key, {\n      ns: UiIModelComponents.localizationNamespace,\n    });\n  }\n\n  /** @internal */\n  public static loggerCategory(obj: any): string {\n    const className = getClassName(obj);\n    const category =\n      UiIModelComponents.packageName + (className ? `.${className}` : \"\");\n    return category;\n  }\n}\n"]}

package/lib/cjs/imodel-components-react/color/AlphaSlider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AlphaSlider.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/AlphaSlider.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIrD;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW;IACzF,kFAAkF;IAClF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qDAAqD;IACrD,aAAa,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACtD,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,qBAAa,WAAY,SAAQ,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC;IACpE,OAAO,CAAC,UAAU,CAA+B;IACjD,OAAO,CAAC,kBAAkB,CAAsD;IAEhF,gBAAgB;gBACJ,KAAK,EAAE,gBAAgB;IAInC,OAAO,CAAC,gBAAgB,CA6DtB;IAEF,gBAAgB;IACA,oBAAoB;IAIpC,OAAO,CAAC,SAAS,CAMf;IAEF,OAAO,CAAC,YAAY,CAOlB;IAEF,OAAO,CAAC,UAAU,CA6BhB;IAEF,OAAO,CAAC,UAAU,CAEhB;IAEF,OAAO,CAAC,qBAAqB;IAK7B,gBAAgB;IACA,MAAM,IAAI,KAAK,CAAC,SAAS;CA8B1C"}
+{"version":3,"file":"AlphaSlider.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/AlphaSlider.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIrD;;GAEG;AACH,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,WAAW;IACb,kFAAkF;IAClF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qDAAqD;IACrD,aAAa,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACtD,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,qBAAa,WAAY,SAAQ,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC;IACpE,OAAO,CAAC,UAAU,CAA+B;IACjD,OAAO,CAAC,kBAAkB,CAC2B;IAErD,gBAAgB;gBACJ,KAAK,EAAE,gBAAgB;IAInC,OAAO,CAAC,gBAAgB,CAgEtB;IAEF,gBAAgB;IACA,oBAAoB;IAIpC,OAAO,CAAC,SAAS,CAef;IAEF,OAAO,CAAC,YAAY,CAMlB;IAEF,OAAO,CAAC,UAAU,CA+BhB;IAEF,OAAO,CAAC,UAAU,CAEhB;IAEF,OAAO,CAAC,qBAAqB;IAK7B,gBAAgB;IACA,MAAM,IAAI,KAAK,CAAC,SAAS;CA0C1C"}

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

@@ -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
  */
@@ -89,10 +89,11 @@ class AlphaSlider extends React.PureComponent {
                     t = 0;
                 }
                 else {
-                    t = 1 - (top / containerHeight);
+                    t = 1 - top / containerHeight;
                 }
             }
-            else { // horizontal
+            else {
+                // horizontal
                 // istanbul ignore next
                 if (left < 0) {
                     t = 0;
@@ -111,13 +112,15 @@ class AlphaSlider extends React.PureComponent {
             if (t > 1)
                 t = 1;
             // istanbul ignore next
-            return (alpha !== t) ? t : undefined;
+            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);
+                undefined !== change &&
+                    typeof this.props.onAlphaChange === "function" &&
+                    this.props.onAlphaChange(change);
             }
         };
         this._onMouseDown = (e) => {
@@ -131,16 +134,17 @@ class AlphaSlider extends React.PureComponent {
         this._onKeyDown = (evt) => {
             let newTransparency;
             if (evt.key === appui_abstract_1.SpecialKey.ArrowLeft || evt.key === appui_abstract_1.SpecialKey.ArrowDown) {
-                newTransparency = this.props.alpha - (evt.ctrlKey ? .1 : .05);
+                newTransparency = this.props.alpha - (evt.ctrlKey ? 0.1 : 0.05);
             }
-            else if (evt.key === appui_abstract_1.SpecialKey.ArrowRight || evt.key === appui_abstract_1.SpecialKey.ArrowUp) {
-                newTransparency = this.props.alpha + (evt.ctrlKey ? .1 : .05);
+            else if (evt.key === appui_abstract_1.SpecialKey.ArrowRight ||
+                evt.key === appui_abstract_1.SpecialKey.ArrowUp) {
+                newTransparency = this.props.alpha + (evt.ctrlKey ? 0.1 : 0.05);
             }
             else if (evt.key === appui_abstract_1.SpecialKey.PageDown) {
-                newTransparency = this.props.alpha - (evt.ctrlKey ? .5 : .25);
+                newTransparency = this.props.alpha - (evt.ctrlKey ? 0.5 : 0.25);
             }
             else if (evt.key === appui_abstract_1.SpecialKey.PageUp) {
-                newTransparency = this.props.alpha + (evt.ctrlKey ? .5 : .25);
+                newTransparency = this.props.alpha + (evt.ctrlKey ? 0.5 : 0.25);
             }
             else if (evt.key === appui_abstract_1.SpecialKey.Home) {
                 newTransparency = 0;
@@ -178,12 +182,14 @@ class AlphaSlider extends React.PureComponent {
     }
     /** @internal */
     render() {
-        const containerClasses = (0, classnames_1.default)(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}%` };
+        const containerClasses = (0, classnames_1.default)(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", { "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" }))));
     }
 }

package/lib/cjs/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":["/*---------------------------------------------------------------------------------------------\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 type { 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 * @public\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 * @public\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"]}
+{"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 type { CommonProps } from \"@itwin/core-react\";\nimport { UiIModelComponents } from \"../UiIModelComponents\";\nimport { SpecialKey } from \"@itwin/appui-abstract\";\n\n/** Properties for the [[AlphaSlider]] React component\n * @public\n */\nexport interface AlphaSliderProps\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 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 * @public\n */\nexport class AlphaSlider extends React.PureComponent<AlphaSliderProps> {\n  private _container: HTMLDivElement | null = null;\n  private _transparencyLabel =\n    UiIModelComponents.translate(\"color.transparency\");\n\n  /** @internal */\n  constructor(props: AlphaSliderProps) {\n    super(props);\n  }\n\n  private _calculateChange = (\n    e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n    isHorizontal: boolean,\n    alpha: number,\n    container: HTMLDivElement\n  ): number | undefined => {\n    e.preventDefault();\n    const { width: containerWidth, height: containerHeight } =\n      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) return undefined;\n      x = e.touches[0].pageX;\n    }\n    // istanbul ignore if\n    if (undefined === x) 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) return;\n      y = e.touches[0].pageY;\n    }\n    // istanbul ignore if\n    if (undefined === y) 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 {\n      // 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 = (\n    e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>\n  ) => {\n    // istanbul ignore else\n    if (this._container && this.props.onAlphaChange) {\n      const change = this._calculateChange(\n        e,\n        this.props.isHorizontal ? this.props.isHorizontal : false,\n        this.props.alpha,\n        this._container\n      );\n      undefined !== change &&\n        typeof this.props.onAlphaChange === \"function\" &&\n        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) 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 ? 0.1 : 0.05);\n    } else if (\n      evt.key === SpecialKey.ArrowRight ||\n      evt.key === SpecialKey.ArrowUp\n    ) {\n      newTransparency = this.props.alpha + (evt.ctrlKey ? 0.1 : 0.05);\n    } else if (evt.key === SpecialKey.PageDown) {\n      newTransparency = this.props.alpha - (evt.ctrlKey ? 0.5 : 0.25);\n    } else if (evt.key === SpecialKey.PageUp) {\n      newTransparency = this.props.alpha + (evt.ctrlKey ? 0.5 : 0.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) 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\n        ? \"components-alpha-container-horizontal\"\n        : \"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\n        className={containerClasses}\n        style={this.props.style}\n        data-testid=\"alpha-container\"\n      >\n        <div\n          data-testid=\"alpha-slider\"\n          role=\"slider\"\n          aria-label={this._transparencyLabel}\n          aria-valuemin={0}\n          aria-valuemax={1}\n          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\n            style={pointerStyle}\n            className=\"components-alpha-pointer\"\n            data-testid=\"alpha-pointer\"\n          />\n        </div>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -1,63 +1,71 @@
-/*---------------------------------------------------------------------------------------------
-* 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(-0.6rem, -0.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(-0.1rem, -0.6rem);
+    }
+  }
+}

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

@@ -34,5 +34,5 @@ export interface ColorPickerProps extends React.ButtonHTMLAttributes<HTMLButtonE
  * @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;
+export declare const ColorPickerButton: (props: ColorPickerProps) => React.ReactElement | null;
 //# sourceMappingURL=ColorPickerButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerButton.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerButton.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,0BAA0B,CAAC;AAElC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAe,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE3D,OAAO,KAAK,EAAE,WAAW,EAAC,MAAM,mBAAmB,CAAC;AAqBpD;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW;IAClG,mBAAmB;IACnB,YAAY,EAAE,QAAQ,CAAC;IACvB,uBAAuB;IACvB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,qDAAqD;IACrD,WAAW,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACtD,2DAA2D;IAC3D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,wBAAwB;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gEAAgE;IAChE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAyFD;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,GAAG,CAAC,OAAO,GAAG,IAAkC,CAAC"}
+{"version":3,"file":"ColorPickerButton.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerButton.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,0BAA0B,CAAC;AAElC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAe,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE3D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AA8CrD;;GAEG;AACH,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,WAAW;IACb,mBAAmB;IACnB,YAAY,EAAE,QAAQ,CAAC;IACvB,uBAAuB;IACvB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,qDAAqD;IACrD,WAAW,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACtD,2DAA2D;IAC3D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,wBAAwB;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gEAAgE;IAChE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAmID;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,CAC9B,KAAK,EAAE,gBAAgB,KACpB,KAAK,CAAC,YAAY,GAAG,IAAkC,CAAC"}

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

@@ -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
  */
@@ -44,14 +44,16 @@ const Swatch_1 = require("./Swatch");
 const getCSSColorFromDef_1 = require("./getCSSColorFromDef");
 const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
 // cSpell:ignore colorpicker
-function ColorOptions({ handleColorPicked, options, numColumns, round, title }) {
-    const containerStyle = { gridTemplateColumns: `repeat(${numColumns}, 1fr)` };
+function ColorOptions({ handleColorPicked, options, numColumns, round, title, }) {
+    const containerStyle = {
+        gridTemplateColumns: `repeat(${numColumns}, 1fr)`,
+    };
     return (React.createElement("div", { className: "components-colorpicker-popup-container" },
         title && React.createElement("h4", null, title),
-        React.createElement("div", { "data-testid": "components-colorpicker-popup-colors", className: "components-colorpicker-popup-colors", style: containerStyle }, options.map((color, index) => React.createElement(Swatch_1.ColorSwatch, { className: "components-colorpicker-swatch", key: index, colorDef: color, onColorPick: handleColorPicked, round: round })))));
+        React.createElement("div", { "data-testid": "components-colorpicker-popup-colors", className: "components-colorpicker-popup-colors", style: containerStyle }, options.map((color, index) => (React.createElement(Swatch_1.ColorSwatch, { className: "components-colorpicker-swatch", key: index, colorDef: color, onColorPick: handleColorPicked, round: round }))))));
 }
 // Defined using following pattern (const ColorPickerButton at bottom) to ensure useful API documentation is extracted
-const ForwardRefColorPickerButton = React.forwardRef(function ForwardRefColorPickerButton({ className, colorDefs, disabled, dropDownTitle, initialColor, numColumns, onColorPick, readonly, round, showCaret, style }, ref) {
+const ForwardRefColorPickerButton = React.forwardRef(function ForwardRefColorPickerButton({ className, colorDefs, disabled, dropDownTitle, initialColor, numColumns, onColorPick, readonly, round, showCaret, style, }, ref) {
     const target = React.useRef(null);
     const refs = (0, core_react_1.useRefs)(target, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.
     const [showPopup, setShowPopup] = React.useState(false);
@@ -101,7 +103,7 @@ const ForwardRefColorPickerButton = React.forwardRef(function ForwardRefColorPic
         React.createElement("button", { "data-testid": "components-colorpicker-button", "data-value": rgbaString, onClick: togglePopup, className: buttonClassNames, style: buttonStyle, disabled: disabled, ref: refs },
             React.createElement("div", { className: "components-colorpicker-button-container" },
                 React.createElement("div", { className: "components-colorpicker-button-color-swatch", style: swatchStyle, "data-testid": showPopup ? "caret-up" : "caret-down" }),
-                showCaret && React.createElement(core_react_1.Icon, { className: "components-caret", iconSpec: showPopup ? React.createElement(itwinui_icons_react_1.SvgCaretUpSmall, null) : React.createElement(itwinui_icons_react_1.SvgCaretDownSmall, null) }))),
+                showCaret && (React.createElement(core_react_1.Icon, { className: "components-caret", iconSpec: showPopup ? React.createElement(itwinui_icons_react_1.SvgCaretUpSmall, null) : React.createElement(itwinui_icons_react_1.SvgCaretDownSmall, null) })))),
         React.createElement(core_react_1.Popup, { className: "components-colorpicker-popup", isOpen: showPopup, position: appui_abstract_1.RelativePosition.BottomLeft, onClose: closePopup, target: target.current, closeOnNestedPopupOutsideClick: true },
             React.createElement(ColorOptions, { handleColorPicked: handleColorPicked, options: colorOptions, numColumns: numColumns !== null && numColumns !== void 0 ? numColumns : 4, round: !!round, title: dropDownTitle }))));
 });

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerButton.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerButton.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Color\r\n */\r\n\r\nimport \"./ColorPickerButton.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { ColorByName, ColorDef } from \"@itwin/core-common\";\r\nimport { RelativePosition } from \"@itwin/appui-abstract\";\r\nimport type { CommonProps} from \"@itwin/core-react\";\r\nimport { Icon, Popup, useRefs } from \"@itwin/core-react\";\r\nimport { ColorSwatch } from \"./Swatch\";\r\nimport { getCSSColorFromDef } from \"./getCSSColorFromDef\";\r\nimport { SvgCaretDownSmall, SvgCaretUpSmall } from \"@itwin/itwinui-icons-react\";\r\n\r\n// cSpell:ignore colorpicker\r\n\r\nfunction ColorOptions({ handleColorPicked, options, numColumns, round, title }: { handleColorPicked: ((color: ColorDef) => void), options: ColorDef[], numColumns: number, round: boolean, title?: string }) {\r\n  const containerStyle: React.CSSProperties = { gridTemplateColumns: `repeat(${numColumns}, 1fr)` };\r\n  return (\r\n    <div className=\"components-colorpicker-popup-container\">\r\n      {title && <h4>{title}</h4>}\r\n      <div data-testid=\"components-colorpicker-popup-colors\" className=\"components-colorpicker-popup-colors\" style={containerStyle}>\r\n        {options.map((color, index) => <ColorSwatch className=\"components-colorpicker-swatch\" key={index} colorDef={color}\r\n          onColorPick={handleColorPicked} round={round} />)}\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\n/** Properties for the [[ColorPickerButton]] React component\r\n * @beta\r\n */\r\nexport interface ColorPickerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\r\n  /** Active color */\r\n  initialColor: ColorDef;\r\n  /** Available colors */\r\n  colorDefs?: ColorDef[];\r\n  /** Function to run when user selects color swatch */\r\n  onColorPick?: ((color: ColorDef) => void) | undefined;\r\n  /** Show swatches as squares unless round is set to true */\r\n  round?: boolean;\r\n  /** Disabled or not */\r\n  disabled?: boolean;\r\n  /** Readonly or not */\r\n  readonly?: boolean;\r\n  /** Title to show at top of DropDown */\r\n  dropDownTitle?: string;\r\n  /** Number of columns */\r\n  numColumns?: number;\r\n  /** Provides ability to return reference to HTMLButtonElement */\r\n  ref?: React.Ref<HTMLButtonElement>;\r\n  /** If true show up/down caret next to color  */\r\n  showCaret?: boolean;\r\n}\r\n\r\n// Defined using following pattern (const ColorPickerButton at bottom) to ensure useful API documentation is extracted\r\nconst ForwardRefColorPickerButton = React.forwardRef<HTMLButtonElement, ColorPickerProps>(\r\n  function ForwardRefColorPickerButton({ className, colorDefs, disabled, dropDownTitle, initialColor, numColumns, onColorPick, readonly, round, showCaret, style }, ref) {\r\n    const target = React.useRef<HTMLButtonElement>(null);\r\n    const refs = useRefs(target, ref);  // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.\r\n    const [showPopup, setShowPopup] = React.useState(false);\r\n    const [colorDef, setColorDef] = React.useState(initialColor);\r\n\r\n    // See if new initialColor props have changed since component mounted\r\n    React.useEffect(() => {\r\n      setColorDef(initialColor);\r\n    }, [initialColor]);\r\n\r\n    const defaultColors = React.useRef(\r\n      [\r\n        ColorDef.create(ColorByName.red),\r\n        ColorDef.create(ColorByName.orange),\r\n        ColorDef.create(ColorByName.yellow),\r\n        ColorDef.create(ColorByName.green),\r\n        ColorDef.create(ColorByName.blue),\r\n        ColorDef.create(ColorByName.indigo),\r\n        ColorDef.create(ColorByName.violet),\r\n        ColorDef.create(ColorByName.black),\r\n        ColorDef.create(ColorByName.white),\r\n        ColorDef.create(ColorByName.cyan),\r\n        ColorDef.create(ColorByName.fuchsia),\r\n        ColorDef.create(ColorByName.tan),\r\n        ColorDef.create(ColorByName.gray),\r\n        ColorDef.create(ColorByName.brown),\r\n        ColorDef.create(ColorByName.purple),\r\n        ColorDef.create(ColorByName.olive),\r\n      ]);\r\n\r\n    const closePopup = React.useCallback(() => {\r\n      setShowPopup(false);\r\n    }, []);\r\n\r\n    const togglePopup = React.useCallback(() => {\r\n      setShowPopup(!showPopup);\r\n    }, [showPopup]);\r\n\r\n    const handleColorPicked = React.useCallback((color: ColorDef) => {\r\n      closePopup();\r\n\r\n      // istanbul ignore else\r\n      if (!color.equals(colorDef)) {\r\n        setColorDef(color);\r\n        onColorPick && onColorPick(color);\r\n      }\r\n    }, [closePopup, colorDef, onColorPick]);\r\n\r\n    const rgbaString = getCSSColorFromDef(colorDef);\r\n\r\n    const buttonStyle = { ...style } as React.CSSProperties;\r\n    const swatchStyle = { backgroundColor: rgbaString } as React.CSSProperties;\r\n\r\n    const buttonClassNames = classnames(\"components-colorpicker-button\",\r\n      round && \"round\",\r\n      readonly && \"readonly\",\r\n      className,\r\n    );\r\n\r\n    const colorOptions = colorDefs && colorDefs.length ? colorDefs : defaultColors.current;\r\n    return (\r\n      <>\r\n        <button data-testid=\"components-colorpicker-button\" data-value={rgbaString} onClick={togglePopup} className={buttonClassNames}\r\n          style={buttonStyle} disabled={disabled} ref={refs} >\r\n          <div className=\"components-colorpicker-button-container\">\r\n            <div className=\"components-colorpicker-button-color-swatch\" style={swatchStyle} data-testid={showPopup ? \"caret-up\" : \"caret-down\"} />\r\n            {showCaret && <Icon className=\"components-caret\" iconSpec={showPopup ? <SvgCaretUpSmall /> : <SvgCaretDownSmall /> } />}\r\n          </div>\r\n        </button>\r\n        <Popup\r\n          className=\"components-colorpicker-popup\"\r\n          isOpen={showPopup}\r\n          position={RelativePosition.BottomLeft}\r\n          onClose={closePopup}\r\n          target={target.current}\r\n          closeOnNestedPopupOutsideClick\r\n        >\r\n          <ColorOptions handleColorPicked={handleColorPicked} options={colorOptions} numColumns={numColumns ?? 4} round={!!round} title={dropDownTitle} />\r\n        </Popup>\r\n      </>\r\n    );\r\n  }\r\n);\r\n\r\n/** ColorPickerButton component\r\n * @note Using forwardRef so the ColorEditor (Type Editor) can access the ref of the button element inside this component.\r\n * @beta\r\n */\r\nexport const ColorPickerButton: (props: ColorPickerProps) => JSX.Element | null = ForwardRefColorPickerButton;\r\n\r\n"]}
+{"version":3,"file":"ColorPickerButton.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerButton.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,oCAAkC;AAClC,4DAAoC;AACpC,6CAA+B;AAC/B,oDAA2D;AAC3D,0DAAyD;AAEzD,kDAAyD;AACzD,qCAAuC;AACvC,6DAA0D;AAC1D,oEAAgF;AAEhF,4BAA4B;AAE5B,SAAS,YAAY,CAAC,EACpB,iBAAiB,EACjB,OAAO,EACP,UAAU,EACV,KAAK,EACL,KAAK,GAON;IACC,MAAM,cAAc,GAAwB;QAC1C,mBAAmB,EAAE,UAAU,UAAU,QAAQ;KAClD,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAC,wCAAwC;QACpD,KAAK,IAAI,gCAAK,KAAK,CAAM;QAC1B,4CACc,qCAAqC,EACjD,SAAS,EAAC,qCAAqC,EAC/C,KAAK,EAAE,cAAc,IAEpB,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC7B,oBAAC,oBAAW,IACV,SAAS,EAAC,+BAA+B,EACzC,GAAG,EAAE,KAAK,EACV,QAAQ,EAAE,KAAK,EACf,WAAW,EAAE,iBAAiB,EAC9B,KAAK,EAAE,KAAK,GACZ,CACH,CAAC,CACE,CACF,CACP,CAAC;AACJ,CAAC;AA8BD,sHAAsH;AACtH,MAAM,2BAA2B,GAAG,KAAK,CAAC,UAAU,CAGlD,SAAS,2BAA2B,CACpC,EACE,SAAS,EACT,SAAS,EACT,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,UAAU,EACV,WAAW,EACX,QAAQ,EACR,KAAK,EACL,SAAS,EACT,KAAK,GACN,EACD,GAAG;IAEH,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAoB,IAAI,CAAC,CAAC;IACrD,MAAM,IAAI,GAAG,IAAA,oBAAO,EAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC,uGAAuG;IAC1I,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;IAE7D,qEAAqE;IACrE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,WAAW,CAAC,YAAY,CAAC,CAAC;IAC5B,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC;QACjC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,GAAG,CAAC;QAChC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,MAAM,CAAC;QACnC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,MAAM,CAAC;QACnC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,KAAK,CAAC;QAClC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,IAAI,CAAC;QACjC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,MAAM,CAAC;QACnC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,MAAM,CAAC;QACnC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,KAAK,CAAC;QAClC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,KAAK,CAAC;QAClC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,IAAI,CAAC;QACjC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,OAAO,CAAC;QACpC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,GAAG,CAAC;QAChC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,IAAI,CAAC;QACjC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,KAAK,CAAC;QAClC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,MAAM,CAAC;QACnC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,KAAK,CAAC;KACnC,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACxC,YAAY,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,YAAY,CAAC,CAAC,SAAS,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CACzC,CAAC,KAAe,EAAE,EAAE;QAClB,UAAU,EAAE,CAAC;QAEb,uBAAuB;QACvB,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE;YAC3B,WAAW,CAAC,KAAK,CAAC,CAAC;YACnB,WAAW,IAAI,WAAW,CAAC,KAAK,CAAC,CAAC;SACnC;IACH,CAAC,EACD,CAAC,UAAU,EAAE,QAAQ,EAAE,WAAW,CAAC,CACpC,CAAC;IAEF,MAAM,UAAU,GAAG,IAAA,uCAAkB,EAAC,QAAQ,CAAC,CAAC;IAEhD,MAAM,WAAW,GAAG,EAAE,GAAG,KAAK,EAAyB,CAAC;IACxD,MAAM,WAAW,GAAG,EAAE,eAAe,EAAE,UAAU,EAAyB,CAAC;IAE3E,MAAM,gBAAgB,GAAG,IAAA,oBAAU,EACjC,+BAA+B,EAC/B,KAAK,IAAI,OAAO,EAChB,QAAQ,IAAI,UAAU,EACtB,SAAS,CACV,CAAC;IAEF,MAAM,YAAY,GAChB,SAAS,IAAI,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC;IACpE,OAAO,CACL;QACE,+CACc,+BAA+B,gBAC/B,UAAU,EACtB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,IAAI;YAET,6BAAK,SAAS,EAAC,yCAAyC;gBACtD,6BACE,SAAS,EAAC,4CAA4C,EACtD,KAAK,EAAE,WAAW,iBACL,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,GAClD;gBACD,SAAS,IAAI,CACZ,oBAAC,iBAAI,IACH,SAAS,EAAC,kBAAkB,EAC5B,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,oBAAC,qCAAe,OAAG,CAAC,CAAC,CAAC,oBAAC,uCAAiB,OAAG,GACjE,CACH,CACG,CACC;QACT,oBAAC,kBAAK,IACJ,SAAS,EAAC,8BAA8B,EACxC,MAAM,EAAE,SAAS,EACjB,QAAQ,EAAE,iCAAgB,CAAC,UAAU,EACrC,OAAO,EAAE,UAAU,EACnB,MAAM,EAAE,MAAM,CAAC,OAAO,EACtB,8BAA8B;YAE9B,oBAAC,YAAY,IACX,iBAAiB,EAAE,iBAAiB,EACpC,OAAO,EAAE,YAAY,EACrB,UAAU,EAAE,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,CAAC,EAC3B,KAAK,EAAE,CAAC,CAAC,KAAK,EACd,KAAK,EAAE,aAAa,GACpB,CACI,CACP,CACJ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH;;;GAGG;AACU,QAAA,iBAAiB,GAEG,2BAA2B,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 Color\n */\n\nimport \"./ColorPickerButton.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { ColorByName, ColorDef } from \"@itwin/core-common\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Icon, Popup, useRefs } from \"@itwin/core-react\";\nimport { ColorSwatch } from \"./Swatch\";\nimport { getCSSColorFromDef } from \"./getCSSColorFromDef\";\nimport { SvgCaretDownSmall, SvgCaretUpSmall } from \"@itwin/itwinui-icons-react\";\n\n// cSpell:ignore colorpicker\n\nfunction ColorOptions({\n  handleColorPicked,\n  options,\n  numColumns,\n  round,\n  title,\n}: {\n  handleColorPicked: (color: ColorDef) => void;\n  options: ColorDef[];\n  numColumns: number;\n  round: boolean;\n  title?: string;\n}) {\n  const containerStyle: React.CSSProperties = {\n    gridTemplateColumns: `repeat(${numColumns}, 1fr)`,\n  };\n  return (\n    <div className=\"components-colorpicker-popup-container\">\n      {title && <h4>{title}</h4>}\n      <div\n        data-testid=\"components-colorpicker-popup-colors\"\n        className=\"components-colorpicker-popup-colors\"\n        style={containerStyle}\n      >\n        {options.map((color, index) => (\n          <ColorSwatch\n            className=\"components-colorpicker-swatch\"\n            key={index}\n            colorDef={color}\n            onColorPick={handleColorPicked}\n            round={round}\n          />\n        ))}\n      </div>\n    </div>\n  );\n}\n\n/** Properties for the [[ColorPickerButton]] React component\n * @beta\n */\nexport interface ColorPickerProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    CommonProps {\n  /** Active color */\n  initialColor: ColorDef;\n  /** Available colors */\n  colorDefs?: ColorDef[];\n  /** Function to run when user selects color swatch */\n  onColorPick?: ((color: ColorDef) => void) | undefined;\n  /** Show swatches as squares unless round is set to true */\n  round?: boolean;\n  /** Disabled or not */\n  disabled?: boolean;\n  /** Readonly or not */\n  readonly?: boolean;\n  /** Title to show at top of DropDown */\n  dropDownTitle?: string;\n  /** Number of columns */\n  numColumns?: number;\n  /** Provides ability to return reference to HTMLButtonElement */\n  ref?: React.Ref<HTMLButtonElement>;\n  /** If true show up/down caret next to color  */\n  showCaret?: boolean;\n}\n\n// Defined using following pattern (const ColorPickerButton at bottom) to ensure useful API documentation is extracted\nconst ForwardRefColorPickerButton = React.forwardRef<\n  HTMLButtonElement,\n  ColorPickerProps\n>(function ForwardRefColorPickerButton(\n  {\n    className,\n    colorDefs,\n    disabled,\n    dropDownTitle,\n    initialColor,\n    numColumns,\n    onColorPick,\n    readonly,\n    round,\n    showCaret,\n    style,\n  },\n  ref\n) {\n  const target = React.useRef<HTMLButtonElement>(null);\n  const refs = useRefs(target, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.\n  const [showPopup, setShowPopup] = React.useState(false);\n  const [colorDef, setColorDef] = React.useState(initialColor);\n\n  // See if new initialColor props have changed since component mounted\n  React.useEffect(() => {\n    setColorDef(initialColor);\n  }, [initialColor]);\n\n  const defaultColors = React.useRef([\n    ColorDef.create(ColorByName.red),\n    ColorDef.create(ColorByName.orange),\n    ColorDef.create(ColorByName.yellow),\n    ColorDef.create(ColorByName.green),\n    ColorDef.create(ColorByName.blue),\n    ColorDef.create(ColorByName.indigo),\n    ColorDef.create(ColorByName.violet),\n    ColorDef.create(ColorByName.black),\n    ColorDef.create(ColorByName.white),\n    ColorDef.create(ColorByName.cyan),\n    ColorDef.create(ColorByName.fuchsia),\n    ColorDef.create(ColorByName.tan),\n    ColorDef.create(ColorByName.gray),\n    ColorDef.create(ColorByName.brown),\n    ColorDef.create(ColorByName.purple),\n    ColorDef.create(ColorByName.olive),\n  ]);\n\n  const closePopup = React.useCallback(() => {\n    setShowPopup(false);\n  }, []);\n\n  const togglePopup = React.useCallback(() => {\n    setShowPopup(!showPopup);\n  }, [showPopup]);\n\n  const handleColorPicked = React.useCallback(\n    (color: ColorDef) => {\n      closePopup();\n\n      // istanbul ignore else\n      if (!color.equals(colorDef)) {\n        setColorDef(color);\n        onColorPick && onColorPick(color);\n      }\n    },\n    [closePopup, colorDef, onColorPick]\n  );\n\n  const rgbaString = getCSSColorFromDef(colorDef);\n\n  const buttonStyle = { ...style } as React.CSSProperties;\n  const swatchStyle = { backgroundColor: rgbaString } as React.CSSProperties;\n\n  const buttonClassNames = classnames(\n    \"components-colorpicker-button\",\n    round && \"round\",\n    readonly && \"readonly\",\n    className\n  );\n\n  const colorOptions =\n    colorDefs && colorDefs.length ? colorDefs : defaultColors.current;\n  return (\n    <>\n      <button\n        data-testid=\"components-colorpicker-button\"\n        data-value={rgbaString}\n        onClick={togglePopup}\n        className={buttonClassNames}\n        style={buttonStyle}\n        disabled={disabled}\n        ref={refs}\n      >\n        <div className=\"components-colorpicker-button-container\">\n          <div\n            className=\"components-colorpicker-button-color-swatch\"\n            style={swatchStyle}\n            data-testid={showPopup ? \"caret-up\" : \"caret-down\"}\n          />\n          {showCaret && (\n            <Icon\n              className=\"components-caret\"\n              iconSpec={showPopup ? <SvgCaretUpSmall /> : <SvgCaretDownSmall />}\n            />\n          )}\n        </div>\n      </button>\n      <Popup\n        className=\"components-colorpicker-popup\"\n        isOpen={showPopup}\n        position={RelativePosition.BottomLeft}\n        onClose={closePopup}\n        target={target.current}\n        closeOnNestedPopupOutsideClick\n      >\n        <ColorOptions\n          handleColorPicked={handleColorPicked}\n          options={colorOptions}\n          numColumns={numColumns ?? 4}\n          round={!!round}\n          title={dropDownTitle}\n        />\n      </Popup>\n    </>\n  );\n});\n\n/** ColorPickerButton component\n * @note Using forwardRef so the ColorEditor (Type Editor) can access the ref of the button element inside this component.\n * @beta\n */\nexport const ColorPickerButton: (\n  props: ColorPickerProps\n) => React.ReactElement | null = ForwardRefColorPickerButton;\n"]}