@itwin/appui-react 4.1.0 → 4.2.0

package/lib/cjs/appui-react/statusfields/SelectionScope.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionScope.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SelectionScope.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,iCAA+B;AAC/B,2CAAoC;AACpC,+BAA+B;AAC/B,6CAAsC;AACtC,kEAA4D;AAC5D,wDAA8C;AAE9C,gDAA6C;AAW7C;;;;;;;GAOG;AACH,SAAS,4BAA4B,CAAC,KAA+B;IACnE,MAAM,KAAK,GAAG,yBAAW,CAAC,SAAS,CAAC,2BAA2B,CAAC,CAAC;IACjE,MAAM,OAAO,GAAG,yBAAW,CAAC,SAAS,CAAC,6BAA6B,CAAC,CAAC;IAErE,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QAC/E,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC;IACjD,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC;IAEtC,MAAM,iBAAiB,GAAG,CAAC,QAAgB,EAAE,EAAE;QAC7C,uBAAuB;QACvB,IAAI,QAAQ,EAAE;YACZ,yBAAW,CAAC,uBAAuB,CAAC,QAAQ,CAAC,CAAC;SAC/C;IACH,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,oCAAe,IACd,SAAS,EAAE,IAAA,oBAAU,EAAC,kCAAkC,EAAE,KAAK,CAAC,SAAS,CAAC,EAC1E,KAAK,EAAE,KAAK,CAAC,KAAK;QAElB,+BAAO,SAAS,EAAC,wCAAwC;YACtD,KAAK;gBACA;QACR,oBAAC,sBAAM,IACL,SAAS,EAAC,2CAA2C,EACrD,KAAK,EAAE,KAAK,CAAC,oBAAoB,EACjC,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,iBAAiB,iBACf,oCAAoC,EAChD,KAAK,EAAE,OAAO,EACd,IAAI,EAAC,OAAO,GAAG,CACA,CACpB,CAAC;AACJ,CAAC;AAED,+GAA+G;AAC/G,SAAS,eAAe,CAAC,KAAU;IACjC,MAAM,cAAc,GAAG,KAAK,CAAC,yBAAW,CAAC,iBAAiB,CAAC,CAAC,CAAE,8CAA8C;IAC5G,0BAA0B;IAC1B,IAAI,CAAC,cAAc;QACjB,OAAO,SAAS,CAAC;IAEnB,OAAO,EAAE,oBAAoB,EAAE,cAAc,CAAC,YAAY,CAAC,oBAAoB,EAAE,wBAAwB,EAAE,cAAc,CAAC,YAAY,CAAC,wBAAwB,EAAE,CAAC;AACpK,CAAC;AAED,4EAA4E;AAC5E;;;;;GAKG,CAAC,gEAAgE;AACvD,QAAA,mBAAmB,GAAG,IAAA,qBAAO,EAAC,eAAe,CAAC,CAAC,4BAA4B,CAAC,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 StatusBar\r\n */\r\n\r\nimport \"./SelectionScope.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { FooterIndicator } from \"@itwin/appui-layout-react\";\r\nimport { Select } from \"@itwin/itwinui-react\";\r\nimport type { PresentationSelectionScope } from \"../redux/SessionState\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport type { CommonProps } from \"@itwin/core-react\";\r\n\r\n/** Defines properties supported by the SelectionScopeField Component.\r\n * @public\r\n */\r\ninterface SelectionScopeFieldProps extends CommonProps {\r\n  activeSelectionScope: string;\r\n  availableSelectionScopes: PresentationSelectionScope[];\r\n}\r\n\r\n/**\r\n * Status Field React component. This component is designed to be specified in a status bar definition.\r\n * It is used to display the number of selected items based on the Presentation Rules Selection Manager.\r\n * The IModelApp should call either UiFramework.setIModelConnection or SyncUiEventDispatcher.initializeConnectionEvents\r\n * with the active iModelConnection each time a new iModel is opened so the selection scope data is properly updated\r\n * in the Redux state.\r\n * @public\r\n */\r\nfunction SelectionScopeFieldComponent(props: SelectionScopeFieldProps) {\r\n  const label = UiFramework.translate(\"selectionScopeField.label\");\r\n  const toolTip = UiFramework.translate(\"selectionScopeField.toolTip\");\r\n\r\n  const options = React.useMemo(() => props.availableSelectionScopes.map((scope) => {\r\n    return { value: scope.id, label: scope.label };\r\n  }), [props.availableSelectionScopes]);\r\n\r\n  const updateSelectValue = (newValue: string) => {\r\n    // istanbul ignore else\r\n    if (newValue) {\r\n      UiFramework.setActiveSelectionScope(newValue);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <FooterIndicator\r\n      className={classnames(\"uifw-statusFields-selectionScope\", props.className)}\r\n      style={props.style}\r\n    >\r\n      <label className=\"uifw-statusFields-selectionScope-label\">\r\n        {label}:\r\n      </label>\r\n      <Select\r\n        className=\"uifw-statusFields-selectionScope-selector\"\r\n        value={props.activeSelectionScope}\r\n        options={options}\r\n        onChange={updateSelectValue}\r\n        data-testid=\"components-selectionScope-selector\"\r\n        title={toolTip}\r\n        size=\"small\" />\r\n    </FooterIndicator >\r\n  );\r\n}\r\n\r\n/** Function used by Redux to map state data in Redux store to props that are used to render this component. */\r\nfunction mapStateToProps(state: any) {\r\n  const frameworkState = state[UiFramework.frameworkStateKey];  // since app sets up key, don't hard-code name\r\n  /* istanbul ignore next */\r\n  if (!frameworkState)\r\n    return undefined;\r\n\r\n  return { activeSelectionScope: frameworkState.sessionState.activeSelectionScope, availableSelectionScopes: frameworkState.sessionState.availableSelectionScopes };\r\n}\r\n\r\n// we declare the variable and export that rather than using export default.\r\n/**\r\n * SelectionScopeField React component. This component is designed to be specified in a status bar definition. It will\r\n * display the active selection scope that is used by the PresentationManager to determine what elements are added to the selection nap mode.\r\n * This React component is Redux connected.\r\n * @public\r\n */ // eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const SelectionScopeField = connect(mapStateToProps)(SelectionScopeFieldComponent);\r\n"]}
+{"version":3,"file":"SelectionScope.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SelectionScope.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,iCAA+B;AAC/B,2CAAoC;AACpC,+BAA+B;AAC/B,6CAAsC;AACtC,kEAA4D;AAC5D,wDAA8C;AAE9C,gDAA6C;AAW7C;;;;;;;GAOG;AACH,SAAS,4BAA4B,CAAC,KAA+B;IACnE,MAAM,KAAK,GAAG,yBAAW,CAAC,SAAS,CAAC,2BAA2B,CAAC,CAAC;IACjE,MAAM,OAAO,GAAG,yBAAW,CAAC,SAAS,CAAC,6BAA6B,CAAC,CAAC;IAErE,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAC3B,GAAG,EAAE,CACH,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QAC3C,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC;IACjD,CAAC,CAAC,EACJ,CAAC,KAAK,CAAC,wBAAwB,CAAC,CACjC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,QAAgB,EAAE,EAAE;QAC7C,uBAAuB;QACvB,IAAI,QAAQ,EAAE;YACZ,yBAAW,CAAC,uBAAuB,CAAC,QAAQ,CAAC,CAAC;SAC/C;IACH,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,oCAAe,IACd,SAAS,EAAE,IAAA,oBAAU,EACnB,kCAAkC,EAClC,KAAK,CAAC,SAAS,CAChB,EACD,KAAK,EAAE,KAAK,CAAC,KAAK;QAElB,+BAAO,SAAS,EAAC,wCAAwC;YAAE,KAAK;gBAAU;QAC1E,oBAAC,sBAAM,IACL,SAAS,EAAC,2CAA2C,EACrD,KAAK,EAAE,KAAK,CAAC,oBAAoB,EACjC,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,iBAAiB,iBACf,oCAAoC,EAChD,KAAK,EAAE,OAAO,EACd,IAAI,EAAC,OAAO,GACZ,CACc,CACnB,CAAC;AACJ,CAAC;AAED,+GAA+G;AAC/G,SAAS,eAAe,CAAC,KAAU;IACjC,MAAM,cAAc,GAAG,KAAK,CAAC,yBAAW,CAAC,iBAAiB,CAAC,CAAC,CAAC,8CAA8C;IAC3G,0BAA0B;IAC1B,IAAI,CAAC,cAAc;QAAE,OAAO,SAAS,CAAC;IAEtC,OAAO;QACL,oBAAoB,EAAE,cAAc,CAAC,YAAY,CAAC,oBAAoB;QACtE,wBAAwB,EACtB,cAAc,CAAC,YAAY,CAAC,wBAAwB;KACvD,CAAC;AACJ,CAAC;AAED,4EAA4E;AAC5E;;;;;GAKG;AACU,QAAA,mBAAmB,GAAG,IAAA,qBAAO,EAAC,eAAe,CAAC,CACzD,4BAA4B,CAC7B,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module StatusBar\n */\n\nimport \"./SelectionScope.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { connect } from \"react-redux\";\nimport { FooterIndicator } from \"@itwin/appui-layout-react\";\nimport { Select } from \"@itwin/itwinui-react\";\nimport type { PresentationSelectionScope } from \"../redux/SessionState\";\nimport { UiFramework } from \"../UiFramework\";\nimport type { CommonProps } from \"@itwin/core-react\";\n\n/** Defines properties supported by the SelectionScopeField Component.\n * @public\n */\ninterface SelectionScopeFieldProps extends CommonProps {\n  activeSelectionScope: string;\n  availableSelectionScopes: PresentationSelectionScope[];\n}\n\n/**\n * Status Field React component. This component is designed to be specified in a status bar definition.\n * It is used to display the number of selected items based on the Presentation Rules Selection Manager.\n * The IModelApp should call either UiFramework.setIModelConnection or SyncUiEventDispatcher.initializeConnectionEvents\n * with the active iModelConnection each time a new iModel is opened so the selection scope data is properly updated\n * in the Redux state.\n * @public\n */\nfunction SelectionScopeFieldComponent(props: SelectionScopeFieldProps) {\n  const label = UiFramework.translate(\"selectionScopeField.label\");\n  const toolTip = UiFramework.translate(\"selectionScopeField.toolTip\");\n\n  const options = React.useMemo(\n    () =>\n      props.availableSelectionScopes.map((scope) => {\n        return { value: scope.id, label: scope.label };\n      }),\n    [props.availableSelectionScopes]\n  );\n\n  const updateSelectValue = (newValue: string) => {\n    // istanbul ignore else\n    if (newValue) {\n      UiFramework.setActiveSelectionScope(newValue);\n    }\n  };\n\n  return (\n    <FooterIndicator\n      className={classnames(\n        \"uifw-statusFields-selectionScope\",\n        props.className\n      )}\n      style={props.style}\n    >\n      <label className=\"uifw-statusFields-selectionScope-label\">{label}:</label>\n      <Select\n        className=\"uifw-statusFields-selectionScope-selector\"\n        value={props.activeSelectionScope}\n        options={options}\n        onChange={updateSelectValue}\n        data-testid=\"components-selectionScope-selector\"\n        title={toolTip}\n        size=\"small\"\n      />\n    </FooterIndicator>\n  );\n}\n\n/** Function used by Redux to map state data in Redux store to props that are used to render this component. */\nfunction mapStateToProps(state: any) {\n  const frameworkState = state[UiFramework.frameworkStateKey]; // since app sets up key, don't hard-code name\n  /* istanbul ignore next */\n  if (!frameworkState) return undefined;\n\n  return {\n    activeSelectionScope: frameworkState.sessionState.activeSelectionScope,\n    availableSelectionScopes:\n      frameworkState.sessionState.availableSelectionScopes,\n  };\n}\n\n// we declare the variable and export that rather than using export default.\n/**\n * SelectionScopeField React component. This component is designed to be specified in a status bar definition. It will\n * display the active selection scope that is used by the PresentationManager to determine what elements are added to the selection nap mode.\n * This React component is Redux connected.\n * @public\n */\nexport const SelectionScopeField = connect(mapStateToProps)(\n  SelectionScopeFieldComponent\n);\n"]}

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

@@ -1,46 +1,46 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/breakpoints";
-@import "~@itwin/appui-layout-react/lib/cjs/appui-layout-react/footer/variables";
-
-.uifw-statusFields-selectionScope {
-  $font-size-medium: var(--iui-font-size-0);
-  $font-size-small: var(--iui-font-size-0) - 1px;
-  overflow: hidden;
-  padding-right: 0px;
-
-  > .uifw-statusFields-selectionScope-label {
-    display: inline;
-    padding-right: 4px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-
-    @include for-tablet-portrait-down {
-      display: none;
-      padding-right: 0px;
-    }
-  }
-
-  > .uifw-statusFields-selectionScope-selector {
-    min-width: 140px;
-    &.iui-select[data-iui-size="small"] {
-      width: auto;
-    }
-
-    @include for-tablet-portrait-down {
-      font-size: $font-size-medium;
-    }
-
-    @include for-phone-only {
-      font-size: $font-size-small;
-    }
-  }
-}
-
-.uifw-statusFields-selectionScope-label {
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/breakpoints";
+@import "~@itwin/appui-layout-react/lib/cjs/appui-layout-react/footer/variables";
+
+.uifw-statusFields-selectionScope {
+  $font-size-medium: var(--iui-font-size-0);
+  $font-size-small: var(--iui-font-size-0) - 1px;
+  overflow: hidden;
+  padding-right: 0px;
+
+  > .uifw-statusFields-selectionScope-label {
+    display: inline;
+    padding-right: 4px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+
+    @include for-tablet-portrait-down {
+      display: none;
+      padding-right: 0px;
+    }
+  }
+
+  > .uifw-statusFields-selectionScope-selector {
+    min-width: 140px;
+    &.iui-select[data-iui-size="small"] {
+      width: auto;
+    }
+
+    @include for-tablet-portrait-down {
+      font-size: $font-size-medium;
+    }
+
+    @include for-phone-only {
+      font-size: $font-size-small;
+    }
+  }
+}
+
+.uifw-statusFields-selectionScope-label {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}

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

@@ -18,6 +18,7 @@ declare function SnapModeFieldComponent(props: SnapModeFieldProps): JSX.Element;
  * 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
- */ export declare const SnapModeField: import("react-redux").ConnectedComponent<typeof SnapModeFieldComponent, import("react-redux").Omit<SnapModeFieldProps, "snapMode">>;
+ */
+export declare const SnapModeField: import("react-redux").ConnectedComponent<typeof SnapModeFieldComponent, import("react-redux").Omit<SnapModeFieldProps, "snapMode">>;
 export {};
 //# sourceMappingURL=SnapMode.d.ts.map

package/lib/cjs/appui-react/statusfields/SnapMode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SnapMode.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SnapMode.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAOH,OAAO,KAAK,EAAE,WAAW,EAAY,MAAM,mBAAmB,CAAC;AAc/D;GACG;AACH,UAAU,kBAAmB,SAAQ,WAAW;IAC9C,QAAQ,EAAE,MAAM,CAAC;CAClB;AAqCD;;;GAGG;AACH,iBAAS,sBAAsB,CAAC,KAAK,EAAE,kBAAkB,eAiDxD;AAaD;;;;;GAKG,CACH,eAAO,MAAM,aAAa,qIAAmD,CAAC"}
+{"version":3,"file":"SnapMode.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SnapMode.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAOH,OAAO,KAAK,EAAE,WAAW,EAAY,MAAM,mBAAmB,CAAC;AAc/D;GACG;AACH,UAAU,kBAAmB,SAAQ,WAAW;IAC9C,QAAQ,EAAE,MAAM,CAAC;CAClB;AAsCD;;;GAGG;AACH,iBAAS,sBAAsB,CAAC,KAAK,EAAE,kBAAkB,eAuFxD;AAYD;;;;;GAKG;AACH,eAAO,MAAM,aAAa,qIAAmD,CAAC"}

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

@@ -1,8 +1,8 @@
 "use strict";
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * 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
  */
@@ -30,7 +30,8 @@ function getIconFromIconName(iconName) {
             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);
+            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);
@@ -56,13 +57,41 @@ function getIconFromIconName(iconName) {
  */
 function SnapModeFieldComponent(props) {
     const snapModes = React.useMemo(() => [
-        { 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" },
+        {
+            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",
+        },
     ], []);
     /** Return icon class name for a specific snapMode. */
     const getSnapModeIconNameFromMode = React.useCallback(function (snapMode) {
@@ -77,7 +106,7 @@ function SnapModeFieldComponent(props) {
         return "placeholder";
     }, [snapModes]);
     const title = UiFramework_1.UiFramework.translate("snapModeField.snapMode");
-    return (React.createElement(LabelIndicator_1.StatusBarLabelIndicator, { iconSpec: getIconFromIconName(getSnapModeIconNameFromMode(props.snapMode)), title: title, label: title, popup: React.createElement(appui_layout_react_1.SnapModePanel, { title: title }, snapModes.map((item, index) => React.createElement(appui_layout_react_1.Snap, { key: `SM_${index}`, onClick: () => UiFramework_1.UiFramework.setAccudrawSnapMode(item.value), isActive: (props.snapMode & item.value) === item.value, icon: React.createElement(core_react_1.Icon, { className: `icon`, iconSpec: getIconFromIconName(item.iconName) }) }, item.label))) }));
+    return (React.createElement(LabelIndicator_1.StatusBarLabelIndicator, { iconSpec: getIconFromIconName(getSnapModeIconNameFromMode(props.snapMode)), title: title, label: title, popup: React.createElement(appui_layout_react_1.SnapModePanel, { title: title }, snapModes.map((item, index) => (React.createElement(appui_layout_react_1.Snap, { key: `SM_${index}`, onClick: () => UiFramework_1.UiFramework.setAccudrawSnapMode(item.value), isActive: (props.snapMode & item.value) === item.value, icon: React.createElement(core_react_1.Icon, { className: `icon`, iconSpec: getIconFromIconName(item.iconName) }) }, item.label)))) }));
 }
 /** Function used by Redux to map state data in Redux store to props that are used to render this component. */
 function mapStateToProps(state) {
@@ -93,6 +122,6 @@ function mapStateToProps(state) {
  * 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)(SnapModeFieldComponent);
 //# sourceMappingURL=SnapMode.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SnapMode.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SnapMode.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module StatusBar\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { SnapMode } from \"@itwin/core-frontend\";\r\nimport { Snap, SnapModePanel } from \"@itwin/appui-layout-react\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport type { CommonProps, IconSpec } from \"@itwin/core-react\";\r\nimport { Icon } from \"@itwin/core-react\";\r\nimport { StatusBarLabelIndicator } from \"../statusbar/LabelIndicator\";\r\nimport { IconSpecUtilities } from \"@itwin/appui-abstract\";\r\nimport snapModeKeypoint from \"@bentley/icons-generic/icons/snaps.svg\";\r\nimport snapModeIntersection from \"@bentley/icons-generic/icons/snaps-intersection.svg\";\r\nimport snapModeCenter from \"@bentley/icons-generic/icons/snaps-center.svg\";\r\nimport snapModeNearest from \"@bentley/icons-generic/icons/snaps-nearest.svg\";\r\nimport snapModeOrigin from \"@bentley/icons-generic/icons/snaps-origin.svg\";\r\nimport snapModeMidpoint from \"@bentley/icons-generic/icons/snaps-midpoint.svg\";\r\nimport snapModeBisector from \"@bentley/icons-generic/icons/snaps-bisector.svg\";\r\n\r\n// cSpell:ignore multione\r\n\r\n/** Defines properties supported by the SnapMode Field Component.\r\n */\r\ninterface SnapModeFieldProps extends CommonProps {\r\n  snapMode: number;\r\n}\r\n\r\n/** Define the properties that will be used to represent the available snap modes. */\r\ninterface SnapModeFieldEntry {\r\n  label: string;\r\n  value: number;\r\n  iconName: string;\r\n}\r\n\r\nfunction getIconFromIconName(iconName: string): IconSpec {\r\n  let iconSpec = IconSpecUtilities.createWebComponentIconSpec(snapModeKeypoint);\r\n  switch (iconName) {\r\n    case \"snaps\":\r\n      iconSpec = IconSpecUtilities.createWebComponentIconSpec(snapModeKeypoint);\r\n      break;\r\n    case \"snaps-intersection\":\r\n      iconSpec = IconSpecUtilities.createWebComponentIconSpec(snapModeIntersection);\r\n      break;\r\n    case \"snaps-center\":\r\n      iconSpec = IconSpecUtilities.createWebComponentIconSpec(snapModeCenter);\r\n      break;\r\n    case \"snaps-nearest\":\r\n      iconSpec = IconSpecUtilities.createWebComponentIconSpec(snapModeNearest);\r\n      break;\r\n    case \"snaps-origin\":\r\n      iconSpec = IconSpecUtilities.createWebComponentIconSpec(snapModeOrigin);\r\n      break;\r\n    case \"snaps-midpoint\":\r\n      iconSpec = IconSpecUtilities.createWebComponentIconSpec(snapModeMidpoint);\r\n      break;\r\n    case \"snaps-bisector\":\r\n      iconSpec = IconSpecUtilities.createWebComponentIconSpec(snapModeBisector);\r\n      break;\r\n  }\r\n  return iconSpec;\r\n}\r\n\r\n/**\r\n * Snap Mode Field React component. This component is designed to be specified in a status bar definition. It will\r\n * display the active snap mode that AccuSnap will use and allow the user to select a new snap mode.\r\n */\r\nfunction SnapModeFieldComponent(props: SnapModeFieldProps) {\r\n  const snapModes: SnapModeFieldEntry[] = React.useMemo(() => [\r\n    { label: UiFramework.translate(\"snapModeField.keypoint\"), value: SnapMode.NearestKeypoint as number, iconName: \"snaps\" },\r\n    { label: UiFramework.translate(\"snapModeField.intersection\"), value: SnapMode.Intersection as number, iconName: \"snaps-intersection\" },\r\n    { label: UiFramework.translate(\"snapModeField.center\"), value: SnapMode.Center as number, iconName: \"snaps-center\" },\r\n    { label: UiFramework.translate(\"snapModeField.nearest\"), value: SnapMode.Nearest as number, iconName: \"snaps-nearest\" },\r\n    { label: UiFramework.translate(\"snapModeField.origin\"), value: SnapMode.Origin as number, iconName: \"snaps-origin\" },\r\n    { label: UiFramework.translate(\"snapModeField.midpoint\"), value: SnapMode.MidPoint as number, iconName: \"snaps-midpoint\" },\r\n    { label: UiFramework.translate(\"snapModeField.bisector\"), value: SnapMode.Bisector as number, iconName: \"snaps-bisector\" },\r\n  ], []);\r\n\r\n  /** Return icon class name for a specific snapMode. */\r\n  const getSnapModeIconNameFromMode = React.useCallback(function (snapMode: number): string {\r\n    for (const mode of snapModes) {\r\n      if (mode.value === snapMode)\r\n        return mode.iconName;\r\n    }\r\n\r\n    /* istanbul ignore else */\r\n    if (snapMode > 0)\r\n      return \"snaps-multione\";\r\n\r\n    /* istanbul ignore next */\r\n    return \"placeholder\";\r\n  }, [snapModes]);\r\n\r\n  const title = UiFramework.translate(\"snapModeField.snapMode\");\r\n  return (\r\n    <StatusBarLabelIndicator\r\n      iconSpec={getIconFromIconName(getSnapModeIconNameFromMode(props.snapMode))}\r\n      title={title}\r\n      label={title}\r\n      popup={\r\n        <SnapModePanel title={title}>\r\n          {snapModes.map((item, index) => <Snap\r\n            key={`SM_${index}`}\r\n            onClick={() => UiFramework.setAccudrawSnapMode(item.value)}\r\n            isActive={(props.snapMode & item.value) === item.value}\r\n            icon={\r\n              <Icon className={`icon`} iconSpec={getIconFromIconName(item.iconName)} />\r\n            }\r\n          >\r\n            {item.label}\r\n          </Snap >\r\n          )}\r\n        </SnapModePanel>\r\n      }\r\n    />\r\n  );\r\n}\r\n\r\n/** Function used by Redux to map state data in Redux store to props that are used to render this component. */\r\nfunction mapStateToProps(state: any) {\r\n  const frameworkState = state[UiFramework.frameworkStateKey];  // since app sets up key, don't hard-code name\r\n  /* istanbul ignore next */\r\n  if (!frameworkState)\r\n    return undefined;\r\n\r\n  return { snapMode: frameworkState.configurableUiState.snapMode };\r\n}\r\n\r\n// we declare the variable and export that rather than using export default.\r\n/**\r\n * Snap Mode Field React component. This component is designed to be specified in a status bar definition. It will\r\n * display the active snap mode that AccuSnap will use and allow the user to select a new snap mode.\r\n * This Field React component is Redux connected.\r\n * @public\r\n */ // eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const SnapModeField = connect(mapStateToProps)(SnapModeFieldComponent);\r\n"]}
+{"version":3,"file":"SnapMode.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SnapMode.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 StatusBar\n */\n\nimport * as React from \"react\";\nimport { connect } from \"react-redux\";\nimport { SnapMode } from \"@itwin/core-frontend\";\nimport { Snap, SnapModePanel } from \"@itwin/appui-layout-react\";\nimport { UiFramework } from \"../UiFramework\";\nimport type { CommonProps, IconSpec } from \"@itwin/core-react\";\nimport { Icon } from \"@itwin/core-react\";\nimport { StatusBarLabelIndicator } from \"../statusbar/LabelIndicator\";\nimport { IconSpecUtilities } from \"@itwin/appui-abstract\";\nimport snapModeKeypoint from \"@bentley/icons-generic/icons/snaps.svg\";\nimport snapModeIntersection from \"@bentley/icons-generic/icons/snaps-intersection.svg\";\nimport snapModeCenter from \"@bentley/icons-generic/icons/snaps-center.svg\";\nimport snapModeNearest from \"@bentley/icons-generic/icons/snaps-nearest.svg\";\nimport snapModeOrigin from \"@bentley/icons-generic/icons/snaps-origin.svg\";\nimport snapModeMidpoint from \"@bentley/icons-generic/icons/snaps-midpoint.svg\";\nimport snapModeBisector from \"@bentley/icons-generic/icons/snaps-bisector.svg\";\n\n// cSpell:ignore multione\n\n/** Defines properties supported by the SnapMode Field Component.\n */\ninterface SnapModeFieldProps extends CommonProps {\n  snapMode: number;\n}\n\n/** Define the properties that will be used to represent the available snap modes. */\ninterface SnapModeFieldEntry {\n  label: string;\n  value: number;\n  iconName: string;\n}\n\nfunction getIconFromIconName(iconName: string): IconSpec {\n  let iconSpec = IconSpecUtilities.createWebComponentIconSpec(snapModeKeypoint);\n  switch (iconName) {\n    case \"snaps\":\n      iconSpec = IconSpecUtilities.createWebComponentIconSpec(snapModeKeypoint);\n      break;\n    case \"snaps-intersection\":\n      iconSpec =\n        IconSpecUtilities.createWebComponentIconSpec(snapModeIntersection);\n      break;\n    case \"snaps-center\":\n      iconSpec = IconSpecUtilities.createWebComponentIconSpec(snapModeCenter);\n      break;\n    case \"snaps-nearest\":\n      iconSpec = IconSpecUtilities.createWebComponentIconSpec(snapModeNearest);\n      break;\n    case \"snaps-origin\":\n      iconSpec = IconSpecUtilities.createWebComponentIconSpec(snapModeOrigin);\n      break;\n    case \"snaps-midpoint\":\n      iconSpec = IconSpecUtilities.createWebComponentIconSpec(snapModeMidpoint);\n      break;\n    case \"snaps-bisector\":\n      iconSpec = IconSpecUtilities.createWebComponentIconSpec(snapModeBisector);\n      break;\n  }\n  return iconSpec;\n}\n\n/**\n * Snap Mode Field React component. This component is designed to be specified in a status bar definition. It will\n * display the active snap mode that AccuSnap will use and allow the user to select a new snap mode.\n */\nfunction SnapModeFieldComponent(props: SnapModeFieldProps) {\n  const snapModes: SnapModeFieldEntry[] = React.useMemo(\n    () => [\n      {\n        label: UiFramework.translate(\"snapModeField.keypoint\"),\n        value: SnapMode.NearestKeypoint as number,\n        iconName: \"snaps\",\n      },\n      {\n        label: UiFramework.translate(\"snapModeField.intersection\"),\n        value: SnapMode.Intersection as number,\n        iconName: \"snaps-intersection\",\n      },\n      {\n        label: UiFramework.translate(\"snapModeField.center\"),\n        value: SnapMode.Center as number,\n        iconName: \"snaps-center\",\n      },\n      {\n        label: UiFramework.translate(\"snapModeField.nearest\"),\n        value: SnapMode.Nearest as number,\n        iconName: \"snaps-nearest\",\n      },\n      {\n        label: UiFramework.translate(\"snapModeField.origin\"),\n        value: SnapMode.Origin as number,\n        iconName: \"snaps-origin\",\n      },\n      {\n        label: UiFramework.translate(\"snapModeField.midpoint\"),\n        value: SnapMode.MidPoint as number,\n        iconName: \"snaps-midpoint\",\n      },\n      {\n        label: UiFramework.translate(\"snapModeField.bisector\"),\n        value: SnapMode.Bisector as number,\n        iconName: \"snaps-bisector\",\n      },\n    ],\n    []\n  );\n\n  /** Return icon class name for a specific snapMode. */\n  const getSnapModeIconNameFromMode = React.useCallback(\n    function (snapMode: number): string {\n      for (const mode of snapModes) {\n        if (mode.value === snapMode) return mode.iconName;\n      }\n\n      /* istanbul ignore else */\n      if (snapMode > 0) return \"snaps-multione\";\n\n      /* istanbul ignore next */\n      return \"placeholder\";\n    },\n    [snapModes]\n  );\n\n  const title = UiFramework.translate(\"snapModeField.snapMode\");\n  return (\n    <StatusBarLabelIndicator\n      iconSpec={getIconFromIconName(\n        getSnapModeIconNameFromMode(props.snapMode)\n      )}\n      title={title}\n      label={title}\n      popup={\n        <SnapModePanel title={title}>\n          {snapModes.map((item, index) => (\n            <Snap\n              key={`SM_${index}`}\n              onClick={() => UiFramework.setAccudrawSnapMode(item.value)}\n              isActive={(props.snapMode & item.value) === item.value}\n              icon={\n                <Icon\n                  className={`icon`}\n                  iconSpec={getIconFromIconName(item.iconName)}\n                />\n              }\n            >\n              {item.label}\n            </Snap>\n          ))}\n        </SnapModePanel>\n      }\n    />\n  );\n}\n\n/** Function used by Redux to map state data in Redux store to props that are used to render this component. */\nfunction mapStateToProps(state: any) {\n  const frameworkState = state[UiFramework.frameworkStateKey]; // since app sets up key, don't hard-code name\n  /* istanbul ignore next */\n  if (!frameworkState) return undefined;\n\n  return { snapMode: frameworkState.configurableUiState.snapMode };\n}\n\n// we declare the variable and export that rather than using export default.\n/**\n * Snap Mode Field React component. This component is designed to be specified in a status bar definition. It will\n * display the active snap mode that AccuSnap will use and allow the user to select a new snap mode.\n * This Field React component is Redux connected.\n * @public\n */\nexport const SnapModeField = connect(mapStateToProps)(SnapModeFieldComponent);\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ViewAttributes.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/ViewAttributes.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAC/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,aAAa,EAAC,MAAM,oBAAoB,CAAC;AAKvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAKrD,UAAU,8BAA8B;IACtC,SAAS,EAAE,aAAa,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;CAC5B;AAED;;GAEG;AACH,qBAAa,yBAA0B,SAAQ,KAAK,CAAC,SAAS,CAAC,WAAW,EAAE,8BAA8B,CAAC;IACzG,OAAO,CAAC,MAAM,CAAqD;gBAEvD,KAAK,EAAE,WAAW;IAUd,iBAAiB;IAKjC,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,oBAAoB,CAQ1B;IAEF,OAAO,CAAC,mBAAmB,CAGzB;IAGF,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,YAAY;IAcJ,MAAM;CAcvB"}
+{"version":3,"file":"ViewAttributes.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/ViewAttributes.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAC/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAKxD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAKrD,UAAU,8BAA8B;IACtC,SAAS,EAAE,aAAa,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;CAC5B;AAED;;GAEG;AACH,qBAAa,yBAA0B,SAAQ,KAAK,CAAC,SAAS,CAC5D,WAAW,EACX,8BAA8B,CAC/B;IACC,OAAO,CAAC,MAAM,CAAqD;gBAEvD,KAAK,EAAE,WAAW;IAUd,iBAAiB;IAKjC,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,oBAAoB,CAY1B;IAEF,OAAO,CAAC,mBAAmB,CAMzB;IAGF,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,eAAe;IAevB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,YAAY;IA8DJ,MAAM;CAevB"}

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

@@ -1,8 +1,8 @@
 "use strict";
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * 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
  */
@@ -28,7 +28,10 @@ class ViewAttributesStatusField extends React.Component {
         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];
+                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();
@@ -50,7 +53,9 @@ class ViewAttributesStatusField extends React.Component {
     // istanbul ignore next
     updateState() {
         if (core_frontend_1.IModelApp.viewManager.selectedView) {
-            const viewFlags = { ...core_frontend_1.IModelApp.viewManager.selectedView.view.viewFlags.toJSON() };
+            const viewFlags = {
+                ...core_frontend_1.IModelApp.viewManager.selectedView.view.viewFlags.toJSON(),
+            };
             const cameraOn = core_frontend_1.IModelApp.viewManager.selectedView.isCameraOn;
             this.setState({
                 viewFlags,
@@ -65,13 +70,17 @@ class ViewAttributesStatusField extends React.Component {
         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 });
+        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;
+        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 });
+        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 = [];

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

@@ -1 +1 @@
-{"version":3,"file":"ViewAttributes.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/ViewAttributes.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module StatusBar\r\n */\r\n\r\nimport \"./ViewAttributes.scss\";\r\nimport * as React from \"react\";\r\nimport type { ViewFlagProps} from \"@itwin/core-common\";\r\nimport { ViewFlags } from \"@itwin/core-common\";\r\nimport { IModelApp } from \"@itwin/core-frontend\";\r\nimport { Checkbox } from \"@itwin/itwinui-react\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport type { CommonProps } from \"@itwin/core-react\";\r\nimport { StatusBarLabelIndicator } from \"../statusbar/LabelIndicator\";\r\nimport { StatusBarDialog } from \"../statusbar/dialog/Dialog\";\r\nimport { SvgWindowSettings } from \"@itwin/itwinui-icons-react\";\r\n\r\ninterface ViewAttributesStatusFieldState {\r\n  viewFlags: ViewFlagProps;\r\n  cameraOn: boolean;\r\n  target: HTMLElement | null;\r\n}\r\n\r\n/** Widget for showing Checkboxes for View Attributes\r\n * @beta\r\n */\r\nexport class ViewAttributesStatusField extends React.Component<CommonProps, ViewAttributesStatusFieldState> {\r\n  private _title = UiFramework.translate(\"listTools.viewAttributes\");\r\n\r\n  constructor(props: CommonProps) {\r\n    super(props);\r\n\r\n    this.state = {\r\n      cameraOn: false,\r\n      viewFlags: {},\r\n      target: null,\r\n    };\r\n  }\r\n\r\n  public override componentDidMount() {\r\n    this.updateState();\r\n  }\r\n\r\n  // istanbul ignore next\r\n  private updateState() {\r\n    if (IModelApp.viewManager.selectedView) {\r\n      const viewFlags: ViewFlagProps = { ...IModelApp.viewManager.selectedView.view.viewFlags.toJSON() };\r\n      const cameraOn = IModelApp.viewManager.selectedView.isCameraOn;\r\n\r\n      this.setState({\r\n        viewFlags,\r\n        cameraOn,\r\n      });\r\n    }\r\n  }\r\n\r\n  // istanbul ignore next\r\n  private _handleViewFlagClick = (flagName: string) => {\r\n    if (IModelApp.viewManager.selectedView) {\r\n      const props: ViewFlagProps = IModelApp.viewManager.selectedView.viewFlags.toJSON();\r\n      (props as any)[flagName] = (props as any)[flagName] === undefined ? true : !(props as any)[flagName];\r\n      const viewFlags = ViewFlags.fromJSON(props);\r\n      IModelApp.viewManager.selectedView.viewFlags = viewFlags;\r\n      this.updateState();\r\n    }\r\n  };\r\n\r\n  private _handleToggleCamera = async () => {\r\n    await IModelApp.tools.run(\"View.ToggleCamera\", IModelApp.viewManager.selectedView);\r\n    this.updateState();\r\n  };\r\n\r\n  // istanbul ignore next\r\n  private stylizeName(name: string) {\r\n    name = name.charAt(0).toUpperCase() + name.slice(1);\r\n    name = name.replace(/([A-Z])/g, \" $1\").trim();\r\n    return name;\r\n  }\r\n\r\n  private getViewFlagItem(flagName: string, value: boolean, labelKey?: string) {\r\n    return <Checkbox key={flagName} label={labelKey ? IModelApp.localization.getLocalizedString(labelKey) : /* istanbul ignore next */ this.stylizeName(flagName)} onClick={() => this._handleViewFlagClick(flagName)} defaultChecked={value} />;\r\n  }\r\n\r\n  private getFlagState(flagName: string) {\r\n    return this.state.viewFlags.hasOwnProperty(flagName) ? /* istanbul ignore next */ (this.state.viewFlags as any)[flagName] : false;\r\n  }\r\n\r\n  private getToggleCameraItem() {\r\n    return <Checkbox key={\"toggleCamera\"} label={IModelApp.localization.getLocalizedString(\"UiFramework:listTools.camera\")} onClick={this._handleToggleCamera} defaultChecked={this.state.cameraOn} />;\r\n  }\r\n\r\n  private getViewFlags() {\r\n    const items: JSX.Element[] = [];\r\n    items.push(this.getViewFlagItem(\"acs\", this.getFlagState(\"acs\"), \"UiFramework:listTools.acs\"));\r\n    items.push(this.getToggleCameraItem());\r\n    items.push(this.getViewFlagItem(\"noConstruct\", !this.getFlagState(\"noConstruct\"), \"UiFramework:listTools.constructions\"));\r\n    items.push(this.getViewFlagItem(\"hidEdges\", this.getFlagState(\"hidEdges\"), \"UiFramework:listTools.hidEdges\"));\r\n    items.push(this.getViewFlagItem(\"monochrome\", this.getFlagState(\"monochrome\"), \"UiFramework:listTools.monochrome\"));\r\n    items.push(this.getViewFlagItem(\"visEdges\", this.getFlagState(\"visEdges\"), \"UiFramework:listTools.visEdges\"));\r\n    items.push(this.getViewFlagItem(\"ambientOcclusion\", this.getFlagState(\"ambientOcclusion\"), \"UiFramework:listTools.ambientOcclusion\"));\r\n    items.push(this.getViewFlagItem(\"shadows\", this.getFlagState(\"shadows\"), \"UiFramework:listTools.shadows\"));\r\n    items.push(this.getViewFlagItem(\"backgroundMap\", this.getFlagState(\"backgroundMap\"), \"UiFramework:listTools.backgroundMap\"));\r\n    return <div className=\"uifw-view-attributes-contents\">{items}</div>;\r\n  }\r\n\r\n  public override render() {\r\n    return (\r\n      <StatusBarLabelIndicator\r\n        iconSpec={<SvgWindowSettings />}\r\n        title={this._title}\r\n        popup={<StatusBarDialog\r\n          titleBar={\r\n            <StatusBarDialog.TitleBar title={this._title} />\r\n          }>\r\n          {this.getViewFlags()}\r\n        </StatusBarDialog>}\r\n      />\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"ViewAttributes.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/ViewAttributes.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 StatusBar\n */\n\nimport \"./ViewAttributes.scss\";\nimport * as React from \"react\";\nimport type { ViewFlagProps } from \"@itwin/core-common\";\nimport { ViewFlags } from \"@itwin/core-common\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { Checkbox } from \"@itwin/itwinui-react\";\nimport { UiFramework } from \"../UiFramework\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { StatusBarLabelIndicator } from \"../statusbar/LabelIndicator\";\nimport { StatusBarDialog } from \"../statusbar/dialog/Dialog\";\nimport { SvgWindowSettings } from \"@itwin/itwinui-icons-react\";\n\ninterface ViewAttributesStatusFieldState {\n  viewFlags: ViewFlagProps;\n  cameraOn: boolean;\n  target: HTMLElement | null;\n}\n\n/** Widget for showing Checkboxes for View Attributes\n * @beta\n */\nexport class ViewAttributesStatusField extends React.Component<\n  CommonProps,\n  ViewAttributesStatusFieldState\n> {\n  private _title = UiFramework.translate(\"listTools.viewAttributes\");\n\n  constructor(props: CommonProps) {\n    super(props);\n\n    this.state = {\n      cameraOn: false,\n      viewFlags: {},\n      target: null,\n    };\n  }\n\n  public override componentDidMount() {\n    this.updateState();\n  }\n\n  // istanbul ignore next\n  private updateState() {\n    if (IModelApp.viewManager.selectedView) {\n      const viewFlags: ViewFlagProps = {\n        ...IModelApp.viewManager.selectedView.view.viewFlags.toJSON(),\n      };\n      const cameraOn = IModelApp.viewManager.selectedView.isCameraOn;\n\n      this.setState({\n        viewFlags,\n        cameraOn,\n      });\n    }\n  }\n\n  // istanbul ignore next\n  private _handleViewFlagClick = (flagName: string) => {\n    if (IModelApp.viewManager.selectedView) {\n      const props: ViewFlagProps =\n        IModelApp.viewManager.selectedView.viewFlags.toJSON();\n      (props as any)[flagName] =\n        (props as any)[flagName] === undefined\n          ? true\n          : !(props as any)[flagName];\n      const viewFlags = ViewFlags.fromJSON(props);\n      IModelApp.viewManager.selectedView.viewFlags = viewFlags;\n      this.updateState();\n    }\n  };\n\n  private _handleToggleCamera = async () => {\n    await IModelApp.tools.run(\n      \"View.ToggleCamera\",\n      IModelApp.viewManager.selectedView\n    );\n    this.updateState();\n  };\n\n  // istanbul ignore next\n  private stylizeName(name: string) {\n    name = name.charAt(0).toUpperCase() + name.slice(1);\n    name = name.replace(/([A-Z])/g, \" $1\").trim();\n    return name;\n  }\n\n  private getViewFlagItem(flagName: string, value: boolean, labelKey?: string) {\n    return (\n      <Checkbox\n        key={flagName}\n        label={\n          labelKey\n            ? IModelApp.localization.getLocalizedString(labelKey)\n            : /* istanbul ignore next */ this.stylizeName(flagName)\n        }\n        onClick={() => this._handleViewFlagClick(flagName)}\n        defaultChecked={value}\n      />\n    );\n  }\n\n  private getFlagState(flagName: string) {\n    return this.state.viewFlags.hasOwnProperty(flagName)\n      ? /* istanbul ignore next */ (this.state.viewFlags as any)[flagName]\n      : false;\n  }\n\n  private getToggleCameraItem() {\n    return (\n      <Checkbox\n        key={\"toggleCamera\"}\n        label={IModelApp.localization.getLocalizedString(\n          \"UiFramework:listTools.camera\"\n        )}\n        onClick={this._handleToggleCamera}\n        defaultChecked={this.state.cameraOn}\n      />\n    );\n  }\n\n  private getViewFlags() {\n    const items: React.ReactElement[] = [];\n    items.push(\n      this.getViewFlagItem(\n        \"acs\",\n        this.getFlagState(\"acs\"),\n        \"UiFramework:listTools.acs\"\n      )\n    );\n    items.push(this.getToggleCameraItem());\n    items.push(\n      this.getViewFlagItem(\n        \"noConstruct\",\n        !this.getFlagState(\"noConstruct\"),\n        \"UiFramework:listTools.constructions\"\n      )\n    );\n    items.push(\n      this.getViewFlagItem(\n        \"hidEdges\",\n        this.getFlagState(\"hidEdges\"),\n        \"UiFramework:listTools.hidEdges\"\n      )\n    );\n    items.push(\n      this.getViewFlagItem(\n        \"monochrome\",\n        this.getFlagState(\"monochrome\"),\n        \"UiFramework:listTools.monochrome\"\n      )\n    );\n    items.push(\n      this.getViewFlagItem(\n        \"visEdges\",\n        this.getFlagState(\"visEdges\"),\n        \"UiFramework:listTools.visEdges\"\n      )\n    );\n    items.push(\n      this.getViewFlagItem(\n        \"ambientOcclusion\",\n        this.getFlagState(\"ambientOcclusion\"),\n        \"UiFramework:listTools.ambientOcclusion\"\n      )\n    );\n    items.push(\n      this.getViewFlagItem(\n        \"shadows\",\n        this.getFlagState(\"shadows\"),\n        \"UiFramework:listTools.shadows\"\n      )\n    );\n    items.push(\n      this.getViewFlagItem(\n        \"backgroundMap\",\n        this.getFlagState(\"backgroundMap\"),\n        \"UiFramework:listTools.backgroundMap\"\n      )\n    );\n    return <div className=\"uifw-view-attributes-contents\">{items}</div>;\n  }\n\n  public override render() {\n    return (\n      <StatusBarLabelIndicator\n        iconSpec={<SvgWindowSettings />}\n        title={this._title}\n        popup={\n          <StatusBarDialog\n            titleBar={<StatusBarDialog.TitleBar title={this._title} />}\n          >\n            {this.getViewFlags()}\n          </StatusBarDialog>\n        }\n      />\n    );\n  }\n}\n"]}

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

@@ -1,10 +1,10 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-.uifw-view-attributes-contents {
-  display: flex;
-  flex-direction: column;
-  padding: 8px;
-  overflow-y: auto;
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+.uifw-view-attributes-contents {
+  display: flex;
+  flex-direction: column;
+  padding: 8px;
+  overflow-y: auto;
+}

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

@@ -1 +1 @@
-{"version":3,"file":"TileLoadingIndicator.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/statusfields/tileloading/TileLoadingIndicator.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,6BAA6B,CAAC;AAErC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;GAEG;AACH,UAAU,yBAAyB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,qBAAa,oBAAqB,SAAQ,KAAK,CAAC,aAAa,CAAC,WAAW,EAAE,yBAAyB,CAAC;IACnG,OAAO,CAAC,uBAAuB,CAAC,CAAa;IAC7C,OAAO,CAAC,uBAAuB,CAAC,CAAa;gBAEjC,KAAK,EAAE,WAAW;IAK9B,OAAO,CAAC,aAAa,CA0BnB;IAEF,OAAO,CAAC,OAAO,CAGb;IAEF,OAAO,CAAC,WAAW,CAIjB;IAEc,iBAAiB;IAiBjB,oBAAoB;IAcpC,mCAAmC;IACnB,MAAM;CAavB"}
+{"version":3,"file":"TileLoadingIndicator.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/statusfields/tileloading/TileLoadingIndicator.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,6BAA6B,CAAC;AAErC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;GAEG;AACH,UAAU,yBAAyB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,qBAAa,oBAAqB,SAAQ,KAAK,CAAC,aAAa,CAC3D,WAAW,EACX,yBAAyB,CAC1B;IACC,OAAO,CAAC,uBAAuB,CAAC,CAAa;IAC7C,OAAO,CAAC,uBAAuB,CAAC,CAAa;gBAEjC,KAAK,EAAE,WAAW;IAK9B,OAAO,CAAC,aAAa,CAmCnB;IAEF,OAAO,CAAC,OAAO,CAGb;IAEF,OAAO,CAAC,WAAW,CAIjB;IAEc,iBAAiB;IAiBjB,oBAAoB;IAWpC,mCAAmC;IACnB,MAAM;CAavB"}

package/lib/cjs/appui-react/statusfields/tileloading/TileLoadingIndicator.js

@@ -1,8 +1,8 @@
 "use strict";
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * 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
  */
@@ -25,7 +25,7 @@ class TileLoadingIndicator extends React.PureComponent {
             const requested = vp.numRequestedTiles;
             const ready = vp.numReadyTiles;
             const total = ready + requested;
-            const pctComplete = (total > 0) ? (ready / total) * 100 : /* istanbul ignore next */ 100;
+            const pctComplete = total > 0 ? (ready / total) * 100 : /* istanbul ignore next */ 100;
             let enabled = this.state.enabled;
             let finished = this.state.finished;
             // istanbul ignore else
@@ -41,7 +41,12 @@ class TileLoadingIndicator extends React.PureComponent {
             // istanbul ignore else
             if (pctComplete !== 100 && finished)
                 finished = false;
-            this.setState({ label: `${ready} / ${total}`, progress: pctComplete, enabled, finished });
+            this.setState({
+                label: `${ready} / ${total}`,
+                progress: pctComplete,
+                enabled,
+                finished,
+            });
         };
         this._update = (vp) => {
             // set progress animation before the next repaint.
@@ -66,7 +71,8 @@ class TileLoadingIndicator extends React.PureComponent {
             this._onViewOpen(vp);
         }
         else {
-            this._removeViewOpenListener = core_frontend_1.IModelApp.viewManager.onViewOpen.addListener(this._onViewOpen);
+            this._removeViewOpenListener =
+                core_frontend_1.IModelApp.viewManager.onViewOpen.addListener(this._onViewOpen);
         }
     }
     componentWillUnmount() {

package/lib/cjs/appui-react/statusfields/tileloading/TileLoadingIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"TileLoadingIndicator.js","sourceRoot":"","sources":["../../../../../src/appui-react/statusfields/tileloading/TileLoadingIndicator.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,uCAAqC;AACrC,2CAAoC;AACpC,+BAA+B;AAC/B,sDAA6C;AAE7C,wDAAiD;AACjD,wDAAsD;AACtD,mDAAgD;AAahD;;GAEG;AACH,MAAa,oBAAqB,SAAQ,KAAK,CAAC,aAAqD;IAInG,YAAY,KAAkB;QAC5B,KAAK,CAAC,KAAK,CAAC,CAAC;QAIP,kBAAa,GAAG,CAAC,EAAY,EAAE,EAAE;YACvC,MAAM,SAAS,GAAG,EAAE,CAAC,iBAAiB,CAAC;YACvC,MAAM,KAAK,GAAG,EAAE,CAAC,aAAa,CAAC;YAC/B,MAAM,KAAK,GAAG,KAAK,GAAG,SAAS,CAAC;YAChC,MAAM,WAAW,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,0BAA0B,CAAC,GAAG,CAAC;YACzF,IAAI,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;YACjC,IAAI,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;YAEnC,uBAAuB;YACvB,IAAI,CAAC,OAAO,IAAI,KAAK,KAAK,CAAC,IAAI,WAAW,KAAK,GAAG;gBAChD,OAAO,GAAG,IAAI,CAAC;YAEjB,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,CAAC,IAAI,WAAW,KAAK,GAAG,CAAC;gBACjD,OAAO,GAAG,KAAK,CAAC;YAElB,IAAI,WAAW,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE;gBACpC,QAAQ,GAAG,IAAI,CAAC;gBAChB,qBAAM,CAAC,QAAQ,CAAC,yBAAW,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,wBAAwB,CAAC,CAAC;gBAC5E,qBAAM,CAAC,QAAQ,CAAC,yBAAW,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,0DAA0D,KAAK,MAAM,KAAK,EAAE,CAAC,CAAC;aACjI;YAED,uBAAuB;YACvB,IAAI,WAAW,KAAK,GAAG,IAAI,QAAQ;gBACjC,QAAQ,GAAG,KAAK,CAAC;YAEnB,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,MAAM,KAAK,EAAE,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,CAAC;QAC5F,CAAC,CAAC;QAEM,YAAO,GAAG,CAAC,EAAY,EAAE,EAAE;YACjC,kDAAkD;YAClD,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,CAAC;QAC3C,CAAC,CAAC;QAEM,gBAAW,GAAG,CAAC,EAAkB,EAAE,EAAE;YAC3C,uBAAuB;YACvB,IAAI,CAAC,uBAAuB,IAAI,IAAI,CAAC,uBAAuB,EAAE,CAAC;YAC/D,IAAI,CAAC,uBAAuB,GAAG,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACvE,CAAC,CAAC;QAxCA,IAAI,CAAC,KAAK,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IAC1E,CAAC;IAyCe,iBAAiB;QAC/B,uBAAuB;QACvB,IAAI,CAAC,yBAAS,CAAC,WAAW;YACxB,OAAO;QAET,wBAAwB;QACxB,MAAM,EAAE,GAAG,yBAAS,CAAC,WAAW,CAAC,YAAY,CAAC;QAE9C,sGAAsG;QACtG,uBAAuB;QACvB,IAAI,EAAE,EAAE;YACN,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;SACtB;aAAM;YACL,IAAI,CAAC,uBAAuB,GAAG,yBAAS,CAAC,WAAW,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;SAC/F;IACH,CAAC;IAEe,oBAAoB;QAClC,uBAAuB;QACvB,IAAI,CAAC,yBAAS,CAAC,WAAW;YACxB,OAAO;QAET,uBAAuB;QACvB,IAAI,IAAI,CAAC,uBAAuB;YAC9B,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAEjC,uBAAuB;QACvB,IAAI,IAAI,CAAC,uBAAuB;YAC9B,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACnC,CAAC;IAED,mCAAmC;IACnB,MAAM;QACpB,MAAM,OAAO,GAAG,IAAA,oBAAU,EACxB,uBAAuB,EACvB,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,+BAA+B,EACrD,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QACF,OAAO,CACL,6BAAK,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YAC9C,kCAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAQ;YAC/B,oBAAC,8BAAc,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAI,CAC1C,CACP,CAAC;IACJ,CAAC;CACF;AA7FD,oDA6FC","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 StatusBar\r\n */\r\n\r\nimport \"./TileLoadingIndicator.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Logger } from \"@itwin/core-bentley\";\r\nimport type { ScreenViewport, Viewport } from \"@itwin/core-frontend\";\r\nimport { IModelApp } from \"@itwin/core-frontend\";\r\nimport { ProgressLinear } from \"@itwin/itwinui-react\";\r\nimport { UiFramework } from \"../../UiFramework\";\r\nimport type { CommonProps } from \"@itwin/core-react\";\r\n\r\n/** State for the [[TileLoadingIndicator]] component\r\n * @internal\r\n */\r\ninterface TileLoadingIndicatorState {\r\n  label: string;\r\n  progress: number;\r\n  enabled: boolean;\r\n  finished: boolean;\r\n}\r\n\r\n/** TileLoadingIndicator React component\r\n * @public\r\n */\r\nexport class TileLoadingIndicator extends React.PureComponent<CommonProps, TileLoadingIndicatorState> {\r\n  private _removeViewOpenListener?: () => void;\r\n  private _removeOnRenderListener?: () => void;\r\n\r\n  constructor(props: CommonProps) {\r\n    super(props);\r\n    this.state = { label: \"\", progress: 0, enabled: false, finished: true };\r\n  }\r\n\r\n  private _refreshState = (vp: Viewport) => {\r\n    const requested = vp.numRequestedTiles;\r\n    const ready = vp.numReadyTiles;\r\n    const total = ready + requested;\r\n    const pctComplete = (total > 0) ? (ready / total) * 100 : /* istanbul ignore next */ 100;\r\n    let enabled = this.state.enabled;\r\n    let finished = this.state.finished;\r\n\r\n    // istanbul ignore else\r\n    if (!enabled && total !== 0 && pctComplete !== 100)\r\n      enabled = true;\r\n\r\n    if (enabled && (total === 0 || pctComplete === 100))\r\n      enabled = false;\r\n\r\n    if (pctComplete === 100 && !finished) {\r\n      finished = true;\r\n      Logger.logTrace(UiFramework.loggerCategory(this), `Tiles Finished Loading`);\r\n      Logger.logTrace(UiFramework.loggerCategory(this), `Tiles Load Report (tiles finished / tiles requested):  ${ready} / ${total}`);\r\n    }\r\n\r\n    // istanbul ignore else\r\n    if (pctComplete !== 100 && finished)\r\n      finished = false;\r\n\r\n    this.setState({ label: `${ready} / ${total}`, progress: pctComplete, enabled, finished });\r\n  };\r\n\r\n  private _update = (vp: Viewport) => {\r\n    // set progress animation before the next repaint.\r\n    setTimeout(() => this._refreshState(vp));\r\n  };\r\n\r\n  private _onViewOpen = (vp: ScreenViewport) => {\r\n    // istanbul ignore next\r\n    this._removeOnRenderListener && this._removeOnRenderListener();\r\n    this._removeOnRenderListener = vp.onRender.addListener(this._update);\r\n  };\r\n\r\n  public override componentDidMount() {\r\n    // istanbul ignore next\r\n    if (!IModelApp.viewManager)\r\n      return;\r\n\r\n    // get selected viewport\r\n    const vp = IModelApp.viewManager.selectedView;\r\n\r\n    // if view exists bind update routine to onRender loop, otherwise do so once the onViewOpen event runs\r\n    // istanbul ignore else\r\n    if (vp) {\r\n      this._onViewOpen(vp);\r\n    } else {\r\n      this._removeViewOpenListener = IModelApp.viewManager.onViewOpen.addListener(this._onViewOpen);\r\n    }\r\n  }\r\n\r\n  public override componentWillUnmount() {\r\n    // istanbul ignore next\r\n    if (!IModelApp.viewManager)\r\n      return;\r\n\r\n    // istanbul ignore next\r\n    if (this._removeViewOpenListener)\r\n      this._removeViewOpenListener();\r\n\r\n    // istanbul ignore else\r\n    if (this._removeOnRenderListener)\r\n      this._removeOnRenderListener();\r\n  }\r\n\r\n  /** Renders TileLoadingIndicator */\r\n  public override render() {\r\n    const classes = classnames(\r\n      \"uifw-tile-loading-bar\",\r\n      this.state.enabled && \"uifw-tile-loading-bar-visible\",\r\n      this.props.className,\r\n    );\r\n    return (\r\n      <div className={classes} style={this.props.style}>\r\n        <span>{this.state.label}</span>\r\n        <ProgressLinear value={this.state.progress} />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"TileLoadingIndicator.js","sourceRoot":"","sources":["../../../../../src/appui-react/statusfields/tileloading/TileLoadingIndicator.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,uCAAqC;AACrC,2CAAoC;AACpC,+BAA+B;AAC/B,sDAA6C;AAE7C,wDAAiD;AACjD,wDAAsD;AACtD,mDAAgD;AAahD;;GAEG;AACH,MAAa,oBAAqB,SAAQ,KAAK,CAAC,aAG/C;IAIC,YAAY,KAAkB;QAC5B,KAAK,CAAC,KAAK,CAAC,CAAC;QAIP,kBAAa,GAAG,CAAC,EAAY,EAAE,EAAE;YACvC,MAAM,SAAS,GAAG,EAAE,CAAC,iBAAiB,CAAC;YACvC,MAAM,KAAK,GAAG,EAAE,CAAC,aAAa,CAAC;YAC/B,MAAM,KAAK,GAAG,KAAK,GAAG,SAAS,CAAC;YAChC,MAAM,WAAW,GACf,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,0BAA0B,CAAC,GAAG,CAAC;YACrE,IAAI,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;YACjC,IAAI,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;YAEnC,uBAAuB;YACvB,IAAI,CAAC,OAAO,IAAI,KAAK,KAAK,CAAC,IAAI,WAAW,KAAK,GAAG;gBAAE,OAAO,GAAG,IAAI,CAAC;YAEnE,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,CAAC,IAAI,WAAW,KAAK,GAAG,CAAC;gBAAE,OAAO,GAAG,KAAK,CAAC;YAErE,IAAI,WAAW,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE;gBACpC,QAAQ,GAAG,IAAI,CAAC;gBAChB,qBAAM,CAAC,QAAQ,CACb,yBAAW,CAAC,cAAc,CAAC,IAAI,CAAC,EAChC,wBAAwB,CACzB,CAAC;gBACF,qBAAM,CAAC,QAAQ,CACb,yBAAW,CAAC,cAAc,CAAC,IAAI,CAAC,EAChC,0DAA0D,KAAK,MAAM,KAAK,EAAE,CAC7E,CAAC;aACH;YAED,uBAAuB;YACvB,IAAI,WAAW,KAAK,GAAG,IAAI,QAAQ;gBAAE,QAAQ,GAAG,KAAK,CAAC;YAEtD,IAAI,CAAC,QAAQ,CAAC;gBACZ,KAAK,EAAE,GAAG,KAAK,MAAM,KAAK,EAAE;gBAC5B,QAAQ,EAAE,WAAW;gBACrB,OAAO;gBACP,QAAQ;aACT,CAAC,CAAC;QACL,CAAC,CAAC;QAEM,YAAO,GAAG,CAAC,EAAY,EAAE,EAAE;YACjC,kDAAkD;YAClD,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,CAAC;QAC3C,CAAC,CAAC;QAEM,gBAAW,GAAG,CAAC,EAAkB,EAAE,EAAE;YAC3C,uBAAuB;YACvB,IAAI,CAAC,uBAAuB,IAAI,IAAI,CAAC,uBAAuB,EAAE,CAAC;YAC/D,IAAI,CAAC,uBAAuB,GAAG,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACvE,CAAC,CAAC;QAjDA,IAAI,CAAC,KAAK,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IAC1E,CAAC;IAkDe,iBAAiB;QAC/B,uBAAuB;QACvB,IAAI,CAAC,yBAAS,CAAC,WAAW;YAAE,OAAO;QAEnC,wBAAwB;QACxB,MAAM,EAAE,GAAG,yBAAS,CAAC,WAAW,CAAC,YAAY,CAAC;QAE9C,sGAAsG;QACtG,uBAAuB;QACvB,IAAI,EAAE,EAAE;YACN,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;SACtB;aAAM;YACL,IAAI,CAAC,uBAAuB;gBAC1B,yBAAS,CAAC,WAAW,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;SAClE;IACH,CAAC;IAEe,oBAAoB;QAClC,uBAAuB;QACvB,IAAI,CAAC,yBAAS,CAAC,WAAW;YAAE,OAAO;QAEnC,uBAAuB;QACvB,IAAI,IAAI,CAAC,uBAAuB;YAAE,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAEjE,uBAAuB;QACvB,IAAI,IAAI,CAAC,uBAAuB;YAAE,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACnE,CAAC;IAED,mCAAmC;IACnB,MAAM;QACpB,MAAM,OAAO,GAAG,IAAA,oBAAU,EACxB,uBAAuB,EACvB,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,+BAA+B,EACrD,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QACF,OAAO,CACL,6BAAK,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YAC9C,kCAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAQ;YAC/B,oBAAC,8BAAc,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAI,CAC1C,CACP,CAAC;IACJ,CAAC;CACF;AAtGD,oDAsGC","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 StatusBar\n */\n\nimport \"./TileLoadingIndicator.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Logger } from \"@itwin/core-bentley\";\nimport type { ScreenViewport, Viewport } from \"@itwin/core-frontend\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { ProgressLinear } from \"@itwin/itwinui-react\";\nimport { UiFramework } from \"../../UiFramework\";\nimport type { CommonProps } from \"@itwin/core-react\";\n\n/** State for the [[TileLoadingIndicator]] component\n * @internal\n */\ninterface TileLoadingIndicatorState {\n  label: string;\n  progress: number;\n  enabled: boolean;\n  finished: boolean;\n}\n\n/** TileLoadingIndicator React component\n * @public\n */\nexport class TileLoadingIndicator extends React.PureComponent<\n  CommonProps,\n  TileLoadingIndicatorState\n> {\n  private _removeViewOpenListener?: () => void;\n  private _removeOnRenderListener?: () => void;\n\n  constructor(props: CommonProps) {\n    super(props);\n    this.state = { label: \"\", progress: 0, enabled: false, finished: true };\n  }\n\n  private _refreshState = (vp: Viewport) => {\n    const requested = vp.numRequestedTiles;\n    const ready = vp.numReadyTiles;\n    const total = ready + requested;\n    const pctComplete =\n      total > 0 ? (ready / total) * 100 : /* istanbul ignore next */ 100;\n    let enabled = this.state.enabled;\n    let finished = this.state.finished;\n\n    // istanbul ignore else\n    if (!enabled && total !== 0 && pctComplete !== 100) enabled = true;\n\n    if (enabled && (total === 0 || pctComplete === 100)) enabled = false;\n\n    if (pctComplete === 100 && !finished) {\n      finished = true;\n      Logger.logTrace(\n        UiFramework.loggerCategory(this),\n        `Tiles Finished Loading`\n      );\n      Logger.logTrace(\n        UiFramework.loggerCategory(this),\n        `Tiles Load Report (tiles finished / tiles requested):  ${ready} / ${total}`\n      );\n    }\n\n    // istanbul ignore else\n    if (pctComplete !== 100 && finished) finished = false;\n\n    this.setState({\n      label: `${ready} / ${total}`,\n      progress: pctComplete,\n      enabled,\n      finished,\n    });\n  };\n\n  private _update = (vp: Viewport) => {\n    // set progress animation before the next repaint.\n    setTimeout(() => this._refreshState(vp));\n  };\n\n  private _onViewOpen = (vp: ScreenViewport) => {\n    // istanbul ignore next\n    this._removeOnRenderListener && this._removeOnRenderListener();\n    this._removeOnRenderListener = vp.onRender.addListener(this._update);\n  };\n\n  public override componentDidMount() {\n    // istanbul ignore next\n    if (!IModelApp.viewManager) return;\n\n    // get selected viewport\n    const vp = IModelApp.viewManager.selectedView;\n\n    // if view exists bind update routine to onRender loop, otherwise do so once the onViewOpen event runs\n    // istanbul ignore else\n    if (vp) {\n      this._onViewOpen(vp);\n    } else {\n      this._removeViewOpenListener =\n        IModelApp.viewManager.onViewOpen.addListener(this._onViewOpen);\n    }\n  }\n\n  public override componentWillUnmount() {\n    // istanbul ignore next\n    if (!IModelApp.viewManager) return;\n\n    // istanbul ignore next\n    if (this._removeViewOpenListener) this._removeViewOpenListener();\n\n    // istanbul ignore else\n    if (this._removeOnRenderListener) this._removeOnRenderListener();\n  }\n\n  /** Renders TileLoadingIndicator */\n  public override render() {\n    const classes = classnames(\n      \"uifw-tile-loading-bar\",\n      this.state.enabled && \"uifw-tile-loading-bar-visible\",\n      this.props.className\n    );\n    return (\n      <div className={classes} style={this.props.style}>\n        <span>{this.state.label}</span>\n        <ProgressLinear value={this.state.progress} />\n      </div>\n    );\n  }\n}\n"]}

package/lib/cjs/appui-react/statusfields/tileloading/TileLoadingIndicator.scss

@@ -1,45 +1,45 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/breakpoints";
-
-.uifw-tile-loading-bar {
-  $font-size-medium: var(--iui-font-size-0);
-  $font-size-small: var(--iui-font-size-0) - 1px;
-
-  transition: opacity 0.3s ease-in;
-  opacity: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 12em;
-
-  > span {
-    font-size: $font-size-medium;
-    margin-top: 6px;
-    position: relative;
-  }
-
-  > .iui-progress-indicator-linear {
-    width: 100%;
-    flex: 1;
-  }
-
-  @include for-small-desktop-down {
-    width: 9em;
-  }
-
-  @include for-tablet-portrait-down {
-    font-size: $font-size-medium;
-  }
-
-  @include for-phone-only {
-    font-size: $font-size-small;
-    width: 6em;
-  }
-}
-
-.uifw-tile-loading-bar-visible {
-  opacity: 1;
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/breakpoints";
+
+.uifw-tile-loading-bar {
+  $font-size-medium: var(--iui-font-size-0);
+  $font-size-small: var(--iui-font-size-0) - 1px;
+
+  transition: opacity 0.3s ease-in;
+  opacity: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 12em;
+
+  > span {
+    font-size: $font-size-medium;
+    margin-top: 6px;
+    position: relative;
+  }
+
+  > .iui-progress-indicator-linear {
+    width: 100%;
+    flex: 1;
+  }
+
+  @include for-small-desktop-down {
+    width: 9em;
+  }
+
+  @include for-tablet-portrait-down {
+    font-size: $font-size-medium;
+  }
+
+  @include for-phone-only {
+    font-size: $font-size-small;
+    width: 6em;
+  }
+}
+
+.uifw-tile-loading-bar-visible {
+  opacity: 1;
+}