@itwin/appui-react 4.0.0-dev.12 → 4.0.0-dev.14

package/lib/cjs/appui-react/statusfields/SnapMode.js

@@ -1,127 +1,127 @@
-"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 StatusBar
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SnapModeField = void 0;
-const React = require("react");
-const react_redux_1 = require("react-redux");
-const core_frontend_1 = require("@itwin/core-frontend");
-const appui_layout_react_1 = require("@itwin/appui-layout-react");
-const state_1 = require("../configurableui/state");
-const UiFramework_1 = require("../UiFramework");
-const core_react_1 = require("@itwin/core-react");
-const LabelIndicator_1 = require("../statusbar/LabelIndicator");
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const snaps_svg_1 = require("@bentley/icons-generic/icons/snaps.svg");
-const snaps_intersection_svg_1 = require("@bentley/icons-generic/icons/snaps-intersection.svg");
-const snaps_center_svg_1 = require("@bentley/icons-generic/icons/snaps-center.svg");
-const snaps_nearest_svg_1 = require("@bentley/icons-generic/icons/snaps-nearest.svg");
-const snaps_origin_svg_1 = require("@bentley/icons-generic/icons/snaps-origin.svg");
-const snaps_midpoint_svg_1 = require("@bentley/icons-generic/icons/snaps-midpoint.svg");
-const snaps_bisector_svg_1 = require("@bentley/icons-generic/icons/snaps-bisector.svg");
-/**
- * Snap Mode Field React component. This component is designed to be specified in a status bar definition. It will
- * display the active snap mode that AccuSnap will use and allow the user to select a new snap mode.
- */
-class SnapModeFieldComponent extends React.Component {
-    constructor(props) {
-        super(props);
-        this._snapModeFieldArray = [
-            { label: UiFramework_1.UiFramework.translate("snapModeField.keypoint"), value: core_frontend_1.SnapMode.NearestKeypoint, iconName: "snaps" },
-            { label: UiFramework_1.UiFramework.translate("snapModeField.intersection"), value: core_frontend_1.SnapMode.Intersection, iconName: "snaps-intersection" },
-            { label: UiFramework_1.UiFramework.translate("snapModeField.center"), value: core_frontend_1.SnapMode.Center, iconName: "snaps-center" },
-            { label: UiFramework_1.UiFramework.translate("snapModeField.nearest"), value: core_frontend_1.SnapMode.Nearest, iconName: "snaps-nearest" },
-            { label: UiFramework_1.UiFramework.translate("snapModeField.origin"), value: core_frontend_1.SnapMode.Origin, iconName: "snaps-origin" },
-            { label: UiFramework_1.UiFramework.translate("snapModeField.midpoint"), value: core_frontend_1.SnapMode.MidPoint, iconName: "snaps-midpoint" },
-            { label: UiFramework_1.UiFramework.translate("snapModeField.bisector"), value: core_frontend_1.SnapMode.Bisector, iconName: "snaps-bisector" },
-        ];
-        this._title = UiFramework_1.UiFramework.translate("snapModeField.snapMode");
-        this.state = {
-            target: null,
-        };
-        /** Called when user clicks on a Snap Mode entry in the pop-up window. */
-        this._handleSnapModeFieldClick = (snapModeField) => {
-            this.props.setSnapMode(snapModeField);
-        };
-    }
-    /** Return icon class name for a specific snapMode. */
-    getSnapModeIconNameFromMode(snapMode) {
-        for (const mode of this._snapModeFieldArray) {
-            if (mode.value === snapMode)
-                return mode.iconName;
-        }
-        /* istanbul ignore else */
-        if (snapMode > 0)
-            return "snaps-multione";
-        /* istanbul ignore next */
-        return "placeholder";
-    }
-    /** Standard React render method. */
-    render() {
-        return (React.createElement(React.Fragment, null,
-            React.createElement(LabelIndicator_1.StatusBarLabelIndicator, { iconSpec: `${this.getIconFromIconName(`${this.getSnapModeIconNameFromMode(this.props.snapMode)}`)}`, title: this._title, label: this._title, popup: React.createElement(appui_layout_react_1.SnapModePanel, { title: this._title }, this.getSnapEntries()) })));
-    }
-    /** Return an IconSpec with a web component icon to replace the icons that we used to load from the webfont */
-    getIconFromIconName(iconName) {
-        let iconSpec = appui_abstract_1.IconSpecUtilities.createWebComponentIconSpec(snaps_svg_1.default);
-        switch (iconName) {
-            case "snaps":
-                iconSpec = appui_abstract_1.IconSpecUtilities.createWebComponentIconSpec(snaps_svg_1.default);
-                break;
-            case "snaps-intersection":
-                iconSpec = appui_abstract_1.IconSpecUtilities.createWebComponentIconSpec(snaps_intersection_svg_1.default);
-                break;
-            case "snaps-center":
-                iconSpec = appui_abstract_1.IconSpecUtilities.createWebComponentIconSpec(snaps_center_svg_1.default);
-                break;
-            case "snaps-nearest":
-                iconSpec = appui_abstract_1.IconSpecUtilities.createWebComponentIconSpec(snaps_nearest_svg_1.default);
-                break;
-            case "snaps-origin":
-                iconSpec = appui_abstract_1.IconSpecUtilities.createWebComponentIconSpec(snaps_origin_svg_1.default);
-                break;
-            case "snaps-midpoint":
-                iconSpec = appui_abstract_1.IconSpecUtilities.createWebComponentIconSpec(snaps_midpoint_svg_1.default);
-                break;
-            case "snaps-bisector":
-                iconSpec = appui_abstract_1.IconSpecUtilities.createWebComponentIconSpec(snaps_bisector_svg_1.default);
-                break;
-        }
-        return iconSpec;
-    }
-    /** Return array of SnapRow elements, one for each support snap mode. This array will populate the pop-up used
-      * to select a SnapMode.
-      */
-    getSnapEntries() {
-        return this._snapModeFieldArray.map((item, index) => {
-            const iconSpec = this.getIconFromIconName(item.iconName);
-            return (React.createElement(appui_layout_react_1.Snap, { key: `SM_${index}`, onClick: () => this._handleSnapModeFieldClick(item.value), isActive: (this.props.snapMode & item.value) === item.value, icon: React.createElement(core_react_1.Icon, { className: `icon`, iconSpec: iconSpec }) }, item.label));
-        });
-    }
-}
-// Used by Redux to map dispatch functions to props entry. This requires SnapModeFieldProps interface above to include a setSnapMode entry */
-const mapDispatch = {
-    setSnapMode: state_1.ConfigurableUiActions.setSnapMode,
-};
-/** Function used by Redux to map state data in Redux store to props that are used to render this component. */
-function mapStateToProps(state) {
-    const frameworkState = state[UiFramework_1.UiFramework.frameworkStateKey]; // since app sets up key, don't hard-code name
-    /* istanbul ignore next */
-    if (!frameworkState)
-        return undefined;
-    return { snapMode: frameworkState.configurableUiState.snapMode };
-}
-// we declare the variable and export that rather than using export default.
-/**
- * Snap Mode Field React component. This component is designed to be specified in a status bar definition. It will
- * display the active snap mode that AccuSnap will use and allow the user to select a new snap mode.
- * This Field React component is Redux connected.
- * @public
- */ // eslint-disable-next-line @typescript-eslint/naming-convention
-exports.SnapModeField = (0, react_redux_1.connect)(mapStateToProps, mapDispatch)(SnapModeFieldComponent);
+"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 StatusBar
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SnapModeField = void 0;
+const React = require("react");
+const react_redux_1 = require("react-redux");
+const core_frontend_1 = require("@itwin/core-frontend");
+const appui_layout_react_1 = require("@itwin/appui-layout-react");
+const state_1 = require("../configurableui/state");
+const UiFramework_1 = require("../UiFramework");
+const core_react_1 = require("@itwin/core-react");
+const LabelIndicator_1 = require("../statusbar/LabelIndicator");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const snaps_svg_1 = require("@bentley/icons-generic/icons/snaps.svg");
+const snaps_intersection_svg_1 = require("@bentley/icons-generic/icons/snaps-intersection.svg");
+const snaps_center_svg_1 = require("@bentley/icons-generic/icons/snaps-center.svg");
+const snaps_nearest_svg_1 = require("@bentley/icons-generic/icons/snaps-nearest.svg");
+const snaps_origin_svg_1 = require("@bentley/icons-generic/icons/snaps-origin.svg");
+const snaps_midpoint_svg_1 = require("@bentley/icons-generic/icons/snaps-midpoint.svg");
+const snaps_bisector_svg_1 = require("@bentley/icons-generic/icons/snaps-bisector.svg");
+/**
+ * Snap Mode Field React component. This component is designed to be specified in a status bar definition. It will
+ * display the active snap mode that AccuSnap will use and allow the user to select a new snap mode.
+ */
+class SnapModeFieldComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this._snapModeFieldArray = [
+            { label: UiFramework_1.UiFramework.translate("snapModeField.keypoint"), value: core_frontend_1.SnapMode.NearestKeypoint, iconName: "snaps" },
+            { label: UiFramework_1.UiFramework.translate("snapModeField.intersection"), value: core_frontend_1.SnapMode.Intersection, iconName: "snaps-intersection" },
+            { label: UiFramework_1.UiFramework.translate("snapModeField.center"), value: core_frontend_1.SnapMode.Center, iconName: "snaps-center" },
+            { label: UiFramework_1.UiFramework.translate("snapModeField.nearest"), value: core_frontend_1.SnapMode.Nearest, iconName: "snaps-nearest" },
+            { label: UiFramework_1.UiFramework.translate("snapModeField.origin"), value: core_frontend_1.SnapMode.Origin, iconName: "snaps-origin" },
+            { label: UiFramework_1.UiFramework.translate("snapModeField.midpoint"), value: core_frontend_1.SnapMode.MidPoint, iconName: "snaps-midpoint" },
+            { label: UiFramework_1.UiFramework.translate("snapModeField.bisector"), value: core_frontend_1.SnapMode.Bisector, iconName: "snaps-bisector" },
+        ];
+        this._title = UiFramework_1.UiFramework.translate("snapModeField.snapMode");
+        this.state = {
+            target: null,
+        };
+        /** Called when user clicks on a Snap Mode entry in the pop-up window. */
+        this._handleSnapModeFieldClick = (snapModeField) => {
+            this.props.setSnapMode(snapModeField);
+        };
+    }
+    /** Return icon class name for a specific snapMode. */
+    getSnapModeIconNameFromMode(snapMode) {
+        for (const mode of this._snapModeFieldArray) {
+            if (mode.value === snapMode)
+                return mode.iconName;
+        }
+        /* istanbul ignore else */
+        if (snapMode > 0)
+            return "snaps-multione";
+        /* istanbul ignore next */
+        return "placeholder";
+    }
+    /** Standard React render method. */
+    render() {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(LabelIndicator_1.StatusBarLabelIndicator, { iconSpec: `${this.getIconFromIconName(`${this.getSnapModeIconNameFromMode(this.props.snapMode)}`)}`, title: this._title, label: this._title, popup: React.createElement(appui_layout_react_1.SnapModePanel, { title: this._title }, this.getSnapEntries()) })));
+    }
+    /** Return an IconSpec with a web component icon to replace the icons that we used to load from the webfont */
+    getIconFromIconName(iconName) {
+        let iconSpec = appui_abstract_1.IconSpecUtilities.createWebComponentIconSpec(snaps_svg_1.default);
+        switch (iconName) {
+            case "snaps":
+                iconSpec = appui_abstract_1.IconSpecUtilities.createWebComponentIconSpec(snaps_svg_1.default);
+                break;
+            case "snaps-intersection":
+                iconSpec = appui_abstract_1.IconSpecUtilities.createWebComponentIconSpec(snaps_intersection_svg_1.default);
+                break;
+            case "snaps-center":
+                iconSpec = appui_abstract_1.IconSpecUtilities.createWebComponentIconSpec(snaps_center_svg_1.default);
+                break;
+            case "snaps-nearest":
+                iconSpec = appui_abstract_1.IconSpecUtilities.createWebComponentIconSpec(snaps_nearest_svg_1.default);
+                break;
+            case "snaps-origin":
+                iconSpec = appui_abstract_1.IconSpecUtilities.createWebComponentIconSpec(snaps_origin_svg_1.default);
+                break;
+            case "snaps-midpoint":
+                iconSpec = appui_abstract_1.IconSpecUtilities.createWebComponentIconSpec(snaps_midpoint_svg_1.default);
+                break;
+            case "snaps-bisector":
+                iconSpec = appui_abstract_1.IconSpecUtilities.createWebComponentIconSpec(snaps_bisector_svg_1.default);
+                break;
+        }
+        return iconSpec;
+    }
+    /** Return array of SnapRow elements, one for each support snap mode. This array will populate the pop-up used
+      * to select a SnapMode.
+      */
+    getSnapEntries() {
+        return this._snapModeFieldArray.map((item, index) => {
+            const iconSpec = this.getIconFromIconName(item.iconName);
+            return (React.createElement(appui_layout_react_1.Snap, { key: `SM_${index}`, onClick: () => this._handleSnapModeFieldClick(item.value), isActive: (this.props.snapMode & item.value) === item.value, icon: React.createElement(core_react_1.Icon, { className: `icon`, iconSpec: iconSpec }) }, item.label));
+        });
+    }
+}
+// Used by Redux to map dispatch functions to props entry. This requires SnapModeFieldProps interface above to include a setSnapMode entry */
+const mapDispatch = {
+    setSnapMode: state_1.ConfigurableUiActions.setSnapMode,
+};
+/** Function used by Redux to map state data in Redux store to props that are used to render this component. */
+function mapStateToProps(state) {
+    const frameworkState = state[UiFramework_1.UiFramework.frameworkStateKey]; // since app sets up key, don't hard-code name
+    /* istanbul ignore next */
+    if (!frameworkState)
+        return undefined;
+    return { snapMode: frameworkState.configurableUiState.snapMode };
+}
+// we declare the variable and export that rather than using export default.
+/**
+ * Snap Mode Field React component. This component is designed to be specified in a status bar definition. It will
+ * display the active snap mode that AccuSnap will use and allow the user to select a new snap mode.
+ * This Field React component is Redux connected.
+ * @public
+ */ // eslint-disable-next-line @typescript-eslint/naming-convention
+exports.SnapModeField = (0, react_redux_1.connect)(mapStateToProps, mapDispatch)(SnapModeFieldComponent);
 //# sourceMappingURL=SnapMode.js.map

package/lib/cjs/appui-react/statusfields/ViewAttributes.d.ts

@@ -1,31 +1,31 @@
-/** @packageDocumentation
- * @module StatusBar
- */
-import "./ViewAttributes.scss";
-import * as React from "react";
-import { ViewFlagProps } from "@itwin/core-common";
-import { CommonProps } from "@itwin/core-react";
-interface ViewAttributesStatusFieldState {
-    viewFlags: ViewFlagProps;
-    cameraOn: boolean;
-    target: HTMLElement | null;
-}
-/** Widget for showing Checkboxes for View Attributes
- * @beta
- */
-export declare class ViewAttributesStatusField extends React.Component<CommonProps, ViewAttributesStatusFieldState> {
-    private _title;
-    constructor(props: CommonProps);
-    componentDidMount(): void;
-    private updateState;
-    private _handleViewFlagClick;
-    private _handleToggleCamera;
-    private stylizeName;
-    private getViewFlagItem;
-    private getFlagState;
-    private getToggleCameraItem;
-    private getViewFlags;
-    render(): JSX.Element;
-}
-export {};
+/** @packageDocumentation
+ * @module StatusBar
+ */
+import "./ViewAttributes.scss";
+import * as React from "react";
+import { ViewFlagProps } from "@itwin/core-common";
+import { CommonProps } from "@itwin/core-react";
+interface ViewAttributesStatusFieldState {
+    viewFlags: ViewFlagProps;
+    cameraOn: boolean;
+    target: HTMLElement | null;
+}
+/** Widget for showing Checkboxes for View Attributes
+ * @beta
+ */
+export declare class ViewAttributesStatusField extends React.Component<CommonProps, ViewAttributesStatusFieldState> {
+    private _title;
+    constructor(props: CommonProps);
+    componentDidMount(): void;
+    private updateState;
+    private _handleViewFlagClick;
+    private _handleToggleCamera;
+    private stylizeName;
+    private getViewFlagItem;
+    private getFlagState;
+    private getToggleCameraItem;
+    private getViewFlags;
+    render(): JSX.Element;
+}
+export {};
 //# sourceMappingURL=ViewAttributes.d.ts.map

package/lib/cjs/appui-react/statusfields/ViewAttributes.js

@@ -1,94 +1,94 @@
-"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 StatusBar
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ViewAttributesStatusField = void 0;
-require("./ViewAttributes.scss");
-const React = require("react");
-const core_common_1 = require("@itwin/core-common");
-const core_frontend_1 = require("@itwin/core-frontend");
-const itwinui_react_1 = require("@itwin/itwinui-react");
-const UiFramework_1 = require("../UiFramework");
-const LabelIndicator_1 = require("../statusbar/LabelIndicator");
-const Dialog_1 = require("../statusbar/dialog/Dialog");
-const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
-/** Widget for showing Checkboxes for View Attributes
- * @beta
- */
-class ViewAttributesStatusField extends React.Component {
-    constructor(props) {
-        super(props);
-        this._title = UiFramework_1.UiFramework.translate("listTools.viewAttributes");
-        // istanbul ignore next
-        this._handleViewFlagClick = (flagName) => {
-            if (core_frontend_1.IModelApp.viewManager.selectedView) {
-                const props = core_frontend_1.IModelApp.viewManager.selectedView.viewFlags.toJSON();
-                props[flagName] = props[flagName] === undefined ? true : !props[flagName];
-                const viewFlags = core_common_1.ViewFlags.fromJSON(props);
-                core_frontend_1.IModelApp.viewManager.selectedView.viewFlags = viewFlags;
-                this.updateState();
-            }
-        };
-        this._handleToggleCamera = async () => {
-            await core_frontend_1.IModelApp.tools.run("View.ToggleCamera", core_frontend_1.IModelApp.viewManager.selectedView);
-            this.updateState();
-        };
-        this.state = {
-            cameraOn: false,
-            viewFlags: {},
-            target: null,
-        };
-    }
-    componentDidMount() {
-        this.updateState();
-    }
-    // istanbul ignore next
-    updateState() {
-        if (core_frontend_1.IModelApp.viewManager.selectedView) {
-            const viewFlags = { ...core_frontend_1.IModelApp.viewManager.selectedView.view.viewFlags.toJSON() };
-            const cameraOn = core_frontend_1.IModelApp.viewManager.selectedView.isCameraOn;
-            this.setState({
-                viewFlags,
-                cameraOn,
-            });
-        }
-    }
-    // istanbul ignore next
-    stylizeName(name) {
-        name = name.charAt(0).toUpperCase() + name.slice(1);
-        name = name.replace(/([A-Z])/g, " $1").trim();
-        return name;
-    }
-    getViewFlagItem(flagName, value, labelKey) {
-        return React.createElement(itwinui_react_1.Checkbox, { key: flagName, label: labelKey ? core_frontend_1.IModelApp.localization.getLocalizedString(labelKey) : /* istanbul ignore next */ this.stylizeName(flagName), onClick: () => this._handleViewFlagClick(flagName), defaultChecked: value });
-    }
-    getFlagState(flagName) {
-        return this.state.viewFlags.hasOwnProperty(flagName) ? /* istanbul ignore next */ this.state.viewFlags[flagName] : false;
-    }
-    getToggleCameraItem() {
-        return React.createElement(itwinui_react_1.Checkbox, { key: "toggleCamera", label: core_frontend_1.IModelApp.localization.getLocalizedString("UiFramework:listTools.camera"), onClick: this._handleToggleCamera, defaultChecked: this.state.cameraOn });
-    }
-    getViewFlags() {
-        const items = [];
-        items.push(this.getViewFlagItem("acs", this.getFlagState("acs"), "UiFramework:listTools.acs"));
-        items.push(this.getToggleCameraItem());
-        items.push(this.getViewFlagItem("noConstruct", !this.getFlagState("noConstruct"), "UiFramework:listTools.constructions"));
-        items.push(this.getViewFlagItem("hidEdges", this.getFlagState("hidEdges"), "UiFramework:listTools.hidEdges"));
-        items.push(this.getViewFlagItem("monochrome", this.getFlagState("monochrome"), "UiFramework:listTools.monochrome"));
-        items.push(this.getViewFlagItem("visEdges", this.getFlagState("visEdges"), "UiFramework:listTools.visEdges"));
-        items.push(this.getViewFlagItem("ambientOcclusion", this.getFlagState("ambientOcclusion"), "UiFramework:listTools.ambientOcclusion"));
-        items.push(this.getViewFlagItem("shadows", this.getFlagState("shadows"), "UiFramework:listTools.shadows"));
-        items.push(this.getViewFlagItem("backgroundMap", this.getFlagState("backgroundMap"), "UiFramework:listTools.backgroundMap"));
-        return React.createElement("div", { className: "uifw-view-attributes-contents" }, items);
-    }
-    render() {
-        return (React.createElement(LabelIndicator_1.StatusBarLabelIndicator, { iconSpec: React.createElement(itwinui_icons_react_1.SvgWindowSettings, null), title: this._title, popup: React.createElement(Dialog_1.StatusBarDialog, { titleBar: React.createElement(Dialog_1.StatusBarDialog.TitleBar, { title: this._title }) }, this.getViewFlags()) }));
-    }
-}
-exports.ViewAttributesStatusField = ViewAttributesStatusField;
+"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 StatusBar
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewAttributesStatusField = void 0;
+require("./ViewAttributes.scss");
+const React = require("react");
+const core_common_1 = require("@itwin/core-common");
+const core_frontend_1 = require("@itwin/core-frontend");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const UiFramework_1 = require("../UiFramework");
+const LabelIndicator_1 = require("../statusbar/LabelIndicator");
+const Dialog_1 = require("../statusbar/dialog/Dialog");
+const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
+/** Widget for showing Checkboxes for View Attributes
+ * @beta
+ */
+class ViewAttributesStatusField extends React.Component {
+    constructor(props) {
+        super(props);
+        this._title = UiFramework_1.UiFramework.translate("listTools.viewAttributes");
+        // istanbul ignore next
+        this._handleViewFlagClick = (flagName) => {
+            if (core_frontend_1.IModelApp.viewManager.selectedView) {
+                const props = core_frontend_1.IModelApp.viewManager.selectedView.viewFlags.toJSON();
+                props[flagName] = props[flagName] === undefined ? true : !props[flagName];
+                const viewFlags = core_common_1.ViewFlags.fromJSON(props);
+                core_frontend_1.IModelApp.viewManager.selectedView.viewFlags = viewFlags;
+                this.updateState();
+            }
+        };
+        this._handleToggleCamera = async () => {
+            await core_frontend_1.IModelApp.tools.run("View.ToggleCamera", core_frontend_1.IModelApp.viewManager.selectedView);
+            this.updateState();
+        };
+        this.state = {
+            cameraOn: false,
+            viewFlags: {},
+            target: null,
+        };
+    }
+    componentDidMount() {
+        this.updateState();
+    }
+    // istanbul ignore next
+    updateState() {
+        if (core_frontend_1.IModelApp.viewManager.selectedView) {
+            const viewFlags = { ...core_frontend_1.IModelApp.viewManager.selectedView.view.viewFlags.toJSON() };
+            const cameraOn = core_frontend_1.IModelApp.viewManager.selectedView.isCameraOn;
+            this.setState({
+                viewFlags,
+                cameraOn,
+            });
+        }
+    }
+    // istanbul ignore next
+    stylizeName(name) {
+        name = name.charAt(0).toUpperCase() + name.slice(1);
+        name = name.replace(/([A-Z])/g, " $1").trim();
+        return name;
+    }
+    getViewFlagItem(flagName, value, labelKey) {
+        return React.createElement(itwinui_react_1.Checkbox, { key: flagName, label: labelKey ? core_frontend_1.IModelApp.localization.getLocalizedString(labelKey) : /* istanbul ignore next */ this.stylizeName(flagName), onClick: () => this._handleViewFlagClick(flagName), defaultChecked: value });
+    }
+    getFlagState(flagName) {
+        return this.state.viewFlags.hasOwnProperty(flagName) ? /* istanbul ignore next */ this.state.viewFlags[flagName] : false;
+    }
+    getToggleCameraItem() {
+        return React.createElement(itwinui_react_1.Checkbox, { key: "toggleCamera", label: core_frontend_1.IModelApp.localization.getLocalizedString("UiFramework:listTools.camera"), onClick: this._handleToggleCamera, defaultChecked: this.state.cameraOn });
+    }
+    getViewFlags() {
+        const items = [];
+        items.push(this.getViewFlagItem("acs", this.getFlagState("acs"), "UiFramework:listTools.acs"));
+        items.push(this.getToggleCameraItem());
+        items.push(this.getViewFlagItem("noConstruct", !this.getFlagState("noConstruct"), "UiFramework:listTools.constructions"));
+        items.push(this.getViewFlagItem("hidEdges", this.getFlagState("hidEdges"), "UiFramework:listTools.hidEdges"));
+        items.push(this.getViewFlagItem("monochrome", this.getFlagState("monochrome"), "UiFramework:listTools.monochrome"));
+        items.push(this.getViewFlagItem("visEdges", this.getFlagState("visEdges"), "UiFramework:listTools.visEdges"));
+        items.push(this.getViewFlagItem("ambientOcclusion", this.getFlagState("ambientOcclusion"), "UiFramework:listTools.ambientOcclusion"));
+        items.push(this.getViewFlagItem("shadows", this.getFlagState("shadows"), "UiFramework:listTools.shadows"));
+        items.push(this.getViewFlagItem("backgroundMap", this.getFlagState("backgroundMap"), "UiFramework:listTools.backgroundMap"));
+        return React.createElement("div", { className: "uifw-view-attributes-contents" }, items);
+    }
+    render() {
+        return (React.createElement(LabelIndicator_1.StatusBarLabelIndicator, { iconSpec: React.createElement(itwinui_icons_react_1.SvgWindowSettings, null), title: this._title, popup: React.createElement(Dialog_1.StatusBarDialog, { titleBar: React.createElement(Dialog_1.StatusBarDialog.TitleBar, { title: this._title }) }, this.getViewFlags()) }));
+    }
+}
+exports.ViewAttributesStatusField = ViewAttributesStatusField;
 //# sourceMappingURL=ViewAttributes.js.map

package/lib/cjs/appui-react/statusfields/ViewAttributes.scss

@@ -7,8 +7,4 @@
   flex-direction: column;
   padding: 8px;
   overflow-y: auto;
-
-  > .core-checkbox {
-    margin: 2px;
-  }
 }

package/lib/cjs/appui-react/statusfields/tileloading/TileLoadingIndicator.d.ts

@@ -1,32 +1,32 @@
-/** @packageDocumentation
- * @module StatusBar
- */
-import "./TileLoadingIndicator.scss";
-import * as React from "react";
-import { CommonProps } from "@itwin/core-react";
-/** State for the [[TileLoadingIndicator]] component
- * @internal
- */
-interface TileLoadingIndicatorState {
-    label: string;
-    progress: number;
-    enabled: boolean;
-    finished: boolean;
-}
-/** TileLoadingIndicator React component
- * @public
- */
-export declare class TileLoadingIndicator extends React.PureComponent<CommonProps, TileLoadingIndicatorState> {
-    private _removeViewOpenListener?;
-    private _removeOnRenderListener?;
-    constructor(props: CommonProps);
-    private _refreshState;
-    private _update;
-    private _onViewOpen;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    /** Renders TileLoadingIndicator */
-    render(): JSX.Element;
-}
-export {};
+/** @packageDocumentation
+ * @module StatusBar
+ */
+import "./TileLoadingIndicator.scss";
+import * as React from "react";
+import { CommonProps } from "@itwin/core-react";
+/** State for the [[TileLoadingIndicator]] component
+ * @internal
+ */
+interface TileLoadingIndicatorState {
+    label: string;
+    progress: number;
+    enabled: boolean;
+    finished: boolean;
+}
+/** TileLoadingIndicator React component
+ * @public
+ */
+export declare class TileLoadingIndicator extends React.PureComponent<CommonProps, TileLoadingIndicatorState> {
+    private _removeViewOpenListener?;
+    private _removeOnRenderListener?;
+    constructor(props: CommonProps);
+    private _refreshState;
+    private _update;
+    private _onViewOpen;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    /** Renders TileLoadingIndicator */
+    render(): JSX.Element;
+}
+export {};
 //# sourceMappingURL=TileLoadingIndicator.d.ts.map