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

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

@@ -1,57 +1,61 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThousandsSelector = void 0;
-const React = __importStar(require("react"));
-const UiIModelComponents_1 = require("../../UiIModelComponents");
-const itwinui_react_1 = require("@itwin/itwinui-react");
-/** Component use to set Quantity Format thousand group separator.
- * @internal
- */
-function ThousandsSelector(props) {
-    const { separator, disabled, onChange, ...otherProps } = props;
-    const uomDefaultEntries = React.useRef([
-        { value: ",", label: UiIModelComponents_1.UiIModelComponents.translate("QuantityFormat.thousand_separator.comma") },
-        { value: ".", label: UiIModelComponents_1.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(itwinui_react_1.Select, { options: separatorOptions, disabled: disabled, value: separator, onChange: handleOnChange, size: "small", ...otherProps }));
-}
-exports.ThousandsSelector = ThousandsSelector;
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThousandsSelector = void 0;
+const React = __importStar(require("react"));
+const UiIModelComponents_1 = require("../../UiIModelComponents");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+/** Component use to set Quantity Format thousand group separator.
+ * @internal
+ */
+function ThousandsSelector(props) {
+    const { separator, disabled, onChange, ...otherProps } = props;
+    const uomDefaultEntries = React.useRef([
+        { value: ",", label: UiIModelComponents_1.UiIModelComponents.translate("QuantityFormat.thousand_separator.comma") },
+        { value: ".", label: UiIModelComponents_1.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(itwinui_react_1.Select, { options: separatorOptions, disabled: disabled, value: separator, onChange: handleOnChange, size: "small", ...otherProps }));
+}
+exports.ThousandsSelector = ThousandsSelector;
 //# sourceMappingURL=ThousandsSelector.js.map

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

@@ -1 +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,6CAA+B;AAE/B,iEAA8D;AAC9D,wDAA4D;AAW5D;;GAEG;AACH,SAAgB,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,uCAAkB,CAAC,SAAS,CAAC,yCAAyC,CAAC,EAAE;QAC9F,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,uCAAkB,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,sBAAM,IAAC,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,cAAc,EAAE,IAAI,EAAC,OAAO,KAAK,UAAU,GAAI,CACnI,CAAC;AACJ,CAAC;AAxBD,8CAwBC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module QuantityFormat\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { UiIModelComponents } from \"../../UiIModelComponents\";\r\nimport { Select, SelectOption } from \"@itwin/itwinui-react\";\r\n\r\n/** Properties of [[ThousandsSelector]] component.\r\n * @internal\r\n */\r\nexport interface ThousandsSelectorProps extends CommonProps {\r\n  separator: string;\r\n  disabled: boolean;\r\n  onChange: (value: string) => void;\r\n}\r\n\r\n/** Component use to set Quantity Format thousand group separator.\r\n * @internal\r\n */\r\nexport function ThousandsSelector(props: ThousandsSelectorProps) {\r\n  const { separator, disabled, onChange, ...otherProps } = props;\r\n  const uomDefaultEntries = React.useRef<SelectOption<string>[]>([\r\n    { value: \",\", label: UiIModelComponents.translate(\"QuantityFormat.thousand_separator.comma\") },\r\n    { value: \".\", label: UiIModelComponents.translate(\"QuantityFormat.thousand_separator.point\") },\r\n  ]);\r\n\r\n  const handleOnChange = React.useCallback((newValue: string) => {\r\n    onChange && onChange(newValue);\r\n  }, [onChange]);\r\n\r\n  const separatorOptions = React.useMemo(() => {\r\n    const completeListOfEntries: SelectOption<string>[] = [];\r\n    // istanbul ignore next (only used if format already has a character that does not match standard options)\r\n    if (undefined === uomDefaultEntries.current.find((option) => option.value === separator)) {\r\n      completeListOfEntries.push({ value: separator, label: separator });\r\n    }\r\n    completeListOfEntries.push(...uomDefaultEntries.current);\r\n    return completeListOfEntries;\r\n  }, [separator]);\r\n\r\n  return (\r\n    <Select options={separatorOptions} disabled={disabled} value={separator} onChange={handleOnChange} size=\"small\" {...otherProps} />\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"ThousandsSelector.js","sourceRoot":"","sources":["../../../../../src/imodel-components-react/quantityformat/misc/ThousandsSelector.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,6CAA+B;AAE/B,iEAA8D;AAC9D,wDAA4D;AAW5D;;GAEG;AACH,SAAgB,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,uCAAkB,CAAC,SAAS,CAAC,yCAAyC,CAAC,EAAE;QAC9F,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,uCAAkB,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,sBAAM,IAAC,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,cAAc,EAAE,IAAI,EAAC,OAAO,KAAK,UAAU,GAAI,CACnI,CAAC;AACJ,CAAC;AAxBD,8CAwBC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module QuantityFormat\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { UiIModelComponents } from \"../../UiIModelComponents\";\r\nimport { Select, SelectOption } from \"@itwin/itwinui-react\";\r\n\r\n/** Properties of [[ThousandsSelector]] component.\r\n * @internal\r\n */\r\nexport interface ThousandsSelectorProps extends CommonProps {\r\n  separator: string;\r\n  disabled: boolean;\r\n  onChange: (value: string) => void;\r\n}\r\n\r\n/** Component use to set Quantity Format thousand group separator.\r\n * @internal\r\n */\r\nexport function ThousandsSelector(props: ThousandsSelectorProps) {\r\n  const { separator, disabled, onChange, ...otherProps } = props;\r\n  const uomDefaultEntries = React.useRef<SelectOption<string>[]>([\r\n    { value: \",\", label: UiIModelComponents.translate(\"QuantityFormat.thousand_separator.comma\") },\r\n    { value: \".\", label: UiIModelComponents.translate(\"QuantityFormat.thousand_separator.point\") },\r\n  ]);\r\n\r\n  const handleOnChange = React.useCallback((newValue: string) => {\r\n    onChange && onChange(newValue);\r\n  }, [onChange]);\r\n\r\n  const separatorOptions = React.useMemo(() => {\r\n    const completeListOfEntries: SelectOption<string>[] = [];\r\n    // istanbul ignore next (only used if format already has a character that does not match standard options)\r\n    if (undefined === uomDefaultEntries.current.find((option) => option.value === separator)) {\r\n      completeListOfEntries.push({ value: separator, label: separator });\r\n    }\r\n    completeListOfEntries.push(...uomDefaultEntries.current);\r\n    return completeListOfEntries;\r\n  }, [separator]);\r\n\r\n  return (\r\n    <Select options={separatorOptions} disabled={disabled} value={separator} onChange={handleOnChange} size=\"small\" {...otherProps} />\r\n  );\r\n}\r\n"]}

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

@@ -1,18 +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;
+/** @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/cjs/imodel-components-react/quantityformat/misc/ThousandsSeparator.js

@@ -1,96 +1,99 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThousandsSeparator = void 0;
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const core_quantity_1 = require("@itwin/core-quantity");
-const itwinui_react_1 = require("@itwin/itwinui-react");
-const ThousandsSelector_1 = require("./ThousandsSelector");
-const UiIModelComponents_1 = require("../../UiIModelComponents");
-/** Component use to set Quantity Format thousand group separator.
- * @internal
- */
-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 = (0, core_quantity_1.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(core_quantity_1.FormatTraits.Use1000Separator, e.target.checked);
-    }, [setFormatTrait]);
-    const isFormatTraitSet = React.useCallback((trait) => {
-        return core_quantity_1.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(core_quantity_1.FormatTraits.Use1000Separator)) {
-            if (thousandSeparator === ".")
-                decimalSeparator = ",";
-            else // thousandSeparator === ","
-                decimalSeparator = ".";
-        }
-        const newFormatProps = { ...formatProps, thousandSeparator, decimalSeparator };
-        handleSetFormatProps(newFormatProps);
-    }, [formatProps, isFormatTraitSet, handleSetFormatProps]);
-    const useThousandSeparatorLabel = React.useRef(UiIModelComponents_1.UiIModelComponents.translate("QuantityFormat.labels.useThousandSeparatorLabel"));
-    const thousandSeparatorLabel = React.useRef(UiIModelComponents_1.UiIModelComponents.translate("QuantityFormat.labels.thousandSeparatorLabel"));
-    return (React.createElement(React.Fragment, null,
-        React.createElement("span", { className: "uicore-label" }, useThousandSeparatorLabel.current),
-        React.createElement(itwinui_react_1.Checkbox, { "data-testid": "use-thousands-separator", checked: isFormatTraitSet(core_quantity_1.FormatTraits.Use1000Separator), onChange: handleUseThousandsSeparatorChange }),
-        React.createElement("span", { className: (0, classnames_1.default)("uicore-label", !(isFormatTraitSet(core_quantity_1.FormatTraits.Use1000Separator)) && "uicore-disabled") }, thousandSeparatorLabel.current),
-        React.createElement(ThousandsSelector_1.ThousandsSelector, { "data-testid": "thousands-separator-selector", separator: (_a = formatProps.thousandSeparator) !== null && _a !== void 0 ? _a : ",", disabled: !isFormatTraitSet(core_quantity_1.FormatTraits.Use1000Separator), onChange: handleThousandSeparatorChange })));
-}
-exports.ThousandsSeparator = ThousandsSeparator;
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThousandsSeparator = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
+const core_quantity_1 = require("@itwin/core-quantity");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const ThousandsSelector_1 = require("./ThousandsSelector");
+const UiIModelComponents_1 = require("../../UiIModelComponents");
+/** Component use to set Quantity Format thousand group separator.
+ * @internal
+ */
+function ThousandsSeparator(props) {
+    const { formatProps, onChange } = props;
+    const handleSetFormatProps = React.useCallback((newProps) => {
+        onChange && onChange(newProps);
+    }, [onChange]);
+    const setFormatTrait = React.useCallback((trait, setActive) => {
+        const traitStr = (0, core_quantity_1.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(core_quantity_1.FormatTraits.Use1000Separator, e.target.checked);
+    }, [setFormatTrait]);
+    const isFormatTraitSet = React.useCallback((trait) => {
+        return core_quantity_1.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(core_quantity_1.FormatTraits.Use1000Separator)) {
+            if (thousandSeparator === ".")
+                decimalSeparator = ",";
+            else // thousandSeparator === ","
+                decimalSeparator = ".";
+        }
+        const newFormatProps = { ...formatProps, thousandSeparator, decimalSeparator };
+        handleSetFormatProps(newFormatProps);
+    }, [formatProps, isFormatTraitSet, handleSetFormatProps]);
+    const useThousandSeparatorLabel = React.useRef(UiIModelComponents_1.UiIModelComponents.translate("QuantityFormat.labels.useThousandSeparatorLabel"));
+    const thousandSeparatorLabel = React.useRef(UiIModelComponents_1.UiIModelComponents.translate("QuantityFormat.labels.thousandSeparatorLabel"));
+    return (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: "uicore-label" }, useThousandSeparatorLabel.current),
+        React.createElement(itwinui_react_1.Checkbox, { "data-testid": "use-thousands-separator", checked: isFormatTraitSet(core_quantity_1.FormatTraits.Use1000Separator), onChange: handleUseThousandsSeparatorChange }),
+        React.createElement("span", { className: (0, classnames_1.default)("uicore-label", !(isFormatTraitSet(core_quantity_1.FormatTraits.Use1000Separator)) && "uicore-disabled") }, thousandSeparatorLabel.current),
+        React.createElement(ThousandsSelector_1.ThousandsSelector, { "data-testid": "thousands-separator-selector", separator: formatProps.thousandSeparator ?? ",", disabled: !isFormatTraitSet(core_quantity_1.FormatTraits.Use1000Separator), onChange: handleThousandSeparatorChange })));
+}
+exports.ThousandsSeparator = ThousandsSeparator;
 //# sourceMappingURL=ThousandsSeparator.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ThousandsSeparator.js","sourceRoot":"","sources":["../../../../../src/imodel-components-react/quantityformat/misc/ThousandsSeparator.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module QuantityFormat\r\n */\r\n\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { Format, FormatProps, FormatTraits, getTraitString } from \"@itwin/core-quantity\";\r\nimport { Checkbox } from \"@itwin/itwinui-react\";\r\nimport { ThousandsSelector } from \"./ThousandsSelector\";\r\nimport { UiIModelComponents } from \"../../UiIModelComponents\";\r\n\r\n/** Properties of [[ThousandsSeparator]] component.\r\n * @internal\r\n */\r\nexport interface ThousandsSeparatorProps extends CommonProps {\r\n  formatProps: FormatProps;\r\n  onChange?: (format: FormatProps) => void;\r\n}\r\n\r\n/** Component use to set Quantity Format thousand group separator.\r\n * @internal\r\n */\r\nexport function ThousandsSeparator(props: ThousandsSeparatorProps) {\r\n  const { formatProps, onChange } = props;\r\n\r\n  const handleSetFormatProps = React.useCallback((newProps: FormatProps) => {\r\n    onChange && onChange(newProps);\r\n  }, [onChange]);\r\n\r\n  const setFormatTrait = React.useCallback((trait: FormatTraits, setActive: boolean) => {\r\n    const traitStr = getTraitString(trait);\r\n    let formatTraits: string[] = [traitStr];\r\n    if (setActive) {// setting trait\r\n      // istanbul ignore else\r\n      if (formatProps.formatTraits) {\r\n        const traits = Array.isArray(formatProps.formatTraits) ? formatProps.formatTraits : /* istanbul ignore next */ formatProps.formatTraits.split(/,|;|\\|/);\r\n        formatTraits = [...traits, traitStr];\r\n      }\r\n    } else { // clearing trait\r\n      // istanbul ignore else\r\n      if (formatProps.formatTraits) {\r\n        const traits = Array.isArray(formatProps.formatTraits) ? formatProps.formatTraits : /* istanbul ignore next */ formatProps.formatTraits.split(/,|;|\\|/);\r\n        formatTraits = traits.filter((traitEntry) => traitEntry !== traitStr);\r\n      }\r\n    }\r\n    const newFormatProps = { ...formatProps, formatTraits };\r\n    handleSetFormatProps(newFormatProps);\r\n  }, [formatProps, handleSetFormatProps]);\r\n\r\n  const handleUseThousandsSeparatorChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\r\n    setFormatTrait(FormatTraits.Use1000Separator, e.target.checked);\r\n  }, [setFormatTrait]);\r\n\r\n  const isFormatTraitSet = React.useCallback((trait: FormatTraits) => {\r\n    return Format.isFormatTraitSetInProps(formatProps, trait);\r\n  }, [formatProps]);\r\n\r\n  const handleThousandSeparatorChange = React.useCallback((thousandSeparator: string) => {\r\n    let decimalSeparator = formatProps.decimalSeparator;\r\n    // make sure 1000 and decimal separator do not match\r\n    // istanbul ignore else\r\n    if (isFormatTraitSet(FormatTraits.Use1000Separator)) {\r\n      if (thousandSeparator === \".\")\r\n        decimalSeparator = \",\";\r\n      else // thousandSeparator === \",\"\r\n        decimalSeparator = \".\";\r\n    }\r\n    const newFormatProps = { ...formatProps, thousandSeparator, decimalSeparator };\r\n    handleSetFormatProps(newFormatProps);\r\n  }, [formatProps, isFormatTraitSet, handleSetFormatProps]);\r\n\r\n  const useThousandSeparatorLabel = React.useRef(UiIModelComponents.translate(\"QuantityFormat.labels.useThousandSeparatorLabel\"));\r\n  const thousandSeparatorLabel = React.useRef(UiIModelComponents.translate(\"QuantityFormat.labels.thousandSeparatorLabel\"));\r\n\r\n  return (\r\n    <>\r\n      <span className={\"uicore-label\"}>{useThousandSeparatorLabel.current}</span>\r\n      <Checkbox data-testid=\"use-thousands-separator\" checked={isFormatTraitSet(FormatTraits.Use1000Separator)} onChange={handleUseThousandsSeparatorChange} />\r\n      <span className={classnames(\"uicore-label\", !(isFormatTraitSet(FormatTraits.Use1000Separator)) && \"uicore-disabled\")}>{thousandSeparatorLabel.current}</span>\r\n      <ThousandsSelector data-testid=\"thousands-separator-selector\" separator={formatProps.thousandSeparator ?? \",\"} disabled={!isFormatTraitSet(FormatTraits.Use1000Separator)} onChange={handleThousandSeparatorChange} />\r\n    </>\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"ThousandsSeparator.js","sourceRoot":"","sources":["../../../../../src/imodel-components-react/quantityformat/misc/ThousandsSeparator.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,4DAAoC;AACpC,6CAA+B;AAE/B,wDAAyF;AACzF,wDAAgD;AAChD,2DAAwD;AACxD,iEAA8D;AAU9D;;GAEG;AACH,SAAgB,kBAAkB,CAAC,KAA8B;IAC/D,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAExC,MAAM,oBAAoB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,QAAqB,EAAE,EAAE;QACvE,QAAQ,IAAI,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACjC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAmB,EAAE,SAAkB,EAAE,EAAE;QACnF,MAAM,QAAQ,GAAG,IAAA,8BAAc,EAAC,KAAK,CAAC,CAAC;QACvC,IAAI,YAAY,GAAa,CAAC,QAAQ,CAAC,CAAC;QACxC,IAAI,SAAS,EAAE,EAAC,gBAAgB;YAC9B,uBAAuB;YACvB,IAAI,WAAW,CAAC,YAAY,EAAE;gBAC5B,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,0BAA0B,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;gBACxJ,YAAY,GAAG,CAAC,GAAG,MAAM,EAAE,QAAQ,CAAC,CAAC;aACtC;SACF;aAAM,EAAE,iBAAiB;YACxB,uBAAuB;YACvB,IAAI,WAAW,CAAC,YAAY,EAAE;gBAC5B,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,0BAA0B,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;gBACxJ,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,UAAU,KAAK,QAAQ,CAAC,CAAC;aACvE;SACF;QACD,MAAM,cAAc,GAAG,EAAE,GAAG,WAAW,EAAE,YAAY,EAAE,CAAC;QACxD,oBAAoB,CAAC,cAAc,CAAC,CAAC;IACvC,CAAC,EAAE,CAAC,WAAW,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAExC,MAAM,iCAAiC,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAsC,EAAE,EAAE;QACrG,cAAc,CAAC,4BAAY,CAAC,gBAAgB,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAClE,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,MAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAmB,EAAE,EAAE;QACjE,OAAO,sBAAM,CAAC,uBAAuB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;IAC5D,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,MAAM,6BAA6B,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,iBAAyB,EAAE,EAAE;QACpF,IAAI,gBAAgB,GAAG,WAAW,CAAC,gBAAgB,CAAC;QACpD,oDAAoD;QACpD,uBAAuB;QACvB,IAAI,gBAAgB,CAAC,4BAAY,CAAC,gBAAgB,CAAC,EAAE;YACnD,IAAI,iBAAiB,KAAK,GAAG;gBAC3B,gBAAgB,GAAG,GAAG,CAAC;iBACpB,4BAA4B;gBAC/B,gBAAgB,GAAG,GAAG,CAAC;SAC1B;QACD,MAAM,cAAc,GAAG,EAAE,GAAG,WAAW,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,CAAC;QAC/E,oBAAoB,CAAC,cAAc,CAAC,CAAC;IACvC,CAAC,EAAE,CAAC,WAAW,EAAE,gBAAgB,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAE1D,MAAM,yBAAyB,GAAG,KAAK,CAAC,MAAM,CAAC,uCAAkB,CAAC,SAAS,CAAC,iDAAiD,CAAC,CAAC,CAAC;IAChI,MAAM,sBAAsB,GAAG,KAAK,CAAC,MAAM,CAAC,uCAAkB,CAAC,SAAS,CAAC,8CAA8C,CAAC,CAAC,CAAC;IAE1H,OAAO,CACL;QACE,8BAAM,SAAS,EAAE,cAAc,IAAG,yBAAyB,CAAC,OAAO,CAAQ;QAC3E,oBAAC,wBAAQ,mBAAa,yBAAyB,EAAC,OAAO,EAAE,gBAAgB,CAAC,4BAAY,CAAC,gBAAgB,CAAC,EAAE,QAAQ,EAAE,iCAAiC,GAAI;QACzJ,8BAAM,SAAS,EAAE,IAAA,oBAAU,EAAC,cAAc,EAAE,CAAC,CAAC,gBAAgB,CAAC,4BAAY,CAAC,gBAAgB,CAAC,CAAC,IAAI,iBAAiB,CAAC,IAAG,sBAAsB,CAAC,OAAO,CAAQ;QAC7J,oBAAC,qCAAiB,mBAAa,8BAA8B,EAAC,SAAS,EAAE,WAAW,CAAC,iBAAiB,IAAI,GAAG,EAAE,QAAQ,EAAE,CAAC,gBAAgB,CAAC,4BAAY,CAAC,gBAAgB,CAAC,EAAE,QAAQ,EAAE,6BAA6B,GAAI,CACrN,CACJ,CAAC;AACJ,CAAC;AA5DD,gDA4DC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module QuantityFormat\r\n */\r\n\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { Format, FormatProps, FormatTraits, getTraitString } from \"@itwin/core-quantity\";\r\nimport { Checkbox } from \"@itwin/itwinui-react\";\r\nimport { ThousandsSelector } from \"./ThousandsSelector\";\r\nimport { UiIModelComponents } from \"../../UiIModelComponents\";\r\n\r\n/** Properties of [[ThousandsSeparator]] component.\r\n * @internal\r\n */\r\nexport interface ThousandsSeparatorProps extends CommonProps {\r\n  formatProps: FormatProps;\r\n  onChange?: (format: FormatProps) => void;\r\n}\r\n\r\n/** Component use to set Quantity Format thousand group separator.\r\n * @internal\r\n */\r\nexport function ThousandsSeparator(props: ThousandsSeparatorProps) {\r\n  const { formatProps, onChange } = props;\r\n\r\n  const handleSetFormatProps = React.useCallback((newProps: FormatProps) => {\r\n    onChange && onChange(newProps);\r\n  }, [onChange]);\r\n\r\n  const setFormatTrait = React.useCallback((trait: FormatTraits, setActive: boolean) => {\r\n    const traitStr = getTraitString(trait);\r\n    let formatTraits: string[] = [traitStr];\r\n    if (setActive) {// setting trait\r\n      // istanbul ignore else\r\n      if (formatProps.formatTraits) {\r\n        const traits = Array.isArray(formatProps.formatTraits) ? formatProps.formatTraits : /* istanbul ignore next */ formatProps.formatTraits.split(/,|;|\\|/);\r\n        formatTraits = [...traits, traitStr];\r\n      }\r\n    } else { // clearing trait\r\n      // istanbul ignore else\r\n      if (formatProps.formatTraits) {\r\n        const traits = Array.isArray(formatProps.formatTraits) ? formatProps.formatTraits : /* istanbul ignore next */ formatProps.formatTraits.split(/,|;|\\|/);\r\n        formatTraits = traits.filter((traitEntry) => traitEntry !== traitStr);\r\n      }\r\n    }\r\n    const newFormatProps = { ...formatProps, formatTraits };\r\n    handleSetFormatProps(newFormatProps);\r\n  }, [formatProps, handleSetFormatProps]);\r\n\r\n  const handleUseThousandsSeparatorChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\r\n    setFormatTrait(FormatTraits.Use1000Separator, e.target.checked);\r\n  }, [setFormatTrait]);\r\n\r\n  const isFormatTraitSet = React.useCallback((trait: FormatTraits) => {\r\n    return Format.isFormatTraitSetInProps(formatProps, trait);\r\n  }, [formatProps]);\r\n\r\n  const handleThousandSeparatorChange = React.useCallback((thousandSeparator: string) => {\r\n    let decimalSeparator = formatProps.decimalSeparator;\r\n    // make sure 1000 and decimal separator do not match\r\n    // istanbul ignore else\r\n    if (isFormatTraitSet(FormatTraits.Use1000Separator)) {\r\n      if (thousandSeparator === \".\")\r\n        decimalSeparator = \",\";\r\n      else // thousandSeparator === \",\"\r\n        decimalSeparator = \".\";\r\n    }\r\n    const newFormatProps = { ...formatProps, thousandSeparator, decimalSeparator };\r\n    handleSetFormatProps(newFormatProps);\r\n  }, [formatProps, isFormatTraitSet, handleSetFormatProps]);\r\n\r\n  const useThousandSeparatorLabel = React.useRef(UiIModelComponents.translate(\"QuantityFormat.labels.useThousandSeparatorLabel\"));\r\n  const thousandSeparatorLabel = React.useRef(UiIModelComponents.translate(\"QuantityFormat.labels.thousandSeparatorLabel\"));\r\n\r\n  return (\r\n    <>\r\n      <span className={\"uicore-label\"}>{useThousandSeparatorLabel.current}</span>\r\n      <Checkbox data-testid=\"use-thousands-separator\" checked={isFormatTraitSet(FormatTraits.Use1000Separator)} onChange={handleUseThousandsSeparatorChange} />\r\n      <span className={classnames(\"uicore-label\", !(isFormatTraitSet(FormatTraits.Use1000Separator)) && \"uicore-disabled\")}>{thousandSeparatorLabel.current}</span>\r\n      <ThousandsSelector data-testid=\"thousands-separator-selector\" separator={formatProps.thousandSeparator ?? \",\"} disabled={!isFormatTraitSet(FormatTraits.Use1000Separator)} onChange={handleThousandSeparatorChange} />\r\n    </>\r\n  );\r\n}\r\n"]}

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

@@ -1,24 +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;
+/** @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