@itwin/imodel-components-react 3.0.0-dev.77 → 3.0.0-dev.81

package/lib/esm/imodel-components-react/quantityformat/misc/ScientificType.d.ts

@@ -0,0 +1,19 @@
+/** @packageDocumentation
+ * @module QuantityFormat
+ */
+/// <reference types="react" />
+import { CommonProps } from "@itwin/core-react";
+import { ScientificType } from "@itwin/core-quantity";
+/** Properties of [[ScientificTypeSelector]] component.
+ * @internal
+ */
+export interface ScientificTypeSelectorProps extends CommonProps {
+    type: ScientificType;
+    onChange: (value: ScientificType) => void;
+    disabled?: boolean;
+}
+/** Component use to set Scientific type.
+ * @internal
+ */
+export declare function ScientificTypeSelector(props: ScientificTypeSelectorProps): JSX.Element;
+//# sourceMappingURL=ScientificType.d.ts.map

package/lib/esm/imodel-components-react/quantityformat/misc/ScientificType.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScientificType.d.ts","sourceRoot":"","sources":["../../../../../src/imodel-components-react/quantityformat/misc/ScientificType.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAGH,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAGtD;;GAEG;AACH,MAAM,WAAW,2BAA4B,SAAQ,WAAW;IAC9D,IAAI,EAAE,cAAc,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,eAcxE"}

package/lib/esm/imodel-components-react/quantityformat/misc/ScientificType.js

@@ -0,0 +1,26 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module QuantityFormat
+ */
+import * as React from "react";
+import { UiIModelComponents } from "../../UiIModelComponents";
+import { ScientificType } from "@itwin/core-quantity";
+import { Select } from "@itwin/itwinui-react";
+/** Component use to set Scientific type.
+ * @internal
+ */
+export function ScientificTypeSelector(props) {
+    const { type, onChange, ...otherProps } = props;
+    const formatOptions = React.useRef([
+        { value: ScientificType.Normalized, label: UiIModelComponents.translate("QuantityFormat.scientific-type.normalized") },
+        { value: ScientificType.ZeroNormalized, label: UiIModelComponents.translate("QuantityFormat.scientific-type.zero-normalized") },
+    ]);
+    const handleOnChange = React.useCallback((newValue) => {
+        onChange && onChange(newValue);
+    }, [onChange]);
+    return (React.createElement(Select, { options: formatOptions.current, value: type, onChange: handleOnChange, ...otherProps }));
+}
+//# sourceMappingURL=ScientificType.js.map

package/lib/esm/imodel-components-react/quantityformat/misc/ScientificType.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScientificType.js","sourceRoot":"","sources":["../../../../../src/imodel-components-react/quantityformat/misc/ScientificType.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAgB,MAAM,sBAAsB,CAAC;AAW5D;;GAEG;AACH,MAAM,UAAU,sBAAsB,CAAC,KAAkC;IACvE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAChD,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAiC;QACjE,EAAE,KAAK,EAAE,cAAc,CAAC,UAAU,EAAE,KAAK,EAAE,kBAAkB,CAAC,SAAS,CAAC,2CAA2C,CAAC,EAAE;QACtH,EAAE,KAAK,EAAE,cAAc,CAAC,cAAc,EAAE,KAAK,EAAE,kBAAkB,CAAC,SAAS,CAAC,gDAAgD,CAAC,EAAE;KAChI,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,QAAwB,EAAE,EAAE;QACpE,QAAQ,IAAI,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACjC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,oBAAC,MAAM,IAAC,OAAO,EAAE,aAAa,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,cAAc,KAAM,UAAU,GAAI,CAClG,CAAC;AACJ,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 QuantityFormat\n */\n\nimport * as React from \"react\";\nimport { CommonProps } from \"@itwin/core-react\";\nimport { UiIModelComponents } from \"../../UiIModelComponents\";\nimport { ScientificType } from \"@itwin/core-quantity\";\nimport { Select, SelectOption } from \"@itwin/itwinui-react\";\n\n/** Properties of [[ScientificTypeSelector]] component.\n * @internal\n */\nexport interface ScientificTypeSelectorProps extends CommonProps {\n  type: ScientificType;\n  onChange: (value: ScientificType) => void;\n  disabled?: boolean;\n}\n\n/** Component use to set Scientific type.\n * @internal\n */\nexport function ScientificTypeSelector(props: ScientificTypeSelectorProps) {\n  const { type, onChange, ...otherProps } = props;\n  const formatOptions = React.useRef<SelectOption<ScientificType>[]>([\n    { value: ScientificType.Normalized, label: UiIModelComponents.translate(\"QuantityFormat.scientific-type.normalized\") },\n    { value: ScientificType.ZeroNormalized, label: UiIModelComponents.translate(\"QuantityFormat.scientific-type.zero-normalized\") },\n  ]);\n\n  const handleOnChange = React.useCallback((newValue: ScientificType) => {\n    onChange && onChange(newValue);\n  }, [onChange]);\n\n  return (\n    <Select options={formatOptions.current} value={type} onChange={handleOnChange} {...otherProps} />\n  );\n}\n"]}

package/lib/esm/imodel-components-react/quantityformat/misc/SignOption.d.ts

@@ -0,0 +1,18 @@
+/** @packageDocumentation
+ * @module QuantityFormat
+ */
+/// <reference types="react" />
+import { CommonProps } from "@itwin/core-react";
+import { ShowSignOption } from "@itwin/core-quantity";
+/** Properties of [[SignOptionSelector]] component.
+ * @internal
+ */
+export interface SignOptionSelectorProps extends CommonProps {
+    signOption: ShowSignOption;
+    onChange: (value: ShowSignOption) => void;
+}
+/** Component use to set Sign option.
+ * @internal
+ */
+export declare function SignOptionSelector(props: SignOptionSelectorProps): JSX.Element;
+//# sourceMappingURL=SignOption.d.ts.map

package/lib/esm/imodel-components-react/quantityformat/misc/SignOption.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignOption.d.ts","sourceRoot":"","sources":["../../../../../src/imodel-components-react/quantityformat/misc/SignOption.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAGH,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAGtD;;GAEG;AACH,MAAM,WAAW,uBAAwB,SAAQ,WAAW;IAC1D,UAAU,EAAE,cAAc,CAAC;IAC3B,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;CAC3C;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,eAgBhE"}

package/lib/esm/imodel-components-react/quantityformat/misc/SignOption.js

@@ -0,0 +1,28 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module QuantityFormat
+ */
+import * as React from "react";
+import { UiIModelComponents } from "../../UiIModelComponents";
+import { ShowSignOption } from "@itwin/core-quantity";
+import { Select } from "@itwin/itwinui-react";
+/** Component use to set Sign option.
+ * @internal
+ */
+export function SignOptionSelector(props) {
+    const { signOption, onChange, ...otherProps } = props;
+    const options = React.useRef([
+        { value: ShowSignOption.NoSign, label: UiIModelComponents.translate("QuantityFormat.sign_option.noSign") },
+        { value: ShowSignOption.OnlyNegative, label: UiIModelComponents.translate("QuantityFormat.sign_option.onlyNegative") },
+        { value: ShowSignOption.SignAlways, label: UiIModelComponents.translate("QuantityFormat.sign_option.signAlways") },
+        { value: ShowSignOption.NegativeParentheses, label: UiIModelComponents.translate("QuantityFormat.sign_option.negativeParentheses") },
+    ]);
+    const handleOnChange = React.useCallback((newValue) => {
+        onChange && onChange(newValue);
+    }, [onChange]);
+    return (React.createElement(Select, { options: options.current, value: signOption, onChange: handleOnChange, ...otherProps }));
+}
+//# sourceMappingURL=SignOption.js.map

package/lib/esm/imodel-components-react/quantityformat/misc/SignOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignOption.js","sourceRoot":"","sources":["../../../../../src/imodel-components-react/quantityformat/misc/SignOption.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAgB,MAAM,sBAAsB,CAAC;AAU5D;;GAEG;AACH,MAAM,UAAU,kBAAkB,CAAC,KAA8B;IAC/D,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IACtD,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAiC;QAC3D,EAAE,KAAK,EAAE,cAAc,CAAC,MAAM,EAAE,KAAK,EAAE,kBAAkB,CAAC,SAAS,CAAC,mCAAmC,CAAC,EAAE;QAC1G,EAAE,KAAK,EAAE,cAAc,CAAC,YAAY,EAAE,KAAK,EAAE,kBAAkB,CAAC,SAAS,CAAC,yCAAyC,CAAC,EAAE;QACtH,EAAE,KAAK,EAAE,cAAc,CAAC,UAAU,EAAE,KAAK,EAAE,kBAAkB,CAAC,SAAS,CAAC,uCAAuC,CAAC,EAAE;QAClH,EAAE,KAAK,EAAE,cAAc,CAAC,mBAAmB,EAAE,KAAK,EAAE,kBAAkB,CAAC,SAAS,CAAC,gDAAgD,CAAC,EAAE;KACrI,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,QAAwB,EAAE,EAAE;QACpE,QAAQ,IAAI,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACjC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,oBAAC,MAAM,IAAC,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,KAAM,UAAU,GAAI,CAClG,CAAC;AACJ,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 QuantityFormat\n */\n\nimport * as React from \"react\";\nimport { CommonProps } from \"@itwin/core-react\";\nimport { UiIModelComponents } from \"../../UiIModelComponents\";\nimport { ShowSignOption } from \"@itwin/core-quantity\";\nimport { Select, SelectOption } from \"@itwin/itwinui-react\";\n\n/** Properties of [[SignOptionSelector]] component.\n * @internal\n */\nexport interface SignOptionSelectorProps extends CommonProps {\n  signOption: ShowSignOption;\n  onChange: (value: ShowSignOption) => void;\n}\n\n/** Component use to set Sign option.\n * @internal\n */\nexport function SignOptionSelector(props: SignOptionSelectorProps) {\n  const { signOption, onChange, ...otherProps } = props;\n  const options = React.useRef<SelectOption<ShowSignOption>[]>([\n    { value: ShowSignOption.NoSign, label: UiIModelComponents.translate(\"QuantityFormat.sign_option.noSign\") },\n    { value: ShowSignOption.OnlyNegative, label: UiIModelComponents.translate(\"QuantityFormat.sign_option.onlyNegative\") },\n    { value: ShowSignOption.SignAlways, label: UiIModelComponents.translate(\"QuantityFormat.sign_option.signAlways\") },\n    { value: ShowSignOption.NegativeParentheses, label: UiIModelComponents.translate(\"QuantityFormat.sign_option.negativeParentheses\") },\n  ]);\n\n  const handleOnChange = React.useCallback((newValue: ShowSignOption) => {\n    onChange && onChange(newValue);\n  }, [onChange]);\n\n  return (\n    <Select options={options.current} value={signOption} onChange={handleOnChange} {...otherProps} />\n  );\n}\n"]}

package/lib/esm/imodel-components-react/quantityformat/misc/StationSeparatorSelector.d.ts

@@ -0,0 +1,18 @@
+/** @packageDocumentation
+ * @module QuantityFormat
+ */
+/// <reference types="react" />
+import { CommonProps } from "@itwin/core-react";
+/** Properties of [[StationSeparatorSelector]] component.
+ * @internal
+ */
+export interface StationSeparatorSelectorProps extends CommonProps {
+    separator: string;
+    disabled: boolean;
+    onChange: (value: string) => void;
+}
+/** Component use to setStation separator.
+ * @internal
+ */
+export declare function StationSeparatorSelector(props: StationSeparatorSelectorProps): JSX.Element;
+//# sourceMappingURL=StationSeparatorSelector.d.ts.map

package/lib/esm/imodel-components-react/quantityformat/misc/StationSeparatorSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StationSeparatorSelector.d.ts","sourceRoot":"","sources":["../../../../../src/imodel-components-react/quantityformat/misc/StationSeparatorSelector.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAGH,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIhD;;GAEG;AACH,MAAM,WAAW,6BAA8B,SAAQ,WAAW;IAChE,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,6BAA6B,eA0B5E"}

package/lib/esm/imodel-components-react/quantityformat/misc/StationSeparatorSelector.js

@@ -0,0 +1,36 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module QuantityFormat
+ */
+import * as React from "react";
+import { UiIModelComponents } from "../../UiIModelComponents";
+import { Select } from "@itwin/itwinui-react";
+/** Component use to setStation separator.
+ * @internal
+ */
+export function StationSeparatorSelector(props) {
+    const { separator, disabled, onChange, ...otherProps } = props;
+    const uomDefaultEntries = React.useRef([
+        { value: "+", label: UiIModelComponents.translate("QuantityFormat.station_separator.plus") },
+        { value: "-", label: UiIModelComponents.translate("QuantityFormat.station_separator.minus") },
+        { value: " ", label: UiIModelComponents.translate("QuantityFormat.station_separator.blank") },
+        { value: "^", label: UiIModelComponents.translate("QuantityFormat.station_separator.caret") },
+    ]);
+    const handleOnChange = React.useCallback((newValue) => {
+        onChange && onChange(newValue);
+    }, [onChange]);
+    const separatorOptions = React.useMemo(() => {
+        const completeListOfEntries = [];
+        // istanbul ignore next (only used if format already has a character that does not match standard options)
+        if (undefined === uomDefaultEntries.current.find((option) => option.value === separator)) {
+            completeListOfEntries.push({ value: separator, label: separator });
+        }
+        completeListOfEntries.push(...uomDefaultEntries.current);
+        return completeListOfEntries;
+    }, [separator]);
+    return (React.createElement(Select, { options: separatorOptions, disabled: disabled, value: separator, onChange: handleOnChange, ...otherProps }));
+}
+//# sourceMappingURL=StationSeparatorSelector.js.map

package/lib/esm/imodel-components-react/quantityformat/misc/StationSeparatorSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StationSeparatorSelector.js","sourceRoot":"","sources":["../../../../../src/imodel-components-react/quantityformat/misc/StationSeparatorSelector.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAgB,MAAM,sBAAsB,CAAC;AAW5D;;GAEG;AACH,MAAM,UAAU,wBAAwB,CAAC,KAAoC;IAC3E,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAC/D,MAAM,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAyB;QAC7D,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,kBAAkB,CAAC,SAAS,CAAC,uCAAuC,CAAC,EAAE;QAC5F,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,kBAAkB,CAAC,SAAS,CAAC,wCAAwC,CAAC,EAAE;QAC7F,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,kBAAkB,CAAC,SAAS,CAAC,wCAAwC,CAAC,EAAE;QAC7F,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,kBAAkB,CAAC,SAAS,CAAC,wCAAwC,CAAC,EAAE;KAC9F,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,QAAgB,EAAE,EAAE;QAC5D,QAAQ,IAAI,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACjC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC1C,MAAM,qBAAqB,GAA2B,EAAE,CAAC;QACzD,0GAA0G;QAC1G,IAAI,SAAS,KAAK,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,SAAS,CAAC,EAAE;YACxF,qBAAqB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;SACpE;QACD,qBAAqB,CAAC,IAAI,CAAC,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;QACzD,OAAO,qBAAqB,CAAC;IAC/B,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,CACL,oBAAC,MAAM,IAAC,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,cAAc,KAAM,UAAU,GAAI,CACtH,CAAC;AACJ,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 QuantityFormat\n */\n\nimport * as React from \"react\";\nimport { CommonProps } from \"@itwin/core-react\";\nimport { UiIModelComponents } from \"../../UiIModelComponents\";\nimport { Select, SelectOption } from \"@itwin/itwinui-react\";\n\n/** Properties of [[StationSeparatorSelector]] component.\n * @internal\n */\nexport interface StationSeparatorSelectorProps extends CommonProps {\n  separator: string;\n  disabled: boolean;\n  onChange: (value: string) => void;\n}\n\n/** Component use to setStation separator.\n * @internal\n */\nexport function StationSeparatorSelector(props: StationSeparatorSelectorProps) {\n  const { separator, disabled, onChange, ...otherProps } = props;\n  const uomDefaultEntries = React.useRef<SelectOption<string>[]>([\n    { value: \"+\", label: UiIModelComponents.translate(\"QuantityFormat.station_separator.plus\") },\n    { value: \"-\", label: UiIModelComponents.translate(\"QuantityFormat.station_separator.minus\") },\n    { value: \" \", label: UiIModelComponents.translate(\"QuantityFormat.station_separator.blank\") },\n    { value: \"^\", label: UiIModelComponents.translate(\"QuantityFormat.station_separator.caret\") },\n  ]);\n\n  const handleOnChange = React.useCallback((newValue: string) => {\n    onChange && onChange(newValue);\n  }, [onChange]);\n\n  const separatorOptions = React.useMemo(() => {\n    const completeListOfEntries: SelectOption<string>[] = [];\n    // istanbul ignore next (only used if format already has a character that does not match standard options)\n    if (undefined === uomDefaultEntries.current.find((option) => option.value === separator)) {\n      completeListOfEntries.push({ value: separator, label: separator });\n    }\n    completeListOfEntries.push(...uomDefaultEntries.current);\n    return completeListOfEntries;\n  }, [separator]);\n\n  return (\n    <Select options={separatorOptions} disabled={disabled} value={separator} onChange={handleOnChange} {...otherProps} />\n  );\n}\n"]}

package/lib/esm/imodel-components-react/quantityformat/misc/StationSizeSelector.d.ts

@@ -0,0 +1,18 @@
+/** @packageDocumentation
+ * @module QuantityFormat
+ */
+/// <reference types="react" />
+import { CommonProps } from "@itwin/core-react";
+/** Properties of [[StationSizeSelector]] component.
+ * @internal
+ */
+export interface StationSizeSelectorProps extends CommonProps {
+    value: number;
+    disabled: boolean;
+    onChange: (value: number) => void;
+}
+/** Component use to set Station size (number of digits from right until '+').
+ * @internal
+ */
+export declare function StationSizeSelector(props: StationSizeSelectorProps): JSX.Element;
+//# sourceMappingURL=StationSizeSelector.d.ts.map

package/lib/esm/imodel-components-react/quantityformat/misc/StationSizeSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StationSizeSelector.d.ts","sourceRoot":"","sources":["../../../../../src/imodel-components-react/quantityformat/misc/StationSizeSelector.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAGH,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIhD;;GAEG;AACH,MAAM,WAAW,wBAAyB,SAAQ,WAAW;IAC3D,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,eAclE"}

package/lib/esm/imodel-components-react/quantityformat/misc/StationSizeSelector.js

@@ -0,0 +1,25 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module QuantityFormat
+ */
+import * as React from "react";
+import { UiIModelComponents } from "../../UiIModelComponents";
+import { Select } from "@itwin/itwinui-react";
+/** Component use to set Station size (number of digits from right until '+').
+ * @internal
+ */
+export function StationSizeSelector(props) {
+    const { value, disabled, onChange, ...otherProps } = props;
+    const separatorOptions = React.useRef([
+        { value: 2, label: UiIModelComponents.translate("QuantityFormat.station_size.two") },
+        { value: 3, label: UiIModelComponents.translate("QuantityFormat.station_size.three") },
+    ]);
+    const handleOnChange = React.useCallback((newValue) => {
+        onChange && onChange(newValue);
+    }, [onChange]);
+    return (React.createElement(Select, { options: separatorOptions.current, disabled: disabled, value: value, onChange: handleOnChange, ...otherProps }));
+}
+//# sourceMappingURL=StationSizeSelector.js.map

package/lib/esm/imodel-components-react/quantityformat/misc/StationSizeSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StationSizeSelector.js","sourceRoot":"","sources":["../../../../../src/imodel-components-react/quantityformat/misc/StationSizeSelector.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAgB,MAAM,sBAAsB,CAAC;AAW5D;;GAEG;AACH,MAAM,UAAU,mBAAmB,CAAC,KAA+B;IACjE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAC3D,MAAM,gBAAgB,GAAG,KAAK,CAAC,MAAM,CAAyB;QAC5D,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,SAAS,CAAC,iCAAiC,CAAC,EAAE;QACpF,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,SAAS,CAAC,mCAAmC,CAAC,EAAE;KACvF,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,QAAgB,EAAE,EAAE;QAC5D,QAAQ,IAAI,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACjC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,oBAAC,MAAM,IAAC,OAAO,EAAE,gBAAgB,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,cAAc,KAAM,UAAU,GAAI,CAC1H,CAAC;AACJ,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 QuantityFormat\n */\n\nimport * as React from \"react\";\nimport { CommonProps } from \"@itwin/core-react\";\nimport { UiIModelComponents } from \"../../UiIModelComponents\";\nimport { Select, SelectOption } from \"@itwin/itwinui-react\";\n\n/** Properties of [[StationSizeSelector]] component.\n * @internal\n */\nexport interface StationSizeSelectorProps extends CommonProps {\n  value: number;\n  disabled: boolean;\n  onChange: (value: number) => void;\n}\n\n/** Component use to set Station size (number of digits from right until '+').\n * @internal\n */\nexport function StationSizeSelector(props: StationSizeSelectorProps) {\n  const { value, disabled, onChange, ...otherProps } = props;\n  const separatorOptions = React.useRef<SelectOption<number>[]>([\n    { value: 2, label: UiIModelComponents.translate(\"QuantityFormat.station_size.two\") },\n    { value: 3, label: UiIModelComponents.translate(\"QuantityFormat.station_size.three\") },\n  ]);\n\n  const handleOnChange = React.useCallback((newValue: number) => {\n    onChange && onChange(newValue);\n  }, [onChange]);\n\n  return (\n    <Select options={separatorOptions.current} disabled={disabled} value={value} onChange={handleOnChange} {...otherProps} />\n  );\n}\n"]}

package/lib/esm/imodel-components-react/quantityformat/misc/ThousandsSelector.d.ts

@@ -0,0 +1,18 @@
+/** @packageDocumentation
+ * @module QuantityFormat
+ */
+/// <reference types="react" />
+import { CommonProps } from "@itwin/core-react";
+/** Properties of [[ThousandsSelector]] component.
+ * @internal
+ */
+export interface ThousandsSelectorProps extends CommonProps {
+    separator: string;
+    disabled: boolean;
+    onChange: (value: string) => void;
+}
+/** Component use to set Quantity Format thousand group separator.
+ * @internal
+ */
+export declare function ThousandsSelector(props: ThousandsSelectorProps): JSX.Element;
+//# sourceMappingURL=ThousandsSelector.d.ts.map

package/lib/esm/imodel-components-react/quantityformat/misc/ThousandsSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThousandsSelector.d.ts","sourceRoot":"","sources":["../../../../../src/imodel-components-react/quantityformat/misc/ThousandsSelector.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAGH,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIhD;;GAEG;AACH,MAAM,WAAW,sBAAuB,SAAQ,WAAW;IACzD,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAwB9D"}

package/lib/esm/imodel-components-react/quantityformat/misc/ThousandsSelector.js

@@ -0,0 +1,34 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module QuantityFormat
+ */
+import * as React from "react";
+import { UiIModelComponents } from "../../UiIModelComponents";
+import { Select } from "@itwin/itwinui-react";
+/** Component use to set Quantity Format thousand group separator.
+ * @internal
+ */
+export function ThousandsSelector(props) {
+    const { separator, disabled, onChange, ...otherProps } = props;
+    const uomDefaultEntries = React.useRef([
+        { value: ",", label: UiIModelComponents.translate("QuantityFormat.thousand_separator.comma") },
+        { value: ".", label: UiIModelComponents.translate("QuantityFormat.thousand_separator.point") },
+    ]);
+    const handleOnChange = React.useCallback((newValue) => {
+        onChange && onChange(newValue);
+    }, [onChange]);
+    const separatorOptions = React.useMemo(() => {
+        const completeListOfEntries = [];
+        // istanbul ignore next (only used if format already has a character that does not match standard options)
+        if (undefined === uomDefaultEntries.current.find((option) => option.value === separator)) {
+            completeListOfEntries.push({ value: separator, label: separator });
+        }
+        completeListOfEntries.push(...uomDefaultEntries.current);
+        return completeListOfEntries;
+    }, [separator]);
+    return (React.createElement(Select, { options: separatorOptions, disabled: disabled, value: separator, onChange: handleOnChange, ...otherProps }));
+}
+//# sourceMappingURL=ThousandsSelector.js.map

package/lib/esm/imodel-components-react/quantityformat/misc/ThousandsSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThousandsSelector.js","sourceRoot":"","sources":["../../../../../src/imodel-components-react/quantityformat/misc/ThousandsSelector.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAgB,MAAM,sBAAsB,CAAC;AAW5D;;GAEG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAA6B;IAC7D,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAC/D,MAAM,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAyB;QAC7D,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,kBAAkB,CAAC,SAAS,CAAC,yCAAyC,CAAC,EAAE;QAC9F,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,kBAAkB,CAAC,SAAS,CAAC,yCAAyC,CAAC,EAAE;KAC/F,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,QAAgB,EAAE,EAAE;QAC5D,QAAQ,IAAI,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACjC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC1C,MAAM,qBAAqB,GAA2B,EAAE,CAAC;QACzD,0GAA0G;QAC1G,IAAI,SAAS,KAAK,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,SAAS,CAAC,EAAE;YACxF,qBAAqB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;SACpE;QACD,qBAAqB,CAAC,IAAI,CAAC,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;QACzD,OAAO,qBAAqB,CAAC;IAC/B,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,CACL,oBAAC,MAAM,IAAC,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,cAAc,KAAM,UAAU,GAAI,CACtH,CAAC;AACJ,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 QuantityFormat\n */\n\nimport * as React from \"react\";\nimport { CommonProps } from \"@itwin/core-react\";\nimport { UiIModelComponents } from \"../../UiIModelComponents\";\nimport { Select, SelectOption } from \"@itwin/itwinui-react\";\n\n/** Properties of [[ThousandsSelector]] component.\n * @internal\n */\nexport interface ThousandsSelectorProps extends CommonProps {\n  separator: string;\n  disabled: boolean;\n  onChange: (value: string) => void;\n}\n\n/** Component use to set Quantity Format thousand group separator.\n * @internal\n */\nexport function ThousandsSelector(props: ThousandsSelectorProps) {\n  const { separator, disabled, onChange, ...otherProps } = props;\n  const uomDefaultEntries = React.useRef<SelectOption<string>[]>([\n    { value: \",\", label: UiIModelComponents.translate(\"QuantityFormat.thousand_separator.comma\") },\n    { value: \".\", label: UiIModelComponents.translate(\"QuantityFormat.thousand_separator.point\") },\n  ]);\n\n  const handleOnChange = React.useCallback((newValue: string) => {\n    onChange && onChange(newValue);\n  }, [onChange]);\n\n  const separatorOptions = React.useMemo(() => {\n    const completeListOfEntries: SelectOption<string>[] = [];\n    // istanbul ignore next (only used if format already has a character that does not match standard options)\n    if (undefined === uomDefaultEntries.current.find((option) => option.value === separator)) {\n      completeListOfEntries.push({ value: separator, label: separator });\n    }\n    completeListOfEntries.push(...uomDefaultEntries.current);\n    return completeListOfEntries;\n  }, [separator]);\n\n  return (\n    <Select options={separatorOptions} disabled={disabled} value={separator} onChange={handleOnChange} {...otherProps} />\n  );\n}\n"]}

package/lib/esm/imodel-components-react/quantityformat/misc/ThousandsSeparator.d.ts

@@ -0,0 +1,18 @@
+/** @packageDocumentation
+ * @module QuantityFormat
+ */
+/// <reference types="react" />
+import { CommonProps } from "@itwin/core-react";
+import { FormatProps } from "@itwin/core-quantity";
+/** Properties of [[ThousandsSeparator]] component.
+ * @internal
+ */
+export interface ThousandsSeparatorProps extends CommonProps {
+    formatProps: FormatProps;
+    onChange?: (format: FormatProps) => void;
+}
+/** Component use to set Quantity Format thousand group separator.
+ * @internal
+ */
+export declare function ThousandsSeparator(props: ThousandsSeparatorProps): JSX.Element;
+//# sourceMappingURL=ThousandsSeparator.d.ts.map

package/lib/esm/imodel-components-react/quantityformat/misc/ThousandsSeparator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThousandsSeparator.d.ts","sourceRoot":"","sources":["../../../../../src/imodel-components-react/quantityformat/misc/ThousandsSeparator.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAIH,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAU,WAAW,EAAgB,MAAM,sBAAsB,CAAC;AAKzE;;GAEG;AACH,MAAM,WAAW,uBAAwB,SAAQ,WAAW;IAC1D,WAAW,EAAE,WAAW,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CAC1C;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,eA4DhE"}

package/lib/esm/imodel-components-react/quantityformat/misc/ThousandsSeparator.js

@@ -0,0 +1,70 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module QuantityFormat
+ */
+import classnames from "classnames";
+import * as React from "react";
+import { Format, FormatTraits } from "@itwin/core-quantity";
+import { Checkbox } from "@itwin/itwinui-react";
+import { ThousandsSelector } from "./ThousandsSelector";
+import { UiIModelComponents } from "../../UiIModelComponents";
+/** Component use to set Quantity Format thousand group separator.
+ * @internal
+ */
+export function ThousandsSeparator(props) {
+    var _a;
+    const { formatProps, onChange } = props;
+    const handleSetFormatProps = React.useCallback((newProps) => {
+        onChange && onChange(newProps);
+    }, [onChange]);
+    const setFormatTrait = React.useCallback((trait, setActive) => {
+        const traitStr = Format.getTraitString(trait);
+        let formatTraits = [traitStr];
+        if (setActive) { // setting trait
+            // istanbul ignore else
+            if (formatProps.formatTraits) {
+                const traits = Array.isArray(formatProps.formatTraits) ? formatProps.formatTraits : /* istanbul ignore next */ formatProps.formatTraits.split(/,|;|\|/);
+                formatTraits = [...traits, traitStr];
+            }
+        }
+        else { // clearing trait
+            // istanbul ignore else
+            if (formatProps.formatTraits) {
+                const traits = Array.isArray(formatProps.formatTraits) ? formatProps.formatTraits : /* istanbul ignore next */ formatProps.formatTraits.split(/,|;|\|/);
+                formatTraits = traits.filter((traitEntry) => traitEntry !== traitStr);
+            }
+        }
+        const newFormatProps = { ...formatProps, formatTraits };
+        handleSetFormatProps(newFormatProps);
+    }, [formatProps, handleSetFormatProps]);
+    const handleUseThousandsSeparatorChange = React.useCallback((e) => {
+        setFormatTrait(FormatTraits.Use1000Separator, e.target.checked);
+    }, [setFormatTrait]);
+    const isFormatTraitSet = React.useCallback((trait) => {
+        return Format.isFormatTraitSetInProps(formatProps, trait);
+    }, [formatProps]);
+    const handleThousandSeparatorChange = React.useCallback((thousandSeparator) => {
+        let decimalSeparator = formatProps.decimalSeparator;
+        // make sure 1000 and decimal separator do not match
+        // istanbul ignore else
+        if (isFormatTraitSet(FormatTraits.Use1000Separator)) {
+            if (thousandSeparator === ".")
+                decimalSeparator = ",";
+            else // thousandSeparator === ","
+                decimalSeparator = ".";
+        }
+        const newFormatProps = { ...formatProps, thousandSeparator, decimalSeparator };
+        handleSetFormatProps(newFormatProps);
+    }, [formatProps, isFormatTraitSet, handleSetFormatProps]);
+    const useThousandSeparatorLabel = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.useThousandSeparatorLabel"));
+    const thousandSeparatorLabel = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.thousandSeparatorLabel"));
+    return (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: "uicore-label" }, useThousandSeparatorLabel.current),
+        React.createElement(Checkbox, { "data-testid": "use-thousands-separator", checked: isFormatTraitSet(FormatTraits.Use1000Separator), onChange: handleUseThousandsSeparatorChange }),
+        React.createElement("span", { className: classnames("uicore-label", !(isFormatTraitSet(FormatTraits.Use1000Separator)) && "uicore-disabled") }, thousandSeparatorLabel.current),
+        React.createElement(ThousandsSelector, { "data-testid": "thousands-separator-selector", separator: (_a = formatProps.thousandSeparator) !== null && _a !== void 0 ? _a : ",", disabled: !isFormatTraitSet(FormatTraits.Use1000Separator), onChange: handleThousandSeparatorChange })));
+}
+//# sourceMappingURL=ThousandsSeparator.js.map

package/lib/esm/imodel-components-react/quantityformat/misc/ThousandsSeparator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThousandsSeparator.js","sourceRoot":"","sources":["../../../../../src/imodel-components-react/quantityformat/misc/ThousandsSeparator.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 QuantityFormat\n */\n\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { CommonProps } from \"@itwin/core-react\";\nimport { Format, FormatProps, FormatTraits } from \"@itwin/core-quantity\";\nimport { Checkbox } from \"@itwin/itwinui-react\";\nimport { ThousandsSelector } from \"./ThousandsSelector\";\nimport { UiIModelComponents } from \"../../UiIModelComponents\";\n\n/** Properties of [[ThousandsSeparator]] component.\n * @internal\n */\nexport interface ThousandsSeparatorProps extends CommonProps {\n  formatProps: FormatProps;\n  onChange?: (format: FormatProps) => void;\n}\n\n/** Component use to set Quantity Format thousand group separator.\n * @internal\n */\nexport function ThousandsSeparator(props: ThousandsSeparatorProps) {\n  const { formatProps, onChange } = props;\n\n  const handleSetFormatProps = React.useCallback((newProps: FormatProps) => {\n    onChange && onChange(newProps);\n  }, [onChange]);\n\n  const setFormatTrait = React.useCallback((trait: FormatTraits, setActive: boolean) => {\n    const traitStr = Format.getTraitString(trait);\n    let formatTraits: string[] = [traitStr];\n    if (setActive) {// setting trait\n      // istanbul ignore else\n      if (formatProps.formatTraits) {\n        const traits = Array.isArray(formatProps.formatTraits) ? formatProps.formatTraits : /* istanbul ignore next */ formatProps.formatTraits.split(/,|;|\\|/);\n        formatTraits = [...traits, traitStr];\n      }\n    } else { // clearing trait\n      // istanbul ignore else\n      if (formatProps.formatTraits) {\n        const traits = Array.isArray(formatProps.formatTraits) ? formatProps.formatTraits : /* istanbul ignore next */ formatProps.formatTraits.split(/,|;|\\|/);\n        formatTraits = traits.filter((traitEntry) => traitEntry !== traitStr);\n      }\n    }\n    const newFormatProps = { ...formatProps, formatTraits };\n    handleSetFormatProps(newFormatProps);\n  }, [formatProps, handleSetFormatProps]);\n\n  const handleUseThousandsSeparatorChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n    setFormatTrait(FormatTraits.Use1000Separator, e.target.checked);\n  }, [setFormatTrait]);\n\n  const isFormatTraitSet = React.useCallback((trait: FormatTraits) => {\n    return Format.isFormatTraitSetInProps(formatProps, trait);\n  }, [formatProps]);\n\n  const handleThousandSeparatorChange = React.useCallback((thousandSeparator: string) => {\n    let decimalSeparator = formatProps.decimalSeparator;\n    // make sure 1000 and decimal separator do not match\n    // istanbul ignore else\n    if (isFormatTraitSet(FormatTraits.Use1000Separator)) {\n      if (thousandSeparator === \".\")\n        decimalSeparator = \",\";\n      else // thousandSeparator === \",\"\n        decimalSeparator = \".\";\n    }\n    const newFormatProps = { ...formatProps, thousandSeparator, decimalSeparator };\n    handleSetFormatProps(newFormatProps);\n  }, [formatProps, isFormatTraitSet, handleSetFormatProps]);\n\n  const useThousandSeparatorLabel = React.useRef(UiIModelComponents.translate(\"QuantityFormat.labels.useThousandSeparatorLabel\"));\n  const thousandSeparatorLabel = React.useRef(UiIModelComponents.translate(\"QuantityFormat.labels.thousandSeparatorLabel\"));\n\n  return (\n    <>\n      <span className={\"uicore-label\"}>{useThousandSeparatorLabel.current}</span>\n      <Checkbox data-testid=\"use-thousands-separator\" checked={isFormatTraitSet(FormatTraits.Use1000Separator)} onChange={handleUseThousandsSeparatorChange} />\n      <span className={classnames(\"uicore-label\", !(isFormatTraitSet(FormatTraits.Use1000Separator)) && \"uicore-disabled\")}>{thousandSeparatorLabel.current}</span>\n      <ThousandsSelector data-testid=\"thousands-separator-selector\" separator={formatProps.thousandSeparator ?? \",\"} disabled={!isFormatTraitSet(FormatTraits.Use1000Separator)} onChange={handleThousandSeparatorChange} />\n    </>\n  );\n}\n"]}

package/lib/esm/imodel-components-react/quantityformat/misc/UnitDescr.d.ts

@@ -0,0 +1,24 @@
+/** @packageDocumentation
+ * @module QuantityFormat
+ */
+/// <reference types="react" />
+import { UnitsProvider } from "@itwin/core-quantity";
+import { CommonProps } from "@itwin/core-react";
+/** Properties of [[UnitDescr]] component.
+ * @internal
+ */
+export interface UnitDescrProps extends CommonProps {
+    name: string;
+    parentUnitName?: string;
+    label: string;
+    index: number;
+    unitsProvider: UnitsProvider;
+    readonly?: boolean;
+    onUnitChange: (value: string, index: number) => void;
+    onLabelChange: (value: string, index: number) => void;
+}
+/** Component use to display dropdown list of possible units.
+ * @internal
+ */
+export declare function UnitDescr(props: UnitDescrProps): JSX.Element;
+//# sourceMappingURL=UnitDescr.d.ts.map

package/lib/esm/imodel-components-react/quantityformat/misc/UnitDescr.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnitDescr.d.ts","sourceRoot":"","sources":["../../../../../src/imodel-components-react/quantityformat/misc/UnitDescr.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAGH,OAAO,EAAa,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvD;AAiCD;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAqE9C"}

package/lib/esm/imodel-components-react/quantityformat/misc/UnitDescr.js

@@ -0,0 +1,97 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module QuantityFormat
+ */
+import * as React from "react";
+import { Input, Select } from "@itwin/itwinui-react";
+async function getUnitConversionData(possibleUnits, toUnit, unitsProvider) {
+    const unitConversionEntries = possibleUnits.map(async (unit) => {
+        const conversion = await unitsProvider.getConversion(unit, toUnit);
+        return { conversion, unitProps: unit };
+    });
+    return unitConversionEntries;
+}
+async function getPossibleUnits(parentUnit, unitsProvider, ensureCompatibleComposite) {
+    const phenomenon = parentUnit.phenomenon;
+    const possibleUnits = await unitsProvider.getUnitsByFamily(phenomenon);
+    if (!ensureCompatibleComposite)
+        return possibleUnits;
+    const conversionPromises = await getUnitConversionData(possibleUnits, parentUnit, unitsProvider);
+    const conversionEntries = await Promise.all(conversionPromises);
+    // sort the entries so the best potential sub unit will be the first one in the array
+    return conversionEntries.filter((entry) => ((entry.unitProps.system === parentUnit.system) && (entry.conversion.factor < 1)))
+        .sort((a, b) => b.conversion.factor - a.conversion.factor)
+        .map((value) => value.unitProps);
+}
+function getUnitName(fullUnitName) {
+    const nameParts = fullUnitName.split(/[.:]/);
+    // istanbul ignore else
+    if (nameParts.length > 0)
+        return nameParts[nameParts.length - 1];
+    // istanbul ignore next
+    throw Error("Bad unit name encountered");
+}
+/** Component use to display dropdown list of possible units.
+ * @internal
+ */
+export function UnitDescr(props) {
+    const { name, label, parentUnitName, index, onUnitChange, onLabelChange, readonly, unitsProvider } = props;
+    const [unitOptions, setUnitOptions] = React.useState([{ value: name, label: getUnitName(name) }]);
+    const [currentUnit, setCurrentUnit] = React.useState({ name, label });
+    const isMounted = React.useRef(false);
+    React.useEffect(() => {
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    });
+    React.useEffect(() => {
+        async function fetchAllowableUnitSelections() {
+            const currentUnitProps = await unitsProvider.findUnitByName(name);
+            const parentUnit = await unitsProvider.findUnitByName(parentUnitName ? parentUnitName : name);
+            // istanbul ignore else
+            if (parentUnit && currentUnitProps) {
+                let potentialSubUnit;
+                const potentialUnits = await getPossibleUnits(parentUnit, unitsProvider, index !== 0);
+                // istanbul ignore else
+                if (index < 3) {
+                    const potentialSubUnits = await getPossibleUnits(currentUnitProps, unitsProvider, true);
+                    if (potentialSubUnits.length)
+                        potentialSubUnit = potentialSubUnits[0];
+                }
+                const options = (potentialUnits.length > 0) ?
+                    potentialUnits.map((unitValue) => {
+                        return { value: `${unitValue.name}:${unitValue.label}`, label: getUnitName(unitValue.name) };
+                    }).sort((a, b) => a.label.localeCompare(b.label))
+                    : /* istanbul ignore next */
+                        [{ value: `${currentUnitProps.name}:${currentUnitProps.label}`, label: getUnitName(name) }];
+                if (potentialSubUnit) {
+                    // construct an entry that will provide the name and label of the unit to add
+                    options.push({ value: `ADDSUBUNIT:${potentialSubUnit.name}:${potentialSubUnit.label}`, label: "Add sub-unit" }); // NEEDSWORK - i18n
+                }
+                if (index !== 0)
+                    options.push({ value: "REMOVEUNIT", label: "Remove" }); // NEEDSWORK - i18n
+                // istanbul ignore else
+                if (isMounted.current) {
+                    setUnitOptions(options);
+                    setCurrentUnit(currentUnitProps);
+                }
+            }
+        }
+        fetchAllowableUnitSelections(); // eslint-disable-line @typescript-eslint/no-floating-promises
+    }, [index, label, name, parentUnitName, unitsProvider]);
+    const handleOnUnitChange = React.useCallback((newValue) => {
+        onUnitChange && onUnitChange(newValue, index);
+    }, [index, onUnitChange]);
+    const handleOnLabelChange = React.useCallback((e) => {
+        e.preventDefault();
+        onLabelChange && onLabelChange(e.target.value, index);
+    }, [index, onLabelChange]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Select, { options: unitOptions, "data-testid": `unit-${currentUnit.name}`, value: `${currentUnit.name}:${currentUnit.label}`, onChange: handleOnUnitChange, disabled: readonly }),
+        React.createElement(Input, { "data-testid": `unit-label-${currentUnit.name}`, value: label, onChange: handleOnLabelChange })));
+}
+//# sourceMappingURL=UnitDescr.js.map

package/lib/esm/imodel-components-react/quantityformat/misc/UnitDescr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnitDescr.js","sourceRoot":"","sources":["../../../../../src/imodel-components-react/quantityformat/misc/UnitDescr.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 QuantityFormat\n */\n\nimport * as React from \"react\";\nimport { UnitProps, UnitsProvider } from \"@itwin/core-quantity\";\nimport { CommonProps } from \"@itwin/core-react\";\nimport { Input, Select, SelectOption } from \"@itwin/itwinui-react\";\n\n/** Properties of [[UnitDescr]] component.\n * @internal\n */\nexport interface UnitDescrProps extends CommonProps {\n  name: string;\n  parentUnitName?: string;\n  label: string;\n  index: number;\n  unitsProvider: UnitsProvider;\n  readonly?: boolean;\n  onUnitChange: (value: string, index: number) => void;\n  onLabelChange: (value: string, index: number) => void;\n}\n\nasync function getUnitConversionData(possibleUnits: UnitProps[], toUnit: UnitProps, unitsProvider: UnitsProvider) {\n  const unitConversionEntries = possibleUnits.map(async (unit) => {\n    const conversion = await unitsProvider.getConversion(unit, toUnit);\n    return { conversion, unitProps: unit };\n  });\n  return unitConversionEntries;\n}\n\nasync function getPossibleUnits(parentUnit: UnitProps, unitsProvider: UnitsProvider, ensureCompatibleComposite: boolean) {\n  const phenomenon = parentUnit.phenomenon;\n  const possibleUnits = await unitsProvider.getUnitsByFamily(phenomenon);\n  if (!ensureCompatibleComposite)\n    return possibleUnits;\n\n  const conversionPromises = await getUnitConversionData(possibleUnits, parentUnit, unitsProvider);\n  const conversionEntries = await Promise.all(conversionPromises);\n  // sort the entries so the best potential sub unit will be the first one in the array\n  return conversionEntries.filter((entry) => ((entry.unitProps.system === parentUnit.system) && (entry.conversion.factor < 1)))\n    .sort((a, b) => b.conversion.factor - a.conversion.factor)\n    .map((value) => value.unitProps);\n}\n\nfunction getUnitName(fullUnitName: string) {\n  const nameParts = fullUnitName.split(/[.:]/);\n  // istanbul ignore else\n  if (nameParts.length > 0)\n    return nameParts[nameParts.length - 1];\n  // istanbul ignore next\n  throw Error(\"Bad unit name encountered\");\n}\n\n/** Component use to display dropdown list of possible units.\n * @internal\n */\nexport function UnitDescr(props: UnitDescrProps) {\n  const { name, label, parentUnitName, index, onUnitChange, onLabelChange, readonly, unitsProvider } = props;\n  const [unitOptions, setUnitOptions] = React.useState<SelectOption<string>[]>([{ value: name, label: getUnitName(name) }]);\n  const [currentUnit, setCurrentUnit] = React.useState({ name, label });\n  const isMounted = React.useRef(false);\n\n  React.useEffect(() => {\n    isMounted.current = true;\n    return () => {\n      isMounted.current = false;\n    };\n  });\n\n  React.useEffect(() => {\n    async function fetchAllowableUnitSelections() {\n      const currentUnitProps = await unitsProvider.findUnitByName(name);\n      const parentUnit = await unitsProvider.findUnitByName(parentUnitName ? parentUnitName : name);\n      // istanbul ignore else\n      if (parentUnit && currentUnitProps) {\n        let potentialSubUnit: UnitProps | undefined;\n        const potentialUnits = await getPossibleUnits(parentUnit, unitsProvider, index !== 0);\n        // istanbul ignore else\n        if (index < 3) {\n          const potentialSubUnits = await getPossibleUnits(currentUnitProps, unitsProvider, true);\n          if (potentialSubUnits.length)\n            potentialSubUnit = potentialSubUnits[0];\n        }\n\n        const options = (potentialUnits.length > 0) ?\n          potentialUnits.map((unitValue) => {\n            return { value: `${unitValue.name}:${unitValue.label}`, label: getUnitName(unitValue.name) };\n          }).sort((a, b) => a.label.localeCompare(b.label))\n          : /* istanbul ignore next */\n          [{ value: `${currentUnitProps.name}:${currentUnitProps.label}`, label: getUnitName(name) }];\n\n        if (potentialSubUnit) {\n          // construct an entry that will provide the name and label of the unit to add\n          options.push({ value: `ADDSUBUNIT:${potentialSubUnit.name}:${potentialSubUnit.label}`, label: \"Add sub-unit\" });  // NEEDSWORK - i18n\n        }\n\n        if (index !== 0)\n          options.push({ value: \"REMOVEUNIT\", label: \"Remove\" }); // NEEDSWORK - i18n\n\n        // istanbul ignore else\n        if (isMounted.current) {\n          setUnitOptions(options);\n          setCurrentUnit(currentUnitProps);\n        }\n      }\n    }\n    fetchAllowableUnitSelections(); // eslint-disable-line @typescript-eslint/no-floating-promises\n  }, [index, label, name, parentUnitName, unitsProvider]);\n\n  const handleOnUnitChange = React.useCallback((newValue: string) => {\n    onUnitChange && onUnitChange(newValue, index);\n  }, [index, onUnitChange]);\n\n  const handleOnLabelChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n    e.preventDefault();\n    onLabelChange && onLabelChange(e.target.value, index);\n  }, [index, onLabelChange]);\n\n  return (\n    <>\n      <Select options={unitOptions} data-testid={`unit-${currentUnit.name}`} value={`${currentUnit.name}:${currentUnit.label}`}\n        onChange={handleOnUnitChange} disabled={readonly} />\n      <Input data-testid={`unit-label-${currentUnit.name}`} value={label} onChange={handleOnLabelChange} />\n    </>\n  );\n}\n"]}