@itwin/appui-react 3.0.0-dev.100

package/lib/esm/appui-react/statusfields/SectionsField.scss

@@ -0,0 +1,37 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/itwinui-css/scss/style/space";
+@import "~@itwin/itwinui-css/scss/style/typography";
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+
+.uifw-sections-footer-contents {
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+  padding: 8px;
+}
+
+.uifw-uifw-sections-toggle-container {
+  display: flex;
+  margin: $iui-xs;
+  justify-content: center;
+}
+
+.uifw-sections-toggle {
+  align-self: center;
+  margin-right: $iui-s;
+}
+
+.uifw-sections-label {
+  @include iui-font-family;
+  color: $buic-text-color;
+  font-size: $iui-font-size;
+  align-self: center;
+  margin: $iui-s;
+
+  &.disabled {
+    color: $buic-text-color-disabled;
+  }
+}

package/lib/esm/appui-react/statusfields/SelectionInfo.d.ts

@@ -0,0 +1,27 @@
+/** @packageDocumentation
+ * @module StatusBar
+ */
+import "./SelectionInfo.scss";
+import * as React from "react";
+import { StatusFieldProps } from "./StatusFieldProps";
+/** Defines properties supported by the SelectionInfo Field Component.
+ */
+interface SelectionInfoFieldProps extends StatusFieldProps {
+    selectionCount: number;
+}
+/**
+ * Status Field React component. This component is designed to be specified in a status bar definition.
+ * It is used to display the number of selected items based on the Presentation Rules Selection Manager.
+ */
+declare class SelectionInfoFieldComponent extends React.Component<SelectionInfoFieldProps> {
+    constructor(props: SelectionInfoFieldProps);
+    render(): React.ReactNode;
+}
+/**
+ * SelectionInfo Status Field React component. This component is designed to be specified in a status bar definition.
+ * It is used to display the number of selected items based on the Presentation Rules Selection Manager.
+ * This React component is Redux connected.
+ * @public
+ */ export declare const SelectionInfoField: import("react-redux").ConnectedComponent<typeof SelectionInfoFieldComponent, import("react-redux").Omit<React.ClassAttributes<SelectionInfoFieldComponent> & SelectionInfoFieldProps, "selectionCount">>;
+export {};
+//# sourceMappingURL=SelectionInfo.d.ts.map

package/lib/esm/appui-react/statusfields/SelectionInfo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionInfo.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SelectionInfo.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD;GACG;AACH,UAAU,uBAAwB,SAAQ,gBAAgB;IACxD,cAAc,EAAE,MAAM,CAAC;CACxB;AAED;;;GAGG;AACH,cAAM,2BAA4B,SAAQ,KAAK,CAAC,SAAS,CAAC,uBAAuB,CAAC;gBAEpE,KAAK,EAAE,uBAAuB;IAI1B,MAAM,IAAI,KAAK,CAAC,SAAS;CAY1C;AAaD;;;;;GAKG,CACH,eAAO,MAAM,kBAAkB,0MAAwD,CAAC"}

package/lib/esm/appui-react/statusfields/SelectionInfo.js

@@ -0,0 +1,45 @@
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+import "./SelectionInfo.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { connect } from "react-redux";
+import { Icon } from "@itwin/core-react";
+import { FooterIndicator } from "@itwin/appui-layout-react";
+import { UiFramework } from "../UiFramework";
+/**
+ * Status Field React component. This component is designed to be specified in a status bar definition.
+ * It is used to display the number of selected items based on the Presentation Rules Selection Manager.
+ */
+class SelectionInfoFieldComponent extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return (React.createElement(FooterIndicator, { className: classnames("uifw-statusFields-selectionInfo", this.props.className), style: this.props.style, isInFooterMode: this.props.isInFooterMode },
+            React.createElement(Icon, { iconSpec: "icon-cursor" }),
+            this.props.selectionCount.toString()));
+    }
+}
+/** 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.frameworkStateKey]; // since app sets up key, don't hard-code name
+    /* istanbul ignore next */
+    if (!frameworkState)
+        return undefined;
+    return { selectionCount: frameworkState.sessionState.numItemsSelected };
+}
+// we declare the variable and export that rather than using export default.
+/**
+ * SelectionInfo Status Field React component. This component is designed to be specified in a status bar definition.
+ * It is used to display the number of selected items based on the Presentation Rules Selection Manager.
+ * This React component is Redux connected.
+ * @public
+ */ // eslint-disable-next-line @typescript-eslint/naming-convention
+export const SelectionInfoField = connect(mapStateToProps)(SelectionInfoFieldComponent);
+//# sourceMappingURL=SelectionInfo.js.map

package/lib/esm/appui-react/statusfields/SelectionInfo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionInfo.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SelectionInfo.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAC9B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAS7C;;;GAGG;AACH,MAAM,2BAA4B,SAAQ,KAAK,CAAC,SAAkC;IAEhF,YAAY,KAA8B;QACxC,KAAK,CAAC,KAAK,CAAC,CAAC;IACf,CAAC;IAEe,MAAM;QACpB,OAAO,CACL,oBAAC,eAAe,IACd,SAAS,EAAE,UAAU,CAAC,iCAAiC,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAC9E,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc;YAExC,oBAAC,IAAI,IAAC,QAAQ,EAAE,aAAa,GAAI;YACjC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,EAAE,CACrB,CACnB,CAAC;IACJ,CAAC;CACF;AAED,+GAA+G;AAC/G,SAAS,eAAe,CAAC,KAAU;IACjC,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC,CAAE,8CAA8C;IAC5G,0BAA0B;IAC1B,IAAI,CAAC,cAAc;QACjB,OAAO,SAAS,CAAC;IAEnB,OAAO,EAAE,cAAc,EAAE,cAAc,CAAC,YAAY,CAAC,gBAAgB,EAAE,CAAC;AAC1E,CAAC;AAED,4EAA4E;AAC5E;;;;;GAKG,CAAC,gEAAgE;AACpE,MAAM,CAAC,MAAM,kBAAkB,GAAG,OAAO,CAAC,eAAe,CAAC,CAAC,2BAA2B,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 \"./SelectionInfo.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { Icon } from \"@itwin/core-react\";\r\nimport { FooterIndicator } from \"@itwin/appui-layout-react\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport { StatusFieldProps } from \"./StatusFieldProps\";\r\n\r\n/** Defines properties supported by the SelectionInfo Field Component.\r\n */\r\ninterface SelectionInfoFieldProps extends StatusFieldProps {\r\n  selectionCount: number;\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 */\r\nclass SelectionInfoFieldComponent extends React.Component<SelectionInfoFieldProps> {\r\n\r\n  constructor(props: SelectionInfoFieldProps) {\r\n    super(props);\r\n  }\r\n\r\n  public override render(): React.ReactNode {\r\n    return (\r\n      <FooterIndicator\r\n        className={classnames(\"uifw-statusFields-selectionInfo\", this.props.className)}\r\n        style={this.props.style}\r\n        isInFooterMode={this.props.isInFooterMode}\r\n      >\r\n        {<Icon iconSpec={\"icon-cursor\"} />}\r\n        {this.props.selectionCount.toString()}\r\n      </FooterIndicator>\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 { selectionCount: frameworkState.sessionState.numItemsSelected };\r\n}\r\n\r\n// we declare the variable and export that rather than using export default.\r\n/**\r\n * SelectionInfo 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 * This React component is Redux connected.\r\n * @public\r\n */ // eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const SelectionInfoField = connect(mapStateToProps)(SelectionInfoFieldComponent);\r\n"]}

package/lib/esm/appui-react/statusfields/SelectionInfo.scss

@@ -0,0 +1,15 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/appui-layout-react/lib/cjs/appui-layout-react/footer/_variables";
+
+.uifw-statusFields-selectionInfo {
+  .icon {
+    color: $icon-color;
+    font-size: $icon-size;
+    padding-right: 4px;
+  }
+
+  min-width: 6em;
+}

package/lib/esm/appui-react/statusfields/SelectionScope.d.ts

@@ -0,0 +1,37 @@
+/** @packageDocumentation
+ * @module StatusBar
+ */
+import "./SelectionScope.scss";
+import * as React from "react";
+import { PresentationSelectionScope } from "../redux/SessionState";
+import { StatusFieldProps } from "./StatusFieldProps";
+/** Defines properties supported by the SelectionScopeField Component.
+ * @public
+ */
+interface SelectionScopeFieldProps extends StatusFieldProps {
+    activeSelectionScope: string;
+    availableSelectionScopes: PresentationSelectionScope[];
+}
+/**
+ * Status Field React component. This component is designed to be specified in a status bar definition.
+ * It is used to display the number of selected items based on the Presentation Rules Selection Manager.
+ * The IModelApp should call either UiFramework.setIModelConnection or SyncUiEventDispatcher.initializeConnectionEvents
+ * with the active iModelConnection each time a new iModel is opened so the selection scope data is properly updated
+ * in the Redux state.
+ * @public
+ */
+declare class SelectionScopeFieldComponent extends React.Component<SelectionScopeFieldProps> {
+    private _label;
+    private _toolTip;
+    constructor(props: SelectionScopeFieldProps);
+    private _updateSelectValue;
+    render(): React.ReactNode;
+}
+/**
+ * SelectionScopeField React component. This component is designed to be specified in a status bar definition. It will
+ * display the active selection scope that is used by the PresentationManager to determine what elements are added to the selection nap mode.
+ * This React component is Redux connected.
+ * @public
+ */ export declare const SelectionScopeField: import("react-redux").ConnectedComponent<typeof SelectionScopeFieldComponent, import("react-redux").Omit<React.ClassAttributes<SelectionScopeFieldComponent> & SelectionScopeFieldProps, "availableSelectionScopes" | "activeSelectionScope">>;
+export {};
+//# sourceMappingURL=SelectionScope.d.ts.map

package/lib/esm/appui-react/statusfields/SelectionScope.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionScope.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SelectionScope.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAEnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD;;GAEG;AACH,UAAU,wBAAyB,SAAQ,gBAAgB;IAEzD,oBAAoB,EAAE,MAAM,CAAC;IAC7B,wBAAwB,EAAE,0BAA0B,EAAE,CAAC;CACxD;AAED;;;;;;;GAOG;AACH,cAAM,4BAA6B,SAAQ,KAAK,CAAC,SAAS,CAAC,wBAAwB,CAAC;IAClF,OAAO,CAAC,MAAM,CAAsD;IACpE,OAAO,CAAC,QAAQ,CAAwD;gBAE5D,KAAK,EAAE,wBAAwB;IAI3C,OAAO,CAAC,kBAAkB,CAKxB;IAEc,MAAM,IAAI,KAAK,CAAC,SAAS;CA0B1C;AAaD;;;;;GAKG,CACH,eAAO,MAAM,mBAAmB,gPAAyD,CAAC"}

package/lib/esm/appui-react/statusfields/SelectionScope.js

@@ -0,0 +1,63 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module StatusBar
+ */
+import "./SelectionScope.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { connect } from "react-redux";
+import { FooterIndicator } from "@itwin/appui-layout-react";
+import { Select } from "@itwin/itwinui-react";
+import { UiFramework } from "../UiFramework";
+/**
+ * Status Field React component. This component is designed to be specified in a status bar definition.
+ * It is used to display the number of selected items based on the Presentation Rules Selection Manager.
+ * The IModelApp should call either UiFramework.setIModelConnection or SyncUiEventDispatcher.initializeConnectionEvents
+ * with the active iModelConnection each time a new iModel is opened so the selection scope data is properly updated
+ * in the Redux state.
+ * @public
+ */
+class SelectionScopeFieldComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this._label = UiFramework.translate("selectionScopeField.label");
+        this._toolTip = UiFramework.translate("selectionScopeField.toolTip");
+        this._updateSelectValue = (newValue) => {
+            // istanbul ignore else
+            if (newValue) {
+                UiFramework.setActiveSelectionScope(newValue);
+            }
+        };
+    }
+    render() {
+        const scopeOptions = this.props.availableSelectionScopes.map((scope) => {
+            return { value: scope.id, label: scope.label };
+        });
+        return (React.createElement(FooterIndicator, { className: classnames("uifw-statusFields-selectionScope", this.props.className), style: this.props.style, isInFooterMode: this.props.isInFooterMode },
+            this.props.isInFooterMode &&
+                React.createElement("label", { className: "uifw-statusFields-selectionScope-label" },
+                    this._label,
+                    ":"),
+            React.createElement(Select, { className: "uifw-statusFields-selectionScope-selector", value: this.props.activeSelectionScope, options: scopeOptions, onChange: this._updateSelectValue, "data-testid": "components-selectionScope-selector", title: this._toolTip })));
+    }
+}
+/** 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.frameworkStateKey]; // since app sets up key, don't hard-code name
+    /* istanbul ignore next */
+    if (!frameworkState)
+        return undefined;
+    return { activeSelectionScope: frameworkState.sessionState.activeSelectionScope, availableSelectionScopes: frameworkState.sessionState.availableSelectionScopes };
+}
+// we declare the variable and export that rather than using export default.
+/**
+ * SelectionScopeField React component. This component is designed to be specified in a status bar definition. It will
+ * display the active selection scope that is used by the PresentationManager to determine what elements are added to the selection nap mode.
+ * This React component is Redux connected.
+ * @public
+ */ // eslint-disable-next-line @typescript-eslint/naming-convention
+export const SelectionScopeField = connect(mapStateToProps)(SelectionScopeFieldComponent);
+//# sourceMappingURL=SelectionScope.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionScope.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SelectionScope.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAgB,MAAM,sBAAsB,CAAC;AAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAY7C;;;;;;;GAOG;AACH,MAAM,4BAA6B,SAAQ,KAAK,CAAC,SAAmC;IAIlF,YAAY,KAA+B;QACzC,KAAK,CAAC,KAAK,CAAC,CAAC;QAJP,WAAM,GAAG,WAAW,CAAC,SAAS,CAAC,2BAA2B,CAAC,CAAC;QAC5D,aAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,6BAA6B,CAAC,CAAC;QAMhE,uBAAkB,GAAG,CAAC,QAAgB,EAAE,EAAE;YAChD,uBAAuB;YACvB,IAAI,QAAQ,EAAE;gBACZ,WAAW,CAAC,uBAAuB,CAAC,QAAQ,CAAC,CAAC;aAC/C;QACH,CAAC,CAAC;IAPF,CAAC;IASe,MAAM;QACpB,MAAM,YAAY,GAA2B,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,CAAC,KAAiC,EAAE,EAAE;YACzH,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC;QACjD,CAAC,CAAC,CAAC;QAEH,OAAO,CACL,oBAAC,eAAe,IACd,SAAS,EAAE,UAAU,CAAC,kCAAkC,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAC/E,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc;YAExC,IAAI,CAAC,KAAK,CAAC,cAAc;gBACxB,+BAAO,SAAS,EAAC,wCAAwC;oBACtD,IAAI,CAAC,MAAM;wBACN;YAEV,oBAAC,MAAM,IACL,SAAS,EAAC,2CAA2C,EACrD,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,oBAAoB,EACtC,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,IAAI,CAAC,kBAAkB,iBACrB,oCAAoC,EAChD,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAI,CACT,CACpB,CAAC;IACJ,CAAC;CACF;AAED,+GAA+G;AAC/G,SAAS,eAAe,CAAC,KAAU;IACjC,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,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;AACpE,MAAM,CAAC,MAAM,mBAAmB,GAAG,OAAO,CAAC,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, SelectOption } from \"@itwin/itwinui-react\";\r\nimport { PresentationSelectionScope } from \"../redux/SessionState\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport { StatusFieldProps } from \"./StatusFieldProps\";\r\n\r\n/** Defines properties supported by the SelectionScopeField Component.\r\n * @public\r\n */\r\ninterface SelectionScopeFieldProps extends StatusFieldProps {\r\n\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\nclass SelectionScopeFieldComponent extends React.Component<SelectionScopeFieldProps> {\r\n  private _label = UiFramework.translate(\"selectionScopeField.label\");\r\n  private _toolTip = UiFramework.translate(\"selectionScopeField.toolTip\");\r\n\r\n  constructor(props: SelectionScopeFieldProps) {\r\n    super(props);\r\n  }\r\n\r\n  private _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  public override render(): React.ReactNode {\r\n    const scopeOptions: SelectOption<string>[] = this.props.availableSelectionScopes.map((scope: PresentationSelectionScope) => {\r\n      return { value: scope.id, label: scope.label };\r\n    });\r\n\r\n    return (\r\n      <FooterIndicator\r\n        className={classnames(\"uifw-statusFields-selectionScope\", this.props.className)}\r\n        style={this.props.style}\r\n        isInFooterMode={this.props.isInFooterMode}\r\n      >\r\n        {this.props.isInFooterMode &&\r\n          <label className=\"uifw-statusFields-selectionScope-label\">\r\n            {this._label}:\r\n          </label>\r\n        }\r\n        <Select\r\n          className=\"uifw-statusFields-selectionScope-selector\"\r\n          value={this.props.activeSelectionScope}\r\n          options={scopeOptions}\r\n          onChange={this._updateSelectValue}\r\n          data-testid=\"components-selectionScope-selector\"\r\n          title={this._toolTip} />\r\n      </FooterIndicator >\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 { 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"]}

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

@@ -0,0 +1,38 @@
+/*---------------------------------------------------------------------------------------------
+* 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/select/select";
+@import "~@itwin/appui-layout-react/lib/cjs/appui-layout-react/footer/variables";
+@import "~@itwin/itwinui-css/scss/style/typography";
+
+.uifw-statusFields-selectionScope {
+  $font-size-medium: $iui-font-size-small;
+  $font-size-small: $iui-font-size-small - 1px;
+  overflow: hidden;
+  padding-right: 0px;
+
+  >.uifw-statusFields-selectionScope-label {
+    display: inline;
+    padding-right: 4px;
+
+    @include for-tablet-portrait-down {
+      display: none;
+      padding-right: 0px;
+    }
+  }
+
+  >.uifw-statusFields-selectionScope-selector {
+    min-width: 130px;
+
+    @include for-tablet-portrait-down {
+      font-size: $font-size-medium;
+    }
+
+    @include for-phone-only {
+      font-size: $font-size-small;
+    }
+
+  }
+
+}

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

@@ -0,0 +1,51 @@
+/** @packageDocumentation
+ * @module StatusBar
+ */
+import * as React from "react";
+import { StatusFieldProps } from "./StatusFieldProps";
+/** Defines properties supported by the SnapMode Field Component.
+ */
+interface SnapModeFieldProps extends StatusFieldProps {
+    snapMode: number;
+    setSnapMode: (mode: number) => any;
+}
+interface SnapModeFieldState {
+    target: HTMLElement | null;
+}
+/**
+ * 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.
+ */
+declare class SnapModeFieldComponent extends React.Component<SnapModeFieldProps, SnapModeFieldState> {
+    private _className;
+    private _snapModeFieldArray;
+    private _indicator;
+    private _title;
+    readonly state: SnapModeFieldState;
+    constructor(props: SnapModeFieldProps);
+    /** Return icon class name for a specific snapMode. */
+    private getSnapModeIconNameFromMode;
+    /** Standard React render method. */
+    render(): React.ReactNode;
+    private _handleTargetRef;
+    private _handleClose;
+    private _handleOutsideClick;
+    /** Return array of SnapRow elements, one for each support snap mode. This array will populate the pop-up used
+     * to select a SnapMode.
+     */
+    private getSnapEntries;
+    /** Called when user clicks on a Snap Mode entry in the pop-up window. */
+    private _handleSnapModeFieldClick;
+    /** Called when user click on field in status bar which triggers the pop-up to open. */
+    private _handleSnapModeIndicatorClick;
+    /** Opens the pop-up window. */
+    private setOpenWidget;
+}
+/**
+ * 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
+ */ export declare const SnapModeField: import("react-redux").ConnectedComponent<typeof SnapModeFieldComponent, import("react-redux").Omit<React.ClassAttributes<SnapModeFieldComponent> & SnapModeFieldProps, "setSnapMode" | "snapMode">>;
+export {};
+//# sourceMappingURL=SnapMode.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SnapMode.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SnapMode.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD;GACG;AACH,UAAU,kBAAmB,SAAQ,gBAAgB;IACnD,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,GAAG,CAAC;CACpC;AASD,UAAU,kBAAkB;IAC1B,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;CAC5B;AAED;;;GAGG;AACH,cAAM,sBAAuB,SAAQ,KAAK,CAAC,SAAS,CAAC,kBAAkB,EAAE,kBAAkB,CAAC;IAC1F,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,mBAAmB,CAQzB;IACF,OAAO,CAAC,UAAU,CAAqC;IACvD,OAAO,CAAC,MAAM,CAAmD;IAEjE,SAAyB,KAAK,EAAE,kBAAkB,CAEhD;gBAEU,KAAK,EAAE,kBAAkB;IAOrC,sDAAsD;IACtD,OAAO,CAAC,2BAA2B;IAcnC,oCAAoC;IACpB,MAAM,IAAI,KAAK,CAAC,SAAS;IAoCzC,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,YAAY,CAElB;IAEF,OAAO,CAAC,mBAAmB,CAOzB;IAEF;;OAEG;IACH,OAAO,CAAC,cAAc;IAiBtB,yEAAyE;IACzE,OAAO,CAAC,yBAAyB,CAE/B;IAEF,uFAAuF;IACvF,OAAO,CAAC,6BAA6B,CAMnC;IAEF,+BAA+B;IAC/B,OAAO,CAAC,aAAa;CAKtB;AAkBD;;;;;GAKG,CACH,eAAO,MAAM,aAAa,qMAAgE,CAAC"}

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

@@ -0,0 +1,118 @@
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+import * as React from "react";
+import { connect } from "react-redux";
+import { SnapMode } from "@itwin/core-frontend";
+import { FooterPopup, FooterPopupContentType, SnapMode as NZ_SnapMode, Snap, SnapModePanel } from "@itwin/appui-layout-react";
+import { ConfigurableUiActions } from "../configurableui/state";
+import { UiFramework } from "../UiFramework";
+/**
+ * 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.translate("snapModeField.keypoint"), value: SnapMode.NearestKeypoint, iconName: "snaps" },
+            { label: UiFramework.translate("snapModeField.intersection"), value: SnapMode.Intersection, iconName: "snaps-intersection" },
+            { label: UiFramework.translate("snapModeField.center"), value: SnapMode.Center, iconName: "snaps-center" },
+            { label: UiFramework.translate("snapModeField.nearest"), value: SnapMode.Nearest, iconName: "snaps-nearest" },
+            { label: UiFramework.translate("snapModeField.origin"), value: SnapMode.Origin, iconName: "snaps-origin" },
+            { label: UiFramework.translate("snapModeField.midpoint"), value: SnapMode.MidPoint, iconName: "snaps-midpoint" },
+            { label: UiFramework.translate("snapModeField.bisector"), value: SnapMode.Bisector, iconName: "snaps-bisector" },
+        ];
+        this._indicator = React.createRef();
+        this._title = UiFramework.translate("snapModeField.snapMode");
+        this.state = {
+            target: null,
+        };
+        this._handleTargetRef = (target) => {
+            this.setState({ target });
+        };
+        this._handleClose = () => {
+            this.setOpenWidget(null);
+        };
+        this._handleOutsideClick = (e) => {
+            if (!this._indicator.current ||
+                !(e.target instanceof Node) ||
+                this._indicator.current.contains(e.target))
+                return;
+            this._handleClose();
+        };
+        /** Called when user clicks on a Snap Mode entry in the pop-up window. */
+        this._handleSnapModeFieldClick = (snapModeField) => {
+            this.props.setSnapMode(snapModeField);
+        };
+        /** Called when user click on field in status bar which triggers the pop-up to open. */
+        this._handleSnapModeIndicatorClick = () => {
+            const isOpen = this.props.openWidget === this._className;
+            if (isOpen)
+                this.setOpenWidget(null);
+            else
+                this.setOpenWidget(this._className);
+        };
+        const instance = this.constructor;
+        this._className = instance.name;
+    }
+    /** 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("div", { ref: this._handleTargetRef, className: this.props.className, style: this.props.style, title: this._title },
+                React.createElement(NZ_SnapMode, { icon: React.createElement("i", { className: `icon icon-${this.getSnapModeIconNameFromMode(this.props.snapMode)}` }), indicatorRef: this._indicator, isInFooterMode: this.props.isInFooterMode, onClick: this._handleSnapModeIndicatorClick }, this.props.isInFooterMode ? this._title : /* istanbul ignore next */ undefined)),
+            React.createElement(FooterPopup, { contentType: FooterPopupContentType.Panel, isOpen: this.props.openWidget === this._className, onClose: this._handleClose, onOutsideClick: this._handleOutsideClick, target: this.state.target },
+                React.createElement(SnapModePanel, { title: this._title }, this.getSnapEntries()))));
+    }
+    /** 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) => {
+            return (React.createElement(Snap, { key: `SM_${index}`, onClick: () => this._handleSnapModeFieldClick(item.value), isActive: (this.props.snapMode & item.value) === item.value, icon: React.createElement("i", { className: `icon icon-${item.iconName}` }) }, item.label));
+        });
+    }
+    /** Opens the pop-up window. */
+    setOpenWidget(openWidget) {
+        // istanbul ignore else
+        if (this.props.onOpenWidget)
+            this.props.onOpenWidget(openWidget);
+    }
+}
+// Used by Redux to map dispatch functions to props entry. This requires SnapModeFieldProps interface above to include a setSnapMode entry */
+const mapDispatch = {
+    setSnapMode: 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.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
+export const SnapModeField = connect(mapStateToProps, mapDispatch)(SnapModeFieldComponent);
+//# sourceMappingURL=SnapMode.js.map

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

@@ -0,0 +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 { FooterPopup, FooterPopupContentType, SnapMode as NZ_SnapMode, Snap, SnapModePanel } from \"@itwin/appui-layout-react\";\r\nimport { ConfigurableUiActions } from \"../configurableui/state\";\r\nimport { StatusBarFieldId } from \"../statusbar/StatusBarWidgetControl\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport { StatusFieldProps } from \"./StatusFieldProps\";\r\n\r\n// cSpell:ignore multione\r\n/** Defines properties supported by the SnapMode Field Component.\r\n */\r\ninterface SnapModeFieldProps extends StatusFieldProps {\r\n  snapMode: number;\r\n  setSnapMode: (mode: number) => any;\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\ninterface SnapModeFieldState {\r\n  target: HTMLElement | null;\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\nclass SnapModeFieldComponent extends React.Component<SnapModeFieldProps, SnapModeFieldState> {\r\n  private _className: string;\r\n  private _snapModeFieldArray: SnapModeFieldEntry[] = [\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  private _indicator = React.createRef<HTMLDivElement>();\r\n  private _title = UiFramework.translate(\"snapModeField.snapMode\");\r\n\r\n  public override readonly state: SnapModeFieldState = {\r\n    target: null,\r\n  };\r\n\r\n  constructor(props: SnapModeFieldProps) {\r\n    super(props);\r\n\r\n    const instance = this.constructor;\r\n    this._className = instance.name;\r\n  }\r\n\r\n  /** Return icon class name for a specific snapMode. */\r\n  private getSnapModeIconNameFromMode(snapMode: number): string {\r\n    for (const mode of this._snapModeFieldArray) {\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  }\r\n\r\n  /** Standard React render method. */\r\n  public override render(): React.ReactNode {\r\n    return (\r\n      <>\r\n        <div ref={this._handleTargetRef}\r\n          className={this.props.className}\r\n          style={this.props.style}\r\n          title={this._title}\r\n        >\r\n          <NZ_SnapMode\r\n            icon={\r\n              <i className={`icon icon-${this.getSnapModeIconNameFromMode(this.props.snapMode)}`} />\r\n            }\r\n            indicatorRef={this._indicator}\r\n            isInFooterMode={this.props.isInFooterMode}\r\n            onClick={this._handleSnapModeIndicatorClick}\r\n          >\r\n            {this.props.isInFooterMode ? this._title : /* istanbul ignore next */ undefined}\r\n          </NZ_SnapMode>\r\n        </div>\r\n        <FooterPopup\r\n          contentType={FooterPopupContentType.Panel}\r\n          isOpen={this.props.openWidget === this._className}\r\n          onClose={this._handleClose}\r\n          onOutsideClick={this._handleOutsideClick}\r\n          target={this.state.target}\r\n        >\r\n          <SnapModePanel\r\n            title={this._title}\r\n          >\r\n            {this.getSnapEntries()}\r\n          </SnapModePanel>\r\n        </FooterPopup>\r\n      </>\r\n    );\r\n  }\r\n\r\n  private _handleTargetRef = (target: HTMLElement | null) => {\r\n    this.setState({ target });\r\n  };\r\n\r\n  private _handleClose = () => {\r\n    this.setOpenWidget(null);\r\n  };\r\n\r\n  private _handleOutsideClick = (e: MouseEvent) => {\r\n    if (!this._indicator.current ||\r\n      !(e.target instanceof Node) ||\r\n      this._indicator.current.contains(e.target))\r\n      return;\r\n\r\n    this._handleClose();\r\n  };\r\n\r\n  /** Return array of SnapRow elements, one for each support snap mode. This array will populate the pop-up used\r\n   * to select a SnapMode.\r\n   */\r\n  private getSnapEntries(): JSX.Element[] {\r\n    return this._snapModeFieldArray.map((item: SnapModeFieldEntry, index: number) => {\r\n      return (\r\n        <Snap\r\n          key={`SM_${index}`}\r\n          onClick={() => this._handleSnapModeFieldClick(item.value)}\r\n          isActive={(this.props.snapMode & item.value) === item.value}\r\n          icon={\r\n            <i className={`icon icon-${item.iconName}`} />\r\n          }\r\n        >\r\n          {item.label}\r\n        </Snap >\r\n      );\r\n    });\r\n  }\r\n\r\n  /** Called when user clicks on a Snap Mode entry in the pop-up window. */\r\n  private _handleSnapModeFieldClick = (snapModeField: number) => {\r\n    this.props.setSnapMode(snapModeField);\r\n  };\r\n\r\n  /** Called when user click on field in status bar which triggers the pop-up to open. */\r\n  private _handleSnapModeIndicatorClick = () => {\r\n    const isOpen = this.props.openWidget === this._className;\r\n    if (isOpen)\r\n      this.setOpenWidget(null);\r\n    else\r\n      this.setOpenWidget(this._className);\r\n  };\r\n\r\n  /** Opens the pop-up window. */\r\n  private setOpenWidget(openWidget: StatusBarFieldId) {\r\n    // istanbul ignore else\r\n    if (this.props.onOpenWidget)\r\n      this.props.onOpenWidget(openWidget);\r\n  }\r\n}\r\n\r\n// Used by Redux to map dispatch functions to props entry. This requires SnapModeFieldProps interface above to include a setSnapMode entry */\r\nconst mapDispatch = {\r\n  setSnapMode: ConfigurableUiActions.setSnapMode,\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, mapDispatch)(SnapModeFieldComponent);\r\n"]}

package/lib/esm/appui-react/statusfields/StatusFieldProps.d.ts

@@ -0,0 +1,17 @@
+/** @packageDocumentation
+ * @module StatusBar
+ */
+import { CommonProps } from "@itwin/core-react";
+import { StatusBarFieldId } from "../statusbar/StatusBarWidgetControl";
+/** Properties for a StatusBar field component
+ * @public
+ */
+export interface StatusFieldProps extends CommonProps {
+    /** Indicates whether the StatusBar is in footer mode */
+    isInFooterMode: boolean;
+    /** Function called when the widget is opened or closed. */
+    onOpenWidget: (widget: StatusBarFieldId) => void;
+    /** Field Id for open widgets */
+    openWidget: StatusBarFieldId;
+}
+//# sourceMappingURL=StatusFieldProps.d.ts.map

package/lib/esm/appui-react/statusfields/StatusFieldProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusFieldProps.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/StatusFieldProps.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAEvE;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,wDAAwD;IACxD,cAAc,EAAE,OAAO,CAAC;IACxB,2DAA2D;IAC3D,YAAY,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACjD,gCAAgC;IAChC,UAAU,EAAE,gBAAgB,CAAC;CAC9B"}

package/lib/esm/appui-react/statusfields/StatusFieldProps.js

@@ -0,0 +1,9 @@
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+export {};
+//# sourceMappingURL=StatusFieldProps.js.map

package/lib/esm/appui-react/statusfields/StatusFieldProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusFieldProps.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/StatusFieldProps.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG","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 { CommonProps } from \"@itwin/core-react\";\r\nimport { StatusBarFieldId } from \"../statusbar/StatusBarWidgetControl\";\r\n\r\n/** Properties for a StatusBar field component\r\n * @public\r\n */\r\nexport interface StatusFieldProps extends CommonProps {\r\n  /** Indicates whether the StatusBar is in footer mode */\r\n  isInFooterMode: boolean;\r\n  /** Function called when the widget is opened or closed. */\r\n  onOpenWidget: (widget: StatusBarFieldId) => void;\r\n  /** Field Id for open widgets */\r\n  openWidget: StatusBarFieldId;\r\n}\r\n"]}

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

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

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

@@ -0,0 +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,EAAE,aAAa,EAAa,MAAM,oBAAoB,CAAC;AAO9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,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,gBAAgB,EAAE,8BAA8B,CAAC;IAC9G,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,MAAM,CAAqD;gBAEvD,KAAK,EAAE,gBAAgB;IAYnB,iBAAiB;IAIjC,wCAAwC;IACxC,OAAO,CAAC,qBAAqB,CAQ3B;IAGF,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;IA4BtB,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,YAAY,CAElB;IAEF,+BAA+B;IAC/B,OAAO,CAAC,aAAa;CAKtB"}