@itwin/appui-react 3.6.0-dev.7 → 3.6.0

package/lib/cjs/appui-react/settings/quantityformatting/QuantityFormat.js

@@ -1,203 +1,203 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Settings
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.QuantityFormatSettingsPage = exports.getQuantityFormatsSettingsManagerEntry = void 0;
-require("./QuantityFormat.scss");
-const React = require("react");
-const core_geometry_1 = require("@itwin/core-geometry");
-const core_frontend_1 = require("@itwin/core-frontend");
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const imodel_components_react_1 = require("@itwin/imodel-components-react");
-const core_react_1 = require("@itwin/core-react");
-const ModalDialogManager_1 = require("../../dialog/ModalDialogManager");
-const UiFramework_1 = require("../../UiFramework");
-const UnitSystemSelector_1 = require("./UnitSystemSelector");
-const presentation_frontend_1 = require("@itwin/presentation-frontend");
-const itwinui_react_1 = require("@itwin/itwinui-react");
-function formatAreEqual(obj1, obj2) {
-    const compare = new core_geometry_1.DeepCompare();
-    return compare.compare(obj1, obj2);
-}
-/**
- * Return a SettingsTabEntry that can be used to define the available settings that can be set for an application.
- * @param itemPriority - Used to define the order of the entry in the Settings Stage
- * @param opts - Options to initialize the settings page that allows users to set Quantity formatting overrides.
- * @beta
- */
-function getQuantityFormatsSettingsManagerEntry(itemPriority, opts) {
-    const { availableUnitSystems, initialQuantityType } = { ...opts };
-    return {
-        itemPriority, tabId: "uifw:Quantity",
-        label: UiFramework_1.UiFramework.translate("settings.quantity-formatting.label"),
-        subLabel: UiFramework_1.UiFramework.translate("settings.quantity-formatting.subLabel"),
-        page: React.createElement(QuantityFormatSettingsPage, { initialQuantityType: initialQuantityType !== null && initialQuantityType !== void 0 ? initialQuantityType : core_frontend_1.QuantityType.Length, availableUnitSystems: availableUnitSystems !== null && availableUnitSystems !== void 0 ? availableUnitSystems : new Set(["metric", "imperial", "usCustomary", "usSurvey"]) }),
-        isDisabled: false,
-        icon: "icon-measure",
-        tooltip: UiFramework_1.UiFramework.translate("settings.quantity-formatting.tooltip"),
-        pageWillHandleCloseRequest: true,
-    };
-}
-exports.getQuantityFormatsSettingsManagerEntry = getQuantityFormatsSettingsManagerEntry;
-/** UI Component shown in settings page to set the active Presentation Unit System and to set format overrides.
- * @beta
- */
-function QuantityFormatSettingsPage({ initialQuantityType, availableUnitSystems }) {
-    const [activeUnitSystemKey, setActiveUnitSystemKey] = React.useState(core_frontend_1.IModelApp.quantityFormatter.activeUnitSystem);
-    const [activeQuantityType, setActiveQuantityType] = React.useState((0, core_frontend_1.getQuantityTypeKey)(initialQuantityType));
-    const [activeFormatterSpec, setActiveFormatterSpec] = React.useState(core_frontend_1.IModelApp.quantityFormatter.findFormatterSpecByQuantityType((0, core_frontend_1.getQuantityTypeKey)(activeQuantityType)));
-    const [saveEnabled, setSaveEnabled] = React.useState(false);
-    const [clearEnabled, setClearEnabled] = React.useState(core_frontend_1.IModelApp.quantityFormatter.hasActiveOverride(initialQuantityType, true));
-    const newQuantityTypeRef = React.useRef();
-    const formatSectionLabel = React.useRef(UiFramework_1.UiFramework.translate("settings.quantity-formatting.formatSectionLabel"));
-    const setButtonLabel = React.useRef(UiFramework_1.UiFramework.translate("settings.quantity-formatting.setButtonLabel"));
-    const clearButtonLabel = React.useRef(UiFramework_1.UiFramework.translate("settings.quantity-formatting.clearButtonLabel"));
-    React.useEffect(() => {
-        const handleUnitSystemChanged = (() => {
-            // istanbul ignore else
-            if (activeUnitSystemKey !== core_frontend_1.IModelApp.quantityFormatter.activeUnitSystem) {
-                setActiveUnitSystemKey(core_frontend_1.IModelApp.quantityFormatter.activeUnitSystem);
-                setActiveFormatterSpec(core_frontend_1.IModelApp.quantityFormatter.findFormatterSpecByQuantityType(activeQuantityType));
-                setSaveEnabled(false);
-                setClearEnabled(core_frontend_1.IModelApp.quantityFormatter.hasActiveOverride(activeQuantityType, true));
-            }
-        });
-        core_frontend_1.IModelApp.quantityFormatter.onActiveFormattingUnitSystemChanged.addListener(handleUnitSystemChanged);
-        return () => {
-            core_frontend_1.IModelApp.quantityFormatter.onActiveFormattingUnitSystemChanged.removeListener(handleUnitSystemChanged);
-        };
-    }, [activeQuantityType, activeUnitSystemKey]);
-    React.useEffect(() => {
-        const handleFormatChanged = ((args) => {
-            if (!newQuantityTypeRef.current) {
-                const quantityKey = core_frontend_1.IModelApp.quantityFormatter.getQuantityTypeKey(activeQuantityType);
-                // istanbul ignore else
-                if (args.quantityType === quantityKey) {
-                    setActiveFormatterSpec(core_frontend_1.IModelApp.quantityFormatter.findFormatterSpecByQuantityType(activeQuantityType));
-                    setSaveEnabled(false);
-                    setClearEnabled(core_frontend_1.IModelApp.quantityFormatter.hasActiveOverride(activeQuantityType, true));
-                }
-            }
-            newQuantityTypeRef.current = undefined;
-        });
-        core_frontend_1.IModelApp.quantityFormatter.onQuantityFormatsChanged.addListener(handleFormatChanged);
-        return () => {
-            core_frontend_1.IModelApp.quantityFormatter.onQuantityFormatsChanged.removeListener(handleFormatChanged);
-        };
-    }, [activeQuantityType]);
-    const saveChanges = React.useCallback((afterSaveFunction, args) => {
-        // istanbul ignore else
-        if (activeFormatterSpec) {
-            const formatProps = activeFormatterSpec.format.toJSON();
-            const formatPropsInUse = core_frontend_1.IModelApp.quantityFormatter.findFormatterSpecByQuantityType(activeQuantityType).format.toJSON();
-            if (formatPropsInUse && !formatAreEqual(formatProps, formatPropsInUse)) {
-                ModalDialogManager_1.ModalDialogManager.openDialog(React.createElement(SaveFormatModalDialog, { formatProps: formatProps, quantityType: activeQuantityType, onDialogCloseArgs: args, onDialogClose: afterSaveFunction }), "saveQuantityFormat");
-                return;
-            }
-        }
-        afterSaveFunction(args);
-    }, [activeFormatterSpec, activeQuantityType]);
-    (0, core_react_1.useSaveBeforeActivatingNewSettingsTab)(UiFramework_1.UiFramework.settingsManager, saveChanges);
-    (0, core_react_1.useSaveBeforeClosingSettingsContainer)(UiFramework_1.UiFramework.settingsManager, saveChanges);
-    const processListboxValueChange = React.useCallback((newQuantityType) => {
-        const volumeFormatterSpec = core_frontend_1.IModelApp.quantityFormatter.findFormatterSpecByQuantityType(newQuantityType);
-        setActiveFormatterSpec(volumeFormatterSpec);
-        setActiveQuantityType(newQuantityType);
-        setSaveEnabled(false);
-        setClearEnabled(core_frontend_1.IModelApp.quantityFormatter.hasActiveOverride(newQuantityType, true));
-    }, []);
-    const onListboxValueChange = React.useCallback((newQuantityType) => {
-        // istanbul ignore else
-        if (activeFormatterSpec) {
-            const formatProps = activeFormatterSpec.format.toJSON();
-            const formatPropsInUse = core_frontend_1.IModelApp.quantityFormatter.findFormatterSpecByQuantityType(activeQuantityType).format.toJSON();
-            if (formatPropsInUse && !formatAreEqual(formatProps, formatPropsInUse)) {
-                newQuantityTypeRef.current = newQuantityType;
-                ModalDialogManager_1.ModalDialogManager.openDialog(React.createElement(SaveFormatModalDialog, { formatProps: formatProps, quantityType: activeQuantityType, onDialogCloseArgs: newQuantityType, onDialogClose: processListboxValueChange }), "saveQuantityFormat");
-                return;
-            }
-        }
-        processListboxValueChange(newQuantityType);
-    }, [activeFormatterSpec, activeQuantityType, processListboxValueChange]);
-    const handleOnFormatChanged = React.useCallback(async (formatProps) => {
-        // istanbul ignore else
-        if (activeFormatterSpec) {
-            const newSpec = await core_frontend_1.IModelApp.quantityFormatter.generateFormatterSpecByType(activeQuantityType, formatProps);
-            const formatPropsInUse = core_frontend_1.IModelApp.quantityFormatter.getFormatPropsByQuantityType(activeQuantityType);
-            // istanbul ignore else
-            if (formatPropsInUse)
-                setSaveEnabled(!formatAreEqual(formatProps, formatPropsInUse));
-            setActiveFormatterSpec(newSpec);
-        }
-    }, [activeFormatterSpec, activeQuantityType]);
-    const handleOnFormatSave = React.useCallback(async () => {
-        // istanbul ignore else
-        if (activeFormatterSpec) {
-            const format = activeFormatterSpec.format.toJSON();
-            await core_frontend_1.IModelApp.quantityFormatter.setOverrideFormat(activeQuantityType, format);
-            setClearEnabled(true);
-        }
-    }, [activeFormatterSpec, activeQuantityType]);
-    const handleOnFormatReset = React.useCallback(async () => {
-        await core_frontend_1.IModelApp.quantityFormatter.clearOverrideFormats(activeQuantityType);
-        setClearEnabled(false);
-    }, [activeQuantityType]);
-    const processNewUnitSystem = React.useCallback(async (unitSystem) => {
-        presentation_frontend_1.Presentation.presentation.activeUnitSystem = unitSystem;
-        await core_frontend_1.IModelApp.quantityFormatter.setActiveUnitSystem(unitSystem);
-    }, []);
-    const handleUnitSystemSelected = React.useCallback(async (unitSystem) => {
-        if (unitSystem === activeUnitSystemKey)
-            return;
-        saveChanges(processNewUnitSystem, unitSystem);
-    }, [activeUnitSystemKey, processNewUnitSystem, saveChanges]);
-    return (React.createElement("div", { className: "quantity-formatting-container" },
-        React.createElement(UnitSystemSelector_1.UnitSystemSelector, { selectedUnitSystemKey: activeUnitSystemKey, availableUnitSystems: availableUnitSystems, onUnitSystemSelected: handleUnitSystemSelected }),
-        React.createElement("span", { className: "uifw-quantity-format-section-label" }, formatSectionLabel.current),
-        React.createElement("div", { className: "uifw-quantity-types-container" },
-            React.createElement("div", { className: "left-panel" },
-                React.createElement(core_react_1.Listbox, { id: "uifw-quantity-types-list", className: "uifw-quantity-types", onListboxValueChange: onListboxValueChange, selectedValue: activeQuantityType }, [...core_frontend_1.IModelApp.quantityFormatter.quantityTypesRegistry.keys()].map((key) => {
-                    const entry = core_frontend_1.IModelApp.quantityFormatter.quantityTypesRegistry.get(key);
-                    const description = entry.description;
-                    const label = entry.label;
-                    return (React.createElement(core_react_1.ListboxItem, { key: entry.key, className: "quantity-type-list-entry", value: entry.key },
-                        React.createElement("span", { className: "map-source-list-entry-name", title: description }, label)));
-                }))),
-            React.createElement("div", { className: "right-panel" }, activeFormatterSpec &&
-                React.createElement(React.Fragment, null,
-                    React.createElement("div", { className: "uifw-quantity-types-right-top" },
-                        React.createElement("div", { className: "uifw-quantity-types-right-top-sample" },
-                            React.createElement(imodel_components_react_1.FormatSample, { formatSpec: activeFormatterSpec, initialMagnitude: 1234.56, hideLabels: true }))),
-                    React.createElement("div", { className: "uifw-quantity-types-formats" },
-                        React.createElement(imodel_components_react_1.QuantityFormatPanel, { onFormatChange: handleOnFormatChanged, quantityType: activeQuantityType })),
-                    React.createElement("div", { className: "components-button-panel" },
-                        React.createElement(itwinui_react_1.Button, { styleType: "cta", onClick: handleOnFormatSave, disabled: !saveEnabled }, setButtonLabel.current),
-                        React.createElement(itwinui_react_1.Button, { styleType: "default", onClick: handleOnFormatReset, disabled: !clearEnabled }, clearButtonLabel.current)))))));
-}
-exports.QuantityFormatSettingsPage = QuantityFormatSettingsPage;
-function SaveFormatModalDialog({ formatProps, quantityType, onDialogCloseArgs, onDialogClose }) {
-    const [isOpen, setIsOpen] = React.useState(true);
-    const handleClose = React.useCallback(() => {
-        setIsOpen(false);
-        ModalDialogManager_1.ModalDialogManager.closeDialog();
-        onDialogClose && onDialogClose(onDialogCloseArgs);
-    }, [onDialogClose, onDialogCloseArgs]);
-    const handleOK = React.useCallback(() => {
-        core_frontend_1.IModelApp.quantityFormatter.setOverrideFormat(quantityType, formatProps); // eslint-disable-line @typescript-eslint/no-floating-promises
-        handleClose();
-    }, [formatProps, handleClose, quantityType]);
-    const handleCancel = React.useCallback(() => {
-        handleClose();
-    }, [handleClose]);
-    return (React.createElement(core_react_1.Dialog, { title: "Save Format Changes", opened: isOpen, resizable: false, movable: false, modal: true, buttonCluster: [
-            { type: appui_abstract_1.DialogButtonType.Yes, onClick: handleOK },
-            { type: appui_abstract_1.DialogButtonType.No, onClick: handleCancel },
-        ], onEscape: handleCancel, onClose: handleCancel, onOutsideClick: handleCancel, minHeight: 150, maxHeight: 400, maxWidth: 400, minWidth: 200 },
-        React.createElement("div", { className: "modal-dialog2" }, "Do you want to save changes to format before changing to another type?")));
-}
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Settings
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuantityFormatSettingsPage = exports.getQuantityFormatsSettingsManagerEntry = void 0;
+require("./QuantityFormat.scss");
+const React = require("react");
+const core_geometry_1 = require("@itwin/core-geometry");
+const core_frontend_1 = require("@itwin/core-frontend");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const imodel_components_react_1 = require("@itwin/imodel-components-react");
+const core_react_1 = require("@itwin/core-react");
+const ModalDialogManager_1 = require("../../dialog/ModalDialogManager");
+const UiFramework_1 = require("../../UiFramework");
+const UnitSystemSelector_1 = require("./UnitSystemSelector");
+const presentation_frontend_1 = require("@itwin/presentation-frontend");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+function formatAreEqual(obj1, obj2) {
+    const compare = new core_geometry_1.DeepCompare();
+    return compare.compare(obj1, obj2);
+}
+/**
+ * Return a SettingsTabEntry that can be used to define the available settings that can be set for an application.
+ * @param itemPriority - Used to define the order of the entry in the Settings Stage
+ * @param opts - Options to initialize the settings page that allows users to set Quantity formatting overrides.
+ * @beta
+ */
+function getQuantityFormatsSettingsManagerEntry(itemPriority, opts) {
+    const { availableUnitSystems, initialQuantityType } = { ...opts };
+    return {
+        itemPriority, tabId: "uifw:Quantity",
+        label: UiFramework_1.UiFramework.translate("settings.quantity-formatting.label"),
+        subLabel: UiFramework_1.UiFramework.translate("settings.quantity-formatting.subLabel"),
+        page: React.createElement(QuantityFormatSettingsPage, { initialQuantityType: initialQuantityType !== null && initialQuantityType !== void 0 ? initialQuantityType : core_frontend_1.QuantityType.Length, availableUnitSystems: availableUnitSystems !== null && availableUnitSystems !== void 0 ? availableUnitSystems : new Set(["metric", "imperial", "usCustomary", "usSurvey"]) }),
+        isDisabled: false,
+        icon: "icon-measure",
+        tooltip: UiFramework_1.UiFramework.translate("settings.quantity-formatting.tooltip"),
+        pageWillHandleCloseRequest: true,
+    };
+}
+exports.getQuantityFormatsSettingsManagerEntry = getQuantityFormatsSettingsManagerEntry;
+/** UI Component shown in settings page to set the active Presentation Unit System and to set format overrides.
+ * @beta
+ */
+function QuantityFormatSettingsPage({ initialQuantityType, availableUnitSystems }) {
+    const [activeUnitSystemKey, setActiveUnitSystemKey] = React.useState(core_frontend_1.IModelApp.quantityFormatter.activeUnitSystem);
+    const [activeQuantityType, setActiveQuantityType] = React.useState((0, core_frontend_1.getQuantityTypeKey)(initialQuantityType));
+    const [activeFormatterSpec, setActiveFormatterSpec] = React.useState(core_frontend_1.IModelApp.quantityFormatter.findFormatterSpecByQuantityType((0, core_frontend_1.getQuantityTypeKey)(activeQuantityType)));
+    const [saveEnabled, setSaveEnabled] = React.useState(false);
+    const [clearEnabled, setClearEnabled] = React.useState(core_frontend_1.IModelApp.quantityFormatter.hasActiveOverride(initialQuantityType, true));
+    const newQuantityTypeRef = React.useRef();
+    const formatSectionLabel = React.useRef(UiFramework_1.UiFramework.translate("settings.quantity-formatting.formatSectionLabel"));
+    const setButtonLabel = React.useRef(UiFramework_1.UiFramework.translate("settings.quantity-formatting.setButtonLabel"));
+    const clearButtonLabel = React.useRef(UiFramework_1.UiFramework.translate("settings.quantity-formatting.clearButtonLabel"));
+    React.useEffect(() => {
+        const handleUnitSystemChanged = (() => {
+            // istanbul ignore else
+            if (activeUnitSystemKey !== core_frontend_1.IModelApp.quantityFormatter.activeUnitSystem) {
+                setActiveUnitSystemKey(core_frontend_1.IModelApp.quantityFormatter.activeUnitSystem);
+                setActiveFormatterSpec(core_frontend_1.IModelApp.quantityFormatter.findFormatterSpecByQuantityType(activeQuantityType));
+                setSaveEnabled(false);
+                setClearEnabled(core_frontend_1.IModelApp.quantityFormatter.hasActiveOverride(activeQuantityType, true));
+            }
+        });
+        core_frontend_1.IModelApp.quantityFormatter.onActiveFormattingUnitSystemChanged.addListener(handleUnitSystemChanged);
+        return () => {
+            core_frontend_1.IModelApp.quantityFormatter.onActiveFormattingUnitSystemChanged.removeListener(handleUnitSystemChanged);
+        };
+    }, [activeQuantityType, activeUnitSystemKey]);
+    React.useEffect(() => {
+        const handleFormatChanged = ((args) => {
+            if (!newQuantityTypeRef.current) {
+                const quantityKey = core_frontend_1.IModelApp.quantityFormatter.getQuantityTypeKey(activeQuantityType);
+                // istanbul ignore else
+                if (args.quantityType === quantityKey) {
+                    setActiveFormatterSpec(core_frontend_1.IModelApp.quantityFormatter.findFormatterSpecByQuantityType(activeQuantityType));
+                    setSaveEnabled(false);
+                    setClearEnabled(core_frontend_1.IModelApp.quantityFormatter.hasActiveOverride(activeQuantityType, true));
+                }
+            }
+            newQuantityTypeRef.current = undefined;
+        });
+        core_frontend_1.IModelApp.quantityFormatter.onQuantityFormatsChanged.addListener(handleFormatChanged);
+        return () => {
+            core_frontend_1.IModelApp.quantityFormatter.onQuantityFormatsChanged.removeListener(handleFormatChanged);
+        };
+    }, [activeQuantityType]);
+    const saveChanges = React.useCallback((afterSaveFunction, args) => {
+        // istanbul ignore else
+        if (activeFormatterSpec) {
+            const formatProps = activeFormatterSpec.format.toJSON();
+            const formatPropsInUse = core_frontend_1.IModelApp.quantityFormatter.findFormatterSpecByQuantityType(activeQuantityType).format.toJSON();
+            if (formatPropsInUse && !formatAreEqual(formatProps, formatPropsInUse)) {
+                ModalDialogManager_1.ModalDialogManager.openDialog(React.createElement(SaveFormatModalDialog, { formatProps: formatProps, quantityType: activeQuantityType, onDialogCloseArgs: args, onDialogClose: afterSaveFunction }), "saveQuantityFormat");
+                return;
+            }
+        }
+        afterSaveFunction(args);
+    }, [activeFormatterSpec, activeQuantityType]);
+    (0, core_react_1.useSaveBeforeActivatingNewSettingsTab)(UiFramework_1.UiFramework.settingsManager, saveChanges);
+    (0, core_react_1.useSaveBeforeClosingSettingsContainer)(UiFramework_1.UiFramework.settingsManager, saveChanges);
+    const processListboxValueChange = React.useCallback((newQuantityType) => {
+        const volumeFormatterSpec = core_frontend_1.IModelApp.quantityFormatter.findFormatterSpecByQuantityType(newQuantityType);
+        setActiveFormatterSpec(volumeFormatterSpec);
+        setActiveQuantityType(newQuantityType);
+        setSaveEnabled(false);
+        setClearEnabled(core_frontend_1.IModelApp.quantityFormatter.hasActiveOverride(newQuantityType, true));
+    }, []);
+    const onListboxValueChange = React.useCallback((newQuantityType) => {
+        // istanbul ignore else
+        if (activeFormatterSpec) {
+            const formatProps = activeFormatterSpec.format.toJSON();
+            const formatPropsInUse = core_frontend_1.IModelApp.quantityFormatter.findFormatterSpecByQuantityType(activeQuantityType).format.toJSON();
+            if (formatPropsInUse && !formatAreEqual(formatProps, formatPropsInUse)) {
+                newQuantityTypeRef.current = newQuantityType;
+                ModalDialogManager_1.ModalDialogManager.openDialog(React.createElement(SaveFormatModalDialog, { formatProps: formatProps, quantityType: activeQuantityType, onDialogCloseArgs: newQuantityType, onDialogClose: processListboxValueChange }), "saveQuantityFormat");
+                return;
+            }
+        }
+        processListboxValueChange(newQuantityType);
+    }, [activeFormatterSpec, activeQuantityType, processListboxValueChange]);
+    const handleOnFormatChanged = React.useCallback(async (formatProps) => {
+        // istanbul ignore else
+        if (activeFormatterSpec) {
+            const newSpec = await core_frontend_1.IModelApp.quantityFormatter.generateFormatterSpecByType(activeQuantityType, formatProps);
+            const formatPropsInUse = core_frontend_1.IModelApp.quantityFormatter.getFormatPropsByQuantityType(activeQuantityType);
+            // istanbul ignore else
+            if (formatPropsInUse)
+                setSaveEnabled(!formatAreEqual(formatProps, formatPropsInUse));
+            setActiveFormatterSpec(newSpec);
+        }
+    }, [activeFormatterSpec, activeQuantityType]);
+    const handleOnFormatSave = React.useCallback(async () => {
+        // istanbul ignore else
+        if (activeFormatterSpec) {
+            const format = activeFormatterSpec.format.toJSON();
+            await core_frontend_1.IModelApp.quantityFormatter.setOverrideFormat(activeQuantityType, format);
+            setClearEnabled(true);
+        }
+    }, [activeFormatterSpec, activeQuantityType]);
+    const handleOnFormatReset = React.useCallback(async () => {
+        await core_frontend_1.IModelApp.quantityFormatter.clearOverrideFormats(activeQuantityType);
+        setClearEnabled(false);
+    }, [activeQuantityType]);
+    const processNewUnitSystem = React.useCallback(async (unitSystem) => {
+        presentation_frontend_1.Presentation.presentation.activeUnitSystem = unitSystem;
+        await core_frontend_1.IModelApp.quantityFormatter.setActiveUnitSystem(unitSystem);
+    }, []);
+    const handleUnitSystemSelected = React.useCallback(async (unitSystem) => {
+        if (unitSystem === activeUnitSystemKey)
+            return;
+        saveChanges(processNewUnitSystem, unitSystem);
+    }, [activeUnitSystemKey, processNewUnitSystem, saveChanges]);
+    return (React.createElement("div", { className: "quantity-formatting-container" },
+        React.createElement(UnitSystemSelector_1.UnitSystemSelector, { selectedUnitSystemKey: activeUnitSystemKey, availableUnitSystems: availableUnitSystems, onUnitSystemSelected: handleUnitSystemSelected }),
+        React.createElement("span", { className: "uifw-quantity-format-section-label" }, formatSectionLabel.current),
+        React.createElement("div", { className: "uifw-quantity-types-container" },
+            React.createElement("div", { className: "left-panel" },
+                React.createElement(core_react_1.Listbox, { id: "uifw-quantity-types-list", className: "uifw-quantity-types", onListboxValueChange: onListboxValueChange, selectedValue: activeQuantityType }, [...core_frontend_1.IModelApp.quantityFormatter.quantityTypesRegistry.keys()].map((key) => {
+                    const entry = core_frontend_1.IModelApp.quantityFormatter.quantityTypesRegistry.get(key);
+                    const description = entry.description;
+                    const label = entry.label;
+                    return (React.createElement(core_react_1.ListboxItem, { key: entry.key, className: "quantity-type-list-entry", value: entry.key },
+                        React.createElement("span", { className: "map-source-list-entry-name", title: description }, label)));
+                }))),
+            React.createElement("div", { className: "right-panel" }, activeFormatterSpec &&
+                React.createElement(React.Fragment, null,
+                    React.createElement("div", { className: "uifw-quantity-types-right-top" },
+                        React.createElement("div", { className: "uifw-quantity-types-right-top-sample" },
+                            React.createElement(imodel_components_react_1.FormatSample, { formatSpec: activeFormatterSpec, initialMagnitude: 1234.56, hideLabels: true }))),
+                    React.createElement("div", { className: "uifw-quantity-types-formats" },
+                        React.createElement(imodel_components_react_1.QuantityFormatPanel, { onFormatChange: handleOnFormatChanged, quantityType: activeQuantityType })),
+                    React.createElement("div", { className: "components-button-panel" },
+                        React.createElement(itwinui_react_1.Button, { styleType: "cta", onClick: handleOnFormatSave, disabled: !saveEnabled }, setButtonLabel.current),
+                        React.createElement(itwinui_react_1.Button, { styleType: "default", onClick: handleOnFormatReset, disabled: !clearEnabled }, clearButtonLabel.current)))))));
+}
+exports.QuantityFormatSettingsPage = QuantityFormatSettingsPage;
+function SaveFormatModalDialog({ formatProps, quantityType, onDialogCloseArgs, onDialogClose }) {
+    const [isOpen, setIsOpen] = React.useState(true);
+    const handleClose = React.useCallback(() => {
+        setIsOpen(false);
+        ModalDialogManager_1.ModalDialogManager.closeDialog();
+        onDialogClose && onDialogClose(onDialogCloseArgs);
+    }, [onDialogClose, onDialogCloseArgs]);
+    const handleOK = React.useCallback(() => {
+        core_frontend_1.IModelApp.quantityFormatter.setOverrideFormat(quantityType, formatProps); // eslint-disable-line @typescript-eslint/no-floating-promises
+        handleClose();
+    }, [formatProps, handleClose, quantityType]);
+    const handleCancel = React.useCallback(() => {
+        handleClose();
+    }, [handleClose]);
+    return (React.createElement(core_react_1.Dialog, { title: "Save Format Changes", opened: isOpen, resizable: false, movable: false, modal: true, buttonCluster: [
+            { type: appui_abstract_1.DialogButtonType.Yes, onClick: handleOK },
+            { type: appui_abstract_1.DialogButtonType.No, onClick: handleCancel },
+        ], onEscape: handleCancel, onClose: handleCancel, onOutsideClick: handleCancel, minHeight: 150, maxHeight: 400, maxWidth: 400, minWidth: 200 },
+        React.createElement("div", { className: "modal-dialog2" }, "Do you want to save changes to format before changing to another type?")));
+}
 //# sourceMappingURL=QuantityFormat.js.map

package/lib/cjs/appui-react/settings/quantityformatting/QuantityFormat.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuantityFormat.js","sourceRoot":"","sources":["../../../../../src/appui-react/settings/quantityformatting/QuantityFormat.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,iCAA+B;AAC/B,+BAA+B;AAC/B,wDAAmD;AACnD,wDAE8B;AAE9B,0DAAyD;AACzD,4EAAmF;AACnF,kDAG2B;AAC3B,wEAAqE;AACrE,mDAAgD;AAChD,6DAA0D;AAC1D,wEAA4D;AAC5D,wDAA8C;AAE9C,SAAS,cAAc,CAAC,IAAiB,EAAE,IAAiB;IAC1D,MAAM,OAAO,GAAG,IAAI,2BAAW,EAAE,CAAC;IAClC,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;AACrC,CAAC;AAUD;;;;;GAKG;AACH,SAAgB,sCAAsC,CAAC,YAAoB,EAAE,IAAgD;IAC3H,MAAM,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,CAAC;IAClE,OAAO;QACL,YAAY,EAAE,KAAK,EAAE,eAAe;QACpC,KAAK,EAAE,yBAAW,CAAC,SAAS,CAAC,oCAAoC,CAAC;QAClE,QAAQ,EAAE,yBAAW,CAAC,SAAS,CAAC,uCAAuC,CAAC;QACxE,IAAI,EAAE,oBAAC,0BAA0B,IAAC,mBAAmB,EAAE,mBAAmB,aAAnB,mBAAmB,cAAnB,mBAAmB,GAAI,4BAAY,CAAC,MAAM,EAC/F,oBAAoB,EAAE,oBAAoB,aAApB,oBAAoB,cAApB,oBAAoB,GAAI,IAAI,GAAG,CAAC,CAAC,QAAQ,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,CAAC,CAAC,GAAI;QAC9G,UAAU,EAAE,KAAK;QACjB,IAAI,EAAE,cAAc;QACpB,OAAO,EAAE,yBAAW,CAAC,SAAS,CAAC,sCAAsC,CAAC;QACtE,0BAA0B,EAAE,IAAI;KACjC,CAAC;AACJ,CAAC;AAbD,wFAaC;AAED;;GAEG;AACH,SAAgB,0BAA0B,CAAC,EAAE,mBAAmB,EAAE,oBAAoB,EAAoC;IACxH,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,yBAAS,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACnH,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAA,kCAAkB,EAAC,mBAAmB,CAAC,CAAC,CAAC;IAC5G,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GACjD,KAAK,CAAC,QAAQ,CAA4B,yBAAS,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,IAAA,kCAAkB,EAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC;IACjJ,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,yBAAS,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,mBAAmB,EAAE,IAAI,CAAC,CAAC,CAAC;IACjI,MAAM,kBAAkB,GAAG,KAAK,CAAC,MAAM,EAAmB,CAAC;IAC3D,MAAM,kBAAkB,GAAG,KAAK,CAAC,MAAM,CAAC,yBAAW,CAAC,SAAS,CAAC,iDAAiD,CAAC,CAAC,CAAC;IAClH,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC,yBAAW,CAAC,SAAS,CAAC,6CAA6C,CAAC,CAAC,CAAC;IAC1G,MAAM,gBAAgB,GAAG,KAAK,CAAC,MAAM,CAAC,yBAAW,CAAC,SAAS,CAAC,+CAA+C,CAAC,CAAC,CAAC;IAE9G,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,uBAAuB,GAAG,CAAC,GAAS,EAAE;YAC1C,uBAAuB;YACvB,IAAI,mBAAmB,KAAK,yBAAS,CAAC,iBAAiB,CAAC,gBAAgB,EAAE;gBACxE,sBAAsB,CAAC,yBAAS,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;gBACrE,sBAAsB,CAAC,yBAAS,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,kBAAkB,CAAC,CAAC,CAAC;gBACxG,cAAc,CAAC,KAAK,CAAC,CAAC;gBACtB,eAAe,CAAC,yBAAS,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAC,CAAC;aAC1F;QACH,CAAC,CAAC,CAAC;QAEH,yBAAS,CAAC,iBAAiB,CAAC,mCAAmC,CAAC,WAAW,CAAC,uBAAuB,CAAC,CAAC;QACrG,OAAO,GAAG,EAAE;YACV,yBAAS,CAAC,iBAAiB,CAAC,mCAAmC,CAAC,cAAc,CAAC,uBAAuB,CAAC,CAAC;QAC1G,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,kBAAkB,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAE9C,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,mBAAmB,GAAG,CAAC,CAAC,IAAgC,EAAQ,EAAE;YACtE,IAAI,CAAC,kBAAkB,CAAC,OAAO,EAAE;gBAC/B,MAAM,WAAW,GAAG,yBAAS,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,kBAAkB,CAAC,CAAC;gBACvF,uBAAuB;gBACvB,IAAI,IAAI,CAAC,YAAY,KAAK,WAAW,EAAE;oBACrC,sBAAsB,CAAC,yBAAS,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,kBAAkB,CAAC,CAAC,CAAC;oBACxG,cAAc,CAAC,KAAK,CAAC,CAAC;oBACtB,eAAe,CAAC,yBAAS,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAC,CAAC;iBAC1F;aACF;YACD,kBAAkB,CAAC,OAAO,GAAG,SAAS,CAAC;QACzC,CAAC,CAAC,CAAC;QACH,yBAAS,CAAC,iBAAiB,CAAC,wBAAwB,CAAC,WAAW,CAAC,mBAAmB,CAAC,CAAC;QACtF,OAAO,GAAG,EAAE;YACV,yBAAS,CAAC,iBAAiB,CAAC,wBAAwB,CAAC,cAAc,CAAC,mBAAmB,CAAC,CAAC;QAC3F,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAEzB,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,iBAAsC,EAAE,IAAU,EAAE,EAAE;QAC3F,uBAAuB;QACvB,IAAI,mBAAmB,EAAE;YACvB,MAAM,WAAW,GAAG,mBAAmB,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;YACxD,MAAM,gBAAgB,GAAG,yBAAS,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,kBAAkB,CAAE,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;YAC1H,IAAI,gBAAgB,IAAI,CAAC,cAAc,CAAC,WAAW,EAAE,gBAAgB,CAAC,EAAE;gBACtE,uCAAkB,CAAC,UAAU,CAAC,oBAAC,qBAAqB,IAAC,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,IAAI,EAAE,aAAa,EAAE,iBAAiB,GAAI,EAAE,oBAAoB,CAAC,CAAC;gBACtM,OAAO;aACR;SACF;QACD,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAE9C,IAAA,kDAAqC,EAAC,yBAAW,CAAC,eAAe,EAAE,WAAW,CAAC,CAAC;IAChF,IAAA,kDAAqC,EAAC,yBAAW,CAAC,eAAe,EAAE,WAAW,CAAC,CAAC;IAEhF,MAAM,yBAAyB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,eAAgC,EAAE,EAAE;QACvF,MAAM,mBAAmB,GAAG,yBAAS,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,eAAe,CAAC,CAAC;QACzG,sBAAsB,CAAC,mBAAmB,CAAC,CAAC;QAC5C,qBAAqB,CAAC,eAAe,CAAC,CAAC;QACvC,cAAc,CAAC,KAAK,CAAC,CAAC;QACtB,eAAe,CAAC,yBAAS,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC,CAAC;IACxF,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,oBAAoB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,eAAuB,EAAE,EAAE;QACzE,uBAAuB;QACvB,IAAI,mBAAmB,EAAE;YACvB,MAAM,WAAW,GAAG,mBAAmB,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;YACxD,MAAM,gBAAgB,GAAG,yBAAS,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,kBAAkB,CAAE,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;YAC1H,IAAI,gBAAgB,IAAI,CAAC,cAAc,CAAC,WAAW,EAAE,gBAAgB,CAAC,EAAE;gBACtE,kBAAkB,CAAC,OAAO,GAAG,eAAe,CAAC;gBAC7C,uCAAkB,CAAC,UAAU,CAAC,oBAAC,qBAAqB,IAAC,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,eAAe,EAAE,aAAa,EAAE,yBAAyB,GAAI,EAAE,oBAAoB,CAAC,CAAC;gBACzN,OAAO;aACR;SACF;QACD,yBAAyB,CAAC,eAAe,CAAC,CAAC;IAC7C,CAAC,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,EAAE,yBAAyB,CAAC,CAAC,CAAC;IAEzE,MAAM,qBAAqB,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,WAAwB,EAAE,EAAE;QACjF,uBAAuB;QACvB,IAAI,mBAAmB,EAAE;YACvB,MAAM,OAAO,GAAG,MAAM,yBAAS,CAAC,iBAAiB,CAAC,2BAA2B,CAAC,kBAAkB,EAAE,WAAW,CAAC,CAAC;YAC/G,MAAM,gBAAgB,GAAG,yBAAS,CAAC,iBAAiB,CAAC,4BAA4B,CAAC,kBAAkB,CAAC,CAAC;YACtG,uBAAuB;YACvB,IAAI,gBAAgB;gBAClB,cAAc,CAAC,CAAC,cAAc,CAAC,WAAW,EAAE,gBAAgB,CAAC,CAAC,CAAC;YACjE,sBAAsB,CAAC,OAAO,CAAC,CAAC;SACjC;IACH,CAAC,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAE9C,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,EAAE;QACtD,uBAAuB;QACvB,IAAI,mBAAmB,EAAE;YACvB,MAAM,MAAM,GAAG,mBAAmB,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;YACnD,MAAM,yBAAS,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;YAChF,eAAe,CAAC,IAAI,CAAC,CAAC;SACvB;IACH,CAAC,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAE9C,MAAM,mBAAmB,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,EAAE;QACvD,MAAM,yBAAS,CAAC,iBAAiB,CAAC,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;QAC3E,eAAe,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAEzB,MAAM,oBAAoB,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,UAAyB,EAAE,EAAE;QACjF,oCAAY,CAAC,YAAY,CAAC,gBAAgB,GAAG,UAAU,CAAC;QACxD,MAAM,yBAAS,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,UAAU,CAAC,CAAC;IACpE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,wBAAwB,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,UAAyB,EAAE,EAAE;QACrF,IAAI,UAAU,KAAK,mBAAmB;YACpC,OAAO;QACT,WAAW,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC;IAChD,CAAC,EAAE,CAAC,mBAAmB,EAAE,oBAAoB,EAAE,WAAW,CAAC,CAAC,CAAC;IAE7D,OAAO,CACL,6BAAK,SAAS,EAAC,+BAA+B;QAC5C,oBAAC,uCAAkB,IAAC,qBAAqB,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,wBAAwB,GAAI;QAC9J,8BAAM,SAAS,EAAC,oCAAoC,IAAE,kBAAkB,CAAC,OAAO,CAAQ;QACxF,6BAAK,SAAS,EAAC,+BAA+B;YAC5C,6BAAK,SAAS,EAAC,YAAY;gBACzB,oBAAC,oBAAO,IAAC,EAAE,EAAC,0BAA0B,EAAC,SAAS,EAAC,qBAAqB,EACpE,oBAAoB,EAAE,oBAAoB,EAAE,aAAa,EAAE,kBAAkB,IAE3E,CAAC,GAAG,yBAAS,CAAC,iBAAiB,CAAC,qBAAqB,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;oBACxE,MAAM,KAAK,GAAG,yBAAS,CAAC,iBAAiB,CAAC,qBAAqB,CAAC,GAAG,CAAC,GAAG,CAAE,CAAC;oBAC1E,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC;oBACtC,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;oBAC1B,OAAO,CACL,oBAAC,wBAAW,IAAC,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,SAAS,EAAC,0BAA0B,EAAC,KAAK,EAAE,KAAK,CAAC,GAAG;wBAChF,8BAAM,SAAS,EAAC,4BAA4B,EAAC,KAAK,EAAE,WAAW,IAAG,KAAK,CAAQ,CACnE,CACf,CAAC;gBACJ,CAAC,CAAC,CAEI,CACN;YACN,6BAAK,SAAS,EAAC,aAAa,IACzB,mBAAmB;gBAClB;oBACE,6BAAK,SAAS,EAAC,+BAA+B;wBAC5C,6BAAK,SAAS,EAAC,sCAAsC;4BACnD,oBAAC,sCAAY,IAAC,UAAU,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,OAAO,EAAE,UAAU,SAAG,CACnF,CACF;oBACN,6BAAK,SAAS,EAAC,6BAA6B;wBAC1C,oBAAC,6CAAmB,IAAC,cAAc,EAAE,qBAAqB,EAAE,YAAY,EAAE,kBAAkB,GAAI,CAC5F;oBACN,6BAAK,SAAS,EAAC,yBAAyB;wBACtC,oBAAC,sBAAM,IAAC,SAAS,EAAC,KAAK,EAAC,OAAO,EAAE,kBAAkB,EAAE,QAAQ,EAAE,CAAC,WAAW,IAAG,cAAc,CAAC,OAAO,CAAU;wBAC9G,oBAAC,sBAAM,IAAC,SAAS,EAAC,SAAS,EAAC,OAAO,EAAE,mBAAmB,EAAE,QAAQ,EAAE,CAAC,YAAY,IAAG,gBAAgB,CAAC,OAAO,CAAU,CAClH,CACL,CAED,CACF,CACF,CACP,CAAC;AACJ,CAAC;AAtKD,gEAsKC;AAED,SAAS,qBAAqB,CAAC,EAAE,WAAW,EAAE,YAAY,EAAE,iBAAiB,EAAE,aAAa,EAA6H;IACvN,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEjD,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,SAAS,CAAC,KAAK,CAAC,CAAC;QACjB,uCAAkB,CAAC,WAAW,EAAE,CAAC;QACjC,aAAa,IAAI,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACpD,CAAC,EAAE,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAEvC,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACtC,yBAAS,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC,CAAC,8DAA8D;QACxI,WAAW,EAAE,CAAC;IAChB,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC,CAAC;IAE7C,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC1C,WAAW,EAAE,CAAC;IAChB,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,CACL,oBAAC,mBAAM,IACL,KAAK,EAAE,qBAAqB,EAC5B,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,KAAK,EAChB,OAAO,EAAE,KAAK,EACd,KAAK,EAAE,IAAI,EACX,aAAa,EAAE;YACb,EAAE,IAAI,EAAE,iCAAgB,CAAC,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE;YACjD,EAAE,IAAI,EAAE,iCAAgB,CAAC,EAAE,EAAE,OAAO,EAAE,YAAY,EAAE;SACrD,EACD,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,YAAY,EACrB,cAAc,EAAE,YAAY,EAC5B,SAAS,EAAE,GAAG,EACd,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,GAAG,EACb,QAAQ,EAAE,GAAG;QAEb,6BAAK,SAAS,EAAC,eAAe,6EAExB,CACE,CACX,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 Settings\r\n */\r\n\r\nimport \"./QuantityFormat.scss\";\r\nimport * as React from \"react\";\r\nimport { DeepCompare } from \"@itwin/core-geometry\";\r\nimport {\r\n  getQuantityTypeKey, IModelApp, QuantityFormatsChangedArgs, QuantityType, QuantityTypeArg, QuantityTypeKey,\r\n} from \"@itwin/core-frontend\";\r\nimport { FormatProps, FormatterSpec, UnitSystemKey } from \"@itwin/core-quantity\";\r\nimport { DialogButtonType } from \"@itwin/appui-abstract\";\r\nimport { FormatSample, QuantityFormatPanel } from \"@itwin/imodel-components-react\";\r\nimport {\r\n  Dialog, Listbox, ListboxItem, SettingsTabEntry,\r\n  useSaveBeforeActivatingNewSettingsTab, useSaveBeforeClosingSettingsContainer,\r\n} from \"@itwin/core-react\";\r\nimport { ModalDialogManager } from \"../../dialog/ModalDialogManager\";\r\nimport { UiFramework } from \"../../UiFramework\";\r\nimport { UnitSystemSelector } from \"./UnitSystemSelector\";\r\nimport { Presentation } from \"@itwin/presentation-frontend\";\r\nimport { Button } from \"@itwin/itwinui-react\";\r\n\r\nfunction formatAreEqual(obj1: FormatProps, obj2: FormatProps) {\r\n  const compare = new DeepCompare();\r\n  return compare.compare(obj1, obj2);\r\n}\r\n\r\n/** Options to initialize the settings page that allows users to set Quantity formatting overrides.\r\n * @beta\r\n */\r\nexport interface QuantityFormatterSettingsOptions {\r\n  initialQuantityType: QuantityTypeArg;\r\n  availableUnitSystems: Set<UnitSystemKey>;\r\n}\r\n\r\n/**\r\n * Return a SettingsTabEntry that can be used to define the available settings that can be set for an application.\r\n * @param itemPriority - Used to define the order of the entry in the Settings Stage\r\n * @param opts - Options to initialize the settings page that allows users to set Quantity formatting overrides.\r\n * @beta\r\n */\r\nexport function getQuantityFormatsSettingsManagerEntry(itemPriority: number, opts?: Partial<QuantityFormatterSettingsOptions>): SettingsTabEntry {\r\n  const { availableUnitSystems, initialQuantityType } = { ...opts };\r\n  return {\r\n    itemPriority, tabId: \"uifw:Quantity\",\r\n    label: UiFramework.translate(\"settings.quantity-formatting.label\"),\r\n    subLabel: UiFramework.translate(\"settings.quantity-formatting.subLabel\"),\r\n    page: <QuantityFormatSettingsPage initialQuantityType={initialQuantityType ?? QuantityType.Length}\r\n      availableUnitSystems={availableUnitSystems ?? new Set([\"metric\", \"imperial\", \"usCustomary\", \"usSurvey\"])} />,\r\n    isDisabled: false,\r\n    icon: \"icon-measure\",\r\n    tooltip: UiFramework.translate(\"settings.quantity-formatting.tooltip\"),\r\n    pageWillHandleCloseRequest: true,\r\n  };\r\n}\r\n\r\n/** UI Component shown in settings page to set the active Presentation Unit System and to set format overrides.\r\n * @beta\r\n */\r\nexport function QuantityFormatSettingsPage({ initialQuantityType, availableUnitSystems }: QuantityFormatterSettingsOptions) {\r\n  const [activeUnitSystemKey, setActiveUnitSystemKey] = React.useState(IModelApp.quantityFormatter.activeUnitSystem);\r\n  const [activeQuantityType, setActiveQuantityType] = React.useState(getQuantityTypeKey(initialQuantityType));\r\n  const [activeFormatterSpec, setActiveFormatterSpec] =\r\n    React.useState<FormatterSpec | undefined>(IModelApp.quantityFormatter.findFormatterSpecByQuantityType(getQuantityTypeKey(activeQuantityType)));\r\n  const [saveEnabled, setSaveEnabled] = React.useState(false);\r\n  const [clearEnabled, setClearEnabled] = React.useState(IModelApp.quantityFormatter.hasActiveOverride(initialQuantityType, true));\r\n  const newQuantityTypeRef = React.useRef<QuantityTypeKey>();\r\n  const formatSectionLabel = React.useRef(UiFramework.translate(\"settings.quantity-formatting.formatSectionLabel\"));\r\n  const setButtonLabel = React.useRef(UiFramework.translate(\"settings.quantity-formatting.setButtonLabel\"));\r\n  const clearButtonLabel = React.useRef(UiFramework.translate(\"settings.quantity-formatting.clearButtonLabel\"));\r\n\r\n  React.useEffect(() => {\r\n    const handleUnitSystemChanged = ((): void => {\r\n      // istanbul ignore else\r\n      if (activeUnitSystemKey !== IModelApp.quantityFormatter.activeUnitSystem) {\r\n        setActiveUnitSystemKey(IModelApp.quantityFormatter.activeUnitSystem);\r\n        setActiveFormatterSpec(IModelApp.quantityFormatter.findFormatterSpecByQuantityType(activeQuantityType));\r\n        setSaveEnabled(false);\r\n        setClearEnabled(IModelApp.quantityFormatter.hasActiveOverride(activeQuantityType, true));\r\n      }\r\n    });\r\n\r\n    IModelApp.quantityFormatter.onActiveFormattingUnitSystemChanged.addListener(handleUnitSystemChanged);\r\n    return () => {\r\n      IModelApp.quantityFormatter.onActiveFormattingUnitSystemChanged.removeListener(handleUnitSystemChanged);\r\n    };\r\n  }, [activeQuantityType, activeUnitSystemKey]);\r\n\r\n  React.useEffect(() => {\r\n    const handleFormatChanged = ((args: QuantityFormatsChangedArgs): void => {\r\n      if (!newQuantityTypeRef.current) {\r\n        const quantityKey = IModelApp.quantityFormatter.getQuantityTypeKey(activeQuantityType);\r\n        // istanbul ignore else\r\n        if (args.quantityType === quantityKey) {\r\n          setActiveFormatterSpec(IModelApp.quantityFormatter.findFormatterSpecByQuantityType(activeQuantityType));\r\n          setSaveEnabled(false);\r\n          setClearEnabled(IModelApp.quantityFormatter.hasActiveOverride(activeQuantityType, true));\r\n        }\r\n      }\r\n      newQuantityTypeRef.current = undefined;\r\n    });\r\n    IModelApp.quantityFormatter.onQuantityFormatsChanged.addListener(handleFormatChanged);\r\n    return () => {\r\n      IModelApp.quantityFormatter.onQuantityFormatsChanged.removeListener(handleFormatChanged);\r\n    };\r\n  }, [activeQuantityType]);\r\n\r\n  const saveChanges = React.useCallback((afterSaveFunction: (args: any) => void, args?: any) => {\r\n    // istanbul ignore else\r\n    if (activeFormatterSpec) {\r\n      const formatProps = activeFormatterSpec.format.toJSON();\r\n      const formatPropsInUse = IModelApp.quantityFormatter.findFormatterSpecByQuantityType(activeQuantityType)!.format.toJSON();\r\n      if (formatPropsInUse && !formatAreEqual(formatProps, formatPropsInUse)) {\r\n        ModalDialogManager.openDialog(<SaveFormatModalDialog formatProps={formatProps} quantityType={activeQuantityType} onDialogCloseArgs={args} onDialogClose={afterSaveFunction} />, \"saveQuantityFormat\");\r\n        return;\r\n      }\r\n    }\r\n    afterSaveFunction(args);\r\n  }, [activeFormatterSpec, activeQuantityType]);\r\n\r\n  useSaveBeforeActivatingNewSettingsTab(UiFramework.settingsManager, saveChanges);\r\n  useSaveBeforeClosingSettingsContainer(UiFramework.settingsManager, saveChanges);\r\n\r\n  const processListboxValueChange = React.useCallback((newQuantityType: QuantityTypeKey) => {\r\n    const volumeFormatterSpec = IModelApp.quantityFormatter.findFormatterSpecByQuantityType(newQuantityType);\r\n    setActiveFormatterSpec(volumeFormatterSpec);\r\n    setActiveQuantityType(newQuantityType);\r\n    setSaveEnabled(false);\r\n    setClearEnabled(IModelApp.quantityFormatter.hasActiveOverride(newQuantityType, true));\r\n  }, []);\r\n\r\n  const onListboxValueChange = React.useCallback((newQuantityType: string) => {\r\n    // istanbul ignore else\r\n    if (activeFormatterSpec) {\r\n      const formatProps = activeFormatterSpec.format.toJSON();\r\n      const formatPropsInUse = IModelApp.quantityFormatter.findFormatterSpecByQuantityType(activeQuantityType)!.format.toJSON();\r\n      if (formatPropsInUse && !formatAreEqual(formatProps, formatPropsInUse)) {\r\n        newQuantityTypeRef.current = newQuantityType;\r\n        ModalDialogManager.openDialog(<SaveFormatModalDialog formatProps={formatProps} quantityType={activeQuantityType} onDialogCloseArgs={newQuantityType} onDialogClose={processListboxValueChange} />, \"saveQuantityFormat\");\r\n        return;\r\n      }\r\n    }\r\n    processListboxValueChange(newQuantityType);\r\n  }, [activeFormatterSpec, activeQuantityType, processListboxValueChange]);\r\n\r\n  const handleOnFormatChanged = React.useCallback(async (formatProps: FormatProps) => {\r\n    // istanbul ignore else\r\n    if (activeFormatterSpec) {\r\n      const newSpec = await IModelApp.quantityFormatter.generateFormatterSpecByType(activeQuantityType, formatProps);\r\n      const formatPropsInUse = IModelApp.quantityFormatter.getFormatPropsByQuantityType(activeQuantityType);\r\n      // istanbul ignore else\r\n      if (formatPropsInUse)\r\n        setSaveEnabled(!formatAreEqual(formatProps, formatPropsInUse));\r\n      setActiveFormatterSpec(newSpec);\r\n    }\r\n  }, [activeFormatterSpec, activeQuantityType]);\r\n\r\n  const handleOnFormatSave = React.useCallback(async () => {\r\n    // istanbul ignore else\r\n    if (activeFormatterSpec) {\r\n      const format = activeFormatterSpec.format.toJSON();\r\n      await IModelApp.quantityFormatter.setOverrideFormat(activeQuantityType, format);\r\n      setClearEnabled(true);\r\n    }\r\n  }, [activeFormatterSpec, activeQuantityType]);\r\n\r\n  const handleOnFormatReset = React.useCallback(async () => {\r\n    await IModelApp.quantityFormatter.clearOverrideFormats(activeQuantityType);\r\n    setClearEnabled(false);\r\n  }, [activeQuantityType]);\r\n\r\n  const processNewUnitSystem = React.useCallback(async (unitSystem: UnitSystemKey) => {\r\n    Presentation.presentation.activeUnitSystem = unitSystem;\r\n    await IModelApp.quantityFormatter.setActiveUnitSystem(unitSystem);\r\n  }, []);\r\n\r\n  const handleUnitSystemSelected = React.useCallback(async (unitSystem: UnitSystemKey) => {\r\n    if (unitSystem === activeUnitSystemKey)\r\n      return;\r\n    saveChanges(processNewUnitSystem, unitSystem);\r\n  }, [activeUnitSystemKey, processNewUnitSystem, saveChanges]);\r\n\r\n  return (\r\n    <div className=\"quantity-formatting-container\">\r\n      <UnitSystemSelector selectedUnitSystemKey={activeUnitSystemKey} availableUnitSystems={availableUnitSystems} onUnitSystemSelected={handleUnitSystemSelected} />\r\n      <span className=\"uifw-quantity-format-section-label\">{formatSectionLabel.current}</span>\r\n      <div className=\"uifw-quantity-types-container\">\r\n        <div className=\"left-panel\">\r\n          <Listbox id=\"uifw-quantity-types-list\" className=\"uifw-quantity-types\"\r\n            onListboxValueChange={onListboxValueChange} selectedValue={activeQuantityType} >\r\n            {\r\n              [...IModelApp.quantityFormatter.quantityTypesRegistry.keys()].map((key) => {\r\n                const entry = IModelApp.quantityFormatter.quantityTypesRegistry.get(key)!;\r\n                const description = entry.description;\r\n                const label = entry.label;\r\n                return (\r\n                  <ListboxItem key={entry.key} className=\"quantity-type-list-entry\" value={entry.key}>\r\n                    <span className=\"map-source-list-entry-name\" title={description}>{label}</span>\r\n                  </ListboxItem>\r\n                );\r\n              })\r\n            }\r\n          </Listbox>\r\n        </div>\r\n        <div className=\"right-panel\">\r\n          {activeFormatterSpec &&\r\n            <>\r\n              <div className=\"uifw-quantity-types-right-top\">\r\n                <div className=\"uifw-quantity-types-right-top-sample\">\r\n                  <FormatSample formatSpec={activeFormatterSpec} initialMagnitude={1234.56} hideLabels />\r\n                </div>\r\n              </div>\r\n              <div className=\"uifw-quantity-types-formats\">\r\n                <QuantityFormatPanel onFormatChange={handleOnFormatChanged} quantityType={activeQuantityType} />\r\n              </div>\r\n              <div className=\"components-button-panel\">\r\n                <Button styleType=\"cta\" onClick={handleOnFormatSave} disabled={!saveEnabled}>{setButtonLabel.current}</Button>\r\n                <Button styleType=\"default\" onClick={handleOnFormatReset} disabled={!clearEnabled}>{clearButtonLabel.current}</Button>\r\n              </div>\r\n            </>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction SaveFormatModalDialog({ formatProps, quantityType, onDialogCloseArgs, onDialogClose }: { formatProps: FormatProps, quantityType: QuantityTypeKey, onDialogCloseArgs?: any, onDialogClose: (args?: any) => void }) {\r\n  const [isOpen, setIsOpen] = React.useState(true);\r\n\r\n  const handleClose = React.useCallback(() => {\r\n    setIsOpen(false);\r\n    ModalDialogManager.closeDialog();\r\n    onDialogClose && onDialogClose(onDialogCloseArgs);\r\n  }, [onDialogClose, onDialogCloseArgs]);\r\n\r\n  const handleOK = React.useCallback(() => {\r\n    IModelApp.quantityFormatter.setOverrideFormat(quantityType, formatProps); // eslint-disable-line @typescript-eslint/no-floating-promises\r\n    handleClose();\r\n  }, [formatProps, handleClose, quantityType]);\r\n\r\n  const handleCancel = React.useCallback(() => {\r\n    handleClose();\r\n  }, [handleClose]);\r\n\r\n  return (\r\n    <Dialog\r\n      title={\"Save Format Changes\"}\r\n      opened={isOpen}\r\n      resizable={false}\r\n      movable={false}\r\n      modal={true}\r\n      buttonCluster={[\r\n        { type: DialogButtonType.Yes, onClick: handleOK },\r\n        { type: DialogButtonType.No, onClick: handleCancel },\r\n      ]}\r\n      onEscape={handleCancel}\r\n      onClose={handleCancel}\r\n      onOutsideClick={handleCancel}\r\n      minHeight={150}\r\n      maxHeight={400}\r\n      maxWidth={400}\r\n      minWidth={200}\r\n    >\r\n      <div className=\"modal-dialog2\">\r\n        Do you want to save changes to format before changing to another type?\r\n      </div>\r\n    </Dialog >\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"QuantityFormat.js","sourceRoot":"","sources":["../../../../../src/appui-react/settings/quantityformatting/QuantityFormat.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 Settings\n */\n\nimport \"./QuantityFormat.scss\";\nimport * as React from \"react\";\nimport { DeepCompare } from \"@itwin/core-geometry\";\nimport {\n  getQuantityTypeKey, IModelApp, QuantityFormatsChangedArgs, QuantityType, QuantityTypeArg, QuantityTypeKey,\n} from \"@itwin/core-frontend\";\nimport { FormatProps, FormatterSpec, UnitSystemKey } from \"@itwin/core-quantity\";\nimport { DialogButtonType } from \"@itwin/appui-abstract\";\nimport { FormatSample, QuantityFormatPanel } from \"@itwin/imodel-components-react\";\nimport {\n  Dialog, Listbox, ListboxItem, SettingsTabEntry,\n  useSaveBeforeActivatingNewSettingsTab, useSaveBeforeClosingSettingsContainer,\n} from \"@itwin/core-react\";\nimport { ModalDialogManager } from \"../../dialog/ModalDialogManager\";\nimport { UiFramework } from \"../../UiFramework\";\nimport { UnitSystemSelector } from \"./UnitSystemSelector\";\nimport { Presentation } from \"@itwin/presentation-frontend\";\nimport { Button } from \"@itwin/itwinui-react\";\n\nfunction formatAreEqual(obj1: FormatProps, obj2: FormatProps) {\n  const compare = new DeepCompare();\n  return compare.compare(obj1, obj2);\n}\n\n/** Options to initialize the settings page that allows users to set Quantity formatting overrides.\n * @beta\n */\nexport interface QuantityFormatterSettingsOptions {\n  initialQuantityType: QuantityTypeArg;\n  availableUnitSystems: Set<UnitSystemKey>;\n}\n\n/**\n * Return a SettingsTabEntry that can be used to define the available settings that can be set for an application.\n * @param itemPriority - Used to define the order of the entry in the Settings Stage\n * @param opts - Options to initialize the settings page that allows users to set Quantity formatting overrides.\n * @beta\n */\nexport function getQuantityFormatsSettingsManagerEntry(itemPriority: number, opts?: Partial<QuantityFormatterSettingsOptions>): SettingsTabEntry {\n  const { availableUnitSystems, initialQuantityType } = { ...opts };\n  return {\n    itemPriority, tabId: \"uifw:Quantity\",\n    label: UiFramework.translate(\"settings.quantity-formatting.label\"),\n    subLabel: UiFramework.translate(\"settings.quantity-formatting.subLabel\"),\n    page: <QuantityFormatSettingsPage initialQuantityType={initialQuantityType ?? QuantityType.Length}\n      availableUnitSystems={availableUnitSystems ?? new Set([\"metric\", \"imperial\", \"usCustomary\", \"usSurvey\"])} />,\n    isDisabled: false,\n    icon: \"icon-measure\",\n    tooltip: UiFramework.translate(\"settings.quantity-formatting.tooltip\"),\n    pageWillHandleCloseRequest: true,\n  };\n}\n\n/** UI Component shown in settings page to set the active Presentation Unit System and to set format overrides.\n * @beta\n */\nexport function QuantityFormatSettingsPage({ initialQuantityType, availableUnitSystems }: QuantityFormatterSettingsOptions) {\n  const [activeUnitSystemKey, setActiveUnitSystemKey] = React.useState(IModelApp.quantityFormatter.activeUnitSystem);\n  const [activeQuantityType, setActiveQuantityType] = React.useState(getQuantityTypeKey(initialQuantityType));\n  const [activeFormatterSpec, setActiveFormatterSpec] =\n    React.useState<FormatterSpec | undefined>(IModelApp.quantityFormatter.findFormatterSpecByQuantityType(getQuantityTypeKey(activeQuantityType)));\n  const [saveEnabled, setSaveEnabled] = React.useState(false);\n  const [clearEnabled, setClearEnabled] = React.useState(IModelApp.quantityFormatter.hasActiveOverride(initialQuantityType, true));\n  const newQuantityTypeRef = React.useRef<QuantityTypeKey>();\n  const formatSectionLabel = React.useRef(UiFramework.translate(\"settings.quantity-formatting.formatSectionLabel\"));\n  const setButtonLabel = React.useRef(UiFramework.translate(\"settings.quantity-formatting.setButtonLabel\"));\n  const clearButtonLabel = React.useRef(UiFramework.translate(\"settings.quantity-formatting.clearButtonLabel\"));\n\n  React.useEffect(() => {\n    const handleUnitSystemChanged = ((): void => {\n      // istanbul ignore else\n      if (activeUnitSystemKey !== IModelApp.quantityFormatter.activeUnitSystem) {\n        setActiveUnitSystemKey(IModelApp.quantityFormatter.activeUnitSystem);\n        setActiveFormatterSpec(IModelApp.quantityFormatter.findFormatterSpecByQuantityType(activeQuantityType));\n        setSaveEnabled(false);\n        setClearEnabled(IModelApp.quantityFormatter.hasActiveOverride(activeQuantityType, true));\n      }\n    });\n\n    IModelApp.quantityFormatter.onActiveFormattingUnitSystemChanged.addListener(handleUnitSystemChanged);\n    return () => {\n      IModelApp.quantityFormatter.onActiveFormattingUnitSystemChanged.removeListener(handleUnitSystemChanged);\n    };\n  }, [activeQuantityType, activeUnitSystemKey]);\n\n  React.useEffect(() => {\n    const handleFormatChanged = ((args: QuantityFormatsChangedArgs): void => {\n      if (!newQuantityTypeRef.current) {\n        const quantityKey = IModelApp.quantityFormatter.getQuantityTypeKey(activeQuantityType);\n        // istanbul ignore else\n        if (args.quantityType === quantityKey) {\n          setActiveFormatterSpec(IModelApp.quantityFormatter.findFormatterSpecByQuantityType(activeQuantityType));\n          setSaveEnabled(false);\n          setClearEnabled(IModelApp.quantityFormatter.hasActiveOverride(activeQuantityType, true));\n        }\n      }\n      newQuantityTypeRef.current = undefined;\n    });\n    IModelApp.quantityFormatter.onQuantityFormatsChanged.addListener(handleFormatChanged);\n    return () => {\n      IModelApp.quantityFormatter.onQuantityFormatsChanged.removeListener(handleFormatChanged);\n    };\n  }, [activeQuantityType]);\n\n  const saveChanges = React.useCallback((afterSaveFunction: (args: any) => void, args?: any) => {\n    // istanbul ignore else\n    if (activeFormatterSpec) {\n      const formatProps = activeFormatterSpec.format.toJSON();\n      const formatPropsInUse = IModelApp.quantityFormatter.findFormatterSpecByQuantityType(activeQuantityType)!.format.toJSON();\n      if (formatPropsInUse && !formatAreEqual(formatProps, formatPropsInUse)) {\n        ModalDialogManager.openDialog(<SaveFormatModalDialog formatProps={formatProps} quantityType={activeQuantityType} onDialogCloseArgs={args} onDialogClose={afterSaveFunction} />, \"saveQuantityFormat\");\n        return;\n      }\n    }\n    afterSaveFunction(args);\n  }, [activeFormatterSpec, activeQuantityType]);\n\n  useSaveBeforeActivatingNewSettingsTab(UiFramework.settingsManager, saveChanges);\n  useSaveBeforeClosingSettingsContainer(UiFramework.settingsManager, saveChanges);\n\n  const processListboxValueChange = React.useCallback((newQuantityType: QuantityTypeKey) => {\n    const volumeFormatterSpec = IModelApp.quantityFormatter.findFormatterSpecByQuantityType(newQuantityType);\n    setActiveFormatterSpec(volumeFormatterSpec);\n    setActiveQuantityType(newQuantityType);\n    setSaveEnabled(false);\n    setClearEnabled(IModelApp.quantityFormatter.hasActiveOverride(newQuantityType, true));\n  }, []);\n\n  const onListboxValueChange = React.useCallback((newQuantityType: string) => {\n    // istanbul ignore else\n    if (activeFormatterSpec) {\n      const formatProps = activeFormatterSpec.format.toJSON();\n      const formatPropsInUse = IModelApp.quantityFormatter.findFormatterSpecByQuantityType(activeQuantityType)!.format.toJSON();\n      if (formatPropsInUse && !formatAreEqual(formatProps, formatPropsInUse)) {\n        newQuantityTypeRef.current = newQuantityType;\n        ModalDialogManager.openDialog(<SaveFormatModalDialog formatProps={formatProps} quantityType={activeQuantityType} onDialogCloseArgs={newQuantityType} onDialogClose={processListboxValueChange} />, \"saveQuantityFormat\");\n        return;\n      }\n    }\n    processListboxValueChange(newQuantityType);\n  }, [activeFormatterSpec, activeQuantityType, processListboxValueChange]);\n\n  const handleOnFormatChanged = React.useCallback(async (formatProps: FormatProps) => {\n    // istanbul ignore else\n    if (activeFormatterSpec) {\n      const newSpec = await IModelApp.quantityFormatter.generateFormatterSpecByType(activeQuantityType, formatProps);\n      const formatPropsInUse = IModelApp.quantityFormatter.getFormatPropsByQuantityType(activeQuantityType);\n      // istanbul ignore else\n      if (formatPropsInUse)\n        setSaveEnabled(!formatAreEqual(formatProps, formatPropsInUse));\n      setActiveFormatterSpec(newSpec);\n    }\n  }, [activeFormatterSpec, activeQuantityType]);\n\n  const handleOnFormatSave = React.useCallback(async () => {\n    // istanbul ignore else\n    if (activeFormatterSpec) {\n      const format = activeFormatterSpec.format.toJSON();\n      await IModelApp.quantityFormatter.setOverrideFormat(activeQuantityType, format);\n      setClearEnabled(true);\n    }\n  }, [activeFormatterSpec, activeQuantityType]);\n\n  const handleOnFormatReset = React.useCallback(async () => {\n    await IModelApp.quantityFormatter.clearOverrideFormats(activeQuantityType);\n    setClearEnabled(false);\n  }, [activeQuantityType]);\n\n  const processNewUnitSystem = React.useCallback(async (unitSystem: UnitSystemKey) => {\n    Presentation.presentation.activeUnitSystem = unitSystem;\n    await IModelApp.quantityFormatter.setActiveUnitSystem(unitSystem);\n  }, []);\n\n  const handleUnitSystemSelected = React.useCallback(async (unitSystem: UnitSystemKey) => {\n    if (unitSystem === activeUnitSystemKey)\n      return;\n    saveChanges(processNewUnitSystem, unitSystem);\n  }, [activeUnitSystemKey, processNewUnitSystem, saveChanges]);\n\n  return (\n    <div className=\"quantity-formatting-container\">\n      <UnitSystemSelector selectedUnitSystemKey={activeUnitSystemKey} availableUnitSystems={availableUnitSystems} onUnitSystemSelected={handleUnitSystemSelected} />\n      <span className=\"uifw-quantity-format-section-label\">{formatSectionLabel.current}</span>\n      <div className=\"uifw-quantity-types-container\">\n        <div className=\"left-panel\">\n          <Listbox id=\"uifw-quantity-types-list\" className=\"uifw-quantity-types\"\n            onListboxValueChange={onListboxValueChange} selectedValue={activeQuantityType} >\n            {\n              [...IModelApp.quantityFormatter.quantityTypesRegistry.keys()].map((key) => {\n                const entry = IModelApp.quantityFormatter.quantityTypesRegistry.get(key)!;\n                const description = entry.description;\n                const label = entry.label;\n                return (\n                  <ListboxItem key={entry.key} className=\"quantity-type-list-entry\" value={entry.key}>\n                    <span className=\"map-source-list-entry-name\" title={description}>{label}</span>\n                  </ListboxItem>\n                );\n              })\n            }\n          </Listbox>\n        </div>\n        <div className=\"right-panel\">\n          {activeFormatterSpec &&\n            <>\n              <div className=\"uifw-quantity-types-right-top\">\n                <div className=\"uifw-quantity-types-right-top-sample\">\n                  <FormatSample formatSpec={activeFormatterSpec} initialMagnitude={1234.56} hideLabels />\n                </div>\n              </div>\n              <div className=\"uifw-quantity-types-formats\">\n                <QuantityFormatPanel onFormatChange={handleOnFormatChanged} quantityType={activeQuantityType} />\n              </div>\n              <div className=\"components-button-panel\">\n                <Button styleType=\"cta\" onClick={handleOnFormatSave} disabled={!saveEnabled}>{setButtonLabel.current}</Button>\n                <Button styleType=\"default\" onClick={handleOnFormatReset} disabled={!clearEnabled}>{clearButtonLabel.current}</Button>\n              </div>\n            </>\n          }\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction SaveFormatModalDialog({ formatProps, quantityType, onDialogCloseArgs, onDialogClose }: { formatProps: FormatProps, quantityType: QuantityTypeKey, onDialogCloseArgs?: any, onDialogClose: (args?: any) => void }) {\n  const [isOpen, setIsOpen] = React.useState(true);\n\n  const handleClose = React.useCallback(() => {\n    setIsOpen(false);\n    ModalDialogManager.closeDialog();\n    onDialogClose && onDialogClose(onDialogCloseArgs);\n  }, [onDialogClose, onDialogCloseArgs]);\n\n  const handleOK = React.useCallback(() => {\n    IModelApp.quantityFormatter.setOverrideFormat(quantityType, formatProps); // eslint-disable-line @typescript-eslint/no-floating-promises\n    handleClose();\n  }, [formatProps, handleClose, quantityType]);\n\n  const handleCancel = React.useCallback(() => {\n    handleClose();\n  }, [handleClose]);\n\n  return (\n    <Dialog\n      title={\"Save Format Changes\"}\n      opened={isOpen}\n      resizable={false}\n      movable={false}\n      modal={true}\n      buttonCluster={[\n        { type: DialogButtonType.Yes, onClick: handleOK },\n        { type: DialogButtonType.No, onClick: handleCancel },\n      ]}\n      onEscape={handleCancel}\n      onClose={handleCancel}\n      onOutsideClick={handleCancel}\n      minHeight={150}\n      maxHeight={400}\n      maxWidth={400}\n      minWidth={200}\n    >\n      <div className=\"modal-dialog2\">\n        Do you want to save changes to format before changing to another type?\n      </div>\n    </Dialog >\n  );\n}\n"]}