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

package/LICENSE.md

@@ -1,9 +1,9 @@
-# MIT License
-
-Copyright © 2017-2023 Bentley Systems, Incorporated. All rights reserved.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+# MIT License
+
+Copyright © 2017-2023 Bentley Systems, Incorporated. All rights reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

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

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

@@ -20,5 +20,5 @@ export interface ColorPickerDialogProps {
  * Color Picker Dialog to use as modal dialog.
  * @beta
  */
-export declare function ColorPickerDialog({ dialogTitle, color, onOkResult, onCancelResult, colorPresets, colorInputType }: ColorPickerDialogProps): JSX.Element;
+export declare function ColorPickerDialog({ dialogTitle, color, onOkResult, onCancelResult, colorPresets, colorInputType, }: ColorPickerDialogProps): JSX.Element;
 //# sourceMappingURL=ColorPickerDialog.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerDialog.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerDialog.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAOH,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAG9C;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,QAAQ,CAAC;IAChB,UAAU,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,mCAAmC;IACnC,YAAY,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC1B,6FAA6F;IAC7F,cAAc,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;CACxC;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,sBAAsB,eAqDzI"}
+{"version":3,"file":"ColorPickerDialog.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerDialog.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAOH,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAS9C;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,QAAQ,CAAC;IAChB,UAAU,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,mCAAmC;IACnC,YAAY,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC1B,6FAA6F;IAC7F,cAAc,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;CACxC;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,WAAW,EACX,KAAK,EACL,UAAU,EACV,cAAc,EACd,YAAY,EACZ,cAAc,GACf,EAAE,sBAAsB,eA0DxB"}

package/lib/cjs/imodel-components-react/color/ColorPickerDialog.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
  */
@@ -41,7 +41,7 @@ const itwinui_react_1 = require("@itwin/itwinui-react");
  * Color Picker Dialog to use as modal dialog.
  * @beta
  */
-function ColorPickerDialog({ dialogTitle, color, onOkResult, onCancelResult, colorPresets, colorInputType }) {
+function ColorPickerDialog({ dialogTitle, color, onOkResult, onCancelResult, colorPresets, colorInputType, }) {
     const [activeColor, setActiveColor] = React.useState(color);
     const dialogContainer = React.useRef(null);
     const handleOk = React.useCallback(() => {
@@ -70,10 +70,8 @@ function ColorPickerDialog({ dialogTitle, color, onOkResult, onCancelResult, col
         React.createElement(core_react_1.Dialog, { title: dialogTitle, opened: true, resizable: false, movable: true, modal: true, buttonCluster: buttonCluster, onClose: handleCancel, onEscape: handleCancel, maxWidth: 320 },
             React.createElement(itwinui_react_1.ColorPicker, { selectedColor: itwinui_react_1.ColorValue.fromTbgr(activeColor.tbgr), onChangeComplete: handleColorChanged },
                 React.createElement(itwinui_react_1.ColorBuilder, null),
-                colorInputType &&
-                    React.createElement(itwinui_react_1.ColorInputPanel, { defaultColorFormat: colorInputType }),
-                colorOptions &&
-                    React.createElement(itwinui_react_1.ColorPalette, { colors: colorOptions })))));
+                colorInputType && (React.createElement(itwinui_react_1.ColorInputPanel, { defaultColorFormat: colorInputType })),
+                colorOptions && React.createElement(itwinui_react_1.ColorPalette, { colors: colorOptions })))));
 }
 exports.ColorPickerDialog = ColorPickerDialog;
 //# sourceMappingURL=ColorPickerDialog.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerDialog.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerDialog.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,4BAA4B;AAE5B,6CAA+B;AAC/B,0DAAyD;AACzD,kDAA2C;AAC3C,oDAA8C;AAC9C,wDAA4G;AAgB5G;;;GAGG;AACH,SAAgB,iBAAiB,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAA0B;IACxI,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE3D,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACtC,UAAU,CAAC,WAAW,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC;IAC9B,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC1C,uBAAuB;QACvB,IAAI,cAAc;YAChB,cAAc,EAAE,CAAC;IACrB,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,aAAyB,EAAE,EAAE;QACzE,MAAM,WAAW,GAAG,sBAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC,CAAC;QAC9D,cAAc,CAAC,WAAW,CAAC,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC;QACxC,EAAE,IAAI,EAAE,iCAAgB,CAAC,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAChD,EAAE,IAAI,EAAE,iCAAgB,CAAC,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE;KACzD,EAAE,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE7B,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACtC,IAAI,YAAY,EAAE;YAChB,OAAO,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,0BAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;SACjE;QACD,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,OAAO,CACL,6BAAK,GAAG,EAAE,eAAe;QACvB,oBAAC,mBAAM,IACL,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,IAAI,EACZ,SAAS,EAAE,KAAK,EAChB,OAAO,EAAE,IAAI,EACb,KAAK,EAAE,IAAI,EACX,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,GAAG;YAEb,oBAAC,2BAAW,IAAC,aAAa,EAAE,0BAAU,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,gBAAgB,EAAE,kBAAkB;gBACrG,oBAAC,4BAAY,OAAG;gBACf,cAAc;oBACb,oBAAC,+BAAe,IAAC,kBAAkB,EAAE,cAAc,GAAI;gBACxD,YAAY;oBACX,oBAAC,4BAAY,IAAC,MAAM,EAAE,YAAY,GAAI,CAC5B,CACP,CACJ,CACR,CAAC;AACJ,CAAC;AArDD,8CAqDC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Color\n */\n\n// cSpell:ignore colorpicker\n\nimport * as React from \"react\";\nimport { DialogButtonType } from \"@itwin/appui-abstract\";\nimport { Dialog } from \"@itwin/core-react\";\nimport { ColorDef } from \"@itwin/core-common\";\nimport { ColorBuilder, ColorInputPanel, ColorPalette, ColorPicker, ColorValue } from \"@itwin/itwinui-react\";\n\n/** Properties for the [[ColorPickerDialog]] React component\n * @beta\n */\nexport interface ColorPickerDialogProps {\n  dialogTitle: string;\n  color: ColorDef;\n  onOkResult: (selectedColor: ColorDef) => void;\n  onCancelResult: () => void;\n  /** displayed in rows of 9 items */\n  colorPresets?: ColorDef[];\n  /** If set show either HSL, RGB, or HEX input values. If undefined no input value is shown */\n  colorInputType?: \"hsl\" | \"rgb\" | \"hex\";\n}\n\n/**\n * Color Picker Dialog to use as modal dialog.\n * @beta\n */\nexport function ColorPickerDialog({ dialogTitle, color, onOkResult, onCancelResult, colorPresets, colorInputType }: ColorPickerDialogProps) {\n  const [activeColor, setActiveColor] = React.useState(color);\n  const dialogContainer = React.useRef<HTMLDivElement>(null);\n\n  const handleOk = React.useCallback(() => {\n    onOkResult(activeColor);\n  }, [onOkResult, activeColor]);\n  const handleCancel = React.useCallback(() => {\n    // istanbul ignore else\n    if (onCancelResult)\n      onCancelResult();\n  }, [onCancelResult]);\n\n  const handleColorChanged = React.useCallback((newColorValue: ColorValue) => {\n    const newColorDef = ColorDef.fromTbgr(newColorValue.toTbgr());\n    setActiveColor(newColorDef);\n  }, []);\n\n  const buttonCluster = React.useMemo(() => [\n    { type: DialogButtonType.OK, onClick: handleOk },\n    { type: DialogButtonType.Cancel, onClick: handleCancel },\n  ], [handleCancel, handleOk]);\n\n  const colorOptions = React.useMemo(() => {\n    if (colorPresets) {\n      return colorPresets.map((def) => ColorValue.fromTbgr(def.tbgr));\n    }\n    return undefined;\n  }, [colorPresets]);\n\n  return (\n    <div ref={dialogContainer}>\n      <Dialog\n        title={dialogTitle}\n        opened={true}\n        resizable={false}\n        movable={true}\n        modal={true}\n        buttonCluster={buttonCluster}\n        onClose={handleCancel}\n        onEscape={handleCancel}\n        maxWidth={320}\n      >\n        <ColorPicker selectedColor={ColorValue.fromTbgr(activeColor.tbgr)} onChangeComplete={handleColorChanged} >\n          <ColorBuilder />\n          {colorInputType &&\n            <ColorInputPanel defaultColorFormat={colorInputType} />}\n          {colorOptions &&\n            <ColorPalette colors={colorOptions} />}\n        </ColorPicker>\n      </Dialog>\n    </div >\n  );\n}\n"]}
+{"version":3,"file":"ColorPickerDialog.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerDialog.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,4BAA4B;AAE5B,6CAA+B;AAC/B,0DAAyD;AACzD,kDAA2C;AAC3C,oDAA8C;AAC9C,wDAM8B;AAgB9B;;;GAGG;AACH,SAAgB,iBAAiB,CAAC,EAChC,WAAW,EACX,KAAK,EACL,UAAU,EACV,cAAc,EACd,YAAY,EACZ,cAAc,GACS;IACvB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE3D,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACtC,UAAU,CAAC,WAAW,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC;IAC9B,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC1C,uBAAuB;QACvB,IAAI,cAAc;YAAE,cAAc,EAAE,CAAC;IACvC,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,aAAyB,EAAE,EAAE;QACzE,MAAM,WAAW,GAAG,sBAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC,CAAC;QAC9D,cAAc,CAAC,WAAW,CAAC,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CACjC,GAAG,EAAE,CAAC;QACJ,EAAE,IAAI,EAAE,iCAAgB,CAAC,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAChD,EAAE,IAAI,EAAE,iCAAgB,CAAC,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE;KACzD,EACD,CAAC,YAAY,EAAE,QAAQ,CAAC,CACzB,CAAC;IAEF,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACtC,IAAI,YAAY,EAAE;YAChB,OAAO,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,0BAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;SACjE;QACD,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,OAAO,CACL,6BAAK,GAAG,EAAE,eAAe;QACvB,oBAAC,mBAAM,IACL,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,IAAI,EACZ,SAAS,EAAE,KAAK,EAChB,OAAO,EAAE,IAAI,EACb,KAAK,EAAE,IAAI,EACX,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,GAAG;YAEb,oBAAC,2BAAW,IACV,aAAa,EAAE,0BAAU,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,EACpD,gBAAgB,EAAE,kBAAkB;gBAEpC,oBAAC,4BAAY,OAAG;gBACf,cAAc,IAAI,CACjB,oBAAC,+BAAe,IAAC,kBAAkB,EAAE,cAAc,GAAI,CACxD;gBACA,YAAY,IAAI,oBAAC,4BAAY,IAAC,MAAM,EAAE,YAAY,GAAI,CAC3C,CACP,CACL,CACP,CAAC;AACJ,CAAC;AAjED,8CAiEC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Color\n */\n\n// cSpell:ignore colorpicker\n\nimport * as React from \"react\";\nimport { DialogButtonType } from \"@itwin/appui-abstract\";\nimport { Dialog } from \"@itwin/core-react\";\nimport { ColorDef } from \"@itwin/core-common\";\nimport {\n  ColorBuilder,\n  ColorInputPanel,\n  ColorPalette,\n  ColorPicker,\n  ColorValue,\n} from \"@itwin/itwinui-react\";\n\n/** Properties for the [[ColorPickerDialog]] React component\n * @beta\n */\nexport interface ColorPickerDialogProps {\n  dialogTitle: string;\n  color: ColorDef;\n  onOkResult: (selectedColor: ColorDef) => void;\n  onCancelResult: () => void;\n  /** displayed in rows of 9 items */\n  colorPresets?: ColorDef[];\n  /** If set show either HSL, RGB, or HEX input values. If undefined no input value is shown */\n  colorInputType?: \"hsl\" | \"rgb\" | \"hex\";\n}\n\n/**\n * Color Picker Dialog to use as modal dialog.\n * @beta\n */\nexport function ColorPickerDialog({\n  dialogTitle,\n  color,\n  onOkResult,\n  onCancelResult,\n  colorPresets,\n  colorInputType,\n}: ColorPickerDialogProps) {\n  const [activeColor, setActiveColor] = React.useState(color);\n  const dialogContainer = React.useRef<HTMLDivElement>(null);\n\n  const handleOk = React.useCallback(() => {\n    onOkResult(activeColor);\n  }, [onOkResult, activeColor]);\n  const handleCancel = React.useCallback(() => {\n    // istanbul ignore else\n    if (onCancelResult) onCancelResult();\n  }, [onCancelResult]);\n\n  const handleColorChanged = React.useCallback((newColorValue: ColorValue) => {\n    const newColorDef = ColorDef.fromTbgr(newColorValue.toTbgr());\n    setActiveColor(newColorDef);\n  }, []);\n\n  const buttonCluster = React.useMemo(\n    () => [\n      { type: DialogButtonType.OK, onClick: handleOk },\n      { type: DialogButtonType.Cancel, onClick: handleCancel },\n    ],\n    [handleCancel, handleOk]\n  );\n\n  const colorOptions = React.useMemo(() => {\n    if (colorPresets) {\n      return colorPresets.map((def) => ColorValue.fromTbgr(def.tbgr));\n    }\n    return undefined;\n  }, [colorPresets]);\n\n  return (\n    <div ref={dialogContainer}>\n      <Dialog\n        title={dialogTitle}\n        opened={true}\n        resizable={false}\n        movable={true}\n        modal={true}\n        buttonCluster={buttonCluster}\n        onClose={handleCancel}\n        onEscape={handleCancel}\n        maxWidth={320}\n      >\n        <ColorPicker\n          selectedColor={ColorValue.fromTbgr(activeColor.tbgr)}\n          onChangeComplete={handleColorChanged}\n        >\n          <ColorBuilder />\n          {colorInputType && (\n            <ColorInputPanel defaultColorFormat={colorInputType} />\n          )}\n          {colorOptions && <ColorPalette colors={colorOptions} />}\n        </ColorPicker>\n      </Dialog>\n    </div>\n  );\n}\n"]}

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

@@ -41,5 +41,5 @@ export interface ColorPickerPopupProps extends React.ButtonHTMLAttributes<HTMLBu
  * @note Using forwardRef so the ColorEditor (Type Editor) can access the ref of the button element inside this component.
  * @public
  */
-export declare const ColorPickerPopup: (props: ColorPickerPopupProps) => JSX.Element | null;
+export declare const ColorPickerPopup: (props: ColorPickerPopupProps) => React.ReactElement | null;
 //# sourceMappingURL=ColorPickerPopup.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerPopup.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPopup.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAIH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAe,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAC,MAAM,mBAAmB,CAAC;AAIpD,OAAO,yBAAyB,CAAC;AAKjC;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW;IACvG,oBAAoB;IACpB,YAAY,EAAE,QAAQ,CAAC;IACvB;uCACmC;IACnC,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,uDAAuD;IACvD,aAAa,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC3D,gDAAgD;IAChD,OAAO,CAAC,EAAE,CAAC,CAAC,UAAU,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACvD,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC,gEAAgE;IAChE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,8CAA8C;IAC9C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,+BAA+B;IAC/B,cAAc,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;CACxC;AAiID;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,GAAG,CAAC,OAAO,GAAG,IAAiC,CAAC"}
+{"version":3,"file":"ColorPickerPopup.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPopup.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAIH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAe,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAUrD,OAAO,yBAAyB,CAAC;AASjC;;GAEG;AACH,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,WAAW;IACb,oBAAoB;IACpB,YAAY,EAAE,QAAQ,CAAC;IACvB;uCACmC;IACnC,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,uDAAuD;IACvD,aAAa,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC3D,gDAAgD;IAChD,OAAO,CAAC,EAAE,CAAC,CAAC,UAAU,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACvD,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC,gEAAgE;IAChE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,8CAA8C;IAC9C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,+BAA+B;IAC/B,cAAc,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;CACxC;AAmKD;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,EAAE,CAC7B,KAAK,EAAE,qBAAqB,KACzB,KAAK,CAAC,YAAY,GAAG,IAAiC,CAAC"}