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

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

@@ -3,8 +3,9 @@
  */
 import "./FormatPanel.scss";
 import * as React from "react";
-import { FormatProps, FormatterSpec, UnitProps, UnitsProvider } from "@itwin/core-quantity";
-import { CommonProps } from "@itwin/core-react";
+import type { FormatProps, UnitProps, UnitsProvider } from "@itwin/core-quantity";
+import { FormatterSpec } from "@itwin/core-quantity";
+import type { CommonProps } from "@itwin/core-react";
 /** Properties of [[FormatPanel]] component.
  * @alpha
  */

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

@@ -1 +1 @@
-{"version":3,"file":"FormatPanel.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/quantityformat/FormatPanel.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAC5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAU,WAAW,EAAE,aAAa,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACpG,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAQhD;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,aAAa,EAAE,WAAW,CAAC;IAC3B,aAAa,EAAE,aAAa,CAAC;IAC7B,eAAe,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,SAAS,CAAC;IAChD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC/C,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,EAAE,eAAe,EAAE,SAAS,EAAE,aAAa,EAAE,aAAa,KAAK,OAAO,CAAC,aAAa,CAAC,CAAC;IACnI,sBAAsB,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAC,QAAQ,EAAE,WAAW,KAAK,IAAI,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1H,wBAAwB,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAC,QAAQ,EAAE,WAAW,KAAK,IAAI,KAAK,KAAK,CAAC,SAAS,CAAC;CAC7H;AAOD;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,eAiElD"}
+{"version":3,"file":"FormatPanel.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/quantityformat/FormatPanel.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAC5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAClF,OAAO,EAAU,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAQrD;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,aAAa,EAAE,WAAW,CAAC;IAC3B,aAAa,EAAE,aAAa,CAAC;IAC7B,eAAe,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,SAAS,CAAC;IAChD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC/C,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,EAAE,eAAe,EAAE,SAAS,EAAE,aAAa,EAAE,aAAa,KAAK,OAAO,CAAC,aAAa,CAAC,CAAC;IACnI,sBAAsB,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAC,QAAQ,EAAE,WAAW,KAAK,IAAI,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1H,wBAAwB,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAC,QAAQ,EAAE,WAAW,KAAK,IAAI,KAAK,KAAK,CAAC,SAAS,CAAC;CAC7H;AAOD;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,eAiElD"}

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

@@ -67,7 +67,7 @@ export function FormatPanel(props) {
     return (React.createElement("div", { className: "components-quantityFormat-panel" },
         showSample &&
             React.createElement(FormatSample, { formatSpec: formatSpec, initialMagnitude: initialMagnitude }),
-        React.createElement(FormatUnits, { unitsProvider: unitsProvider, persistenceUnit: formatSpec?.persistenceUnit, initialFormat: formatProps, onUnitsChange: handleFormatChange }),
+        React.createElement(FormatUnits, { unitsProvider: unitsProvider, persistenceUnit: formatSpec === null || formatSpec === void 0 ? void 0 : formatSpec.persistenceUnit, initialFormat: formatProps, onUnitsChange: handleFormatChange }),
         React.createElement(FormatUnitLabel, { formatProps: formatProps, onUnitLabelChange: handleFormatChange }),
         React.createElement(FormatTypeOption, { formatProps: formatProps, onChange: handleFormatChange }),
         React.createElement(FormatPrecision, { formatProps: formatProps, onChange: handleFormatChange }),

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

@@ -1 +1 @@
-{"version":3,"file":"FormatPanel.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/quantityformat/FormatPanel.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 \"./FormatPanel.scss\";\r\nimport * as React from \"react\";\r\nimport { Format, FormatProps, FormatterSpec, UnitProps, UnitsProvider } from \"@itwin/core-quantity\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { FormatPrecision } from \"./FormatPrecision\";\r\nimport { FormatSample } from \"./FormatSample\";\r\nimport { FormatTypeOption } from \"./FormatType\";\r\nimport { FormatUnitLabel } from \"./FormatUnitLabel\";\r\nimport { FormatUnits } from \"./FormatUnits\";\r\nimport { MiscFormatOptions } from \"./MiscFormatOptions\";\r\n\r\n/** Properties of [[FormatPanel]] component.\r\n * @alpha\r\n */\r\nexport interface FormatPanelProps extends CommonProps {\r\n  initialFormat: FormatProps;\r\n  unitsProvider: UnitsProvider;\r\n  persistenceUnit: Promise<UnitProps> | UnitProps;\r\n  showSample?: boolean;\r\n  initialMagnitude?: number;\r\n  // if true a only primary format properties are initially displayed and a \"More/Less\" link is added.\r\n  enableMinimumProperties?: boolean;\r\n  onFormatChange?: (format: FormatProps) => void;\r\n  provideFormatSpec?: (formatProps: FormatProps, persistenceUnit: UnitProps, unitsProvider: UnitsProvider) => Promise<FormatterSpec>;\r\n  providePrimaryChildren?: (formatProps: FormatProps, fireFormatChange: (newProps: FormatProps) => void) => React.ReactNode;\r\n  provideSecondaryChildren?: (formatProps: FormatProps, fireFormatChange: (newProps: FormatProps) => void) => React.ReactNode;\r\n}\r\n\r\nasync function generateFormatSpec(formatProps: FormatProps, persistenceUnit: UnitProps, unitsProvider: UnitsProvider) {\r\n  const actualFormat = await Format.createFromJSON(\"custom\", unitsProvider, formatProps);\r\n  return FormatterSpec.create(actualFormat.name, actualFormat, unitsProvider, persistenceUnit);\r\n}\r\n\r\n/** Component to show/edit Quantity Format.\r\n * @alpha\r\n */\r\nexport function FormatPanel(props: FormatPanelProps) {\r\n  const [formatSpec, setFormatSpec] = React.useState<FormatterSpec>();\r\n  const { initialFormat, showSample, initialMagnitude, unitsProvider, persistenceUnit, onFormatChange, provideFormatSpec, enableMinimumProperties } = props;\r\n  const [formatProps, setFormatProps] = React.useState(initialFormat);\r\n  const [showOptions, setShowOptions] = React.useState(false);\r\n\r\n  React.useEffect(() => {\r\n    setFormatProps(initialFormat);\r\n    setFormatSpec(undefined); // this will trigger the new spec to be created in the useEffect hook\r\n  }, [initialFormat]);\r\n\r\n  const handleUserFormatChanges = React.useCallback((newProps: FormatProps) => {\r\n    setFormatProps(newProps);\r\n    setFormatSpec(undefined); // this will trigger the new spec to be created in the useEffect hook\r\n    onFormatChange && onFormatChange(newProps);\r\n  }, [onFormatChange]);\r\n\r\n  const isMounted = React.useRef(false);\r\n\r\n  // runs returned function only when component is unmounted.\r\n  React.useEffect(() => {\r\n    isMounted.current = true;\r\n    return (() => {\r\n      isMounted.current = false;\r\n    });\r\n  }, []);\r\n\r\n  React.useEffect(() => {\r\n    async function fetchFormatSpec() {\r\n      const pu = await persistenceUnit;\r\n      let newFormatSpec: FormatterSpec;\r\n      if (provideFormatSpec) {\r\n        newFormatSpec = await provideFormatSpec(formatProps, pu, unitsProvider);\r\n      } else {\r\n        newFormatSpec = await generateFormatSpec(formatProps, pu, unitsProvider);\r\n      }\r\n      isMounted.current && setFormatSpec(newFormatSpec);\r\n    }\r\n    if (!formatSpec)\r\n      fetchFormatSpec(); // eslint-disable-line @typescript-eslint/no-floating-promises\r\n  }, [formatProps, formatSpec, persistenceUnit, provideFormatSpec, unitsProvider]);\r\n\r\n  const handleFormatChange = React.useCallback((newFormatProps: FormatProps) => {\r\n    handleUserFormatChanges(newFormatProps);\r\n  }, [handleUserFormatChanges]);\r\n\r\n  const handleShowOptions = React.useCallback((show: boolean) => {\r\n    setShowOptions(show);\r\n  }, []);\r\n\r\n  return (\r\n    <div className=\"components-quantityFormat-panel\">\r\n      {showSample &&\r\n        <FormatSample formatSpec={formatSpec} initialMagnitude={initialMagnitude} />\r\n      }\r\n      <FormatUnits unitsProvider={unitsProvider} persistenceUnit={formatSpec?.persistenceUnit} initialFormat={formatProps} onUnitsChange={handleFormatChange} />\r\n      <FormatUnitLabel formatProps={formatProps} onUnitLabelChange={handleFormatChange} />\r\n      <FormatTypeOption formatProps={formatProps} onChange={handleFormatChange} />\r\n      <FormatPrecision formatProps={formatProps} onChange={handleFormatChange} />\r\n      {props.providePrimaryChildren && props.providePrimaryChildren(formatProps, handleFormatChange)}\r\n      <MiscFormatOptions formatProps={formatProps} onChange={handleFormatChange} enableMinimumProperties={enableMinimumProperties} showOptions={showOptions} onShowHideOptions={handleShowOptions}>\r\n        {props.provideSecondaryChildren && props.provideSecondaryChildren(formatProps, handleFormatChange)}\r\n      </MiscFormatOptions>\r\n    </div>\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"FormatPanel.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/quantityformat/FormatPanel.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 \"./FormatPanel.scss\";\nimport * as React from \"react\";\nimport type { FormatProps, UnitProps, UnitsProvider } from \"@itwin/core-quantity\";\nimport { Format, FormatterSpec } from \"@itwin/core-quantity\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { FormatPrecision } from \"./FormatPrecision\";\nimport { FormatSample } from \"./FormatSample\";\nimport { FormatTypeOption } from \"./FormatType\";\nimport { FormatUnitLabel } from \"./FormatUnitLabel\";\nimport { FormatUnits } from \"./FormatUnits\";\nimport { MiscFormatOptions } from \"./MiscFormatOptions\";\n\n/** Properties of [[FormatPanel]] component.\n * @alpha\n */\nexport interface FormatPanelProps extends CommonProps {\n  initialFormat: FormatProps;\n  unitsProvider: UnitsProvider;\n  persistenceUnit: Promise<UnitProps> | UnitProps;\n  showSample?: boolean;\n  initialMagnitude?: number;\n  // if true a only primary format properties are initially displayed and a \"More/Less\" link is added.\n  enableMinimumProperties?: boolean;\n  onFormatChange?: (format: FormatProps) => void;\n  provideFormatSpec?: (formatProps: FormatProps, persistenceUnit: UnitProps, unitsProvider: UnitsProvider) => Promise<FormatterSpec>;\n  providePrimaryChildren?: (formatProps: FormatProps, fireFormatChange: (newProps: FormatProps) => void) => React.ReactNode;\n  provideSecondaryChildren?: (formatProps: FormatProps, fireFormatChange: (newProps: FormatProps) => void) => React.ReactNode;\n}\n\nasync function generateFormatSpec(formatProps: FormatProps, persistenceUnit: UnitProps, unitsProvider: UnitsProvider) {\n  const actualFormat = await Format.createFromJSON(\"custom\", unitsProvider, formatProps);\n  return FormatterSpec.create(actualFormat.name, actualFormat, unitsProvider, persistenceUnit);\n}\n\n/** Component to show/edit Quantity Format.\n * @alpha\n */\nexport function FormatPanel(props: FormatPanelProps) {\n  const [formatSpec, setFormatSpec] = React.useState<FormatterSpec>();\n  const { initialFormat, showSample, initialMagnitude, unitsProvider, persistenceUnit, onFormatChange, provideFormatSpec, enableMinimumProperties } = props;\n  const [formatProps, setFormatProps] = React.useState(initialFormat);\n  const [showOptions, setShowOptions] = React.useState(false);\n\n  React.useEffect(() => {\n    setFormatProps(initialFormat);\n    setFormatSpec(undefined); // this will trigger the new spec to be created in the useEffect hook\n  }, [initialFormat]);\n\n  const handleUserFormatChanges = React.useCallback((newProps: FormatProps) => {\n    setFormatProps(newProps);\n    setFormatSpec(undefined); // this will trigger the new spec to be created in the useEffect hook\n    onFormatChange && onFormatChange(newProps);\n  }, [onFormatChange]);\n\n  const isMounted = React.useRef(false);\n\n  // runs returned function only when component is unmounted.\n  React.useEffect(() => {\n    isMounted.current = true;\n    return (() => {\n      isMounted.current = false;\n    });\n  }, []);\n\n  React.useEffect(() => {\n    async function fetchFormatSpec() {\n      const pu = await persistenceUnit;\n      let newFormatSpec: FormatterSpec;\n      if (provideFormatSpec) {\n        newFormatSpec = await provideFormatSpec(formatProps, pu, unitsProvider);\n      } else {\n        newFormatSpec = await generateFormatSpec(formatProps, pu, unitsProvider);\n      }\n      isMounted.current && setFormatSpec(newFormatSpec);\n    }\n    if (!formatSpec)\n      fetchFormatSpec(); // eslint-disable-line @typescript-eslint/no-floating-promises\n  }, [formatProps, formatSpec, persistenceUnit, provideFormatSpec, unitsProvider]);\n\n  const handleFormatChange = React.useCallback((newFormatProps: FormatProps) => {\n    handleUserFormatChanges(newFormatProps);\n  }, [handleUserFormatChanges]);\n\n  const handleShowOptions = React.useCallback((show: boolean) => {\n    setShowOptions(show);\n  }, []);\n\n  return (\n    <div className=\"components-quantityFormat-panel\">\n      {showSample &&\n        <FormatSample formatSpec={formatSpec} initialMagnitude={initialMagnitude} />\n      }\n      <FormatUnits unitsProvider={unitsProvider} persistenceUnit={formatSpec?.persistenceUnit} initialFormat={formatProps} onUnitsChange={handleFormatChange} />\n      <FormatUnitLabel formatProps={formatProps} onUnitLabelChange={handleFormatChange} />\n      <FormatTypeOption formatProps={formatProps} onChange={handleFormatChange} />\n      <FormatPrecision formatProps={formatProps} onChange={handleFormatChange} />\n      {props.providePrimaryChildren && props.providePrimaryChildren(formatProps, handleFormatChange)}\n      <MiscFormatOptions formatProps={formatProps} onChange={handleFormatChange} enableMinimumProperties={enableMinimumProperties} showOptions={showOptions} onShowHideOptions={handleShowOptions}>\n        {props.provideSecondaryChildren && props.provideSecondaryChildren(formatProps, handleFormatChange)}\n      </MiscFormatOptions>\n    </div>\n  );\n}\n"]}

package/lib/esm/imodel-components-react/quantityformat/FormatPanel.scss

@@ -1,59 +1,59 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/inputs/variables";
-
-.components-quantityFormat-panel {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  row-gap: 0;
-  column-gap: 6px;
-  align-items: center;
-
-  > .uicore-label {
-    font-size: var(--iui-font-size-1);
-    margin: 4.4px 0;
-
-    /* match margin on other select controls so it spaces properly in grid */
-    &.uicore-disabled {
-      color: var(--iui-color-text-disabled);
-    }
-  }
-
-  > span.components-inline {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 4px;
-  }
-
-  > button.components-quantityFormat-more-button {
-    grid-column: 1 / span 2;
-    border: none;
-    outline: none;
-    background: none;
-  }
-
-  .components-quantityFormat-more-button-label {
-    margin-right: 0.25em;
-  }
-
-  > a.components-quantityFormat-more-less {
-    font-size: var(--iui-font-size-1);
-    color: var(--iui-color-text-negative);
-    -webkit-transition: text-decoration 1s ease;
-    -moz-transition: text-decoration 1s ease;
-    -o-transition: text-decoration 1s ease;
-    transition: text-decoration 0.1s ease;
-
-    &:hover {
-      text-decoration: underline;
-      cursor: pointer;
-    }
-  }
-
-  .iui-input {
-    padding: $uicore-iui-input-padding;
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/inputs/variables";
+
+.components-quantityFormat-panel {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  row-gap: 0;
+  column-gap: 6px;
+  align-items: center;
+
+  > .uicore-label {
+    font-size: var(--iui-font-size-1);
+    margin: 4.4px 0;
+
+    /* match margin on other select controls so it spaces properly in grid */
+    &.uicore-disabled {
+      color: var(--iui-color-text-disabled);
+    }
+  }
+
+  > span.components-inline {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+  }
+
+  > button.components-quantityFormat-more-button {
+    grid-column: 1 / span 2;
+    border: none;
+    outline: none;
+    background: none;
+  }
+
+  .components-quantityFormat-more-button-label {
+    margin-right: 0.25em;
+  }
+
+  > a.components-quantityFormat-more-less {
+    font-size: var(--iui-font-size-1);
+    color: var(--iui-color-text-negative);
+    -webkit-transition: text-decoration 1s ease;
+    -moz-transition: text-decoration 1s ease;
+    -o-transition: text-decoration 1s ease;
+    transition: text-decoration 0.1s ease;
+
+    &:hover {
+      text-decoration: underline;
+      cursor: pointer;
+    }
+  }
+
+  .iui-input {
+    padding: $uicore-iui-input-padding;
+  }
+}

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

@@ -2,8 +2,8 @@
  * @module QuantityFormat
  */
 /// <reference types="react" />
-import { CommonProps } from "@itwin/core-react";
-import { FormatProps } from "@itwin/core-quantity";
+import type { CommonProps } from "@itwin/core-react";
+import type { FormatProps } from "@itwin/core-quantity";
 /** Properties of [[FormatPrecision]] component.
  * @alpha
  */

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

@@ -1 +1 @@
-{"version":3,"file":"FormatPrecision.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/quantityformat/FormatPrecision.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAGH,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,WAAW,EAA+B,MAAM,sBAAsB,CAAC;AAKhF;;GAEG;AACH,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,WAAW,EAAE,WAAW,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CAC1C;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAoB1D"}
+{"version":3,"file":"FormatPrecision.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/quantityformat/FormatPrecision.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAGH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,EAAE,WAAW,EAAC,MAAM,sBAAsB,CAAC;AAMvD;;GAEG;AACH,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,WAAW,EAAE,WAAW,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CAC1C;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAoB1D"}

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

@@ -14,6 +14,7 @@ import { UiIModelComponents } from "../UiIModelComponents";
  * @alpha
  */
 export function FormatPrecision(props) {
+    var _a, _b;
     const { formatProps, onChange } = props;
     const handlePrecisionChange = React.useCallback((precision) => {
         const newFormatProps = { ...formatProps, precision };
@@ -24,7 +25,7 @@ export function FormatPrecision(props) {
     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 })));
+            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 })));
 }
 //# 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,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"]}
+{"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;AAG/B,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACnE,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":["/*---------------------------------------------------------------------------------------------\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 type { CommonProps } from \"@itwin/core-react\";\nimport type { FormatProps} from \"@itwin/core-quantity\";\nimport { FormatType, parseFormatType } from \"@itwin/core-quantity\";\nimport { DecimalPrecisionSelector } from \"./misc/DecimalPrecision\";\nimport { FractionPrecisionSelector } from \"./misc/FractionPrecision\";\nimport { UiIModelComponents } from \"../UiIModelComponents\";\n\n/** Properties of [[FormatPrecision]] component.\n * @alpha\n */\nexport interface FormatPrecisionProps extends CommonProps {\n  formatProps: FormatProps;\n  onChange?: (format: FormatProps) => void;\n}\n\n/** Component to show/edit Quantity Format Precision.\n * @alpha\n */\nexport function FormatPrecision(props: FormatPrecisionProps) {\n  const { formatProps, onChange } = props;\n\n  const handlePrecisionChange = React.useCallback((precision: number) => {\n    const newFormatProps = { ...formatProps, precision };\n    onChange && onChange(newFormatProps);\n  }, [formatProps, onChange]);\n\n  const formatType = parseFormatType(formatProps.type, \"format\");\n\n  const label = React.useRef(UiIModelComponents.translate(\"QuantityFormat.labels.precision\"));\n  return (\n    <>\n      <span className={\"uicore-label\"}>{label.current}</span>\n      {formatType === FormatType.Fractional ?\n        <FractionPrecisionSelector data-testid=\"fraction-precision-selector\" precision={formatProps.precision ?? 0} onChange={handlePrecisionChange} /> :\n        <DecimalPrecisionSelector data-testid=\"decimal-precision-selector\" precision={formatProps.precision ?? 0} onChange={handlePrecisionChange} />\n      }\n    </>\n  );\n}\n"]}

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

@@ -2,8 +2,8 @@
  * @module QuantityFormat
  */
 /// <reference types="react" />
-import { FormatterSpec } from "@itwin/core-quantity";
-import { CommonProps } from "@itwin/core-react";
+import type { FormatterSpec } from "@itwin/core-quantity";
+import type { CommonProps } from "@itwin/core-react";
 /** Properties of [[FormatSample]] component.
  * @alpha
  */

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

@@ -1 +1 @@
-{"version":3,"file":"FormatSample.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/quantityformat/FormatSample.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAGH,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EAAE,WAAW,EAAQ,MAAM,mBAAmB,CAAC;AAKtD;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,eAuDpD"}
+{"version":3,"file":"FormatSample.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/quantityformat/FormatSample.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAGH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAE1D,OAAO,KAAK,EAAE,WAAW,EAAC,MAAM,mBAAmB,CAAC;AAMpD;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,eAuDpD"}

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

@@ -16,11 +16,11 @@ import { SvgProgressForward } from "@itwin/itwinui-icons-react";
  */
 export function FormatSample(props) {
     const { initialMagnitude, formatSpec, hideLabels } = props;
-    const initialValue = initialMagnitude ?? 0;
+    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 ?? 0;
+        const value = initialMagnitude !== null && initialMagnitude !== void 0 ? initialMagnitude : 0;
         setMagnitude(value);
         setSampleValue(value.toString());
     }, [initialMagnitude]);

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

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

@@ -2,8 +2,8 @@
  * @module QuantityFormat
  */
 /// <reference types="react" />
-import { CommonProps } from "@itwin/core-react";
-import { FormatProps } from "@itwin/core-quantity";
+import type { CommonProps } from "@itwin/core-react";
+import type { FormatProps } from "@itwin/core-quantity";
 /** Properties of [[FormatTypeOptionProps]] component.
  * @alpha
  */

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

@@ -1 +1 @@
-{"version":3,"file":"FormatType.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/quantityformat/FormatType.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAGH,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAoB,WAAW,EAErC,MAAM,sBAAsB,CAAC;AAgC9B;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,WAAW;IACxD,WAAW,EAAE,WAAW,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CAC1C;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,eAoC5D"}
+{"version":3,"file":"FormatType.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/quantityformat/FormatType.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAGH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,KAAK,EAAE,WAAW,EAAC,MAAM,sBAAsB,CAAC;AAoCvD;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,WAAW;IACxD,WAAW,EAAE,WAAW,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CAC1C;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,eAoC5D"}

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

@@ -31,6 +31,7 @@ function FormatTypeSelector(props) {
 export function FormatTypeOption(props) {
     const { formatProps, onChange } = props;
     const handleFormatTypeChange = React.useCallback((newType) => {
+        var _a;
         const type = formatTypeToString(newType);
         let precision;
         let stationOffsetSize;
@@ -45,7 +46,7 @@ export function FormatTypeOption(props) {
                 break;
             case FormatType.Station:
                 precision = DecimalPrecision.Two;
-                stationOffsetSize = formatProps.composite?.units[0].name.toLocaleLowerCase().endsWith("m") ? 3 : 2;
+                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;

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":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAE3D,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,eAAe,EAC7F,cAAc,EAAE,sBAAsB,GACvC,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAU9C;;GAEG;AACH,SAAS,kBAAkB,CAAC,KAA8B;IACxD,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAChD,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAA6B;QAC7D,EAAE,KAAK,EAAE,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,kBAAkB,CAAC,SAAS,CAAC,wBAAwB,CAAC,EAAE;QAC5F,EAAE,KAAK,EAAE,UAAU,CAAC,UAAU,EAAE,KAAK,EAAE,kBAAkB,CAAC,SAAS,CAAC,2BAA2B,CAAC,EAAE;QAClG,EAAE,KAAK,EAAE,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,kBAAkB,CAAC,SAAS,CAAC,wBAAwB,CAAC,EAAE;QAC5F,EAAE,KAAK,EAAE,UAAU,CAAC,UAAU,EAAE,KAAK,EAAE,kBAAkB,CAAC,SAAS,CAAC,2BAA2B,CAAC,EAAE;KACnG,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,QAAoB,EAAE,EAAE;QAChE,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,EAAE,IAAI,EAAC,OAAO,KAAK,UAAU,GAAI,CAC/G,CAAC;AACJ,CAAC;AAUD;;GAEG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAA4B;IAC3D,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACxC,MAAM,sBAAsB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,OAAmB,EAAE,EAAE;;QACvE,MAAM,IAAI,GAAG,kBAAkB,CAAC,OAAO,CAAC,CAAC;QACzC,IAAI,SAA6B,CAAC;QAClC,IAAI,iBAAqC,CAAC;QAC1C,IAAI,cAAkC,CAAC;QACvC,QAAQ,OAAO,EAAE,EAAE,2DAA2D;YAC5E,KAAK,UAAU,CAAC,UAAU;gBACxB,SAAS,GAAG,gBAAgB,CAAC,GAAG,CAAC;gBACjC,cAAc,GAAG,sBAAsB,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;gBACnE,MAAM;YACR,KAAK,UAAU,CAAC,OAAO;gBACrB,SAAS,GAAG,gBAAgB,CAAC,IAAI,CAAC;gBAClC,MAAM;YACR,KAAK,UAAU,CAAC,OAAO;gBACrB,SAAS,GAAG,gBAAgB,CAAC,GAAG,CAAC;gBACjC,iBAAiB,GAAG,CAAA,MAAA,WAAW,CAAC,SAAS,0CAAE,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,iBAAiB,GAAG,QAAQ,CAAC,GAAG,CAAC,EAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACnG,MAAM;YACR,KAAK,UAAU,CAAC,UAAU;gBACxB,SAAS,GAAG,mBAAmB,CAAC,KAAK,CAAC;gBACtC,MAAM;SACT;QACD,MAAM,cAAc,GAAG,EAAE,GAAG,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,EAAE,iBAAiB,EAAE,CAAC;QAC9F,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;IAC/D,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,kBAAkB,CAAC,SAAS,CAAC,4BAA4B,CAAC,CAAC,CAAC;IAEvF,OAAO,CACL;QACE,8BAAM,SAAS,EAAE,sBAAsB,IAAG,KAAK,CAAC,OAAO,CAAQ;QAC/D,oBAAC,kBAAkB,mBAAa,sBAAsB,EAAC,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,sBAAsB,GAAI,CAC5G,CACJ,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 type { CommonProps } from \"@itwin/core-react\";\nimport { UiIModelComponents } from \"../UiIModelComponents\";\nimport type { FormatProps} from \"@itwin/core-quantity\";\nimport { DecimalPrecision, FormatType, formatTypeToString, FractionalPrecision, parseFormatType,\n  ScientificType, scientificTypeToString,\n} from \"@itwin/core-quantity\";\nimport type { SelectOption } from \"@itwin/itwinui-react\";\nimport { Select } from \"@itwin/itwinui-react\";\n\n/** Properties of [[FormatTypeSelector]] component.\n * @alpha\n */\ninterface FormatTypeSelectorProps extends CommonProps {\n  type: FormatType;\n  onChange: (value: FormatType) => void;\n}\n\n/** Component to select the format type.\n * @alpha\n */\nfunction FormatTypeSelector(props: FormatTypeSelectorProps) {\n  const { type, onChange, ...otherProps } = props;\n  const formatOptions = React.useRef<SelectOption<FormatType>[]>([\n    { value: FormatType.Decimal, label: UiIModelComponents.translate(\"QuantityFormat.decimal\") },\n    { value: FormatType.Scientific, label: UiIModelComponents.translate(\"QuantityFormat.scientific\") },\n    { value: FormatType.Station, label: UiIModelComponents.translate(\"QuantityFormat.station\") },\n    { value: FormatType.Fractional, label: UiIModelComponents.translate(\"QuantityFormat.fractional\") },\n  ]);\n\n  const handleOnChange = React.useCallback((newValue: FormatType) => {\n    onChange && onChange(newValue);\n  }, [onChange]);\n\n  return (\n    <Select options={formatOptions.current} value={type} onChange={handleOnChange} size=\"small\" {...otherProps} />\n  );\n}\n\n/** Properties of [[FormatTypeOptionProps]] component.\n * @alpha\n */\nexport interface FormatTypeOptionProps extends CommonProps {\n  formatProps: FormatProps;\n  onChange?: (format: FormatProps) => void;\n}\n\n/** Component to set the Quantity Format type.\n * @alpha\n */\nexport function FormatTypeOption(props: FormatTypeOptionProps) {\n  const { formatProps, onChange } = props;\n  const handleFormatTypeChange = React.useCallback((newType: FormatType) => {\n    const type = formatTypeToString(newType);\n    let precision: number | undefined;\n    let stationOffsetSize: number | undefined;\n    let scientificType: string | undefined;\n    switch (newType) { // type must be decimal, fractional, scientific, or station\n      case FormatType.Scientific:\n        precision = DecimalPrecision.Six;\n        scientificType = scientificTypeToString(ScientificType.Normalized);\n        break;\n      case FormatType.Decimal:\n        precision = DecimalPrecision.Four;\n        break;\n      case FormatType.Station:\n        precision = DecimalPrecision.Two;\n        stationOffsetSize = formatProps.composite?.units[0].name.toLocaleLowerCase().endsWith(\"m\") ? 3 : 2;\n        break;\n      case FormatType.Fractional:\n        precision = FractionalPrecision.Eight;\n        break;\n    }\n    const newFormatProps = { ...formatProps, type, precision, scientificType, stationOffsetSize };\n    onChange && onChange(newFormatProps);\n  }, [formatProps, onChange]);\n\n  const formatType = parseFormatType(formatProps.type, \"format\");\n  const label = React.useRef(UiIModelComponents.translate(\"QuantityFormat.labels.type\"));\n\n  return (\n    <>\n      <span className={\"uicore-label.current\"}>{label.current}</span>\n      <FormatTypeSelector data-testid=\"format-type-selector\" type={formatType} onChange={handleFormatTypeChange} />\n    </>\n  );\n}\n\n"]}

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

@@ -2,8 +2,8 @@
  * @module QuantityFormat
  */
 /// <reference types="react" />
-import { CommonProps } from "@itwin/core-react";
-import { FormatProps } from "@itwin/core-quantity";
+import type { CommonProps } from "@itwin/core-react";
+import type { FormatProps } from "@itwin/core-quantity";
 /** Properties of [[FormatUnitLabel]] component.
  * @alpha
  */

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

@@ -1 +1 @@
-{"version":3,"file":"FormatUnitLabel.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/quantityformat/FormatUnitLabel.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAIH,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAU,WAAW,EAAgC,MAAM,sBAAsB,CAAC;AAqCzF;;GAEG;AACH,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,WAAW,EAAE,WAAW,CAAC;IACzB,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CACnD;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAsD1D"}
+{"version":3,"file":"FormatUnitLabel.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/quantityformat/FormatUnitLabel.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAIH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,EAAE,WAAW,EAAC,MAAM,sBAAsB,CAAC;AAuCvD;;GAEG;AACH,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,WAAW,EAAE,WAAW,CAAC;IACzB,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CACnD;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAsD1D"}

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

@@ -35,6 +35,7 @@ function UomSeparatorSelector(props) {
  * @alpha
  */
 export function FormatUnitLabel(props) {
+    var _a;
     const { formatProps, onUnitLabelChange } = props;
     const handleSetFormatProps = React.useCallback((newProps) => {
         onUnitLabelChange && onUnitLabelChange(newProps);
@@ -78,6 +79,6 @@ export function FormatUnitLabel(props) {
         React.createElement("span", { className: "uicore-label" }, appendUnitLabel.current),
         React.createElement(Checkbox, { "data-testid": "show-unit-label-checkbox", checked: isFormatTraitSet(FormatTraits.ShowUnitLabel), onChange: handleShowUnitLabelChange }),
         React.createElement("span", { className: classnames("uicore-label", !isFormatTraitSet(FormatTraits.ShowUnitLabel) && "uicore-disabled") }, labelSeparator.current),
-        React.createElement(UomSeparatorSelector, { "data-testid": "uom-separator-select", separator: formatProps.uomSeparator ?? "", onChange: handleUomSeparatorChange, disabled: !isFormatTraitSet(FormatTraits.ShowUnitLabel) })));
+        React.createElement(UomSeparatorSelector, { "data-testid": "uom-separator-select", separator: (_a = formatProps.uomSeparator) !== null && _a !== void 0 ? _a : "", onChange: handleUomSeparatorChange, disabled: !isFormatTraitSet(FormatTraits.ShowUnitLabel) })));
 }
 //# sourceMappingURL=FormatUnitLabel.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormatUnitLabel.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/quantityformat/FormatUnitLabel.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAe,YAAY,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACzF,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAgB,MAAM,sBAAsB,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAQ3D,SAAS,oBAAoB,CAAC,KAAgC;IAC5D,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IACrD,MAAM,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAyB;QAC7D,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,kBAAkB,CAAC,SAAS,CAAC,qBAAqB,CAAC,EAAE;QACzE,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,kBAAkB,CAAC,SAAS,CAAC,sBAAsB,CAAC,EAAE;QAC3E,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,kBAAkB,CAAC,SAAS,CAAC,qBAAqB,CAAC,EAAE;KAC3E,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,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,cAAc,EAAE,IAAI,EAAC,OAAO,KAAK,UAAU,GAAI,CAC/G,CAAC;AACJ,CAAC;AAUD;;GAEG;AACH,MAAM,UAAU,eAAe,CAAC,KAA2B;IACzD,MAAM,EAAE,WAAW,EAAE,iBAAiB,EAAE,GAAG,KAAK,CAAC;IAEjD,MAAM,oBAAoB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,QAAqB,EAAE,EAAE;QACvE,iBAAiB,IAAI,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IACnD,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAExB,MAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAmB,EAAE,EAAE;QACjE,OAAO,MAAM,CAAC,uBAAuB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;IAC5D,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAmB,EAAE,SAAkB,EAAE,EAAE;QACnF,MAAM,QAAQ,GAAG,cAAc,CAAC,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,uBAAuB;gBACvB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,QAAQ,KAAK,UAAU,CAAC,EAAE;oBACzD,YAAY,GAAG,CAAC,GAAG,MAAM,EAAE,QAAQ,CAAC,CAAC;iBACtC;aACF;SACF;aAAM,EAAC,iBAAiB;YACvB,uBAAuB;YACvB,IAAI,CAAC,WAAW,CAAC,YAAY;gBAC3B,OAAO;YACT,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;YACxJ,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,UAAU,KAAK,QAAQ,CAAC,CAAC;SACvE;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,wBAAwB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,YAAoB,EAAE,EAAE;QAC1E,MAAM,cAAc,GAAG,EAAE,GAAG,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,CAAC;QACtE,oBAAoB,CAAC,cAAc,CAAC,CAAC;IACvC,CAAC,EAAE,CAAC,WAAW,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAExC,MAAM,yBAAyB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAsC,EAAE,EAAE;QAC7F,cAAc,CAAC,YAAY,CAAC,aAAa,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAC/D,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC,kBAAkB,CAAC,SAAS,CAAC,uCAAuC,CAAC,CAAC,CAAC;IAC5G,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC,kBAAkB,CAAC,SAAS,CAAC,sCAAsC,CAAC,CAAC,CAAC;IAE1G,OAAO,CACL;QACE,8BAAM,SAAS,EAAE,cAAc,IAAG,eAAe,CAAC,OAAO,CAAQ;QACjE,oBAAC,QAAQ,mBAAa,0BAA0B,EAAC,OAAO,EAAE,gBAAgB,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,QAAQ,EAAE,yBAAyB,GAAI;QAC/I,8BAAM,SAAS,EAAE,UAAU,CAAC,cAAc,EAAE,CAAC,gBAAgB,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,iBAAiB,CAAC,IAAG,cAAc,CAAC,OAAO,CAAQ;QAChJ,oBAAC,oBAAoB,mBAAa,sBAAsB,EAAC,SAAS,EAAE,WAAW,CAAC,YAAY,IAAI,EAAE,EAAE,QAAQ,EAAE,wBAAwB,EAAE,QAAQ,EAAE,CAAC,gBAAgB,CAAC,YAAY,CAAC,aAAa,CAAC,GAAI,CAClM,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 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, Select, SelectOption } from \"@itwin/itwinui-react\";\r\nimport { UiIModelComponents } from \"../UiIModelComponents\";\r\n\r\ninterface UomSeparatorSelectorProps extends CommonProps {\r\n  separator: string;\r\n  disabled?: boolean;\r\n  onChange: (value: string) => void;\r\n}\r\n\r\nfunction UomSeparatorSelector(props: UomSeparatorSelectorProps) {\r\n  const { separator, onChange, ...otherProps } = props;\r\n  const uomDefaultEntries = React.useRef<SelectOption<string>[]>([\r\n    { value: \"\", label: UiIModelComponents.translate(\"QuantityFormat.none\") },\r\n    { value: \" \", label: UiIModelComponents.translate(\"QuantityFormat.space\") },\r\n    { value: \"-\", label: UiIModelComponents.translate(\"QuantityFormat.dash\") },\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} value={separator} onChange={handleOnChange} size=\"small\" {...otherProps} />\r\n  );\r\n}\r\n\r\n/** Properties of [[FormatUnitLabel]] component.\r\n * @alpha\r\n */\r\nexport interface FormatUnitLabelProps extends CommonProps {\r\n  formatProps: FormatProps;\r\n  onUnitLabelChange?: (format: FormatProps) => void;\r\n}\r\n\r\n/** Component to set the label separator definition in a Quantity Format and if it the label is to be displayed.\r\n * @alpha\r\n */\r\nexport function FormatUnitLabel(props: FormatUnitLabelProps) {\r\n  const { formatProps, onUnitLabelChange } = props;\r\n\r\n  const handleSetFormatProps = React.useCallback((newProps: FormatProps) => {\r\n    onUnitLabelChange && onUnitLabelChange(newProps);\r\n  }, [onUnitLabelChange]);\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 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        // istanbul ignore else\r\n        if (!traits.find((traitEntry) => traitStr === traitEntry)) {\r\n          formatTraits = [...traits, traitStr];\r\n        }\r\n      }\r\n    } else {// clearing trait\r\n      // istanbul ignore next\r\n      if (!formatProps.formatTraits)\r\n        return;\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    const newFormatProps = { ...formatProps, formatTraits };\r\n    handleSetFormatProps(newFormatProps);\r\n  }, [formatProps, handleSetFormatProps]);\r\n\r\n  const handleUomSeparatorChange = React.useCallback((newSeparator: string) => {\r\n    const newFormatProps = { ...formatProps, uomSeparator: newSeparator };\r\n    handleSetFormatProps(newFormatProps);\r\n  }, [formatProps, handleSetFormatProps]);\r\n\r\n  const handleShowUnitLabelChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\r\n    setFormatTrait(FormatTraits.ShowUnitLabel, e.target.checked);\r\n  }, [setFormatTrait]);\r\n\r\n  const appendUnitLabel = React.useRef(UiIModelComponents.translate(\"QuantityFormat.labels.appendUnitLabel\"));\r\n  const labelSeparator = React.useRef(UiIModelComponents.translate(\"QuantityFormat.labels.labelSeparator\"));\r\n\r\n  return (\r\n    <>\r\n      <span className={\"uicore-label\"}>{appendUnitLabel.current}</span>\r\n      <Checkbox data-testid=\"show-unit-label-checkbox\" checked={isFormatTraitSet(FormatTraits.ShowUnitLabel)} onChange={handleShowUnitLabelChange} />\r\n      <span className={classnames(\"uicore-label\", !isFormatTraitSet(FormatTraits.ShowUnitLabel) && \"uicore-disabled\")}>{labelSeparator.current}</span>\r\n      <UomSeparatorSelector data-testid=\"uom-separator-select\" separator={formatProps.uomSeparator ?? \"\"} onChange={handleUomSeparatorChange} disabled={!isFormatTraitSet(FormatTraits.ShowUnitLabel)} />\r\n    </>\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"FormatUnitLabel.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/quantityformat/FormatUnitLabel.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 type { CommonProps } from \"@itwin/core-react\";\nimport type { FormatProps} from \"@itwin/core-quantity\";\nimport { Format, FormatTraits, getTraitString } from \"@itwin/core-quantity\";\nimport type { SelectOption } from \"@itwin/itwinui-react\";\nimport { Checkbox, Select } from \"@itwin/itwinui-react\";\nimport { UiIModelComponents } from \"../UiIModelComponents\";\n\ninterface UomSeparatorSelectorProps extends CommonProps {\n  separator: string;\n  disabled?: boolean;\n  onChange: (value: string) => void;\n}\n\nfunction UomSeparatorSelector(props: UomSeparatorSelectorProps) {\n  const { separator, onChange, ...otherProps } = props;\n  const uomDefaultEntries = React.useRef<SelectOption<string>[]>([\n    { value: \"\", label: UiIModelComponents.translate(\"QuantityFormat.none\") },\n    { value: \" \", label: UiIModelComponents.translate(\"QuantityFormat.space\") },\n    { value: \"-\", label: UiIModelComponents.translate(\"QuantityFormat.dash\") },\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} value={separator} onChange={handleOnChange} size=\"small\" {...otherProps} />\n  );\n}\n\n/** Properties of [[FormatUnitLabel]] component.\n * @alpha\n */\nexport interface FormatUnitLabelProps extends CommonProps {\n  formatProps: FormatProps;\n  onUnitLabelChange?: (format: FormatProps) => void;\n}\n\n/** Component to set the label separator definition in a Quantity Format and if it the label is to be displayed.\n * @alpha\n */\nexport function FormatUnitLabel(props: FormatUnitLabelProps) {\n  const { formatProps, onUnitLabelChange } = props;\n\n  const handleSetFormatProps = React.useCallback((newProps: FormatProps) => {\n    onUnitLabelChange && onUnitLabelChange(newProps);\n  }, [onUnitLabelChange]);\n\n  const isFormatTraitSet = React.useCallback((trait: FormatTraits) => {\n    return Format.isFormatTraitSetInProps(formatProps, trait);\n  }, [formatProps]);\n\n  const setFormatTrait = React.useCallback((trait: FormatTraits, setActive: boolean) => {\n    const traitStr = 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        // istanbul ignore else\n        if (!traits.find((traitEntry) => traitStr === traitEntry)) {\n          formatTraits = [...traits, traitStr];\n        }\n      }\n    } else {// clearing trait\n      // istanbul ignore next\n      if (!formatProps.formatTraits)\n        return;\n      const traits = Array.isArray(formatProps.formatTraits) ? formatProps.formatTraits : /* istanbul ignore next */ formatProps.formatTraits.split(/,|;|\\|/);\n      formatTraits = traits.filter((traitEntry) => traitEntry !== traitStr);\n    }\n    const newFormatProps = { ...formatProps, formatTraits };\n    handleSetFormatProps(newFormatProps);\n  }, [formatProps, handleSetFormatProps]);\n\n  const handleUomSeparatorChange = React.useCallback((newSeparator: string) => {\n    const newFormatProps = { ...formatProps, uomSeparator: newSeparator };\n    handleSetFormatProps(newFormatProps);\n  }, [formatProps, handleSetFormatProps]);\n\n  const handleShowUnitLabelChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n    setFormatTrait(FormatTraits.ShowUnitLabel, e.target.checked);\n  }, [setFormatTrait]);\n\n  const appendUnitLabel = React.useRef(UiIModelComponents.translate(\"QuantityFormat.labels.appendUnitLabel\"));\n  const labelSeparator = React.useRef(UiIModelComponents.translate(\"QuantityFormat.labels.labelSeparator\"));\n\n  return (\n    <>\n      <span className={\"uicore-label\"}>{appendUnitLabel.current}</span>\n      <Checkbox data-testid=\"show-unit-label-checkbox\" checked={isFormatTraitSet(FormatTraits.ShowUnitLabel)} onChange={handleShowUnitLabelChange} />\n      <span className={classnames(\"uicore-label\", !isFormatTraitSet(FormatTraits.ShowUnitLabel) && \"uicore-disabled\")}>{labelSeparator.current}</span>\n      <UomSeparatorSelector data-testid=\"uom-separator-select\" separator={formatProps.uomSeparator ?? \"\"} onChange={handleUomSeparatorChange} disabled={!isFormatTraitSet(FormatTraits.ShowUnitLabel)} />\n    </>\n  );\n}\n"]}

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

@@ -2,8 +2,8 @@
  * @module QuantityFormat
  */
 /// <reference types="react" />
-import { CommonProps } from "@itwin/core-react";
-import { FormatProps, UnitProps, UnitsProvider } from "@itwin/core-quantity";
+import type { CommonProps } from "@itwin/core-react";
+import type { FormatProps, UnitProps, UnitsProvider } from "@itwin/core-quantity";
 /** Properties of [[FormatUnits]] component.
  * @alpha
  */

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

@@ -1 +1 @@
-{"version":3,"file":"FormatUnits.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/quantityformat/FormatUnits.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAGH,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAK7E;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,aAAa,EAAE,WAAW,CAAC;IAC3B,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,aAAa,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CAC/C;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,eA0GlD"}
+{"version":3,"file":"FormatUnits.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/quantityformat/FormatUnits.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAGH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAKlF;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,aAAa,EAAE,WAAW,CAAC;IAC3B,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,aAAa,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CAC/C;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,eA0GlD"}

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

@@ -13,6 +13,7 @@ import { UiIModelComponents } from "../UiIModelComponents";
  * @alpha
  */
 export function FormatUnits(props) {
+    var _a, _b, _c;
     const { initialFormat, persistenceUnit, unitsProvider, onUnitsChange } = props;
     const initialFormatRef = React.useRef(initialFormat);
     const [formatProps, setFormatProps] = React.useState(initialFormat);
@@ -93,15 +94,18 @@ export function FormatUnits(props) {
     }, [formatProps, handleSetFormatProps]);
     const compositeSpacer = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.compositeSpacer"));
     return (React.createElement(React.Fragment, null,
-        (formatProps.composite?.units)
+        ((_a = formatProps.composite) === null || _a === void 0 ? void 0 : _a.units)
             ?
-                formatProps.composite.units.map((value, index) => React.createElement(UnitDescr, { key: value.name, name: value.name, label: value.label ?? "", parentUnitName: index > 0 ? formatProps.composite.units[index - 1].name :
-                        undefined, unitsProvider: unitsProvider, index: index, onUnitChange: handleUnitChange, onLabelChange: handleUnitLabelChange, readonly: index < (formatProps.composite.units.length - 1) }))
+                formatProps.composite.units.map((value, index) => {
+                    var _a;
+                    return React.createElement(UnitDescr, { key: value.name, name: value.name, label: (_a = value.label) !== null && _a !== void 0 ? _a : "", parentUnitName: index > 0 ? formatProps.composite.units[index - 1].name :
+                            undefined, unitsProvider: unitsProvider, index: index, onUnitChange: handleUnitChange, onLabelChange: handleUnitLabelChange, readonly: index < (formatProps.composite.units.length - 1) });
+                })
             :
                 persistenceUnit && React.createElement(UnitDescr, { key: persistenceUnit.name, name: persistenceUnit.name, label: persistenceUnit.label, unitsProvider: unitsProvider, index: 0, onUnitChange: handleUnitChange, onLabelChange: handleUnitLabelChange }),
-        (formatProps.composite?.units && formatProps.composite.units.length > 1) &&
+        (((_b = formatProps.composite) === null || _b === void 0 ? void 0 : _b.units) && formatProps.composite.units.length > 1) &&
             React.createElement(React.Fragment, null,
                 React.createElement("span", { key: "composite-spacer-label", className: "uicore-label" }, compositeSpacer.current),
-                React.createElement(Input, { key: "composite-spacer", "data-testid": "composite-spacer", value: formatProps.composite.spacer ?? "", onChange: handleOnSpacerChange, size: "small" }))));
+                React.createElement(Input, { key: "composite-spacer", "data-testid": "composite-spacer", value: (_c = formatProps.composite.spacer) !== null && _c !== void 0 ? _c : "", onChange: handleOnSpacerChange, size: "small" }))));
 }
 //# sourceMappingURL=FormatUnits.js.map