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

package/lib/esm/imodel-components-react/quantityformat/FormatPrecision.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 [[FormatPrecision]] component.
- * @alpha
- */
-export interface FormatPrecisionProps extends CommonProps {
-    formatProps: FormatProps;
-    onChange?: (format: FormatProps) => void;
-}
-/** Component to show/edit Quantity Format Precision.
- * @alpha
- */
-export declare function FormatPrecision(props: FormatPrecisionProps): JSX.Element;
+/** @packageDocumentation
+ * @module QuantityFormat
+ */
+/// <reference types="react" />
+import { CommonProps } from "@itwin/core-react";
+import { FormatProps } from "@itwin/core-quantity";
+/** Properties of [[FormatPrecision]] component.
+ * @alpha
+ */
+export interface FormatPrecisionProps extends CommonProps {
+    formatProps: FormatProps;
+    onChange?: (format: FormatProps) => void;
+}
+/** Component to show/edit Quantity Format Precision.
+ * @alpha
+ */
+export declare function FormatPrecision(props: FormatPrecisionProps): JSX.Element;
 //# sourceMappingURL=FormatPrecision.d.ts.map

package/lib/esm/imodel-components-react/quantityformat/FormatPrecision.js

@@ -1,31 +1,30 @@
-/*---------------------------------------------------------------------------------------------
-* 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 { FormatType, parseFormatType } from "@itwin/core-quantity";
-import { DecimalPrecisionSelector } from "./misc/DecimalPrecision";
-import { FractionPrecisionSelector } from "./misc/FractionPrecision";
-import { UiIModelComponents } from "../UiIModelComponents";
-/** Component to show/edit Quantity Format Precision.
- * @alpha
- */
-export function FormatPrecision(props) {
-    var _a, _b;
-    const { formatProps, onChange } = props;
-    const handlePrecisionChange = React.useCallback((precision) => {
-        const newFormatProps = { ...formatProps, precision };
-        onChange && onChange(newFormatProps);
-    }, [formatProps, onChange]);
-    const formatType = parseFormatType(formatProps.type, "format");
-    const label = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.precision"));
-    return (React.createElement(React.Fragment, null,
-        React.createElement("span", { className: "uicore-label" }, label.current),
-        formatType === FormatType.Fractional ?
-            React.createElement(FractionPrecisionSelector, { "data-testid": "fraction-precision-selector", precision: (_a = formatProps.precision) !== null && _a !== void 0 ? _a : 0, onChange: handlePrecisionChange }) :
-            React.createElement(DecimalPrecisionSelector, { "data-testid": "decimal-precision-selector", precision: (_b = formatProps.precision) !== null && _b !== void 0 ? _b : 0, onChange: handlePrecisionChange })));
-}
+/*---------------------------------------------------------------------------------------------
+* 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 { FormatType, parseFormatType } from "@itwin/core-quantity";
+import { DecimalPrecisionSelector } from "./misc/DecimalPrecision";
+import { FractionPrecisionSelector } from "./misc/FractionPrecision";
+import { UiIModelComponents } from "../UiIModelComponents";
+/** Component to show/edit Quantity Format Precision.
+ * @alpha
+ */
+export function FormatPrecision(props) {
+    const { formatProps, onChange } = props;
+    const handlePrecisionChange = React.useCallback((precision) => {
+        const newFormatProps = { ...formatProps, precision };
+        onChange && onChange(newFormatProps);
+    }, [formatProps, onChange]);
+    const formatType = parseFormatType(formatProps.type, "format");
+    const label = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.precision"));
+    return (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: "uicore-label" }, label.current),
+        formatType === FormatType.Fractional ?
+            React.createElement(FractionPrecisionSelector, { "data-testid": "fraction-precision-selector", precision: formatProps.precision ?? 0, onChange: handlePrecisionChange }) :
+            React.createElement(DecimalPrecisionSelector, { "data-testid": "decimal-precision-selector", precision: formatProps.precision ?? 0, onChange: handlePrecisionChange })));
+}
 //# sourceMappingURL=FormatPrecision.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormatPrecision.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/quantityformat/FormatPrecision.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAe,UAAU,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAU3D;;GAEG;AACH,MAAM,UAAU,eAAe,CAAC,KAA2B;;IACzD,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAExC,MAAM,qBAAqB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,SAAiB,EAAE,EAAE;QACpE,MAAM,cAAc,GAAG,EAAE,GAAG,WAAW,EAAE,SAAS,EAAE,CAAC;QACrD,QAAQ,IAAI,QAAQ,CAAC,cAAc,CAAC,CAAC;IACvC,CAAC,EAAE,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE5B,MAAM,UAAU,GAAG,eAAe,CAAC,WAAW,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IAE/D,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,kBAAkB,CAAC,SAAS,CAAC,iCAAiC,CAAC,CAAC,CAAC;IAC5F,OAAO,CACL;QACE,8BAAM,SAAS,EAAE,cAAc,IAAG,KAAK,CAAC,OAAO,CAAQ;QACtD,UAAU,KAAK,UAAU,CAAC,UAAU,CAAC,CAAC;YACrC,oBAAC,yBAAyB,mBAAa,6BAA6B,EAAC,SAAS,EAAE,MAAA,WAAW,CAAC,SAAS,mCAAI,CAAC,EAAE,QAAQ,EAAE,qBAAqB,GAAI,CAAC,CAAC;YACjJ,oBAAC,wBAAwB,mBAAa,4BAA4B,EAAC,SAAS,EAAE,MAAA,WAAW,CAAC,SAAS,mCAAI,CAAC,EAAE,QAAQ,EAAE,qBAAqB,GAAI,CAE9I,CACJ,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module QuantityFormat\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { FormatProps, FormatType, parseFormatType } from \"@itwin/core-quantity\";\r\nimport { DecimalPrecisionSelector } from \"./misc/DecimalPrecision\";\r\nimport { FractionPrecisionSelector } from \"./misc/FractionPrecision\";\r\nimport { UiIModelComponents } from \"../UiIModelComponents\";\r\n\r\n/** Properties of [[FormatPrecision]] component.\r\n * @alpha\r\n */\r\nexport interface FormatPrecisionProps extends CommonProps {\r\n  formatProps: FormatProps;\r\n  onChange?: (format: FormatProps) => void;\r\n}\r\n\r\n/** Component to show/edit Quantity Format Precision.\r\n * @alpha\r\n */\r\nexport function FormatPrecision(props: FormatPrecisionProps) {\r\n  const { formatProps, onChange } = props;\r\n\r\n  const handlePrecisionChange = React.useCallback((precision: number) => {\r\n    const newFormatProps = { ...formatProps, precision };\r\n    onChange && onChange(newFormatProps);\r\n  }, [formatProps, onChange]);\r\n\r\n  const formatType = parseFormatType(formatProps.type, \"format\");\r\n\r\n  const label = React.useRef(UiIModelComponents.translate(\"QuantityFormat.labels.precision\"));\r\n  return (\r\n    <>\r\n      <span className={\"uicore-label\"}>{label.current}</span>\r\n      {formatType === FormatType.Fractional ?\r\n        <FractionPrecisionSelector data-testid=\"fraction-precision-selector\" precision={formatProps.precision ?? 0} onChange={handlePrecisionChange} /> :\r\n        <DecimalPrecisionSelector data-testid=\"decimal-precision-selector\" precision={formatProps.precision ?? 0} onChange={handlePrecisionChange} />\r\n      }\r\n    </>\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"FormatPrecision.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/quantityformat/FormatPrecision.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAe,UAAU,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAU3D;;GAEG;AACH,MAAM,UAAU,eAAe,CAAC,KAA2B;IACzD,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAExC,MAAM,qBAAqB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,SAAiB,EAAE,EAAE;QACpE,MAAM,cAAc,GAAG,EAAE,GAAG,WAAW,EAAE,SAAS,EAAE,CAAC;QACrD,QAAQ,IAAI,QAAQ,CAAC,cAAc,CAAC,CAAC;IACvC,CAAC,EAAE,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE5B,MAAM,UAAU,GAAG,eAAe,CAAC,WAAW,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IAE/D,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,kBAAkB,CAAC,SAAS,CAAC,iCAAiC,CAAC,CAAC,CAAC;IAC5F,OAAO,CACL;QACE,8BAAM,SAAS,EAAE,cAAc,IAAG,KAAK,CAAC,OAAO,CAAQ;QACtD,UAAU,KAAK,UAAU,CAAC,UAAU,CAAC,CAAC;YACrC,oBAAC,yBAAyB,mBAAa,6BAA6B,EAAC,SAAS,EAAE,WAAW,CAAC,SAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,qBAAqB,GAAI,CAAC,CAAC;YACjJ,oBAAC,wBAAwB,mBAAa,4BAA4B,EAAC,SAAS,EAAE,WAAW,CAAC,SAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,qBAAqB,GAAI,CAE9I,CACJ,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module QuantityFormat\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { FormatProps, FormatType, parseFormatType } from \"@itwin/core-quantity\";\r\nimport { DecimalPrecisionSelector } from \"./misc/DecimalPrecision\";\r\nimport { FractionPrecisionSelector } from \"./misc/FractionPrecision\";\r\nimport { UiIModelComponents } from \"../UiIModelComponents\";\r\n\r\n/** Properties of [[FormatPrecision]] component.\r\n * @alpha\r\n */\r\nexport interface FormatPrecisionProps extends CommonProps {\r\n  formatProps: FormatProps;\r\n  onChange?: (format: FormatProps) => void;\r\n}\r\n\r\n/** Component to show/edit Quantity Format Precision.\r\n * @alpha\r\n */\r\nexport function FormatPrecision(props: FormatPrecisionProps) {\r\n  const { formatProps, onChange } = props;\r\n\r\n  const handlePrecisionChange = React.useCallback((precision: number) => {\r\n    const newFormatProps = { ...formatProps, precision };\r\n    onChange && onChange(newFormatProps);\r\n  }, [formatProps, onChange]);\r\n\r\n  const formatType = parseFormatType(formatProps.type, \"format\");\r\n\r\n  const label = React.useRef(UiIModelComponents.translate(\"QuantityFormat.labels.precision\"));\r\n  return (\r\n    <>\r\n      <span className={\"uicore-label\"}>{label.current}</span>\r\n      {formatType === FormatType.Fractional ?\r\n        <FractionPrecisionSelector data-testid=\"fraction-precision-selector\" precision={formatProps.precision ?? 0} onChange={handlePrecisionChange} /> :\r\n        <DecimalPrecisionSelector data-testid=\"decimal-precision-selector\" precision={formatProps.precision ?? 0} onChange={handlePrecisionChange} />\r\n      }\r\n    </>\r\n  );\r\n}\r\n"]}

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

@@ -1,19 +1,19 @@
-/** @packageDocumentation
- * @module QuantityFormat
- */
-/// <reference types="react" />
-import { FormatterSpec } from "@itwin/core-quantity";
-import { CommonProps } from "@itwin/core-react";
-/** Properties of [[FormatSample]] component.
- * @alpha
- */
-export interface FormatSampleProps extends CommonProps {
-    formatSpec?: FormatterSpec;
-    initialMagnitude?: number;
-    hideLabels?: boolean;
-}
-/** Component to show the persistence value and formatted value given a FormatterSpec.
- * @alpha
- */
-export declare function FormatSample(props: FormatSampleProps): JSX.Element;
+/** @packageDocumentation
+ * @module QuantityFormat
+ */
+/// <reference types="react" />
+import { FormatterSpec } from "@itwin/core-quantity";
+import { CommonProps } from "@itwin/core-react";
+/** Properties of [[FormatSample]] component.
+ * @alpha
+ */
+export interface FormatSampleProps extends CommonProps {
+    formatSpec?: FormatterSpec;
+    initialMagnitude?: number;
+    hideLabels?: boolean;
+}
+/** Component to show the persistence value and formatted value given a FormatterSpec.
+ * @alpha
+ */
+export declare function FormatSample(props: FormatSampleProps): JSX.Element;
 //# sourceMappingURL=FormatSample.d.ts.map

package/lib/esm/imodel-components-react/quantityformat/FormatSample.js

@@ -1,62 +1,62 @@
-/*---------------------------------------------------------------------------------------------
-* 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 { SpecialKey } from "@itwin/appui-abstract";
-import { Icon } from "@itwin/core-react";
-import { Input } from "@itwin/itwinui-react";
-import { UiIModelComponents } from "../UiIModelComponents";
-import { SvgProgressForward } from "@itwin/itwinui-icons-react";
-/** Component to show the persistence value and formatted value given a FormatterSpec.
- * @alpha
- */
-export function FormatSample(props) {
-    const { initialMagnitude, formatSpec, hideLabels } = props;
-    const initialValue = initialMagnitude !== null && initialMagnitude !== void 0 ? initialMagnitude : 0;
-    const [magnitude, setMagnitude] = React.useState(initialValue);
-    const [sampleValue, setSampleValue] = React.useState(initialValue.toString());
-    React.useEffect(() => {
-        const value = initialMagnitude !== null && initialMagnitude !== void 0 ? initialMagnitude : 0;
-        setMagnitude(value);
-        setSampleValue(value.toString());
-    }, [initialMagnitude]);
-    const handleOnValueBlur = React.useCallback(() => {
-        let newValue = Number.parseFloat(sampleValue);
-        if (Number.isNaN(newValue))
-            newValue = 0;
-        setMagnitude(newValue);
-        setSampleValue(newValue.toString());
-    }, [sampleValue]);
-    const handleOnValueChange = React.useCallback((event) => {
-        setSampleValue(event.target.value);
-    }, []);
-    const handleKeyDown = React.useCallback((e) => {
-        // istanbul ignore else
-        if (e.key === SpecialKey.Enter) {
-            let newValue = Number.parseFloat(sampleValue);
-            if (Number.isNaN(newValue))
-                newValue = 0;
-            setMagnitude(newValue);
-            setSampleValue(newValue.toString());
-            e.preventDefault();
-        }
-    }, [sampleValue]);
-    const activePersistenceUnitLabel = formatSpec ? formatSpec.persistenceUnit.label : "";
-    const formattedValue = formatSpec ? formatSpec.applyFormatting(magnitude) : "";
-    const valueLabel = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.value"));
-    const formattedLabel = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.formatted"));
-    return (React.createElement(React.Fragment, null,
-        !hideLabels && React.createElement("span", { className: "uicore-label" }, valueLabel.current),
-        React.createElement("span", { className: "components-inline" },
-            React.createElement(Input, { "data-testid": "format-sample-input", className: "components-quantity-persistence-input", value: sampleValue, onChange: handleOnValueChange, onKeyDown: handleKeyDown, onBlur: handleOnValueBlur, size: "small" }),
-            activePersistenceUnitLabel),
-        !hideLabels && React.createElement("span", { className: "uicore-label" }, formattedLabel.current),
-        React.createElement("span", { "data-testid": "progress-forward" },
-            hideLabels && (formattedValue.length > 0) && React.createElement(Icon, { iconSpec: React.createElement(SvgProgressForward, null) }),
-            React.createElement("span", { "data-testid": "format-sample-formatted", className: "uicore-label components-quantity-formatted-sample" }, formattedValue))));
-}
+/*---------------------------------------------------------------------------------------------
+* 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 { SpecialKey } from "@itwin/appui-abstract";
+import { Icon } from "@itwin/core-react";
+import { Input } from "@itwin/itwinui-react";
+import { UiIModelComponents } from "../UiIModelComponents";
+import { SvgProgressForward } from "@itwin/itwinui-icons-react";
+/** Component to show the persistence value and formatted value given a FormatterSpec.
+ * @alpha
+ */
+export function FormatSample(props) {
+    const { initialMagnitude, formatSpec, hideLabels } = props;
+    const initialValue = initialMagnitude ?? 0;
+    const [magnitude, setMagnitude] = React.useState(initialValue);
+    const [sampleValue, setSampleValue] = React.useState(initialValue.toString());
+    React.useEffect(() => {
+        const value = initialMagnitude ?? 0;
+        setMagnitude(value);
+        setSampleValue(value.toString());
+    }, [initialMagnitude]);
+    const handleOnValueBlur = React.useCallback(() => {
+        let newValue = Number.parseFloat(sampleValue);
+        if (Number.isNaN(newValue))
+            newValue = 0;
+        setMagnitude(newValue);
+        setSampleValue(newValue.toString());
+    }, [sampleValue]);
+    const handleOnValueChange = React.useCallback((event) => {
+        setSampleValue(event.target.value);
+    }, []);
+    const handleKeyDown = React.useCallback((e) => {
+        // istanbul ignore else
+        if (e.key === SpecialKey.Enter) {
+            let newValue = Number.parseFloat(sampleValue);
+            if (Number.isNaN(newValue))
+                newValue = 0;
+            setMagnitude(newValue);
+            setSampleValue(newValue.toString());
+            e.preventDefault();
+        }
+    }, [sampleValue]);
+    const activePersistenceUnitLabel = formatSpec ? formatSpec.persistenceUnit.label : "";
+    const formattedValue = formatSpec ? formatSpec.applyFormatting(magnitude) : "";
+    const valueLabel = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.value"));
+    const formattedLabel = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.formatted"));
+    return (React.createElement(React.Fragment, null,
+        !hideLabels && React.createElement("span", { className: "uicore-label" }, valueLabel.current),
+        React.createElement("span", { className: "components-inline" },
+            React.createElement(Input, { "data-testid": "format-sample-input", className: "components-quantity-persistence-input", value: sampleValue, onChange: handleOnValueChange, onKeyDown: handleKeyDown, onBlur: handleOnValueBlur, size: "small" }),
+            activePersistenceUnitLabel),
+        !hideLabels && React.createElement("span", { className: "uicore-label" }, formattedLabel.current),
+        React.createElement("span", { "data-testid": "progress-forward" },
+            hideLabels && (formattedValue.length > 0) && React.createElement(Icon, { iconSpec: React.createElement(SvgProgressForward, null) }),
+            React.createElement("span", { "data-testid": "format-sample-formatted", className: "uicore-label components-quantity-formatted-sample" }, formattedValue))));
+}
 //# sourceMappingURL=FormatSample.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormatSample.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/quantityformat/FormatSample.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 * as React from \"react\";\r\nimport { FormatterSpec } from \"@itwin/core-quantity\";\r\nimport { SpecialKey } from \"@itwin/appui-abstract\";\r\nimport { CommonProps, Icon } from \"@itwin/core-react\";\r\nimport { Input } from \"@itwin/itwinui-react\";\r\nimport { UiIModelComponents } from \"../UiIModelComponents\";\r\nimport { SvgProgressForward } from \"@itwin/itwinui-icons-react\";\r\n\r\n/** Properties of [[FormatSample]] component.\r\n * @alpha\r\n */\r\nexport interface FormatSampleProps extends CommonProps {\r\n  formatSpec?: FormatterSpec;\r\n  initialMagnitude?: number;\r\n  hideLabels?: boolean;\r\n}\r\n\r\n/** Component to show the persistence value and formatted value given a FormatterSpec.\r\n * @alpha\r\n */\r\nexport function FormatSample(props: FormatSampleProps) {\r\n  const { initialMagnitude, formatSpec, hideLabels } = props;\r\n  const initialValue = initialMagnitude ?? 0;\r\n  const [magnitude, setMagnitude] = React.useState(initialValue);\r\n  const [sampleValue, setSampleValue] = React.useState(initialValue.toString());\r\n\r\n  React.useEffect(() => {\r\n    const value = initialMagnitude ?? 0;\r\n    setMagnitude(value);\r\n    setSampleValue(value.toString());\r\n  }, [initialMagnitude]);\r\n\r\n  const handleOnValueBlur = React.useCallback(() => {\r\n    let newValue = Number.parseFloat(sampleValue);\r\n    if (Number.isNaN(newValue))\r\n      newValue = 0;\r\n    setMagnitude(newValue);\r\n    setSampleValue(newValue.toString());\r\n  }, [sampleValue]);\r\n\r\n  const handleOnValueChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\r\n    setSampleValue(event.target.value);\r\n  }, []);\r\n\r\n  const handleKeyDown = React.useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {\r\n    // istanbul ignore else\r\n    if (e.key === SpecialKey.Enter) {\r\n      let newValue = Number.parseFloat(sampleValue);\r\n      if (Number.isNaN(newValue))\r\n        newValue = 0;\r\n      setMagnitude(newValue);\r\n      setSampleValue(newValue.toString());\r\n      e.preventDefault();\r\n    }\r\n  }, [sampleValue]);\r\n\r\n  const activePersistenceUnitLabel = formatSpec ? formatSpec.persistenceUnit.label : \"\";\r\n  const formattedValue = formatSpec ? formatSpec.applyFormatting(magnitude) : \"\";\r\n\r\n  const valueLabel = React.useRef(UiIModelComponents.translate(\"QuantityFormat.labels.value\"));\r\n  const formattedLabel = React.useRef(UiIModelComponents.translate(\"QuantityFormat.labels.formatted\"));\r\n\r\n  return (\r\n    <>\r\n      {!hideLabels && <span className={\"uicore-label\"}>{valueLabel.current}</span>}\r\n      <span className=\"components-inline\">\r\n        <Input data-testid=\"format-sample-input\" className={\"components-quantity-persistence-input\"} value={sampleValue} onChange={handleOnValueChange} onKeyDown={handleKeyDown} onBlur={handleOnValueBlur} size=\"small\" />{activePersistenceUnitLabel}\r\n      </span>\r\n      {!hideLabels && <span className={\"uicore-label\"}>{formattedLabel.current}</span>}\r\n      <span data-testid=\"progress-forward\">\r\n        {hideLabels && (formattedValue.length > 0) && <Icon iconSpec={<SvgProgressForward />} />}\r\n        <span data-testid=\"format-sample-formatted\" className={\"uicore-label components-quantity-formatted-sample\"}>{formattedValue}</span>\r\n      </span>\r\n    </>\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"FormatSample.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/quantityformat/FormatSample.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 * as React from \"react\";\r\nimport { FormatterSpec } from \"@itwin/core-quantity\";\r\nimport { SpecialKey } from \"@itwin/appui-abstract\";\r\nimport { CommonProps, Icon } from \"@itwin/core-react\";\r\nimport { Input } from \"@itwin/itwinui-react\";\r\nimport { UiIModelComponents } from \"../UiIModelComponents\";\r\nimport { SvgProgressForward } from \"@itwin/itwinui-icons-react\";\r\n\r\n/** Properties of [[FormatSample]] component.\r\n * @alpha\r\n */\r\nexport interface FormatSampleProps extends CommonProps {\r\n  formatSpec?: FormatterSpec;\r\n  initialMagnitude?: number;\r\n  hideLabels?: boolean;\r\n}\r\n\r\n/** Component to show the persistence value and formatted value given a FormatterSpec.\r\n * @alpha\r\n */\r\nexport function FormatSample(props: FormatSampleProps) {\r\n  const { initialMagnitude, formatSpec, hideLabels } = props;\r\n  const initialValue = initialMagnitude ?? 0;\r\n  const [magnitude, setMagnitude] = React.useState(initialValue);\r\n  const [sampleValue, setSampleValue] = React.useState(initialValue.toString());\r\n\r\n  React.useEffect(() => {\r\n    const value = initialMagnitude ?? 0;\r\n    setMagnitude(value);\r\n    setSampleValue(value.toString());\r\n  }, [initialMagnitude]);\r\n\r\n  const handleOnValueBlur = React.useCallback(() => {\r\n    let newValue = Number.parseFloat(sampleValue);\r\n    if (Number.isNaN(newValue))\r\n      newValue = 0;\r\n    setMagnitude(newValue);\r\n    setSampleValue(newValue.toString());\r\n  }, [sampleValue]);\r\n\r\n  const handleOnValueChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\r\n    setSampleValue(event.target.value);\r\n  }, []);\r\n\r\n  const handleKeyDown = React.useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {\r\n    // istanbul ignore else\r\n    if (e.key === SpecialKey.Enter) {\r\n      let newValue = Number.parseFloat(sampleValue);\r\n      if (Number.isNaN(newValue))\r\n        newValue = 0;\r\n      setMagnitude(newValue);\r\n      setSampleValue(newValue.toString());\r\n      e.preventDefault();\r\n    }\r\n  }, [sampleValue]);\r\n\r\n  const activePersistenceUnitLabel = formatSpec ? formatSpec.persistenceUnit.label : \"\";\r\n  const formattedValue = formatSpec ? formatSpec.applyFormatting(magnitude) : \"\";\r\n\r\n  const valueLabel = React.useRef(UiIModelComponents.translate(\"QuantityFormat.labels.value\"));\r\n  const formattedLabel = React.useRef(UiIModelComponents.translate(\"QuantityFormat.labels.formatted\"));\r\n\r\n  return (\r\n    <>\r\n      {!hideLabels && <span className={\"uicore-label\"}>{valueLabel.current}</span>}\r\n      <span className=\"components-inline\">\r\n        <Input data-testid=\"format-sample-input\" className={\"components-quantity-persistence-input\"} value={sampleValue} onChange={handleOnValueChange} onKeyDown={handleKeyDown} onBlur={handleOnValueBlur} size=\"small\" />{activePersistenceUnitLabel}\r\n      </span>\r\n      {!hideLabels && <span className={\"uicore-label\"}>{formattedLabel.current}</span>}\r\n      <span data-testid=\"progress-forward\">\r\n        {hideLabels && (formattedValue.length > 0) && <Icon iconSpec={<SvgProgressForward />} />}\r\n        <span data-testid=\"format-sample-formatted\" className={\"uicore-label components-quantity-formatted-sample\"}>{formattedValue}</span>\r\n      </span>\r\n    </>\r\n  );\r\n}\r\n"]}

package/lib/esm/imodel-components-react/quantityformat/FormatType.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 [[FormatTypeOptionProps]] component.
- * @alpha
- */
-export interface FormatTypeOptionProps extends CommonProps {
-    formatProps: FormatProps;
-    onChange?: (format: FormatProps) => void;
-}
-/** Component to set the Quantity Format type.
- * @alpha
- */
-export declare function FormatTypeOption(props: FormatTypeOptionProps): JSX.Element;
+/** @packageDocumentation
+ * @module QuantityFormat
+ */
+/// <reference types="react" />
+import { CommonProps } from "@itwin/core-react";
+import { FormatProps } from "@itwin/core-quantity";
+/** Properties of [[FormatTypeOptionProps]] component.
+ * @alpha
+ */
+export interface FormatTypeOptionProps extends CommonProps {
+    formatProps: FormatProps;
+    onChange?: (format: FormatProps) => void;
+}
+/** Component to set the Quantity Format type.
+ * @alpha
+ */
+export declare function FormatTypeOption(props: FormatTypeOptionProps): JSX.Element;
 //# sourceMappingURL=FormatType.d.ts.map

package/lib/esm/imodel-components-react/quantityformat/FormatType.js

@@ -1,64 +1,63 @@
-/*---------------------------------------------------------------------------------------------
-* 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 { DecimalPrecision, FormatType, formatTypeToString, FractionalPrecision, parseFormatType, ScientificType, scientificTypeToString, } from "@itwin/core-quantity";
-import { Select } from "@itwin/itwinui-react";
-/** Component to select the format type.
- * @alpha
- */
-function FormatTypeSelector(props) {
-    const { type, onChange, ...otherProps } = props;
-    const formatOptions = React.useRef([
-        { value: FormatType.Decimal, label: UiIModelComponents.translate("QuantityFormat.decimal") },
-        { value: FormatType.Scientific, label: UiIModelComponents.translate("QuantityFormat.scientific") },
-        { value: FormatType.Station, label: UiIModelComponents.translate("QuantityFormat.station") },
-        { value: FormatType.Fractional, label: UiIModelComponents.translate("QuantityFormat.fractional") },
-    ]);
-    const handleOnChange = React.useCallback((newValue) => {
-        onChange && onChange(newValue);
-    }, [onChange]);
-    return (React.createElement(Select, { options: formatOptions.current, value: type, onChange: handleOnChange, size: "small", ...otherProps }));
-}
-/** Component to set the Quantity Format type.
- * @alpha
- */
-export function FormatTypeOption(props) {
-    const { formatProps, onChange } = props;
-    const handleFormatTypeChange = React.useCallback((newType) => {
-        var _a;
-        const type = formatTypeToString(newType);
-        let precision;
-        let stationOffsetSize;
-        let scientificType;
-        switch (newType) { // type must be decimal, fractional, scientific, or station
-            case FormatType.Scientific:
-                precision = DecimalPrecision.Six;
-                scientificType = scientificTypeToString(ScientificType.Normalized);
-                break;
-            case FormatType.Decimal:
-                precision = DecimalPrecision.Four;
-                break;
-            case FormatType.Station:
-                precision = DecimalPrecision.Two;
-                stationOffsetSize = ((_a = formatProps.composite) === null || _a === void 0 ? void 0 : _a.units[0].name.toLocaleLowerCase().endsWith("m")) ? 3 : 2;
-                break;
-            case FormatType.Fractional:
-                precision = FractionalPrecision.Eight;
-                break;
-        }
-        const newFormatProps = { ...formatProps, type, precision, scientificType, stationOffsetSize };
-        onChange && onChange(newFormatProps);
-    }, [formatProps, onChange]);
-    const formatType = parseFormatType(formatProps.type, "format");
-    const label = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.type"));
-    return (React.createElement(React.Fragment, null,
-        React.createElement("span", { className: "uicore-label.current" }, label.current),
-        React.createElement(FormatTypeSelector, { "data-testid": "format-type-selector", type: formatType, onChange: handleFormatTypeChange })));
-}
+/*---------------------------------------------------------------------------------------------
+* 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 { DecimalPrecision, FormatType, formatTypeToString, FractionalPrecision, parseFormatType, ScientificType, scientificTypeToString, } from "@itwin/core-quantity";
+import { Select } from "@itwin/itwinui-react";
+/** Component to select the format type.
+ * @alpha
+ */
+function FormatTypeSelector(props) {
+    const { type, onChange, ...otherProps } = props;
+    const formatOptions = React.useRef([
+        { value: FormatType.Decimal, label: UiIModelComponents.translate("QuantityFormat.decimal") },
+        { value: FormatType.Scientific, label: UiIModelComponents.translate("QuantityFormat.scientific") },
+        { value: FormatType.Station, label: UiIModelComponents.translate("QuantityFormat.station") },
+        { value: FormatType.Fractional, label: UiIModelComponents.translate("QuantityFormat.fractional") },
+    ]);
+    const handleOnChange = React.useCallback((newValue) => {
+        onChange && onChange(newValue);
+    }, [onChange]);
+    return (React.createElement(Select, { options: formatOptions.current, value: type, onChange: handleOnChange, size: "small", ...otherProps }));
+}
+/** Component to set the Quantity Format type.
+ * @alpha
+ */
+export function FormatTypeOption(props) {
+    const { formatProps, onChange } = props;
+    const handleFormatTypeChange = React.useCallback((newType) => {
+        const type = formatTypeToString(newType);
+        let precision;
+        let stationOffsetSize;
+        let scientificType;
+        switch (newType) { // type must be decimal, fractional, scientific, or station
+            case FormatType.Scientific:
+                precision = DecimalPrecision.Six;
+                scientificType = scientificTypeToString(ScientificType.Normalized);
+                break;
+            case FormatType.Decimal:
+                precision = DecimalPrecision.Four;
+                break;
+            case FormatType.Station:
+                precision = DecimalPrecision.Two;
+                stationOffsetSize = formatProps.composite?.units[0].name.toLocaleLowerCase().endsWith("m") ? 3 : 2;
+                break;
+            case FormatType.Fractional:
+                precision = FractionalPrecision.Eight;
+                break;
+        }
+        const newFormatProps = { ...formatProps, type, precision, scientificType, stationOffsetSize };
+        onChange && onChange(newFormatProps);
+    }, [formatProps, onChange]);
+    const formatType = parseFormatType(formatProps.type, "format");
+    const label = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.type"));
+    return (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: "uicore-label.current" }, label.current),
+        React.createElement(FormatTypeSelector, { "data-testid": "format-type-selector", type: formatType, onChange: handleFormatTypeChange })));
+}
 //# sourceMappingURL=FormatType.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormatType.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/quantityformat/FormatType.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 * as React from \"react\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { UiIModelComponents } from \"../UiIModelComponents\";\r\nimport { DecimalPrecision, FormatProps, FormatType, formatTypeToString, FractionalPrecision, parseFormatType,\r\n  ScientificType, scientificTypeToString,\r\n} from \"@itwin/core-quantity\";\r\nimport { Select, SelectOption } from \"@itwin/itwinui-react\";\r\n\r\n/** Properties of [[FormatTypeSelector]] component.\r\n * @alpha\r\n */\r\ninterface FormatTypeSelectorProps extends CommonProps {\r\n  type: FormatType;\r\n  onChange: (value: FormatType) => void;\r\n}\r\n\r\n/** Component to select the format type.\r\n * @alpha\r\n */\r\nfunction FormatTypeSelector(props: FormatTypeSelectorProps) {\r\n  const { type, onChange, ...otherProps } = props;\r\n  const formatOptions = React.useRef<SelectOption<FormatType>[]>([\r\n    { value: FormatType.Decimal, label: UiIModelComponents.translate(\"QuantityFormat.decimal\") },\r\n    { value: FormatType.Scientific, label: UiIModelComponents.translate(\"QuantityFormat.scientific\") },\r\n    { value: FormatType.Station, label: UiIModelComponents.translate(\"QuantityFormat.station\") },\r\n    { value: FormatType.Fractional, label: UiIModelComponents.translate(\"QuantityFormat.fractional\") },\r\n  ]);\r\n\r\n  const handleOnChange = React.useCallback((newValue: FormatType) => {\r\n    onChange && onChange(newValue);\r\n  }, [onChange]);\r\n\r\n  return (\r\n    <Select options={formatOptions.current} value={type} onChange={handleOnChange} size=\"small\" {...otherProps} />\r\n  );\r\n}\r\n\r\n/** Properties of [[FormatTypeOptionProps]] component.\r\n * @alpha\r\n */\r\nexport interface FormatTypeOptionProps extends CommonProps {\r\n  formatProps: FormatProps;\r\n  onChange?: (format: FormatProps) => void;\r\n}\r\n\r\n/** Component to set the Quantity Format type.\r\n * @alpha\r\n */\r\nexport function FormatTypeOption(props: FormatTypeOptionProps) {\r\n  const { formatProps, onChange } = props;\r\n  const handleFormatTypeChange = React.useCallback((newType: FormatType) => {\r\n    const type = formatTypeToString(newType);\r\n    let precision: number | undefined;\r\n    let stationOffsetSize: number | undefined;\r\n    let scientificType: string | undefined;\r\n    switch (newType) { // type must be decimal, fractional, scientific, or station\r\n      case FormatType.Scientific:\r\n        precision = DecimalPrecision.Six;\r\n        scientificType = scientificTypeToString(ScientificType.Normalized);\r\n        break;\r\n      case FormatType.Decimal:\r\n        precision = DecimalPrecision.Four;\r\n        break;\r\n      case FormatType.Station:\r\n        precision = DecimalPrecision.Two;\r\n        stationOffsetSize = formatProps.composite?.units[0].name.toLocaleLowerCase().endsWith(\"m\") ? 3 : 2;\r\n        break;\r\n      case FormatType.Fractional:\r\n        precision = FractionalPrecision.Eight;\r\n        break;\r\n    }\r\n    const newFormatProps = { ...formatProps, type, precision, scientificType, stationOffsetSize };\r\n    onChange && onChange(newFormatProps);\r\n  }, [formatProps, onChange]);\r\n\r\n  const formatType = parseFormatType(formatProps.type, \"format\");\r\n  const label = React.useRef(UiIModelComponents.translate(\"QuantityFormat.labels.type\"));\r\n\r\n  return (\r\n    <>\r\n      <span className={\"uicore-label.current\"}>{label.current}</span>\r\n      <FormatTypeSelector data-testid=\"format-type-selector\" type={formatType} onChange={handleFormatTypeChange} />\r\n    </>\r\n  );\r\n}\r\n\r\n"]}
+{"version":3,"file":"FormatType.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/quantityformat/FormatType.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 * as React from \"react\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { UiIModelComponents } from \"../UiIModelComponents\";\r\nimport { DecimalPrecision, FormatProps, FormatType, formatTypeToString, FractionalPrecision, parseFormatType,\r\n  ScientificType, scientificTypeToString,\r\n} from \"@itwin/core-quantity\";\r\nimport { Select, SelectOption } from \"@itwin/itwinui-react\";\r\n\r\n/** Properties of [[FormatTypeSelector]] component.\r\n * @alpha\r\n */\r\ninterface FormatTypeSelectorProps extends CommonProps {\r\n  type: FormatType;\r\n  onChange: (value: FormatType) => void;\r\n}\r\n\r\n/** Component to select the format type.\r\n * @alpha\r\n */\r\nfunction FormatTypeSelector(props: FormatTypeSelectorProps) {\r\n  const { type, onChange, ...otherProps } = props;\r\n  const formatOptions = React.useRef<SelectOption<FormatType>[]>([\r\n    { value: FormatType.Decimal, label: UiIModelComponents.translate(\"QuantityFormat.decimal\") },\r\n    { value: FormatType.Scientific, label: UiIModelComponents.translate(\"QuantityFormat.scientific\") },\r\n    { value: FormatType.Station, label: UiIModelComponents.translate(\"QuantityFormat.station\") },\r\n    { value: FormatType.Fractional, label: UiIModelComponents.translate(\"QuantityFormat.fractional\") },\r\n  ]);\r\n\r\n  const handleOnChange = React.useCallback((newValue: FormatType) => {\r\n    onChange && onChange(newValue);\r\n  }, [onChange]);\r\n\r\n  return (\r\n    <Select options={formatOptions.current} value={type} onChange={handleOnChange} size=\"small\" {...otherProps} />\r\n  );\r\n}\r\n\r\n/** Properties of [[FormatTypeOptionProps]] component.\r\n * @alpha\r\n */\r\nexport interface FormatTypeOptionProps extends CommonProps {\r\n  formatProps: FormatProps;\r\n  onChange?: (format: FormatProps) => void;\r\n}\r\n\r\n/** Component to set the Quantity Format type.\r\n * @alpha\r\n */\r\nexport function FormatTypeOption(props: FormatTypeOptionProps) {\r\n  const { formatProps, onChange } = props;\r\n  const handleFormatTypeChange = React.useCallback((newType: FormatType) => {\r\n    const type = formatTypeToString(newType);\r\n    let precision: number | undefined;\r\n    let stationOffsetSize: number | undefined;\r\n    let scientificType: string | undefined;\r\n    switch (newType) { // type must be decimal, fractional, scientific, or station\r\n      case FormatType.Scientific:\r\n        precision = DecimalPrecision.Six;\r\n        scientificType = scientificTypeToString(ScientificType.Normalized);\r\n        break;\r\n      case FormatType.Decimal:\r\n        precision = DecimalPrecision.Four;\r\n        break;\r\n      case FormatType.Station:\r\n        precision = DecimalPrecision.Two;\r\n        stationOffsetSize = formatProps.composite?.units[0].name.toLocaleLowerCase().endsWith(\"m\") ? 3 : 2;\r\n        break;\r\n      case FormatType.Fractional:\r\n        precision = FractionalPrecision.Eight;\r\n        break;\r\n    }\r\n    const newFormatProps = { ...formatProps, type, precision, scientificType, stationOffsetSize };\r\n    onChange && onChange(newFormatProps);\r\n  }, [formatProps, onChange]);\r\n\r\n  const formatType = parseFormatType(formatProps.type, \"format\");\r\n  const label = React.useRef(UiIModelComponents.translate(\"QuantityFormat.labels.type\"));\r\n\r\n  return (\r\n    <>\r\n      <span className={\"uicore-label.current\"}>{label.current}</span>\r\n      <FormatTypeSelector data-testid=\"format-type-selector\" type={formatType} onChange={handleFormatTypeChange} />\r\n    </>\r\n  );\r\n}\r\n\r\n"]}

package/lib/esm/imodel-components-react/quantityformat/FormatUnitLabel.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 [[FormatUnitLabel]] component.
- * @alpha
- */
-export interface FormatUnitLabelProps extends CommonProps {
-    formatProps: FormatProps;
-    onUnitLabelChange?: (format: FormatProps) => void;
-}
-/** Component to set the label separator definition in a Quantity Format and if it the label is to be displayed.
- * @alpha
- */
-export declare function FormatUnitLabel(props: FormatUnitLabelProps): JSX.Element;
+/** @packageDocumentation
+ * @module QuantityFormat
+ */
+/// <reference types="react" />
+import { CommonProps } from "@itwin/core-react";
+import { FormatProps } from "@itwin/core-quantity";
+/** Properties of [[FormatUnitLabel]] component.
+ * @alpha
+ */
+export interface FormatUnitLabelProps extends CommonProps {
+    formatProps: FormatProps;
+    onUnitLabelChange?: (format: FormatProps) => void;
+}
+/** Component to set the label separator definition in a Quantity Format and if it the label is to be displayed.
+ * @alpha
+ */
+export declare function FormatUnitLabel(props: FormatUnitLabelProps): JSX.Element;
 //# sourceMappingURL=FormatUnitLabel.d.ts.map